您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

2012網(wǎng)站體驗(yàn)設(shè)計(jì)趨勢(shì)回顧(譯文)

用戶界面領(lǐng)域在過去的一年依然不斷發(fā)展,界面設(shè)計(jì)、易用性和技術(shù)之間界限的模糊也造就了更方便也更令人愉悅的整體體驗(yàn)。例如瀑布流形式本身是一個(gè)技術(shù)成果,但同時(shí)也給用戶帶來了更加連續(xù)的體驗(yàn)。這種網(wǎng)頁排布擁有了審美的同時(shí)也給用戶帶來了更加清晰的瀏覽方式。


1、單頁網(wǎng)站

單頁網(wǎng)站隨處可見。超大的背景圖,豐富的畫面細(xì)節(jié)還有用動(dòng)畫來展現(xiàn)出來的更加清晰的故事、媒體信息或者提示信息。在跳出了傳動(dòng)網(wǎng)站結(jié)構(gòu)的限制之后,有創(chuàng)意又美觀的單頁網(wǎng)站發(fā)展的非常繁榮,其中兩個(gè)最喜歡的單頁網(wǎng)站要數(shù)Jess and RussBen the Bodyguard。不過還是人們總是喜歡盲目跟風(fēng),哪怕有些網(wǎng)站甚至根本不適合用單頁這種形式。但是對(duì)于用的好的網(wǎng)站,單頁的形式真的非常棒!


2、瀑布流

 

瀑布流對(duì)于大家來說已經(jīng)非常熟悉了。這種形式對(duì)于沒有層級(jí)結(jié)構(gòu)的信息展示非常適用,既有即時(shí)刷新的形式,又能按照時(shí)間排序。像那些有大量圖片的網(wǎng)站—比如google images或者pinterest都把這項(xiàng)技術(shù)用的很好,最重要的是周密的將設(shè)計(jì)和技術(shù)落地才能讓用戶不會(huì)有挫敗感。Lookbook是另外一個(gè)好例子,和瀑布流一起配了一個(gè)懸浮導(dǎo)航還有一個(gè)返回頂部的按鈕,這樣用戶就可以輕松的到瀑布流的任意一個(gè)部分。瀑布流也同樣不是一個(gè)“全能”的形式,對(duì)于那些有很多復(fù)雜元素需要考慮的網(wǎng)站來說,分頁的形式對(duì)于搜素結(jié)果,顯示列表和電商展示還依然是最好的處理方法。


3、全局導(dǎo)航——“Sticky Nav”

全局導(dǎo)航對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站、長(zhǎng)頁面網(wǎng)站、或者是有功能條的表單類網(wǎng)站來說是最為理想的方式。但一直存在的導(dǎo)航容易分散用戶的注意力,所以最好做的窄一點(diǎn),不明顯一點(diǎn)。一個(gè)超贊的例子就是新西蘭航空的網(wǎng)站,導(dǎo)航始終只占了頂部一條,而將大部分面積留個(gè)內(nèi)容。Gmail同樣也將常用功能作為一個(gè)全局導(dǎo)航欄方便用戶使用。


4、 web2.0 的審美徹底不復(fù)存在

 

我們注意到視覺設(shè)計(jì)上的一種復(fù)古潮流:平面化,干凈,簡(jiǎn)約,并將重點(diǎn)放在了字體設(shè)計(jì),以信息呈現(xiàn)為主導(dǎo),這種的審美代替了傳統(tǒng)web2.0的大圖亮色和透明的質(zhì)感。許多網(wǎng)站和app甚至將軟件背景換成純CSS樣式,以確保在多端都能夠展現(xiàn)這種引人注意的形式。最近最棒的設(shè)計(jì)包括Basecamp,Dropbox,還有Smashing Magazine 的新版設(shè)計(jì)。


5、 字體歸來

 

多虧字體技術(shù)的成熟和大多數(shù)瀏覽器與電子設(shè)備對(duì)字體渲染能力的提高,設(shè)計(jì)師有更多的字體可以選擇也可以更好的控制字體。人們認(rèn)為網(wǎng)站內(nèi)容越來越重重要,那么字體的利用就可以讓內(nèi)容溝通更加的高效。隨著手持屏幕,響應(yīng)式設(shè)計(jì)和更多retina屏幕的發(fā)展,字體將在接下來的幾年繼續(xù)成為關(guān)注重點(diǎn)。一個(gè)最好的例子就是The New Yorker,使用了標(biāo)準(zhǔn)網(wǎng)頁字體(Times New Roman)作為正文字體,并優(yōu)雅的搭配了展示字體(Irvin,Neutra)作為標(biāo)題和導(dǎo)航。

以上是國(guó)外設(shè)計(jì)師對(duì)去年互聯(lián)網(wǎng)頁面的總結(jié),而國(guó)內(nèi)網(wǎng)站的發(fā)展總不可避免的收到影響,同學(xué)們你們?cè)趺纯矗?/p>

原文:http://uxmag.com/articles/the-top-5-website-ux-trends-of-2012

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://pkvc.cn/tutorial/di1612.html
打造扁平化設(shè)計(jì)的5大原則
網(wǎng)頁設(shè)計(jì)細(xì)節(jié)處理心得
圖趣網(wǎng)微信
建議反饋
×