六月伊人,国产精品制服丝袜欧美,亚洲va在线∨a天堂va欧美va,精品亚洲一区二区三区在线观看国产老熟女色视频,国产熟女九色,国产又粗又大,久久人人网国产精品

導航設(shè)計3步曲:高手幫你快速掌握導航設(shè)計!

2022-9-8    博博

1. 導航是什么?


① 導航的起源與本質(zhì)

導航,英文是 Navigation,是 Navigate 的名詞形式,源于 1530 年代,由詞根 Navis 船+agere 駕駛組合而成。指的是借助某些科學儀器,找到從一個島嶼到另一個島嶼的路徑。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖1 導航的起源

誕生于中世紀大航海的導航,從誕生之初就跟起點、目標和路徑密切相關(guān)。隨著導航的發(fā)展,導航領(lǐng)域從海洋擴展到陸地,航空、太空,以及互聯(lián)網(wǎng)。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖2 導航領(lǐng)域的類型

今天我們重點要聊的就是移動互聯(lián)網(wǎng)產(chǎn)品的導航設(shè)計,雖然脫離了物理空間,但導航的本質(zhì)始終是不變的。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖3 導航的本質(zhì)

導航本質(zhì):告訴用戶“我”在哪里(起點)?“我”能去到哪里(目標)?“我”該怎么去(路徑)?

基于此,導航設(shè)計一定要能清晰的體現(xiàn)用戶當前所在的位置(一般用選中態(tài)表示),并通過其他未選中的導航,來告知用戶可以去的目標,再通過最簡單的點擊或滑動等操作讓用戶去往目的地。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖4 互聯(lián)網(wǎng)產(chǎn)品導航示意

2. 移動端導航形式有什么?


我歸納了移動端常見的 10 種導航形式,大家可以根據(jù)其優(yōu)缺點和適用場景按需選用。

UI設(shè)計 交互設(shè)計 導航設(shè)計

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖5 移動端常見的10種導航形式

① 底 Tab 導航

底 Tab 導航在 iOS 中叫標簽導航,在 Android 中稱之為底部導航,我將其稱為底 Tab 導航,它是 iOS 中最倡導和常見的導航形式。(現(xiàn)在也全面征服了 Android 系統(tǒng))

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖6 底Tab導航

優(yōu)點:清晰直觀的展示了產(chǎn)品的核心功能,點擊切換方便快捷。

缺點:只能容納 3-5 個,數(shù)量有限。

使用場景:產(chǎn)品包含 3~5 個需要高頻切換使用的非同類型模塊時可用。

② 舵式導航

舵式導航可以看做是底 Tab 導航的一個變異,區(qū)別就在于把中間的導航像船舵一樣凸顯,以此來強調(diào)中間的導航功能(一般用于承載發(fā)布類功能)。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖7 舵式導航

優(yōu)點:舵式導航特殊的造型和顏色可以很好的吸引用戶注意力,促進功能轉(zhuǎn)化。

缺點:為了讓舵居中,導航個數(shù)只能為 3 個或 5 個,數(shù)量有限制。聚合多個發(fā)布類功能時,需要二次選擇,操作不夠便捷。

使用場景:對于強調(diào) UGC 類的產(chǎn)品或者特別高頻的操作可以使用。

③ 頂 Tab 導航

頂 Tab 導航最開始是 Android 推出用以抗衡 iOS 底 Tab 導航的,結(jié)果大家已經(jīng)有感知了(抗衡徹底失?。?。但頂 Tab 導航并沒有因此而消失,而是重新找到了自己作為次級導航的生態(tài)位。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖8 頂Tab導航

優(yōu)點:可以承載 2~N 個導航,可拓展性強,手勢切換比較便捷。

缺點:手勢切換有學習成本,頂部點擊不方便,看不見的導航內(nèi)容不容易被發(fā)現(xiàn)和使用。

使用場景:作為主導航幾乎已被底 Tab 取代,作為次級導航非常常見,特別是有多個并列層級的內(nèi)容需要展示時。

④ 抽屜導航

如果產(chǎn)品只有一類核心展示的內(nèi)容,可以使用抽屜導航而不用底 Tab 導航,以最大限度的利用屏幕空間。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖9 抽屜導航

優(yōu)點:可拓展性強,可以收納多個不常用的功能,釋放屏幕展示空間。

缺點:被隱藏的功能不容易被發(fā)現(xiàn)和使用。

使用場景:某些核心功能比較單一的產(chǎn)品,或者跟底 Tab 導航組合使用,收納不常用的功能。

⑤ 菜單式導航

跟抽屜式導航類似,把一組操作收納到一個地方,用戶可以點擊快速選擇。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖10 菜單式導航

優(yōu)點:可拓展性強,可以收納多個功能,釋放屏幕展示空間。

缺點:被隱藏的功能不容易被發(fā)現(xiàn)和使用。

使用場景:當頁面功能較多,無法全部直接展示時,可以使用下拉菜單統(tǒng)一收納。

⑥ 宮格式導航

早期比較流行的主導航,現(xiàn)在是比較常用的局部導航。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖11 宮格式導航

優(yōu)點:信息層級扁平,個數(shù)較少時,核心功能一目了然,用戶選擇成本低。

缺點:個數(shù)較多時視覺認知成本、查找成本都很高,進入功能后切換成本也高。

使用場景:平臺類產(chǎn)品的核心功能展示,或者普通產(chǎn)品的重要功能/運營入口。

⑦ 列表式導航

對于主要以文本為載體的產(chǎn)品,采用列表式導航非常常見,比如短信、郵件、記事本、設(shè)置等。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖12 列表式導航

優(yōu)點:有足夠的文本/圖標顯示空間,可以顯示標題和輔助文字,傳遞的信息內(nèi)容相對豐富、直觀,而且可以顯示多條內(nèi)容。

缺點:整體頁面信息會比較密集,頁面布局相對呆板,條目多時查找會比較困難。

使用場景:適用于展示多條以文本為主體的內(nèi)容。

⑧ 瀑布流導航

對于主要以圖片/視頻為載體的產(chǎn)品,采用瀑布流導航的非常常見,比如花瓣、點評、淘寶、bilibili 等。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖13 瀑布流導航

優(yōu)點:能夠凸顯圖片的吸引力,讓用戶聚焦在圖片上,促進內(nèi)容的轉(zhuǎn)化。同時可以承載無限多的內(nèi)容,自動加載不翻頁,增強用戶瀏覽的沉浸感和效率。

缺點:屏幕空間占用較大,依賴于信息推薦的精準度。

使用場景:適用于展示多條以圖片為主體的內(nèi)容。

⑨ 輪播式導航

當產(chǎn)品/模塊提供的信息足夠簡單扁平,一屏即可顯示全部核心信息時,可以采用整屏輪播或區(qū)域輪播的導航形式。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖14 輪播式導航

優(yōu)點:操作簡單,信息呈現(xiàn)直觀。

缺點:未輪播的信息曝光率和轉(zhuǎn)化率都比較低。

使用場景:簡單的小工具類產(chǎn)品可以整屏顯示核心信息。運營廣告位可以區(qū)域輪播展示。

⑩ 沉浸式導航

在活動類、游戲類產(chǎn)品中,常常采用沉浸式導航,增強用戶沉浸感。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖15 沉浸式導航

優(yōu)點:導航與頁面融為一體,視覺感受沉浸,頁面更有吸引力。

缺點:用戶可能注意不到某些是內(nèi)容的元素,導致該元素的轉(zhuǎn)化率較低。

適用場景:活動類、游戲類的產(chǎn)品中。

3. 導航設(shè)計三步曲


① 確認信息結(jié)構(gòu)

導航設(shè)計是以信息結(jié)構(gòu)為基礎(chǔ)的,所以在進行導航設(shè)計之前,我們需要將范圍層提供的所有信息進行分析,刪減、分類、整理形成特定的信息結(jié)構(gòu)。

UI設(shè)計 交互設(shè)計 導航設(shè)計

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖16 從信息到信息結(jié)構(gòu)

以微信的部分信息為例,我們將信息進行分類、整理、命名形成了上述的組織系統(tǒng),讓信息與信息之間的邏輯關(guān)系一目了然。

這里大家可以參考行業(yè)競品的信息架構(gòu),結(jié)合自己對業(yè)務關(guān)系的理解,輔助以卡片分類的方式,整理出最適合的信息結(jié)構(gòu)。

PS:為了提升導航的易用性,建議的導航廣度最好不超過 5,深度不超過 3。這樣符合米勒定律,用戶的選擇壓力較小,也不容易迷失在較深的路徑中。(當然這只是一個建議,優(yōu)先要保證的還是信息結(jié)構(gòu)的合理性,不能為了滿足上述建議而破壞信息之間本身的邏輯關(guān)系,時刻牢記認知成本>操作成本,不能為了減少操作成本而增加認知成本)

② 選擇導航形式

根據(jù)信息結(jié)構(gòu)中主導航功能的個數(shù),以及主導航功能之間的優(yōu)先級關(guān)系,再結(jié)合各導航的適用場景、個數(shù)限制、內(nèi)容豐富度、功能可見性、操作便捷性等,匹配合適的主導航、次級導航和局部導航形式。

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖17 導航總結(jié)

從現(xiàn)況來看,多數(shù)產(chǎn)品都愿意采用底 Tab 的主導航形式,因為可以曝光多個功能,用戶點擊操作方便,學習成本低,利于其他功能的轉(zhuǎn)化,后續(xù)拓展也比較方便(可以配合抽屜式導航、頂 Tab 導航,菜單式導航和局部導航混合使用)

③ 優(yōu)化導航路徑

信息結(jié)構(gòu)梳理了信息節(jié)點之間的邏輯關(guān)系,但用戶在真正使用產(chǎn)品時,有些子節(jié)點的功能/信息,其優(yōu)先級和頻率反而更高,為了讓用戶能夠方便快捷的使用這些子功能,還需要結(jié)合用戶的使用場景,在合適的場景下添加一些節(jié)點和路徑,以提升用戶操作的流暢性和效率。

UI設(shè)計 交互設(shè)計 導航設(shè)計

UI設(shè)計 交互設(shè)計 導航設(shè)計

圖18 組織系統(tǒng)和導航系統(tǒng)的關(guān)系

還是以微信的導航設(shè)計為例,因為添加好友,掃一掃、收付款功能重要性和使用頻率,微信特地在首頁增加了一個菜單導航,方便用戶能更快捷的觸達這些功能。

所以導航設(shè)計,不僅要正確的反映信息之間的結(jié)構(gòu)關(guān)系,選擇合適的導航形式,更重要的是根據(jù)用戶的目標、認知和習慣來組織導航節(jié)點,讓用戶可以很直觀的理解“我”在哪,“我”可以去哪?并通過最便捷的操作到達目的地。





作者:悅姐聊設(shè)計



藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作,也請與我們聯(lián)系01063334945。 



分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 



藍藍設(shè)計www.wnxcall.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司 

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.wnxcall.com

存檔