移動(dòng)端導(dǎo)航設(shè)計(jì),這里一定有你不知道的——細(xì)節(jié)系列第 01 篇

2024-5-23    資深UI設(shè)計(jì)者

移動(dòng)端導(dǎo)航設(shè)計(jì),這里一定有你不知道的——細(xì)節(jié)系列第 01 篇

 
 
 

寫這篇講導(dǎo)航的,本質(zhì)上是希望提高自己界面設(shè)計(jì)的組件化意識(shí),也是對(duì)近期自己看的關(guān)于導(dǎo)航方面文章的一個(gè)總結(jié)和輸出,

      為什么寫這篇講導(dǎo)航的,本質(zhì)上是希望提高自己界面設(shè)計(jì)的組件化意識(shí),也是對(duì)近期自己看的關(guān)于導(dǎo)航方面文章的一個(gè)總結(jié)和輸出。

      前言

      結(jié)構(gòu)和組織是關(guān)于建造房間的,而導(dǎo)航設(shè)計(jì)則是關(guān)于增加門窗的——《信息架構(gòu)》

      在英文中Navigation這個(gè)詞源于拉丁文,原意是:操縱船只在海上航行。所以導(dǎo)航的目的在于幫助我們到達(dá)目的地。通俗的l來(lái)說(shuō)就是你知道自己在哪,下一步怎么走,如果不想去先前的目的地,那也可以順利的回到出發(fā)的原點(diǎn),這就是導(dǎo)航的作用。

      對(duì)于導(dǎo)航優(yōu)缺點(diǎn)的思考,我主要從以下三方面來(lái)考量:

      第一,操作方式。是滑動(dòng)、點(diǎn)擊還是其他手勢(shì),不同的操作方式難易程度是不同的;

      第二,導(dǎo)航所處的位置。在頁(yè)面頂端還是底部,結(jié)合操作方式來(lái)考慮操作的便捷性,例:導(dǎo)航在頂部,但不能滑動(dòng)操作,對(duì)用戶而言便捷性就比較差;

      第三,導(dǎo)航模塊之間切換是否方便。是否需要頁(yè)面的跳轉(zhuǎn)才能切換不同模塊,不同的切換方式難易程度也不同;

      這篇文章主要講的是移動(dòng)端的導(dǎo)航,但我們需要知道的是,在產(chǎn)品中沒(méi)有孤立存在的模塊,導(dǎo)航系統(tǒng)與組織系統(tǒng)、標(biāo)簽系統(tǒng)之間是密不可分的。

      一、導(dǎo)航分類

      導(dǎo)航分為主導(dǎo)航與次級(jí)導(dǎo)航,主導(dǎo)航進(jìn)一步又分為全局導(dǎo)航與瞬時(shí)導(dǎo)航。

      全局導(dǎo)航——你能看到每一個(gè),找出你想要的那一個(gè)。

      瞬時(shí)導(dǎo)航——平時(shí)藏起來(lái),需要的時(shí)候一點(diǎn)就出來(lái)。

      二、各種導(dǎo)航優(yōu)缺點(diǎn)

    (一)底部Tab欄(標(biāo)簽欄)

     底部 Tab 欄最大的優(yōu)勢(shì)在于不同模塊之間方便快速的切換,無(wú)論是 iOS 還是 Andriod 系統(tǒng),我們看到最多的主導(dǎo)航方式就是底部Tab欄,形式如下圖所示:       優(yōu)點(diǎn):

      切換快速方便——可以承載同一優(yōu)先級(jí)的內(nèi)容,位置處于頁(yè)面底部且層級(jí)扁平,可以進(jìn)行方便快速的切換;

      缺點(diǎn):

      遮擋內(nèi)容——常駐的Tab 欄遮擋了部分內(nèi)容,減少了頁(yè)面承載信息的容量,當(dāng)然現(xiàn)在有新型模式:上滑閱讀時(shí)隱藏Tab 欄,下滑返回時(shí)顯示,這種模式某種程度上解決了這個(gè)問(wèn)題;

      承載數(shù)量有限——模塊數(shù)量不超過(guò)5個(gè),數(shù)量上的限制也就限制了 APP 主導(dǎo)航的分類數(shù)量,是否使用此導(dǎo)航方式,要根據(jù) APP 的組織系統(tǒng)來(lái)決定;

      (二)底部Tab欄擴(kuò)展形式——駝式導(dǎo)航

      優(yōu)缺點(diǎn)與底部Tab欄基本相同,“駝峰”的作用主要是把一項(xiàng)對(duì)于產(chǎn)品來(lái)說(shuō)高優(yōu)先級(jí)的行動(dòng)放在突出位置,并用較大的“視覺(jué)重量”來(lái)展示,如下圖所示的閑魚、有道云筆記的駝式導(dǎo)航,它們都有自己的最優(yōu)先級(jí)的模塊需要突出展示,因此選用了駝式導(dǎo)航。

            (三)跳板式導(dǎo)航 (宮格式導(dǎo)航)

      跳板式導(dǎo)航最大優(yōu)勢(shì)在于生動(dòng)的圖標(biāo)設(shè)計(jì)使得模塊“好找”,當(dāng)然這也會(huì)有兩面性,形式如下圖所示:

      優(yōu)點(diǎn):

      好找——較大的設(shè)計(jì)“重量”是通過(guò)圖標(biāo)來(lái)實(shí)現(xiàn)的,用戶對(duì)圖像的記憶是超過(guò)文字的,這也會(huì)使用戶在操作了幾次后潛意識(shí)就能找到要找的模塊,當(dāng)然僅有文字的跳板式導(dǎo)航無(wú)此優(yōu)點(diǎn),如下圖所示,僅就好找這個(gè)維度,有圖標(biāo)的愛(ài)奇藝是勝過(guò)僅有文字的網(wǎng)易嚴(yán)選的;

      缺點(diǎn):

      麻煩——無(wú)法在多入口間來(lái)回轉(zhuǎn)換,不適合信息較為扁平的 APP例:新聞?lì)?APP不適合宮格式導(dǎo)航,你可以想象你看完軍事類的新聞,想看看科技新聞,總得先回到主頁(yè)面再跳轉(zhuǎn)到科技類頁(yè)面,頁(yè)面跳轉(zhuǎn)的增加導(dǎo)致用戶操作的繁瑣程度增加;

      壓力大——??硕芍赋觯粋€(gè)人面臨的選擇越多,壓力越大,這在宮格數(shù)量較多時(shí)會(huì)突顯,再加設(shè)計(jì)模式的扁平化,進(jìn)一步增加用戶的選擇壓力;

      題外話:雖然現(xiàn)在宮格式導(dǎo)航出鏡率與早年相比大幅下降,但從手機(jī)操作系統(tǒng)誕生之日起,宮格式與輪播式導(dǎo)航的組合一直作為系統(tǒng)主導(dǎo)航存在,原因在于對(duì)大多數(shù)用戶而言經(jīng)常使用的 APP 最多也就十幾個(gè),宮格式突出圖標(biāo)的展現(xiàn)方式有利于提高APP的辨識(shí)度。 

      (四)列表菜單式導(dǎo)航(層級(jí)導(dǎo)航)

      列表式導(dǎo)航的最大優(yōu)勢(shì)在于可以高效、清晰地展示信息,同時(shí)可以容納較多信息,形式如下圖所示:

            優(yōu)點(diǎn):

      高效——Y軸方向占用空間少,可以高效、清晰地展示信息,X軸方向可以容納較多信息,適合于既要有名稱又要有描述的模塊,例:支付寶—支付-我的頁(yè)面—余額一欄就可以看到你有多少余額,而不用進(jìn)入,體現(xiàn)了列表式導(dǎo)航欄的高效;

            好分組——鑒于屏幕Y軸方向有較大的空間可以利用,也就可以利用這些空間進(jìn)行分組分類。

      缺點(diǎn):

      麻煩——同宮格式導(dǎo)航導(dǎo)航缺點(diǎn)1,這里不在贅述;

      壓力大——同宮格式導(dǎo)航導(dǎo)航缺點(diǎn)2,舉個(gè)例子,無(wú)論iOS系統(tǒng)或Andriod系統(tǒng)設(shè)置使用的都是列表式導(dǎo)航,很多情況下主導(dǎo)航與次級(jí)導(dǎo)航都是列表式導(dǎo)航,這種層級(jí)較深的情況就需要增加搜索系統(tǒng)輔助查找,從視覺(jué)設(shè)計(jì)的角度來(lái)看,列表式與搜索的形式很契合;

      視覺(jué)疲勞——當(dāng)同級(jí)內(nèi)容過(guò)多時(shí),由于列表式導(dǎo)航形式較為單一,不斷在Y軸方向滑動(dòng),容易造成視覺(jué)疲勞;

      題外話:鑒于以上優(yōu)缺點(diǎn),列表式導(dǎo)航也主要以次級(jí)導(dǎo)航的方式存在,僅有設(shè)置、郵箱等突出效率的 APP會(huì)將其作為主導(dǎo)航。

      (五)固定選項(xiàng)卡&分段選項(xiàng)卡&滾動(dòng)選項(xiàng)卡

      iOS平臺(tái)的分段選項(xiàng)卡與Andriod平臺(tái)的固定選項(xiàng)卡、滾動(dòng)選項(xiàng)卡本質(zhì)上都是通過(guò)在頁(yè)面頂端對(duì)內(nèi)容進(jìn)行再分類,這三種導(dǎo)航的最大優(yōu)點(diǎn)在于在能夠使用戶清晰的看到APP的分類,滾動(dòng)選項(xiàng)卡、分段選項(xiàng)卡一般以二級(jí)導(dǎo)航的形式存在,固定選型卡既有以主導(dǎo)航形式存在的情況,也有以二級(jí)導(dǎo)航形式存在的情況,下面來(lái)看看他們分別有什么優(yōu)點(diǎn)與缺點(diǎn)。

      (1)固定選項(xiàng)卡,形式如下圖所示:

      

 優(yōu)點(diǎn):

      方便——相比列表菜單及跳板式導(dǎo)航,固定選項(xiàng)卡能夠通過(guò)滑動(dòng)方便的在模塊間切換內(nèi)容;

      優(yōu)先級(jí)一致——可以承載重要性及使用頻率處于同一等級(jí)的信息、模塊或者任務(wù)等;

      顯眼——位置處于頁(yè)面頂部,基于用戶由上至下的瀏覽習(xí)慣,固定選項(xiàng)卡處于頁(yè)面“顯眼處”;

      缺點(diǎn): 

      承載數(shù)量有限——數(shù)量一般不超過(guò)4個(gè);

      遮擋內(nèi)容——同 Tab 欄缺點(diǎn)1;

      (2)滾動(dòng)選項(xiàng)卡:

                                                                                              優(yōu)點(diǎn):

      能裝——可以承載多個(gè)選項(xiàng)卡,且部分應(yīng)用選項(xiàng)卡內(nèi)容及順序可以自己定制,這也就解決了固定模式帶來(lái)的弊端——某些用戶喜歡的內(nèi)容需要滑動(dòng)半天:

      瘦——由于滾動(dòng)選項(xiàng)卡是以滑動(dòng)操作為主,點(diǎn)按的操作方式較為低頻,因此選項(xiàng)卡大多以“瘦小”的文字形式展現(xiàn),占用空間較少;

     缺點(diǎn):

     壓力大——同跳板式導(dǎo)航缺點(diǎn)2,一般滾動(dòng)選項(xiàng)卡數(shù)量較多,這就增加了用戶的選擇壓力。

     遮擋內(nèi)容——同 Tab 欄缺點(diǎn)1

      (3)分段式選項(xiàng)卡:

            優(yōu)點(diǎn):

      優(yōu)先級(jí)一致——可以承載重要性及使用頻率處于同一等級(jí)的信息、模塊或者任務(wù)等;

      顯眼——位置處于頁(yè)面頂部,基于用戶由上至下的瀏覽習(xí)慣,固定選項(xiàng)卡處于頁(yè)面“顯眼處”;

      缺點(diǎn):

      不能滑——不能滑動(dòng)操作,只能點(diǎn)按,且因分段式選項(xiàng)卡處于頁(yè)面頂端,給用戶的操作帶來(lái)了不便:

      承載數(shù)量有限——數(shù)量一般不超過(guò)3個(gè);

      (五)陳列館式導(dǎo)航

      一般以次級(jí)導(dǎo)航的方式存在,最大的優(yōu)勢(shì)在于能夠突出展示內(nèi)容,與跳板式導(dǎo)航的區(qū)別在于,陳列館式導(dǎo)航可以隨時(shí)更新內(nèi)容,類似圖片直播類的 APP 使用這種導(dǎo)航形式比較多,一般有三種形式——網(wǎng)格式布局、輪盤布局、瀑布流網(wǎng)格布局,如下圖所示,從左至右分別是一直播、小米有品、花瓣:

            優(yōu)點(diǎn):

      直觀——可以實(shí)時(shí)更新內(nèi)容,對(duì)于內(nèi)容的展示較為直觀;

      缺點(diǎn):

      不適合當(dāng)家做主——由于其適合作為展示內(nèi)容的窗口,因此不適合作為主導(dǎo)航;

      題外話:瀑布流網(wǎng)格式布局的部分畫面半隱藏式的展示內(nèi)容,吸引用戶繼續(xù)往下探索,有利于使用戶進(jìn)入沉浸式狀態(tài),但輪盤式布局的缺點(diǎn)在于在用戶以縱向?yàn)g覽為主的情況下,向X軸要空間的但會(huì)打斷用戶向下瀏覽的順暢性,且承載內(nèi)容有限,一般卡片的數(shù)量都少于10個(gè)。

      (六)隱喻式導(dǎo)航

      隱喻式導(dǎo)航的最大優(yōu)勢(shì)在于降低學(xué)習(xí)成本,但我們需要避免的是為了隱喻而隱喻,不應(yīng)該被隱喻限制住了手腳。

      例:如果在移動(dòng)端或者PC端使用隱喻式文件夾,那你就不可能在一個(gè)文件夾中放一個(gè)文件夾,再放一個(gè)文件夾......但實(shí)際上我們可以以俄羅斯套娃的形式不斷在文件夾套文件夾,從而使對(duì)我們的資源進(jìn)行更好的分類管理,打破現(xiàn)實(shí)中文件夾的局限性,而不是要死板硬套的隱喻。

      題外話:如下圖所示,這是錘子科技的 Smartisan OS 系統(tǒng)的相機(jī)圖標(biāo),這就是很好的隱喻,采用相機(jī)鏡頭=作為手機(jī)相機(jī)圖標(biāo),降低了用戶成本,當(dāng)然畫的也很好。

      (七)抽屜式導(dǎo)航

      抽屜式導(dǎo)航最大的優(yōu)勢(shì)在于能藏,這也注定了它最大缺點(diǎn)是藏起來(lái)的內(nèi)容人們經(jīng)常會(huì)忘了它們的存在。如下圖所示,從左至右抽屜式導(dǎo)航主要有三種形式,浮層式、嵌入式、3D模式。

      優(yōu)點(diǎn):

      能藏——將大部分模塊隱藏起來(lái),使得界面更加美觀,且突出產(chǎn)品的核心功能,避免用戶被不太重要的內(nèi)容所影響,畢竟用戶精力有限

      好展現(xiàn)創(chuàng)意——由于主導(dǎo)航的內(nèi)容在大半個(gè)頁(yè)面上,頁(yè)面背景部分給設(shè)計(jì)師留下的創(chuàng)意空間就比較大,設(shè)計(jì)師可以結(jié)合品牌特點(diǎn)在背景上營(yíng)造相應(yīng)的氛圍。

      缺點(diǎn):

      容易忘——藏在抽屜里的模塊,優(yōu)先級(jí)明顯降低,所以產(chǎn)品大流量入口不適合放在抽屜導(dǎo)航中;

      題外話:基于用戶從左到右的文字瀏覽習(xí)慣,抽屜導(dǎo)航的圖標(biāo)大部分情況下是在左上角,屬于用戶單手操作的盲區(qū)。

      (八)下拉菜單式

      與抽屜式導(dǎo)航類似,最大優(yōu)勢(shì)在于能藏,使得界面內(nèi)容保持簡(jiǎn)潔,一般下拉式菜單不會(huì)覆蓋整個(gè)頁(yè)面,甚至也不會(huì)增加黑色蒙版,因此會(huì)給用戶頁(yè)面層級(jí)較少的錯(cuò)覺(jué),避免了頻繁的頁(yè)面跳轉(zhuǎn)。

      優(yōu)點(diǎn):

      能藏——將功能隱藏在一小塊,保證了界面的簡(jiǎn)潔,同時(shí)也使得界面上能夠容納更多的操作;

      缺點(diǎn):

      容易忘——同抽屜式導(dǎo)航缺點(diǎn)1。   

      題外話:在iOS中下拉菜單為自定義控件,而Andriod 系統(tǒng)為這種導(dǎo)航提供了特別的控件——Spinner控件。Spinner用于同一個(gè)類別下的不同視圖間進(jìn)行導(dǎo)航,類似便簽類APP,在頂部設(shè)置文件夾,在此導(dǎo)航中包括各種不同的文件夾,類似通話便簽、私密便簽等各類文件夾,但我們?cè)诒WC對(duì)用戶而言可理解且符合邏輯的情況下,不應(yīng)該過(guò)于死板。

      (九)卡片式導(dǎo)航

      卡片式導(dǎo)航的原型是撲克牌,模仿了撲克牌中常見(jiàn)的切牌、洗牌、翻牌等手法,卡片式導(dǎo)航的最大優(yōu)點(diǎn)在于可以突出內(nèi)容,例:如下圖所示,最新版(8.11.0版)微博在信息架構(gòu)上做了調(diào)整,視頻模塊采用了卡片式導(dǎo)航。

      優(yōu)點(diǎn):

      有趣——配合操作動(dòng)效,與用戶交互的方式比較有趣,相比其他交互方式更為吸引用戶;

      秩序感——卡片整體性較好,秩序感更強(qiáng),每個(gè)卡片就是一塊內(nèi)容;

      缺點(diǎn):

      效率低——對(duì)于卡片只能逐個(gè)查看,不能進(jìn)行全局性瀏覽,也不能進(jìn)行跳躍式查看,效率較低;    

      浪費(fèi)空間——占用頁(yè)面空間較大,最好在需要突出內(nèi)容的 APP使用這種導(dǎo)航方式,也就是物盡其用,避免在不必要的情況下使用卡片式導(dǎo)航,造成頁(yè)面空間的浪費(fèi)。

      (十)輪播式導(dǎo)航

      這種導(dǎo)航方式主要是通過(guò)增加頁(yè)面指示器配合卡片式導(dǎo)航,讓用戶知道這里不僅僅有一張卡片,本質(zhì)上來(lái)說(shuō)這也是增加了頁(yè)面指示器的卡片式導(dǎo)航,卡片式導(dǎo)航有的優(yōu)缺點(diǎn),它也都有,只是這種導(dǎo)航方式不會(huì)占據(jù)整個(gè)頁(yè)面空間,從這個(gè)角度來(lái)說(shuō)它最大的優(yōu)勢(shì)在于向X軸方向要空間,拓展頁(yè)面范圍。

      優(yōu)點(diǎn):

      增加空間——從X軸方向要空間,拓展頁(yè)面范圍,使得同樣一塊內(nèi)容可以展示較多內(nèi)容,主要在banner、天氣類APP中使用,如下圖所示這是錘子科技商城首頁(yè)中的輪播式 banner。

      缺點(diǎn):

      大家不一樣——處于第一頁(yè)面的卡片優(yōu)先級(jí)遠(yuǎn)高于其他頁(yè)面;

      承載數(shù)量有限——一般數(shù)量不會(huì)超過(guò)10個(gè);

      效率低——同卡片式導(dǎo)航的缺點(diǎn),對(duì)于卡片只能逐個(gè)查看,不能進(jìn)行全局性瀏覽,也不能進(jìn)行跳躍式查看,效率較低;  

      (十一)折疊菜單式導(dǎo)航

      折疊菜單式導(dǎo)航最大的優(yōu)勢(shì)在于不用跳轉(zhuǎn)頁(yè)面就能夠看到更多信息,除列表式的折疊菜單外,也有部分APP金剛區(qū)使用折疊式菜單,如下圖所示的酷狗音樂(lè)首頁(yè),采用這種方式的目的在于只給用戶展示最重要的流量入口,節(jié)省首頁(yè)的空間資源;

            

      優(yōu)點(diǎn):

      能藏——類似于抽屜式導(dǎo)航優(yōu)點(diǎn)1;

      減少跳轉(zhuǎn)——避免頁(yè)面的跳轉(zhuǎn),從而給用戶層級(jí)較少的感覺(jué),減輕用戶使用壓力;

      缺點(diǎn):

      承載數(shù)量有限——能夠承載的模塊有限,適于隱藏太多內(nèi)容;        

      (十二)儀表盤式導(dǎo)航

      儀表盤式導(dǎo)航類似于列表式導(dǎo)航,通過(guò)各種類型圖表展示關(guān)鍵數(shù)據(jù), 使得用戶不用跳轉(zhuǎn)至下一頁(yè)面,也能夠?yàn)g覽關(guān)鍵數(shù)據(jù),其優(yōu)勢(shì)與劣勢(shì)同列表式導(dǎo)航;

      三、尾巴

      最后跟大家說(shuō)說(shuō)在選擇導(dǎo)航時(shí)的需要把握的要點(diǎn),我們還是得從產(chǎn)品出發(fā),從產(chǎn)品信息架構(gòu)出發(fā),對(duì)于寬而淺的組織架構(gòu),我們可能會(huì)選擇滾動(dòng)式選項(xiàng)卡作為二級(jí)導(dǎo)航,例:今日頭條、網(wǎng)易新聞;對(duì)于核心業(yè)務(wù)突出的產(chǎn)品,我們可能會(huì)選擇抽屜式導(dǎo)航作為主導(dǎo)航,例:滴滴出行。設(shè)計(jì),只有適合與否,適合的就是好的。

     最后的最后,這是我“這一篇就夠了”系列第一篇,下一篇講注冊(cè)登錄流程,感謝你的閱讀并期待你的關(guān)注,能對(duì)你有所啟發(fā),是我的榮幸。

 

 

 

 

藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開(kāi)發(fā)軟件wpf開(kāi)發(fā)、軟件vue開(kāi)發(fā)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔