2018-5-28 資深UI設(shè)計(jì)者
在《用戶體驗(yàn)的要素》一本書中,Jesse James Garrett 將用戶體驗(yàn)分為了五個(gè)層級(jí),戰(zhàn)略層,范圍層,結(jié)構(gòu)層,框架層,表現(xiàn)層。
其中在框架層里面有一個(gè)很重要的概念就是導(dǎo)航設(shè)計(jì),作者對(duì)導(dǎo)航設(shè)計(jì)的定義是:元素的組合,允許用戶在信息架構(gòu)中穿行。
我覺得可以把導(dǎo)航設(shè)計(jì)理解為:我們從用戶的心智模型出發(fā),結(jié)合業(yè)務(wù)目標(biāo),對(duì)信息架構(gòu)的一個(gè)梳理,來幫助用戶完成目標(biāo)。
通過自己手機(jī)里幾十款 app,總結(jié)了以下六種導(dǎo)航設(shè)計(jì)模式,包括:標(biāo)簽導(dǎo)航,宮格導(dǎo)航,側(cè)邊導(dǎo)航,列表導(dǎo)航,菜單導(dǎo)航,輪播導(dǎo)航……
簡單介紹了它們的優(yōu)缺點(diǎn),適用場(chǎng)景,以及一些衍生導(dǎo)航與相關(guān)案例……(不過導(dǎo)航設(shè)計(jì)一定是視產(chǎn)品和情況而定的,并沒有確定的依據(jù)與理論)
標(biāo)簽導(dǎo)航分很多種,有底部標(biāo)簽導(dǎo)航,頂部標(biāo)簽導(dǎo)航,底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航,頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動(dòng)態(tài)導(dǎo)航……
底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航,幾乎絕大部分 app 中都在用,tabbar 位于頁面最底部,一般3-5個(gè) tabbar,有文字+icon,也有純 icon 形式,但大部分是文字+icon 的形式,我想是減少用戶記憶負(fù)擔(dān)吧,如下:
而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點(diǎn),缺點(diǎn)以及適用場(chǎng)景也簡單整理了:
我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會(huì)將底部標(biāo)簽導(dǎo)航進(jìn)行變體,很多人把它稱為舵式導(dǎo)航,就像這種:
中間的「+」一般是發(fā)布的意思,并且是 app 里面使用最頻繁的一個(gè)功能,一般都會(huì)重點(diǎn)突出。并且,該標(biāo)簽中很多時(shí)候會(huì)有二級(jí)導(dǎo)航,二級(jí)導(dǎo)航里可擴(kuò)展性就比較強(qiáng),如圖:
而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部,最早知道它是在 Material Design 里面,因?yàn)?Google Pixel 手機(jī)底部存在物理導(dǎo)航,所以將標(biāo)簽導(dǎo)航置于頂部不會(huì)顯得突兀。它很少用作一級(jí)導(dǎo)航,一般是二級(jí)導(dǎo)航比較多,而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航,幾乎都是純文字的形式,比如:
突然想到今天交互設(shè)計(jì)課上的時(shí)候,老師講的人機(jī)交互里,重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。
而頂部標(biāo)簽導(dǎo)航,如果是點(diǎn)擊標(biāo)簽進(jìn)行操作的話,用戶單手操作就十分不方便,所以我發(fā)現(xiàn)體驗(yàn)好的 app 的頂部操作導(dǎo)航都是可以直接通過左右滑動(dòng)屏幕的交互來切換。
而當(dāng)標(biāo)簽類目過多的時(shí)候,可以通過左滑展現(xiàn)更多標(biāo)簽,比如很多新聞閱讀類的 app:
如果是可以滑動(dòng)查看更多的話,一定要通過一些方式告訴用戶可以滑動(dòng)查看更多,比如最后一個(gè)標(biāo)簽隱藏一半的方式等:
關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:
宮格導(dǎo)航,也是十分常見的導(dǎo)航形式,除了一些工具類 app 外,大部分是作為二級(jí)頁面展示出來,并且以 icon+文字的形式居多。
如果將宮格的 icon 換成 picture 的形式的話,可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ,可以通過垂直滑動(dòng)來切換,比如:
那,如果宮格信息太多,我發(fā)現(xiàn)很多 app 會(huì)采用分類展示的形式,并且通過水平滑動(dòng)的方式來切換,比如:
但是上面兩種可以垂直或者水平滑動(dòng)的形式,一定要讓用戶知道是可以水平或者垂直滑動(dòng)的,采取的是邊界地方信息只展示一半的形式,告訴用戶可以繼續(xù)滑動(dòng)……
除此之外,宮格導(dǎo)航還可以在電商里面運(yùn)用,在首頁的運(yùn)營內(nèi)容塊,它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小,比如:
關(guān)于宮格導(dǎo)航的優(yōu)缺點(diǎn)和適用場(chǎng)景,如下:
有些書里面會(huì)把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航,這類導(dǎo)航其實(shí)比較少了,原本也是從 Google Material Design 里面提取出來的概念,一般會(huì)在首頁呈現(xiàn)一個(gè)主要功能,將其他不常用的功能收納放到側(cè)邊導(dǎo)航里,比如:
而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:
列表導(dǎo)航也是十分常見,幾乎在每一個(gè) app 里面都會(huì)存在,大部分時(shí)候是作為二級(jí)導(dǎo)航存在,但是也會(huì)存在于一級(jí)導(dǎo)航的時(shí)候,比如郵箱,iOS系統(tǒng)自帶的設(shè)置等。
一般在列表導(dǎo)航里都會(huì)有下一個(gè)層級(jí),可以通過箭頭來告訴用戶是否有下級(jí)菜單。
當(dāng)列表信息比較多的時(shí)候,可以對(duì)列表進(jìn)行分類,可以添加小標(biāo)題或者直接分隔開。比如:
而在有些列表導(dǎo)航里,我們還需要展示給用戶一些預(yù)覽信息,比如 iOS系統(tǒng)里的健康,個(gè)人信息里的一些基本數(shù)據(jù)展示,如下:
關(guān)于列表導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:
其實(shí)菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計(jì)課的時(shí)候,老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來源于 Material Design 里面的 Menu。
Menu 是臨時(shí)的一張紙(paper),由按鈕(button)、動(dòng)作(action)、點(diǎn)(pointer)或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。
比如:
當(dāng)信息層級(jí)變多的時(shí)候,菜單導(dǎo)航里要展示一層或者兩層信息,比如大眾點(diǎn)評(píng)采取的形式:
關(guān)于菜單導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景,如下:
還有一些導(dǎo)航比如輪播導(dǎo)航,完全的沉浸式體驗(yàn),高度簡潔的導(dǎo)航,比如天氣,但是這種導(dǎo)航因?yàn)檩啿c(diǎn)的大小不會(huì)很明顯,所以用戶很難快速感知自己所在位置,并且輪播導(dǎo)航輪播的數(shù)量也不宜過多 。
其實(shí)導(dǎo)航的類型應(yīng)該還有很多,并且在一個(gè) app 里面幾乎不可能只使用一種導(dǎo)航,哪怕只是一個(gè)頁面,也會(huì)存在多種導(dǎo)航的組合形式,比如:
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com