国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

本文作者整理了手機(jī)上的一些常用導(dǎo)航結(jié)構(gòu)、頁面結(jié)構(gòu)以及交互控件，統(tǒng)稱手機(jī)交互設(shè)計(jì)通用組件。本篇主要介紹的是八種手機(jī)導(dǎo)航結(jié)構(gòu)。

從2012年開始做交互，到現(xiàn)在2019年也有快7年的時(shí)間了。

交互設(shè)計(jì)其實(shí)就是根據(jù)產(chǎn)品目標(biāo)和用戶目標(biāo)，選擇最合適的導(dǎo)航結(jié)構(gòu)、頁面結(jié)構(gòu)、交互控件以及動(dòng)效。這個(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è)整理，意義也在于此。

整理難免會(huì)有疏漏，歡迎大家留言補(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)槲挥诘撞?，所以?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)航欄上的操作入口，一般會(huì)出現(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)航的操作方式，是通過左右劃動(dòng)來切換不同的tab，而tab位于頁面的頂部。這是一種很安卓的風(fēng)格，它的好處是導(dǎo)航里的每個(gè)tab都比較明顯。

至于壞處，我認(rèn)為現(xiàn)在大家還不是很習(xí)慣通過左右劃動(dòng)來切換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中，由于從右向左劃動(dòng)的手勢已經(jīng)名手有主（劃動(dòng)后打開播主個(gè)人頁），因此為了防止手勢沖突而使用了分段導(dǎo)航。

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

1. 應(yīng)用中左右劃動(dòng)操作已經(jīng)被占用。
2. tab個(gè)數(shù)在2~5個(gè)。

五、列表導(dǎo)航

這種導(dǎo)航，用在某個(gè)頁面里比較多見（比如新聞列表頁），但使用列表來對整個(gè)應(yīng)用進(jìn)行導(dǎo)航，即應(yīng)用的最頂層選項(xiàng)以列表形式呈現(xiàn)，還是相對少見的。

雖然少見，沐風(fēng)還是找到了一些典型的例子：QQ郵箱的導(dǎo)航是以列表的形式組織起來的。

iOS自帶的備忘應(yīng)用，也是使用的列表導(dǎo)航形式。

另外，iOS系統(tǒng)的設(shè)置，以及Siri的啟示頁面，都使用了列表導(dǎo)航：

觀察一下上面這些頁面，它們有兩個(gè)特點(diǎn)：

1. 包含的項(xiàng)目數(shù)量多；
2. 用戶打開應(yīng)用，目標(biāo)往往很明確。比如：用戶打開備忘錄，希望在哪個(gè)文件夾添加備忘，往往都是很明確的；用戶打開設(shè)置，希望設(shè)置的項(xiàng)目通常也都是很明確的。

在包含項(xiàng)目數(shù)量多這一點(diǎn)上，列表導(dǎo)航和頂部tab導(dǎo)航其實(shí)挺像的。只不過列表導(dǎo)航是豎向排列，用戶需要點(diǎn)擊某個(gè)選項(xiàng)，進(jìn)入二級頁，才能看到選項(xiàng)里的內(nèi)容；而頂部tab導(dǎo)航的選項(xiàng)是橫向排列的，并且每個(gè)選項(xiàng)里的內(nèi)容是直接展示的。

那么，具體應(yīng)該選用哪種？答案是：按照用戶是“有明確目標(biāo)”還是”無目的瀏覽”決定。

如果用戶有明確目標(biāo)，那么列表導(dǎo)航能在一頁展示多條項(xiàng)目，方便用戶高效查找；而如果用戶沒有明確的目標(biāo)，只是隨意的瀏覽，那么頂部tab要更友好，因?yàn)槊總€(gè)tab里的內(nèi)容都直接展示出來，方便用戶查看。

但是，頂部tab導(dǎo)航里的選項(xiàng)，越靠后，瀏覽量越小。如下圖所示，由于選項(xiàng)9需要用戶連續(xù)劃動(dòng)8次，所以能夠看到該選項(xiàng)內(nèi)容的用戶已經(jīng)很少了。

六、宮格導(dǎo)航

這種導(dǎo)航形式，在工具類產(chǎn)品中使用較多，比如：騰訊手機(jī)管家。

宮格導(dǎo)航的本質(zhì)上和列表導(dǎo)航完全相同，只是表現(xiàn)形式上，宮格導(dǎo)航更突出圖標(biāo)，列表導(dǎo)航更突出文字。

七、輪播導(dǎo)航

輪播導(dǎo)航是一種很小眾的形式，現(xiàn)在比較常見的用法是在天氣應(yīng)用中，用于切換不同城市。

其實(shí)這種導(dǎo)航和頂部tab導(dǎo)航如出一轍，只是把頂部tab換成了底部的圓點(diǎn)。但也因?yàn)閾Q成了圓點(diǎn)，使得內(nèi)容更加突出，但每個(gè)圓點(diǎn)的含義就不明顯了。

因此使用這種導(dǎo)航有兩個(gè)要點(diǎn)：

1. 選項(xiàng)不宜過多；
2. 需保證用戶對圓點(diǎn)的內(nèi)容有一定的預(yù)期。

關(guān)于第二個(gè)要點(diǎn)，比如天氣應(yīng)用，第一個(gè)圓點(diǎn)是你的所在地，后面的每個(gè)圓點(diǎn)都是用戶關(guān)注的城市，這一點(diǎn)用戶在切換前就已知曉。

如果底部對圓點(diǎn)都是展示同一類的內(nèi)容，用戶在看到第1和第2個(gè)，就能猜到后面也是同類的內(nèi)容，那也是可以的。

八、抽屜導(dǎo)航（漢堡包導(dǎo)航）

抽屜導(dǎo)航是下圖所示這種導(dǎo)航形式：點(diǎn)擊三條橫線（長得像漢堡，所以又叫漢堡包導(dǎo)航），或者從屏幕左側(cè)邊緣向右劃動(dòng)，都能從頁面左側(cè)呼喚出一個(gè)浮層，浮層里通常會(huì)包含多個(gè)選項(xiàng)。

這種導(dǎo)航的優(yōu)點(diǎn)是節(jié)省頁面展示空間，讓用戶將更多的注意力聚焦到當(dāng)前頁面。缺點(diǎn)是，被隱藏的選項(xiàng)點(diǎn)擊率較低，選項(xiàng)里的內(nèi)容曝光量會(huì)比較小。

在許久以前，網(wǎng)易新聞客戶端就采用的抽屜導(dǎo)航。后來版本升級，改為了底部導(dǎo)航欄形式。由于導(dǎo)航里的選項(xiàng)得到了更好的曝光（常駐在底部導(dǎo)航欄里），因此幾個(gè)tab的訪問數(shù)據(jù)都得到了明顯的提升。

關(guān)于抽屜導(dǎo)航，QQ應(yīng)用是做得比較好的例子：QQ把底部導(dǎo)航欄和抽屜導(dǎo)航結(jié)合起來，當(dāng)用戶位于底部導(dǎo)航欄中的任意一個(gè)tab時(shí)，點(diǎn)擊左上角的頭像，或者從屏幕左邊緣向右劃動(dòng)，都能進(jìn)入個(gè)人頁。這里的個(gè)人頁是以二級頁的形式呈現(xiàn)的，而不是浮層。

這種設(shè)計(jì)，無形中加強(qiáng)了用戶進(jìn)入個(gè)人頁的操作便利性，符合QQ需要突出個(gè)人頁的產(chǎn)品需要。

以上總結(jié)了8種導(dǎo)航結(jié)構(gòu)：

1. 底部導(dǎo)航欄
2. 駝式導(dǎo)航欄
3. 頂部tab導(dǎo)航
4. 分段控件
5. 列表導(dǎo)航（包含項(xiàng)目多，用戶目標(biāo)明確）、
6. 宮格導(dǎo)航（圖標(biāo)更突出）、
7. 輪播導(dǎo)航（選項(xiàng)不宜多，對圓點(diǎn)需有預(yù)期）、
8. 抽屜導(dǎo)航（節(jié)省頁面空間、更聚焦，但被隱藏的選項(xiàng)點(diǎn)擊率低）。

#專欄作家#

沐風(fēng)，微信公眾號：沐風(fēng)與體驗(yàn)設(shè)計(jì)。人人都是產(chǎn)品經(jīng)理專欄作家，2017年度作家評選最佳人氣獎(jiǎng)。愛奇藝資深交互設(shè)計(jì)師。留德海龜，曾任職騰訊微生活、網(wǎng)易、宜人貸。6年交互設(shè)計(jì)經(jīng)驗(yàn)，專注設(shè)計(jì)領(lǐng)域，歡迎關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議