手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

讓導(dǎo)航更輕便些

2013-10-24    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   www.88yangsc.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://sudasuta.com/cooler-photo.html

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點(diǎn)這里

導(dǎo)航是互聯(lián)網(wǎng)產(chǎn)品中應(yīng)用最廣泛的基礎(chǔ)元素之一,引導(dǎo)用戶了解到網(wǎng)站的內(nèi)容結(jié)構(gòu)進(jìn)而找到所求。作為基礎(chǔ)控件,導(dǎo)航看起來簡單,但卻是產(chǎn)品設(shè)計中最復(fù)雜繁瑣的一部分。因為我們想要讓網(wǎng)站結(jié)構(gòu)更清晰、想要向用戶傳達(dá)所有的信息,所以就賦予了導(dǎo)航越來越多的內(nèi)容,使他們龐大異常,十分糾結(jié)。簡化了,用戶無法了解到頁面結(jié)構(gòu)以及自己的處境,產(chǎn)生困惑;復(fù)雜了,導(dǎo)航臃腫不堪,層巒疊嶂,既不美觀也不好用。

那么,在清晰的信息架構(gòu)下能不能讓導(dǎo)航盡可能的更輕便、更靈動,是筆者本文想要探討的話題。筆者看來,為導(dǎo)航塑身可以從以下幾個角度來進(jìn)行:1.簡化結(jié)構(gòu);2.優(yōu)化形式;3.打磨UI

網(wǎng)站作為信息的集合體,要囊括海量的資源,從首頁到二級頁再到專題頁進(jìn)而底層頁等等等等,信息的層級多且繁雜,所以就容易形成tab套tab再套tab的局面。那么作為導(dǎo)航塑身的第一步,我們要做的就是把這負(fù)責(zé)的結(jié)構(gòu)盡量簡化,讓導(dǎo)航變得輕盈起來,或者至少看起來不那么臃腫。

A. 通過面包屑來簡化導(dǎo)航結(jié)構(gòu)

面包屑通常水平地出現(xiàn)在頁面頂部,一般會位于標(biāo)題或頁頭的下方。它們提供給用戶返回之前任何一個頁面的鏈接(這些鏈接也是能到達(dá)當(dāng)前頁面的路徑),在層級架構(gòu)中通常是這個頁面的父級頁面。面包屑提供給用戶回溯到網(wǎng)站首頁或入口頁面的一條快速路徑。

一個門戶網(wǎng)站常見的結(jié)構(gòu)是首頁-頻道頁-專題頁-子專題-底層頁。如果我們想在門戶網(wǎng)站看NBA的視頻直播,那么我們來看下他的導(dǎo)航:

如果把信息層級全部展現(xiàn)在用戶面前,就會形成上面的這種tab套tab的形式,使得導(dǎo)航臃腫不堪,占據(jù)頁面很大的空間。可是如果我們把用戶關(guān)心的導(dǎo)航內(nèi)容提取出來,就會得到下面的結(jié)構(gòu):

再扁平化一下:

這就是清晰的面包屑導(dǎo)航。綜上,面包屑導(dǎo)航能夠讓復(fù)雜的層級結(jié)構(gòu)扁平化,使得導(dǎo)航更加輕盈。

面包屑導(dǎo)航還有一些變體,是基于用戶線性操作邏輯衍生出來的。在無線端產(chǎn)品中應(yīng)用更為廣泛,因為移動設(shè)備的顯示區(qū)域有限,無力支撐龐大的導(dǎo)航結(jié)構(gòu)。在用戶點(diǎn)擊當(dāng)前導(dǎo)航內(nèi)容后,當(dāng)前導(dǎo)航消失進(jìn)去下一級導(dǎo)航,并提供返回按鈕。

當(dāng)然,使用面包屑來簡化導(dǎo)航結(jié)構(gòu)也是有條件的,不是所有的導(dǎo)航層級都可以用這種方法來簡化。面包屑導(dǎo)航更符合用戶線性思維導(dǎo)向下的操作邏輯,例如,用戶想要看NBA直播,那么他一定不關(guān)心娛樂圈發(fā)生了哪些八卦,也不care足球或者網(wǎng)球有什么新聞,CBA,CUBA他可能也不十分在意,那么面包屑的線性導(dǎo)航就可以滿足用戶的需求。或者是由于空間或者設(shè)備原因,我們無法提供更為詳細(xì)的導(dǎo)航,而采用線性簡化導(dǎo)航的處理方法。

B. 合并導(dǎo)航層級

導(dǎo)航的龐大往往是由于層級過多導(dǎo)致,那么減少層級的一種有效方法就是合并導(dǎo)航層級,例如把二級和三級導(dǎo)航合并,就減少了三級導(dǎo)航,讓導(dǎo)航輕便一些。

如上圖,圖片庫包括動態(tài)圖片和靜態(tài)圖片,每個分類下面又有小的分類,這樣的導(dǎo)航層級在產(chǎn)品中十分常見,略顯臃腫。那么通過合并層級就可以把導(dǎo)航精簡到兩級,處理后的導(dǎo)航如下:

瘦身后的導(dǎo)航看起來結(jié)構(gòu)也比較清晰,而且沒有影響到信息的傳達(dá)。

對比下美團(tuán)和糯米的導(dǎo)航:

美團(tuán)把注冊登錄和個人信息等功能性導(dǎo)航和網(wǎng)站主導(dǎo)航做了合并處理,為網(wǎng)站首屏節(jié)約出了寶貴的空間。

C.隱藏部分導(dǎo)航

簡化導(dǎo)航結(jié)構(gòu)的第三種方法是把部分層級或者導(dǎo)航內(nèi)容隱藏起來,使得導(dǎo)航看上去輕便一些。

當(dāng)導(dǎo)航里的內(nèi)容特別多的時候,可以選擇把主要內(nèi)容留下,次要內(nèi)容隱藏的方法來處理。例如:

當(dāng)頁面空間有限,無法容納更多層級的時候,可以選擇把次層級隱藏收起,鼠標(biāo)滑過或者點(diǎn)擊后觸發(fā)此層級的方法處理,這樣的例子有很多:

2.優(yōu)化形式

有些時候,我們無法判斷用戶在瀏覽產(chǎn)品或網(wǎng)站時是否是線性思維,也無法對導(dǎo)航結(jié)構(gòu)進(jìn)行再精簡,那么我們怎樣讓導(dǎo)航再“瘦”那么一點(diǎn)呢。

A.將一維導(dǎo)航變?yōu)槎S導(dǎo)航

 

將一維導(dǎo)航轉(zhuǎn)化為二維導(dǎo)航,能夠有效的減少層疊導(dǎo)航帶給人的重復(fù)感和復(fù)雜感,能夠讓操作富有變化,進(jìn)而提升體驗。

類似的列子也有很多:

 

B.將復(fù)雜的層級單獨(dú)處理

當(dāng)某一層級的導(dǎo)航內(nèi)容豐富到一定程度,他就可以充當(dāng)一個獨(dú)立控件來單獨(dú)設(shè)計了,他們可以作為頁面的元素來單獨(dú)存在,可能看起來都不太像是導(dǎo)航。

 

3.打磨UI

說到讓導(dǎo)航輕盈,UI是最為常用的手法,在此筆者不做太多的陳述,但是需要注意的是,導(dǎo)航的輕盈與否與導(dǎo)航所處的頁面以及重要程度有很大關(guān)系。比如在首頁,用戶需要對頁面有整體認(rèn)知的情況下,導(dǎo)航的UI就不能改太輕薄,而是應(yīng)該先聲奪人,讓用戶直接注意,并瀏覽發(fā)現(xiàn)所求;同樣的,當(dāng)用戶進(jìn)入到相關(guān)的頁面開始瀏覽時,導(dǎo)航的作用就是路燈和司南,這時的導(dǎo)航就不如在首頁時那樣重要,那么導(dǎo)航就需要輕輕的、悄悄的在用戶旁邊隨時等待著被注意并使用。

電商首頁的導(dǎo)航UI上吸引了不少眼球,但是到了結(jié)果頁導(dǎo)航變成了幾乎沒有裝飾的效果,因為在結(jié)果頁,用戶主要是來瀏覽產(chǎn)品,所以導(dǎo)航的作用就弱了。

綜上,是筆者對導(dǎo)航塑身的一點(diǎn)認(rèn)識,清晰的導(dǎo)航能夠讓頁面簡單易用,反之也會大大影響頁面的信息流暢度,所以在導(dǎo)航設(shè)計時要精心處理,一點(diǎn)淺見與大家分享。

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.88yangsc.com

存檔