合肥生活安徽新聞合肥交通合肥房產(chǎn)生活服務合肥教育合肥招聘合肥旅游文化藝術(shù)合肥美食合肥地圖合肥社保合肥醫(yī)院企業(yè)服務合肥法律

        導航設計:讓導航更輕巧些

        時間:2013-04-01  來源:合肥網(wǎng)hfw.cc  作者:hfw.cc 我要糾錯


          導航是互聯(lián)網(wǎng)產(chǎn)品中利用最普遍的基本元素之一,領(lǐng)導用戶懂得到網(wǎng)站的內(nèi)容結(jié)構(gòu)進而找到所求。作為基本控件,導航看起來簡略,但卻是產(chǎn)品設計中最龐雜繁瑣的一局部。由于咱們想要讓網(wǎng)站構(gòu)造更清楚、想要向用戶轉(zhuǎn)達所有的信息,所以就賦予了導航越來越多的內(nèi)容,使他們宏大異樣,非常糾結(jié)。簡化了,用戶無奈懂得到頁面構(gòu)造以及本人的處境,發(fā)生迷惑;龐雜了,導航臃腫不堪,層巒疊嶂,既不雅觀也不好用。

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

        2.優(yōu)化形式

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

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

         

         

          將一維導航轉(zhuǎn)化為二維導航,可能有效的減少層疊導航帶給人的反復感跟復雜感,可以讓操作富有變更,進而晉升休會。

          相似的列子也有良多:

         

        B.將復雜的層級獨自處理

          當某一層級的導航內(nèi)容豐盛到必定水平,他就可以充任一個獨破控件來獨自設計了,他們可以作為頁面的元素來單獨存在,可能看起來都不太像是導航。

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

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

          面包屑通常水平川呈現(xiàn)在頁面頂部,個別會位于題目或頁頭的下方。它們提供應用戶返回之前任何一個頁面的鏈接(這些鏈接也是能達到當前頁面的門路),在層級架構(gòu)中通常是這個頁面的父級頁面。面包屑提供應用戶回溯到網(wǎng)站首頁或進口頁面的一條疾速門路。

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

         

          假如把信息層級全體展當初用戶眼前,就會構(gòu)成上面的這種tab套tab的情勢,使得導航臃腫不堪,盤踞頁面很大的空間。可是假如咱們把用戶關(guān)懷的導航內(nèi)容提掏出來,就會得到下面的結(jié)構(gòu):

         

          再扁平化一下:

         

          這就是清晰的面包屑導航。綜上,面包屑導航可以讓復雜的層級結(jié)構(gòu)扁平化,使得導航更加輕巧。

         

          面包屑導航還有一些變體,是基于用戶線性操作邏輯衍生出來的。在無線端產(chǎn)品中運用更為普遍,由于挪動裝備的顯示區(qū)域有限,無力支持宏大的導航結(jié)構(gòu)。在用戶點擊當前導航內(nèi)容后,當前導航消散進去下一級導航,并供給返回按鈕。

         

          當然,應用面包屑來簡化導航結(jié)構(gòu)也是有前提的,不是所有的導航層級都可以用這種方法來簡化。面包屑導航更合乎用戶線性思維導向下的操作邏輯,例如,用戶想要看NBA直播,那么他必定不關(guān)懷娛樂圈產(chǎn)生了哪些八卦,也不care足球或者網(wǎng)球有什么消息,CBA,CUBA他可能也不十分在意,那么面包屑的線性導航就可以滿意用戶的需要。或者是因為空間或者裝備起因,我們無法供給更為具體的導航,而采取線性簡化導航的處理方法。

        B.合并導航層級

          導航的龐大往往是因為層級過多導致,那么減少層級的一種有效方式就是合并導航層級,例如把二級和三級導航合并,就減少了三級導航,讓導航輕便一些。

         

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

         

          瘦身后的導航看起來結(jié)構(gòu)也比擬清楚,而且不影響到信息的轉(zhuǎn)達產(chǎn)品經(jīng)理    。

          對照下美團和糯米的導航:

         

          美團把注冊登錄跟個人信息等功效性導航和網(wǎng)站主導航做了合并處理,為網(wǎng)站首屏節(jié)儉出了可貴的空間。

        C.暗藏局部導航

          簡化導航結(jié)構(gòu)的第三種辦法是把部門層級或者導航內(nèi)容暗藏起來,使得導航看上去輕巧一些。

          當導航里的內(nèi)容特殊多的時候,能夠抉擇把重要內(nèi)容留下,次要內(nèi)包庇藏的方式來處置。例如:

         

          當頁面空間有限,無法包容更多層級的時候,可以取舍把次層級隱蔽收起,鼠標滑過或者點擊后觸發(fā)此層級的辦法處理,這樣的例子有許多:

         

         

        3.打磨 UI

          說到讓導航輕巧,UI是最為常用的伎倆,在此筆者不做太多的陳說,然而須要留神的是,導航的輕盈與否與導航所處的頁面以及主要水平有很大關(guān)聯(lián)。比方在首頁,用戶須要對頁面有整體認知的情形下,導航的UI就不能改太輕薄,而是應當先聲奪人,讓用戶直接注意,并閱讀發(fā)明所求;同樣的,當用戶進入到相干的頁面開端瀏覽時,導航的作用就是路燈和司南,這時的導航就不如在首頁時那樣主要,那么導航就需要微微的、偷偷的在用戶旁邊隨時等候著被留神并應用。

          電商首頁的導航UI上吸引了不少眼球,然而到了成果頁導航變成了簡直不裝潢的后果,因為在成果頁,用戶重要是來瀏覽產(chǎn)品,所以導航的作用就弱了。

         

         

          綜上,是筆者對導航塑身的一點意識,清晰的導航可能讓頁面簡略易用,反之也會大大影響頁面的信息流利度,所以在導航設計時要精心處置,一點淺見與大家分享。交互設計      
         

        本文由http://www***ixueba***/  整理并發(fā)布!

        掃一掃在手機打開當前頁
      1. 上一篇:Ping 不通,緩存在作怪!
      2. 下一篇:馬云想把微博變成大號“美麗說”嗎?
      3. 無相關(guān)信息
        合肥生活資訊

        合肥圖文信息
        急尋熱仿真分析?代做熱仿真服務+熱設計優(yōu)化
        急尋熱仿真分析?代做熱仿真服務+熱設計優(yōu)化
        出評 開團工具
        出評 開團工具
        挖掘機濾芯提升發(fā)動機性能
        挖掘機濾芯提升發(fā)動機性能
        海信羅馬假日洗衣機亮相AWE  復古美學與現(xiàn)代科技完美結(jié)合
        海信羅馬假日洗衣機亮相AWE 復古美學與現(xiàn)代
        合肥機場巴士4號線
        合肥機場巴士4號線
        合肥機場巴士3號線
        合肥機場巴士3號線
        合肥機場巴士2號線
        合肥機場巴士2號線
        合肥機場巴士1號線
        合肥機場巴士1號線
      4. 短信驗證碼 酒店vi設計 NBA直播 幣安下載

        關(guān)于我們 | 打賞支持 | 廣告服務 | 聯(lián)系我們 | 網(wǎng)站地圖 | 免責聲明 | 幫助中心 | 友情鏈接 |

        Copyright © 2025 hfw.cc Inc. All Rights Reserved. 合肥網(wǎng) 版權(quán)所有
        ICP備06013414號-3 公安備 42010502001045

        主站蜘蛛池模板: 日韩视频一区二区| 国产成人精品久久一区二区三区| 日本不卡免费新一区二区三区| 无码人妻啪啪一区二区| 国产内射在线激情一区| 国产一区风间由美在线观看| 2020天堂中文字幕一区在线观 | 国产福利电影一区二区三区,亚洲国模精品一区 | 99久久人妻精品免费一区| 大伊香蕉精品一区视频在线| 免费无码AV一区二区| 日韩精品久久一区二区三区| 无码夜色一区二区三区| 国产吧一区在线视频| 成人区精品一区二区不卡亚洲| 无码乱人伦一区二区亚洲| 国产精品视频第一区二区三区| 91国在线啪精品一区| 中文字幕精品无码一区二区三区| 一区二区精品在线观看| 亚洲AV无码一区二区三区在线观看| 福利一区二区在线| 福利视频一区二区牛牛| 国产A∨国片精品一区二区| 精品乱子伦一区二区三区高清免费播放| 日本一区免费电影| 痴汉中文字幕视频一区| 国产成人无码一区二区三区在线| 国产精品污WWW一区二区三区 | 一区二区精品在线观看| 中文字幕久久久久一区| 免费看一区二区三区四区| 久久精品一区二区影院| 国产亚洲无线码一区二区| 国产一区二区免费| 在线中文字幕一区| 亚洲精品日韩一区二区小说| 日本精品高清一区二区2021| 国产精品一区二区资源| 国产一区二区精品尤物| 乱精品一区字幕二区|