作者對五種UI欄的設計進行了梳理分析，包括導航欄，搜索欄，狀態欄，標簽欄和工具欄，供大家參考和學習。

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

ios13設計規范里，UI欄包括導航欄，搜索欄，狀態欄，標簽欄和工具欄，其中搜索欄較為復雜，所以也做了一個思維導圖，分享的內容主要為以下幾部分：

下面進入正文：

01 導航欄navigation bars

1. 導航欄在ios規范里的描述

導航欄在頁面頂部，狀態欄的下方，常見的構成如下圖：

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

需要注意的點：

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

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

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

2. 導航欄的延伸設計

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

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

（1）導航欄與與搜索欄結合：比如電商類app，像淘寶，京東都將搜索欄凍結在導航欄，方便用戶快速進行搜索。

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

02 搜索欄search bars

1. 在ios設計規范里的描述

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

2. 搜索的作用

當產品內容過多時，用戶不能快速準確找到目標功能或內容，所以就出現了搜索，對用戶而言，搜索能幫助他們在短時間內精準的直達目標，對產品本身而言，搜索是一個巨大的流量入口，在產品運營中起著舉足輕重的作用。

除此之外，我們也能通過對用戶搜索數據的收集與分析，探知用戶實際需求，找到產品優化和運營的機會點。

3. 搜索的方式

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

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

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

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

掃一掃搜索：淘寶的掃一掃搜索功能，通過掃描目標，搜索相關商品。

4. 搜索流程

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

（1）搜索前

搜索前要注意的地方就是搜索入口，下面詳細說一下不同搜索入口對應的場景：

1）獨立的搜索tab

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

2）搜索框

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

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

上滑時搜索框收起變為搜索icon，反向滑動時搜索框出現，如支付寶，百度網盤

?

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

3）搜索icon

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

4）隱藏式搜索框/icon

搜索默認隱藏，通過交互動作觸發。比如微信小程序頁面，搜索是默認隱藏的，下拉才會出現。由于觸發動作過于隱蔽，導致很多用戶都不知道該搜索功能，因為該頁面本身是通過微信消息頁面下拉出現，用戶的普遍認知是頁面頂部已顯示完全。

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

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

再來看從微信-發現頁點擊進入的「小程序」頁，搜索框默認在頂部出現，這是因為，這個頁面承載的內容更多，用戶更多的場景是搜索新的小程序。?

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

5）特殊形式

還有一些特殊的形式，如蘋果系統左滑進入搜索頁，下拉激活搜索框

?（2）搜索中

1）點擊搜索入口

點擊搜索入口后，分兩種情況，跳轉新頁面或仍留在當前頁面。

跳轉新頁面是為了承載更多信息，前面有說到搜索是運營的一個機會點，所以在這個頁面除了展示與搜索相關的信息外，還會有運營信息的漏出，這個新頁面的構成大部分情況如下：

?

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

?

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

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

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

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

（3）搜索后 搜索結果

1）多數據——結果分類呈現/篩選

當搜索結果數據過多時，為了方便用戶快速準確的找到目標，可以對搜索結果進行分類或提供篩選功能。如微信，淘寶的搜索結果頁都是通過頂部tab對結果進行分類，同時淘寶還提供了篩選功能。

2）少數據——智能推薦其他相關內容

當搜索到的數據過少時，可以通過智能推薦其他相關內容的方式引導用戶擴大搜索范圍，進而得到目標結果。

3）無數據——智能推薦其他相關內容

無數據和少數據一樣，通過智能推薦其他相關內容的方式引導用戶擴大搜索范圍，進而得到目標結果。

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

4）錯誤數據——智能糾錯

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

03 狀態欄status bars

1. 在ios設計規范里的描述

狀態欄出現在屏幕的最上方，顯示設備當前狀態的相關信息，比如時間，運營商，網絡狀態和電量，狀態欄中顯示的實際信息取決于設備和系統的配置。

需要注意的點：

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

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

3）使狀態欄樣式與應用程序相協調，狀態欄有深色和淺色兩種樣式，根據不同頁面實際情況進行個性化配置給用戶更好的體驗。

04 標簽欄tab bars

1. 在ios里的描述

標簽欄在頁面底部，為用戶提供在應用程序內不同部分快速切換的功能。標簽欄為半透明狀態，可能會有背景色，在顯示鍵盤時被隱藏。

標簽欄可以包含任意數量標簽，但可見的標簽數量需根據設備的大小而變化，如果由于水平空間有限而無法顯示全部選項，則最后的可見標簽變為“更多”，點擊更多后在單獨的頁面顯示其他標簽。

需要注意的點：

1）標簽的數量，避免過多或過少。標簽過多會使可點擊區域變小，且會增加應用程序的復雜度，使查找更加困難。標簽過少在視覺上會增加頁面的割裂感，使頁面整體感降低，標簽的數量最好控制在三到五個。

但這也不是絕對的，需要根據系統實際內容來定，比如ios自帶的「文件」app，底部標簽有「最近項目」「瀏覽」兩個。

頁面的割裂感可以通過視覺設計的手段去調和，比如將標簽的排版變為左圖標，右文字的左右排版。

2）當標簽處于不可用狀態時，不要刪除或者禁用，如果標簽時有時沒有，時可用時不可用，會讓系統變得不穩定不可預測，讓用戶感覺不可控。

當某些標簽對應的內容不可用時，可通過其他方式告知用戶當前內容不可用原因，而不是對該標簽禁用或刪除。比如ios設備沒有歌曲時，點擊「音樂」應用中的「我的音樂」，會告知用戶如何下載歌曲。

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

4）表達明確：如果標簽可以用系統圖標來表示就盡量用系統圖標，如果非要自己設計，要注意傳達意思的準確度，也可以用輔助文字來說明，但文字不宜過長，避免出現換行。

5）當有新消息時，可以在標簽欄上使用數字氣泡或小紅點進行提示。

以上是ios設計規范中對標簽欄的描述，我們在遵循基礎規則的同時，要根據實際的業務場景勇于創新。如，為了突出某個標簽，出現了如下的形式：

中間的「發布」標簽體量上明顯高于其他標簽，通過這種方式提高了該標簽的點擊率，引導用戶發布內容，提高內容存量。

2. 標簽欄的位置形式：底部標簽欄；頂部標簽欄

在講每種標簽欄位置的優劣勢前，先來看下圖，這是史蒂文·霍伯通過研究發現的拇指熱區圖，研究發現49%的人依靠一個拇指在手機上完成任務。

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

（1）底部標簽欄

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

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

（2）頂部標簽欄

頂部標簽欄通常會與底部標簽欄結合使用，其優點是符合用戶從上至下的閱讀習慣，且標簽數比底部標簽欄承載的更多，當存在多個標簽時可以通過左右滑動的形式承載，一般用在新聞資訊類產品中，如下圖的新浪新聞和今日頭條都采用了這種方式。

缺點是它放置在用戶最難觸達的紅色區域內，不易單手操作，很多產品允許用戶左右滑動來實現標簽間的切換，這種方式雖方便用戶快速切換，但與系統自帶的右滑返回操作有沖突，所以這種方式更多出現在一級頁面。

05 工具欄toolbars

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

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

需要注意的幾個點：

1）工具欄的按鈕是使用圖標還是文字：當工具欄中出現三個以上的按鈕時，使用圖標會更合適，因為圖標所占空間比文字更小，更容易承載多個按鈕。

其次，當按鈕出現三個以上時，字符太多會使頁面變得凌亂。當按鈕為三個或三個以下時使用文字更加直觀，更易讓用戶理解，比如日歷app中，使用文字是因為圖標會使三個按鈕的含義造成混淆。

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

如果需要切換頁面，可以使用標簽欄進行切換。

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

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

本文由 @poppy 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議