個(gè)人公眾號：魚大大設(shè)計(jì)鋪，ID：ydsjp2018

轉(zhuǎn)載請私信作者，并注明來源公眾號：沐風(fēng)與體驗(yàn)設(shè)計(jì)

交互設(shè)計(jì)其實(shí)就是根據(jù)產(chǎn)品目標(biāo)和用戶目標(biāo)，選擇最合適的導(dǎo)航結(jié)構(gòu)、頁面結(jié)構(gòu)、交互控件以及動效。這個(gè)任務(wù)在有的公司是產(chǎn)品經(jīng)理代勞，有的是UI設(shè)計(jì)師代勞，在有的公司里則是專門的交互設(shè)計(jì)師去做這件事。

交互設(shè)計(jì)的本質(zhì)，是關(guān)于應(yīng)用與用戶交流的渠道的設(shè)計(jì)。手機(jī)交互設(shè)計(jì)興起這么多年，各種形形色色的設(shè)計(jì)方式幾乎已經(jīng)都出現(xiàn)遍了。

最近打算整理一下手機(jī)上的一些常用導(dǎo)航結(jié)構(gòu)、頁面結(jié)構(gòu)以及交互控件，統(tǒng)稱手機(jī)交互設(shè)計(jì)通用組件。

就像那句名言說的“沒必要重復(fù)發(fā)明輪子”。如果現(xiàn)有的結(jié)構(gòu)和做法，已經(jīng)被證實(shí)為高效實(shí)用的，就可以直接拿來實(shí)用，也沒有必要進(jìn)行強(qiáng)行創(chuàng)新。我的這個(gè)整理，意義也在于此。

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

首先，先列出現(xiàn)在整理到的所有應(yīng)用級導(dǎo)航結(jié)構(gòu)：

所謂應(yīng)用級，就是指這是應(yīng)用的最高一級導(dǎo)航。如果是存在于某個(gè)tab里的導(dǎo)航形式，則不在本文的考慮范圍。

一、底部導(dǎo)航欄

這是最常用的一種導(dǎo)航形式。底部導(dǎo)航欄位于頁面底部，操作方便。但也是因?yàn)槲挥诘撞?#xff0c;所以導(dǎo)航欄里各個(gè)tab的內(nèi)容不是很突出。

如果你更想讓用戶時(shí)時(shí)注意到應(yīng)用的每個(gè)tab的標(biāo)題，那么頂部tab導(dǎo)航更合適。

另外，底部導(dǎo)航欄有兩種用法：

層級導(dǎo)航，即進(jìn)入一個(gè)tab后，用戶在這個(gè)tab里點(diǎn)擊別的入口，進(jìn)入二級頁，則底部導(dǎo)航欄消失，是比較沉浸的做法。

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

層級導(dǎo)航示意

另一種是扁平導(dǎo)航，扁平導(dǎo)航允許用戶在多個(gè)內(nèi)容分類之間切換。網(wǎng)易云音樂和App Store使用了這種導(dǎo)航形式。

扁平導(dǎo)航示意

關(guān)于兩者在用法上的詳細(xì)區(qū)別，請參考之前寫過的這篇文章：

掌握了這個(gè)導(dǎo)航控件，你可以設(shè)計(jì)80%的應(yīng)用導(dǎo)航

二、舵式導(dǎo)航

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

點(diǎn)擊底部導(dǎo)航欄上的操作入口，一般會出現(xiàn)一個(gè)模態(tài)浮層：有的是半屏，有的是全屏。至于半屏還是全屏，取決于需要呈現(xiàn)的內(nèi)容的多少。

半屏浮層示例

全屏浮層示例

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

三、頂部tab導(dǎo)航

這里討論的頂部tab導(dǎo)航，是整個(gè)應(yīng)用的架構(gòu)采用頂部tab導(dǎo)航，如下邊左圖所示。

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

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

至于壞處，我認(rèn)為現(xiàn)在大家還不是很習(xí)慣通過左右劃動來切換tab。

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

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

通過這兩個(gè)例子，可以看出應(yīng)用的頂級導(dǎo)航使用頂部tab導(dǎo)航，風(fēng)險(xiǎn)還是比較大的。所以，如果你的tab的個(gè)數(shù)在3~5個(gè)，還是推薦大家使用底部導(dǎo)航欄。

四、分段控件導(dǎo)航

分段控件是iOS設(shè)計(jì)規(guī)范里獨(dú)有的一種控件，最典型的是iOS自帶的短信應(yīng)用中頂部用于切換不同類型短信的這個(gè)控件

分段控件可以包含兩個(gè)或者更多的分段選項(xiàng)，選項(xiàng)之間的切換，是通過點(diǎn)擊操作來完成。這是它和頂部tab導(dǎo)航最大的區(qū)別。

此外，它的選項(xiàng)數(shù)量比較受限，一般是2~5個(gè)，而頂部tab導(dǎo)航則沒有這個(gè)限制。

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

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

所以，當(dāng)有如下情形時(shí)，請使用分段控件導(dǎo)航：

應(yīng)用中左右劃動操作已經(jīng)被占用。

tab個(gè)數(shù)在2~5個(gè)。

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

---

個(gè)人公眾號：魚大大設(shè)計(jì)鋪，ID：ydsjp2018

轉(zhuǎn)載請私信作者，并注明來源公眾號：沐風(fēng)與體驗(yàn)設(shè)計(jì)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。