作者對五種UI欄的設(shè)計進(jìn)行了梳理分析，包括導(dǎo)航欄，搜索欄，狀態(tài)欄，標(biāo)簽欄和工具欄，供大家參考和學(xué)習(xí)。

之前的文章有連載過ios12的人機(jī)界面指南，寫到了app框架，接下來幾篇文章會接著跟大家分享控件設(shè)計指南，包括以下三個部分，今天講第一部分：UI欄。

ios13設(shè)計規(guī)范里，UI欄包括導(dǎo)航欄，搜索欄，狀態(tài)欄，標(biāo)簽欄和工具欄，其中搜索欄較為復(fù)雜，所以也做了一個思維導(dǎo)圖，分享的內(nèi)容主要為以下幾部分：

下面進(jìn)入正文：

01 導(dǎo)航欄navigation bars

1. 導(dǎo)航欄在ios規(guī)范里的描述

導(dǎo)航欄在頁面頂部，狀態(tài)欄的下方，常見的構(gòu)成如下圖：

當(dāng)需要強(qiáng)調(diào)當(dāng)前頁面時，可以使用大標(biāo)題。大標(biāo)題的好處：幫助用戶明確當(dāng)前頁面，同時幫助用戶明確何時滾動到了頁面頂部。大標(biāo)題的交互效果：上滑時大標(biāo)題縮放成小標(biāo)題在導(dǎo)航欄中顯示，如下：

需要注意的點(diǎn)：

（1）顯示全屏內(nèi)容時，為給用戶更好的體驗(yàn)，可隱藏導(dǎo)航欄，比如查看全屏照片，觀看視頻時，閱讀類軟件閱讀狀態(tài)時導(dǎo)航欄會自動隱藏，然后可以通過簡單的操作喚醒導(dǎo)航欄（如單擊屏幕）。

（2）導(dǎo)航欄不要放置過多控件。一般情況下，導(dǎo)航欄只能包含「標(biāo)題」「返回按鈕」和「功能按鈕」，當(dāng)出現(xiàn)多個控件時，將其折疊。如下圖，蘋果自帶的信息app，「管理信息列表」「編輯名字和照片」用一個按鈕進(jìn)行了折疊，點(diǎn)擊「更多」以彈窗形式出現(xiàn)。

再比如，備忘錄app，同樣使用「更多」將操作隱藏。

2. 導(dǎo)航欄的延伸設(shè)計

導(dǎo)航欄的標(biāo)題主要起到導(dǎo)航作用，告訴用戶當(dāng)前在哪，當(dāng)頁面底部有菜單時，標(biāo)題可以隱藏，這樣就可以給其他內(nèi)容留出更多空間。

用戶的閱讀習(xí)慣是從上至下，導(dǎo)航欄的位置是用戶進(jìn)來頁面后最先看到的，所以導(dǎo)航欄被賦予了更多功能，常見的有：

（1）導(dǎo)航欄與與搜索欄結(jié)合：比如電商類app，像淘寶，京東都將搜索欄凍結(jié)在導(dǎo)航欄，方便用戶快速進(jìn)行搜索。

（2）營銷入口：導(dǎo)航欄除了放置功能控件外，為了滿足短暫的業(yè)務(wù)需求也經(jīng)常成為營銷的入口，這樣的入口具有很強(qiáng)的不固定性，將其放置在導(dǎo)航欄，不會使頁面結(jié)構(gòu)發(fā)生太大變化，同時它也不像浮窗那樣具有很強(qiáng)的打擾性。比如雙十一前京東推出的「超級百億活動」：

02 搜索欄search bars

1. 在ios設(shè)計規(guī)范里的描述

搜索允許用戶通過輸入關(guān)鍵字得到目標(biāo)信息，搜索欄可以單獨(dú)顯示，也可以顯示在導(dǎo)航欄或內(nèi)容視窗中，當(dāng)顯示在導(dǎo)航欄時，可以將其固定在導(dǎo)航欄，以便始終可以訪問，也可以將其隱藏，上滑時再顯示。

2. 搜索的作用

當(dāng)產(chǎn)品內(nèi)容過多時，用戶不能快速準(zhǔn)確找到目標(biāo)功能或內(nèi)容，所以就出現(xiàn)了搜索，對用戶而言，搜索能幫助他們在短時間內(nèi)精準(zhǔn)的直達(dá)目標(biāo)，對產(chǎn)品本身而言，搜索是一個巨大的流量入口，在產(chǎn)品運(yùn)營中起著舉足輕重的作用。

除此之外，我們也能通過對用戶搜索數(shù)據(jù)的收集與分析，探知用戶實(shí)際需求，找到產(chǎn)品優(yōu)化和運(yùn)營的機(jī)會點(diǎn)。

3. 搜索的方式

隨著科技的發(fā)展，搜索方式越來越豐富，可以通過文本，語音，圖片，視頻，掃一掃等方式實(shí)現(xiàn)搜索目的，文本搜索很常見，不再贅述；語音搜索，一般伴隨著文本搜索出現(xiàn)，比如支付寶的語音搜索：

還有音樂類軟件的聽音識曲功能也相當(dāng)于語音搜索，再比如網(wǎng)易有道詞典的語音搜索，如下：

圖片搜索：比如淘寶的通過圖片搜同款/相似款，還有百度圖片的以圖搜圖功能。

視頻搜索：視頻搜索是抖音針對部分用戶剛上線的功能，用戶可以根據(jù)視頻中的人物搜索到該人物的其他視頻，隨著5g的發(fā)展，想必該功能會得到更廣泛的應(yīng)用。

掃一掃搜索：淘寶的掃一掃搜索功能，通過掃描目標(biāo)，搜索相關(guān)商品。

4. 搜索流程

這里主要以文本搜索展開介紹，搜索流程可以概括為搜索前→搜索中→搜索后，如下圖

（1）搜索前

搜索前要注意的地方就是搜索入口，下面詳細(xì)說一下不同搜索入口對應(yīng)的場景：

1）獨(dú)立的搜索tab

將搜索作為一個獨(dú)立tab的場景是，搜索對用戶和產(chǎn)品本身都非常重要，用戶使用搜索功能非常頻繁，用戶能通過tab欄快捷定位到搜索，例子有app store，ios的照片，微博。

2）搜索框

最常見的入口形式即在頁面頂部以搜索框形式出現(xiàn)，這種形式又分為以下幾種交互方式：

搜索框隨著上滑操作消失，反向滑動到頂部時出現(xiàn)，如微信，ios的備忘錄都是這種方式。

上滑時搜索框收起變?yōu)樗阉鱥con，反向滑動時搜索框出現(xiàn)，如支付寶，百度網(wǎng)盤

?

搜索框凍結(jié)在頁面頂部，方便用戶快捷使用，多用于內(nèi)容，電商類產(chǎn)品，搜索功能很重要。如淘寶，京東，小紅書，知乎，美團(tuán)都是這種方式。

3）搜索icon

以搜索icon的形式出現(xiàn)在頁面右/左上角也是很常見的一種，這種形式對應(yīng)的場景是：搜索功能必不可少，但優(yōu)先級沒那么高，或頁面元素過多，以小icon的形式出現(xiàn)節(jié)省空間。如支付寶-財富頁面和淘寶-微淘頁面，搜索都是以icon的形式放在頁面右上角。

4）隱藏式搜索框/icon

搜索默認(rèn)隱藏，通過交互動作觸發(fā)。比如微信小程序頁面，搜索是默認(rèn)隱藏的，下拉才會出現(xiàn)。由于觸發(fā)動作過于隱蔽，導(dǎo)致很多用戶都不知道該搜索功能，因?yàn)樵擁撁姹旧硎峭ㄟ^微信消息頁面下拉出現(xiàn)，用戶的普遍認(rèn)知是頁面頂部已顯示完全。

既然用戶找不到，微信為什么還這么做呢？

我們來分析一下小程序這個頁面的使用場景，這個頁面包含兩部分內(nèi)容，一個是「最近使用」，一個是「我的小程序」，這兩部分相對來說數(shù)量沒那么多，用戶可以通過瀏覽快速找到目標(biāo)，瀏覽的操作成本低于搜索操作成本，搜索的使用頻率較低，所以將搜索默認(rèn)隱藏。

再來看從微信-發(fā)現(xiàn)頁點(diǎn)擊進(jìn)入的「小程序」頁，搜索框默認(rèn)在頂部出現(xiàn)，這是因?yàn)?，這個頁面承載的內(nèi)容更多，用戶更多的場景是搜索新的小程序。?

蘋果自帶的app很多都采用了這種方式，如設(shè)置，備忘錄，都是通過下拉操作喚出搜索框，大家可以自己體驗(yàn)一下。我個人認(rèn)為這種隱藏體驗(yàn)并不好，隱藏可以有，但是需要明確告知用戶如何喚出，像設(shè)置和備忘錄以及微信小程序的喚出方式做的過于隱蔽，導(dǎo)致用戶找不到搜索在哪。

5）特殊形式

還有一些特殊的形式，如蘋果系統(tǒng)左滑進(jìn)入搜索頁，下拉激活搜索框

?（2）搜索中

1）點(diǎn)擊搜索入口

點(diǎn)擊搜索入口后，分兩種情況，跳轉(zhuǎn)新頁面或仍留在當(dāng)前頁面。

跳轉(zhuǎn)新頁面是為了承載更多信息，前面有說到搜索是運(yùn)營的一個機(jī)會點(diǎn)，所以在這個頁面除了展示與搜索相關(guān)的信息外，還會有運(yùn)營信息的漏出，這個新頁面的構(gòu)成大部分情況如下：

?

搜索框被激活，鍵盤自動彈出，這個時候要注意，鍵盤不要遮蓋住重要信息。還有一種情況是，進(jìn)入新頁面后搜索框未被激活，鍵盤也不會彈出，需要再次點(diǎn)擊搜索框才會激活鍵盤，這樣的好處是給運(yùn)營留下更多空間，如抖音之前便是采用這種方式：

?

但這樣搜索流程就多了一步，體驗(yàn)不順暢。在抖音最新更新的版本中，已經(jīng)放棄了這種方式，想來以抖音現(xiàn)在的實(shí)力，已不需要通過在搜索頁面漏出更多內(nèi)容提高內(nèi)容的瀏覽量了。

留在當(dāng)前頁面完成搜索的情況，一般適用于搜索內(nèi)容量小，且搜索范圍為當(dāng)前頁面的內(nèi)容。比如電話-通訊錄頁面的搜索。

2）搜索又分為即時搜索和點(diǎn)擊搜索按鈕進(jìn)行搜索，即時搜索指用戶每輸入一個字，系統(tǒng)就會進(jìn)行一次搜索，非?？旖?，搜索效率高，但對程序的計算能力要求也高。

輸入搜索信息完畢后點(diǎn)擊搜索按鈕進(jìn)行搜索，這種方式雖效率不高，但對技術(shù)的要求也相對較低。

（3）搜索后 搜索結(jié)果

1）多數(shù)據(jù)——結(jié)果分類呈現(xiàn)/篩選

當(dāng)搜索結(jié)果數(shù)據(jù)過多時，為了方便用戶快速準(zhǔn)確的找到目標(biāo)，可以對搜索結(jié)果進(jìn)行分類或提供篩選功能。如微信，淘寶的搜索結(jié)果頁都是通過頂部tab對結(jié)果進(jìn)行分類，同時淘寶還提供了篩選功能。

2）少數(shù)據(jù)——智能推薦其他相關(guān)內(nèi)容

當(dāng)搜索到的數(shù)據(jù)過少時，可以通過智能推薦其他相關(guān)內(nèi)容的方式引導(dǎo)用戶擴(kuò)大搜索范圍，進(jìn)而得到目標(biāo)結(jié)果。

3）無數(shù)據(jù)——智能推薦其他相關(guān)內(nèi)容

無數(shù)據(jù)和少數(shù)據(jù)一樣，通過智能推薦其他相關(guān)內(nèi)容的方式引導(dǎo)用戶擴(kuò)大搜索范圍，進(jìn)而得到目標(biāo)結(jié)果。

比如自如搜索房源時，當(dāng)沒有符合搜索條件的房源時，系統(tǒng)會自動推薦其他與搜索條件相關(guān)的房源供用戶選擇，提升了用戶體驗(yàn)，同時提高了成交率。

4）錯誤數(shù)據(jù)——智能糾錯

當(dāng)用戶輸入的搜索信息錯誤時，為其提供正確的詞供其選擇，或直接展示正確的搜索結(jié)果。如淘寶和微信都是采取的后者的方式：

03 狀態(tài)欄status bars

1. 在ios設(shè)計規(guī)范里的描述

狀態(tài)欄出現(xiàn)在屏幕的最上方，顯示設(shè)備當(dāng)前狀態(tài)的相關(guān)信息，比如時間，運(yùn)營商，網(wǎng)絡(luò)狀態(tài)和電量，狀態(tài)欄中顯示的實(shí)際信息取決于設(shè)備和系統(tǒng)的配置。

需要注意的點(diǎn)：

1）全屏情況下，可以暫時隱藏狀態(tài)欄，為用戶提供更身臨其境的體驗(yàn)。

2）不要永久隱藏狀態(tài)欄，如果沒有狀態(tài)欄，用戶必須離開當(dāng)前應(yīng)用來查看時間或電量，體驗(yàn)很不好。比如百度云盤在視頻播放界面，永久性的隱藏了狀態(tài)欄，每次看視頻時想看一下電量還剩多少或者幾點(diǎn)了都必須退出當(dāng)前播放頁面才能查看，讓人很崩潰。

3）使?fàn)顟B(tài)欄樣式與應(yīng)用程序相協(xié)調(diào)，狀態(tài)欄有深色和淺色兩種樣式，根據(jù)不同頁面實(shí)際情況進(jìn)行個性化配置給用戶更好的體驗(yàn)。

04 標(biāo)簽欄tab bars

1. 在ios里的描述

標(biāo)簽欄在頁面底部，為用戶提供在應(yīng)用程序內(nèi)不同部分快速切換的功能。標(biāo)簽欄為半透明狀態(tài)，可能會有背景色，在顯示鍵盤時被隱藏。

標(biāo)簽欄可以包含任意數(shù)量標(biāo)簽，但可見的標(biāo)簽數(shù)量需根據(jù)設(shè)備的大小而變化，如果由于水平空間有限而無法顯示全部選項(xiàng)，則最后的可見標(biāo)簽變?yōu)椤案唷保c(diǎn)擊更多后在單獨(dú)的頁面顯示其他標(biāo)簽。

需要注意的點(diǎn)：

1）標(biāo)簽的數(shù)量，避免過多或過少。標(biāo)簽過多會使可點(diǎn)擊區(qū)域變小，且會增加應(yīng)用程序的復(fù)雜度，使查找更加困難。標(biāo)簽過少在視覺上會增加頁面的割裂感，使頁面整體感降低，標(biāo)簽的數(shù)量最好控制在三到五個。

但這也不是絕對的，需要根據(jù)系統(tǒng)實(shí)際內(nèi)容來定，比如ios自帶的「文件」app，底部標(biāo)簽有「最近項(xiàng)目」「瀏覽」兩個。

頁面的割裂感可以通過視覺設(shè)計的手段去調(diào)和，比如將標(biāo)簽的排版變?yōu)樽髨D標(biāo)，右文字的左右排版。

2）當(dāng)標(biāo)簽處于不可用狀態(tài)時，不要刪除或者禁用，如果標(biāo)簽時有時沒有，時可用時不可用，會讓系統(tǒng)變得不穩(wěn)定不可預(yù)測，讓用戶感覺不可控。

當(dāng)某些標(biāo)簽對應(yīng)的內(nèi)容不可用時，可通過其他方式告知用戶當(dāng)前內(nèi)容不可用原因，而不是對該標(biāo)簽禁用或刪除。比如ios設(shè)備沒有歌曲時，點(diǎn)擊「音樂」應(yīng)用中的「我的音樂」，會告知用戶如何下載歌曲。

3）使標(biāo)簽欄的圖標(biāo)在視覺上保持一致和平衡，如ios自帶的apple store 和 app store，底部標(biāo)簽在體量與顏色上都保持統(tǒng)一和平衡。

4）表達(dá)明確：如果標(biāo)簽可以用系統(tǒng)圖標(biāo)來表示就盡量用系統(tǒng)圖標(biāo)，如果非要自己設(shè)計，要注意傳達(dá)意思的準(zhǔn)確度，也可以用輔助文字來說明，但文字不宜過長，避免出現(xiàn)換行。

5）當(dāng)有新消息時，可以在標(biāo)簽欄上使用數(shù)字氣泡或小紅點(diǎn)進(jìn)行提示。

以上是ios設(shè)計規(guī)范中對標(biāo)簽欄的描述，我們在遵循基礎(chǔ)規(guī)則的同時，要根據(jù)實(shí)際的業(yè)務(wù)場景勇于創(chuàng)新。如，為了突出某個標(biāo)簽，出現(xiàn)了如下的形式：

中間的「發(fā)布」標(biāo)簽體量上明顯高于其他標(biāo)簽，通過這種方式提高了該標(biāo)簽的點(diǎn)擊率，引導(dǎo)用戶發(fā)布內(nèi)容，提高內(nèi)容存量。

2. 標(biāo)簽欄的位置形式：底部標(biāo)簽欄；頂部標(biāo)簽欄

在講每種標(biāo)簽欄位置的優(yōu)劣勢前，先來看下圖，這是史蒂文·霍伯通過研究發(fā)現(xiàn)的拇指熱區(qū)圖，研究發(fā)現(xiàn)49%的人依靠一個拇指在手機(jī)上完成任務(wù)。

其中綠色為用戶可輕松觸及的區(qū)域，黃色表示需要伸展的區(qū)域，紅色表示需要用戶改變設(shè)備握住方式的區(qū)域。

（1）底部標(biāo)簽欄

底部標(biāo)簽欄是最常見的一種導(dǎo)航形式，它已在用戶心中形成固定認(rèn)知，用戶打開一個系統(tǒng)，會本能的去底部查看標(biāo)簽，希望通過底部標(biāo)簽快速了解系統(tǒng)能提供的功能。

除此之外，隨著手機(jī)屏幕的增大，用戶通常是單手握住手機(jī)下半部使用手機(jī)，通過上圖可以看出，標(biāo)簽放在底部在使用時更快捷舒適。

（2）頂部標(biāo)簽欄

頂部標(biāo)簽欄通常會與底部標(biāo)簽欄結(jié)合使用，其優(yōu)點(diǎn)是符合用戶從上至下的閱讀習(xí)慣，且標(biāo)簽數(shù)比底部標(biāo)簽欄承載的更多，當(dāng)存在多個標(biāo)簽時可以通過左右滑動的形式承載，一般用在新聞資訊類產(chǎn)品中，如下圖的新浪新聞和今日頭條都采用了這種方式。

缺點(diǎn)是它放置在用戶最難觸達(dá)的紅色區(qū)域內(nèi)，不易單手操作，很多產(chǎn)品允許用戶左右滑動來實(shí)現(xiàn)標(biāo)簽間的切換，這種方式雖方便用戶快速切換，但與系統(tǒng)自帶的右滑返回操作有沖突，所以這種方式更多出現(xiàn)在一級頁面。

05 工具欄toolbars

工具欄通常在頁面底部出現(xiàn)，包含了對當(dāng)前頁面的相關(guān)操作。工具欄為半透明狀態(tài)，有時有背景色，當(dāng)用戶不需要時通常會隱藏。

例如，在safari中，向上滑動開始閱讀頁面時，工具欄自動隱藏，向下滑動或點(diǎn)擊屏幕底部時自動顯示。同時當(dāng)鍵盤出現(xiàn)時，工具欄也會被隱藏。

需要注意的幾個點(diǎn)：

1）工具欄的按鈕是使用圖標(biāo)還是文字：當(dāng)工具欄中出現(xiàn)三個以上的按鈕時，使用圖標(biāo)會更合適，因?yàn)閳D標(biāo)所占空間比文字更小，更容易承載多個按鈕。

其次，當(dāng)按鈕出現(xiàn)三個以上時，字符太多會使頁面變得凌亂。當(dāng)按鈕為三個或三個以下時使用文字更加直觀，更易讓用戶理解，比如日歷app中，使用文字是因?yàn)閳D標(biāo)會使三個按鈕的含義造成混淆。

2）避免在工具欄中使用分段控件。分段控件允許用戶切換頁面，而工具欄只作用于當(dāng)前頁面。

如果需要切換頁面，可以使用標(biāo)簽欄進(jìn)行切換。

3）給文本按鈕留有充足空間。文本按鈕之間留有充足間距，更利于用戶理解與點(diǎn)擊。

好了，今天就說到這，文章較長，希望大家能耐心消化，希望此文對你有一點(diǎn)幫助。

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

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