個人公眾號：魚大大設計鋪，ID：ydsjp2018

轉載請私信作者，并注明來源公眾號：沐風與體驗設計

交互設計其實就是根據產品目標和用戶目標，選擇最合適的導航結構、頁面結構、交互控件以及動效。這個任務在有的公司是產品經理代勞，有的是UI設計師代勞，在有的公司里則是專門的交互設計師去做這件事。

交互設計的本質，是關于應用與用戶交流的渠道的設計。手機交互設計興起這么多年，各種形形色色的設計方式幾乎已經都出現遍了。

最近打算整理一下手機上的一些常用導航結構、頁面結構以及交互控件，統稱手機交互設計通用組件。

就像那句名言說的“沒必要重復發明輪子”。如果現有的結構和做法，已經被證實為高效實用的，就可以直接拿來實用，也沒有必要進行強行創新。我的這個整理，意義也在于此。

整理難免會有疏漏，歡迎大家留言補充。

首先，先列出現在整理到的所有應用級導航結構：

所謂應用級，就是指這是應用的最高一級導航。如果是存在于某個tab里的導航形式，則不在本文的考慮范圍。

一、底部導航欄

這是最常用的一種導航形式。底部導航欄位于頁面底部，操作方便。但也是因為位于底部，所以導航欄里各個tab的內容不是很突出。

如果你更想讓用戶時時注意到應用的每個tab的標題，那么頂部tab導航更合適。

另外，底部導航欄有兩種用法：

層級導航，即進入一個tab后，用戶在這個tab里點擊別的入口，進入二級頁，則底部導航欄消失，是比較沉浸的做法。

如果用戶要去往另一個tab頁面，用戶必須一步步返回或者從頭開始重新選擇。

層級導航示意

另一種是扁平導航，扁平導航允許用戶在多個內容分類之間切換。網易云音樂和App Store使用了這種導航形式。

扁平導航示意

關于兩者在用法上的詳細區別，請參考之前寫過的這篇文章：

掌握了這個導航控件，你可以設計80%的應用導航

二、舵式導航

舵式導航是在底部導航欄的基礎上增加了一個操作入口，其用法與底部導航欄相同。操作入口位于中央，一般設置為發布新內容的功能居多（如小紅書），也有功能的主推功能（如百度app）。

點擊底部導航欄上的操作入口，一般會出現一個模態浮層：有的是半屏，有的是全屏。至于半屏還是全屏，取決于需要呈現的內容的多少。

半屏浮層示例

全屏浮層示例

這里的操作入口，由于位置極明顯，所以需要放置用戶高頻操作的按鈕，或者應用很希望用戶點擊的按鈕。

三、頂部tab導航

這里討論的頂部tab導航，是整個應用的架構采用頂部tab導航，如下邊左圖所示。

不包括在一個tab中，使用頂部tab導航來組織頁面的情況，如下邊右圖，在首頁tab里，又包含了3個tab

這種導航的操作方式，是通過左右劃動來切換不同的tab，而tab位于頁面的頂部。這是一種很安卓的風格，它的好處是導航里的每個tab都比較明顯。

至于壞處，我認為現在大家還不是很習慣通過左右劃動來切換tab。

最典型的一個例子，就是QQ音樂：之前都是頂部tab導航，終于還是扛不住，在最近的版本改成了底部導航欄這種最為常用的導航形式。

其實很久以前的安卓版微信，也是頂部tab導航，只是后來也改成了底部導航欄形式。

通過這兩個例子，可以看出應用的頂級導航使用頂部tab導航，風險還是比較大的。所以，如果你的tab的個數在3~5個，還是推薦大家使用底部導航欄。

四、分段控件導航

分段控件是iOS設計規范里獨有的一種控件，最典型的是iOS自帶的短信應用中頂部用于切換不同類型短信的這個控件

分段控件可以包含兩個或者更多的分段選項，選項之間的切換，是通過點擊操作來完成。這是它和頂部tab導航最大的區別。

此外，它的選項數量比較受限，一般是2~5個，而頂部tab導航則沒有這個限制。

使用分段控件，一般是“不得已而為之”，往往是由于手勢沖突，不得不使用分段控件這種依靠點擊來切換選項的控件。否則，都是能選頂部tab導航就選。

抖音的頂級導航使用了底部導航欄，在首頁tab中，由于從右向左劃動的手勢已經名手有主（劃動后打開播主個人頁），因此為了防止手勢沖突而使用了分段導航。

所以，當有如下情形時，請使用分段控件導航：

應用中左右劃動操作已經被占用。

tab個數在2~5個。

以上總結了4種導航結構：底部導航欄、舵式導航（中央是操作按鈕）、頂部tab導航（各個tab更明顯，但橫劃不方便操作）、分段控件導航（手勢沖突時選擇）。

---

個人公眾號：魚大大設計鋪，ID：ydsjp2018

轉載請私信作者，并注明來源公眾號：沐風與體驗設計

總結

以上是生活随笔為你收集整理的控件与组件的区别_5分钟学交互：手机交互组件归纳 导航篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。