從2012年看網(wǎng)站體驗(yàn)的五大趨勢(shì)
2012年,用戶界面技術(shù)持續(xù)不斷發(fā)展,常常有效地模糊了設(shè)計(jì)、可用性以及技術(shù)之間的界限,從而為用戶帶來了可用性高、愉悅性強(qiáng)的綜合體驗(yàn)。例如,無限滾動(dòng)是一個(gè)讓用戶擁有更加無間斷連續(xù)體驗(yàn)的技術(shù)。類似的,網(wǎng)頁(yè)排版技術(shù)的進(jìn)步不僅體現(xiàn)在視覺上,也體現(xiàn)在可以更加清晰地傳達(dá)信息。
1.單頁(yè)網(wǎng)站
單頁(yè)網(wǎng)站隨處可見。大背景圖片、豐富的插圖和動(dòng)畫技術(shù)常常被用來講故事、娛樂大眾以及表達(dá)明確清晰的信息。擺脫了傳統(tǒng)網(wǎng)站架構(gòu)的限制,這種創(chuàng)意好、視覺美觀的單頁(yè)網(wǎng)站正蓬勃發(fā)展起來。Jess and Russ 和 Ben the Bodyguard是我(譯者注:原文作者)很最喜歡的兩個(gè)單頁(yè)網(wǎng)站(想看更多優(yōu)秀案例,請(qǐng)點(diǎn)擊這里)。新的趨勢(shì)無論合適與否,都將被爭(zhēng)相模仿。這很容易導(dǎo)致網(wǎng)站風(fēng)格的同質(zhì)化,在某些情況下,還會(huì)讓體驗(yàn)變得很糟糕。當(dāng)然,如果運(yùn)用得當(dāng),單頁(yè)網(wǎng)站將是很好的選擇。
2. 無限滾動(dòng)
用戶對(duì)無限滾動(dòng)應(yīng)該已經(jīng)很熟悉了,可能他們自己還意識(shí)不到。無限滾動(dòng)非常適合展現(xiàn)零散的、實(shí)時(shí)推送和按時(shí)間排列的信息,像Google images 或 Pinterest這類含有大量圖片的網(wǎng)站很好的使用了這項(xiàng)技術(shù),但是謹(jǐn)慎地執(zhí)行來避免用戶產(chǎn)生挫敗感很重要。Lookbook也是一個(gè)很好的案例,無限滾動(dòng)通過浮動(dòng)的無線滾動(dòng)條并結(jié)合一個(gè)“回到頂部”的按鈕,讓用戶既可以不間斷地瀏覽,也能輕松找到其他部分。無限滾動(dòng)并不是一個(gè)萬全之策,所以我們需要考慮充分才能使用。其實(shí)對(duì)于搜索結(jié)果、長(zhǎng)列表和電子商務(wù)來說,頁(yè)碼標(biāo)注也許才是最好的選擇。
3. 常駐導(dǎo)航
對(duì)于復(fù)雜的網(wǎng)站、長(zhǎng)的滾動(dòng)頁(yè)面或者有功能屬性的工具欄的網(wǎng)站來說,常駐導(dǎo)航是最佳選擇,由于它很容易讓用戶分心,所以需要弱化掉。 New Zealand’s tourism website 是一個(gè)很棒的案例,它只有一個(gè)頂部的導(dǎo)航欄,剩下的地方足夠讓主要部分展示內(nèi)容。Gmail 網(wǎng)站同樣把用戶常用的操作放在了常駐的工具欄上。
4. Web 2.0美學(xué)的逝去
我們發(fā)現(xiàn),視覺設(shè)計(jì)的趨勢(shì)開始回歸本色。排版和信息層級(jí)上使用平的、清新的和簡(jiǎn)單的方式,已經(jīng)取代了Web2.0時(shí)代那種復(fù)雜、活潑、多層次的風(fēng)格。很多網(wǎng)站和App甚至為了跨設(shè)備和屏幕分辨率舍棄了純CSS樣式那樣生動(dòng)的圖形背景,比如我最喜歡的Basecamp, Dropbox和Smashing Magazine。
5. 排版歸來
得益于大多數(shù)瀏覽器和設(shè)備渲染字體的技術(shù)越發(fā)成熟,設(shè)計(jì)師可以更加靈活地選擇適合網(wǎng)站風(fēng)格的字體?,F(xiàn)在大家已經(jīng)越來越意識(shí)到內(nèi)容的重要性,因此如何通過排版更加有效地傳達(dá)信息也顯得尤為重要。未來幾年內(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ì)過的標(biāo)題和導(dǎo)航(字體分別是Irvin, Neutra),非常漂亮。
2013年,我們將繼續(xù)尋找更多優(yōu)秀的網(wǎng)站案例,它們會(huì)通過平衡視覺、可用性以及技術(shù)實(shí)現(xiàn)為用戶帶來更好的體驗(yàn)。
本文地址:http://m.likemindfilms.com/tutorial/di1589.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏