app ui界面的導航設計都有哪些?

我在大學畢業(yè)前從未在設計領域聽說過“導航”這個單詞,曾經(jīng)一度以為它指的是汽車里的GPS導航,后來才明白這個稱呼只是一種類比,是說界面的各種標簽就像是行車導航儀一樣,可以讓用戶“定位”他所在的位置,同時指引他下一步的去向,并不是真的要讓你在界面上畫個儀表盤。

導航的使命就在于自身的“名稱”上面,它叫什么名字就是在告訴用戶“沿著這條路能通往哪里”,所以導航的展示形式雖然多種多樣,卻大多逃不出文字的輔佐,這是因為它的本質(zhì)就是產(chǎn)品對用戶傳達的一種指向性信息。

因為所有用戶都是從產(chǎn)品的首頁開始進入產(chǎn)品的,所以任務路徑全部都是從產(chǎn)品的首頁開始延伸的,產(chǎn)品的首頁就是全部導航的聚合處,也是產(chǎn)品內(nèi)所有任務路徑的開啟之地。

根據(jù)導航的特征不同,我們可以將導航分成三類——主導航、頁面導航、特殊導航。

 

主導航

主導航是指整個移動端產(chǎn)品最頂層的導航,它完整地將產(chǎn)品分成了多個頁面模塊。

【沉浸式導航】

它平時隱藏在角落的功能按鈕里,對屏幕的空間占用較低,不會打斷用戶的沉浸式瀏覽。

-所謂“沉浸式”瀏覽,是指用戶持續(xù)在當前頁面查閱內(nèi)容,例如閱讀文章、觀看短視頻等行為。

 

【平行式導航(tabs結構)】

它始終懸浮在界面底部,對屏幕的空間占用較高,適合大容量或者界面層級較多的產(chǎn)品。

所謂“界面層級”,是指用戶想要完成某項操作任務要經(jīng)過多少層界面。

 

【舵式導航】

它始終懸浮在界面底部,對屏幕的空間占用更高,適合邏輯層級更多的產(chǎn)品-隱藏在中間“船舵”里的功能,多是值得強化的基本功能,如上傳文章、分享app、邀請新用戶等。

業(yè)務模塊較多的產(chǎn)品,也會使用舵式導航。

 

 

頁面導航

頁面導航是指某個頁面的導航形式,往往一個頁面內(nèi)會有多重頁面導航復合出現(xiàn)。

 

【分類式頁面導航(tabs結構)】

它會將某個單獨頁面的內(nèi)容劃分成兩部分,里面的內(nèi)容相互獨立-適合邏輯層級較為深入的產(chǎn)品。

 

【雙層標簽頁面導航(tabs結構)】

它始終懸浮在界面頂部,對屏幕的空間占用較高,適合大容量或者邏輯層級較多的產(chǎn)品;

它會將某個單獨頁面的內(nèi)容劃分為多個部分,每一部分的內(nèi)容可以重復(同一項信息可以被打上多個標簽而復用);

它在內(nèi)容極其復雜的聚合類平臺中比較常見。

 

【列表式頁面導航】

它可能出現(xiàn)在頁面的任何地方,是一種高效率處理信息的方法,也是工具類產(chǎn)品最常用的頁面導航形式;

位置相鄰的列表大多擁有一種相同的屬性(也就是A、B、C、D這些列表項都是歸屬于同一個列表欄目之內(nèi)的);

列表處理信息的效率很高,但是區(qū)分度不夠強,不適合業(yè)務屬性相互獨立的欄目-列表式頁面導航多是“復合導航”的一部分,很少單獨成頁。

 

【宮格式頁面導航(tabs結構)】

宮格導航的樣式是由宮格組成的,它和列表式導航最主要的區(qū)別就是它占據(jù)的頁面空間比較少;

宮格導航的組成部分互相獨立,各具特色。

宮格導航在同等空間內(nèi)展示的信息量比條目更多宮格式導航的信息承載力比列表更強,更適合工具類型或業(yè)務較復雜的產(chǎn)品。

 

 

特色導航

特色導航是指平時很少見到的導航,它們往往具有極強的限制性,只能在特定環(huán)境下使用。

【輪播式導航-硬件設備】

輪播式導航的擴張性很弱,不適合迭代型產(chǎn)品;

硬件類設備的導航都是固定的,因此無需考慮產(chǎn)品的迭代類需求,可以酌情考慮輪播式導航。

 

【陳列式導航-影視產(chǎn)品】

陳列式導航是頁面導航,它里面的內(nèi)容是可以左右滑動的;

陳列式導航類似于卡片式導航,只是在同一行的;

空間里展示了較多的卡片。

 

【彈出式導航-文案產(chǎn)品】

彈出式導航在公眾號里比較常見,適合文章列表;

彈出式導航多和功能按鈕并排展示,可以提升操作效率總結 。

移動端的產(chǎn)品往往是一個主導航將所有內(nèi)容切割成幾部分,而每個頁面上又單獨設置有頁面導航,頁面導航往往是復合的形式,比如首頁上既有標簽式導航,又有列表式導航和宮格式導航,翻來覆去都是這幾種導航的互相搭配。

 

 

總結

很多設計師總想在導航上做所謂的“創(chuàng)新”,其實這是完全沒必要的,導航的樣式大多都非常普通,這并不是所有設計師都傻笨笨的不知道做創(chuàng)新,而是用戶已經(jīng)培養(yǎng)出了穩(wěn)固的使用習慣,新穎的導航意味著全新的操作認知,會給用戶強行增加一道進入產(chǎn)品的門檻。

早年移動手機剛出現(xiàn)的時候,市面上的導航多種多樣,現(xiàn)在絕大多數(shù)特立獨行的導航都因為潛藏著各種各樣的問題而消失在網(wǎng)絡中,只有這幾種最常用的“普通導航”堅挺地活了下來,它們活著就意味著自身沒有致命的問題,沒問題的導航就是最優(yōu)秀的導航。

這些平庸無奇的導航樣式是經(jīng)過大浪淘沙后最終存活的精華,它們用無數(shù)場商業(yè)競爭宣告了自身穩(wěn)定的地位,如果你真的想做創(chuàng)新,不如多考慮下怎樣幫助產(chǎn)品樹立核心競爭力吧,沒必要在導航上下功夫。

 

作者:小龍? ?集創(chuàng)堂

每天更新,
全站高品質(zhì)素材免費下載!