想成為真正的UI 設(shè)計(jì)師，光會(huì)視覺(jué)設(shè)計(jì)可不行。這份控件設(shè)計(jì)指南，可以幫你快速鞏固基礎(chǔ)。本文包括三個(gè)部分，今天講第一部分：UI 欄。

學(xué)控件之前，先來(lái)過(guò)一遍設(shè)計(jì)指南：《看不完 iOS 人機(jī)交互指南？高手總結(jié)了這份濃縮精簡(jiǎn)版！》

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

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

導(dǎo)航欄navigation bars

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

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

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

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

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

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

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

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

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

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

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

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

搜索欄search bars

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

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

2. 搜索的作用

當(dāng)產(chǎn)品內(nèi)容過(guò)多時(shí)，用戶不能快速準(zhǔn)確找到目標(biāo)功能或內(nèi)容，所以就出現(xiàn)了搜索，對(duì)用戶而言，搜索能幫助他們?cè)诙虝r(shí)間內(nèi)精準(zhǔn)的直達(dá)目標(biāo)，對(duì)產(chǎn)品本身而言，搜索是一個(gè)巨大的流量入口，在產(chǎn)品運(yùn)營(yíng)中起著舉足輕重的作用。除此之外，我們也能通過(guò)對(duì)用戶搜索數(shù)據(jù)的收集與分析，探知用戶實(shí)際需求，找到產(chǎn)品優(yōu)化和運(yùn)營(yíng)的機(jī)會(huì)點(diǎn)。

3. 搜索的方式

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

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

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

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

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

4. 搜索流程

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

搜索前

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

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

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

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

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

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

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

隱藏式搜索框/icon：搜索默認(rèn)隱藏，通過(guò)交互動(dòng)作觸發(fā)。比如微信小程序頁(yè)面，搜索是默認(rèn)隱藏的，下拉才會(huì)出現(xiàn)。由于觸發(fā)動(dòng)作過(guò)于隱蔽，導(dǎo)致很多用戶都不知道該搜索功能，因?yàn)樵擁?yè)面本身是通過(guò)微信消息頁(yè)面下拉出現(xiàn)，用戶的普遍認(rèn)知是頁(yè)面頂部已顯示完全。既然用戶找不到，微信為什么還這么做呢？我們來(lái)分析一下小程序這個(gè)頁(yè)面的使用場(chǎng)景，這個(gè)頁(yè)面包含兩部分內(nèi)容，一個(gè)是「最近使用」，一個(gè)是「我的小程序」，這兩部分相對(duì)來(lái)說(shuō)數(shù)量沒(méi)那么多，用戶可以通過(guò)瀏覽快速找到目標(biāo)，瀏覽的操作成本低于搜索操作成本，搜索的使用頻率較低，所以將搜索默認(rèn)隱藏。

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

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

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

搜索中

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

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

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

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

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

搜索又分為即時(shí)搜索和點(diǎn)擊搜索按鈕進(jìn)行搜索，即時(shí)搜索指用戶每輸入一個(gè)字，系統(tǒng)就會(huì)進(jìn)行一次搜索，非?？旖?，搜索效率高，但對(duì)程序的計(jì)算能力要求也高。輸入搜索信息完畢后點(diǎn)擊搜索按鈕進(jìn)行搜索，這種方式雖效率不高，但對(duì)技術(shù)的要求也相對(duì)較低。

搜索后—搜索結(jié)果：

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

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

無(wú)數(shù)據(jù)——智能推薦其他相關(guān)內(nèi)容：無(wú)數(shù)據(jù)和少數(shù)據(jù)一樣，通過(guò)智能推薦其他相關(guān)內(nèi)容的方式引導(dǎo)用戶擴(kuò)大搜索范圍，進(jìn)而得到目標(biāo)結(jié)果。比如自如搜索房源時(shí)，當(dāng)沒(méi)有符合搜索條件的房源時(shí)，系統(tǒng)會(huì)自動(dòng)推薦其他與搜索條件相關(guān)的房源供用戶選擇，提升了用戶體驗(yàn)，同時(shí)提高了成交率。

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

狀態(tài)欄status bars

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

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

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

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

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

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

標(biāo)簽欄tab bars

1. 在iOS里的描述

標(biāo)簽欄在頁(yè)面底部，為用戶提供在應(yīng)用程序內(nèi)不同部分快速切換的功能。標(biāo)簽欄為半透明狀態(tài)，可能會(huì)有背景色，在顯示鍵盤(pán)時(shí)被隱藏。標(biāo)簽欄可以包含任意數(shù)量標(biāo)簽，但可見(jiàn)的標(biāo)簽數(shù)量需根據(jù)設(shè)備的大小而變化，如果由于水平空間有限而無(wú)法顯示全部選項(xiàng)，則最后的可見(jiàn)標(biāo)簽變?yōu)椤父唷梗c(diǎn)擊更多后在單獨(dú)的頁(yè)面顯示其他標(biāo)簽。

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

標(biāo)簽的數(shù)量，避免過(guò)多或過(guò)少。標(biāo)簽過(guò)多會(huì)使可點(diǎn)擊區(qū)域變小，且會(huì)增加應(yīng)用程序的復(fù)雜度，使查找更加困難。標(biāo)簽過(guò)少在視覺(jué)上會(huì)增加頁(yè)面的割裂感，使頁(yè)面整體感降低，標(biāo)簽的數(shù)量最好控制在三到五個(gè)。但這也不是絕對(duì)的，需要根據(jù)系統(tǒng)實(shí)際內(nèi)容來(lái)定，比如 iOS 自帶的「文件」app，底部標(biāo)簽有「最近項(xiàng)目」「瀏覽」兩個(gè)。

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

當(dāng)標(biāo)簽處于不可用狀態(tài)時(shí)，不要?jiǎng)h除或者禁用，如果標(biāo)簽時(shí)有時(shí)沒(méi)有，時(shí)可用時(shí)不可用，會(huì)讓系統(tǒng)變得不穩(wěn)定不可預(yù)測(cè)，讓用戶感覺(jué)不可控。當(dāng)某些標(biāo)簽對(duì)應(yīng)的內(nèi)容不可用時(shí)，可通過(guò)其他方式告知用戶當(dāng)前內(nèi)容不可用原因，而不是對(duì)該標(biāo)簽禁用或刪除。比如 iOS 設(shè)備沒(méi)有歌曲時(shí)，點(diǎn)擊「音樂(lè)」應(yīng)用中的「我的音樂(lè)」，會(huì)告知用戶如何下載歌曲。

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

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

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

以上是 iOS 設(shè)計(jì)規(guī)范中對(duì)標(biāo)簽欄的描述，我們?cè)谧裱A(chǔ)規(guī)則的同時(shí)，要根據(jù)實(shí)際的業(yè)務(wù)場(chǎng)景勇于創(chuàng)新。如，為了突出某個(gè)標(biāo)簽，出現(xiàn)了如下的形式：

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

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

在講每種標(biāo)簽欄位置的優(yōu)劣勢(shì)前，先來(lái)看下圖，這是史蒂文·霍伯通過(guò)研究發(fā)現(xiàn)的拇指熱區(qū)圖，研究發(fā)現(xiàn) 49% 的人依靠一個(gè)拇指在手機(jī)上完成任務(wù)。其中綠色為用戶可輕松觸及的區(qū)域，黃色表示需要伸展的區(qū)域，紅色表示需要用戶改變?cè)O(shè)備握住方式的區(qū)域。

底部標(biāo)簽欄

底部標(biāo)簽欄是最常見(jiàn)的一種導(dǎo)航形式，它已在用戶心中形成固定認(rèn)知，用戶打開(kāi)一個(gè)系統(tǒng)，會(huì)本能的去底部查看標(biāo)簽，希望通過(guò)底部標(biāo)簽快速了解系統(tǒng)能提供的功能。除此之外，隨著手機(jī)屏幕的增大，用戶通常是單手握住手機(jī)下半部使用手機(jī)，通過(guò)上圖可以看出，標(biāo)簽放在底部在使用時(shí)更快捷舒適。

頂部標(biāo)簽欄

頂部標(biāo)簽欄通常會(huì)與底部標(biāo)簽欄結(jié)合使用，其優(yōu)點(diǎn)是符合用戶從上至下的閱讀習(xí)慣，且標(biāo)簽數(shù)比底部標(biāo)簽欄承載的更多，當(dāng)存在多個(gè)標(biāo)簽時(shí)可以通過(guò)左右滑動(dòng)的形式承載，一般用在新聞資訊類產(chǎn)品中，如下圖的新浪新聞和今日頭條都采用了這種方式。缺點(diǎn)是它放置在用戶最難觸達(dá)的紅色區(qū)域內(nèi)，不易單手操作，很多產(chǎn)品允許用戶左右滑動(dòng)來(lái)實(shí)現(xiàn)標(biāo)簽間的切換，這種方式雖方便用戶快速切換，但與系統(tǒng)自帶的右滑返回操作有沖突，所以這種方式更多出現(xiàn)在一級(jí)頁(yè)面。

工具欄toolbars

工具欄通常在頁(yè)面底部出現(xiàn)，包含了對(duì)當(dāng)前頁(yè)面的相關(guān)操作。工具欄為半透明狀態(tài)，有時(shí)有背景色，當(dāng)用戶不需要時(shí)通常會(huì)隱藏。例如，在 safari 中，向上滑動(dòng)開(kāi)始閱讀頁(yè)面時(shí)，工具欄自動(dòng)隱藏，向下滑動(dòng)或點(diǎn)擊屏幕底部時(shí)自動(dòng)顯示。同時(shí)當(dāng)鍵盤(pán)出現(xiàn)時(shí)，工具欄也會(huì)被隱藏。

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

工具欄的按鈕是使用圖標(biāo)還是文字：當(dāng)工具欄中出現(xiàn)三個(gè)以上的按鈕時(shí)，使用圖標(biāo)會(huì)更合適，因?yàn)閳D標(biāo)所占空間比文字更小，更容易承載多個(gè)按鈕。其次，當(dāng)按鈕出現(xiàn)三個(gè)以上時(shí)，字符太多會(huì)使頁(yè)面變得凌亂。當(dāng)按鈕為三個(gè)或三個(gè)以下時(shí)使用文字更加直觀，更易讓用戶理解，比如日歷 app 中，使用文字是因?yàn)閳D標(biāo)會(huì)使三個(gè)按鈕的含義造成混淆。

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

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

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

好了，今天就說(shuō)到這，文章較長(zhǎng)，希望大家能耐心消化

希望此文對(duì)你有一點(diǎn)幫助，poppy。

歡迎關(guān)注作者的微信公眾號(hào)：「設(shè)宴」