輕松看懂規(guī)范！詳解組件控件結構系統(tǒng)之導航類

Echo ：本文將細致闡述組件控件結構系統(tǒng)中的導航體系，分別為7類：底部標簽式導航、分段控制式導航、列表式導航、下拉菜單式導航、抽屜式導航、宮格式導航和卡片式導航。

什么是控件？什么組件？兩者的區(qū)別是什么？

Control翻譯為控件，Component翻譯為組件。

普通的說法就是組件為多個元素組合而成，控件為單一元素組合而成。

假如單純通過組件控件，難以知足功能劃分的需求，所以我將這個范圍擴大，分類里面不僅僅含有組件和控件，請不要在意細節(jié)。

如下腦圖是設計規(guī)范的重點，是體系的學習組件控件和功能分類的目錄。

導航類

導航的作用有哪些？

1. 結構化產(chǎn)品內(nèi)容和功能

導航體系相稱于APP的骨架，支撐著內(nèi)容和功能組成的血肉，導航體系起著組織內(nèi)容和功能的作用，讓它們按照產(chǎn)品的信息架構圖進行連接，顯現(xiàn)在用戶面前，導航將零散的內(nèi)容和功能組織成了一個完備的有結構的體系。

2. 凸起核心功能

導航起到了凸起核心功能，適度隱蔽次要功能的作用。核心功能對目標用戶來說是最緊張的。

3. 扁平化用戶義務路徑

可以很好的扁平化信息層級，同時提供了進入不同信息分類或入口。用戶可以敏捷實現(xiàn)不同模塊之間的切換且不會迷失方向。

底部標簽式導航

定義：

用于一級目錄的導航，位于網(wǎng)頁底部，能告訴用戶當前位置及用戶切換同一層級之間的不同模塊，一樣平常最多不超過五個標簽。

特點：

標簽導航是目前最常見的導航情勢。最常見的緣故原由是標簽式導航可以讓流量更大化，分化流量，使得各個模塊都有機會獲取流量進步網(wǎng)頁流量的轉化。

將常用的導航放在底部，無論用戶單手照舊雙手操作都能輕松點擊，從而實現(xiàn)各功能模塊之間的跳轉。

標簽式導航有底部導航和頂部導航兩種，底部導航用于全局導航，頂部導航用于二級導航(遵循Material Design規(guī)范的除外)。

好處：

• 它可以承載緊張性和頻率處于統(tǒng)一級別的功能模塊、信息或義務。
• 它能在第臨時間支持使用者獲取緊張性最高、頻率最大的信息或義務。
• 它能支持用戶在不同模塊、信息和義務之間快速切換。
• 它具有包容性，可以將其他信息的框架消融掉，構建出容量更大的模塊、信息或義務架構。也就是說，許多app的團體架構都是標簽式結構，然后又使用其他的架構去承載界面中的詳細信息。

瑕玷：

• 因為尺寸限定，標簽式導航的數(shù)量上限最好是5個，超過5個就要考慮產(chǎn)品的需求分組是否合適或考慮替換框架。
• 標簽欄占用了肯定的空間，所以削減了網(wǎng)頁的信息承載量。有些產(chǎn)品為了更好地展示網(wǎng)頁信息，會使用一種隱蔽的標簽欄，這種標簽欄會在用戶上滑閱讀時隱蔽，下滑返回時再表現(xiàn)。這種做法確實照顧了網(wǎng)頁的信息展示，但是也要對詳細產(chǎn)品穩(wěn)重看待，由于它可能會讓導航失去便捷性從而降低切換服從。

舵式導航

底部標簽式導航的變種。為了凸起中心的功能，將中心標簽圖標設計的比較凸起，鼓勵用戶多使用該功能。

除去兩側4個標簽之外，其他緊張的標簽都隱蔽在舵式導航中，或者將那些緊張性高、使用相稱頻繁的功能入口放在里面。

但是，舵式導航自己是存在設計矛盾的。在舵式導航中位置的應該是緊張性和使用頻率高的功能，既然它如此緊張，為什么要隱蔽在舵式導航中？這些功能放在二級界面中相稱于被埋起來了，會增長用戶的記憶負擔和操作負荷。

分段控制式導航

定義:

通常用于展示贊成模塊下不同類別的信息或者篩選不用模塊的信息。

特點:

一樣平常為二級導航。

好處:

• 可以很好地扁平化信息層級，同時提供了進入不容信息分類或模態(tài)的入口。
• 用戶可以敏捷實現(xiàn)統(tǒng)一模塊下不同類別信息之間的切換并且不會迷失方向。

瑕玷:

• 分段控制式導航位于頂部，切換起來不方便，雖然iOS有左右滑脫手勢，但是許多用戶并不知道。
• 占有空間，導致屏幕可顯現(xiàn)區(qū)域變少。

列表式導航

定義:

通常針對詳細某個模塊內(nèi)容的信息進行分類，以列表的情勢去呈現(xiàn)。

特點:

• 將詳細的某個模塊的結構以列表的情勢進行分類顯現(xiàn)，結構清晰，便于用戶理解。
• 多用于輔助主導航來顯現(xiàn)信息甚至更多條理的內(nèi)容。
• 適用于大量的信息分類顯現(xiàn)，空間行使服從高，可以展示大量的條款。

好處:

• 列表式結構具有很強的延展性，可以賡續(xù)地加強信息。而且一樣平常來講，它的信息格式都比較同等，調(diào)整的彈性高，抗信息沖擊力也很強。
• 它的導航服從高，可以引入字母索引。
• 它可以很方便的進行分組分類。
• 適合寬而深的信息層級。

瑕玷:

• 功能重于情勢，承載的信息種類也比較單一，容易引起用戶的單調(diào)感，很難讓用戶長時間停頓。
• 假如列表中蘊含的信息量比較重大，每每必要加入搜索功能或者索引，否則用戶會碰到探求信息的困難。

下拉菜單式導航

定義:

通常用于篩選統(tǒng)一模塊下的不同類別的信息，或者是快速啟動某些常用的功能模塊。

特點:

• 為了能讓更多用戶在有限的屏幕空間上做更多的動作，削減干擾用戶查看信息。
• 能將統(tǒng)一模塊的信息做個分類，讓用戶更清晰地了解這個模塊都為我們提供哪些信息或分類。

這種導航情勢一樣平常不會用于全局導航，多用于欣賞類的APP的二級導航，用戶一樣平常每次只欣賞一種類型的內(nèi)容，像刷微博，女生們刷美妝時就會一向刷下去。菜單式導航還有一個益處就是節(jié)省屏幕空間，它用一個睜開的圖標，將幾個甚至幾十個分類都薈萃在一路，在寸土寸金的移動端屏幕顯得尤為緊張。

微博國際版和無秘的二級導航都采用菜單式導航的情勢。

抽屜式導航

定義：

通常針對產(chǎn)品偏沉浸式閱讀的情況下，其他模塊切換頻率低，可采用此導航情勢。

特點：

• 常與底部標簽式導航組合使用，將一級網(wǎng)頁內(nèi)的信息再細分，給人以清晰的呈現(xiàn)體例。
• 若該產(chǎn)品尋求核心內(nèi)容的凸起。可弱化其他信息的展示時，即可采用此導航情勢。

抽屜，是整頓收起的意思。就是把除了核心功能以外的低頻操作都放到一個抽屜里，使得用戶獲得沉浸式的體驗，而且能夠集中用戶的細致力，讓用戶去更好的完成核心功能，不被打攪。我們可以把抽屜式導航類比成極簡的生活體例，只把必須的東西顯現(xiàn)出來，其余的東西要么丟掉，要么整頓后收起來。

好處：

• 用戶可以將細致力放在首頁，削減其他類型的導航帶來分散用戶細致力的情況，給用戶更沉浸式的操作感和閱讀感。
• 最大限度的行使屏幕空間。

瑕玷:

• 虛耗流量，其他模塊的流量會被遏制。不利于整個產(chǎn)品的網(wǎng)頁流量最大化。
• 假如產(chǎn)品框架比較大，必要多功能同時推廣的話。不適合用該導航。

宮格式導航

定義:

類似于手機桌面各個應用入口的導航體例。每個入口每每是比較自力的信息內(nèi)容，用戶進入一個入口后，只處理與此入口相干的內(nèi)容，假如要跳轉至其他入口，必須要先回到入口總界面。

特點:

信息的呈現(xiàn)內(nèi)容比較少，但是多個項目選取的服從比較高。

好處:

• 宮格式結構可以作為信息或平臺的入口，為產(chǎn)品或項目信息提供聚合的載體。
• 它適合承載訂閱類產(chǎn)品或浩繁屬性差異特別很是顯明的分類信息。
• 它可以劃分多個內(nèi)容、多個模式，由不同團隊自力開發(fā)每個模塊再聚合。
• 在具有較強的延展性，可以無窮擴展內(nèi)容。

瑕玷:

• 用戶選擇壓力大。
• 用戶無法第臨時間看到信息，因為宮格式結構是信息或平臺的入口，所以詳細的信息每每隱蔽在下一級界面。

卡片式導航

定義:

一種更加可視化的導航，它能根據(jù)網(wǎng)頁內(nèi)容的轉變及時更新圖片，適合以圖片為主的內(nèi)容，像消息、美食、旅行、視頻圖片等經(jīng)常使用，常作為二級導航。

特點:

宮格式導航的一種延展情勢。每個條款可以呈現(xiàn)更多的信息。

好處:

對運營量的要求比較低，而且單個條款的轉發(fā)率會響應的進步，假如產(chǎn)品的運營量較低或必要較高的條款轉化率，可以使用這種設計。

瑕玷:

當運營量較大的時候，這種結構會降低用戶探求信息的服從。

迎接關注作者的微信公眾號：「UEDC」