網(wǎng)頁設(shè)計(jì)的8個(gè)趨勢_網(wǎng)頁設(shè)計(jì)教程

推薦：7步改善網(wǎng)頁設(shè)計(jì)和用戶體驗(yàn)!
本文從7個(gè)方面教一些網(wǎng)頁設(shè)計(jì)初學(xué)者迅速改善網(wǎng)站的頁面設(shè)計(jì)和用戶體驗(yàn)。 你是否會經(jīng)常搜索一些網(wǎng)頁，但是發(fā)現(xiàn)無法找到所需要的信息時(shí)便隨即退出？ 你是否會經(jīng)常睜大眼睛去讀取一些網(wǎng)站很小的字？ 當(dāng)一個(gè)網(wǎng)頁需要讓你拖動水平滾動條才能閱讀完文字時(shí)，你有多沮喪？ 設(shè)計(jì)

本文譯自網(wǎng)站設(shè)計(jì)公司weavora.com，介紹了在他們眼里8個(gè)Web網(wǎng)頁設(shè)計(jì)趨勢：單頁面、用照片做背景、色塊設(shè)計(jì)、超大號的圖片、聚焦簡潔、響應(yīng)式設(shè)計(jì)、視差滾動、強(qiáng)調(diào)字體，每個(gè)趨勢后面都附了數(shù)個(gè)案例，相信對網(wǎng)站設(shè)計(jì)師會有一定的參考價(jià)值。

單個(gè)長頁面的設(shè)計(jì)一度不受人待見（無論是客戶還是設(shè)計(jì)師），但現(xiàn)在整個(gè)互聯(lián)網(wǎng)隨處可見。一個(gè)合理的解釋是，用戶現(xiàn)在早已習(xí)慣于使用鼠標(biāo)滾輪了，比起在多個(gè)頁面間來回查看，用滾輪上下瀏覽要省事得多。

包括蘋果在內(nèi)的一些知名大公司也使用了相當(dāng)長的頁面來展示產(chǎn)品，獲得了很不錯(cuò)的效果。

更多例子：

http://www.apple.com/iphone/features/

http://www.visualboxsite.com/

http://www.versapay.com/

http://www.fitbit.com/

http://cageapp.com/

http://www.squarespace.com/

用照片做背景

出于品牌或展示的目的，把照片用作網(wǎng)站的背景，這樣可以形成強(qiáng)烈的視覺表達(dá)效果。這也是為何你能在時(shí)尚、服裝品牌、旅游業(yè)等等行業(yè)看到這樣的設(shè)計(jì)辦法。

更多例子：

http://www.biamar.com

http://alexarts.ru/en/index.html

http://www.davidia-int.hr/

色塊設(shè)計(jì)

這一設(shè)計(jì)方法主要是引入了方塊的網(wǎng)格設(shè)計(jì)，這些方塊要么是純色塊配上文字，要么是方形照片配上文字�！昂啙崱笔俏�引用戶的一大原因。不同的色塊放在一起形成強(qiáng)烈的對比，容易引起用戶的視覺興趣，進(jìn)而繼續(xù)探索下去。

更多例子：

http://dynamit.us/

http://lithium.com/

http://landor.com/

http://www.pepsi.com/

超大號的圖片

這一潮流的興起多少與Mac OS X 圖標(biāo)設(shè)計(jì)的流行有關(guān)。當(dāng)程序員為自己的Mac 程序推出網(wǎng)站時(shí)，這樣配有超大號圖片、突出品牌的設(shè)計(jì)再常見不過。自然地，這一潮流后來也被iOS 開發(fā)者繼承了下來，成為現(xiàn)代設(shè)計(jì)文化的一部分。

更多例子：

http://www.zennaware.com/cornerstone/index.php

http://panic.com/

http://versionsapp.com/

http://www.piictu.com/

http://www.enstore.com/

聚焦簡潔

對簡潔的追求貫穿了整個(gè)2012年，許多的網(wǎng)站開始尋求明快、直觀的設(shè)計(jì)。極簡設(shè)計(jì)旨在通過整合或是刪除多余的頁面實(shí)現(xiàn)簡化，只給用戶需要的東西。極簡設(shè)計(jì)通常會用到大號的加粗字體、以及超大號的圖片，清晰地把重要的東西傳達(dá)出來。

更多例子：

http://basecamp.com/

https://www.dropbox.com/

http://www.checkoutapp.com/

http://www.htc.com/

響應(yīng)式設(shè)計(jì)

隨著手機(jī)和平板設(shè)備越來越多地進(jìn)入人們的生活，響應(yīng)式設(shè)計(jì)也成為了當(dāng)下網(wǎng)站開發(fā)不可忽視的一股力量。一個(gè)可自適應(yīng)任何設(shè)備的網(wǎng)頁是很了不起的。響應(yīng)式設(shè)計(jì)能確保用戶無論是在移動設(shè)備還是在PC上都能按你的意愿瀏覽內(nèi)容。

更多例子：

http://www.nealite.fr/

http://twitter.github.com/bootstrap/

http://www.fork-cms.com/

http://www.floridahospital.com/

視差滾動

所謂“視差滾動 (Parallax Scrolling)”就是讓多層背景以不同的速度移動，形成運(yùn)動視差 3D 效果。隨著越來越多的瀏覽器增加對視差的支持，這一技術(shù)也很有可能會更加流行。

更多例子：

http://benthebodyguard.com/index.php

http://www.tokiolab.it/#/

http://chartbeat.com/

http://inze.it/

http://titanic.q-music.be/

http://www.noleath.com/noleath/

強(qiáng)調(diào)字體

從前，設(shè)計(jì)師所能使用的字體受用戶電腦本地已有的字體所限。現(xiàn)在，借助Google fonts 和Typekit 等服務(wù)，從理論上說，你能使用的字體是無限多的，極大增強(qiáng)了網(wǎng)站設(shè)計(jì)的吸引力。設(shè)計(jì)師利用這一機(jī)會也已有了一段時(shí)間了，越來越多的網(wǎng)站也體現(xiàn)了對字體的重視。甚至有些網(wǎng)站如Typographica，字體就占了整個(gè)網(wǎng)站設(shè)計(jì)的絕大部分，出來的效果也相當(dāng)不錯(cuò)。

更多例子：

http://nicehair.org/

http://bitfoundry.ca/

http://daneden.me/type/

相信以上的這些設(shè)計(jì)方法會流行相當(dāng)長的一段時(shí)間，當(dāng)然，你也可以發(fā)揮創(chuàng)造力，有機(jī)地組合它們，做出優(yōu)秀的網(wǎng)站。

轉(zhuǎn)載自36KR

分享：人人都“懂”交互設(shè)計(jì)
近些年來，隨著交互設(shè)計(jì)概念越來越為人們所熟知，交互設(shè)計(jì)師這個(gè)職位，也已經(jīng)在互聯(lián)網(wǎng)公司里得到廣泛并且專業(yè)化的應(yīng)用對于交互設(shè)計(jì)的定義、目標(biāo)和作用，人們或多或少，都能說出個(gè)八九不離十。即便是行業(yè)外的人，如果跟他說起交互設(shè)計(jì)是做什么的，得到的反饋往往會是：