譯者注：拋磚引玉一篇趨勢(shì)淺文。此文提煉的比較精辟，讓人看完不由覺(jué)得“確實(shí)如此”。相比其他很多幾十條泛泛而談、泛泛而用的趨勢(shì)文章來(lái)說(shuō)，算是精品哦。另外，文中有很多優(yōu)秀網(wǎng)站案例，也值得我們學(xué)習(xí)。

2012年,用戶界面技術(shù)持續(xù)不斷發(fā)展，常常有效地模糊了設(shè)計(jì)、可用性以及技術(shù)之間的界限，從而為用戶帶來(lái)了可用性高、愉悅性強(qiáng)的綜合體驗(yàn)。例 如，無(wú)限滾動(dòng)是一個(gè)讓用戶擁有更加無(wú)間斷連續(xù)體驗(yàn)的技術(shù)。類(lèi)似的，網(wǎng)頁(yè)排版技術(shù)的進(jìn)步不僅體現(xiàn)在視覺(jué)上，也體現(xiàn)在可以更加清晰地傳達(dá)信息。

? 1.單頁(yè)網(wǎng)站

單頁(yè)網(wǎng)站隨處可見(jiàn)。大背景圖片、豐富的插圖和動(dòng)畫(huà)技術(shù)常常被用來(lái)講故事、娛樂(lè)大眾以及表達(dá)明確清晰的信息。擺脫了傳統(tǒng)網(wǎng)站架構(gòu)的限制，這種創(chuàng)意 好、視覺(jué)美觀的單頁(yè)網(wǎng)站正蓬勃發(fā)展起來(lái)。Jess and Russ 和 Ben the Bodyguard是我（譯者注：原文作者）很最喜歡的兩個(gè)單頁(yè)網(wǎng)站（想看更多優(yōu)秀案例，請(qǐng)點(diǎn)擊這里）。新的趨勢(shì)無(wú)論合適與否，都將被爭(zhēng)相模仿。這很容易 導(dǎo)致網(wǎng)站風(fēng)格的同質(zhì)化，在某些情況下，還會(huì)讓體驗(yàn)變得很糟糕。當(dāng)然，如果運(yùn)用得當(dāng)，單頁(yè)網(wǎng)站將是很好的選擇。

2. 無(wú)限滾動(dòng)

用戶對(duì)無(wú)限滾動(dòng)應(yīng)該已經(jīng)很熟悉了，可能他們自己還意識(shí)不到。無(wú)限滾動(dòng)非常適合展現(xiàn)零散的、實(shí)時(shí)推送和按時(shí)間排列的信息，像Google images 或 Pinterest這類(lèi)含有大量圖片的網(wǎng)站很好的使用了這項(xiàng)技術(shù)，但是謹(jǐn)慎地執(zhí)行來(lái)避免用戶產(chǎn)生挫敗感很重要。Lookbook也是一個(gè)很好的案例，無(wú)限 滾動(dòng)通過(guò)浮動(dòng)的無(wú)線滾動(dòng)條并結(jié)合一個(gè)“回到頂部”的按鈕，讓用戶既可以不間斷地瀏覽，也能輕松找到其他部分。無(wú)限滾動(dòng)并不是一個(gè)萬(wàn)全之策,所以我們需要考 慮充分才能使用。其實(shí)對(duì)于搜索結(jié)果、長(zhǎng)列表和電子商務(wù)來(lái)說(shuō)，頁(yè)碼標(biāo)注也許才是最好的選擇。

3. 常駐導(dǎo)航

對(duì)于復(fù)雜的網(wǎng)站、長(zhǎng)的滾動(dòng)頁(yè)面或者有功能屬性的工具欄的網(wǎng)站來(lái)說(shuō)，常駐導(dǎo)航是最佳選擇，由于它很容易讓用戶分心，所以需要弱化掉。 New Zealand’s tourism website 是一個(gè)很棒的案例，它只有一個(gè)頂部的導(dǎo)航欄，剩下的地方足夠讓主要部分展示內(nèi)容。Gmail 網(wǎng)站同樣把用戶常用的操作放在了常駐的工具欄上。

4. Web 2.0美學(xué)的逝去

我們發(fā)現(xiàn)，視覺(jué)設(shè)計(jì)的趨勢(shì)開(kāi)始回歸本色。排版和信息層級(jí)上使用平的、清新的和簡(jiǎn)單的方式，已經(jīng)取代了Web2.0時(shí)代那種復(fù)雜、活潑、多層次的風(fēng)格。很多網(wǎng)站和App甚至為了跨設(shè)備和屏幕分辨率舍棄了純CSS樣式那樣生動(dòng)的圖形背景，比如我最喜歡的Basecamp, Dropbox和Smashing Magazine。

5. 排版歸來(lái)

得益于大多數(shù)瀏覽器和設(shè)備渲染字體的技術(shù)越發(fā)成熟，設(shè)計(jì)師可以更加靈活地選擇適合網(wǎng)站風(fēng)格的字體。現(xiàn)在大家已經(jīng)越來(lái)越意識(shí)到內(nèi)容的重要性，因此 如何通過(guò)排版更加有效地傳達(dá)信息也顯得尤為重要。未來(lái)幾年內(nèi)，在移動(dòng)設(shè)備、響應(yīng)式設(shè)計(jì)以及視網(wǎng)膜屏幕中，網(wǎng)站的排版仍然是一個(gè)重要焦點(diǎn)。比如我喜歡的一個(gè) 網(wǎng)站The New Yorker，正文采用了網(wǎng)站標(biāo)準(zhǔn)字體（Times New Roman），再配上設(shè)計(jì)過(guò)的標(biāo)題和導(dǎo)航(字體分別是Irvin, Neutra)，非常漂亮。
2013年，我們將繼續(xù)尋找更多優(yōu)秀的網(wǎng)站案例，它們會(huì)通過(guò)平衡視覺(jué)、可用性以及技術(shù)實(shí)現(xiàn)為用戶帶來(lái)更好的體驗(yàn)。

最后，譯者再附上兩篇關(guān)于2013設(shè)計(jì)趨勢(shì)的文章，有時(shí)間會(huì)再為大家奉上對(duì)應(yīng)的譯文：
http://theindustry.cc/2013/01/07/13-design-trends-for-2013/
——本文跨平臺(tái)、綜合地總結(jié)了13個(gè)設(shè)計(jì)趨勢(shì)
http://www.hongkiat.com/blog/web-design-trend-2012/
http://www.hongkiat.com/blog/web-design-trend-2013/
——作者在2012年和2013年初總結(jié)了當(dāng)年的網(wǎng)站設(shè)計(jì)趨勢(shì)。我們可以來(lái)看看2012年的15條兌現(xiàn)了哪些，哪些還更需要努力，而2013的20條又有哪些新的趨勢(shì)呢？

原文地址：The Top 5 Website UX Trends of 2012
源文地址：http://cdc.tencent.com/?p=7486

================微信推薦================
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：