iOS10發(fā)布了，蘋(píng)果遵循了一切從簡(jiǎn)但又增加了一些提升用戶體驗(yàn)的功能，比如向開(kāi)發(fā)者開(kāi)放了更多接口，設(shè)計(jì)者又如何跟隨iOS的步伐做好產(chǎn)品設(shè)計(jì)呢？

5. 圖像（Graphics）

5.1 應(yīng)用圖標(biāo)（App Icon）

每個(gè)app都需要一個(gè)精美、令人印象深刻的圖標(biāo)，能在蘋(píng)果商店和主屏幕奪人眼球。輕瞥圖標(biāo)的瞬間，是你的第一個(gè)機(jī)會(huì)來(lái)傳達(dá)你的app的目的。你的圖標(biāo)也會(huì)在系統(tǒng)中經(jīng)常出現(xiàn)，比如在設(shè)置里和在搜索結(jié)果里。

擁抱簡(jiǎn)潔。尋找個(gè)單一的元素能夠表現(xiàn)你的app的精髓，然后通過(guò)一個(gè)簡(jiǎn)單但是獨(dú)特的形狀來(lái)表現(xiàn)這個(gè)元素。謹(jǐn)慎地添加細(xì)節(jié)部分。如果一個(gè)圖標(biāo)的內(nèi)容或是形狀過(guò)于復(fù)雜，那么細(xì)節(jié)就很難辨認(rèn)了，尤其是在更小的尺寸時(shí)。

提供一個(gè)單獨(dú)的焦點(diǎn)。為圖標(biāo)設(shè)計(jì)一個(gè)單獨(dú)的、集中的點(diǎn)，使它能快速吸引注意力并且明確地代表你的app。

設(shè)計(jì)一個(gè)易于辨識(shí)的圖標(biāo)。用戶不應(yīng)通過(guò)分析圖標(biāo)才能弄清楚它代表什么。比如，郵件app的圖標(biāo)使用了一個(gè)信封，因?yàn)樗毡榕c郵件聯(lián)系在一起。花點(diǎn)時(shí)間去設(shè)計(jì)一個(gè)好看迷人且精煉的圖標(biāo)，藝術(shù)性地傳達(dá)你的app的目的。

讓背景簡(jiǎn)單并且避免使用透明度。確保你的圖標(biāo)是不透明的，并且不要讓背景變得雜亂。使用一個(gè)簡(jiǎn)單的背景，這樣它就不會(huì)過(guò)度影響周圍的其它圖標(biāo)。你沒(méi)有必要將整個(gè)圖標(biāo)填滿內(nèi)容。

只有當(dāng)logo全部或部分由文字組成時(shí)，才在圖標(biāo)使用文字。在主屏幕時(shí)，一個(gè)app的名稱會(huì)在圖標(biāo)之下顯示。不要包含沒(méi)有意義的文字重復(fù)說(shuō)明名稱或是告訴用戶該如何使用你的app，比如“Watch”或“Play”。如果你的設(shè)計(jì)包含了一些文字，那么請(qǐng)強(qiáng)調(diào)文字與你的app提供的實(shí)際內(nèi)容相關(guān)。

不要包含照片、屏幕截圖或是界面元素。影像細(xì)節(jié)在很小的尺寸會(huì)難于辨認(rèn)。屏幕截圖對(duì)于一個(gè)app圖標(biāo)來(lái)說(shuō)太復(fù)雜了，也一般不利于傳達(dá)app的目的。在圖標(biāo)中的界面元素會(huì)令人誤解并且困惑。

不要復(fù)用Apple硬件產(chǎn)品的圖形。Apple產(chǎn)品受版權(quán)保護(hù)，不能在你的圖標(biāo)或是圖片中被二次創(chuàng)作。一般來(lái)說(shuō)，避免復(fù)用設(shè)備的圖形，因?yàn)橛布O(shè)計(jì)頻繁地更新?lián)Q代，這會(huì)導(dǎo)致你的圖標(biāo)看起來(lái)易于過(guò)時(shí)。

不要在界面里到處放置app圖標(biāo)。在app里發(fā)現(xiàn)一個(gè)圖標(biāo)用于多種目的會(huì)讓人困惑。反之，考慮使用圖標(biāo)的色彩方案。請(qǐng)參閱Color。

在不同的壁紙下測(cè)試你的圖標(biāo)。你不能預(yù)期用戶會(huì)為他們的主屏幕選擇什么樣的壁紙，所以不要只是在一種深色和一種淺色的背景上測(cè)試你的圖標(biāo)。而是觀察它在不同的照片上如何表現(xiàn)。在有動(dòng)態(tài)背景的真實(shí)設(shè)備上試用它，因?yàn)楸尘皶?huì)隨著設(shè)備移動(dòng)而改變視角。

保證圖標(biāo)的四角是方的。系統(tǒng)會(huì)自動(dòng)覆蓋一個(gè)遮罩層讓圖標(biāo)變成圓角。

（1）App 圖標(biāo)大小

每一個(gè)app都必須提供一大一小兩個(gè)app圖標(biāo)。小圖標(biāo)會(huì)出現(xiàn)在主屏幕，并且當(dāng)你的app被安裝后會(huì)被系統(tǒng)使用。為不同的設(shè)備提供不同尺寸的小圖標(biāo)。確保你的app圖標(biāo)在所有支持的設(shè)備上都看起來(lái)很棒。

大圖標(biāo)會(huì)被用在蘋(píng)果商店。

讓小圖標(biāo)與大圖標(biāo)類似。盡管大圖標(biāo)有著與小圖標(biāo)不同的用途，但它終究是你的app圖標(biāo)。大圖標(biāo)一般都和小的看起來(lái)差不多，但是可以稍微豐富一些，更有細(xì)節(jié)，因?yàn)椴粫?huì)有任何視覺(jué)效果疊加在它上面。

（2）Spotlight和設(shè)置圖標(biāo)

每個(gè)app都應(yīng)提供一個(gè)小圖標(biāo)，在Spotlight搜索，如果關(guān)鍵詞與app名稱相符，iOS會(huì)展示該圖標(biāo)。同時(shí)，需要設(shè)置的app同樣應(yīng)該提供一個(gè)小圖標(biāo)用于在系統(tǒng)內(nèi)置的設(shè)置app中展示。兩個(gè)圖標(biāo)都應(yīng)該清晰標(biāo)識(shí)你的app——更理想地，它們應(yīng)該與app圖標(biāo)相符。如果你不能提供這些圖標(biāo)，iOS就會(huì)壓縮你的app主圖標(biāo)展示在上述場(chǎng)合中。

不要對(duì)用于設(shè)置的圖標(biāo)疊加或是描邊。iOS會(huì)自動(dòng)為所有圖標(biāo)加上1個(gè)像素的描邊，以確保它們很好地呈現(xiàn)在設(shè)置白色的背景上。

Tips：

• 如果你的app能創(chuàng)建自定義文檔，你無(wú)需額外設(shè)計(jì)文檔圖標(biāo)，因?yàn)閕OS會(huì)利用你的app圖標(biāo)自動(dòng)創(chuàng)建文檔圖標(biāo)。

5.2 自定義圖標(biāo)（Custom Icons）

如果你的app含有不能用系統(tǒng)圖標(biāo)表示的任務(wù)或模式，又或是系統(tǒng)圖標(biāo)與你的APP風(fēng)格不符，你可以設(shè)計(jì)你自己的圖標(biāo)。自定義圖標(biāo)通常被叫做模板，它不含有色彩信息并且通過(guò)mask來(lái)創(chuàng)建你在導(dǎo)航欄、標(biāo)簽欄、工具欄或是主屏幕快速操作視圖看到的圖標(biāo)樣式。

創(chuàng)作簡(jiǎn)單、辨識(shí)度高的設(shè)計(jì)。太多的細(xì)節(jié)會(huì)讓圖標(biāo)看起來(lái)粗糙且不具可讀性。為一個(gè)大多數(shù)用戶都能正確理解并且不會(huì)反感的設(shè)計(jì)而努力。

設(shè)計(jì)一個(gè)純色并帶有透明度的、無(wú)鋸齒、無(wú)陰影的圖標(biāo)。iOS會(huì)去除所有的色彩信息，所以沒(méi)必要使用多于一種的填充顏色。允許用透明度來(lái)定義圖標(biāo)的形狀。

使你的自定義圖標(biāo)與系統(tǒng)圖標(biāo)有所區(qū)分。你的圖標(biāo)不能輕易地與某個(gè)系統(tǒng)圖標(biāo)混淆。如果你想讓你的圖標(biāo)看起來(lái)與iOS圖標(biāo)家族相似，請(qǐng)使用非常細(xì)的描邊去繪制它。1pt的描邊適用于大多數(shù)圖標(biāo)（在@2x分辨率下使用2px）。

保持圖標(biāo)之間一致連貫。無(wú)論你只使用自定義圖標(biāo)或是混合使用自定義圖標(biāo)和系統(tǒng)圖標(biāo)，在app中的所有圖標(biāo)都應(yīng)該在大小、細(xì)節(jié)程度、透視和描邊粗細(xì)上保持一致。

提供兩種自定義標(biāo)簽欄圖標(biāo)的版本。為未選中和選中態(tài)提供兩個(gè)圖標(biāo)。選中態(tài)的圖標(biāo)經(jīng)常是未選中態(tài)圖標(biāo)的填充版本，但是某些設(shè)計(jì)會(huì)使用不同的方法。比如，蘋(píng)果的原生app經(jīng)常會(huì)將內(nèi)部細(xì)節(jié)反過(guò)來(lái)填充，增粗或減細(xì)描邊，以及把圖標(biāo)放在譬如圓形的形狀內(nèi)。

不要在自定義標(biāo)簽欄圖標(biāo)內(nèi)包含文本。如果你需要展示文本，請(qǐng)?jiān)跇?biāo)簽下面直接加上標(biāo)題并且適當(dāng)調(diào)節(jié)位置。

不要復(fù)用Apple硬件產(chǎn)品的圖形。Apple產(chǎn)品受版權(quán)保護(hù)，不能在你的圖標(biāo)或是圖片中被二次創(chuàng)作。一般來(lái)說(shuō)，避免復(fù)用設(shè)備的圖形，因?yàn)橛布O(shè)計(jì)頻繁地更新?lián)Q代，這會(huì)導(dǎo)致你的圖標(biāo)看起來(lái)易于過(guò)時(shí)。

自定義圖標(biāo)尺寸：

5.3 圖片大小和分辨率（Image Size and Resolution）

iOS通過(guò)坐標(biāo)系在屏幕上放置內(nèi)容。該坐標(biāo)系以點(diǎn)為測(cè)量單位，這些點(diǎn)映射到顯示器中以像素表示。在一個(gè)標(biāo)準(zhǔn)分辨率的屏幕中，1點(diǎn)（pt）（1英尺的72/1）等于一個(gè)像素(px)。高分辨率屏幕有更高的像素密度。因?yàn)樵谙嗤奈锢砜臻g內(nèi)有了更多數(shù)量的總像素，所以平均每點(diǎn)有了更多的像素。因此，高分辨率的顯示屏需要像素更多的圖片。

你必須為你的app支持的設(shè)備提供所有的高分辨率圖像。依據(jù)設(shè)備的不同，將每張圖像的固有像素乘以相應(yīng)的比例系數(shù)，就可以得到該設(shè)備所適配的分辨率。一張標(biāo)準(zhǔn)分辨率的圖像對(duì)應(yīng)的比例系數(shù)為1.0，并被稱為@1x圖片。高分辨率的圖像對(duì)應(yīng)的比例系數(shù)為2.0或是3.0，并被稱為@2x 和@3x圖片。

打個(gè)比方，假設(shè)你有一張標(biāo)準(zhǔn)分辨率（@1x）的圖片，它的分辨率為100px*100px。那么，這張圖片的@2x版本就是200px*200px，@3x版本就是300px*300px。

為不同設(shè)備準(zhǔn)備圖片時(shí)請(qǐng)參照以下比例系數(shù)。

5.4 啟動(dòng)畫(huà)面（Launch Screen）

啟動(dòng)畫(huà)面出現(xiàn)在app剛開(kāi)始啟動(dòng)時(shí)候。隨后，啟動(dòng)畫(huà)面會(huì)很快被app的首屏代替，讓人感覺(jué)你的app是快速響應(yīng)的。啟動(dòng)畫(huà)面不是一個(gè)炫技的時(shí)機(jī)，它只是為了增強(qiáng)用戶對(duì)你的app能夠快速啟動(dòng)并且立即被使用的感受。每個(gè)app都應(yīng)該提供一個(gè)啟動(dòng)畫(huà)面。

啟動(dòng)畫(huà)面

首屏

因?yàn)樵O(shè)備屏幕大小不同，啟動(dòng)畫(huà)面的大小也有所差異。你可以以Xcode故事板或是一組靜態(tài)(static)圖片的形式為你的app所支持的設(shè)備提供啟動(dòng)畫(huà)面。因?yàn)閄code故事板靈活性高且易于適配，所以推薦采用該形式。你可以使用一個(gè)單獨(dú)的故事板來(lái)管理你的所有啟動(dòng)畫(huà)面。了解關(guān)于可適配界面的開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱Auto Layout Guide。

設(shè)計(jì)一個(gè)與你的app首屏幾乎相似的啟動(dòng)畫(huà)面。如果你的啟動(dòng)畫(huà)面包含了與首屏看起來(lái)不同的元素，那么用戶會(huì)在啟動(dòng)畫(huà)面過(guò)渡至app首屏?xí)r經(jīng)歷一次不愉快的跳轉(zhuǎn)體驗(yàn)。

避免在啟動(dòng)畫(huà)面包含文本。因?yàn)閱?dòng)畫(huà)面是靜態(tài)的(static)，任何展示的本文都不能被定位。

淡化啟動(dòng)。用戶通常會(huì)在不同的app之間頻繁切換，所以請(qǐng)?jiān)O(shè)計(jì)一個(gè)啟動(dòng)畫(huà)面，能夠讓app的啟動(dòng)體驗(yàn)不易被人察覺(jué)。

不要打廣告。啟動(dòng)畫(huà)面不是一個(gè)宣傳品牌的時(shí)機(jī)。不要設(shè)計(jì)一個(gè)類似開(kāi)屏廣告或是介紹窗口的登入體驗(yàn)。不要在啟動(dòng)畫(huà)面包涵logo或是其它品牌元素，除非它們是你的app首屏的靜態(tài)（static）元素。

• 靜態(tài)啟動(dòng)畫(huà)面圖片

最好使用Xcode故事板制作啟動(dòng)畫(huà)面，但必要時(shí)你也可以提供一組靜態(tài)圖片。根據(jù)設(shè)備創(chuàng)建不同尺寸的靜態(tài)圖片，并不要忘記包涵狀態(tài)欄區(qū)域。

5.5 系統(tǒng)圖標(biāo)（System Icons）

iOS提供了大量表示常用的任務(wù)和內(nèi)容類型的小圖標(biāo)，用來(lái)在導(dǎo)航欄、標(biāo)簽欄、工具欄和主屏幕快速操作中使用。因?yàn)橛脩魧?duì)這些圖標(biāo)很熟悉，所以最好盡可能地使用這些內(nèi)置的圖標(biāo)。

（1）導(dǎo)航欄和工具欄圖標(biāo)

Tips：

• 你可以在導(dǎo)航欄和工具欄使用文本代替圖標(biāo)來(lái)表示某項(xiàng)。比如，日歷app在工具欄使用“今天”、“日歷”和“收件箱”三個(gè)字符。你還可以使用固定空間（fixed space）元素為導(dǎo)航欄和標(biāo)簽欄的圖標(biāo)提供間距。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UIBarButtonItem。

（2）標(biāo)簽欄圖標(biāo)

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UITabBarItem。

（3）快速操作圖標(biāo)

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UIApplicationShortcutIcon。

6. UI 欄

6.1 導(dǎo)航欄（Navigation Bars）

導(dǎo)航欄出現(xiàn)在app屏幕的頂部，狀態(tài)欄之下，它能實(shí)現(xiàn)在一系列有層級(jí)的app頁(yè)面間的導(dǎo)航。當(dāng)進(jìn)入一個(gè)新頁(yè)面時(shí)，導(dǎo)航欄的左側(cè)會(huì)出現(xiàn)一個(gè)返回按鈕，并且一般會(huì)標(biāo)有上一個(gè)頁(yè)面的標(biāo)題。有時(shí)，導(dǎo)航欄右側(cè)還有含有類似編輯或完成按鈕的控件，用來(lái)管理當(dāng)前視圖的內(nèi)容。在分屏視圖內(nèi)，導(dǎo)航欄可能只會(huì)出現(xiàn)在分屏視圖的一個(gè)單獨(dú)窗格。導(dǎo)航欄是半透明的，也可能會(huì)有一個(gè)背景顏色，并且在適當(dāng)時(shí)可以被隱藏，比如當(dāng)前屏幕有鍵盤(pán)時(shí)、施加了某手勢(shì)時(shí)或是某個(gè)視圖在調(diào)整大小時(shí)。

Tips：

• 當(dāng)不需要導(dǎo)航或是你需要多個(gè)控件來(lái)管理當(dāng)前內(nèi)容時(shí)，請(qǐng)使用工具欄。請(qǐng)參閱Toolbars。

考慮在導(dǎo)航欄顯示當(dāng)前視圖的名稱。在大多數(shù)情況下，名稱提供了環(huán)境，因?yàn)樗層脩糁浪麄冊(cè)诳词裁?。但是，如果給導(dǎo)航欄命名看起來(lái)是多余的，你可以讓名稱欄空著。比如，備忘錄(Notes)不會(huì)在當(dāng)前筆記的導(dǎo)航欄上放名稱，因?yàn)閮?nèi)容的第一行已經(jīng)提供了所需的環(huán)境線索。

考慮在app最高層級(jí)的導(dǎo)航欄放置一個(gè)分段控件。如果這么做幫助你扁平信息層級(jí)，讓用戶更容易找到他們想要的內(nèi)容，你會(huì)深受其益。如果你在導(dǎo)航欄使用了分段控件，請(qǐng)確保為返回按鈕選擇了正確的標(biāo)題。了解更多指導(dǎo)，請(qǐng)參閱Segmented Controls。

不要包涵多段的面包屑路徑。返回按鈕只能執(zhí)行一個(gè)單獨(dú)的操作，即返回到上一屏。如果你認(rèn)為用戶可能會(huì)因?yàn)橥浀竭_(dá)當(dāng)前屏的完整路徑而迷路，請(qǐng)考慮扁平你的app層級(jí)。

避免用過(guò)多控件填充導(dǎo)航欄。一般來(lái)說(shuō)，導(dǎo)航欄最多只能包含當(dāng)前視圖的標(biāo)題、返回按鈕以及一個(gè)管理當(dāng)前視圖內(nèi)容的控件。如果你在導(dǎo)航欄使用了分段控件，除此之外，該欄就不應(yīng)再包含標(biāo)題或其它控件。

給文本按鈕留出足夠的空間。如果你的導(dǎo)航欄含有多個(gè)文本按鈕，文本可能會(huì)讓多個(gè)按鈕看起來(lái)像是同時(shí)運(yùn)行的，導(dǎo)致按鈕間難以區(qū)分。在按鈕之間插入固定空間項(xiàng)使它們隔開(kāi)。了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItemFixedSpace?constant value。

考慮在顯示全屏內(nèi)容時(shí)暫時(shí)隱藏導(dǎo)航欄。當(dāng)你想要關(guān)注內(nèi)容時(shí)，導(dǎo)航欄會(huì)令人分心。暫時(shí)隱藏該欄以提供一個(gè)更加沉浸式的體驗(yàn)。地圖app在瀏覽一個(gè)全屏地圖時(shí)會(huì)隱藏導(dǎo)航欄及其它界面元素。如果你要隱藏導(dǎo)航欄，允許用戶通過(guò)簡(jiǎn)單的手勢(shì)復(fù)原導(dǎo)航欄，比如點(diǎn)擊。

使用標(biāo)準(zhǔn)的返回按鈕。用戶已經(jīng)知道，標(biāo)準(zhǔn)的返回按鈕會(huì)讓他們?cè)谛畔蛹?jí)中按原路徑返回。但是，如果你使用了自定義的返回按鈕，請(qǐng)確保它們看起來(lái)像是返回按鈕，有直觀的表現(xiàn)，和界面的其它部分保持一致，并且在app內(nèi)統(tǒng)一使用該自定義按鈕。如果你用自定義圖片替換了系統(tǒng)提供的返回按鈕，請(qǐng)同時(shí)提供一個(gè)自定義遮罩圖片(custom mask image)。iOS使用這個(gè)遮罩來(lái)實(shí)現(xiàn)按鈕標(biāo)題在轉(zhuǎn)場(chǎng)時(shí)的過(guò)渡動(dòng)畫(huà)。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UINavigationBar Class Reference。

6.2 搜索欄（Search Bars）

用戶通過(guò)搜索欄在大量的信息中查找。搜索欄有兩種樣式：顯眼（prominent）（默認(rèn)）和極簡(jiǎn)（minimal）?！巴ㄓ嶄洝笔褂昧孙@眼搜索欄，含有引人注目的淺色背景?！罢掌笔褂昧藰O簡(jiǎn)樣式，更好地融入了周邊界面。搜索欄默認(rèn)是半透明的，但也可以被設(shè)置成不透明的。有需要時(shí)，搜索欄也可以自動(dòng)遮蓋住導(dǎo)航欄。

顯眼

極簡(jiǎn)

搜索欄含有一個(gè)單獨(dú)的搜索框，該搜索框可以包含占位文本、清除按鈕、書(shū)簽按鈕和結(jié)果列表按鈕。除了搜索框之外，搜索欄還會(huì)含有一個(gè)退出當(dāng)前搜索的取消按鈕。

占位文本

清除按鈕

取消按鈕

書(shū)簽按鈕

結(jié)果列表按鈕

讓用戶通過(guò)搜索欄而不是文本框去搜索。文本框不具備用戶期待的標(biāo)準(zhǔn)搜索欄所擁有的外觀特征。

包含清除和取消按鈕。大部分的搜索欄都含有一個(gè)清除按鈕用來(lái)清空輸入欄的內(nèi)容，以及一個(gè)取消按鈕來(lái)快速退出搜索。

選擇合適的搜索欄樣式，使其能夠反映出搜索功能在你的app中的價(jià)值。如果在你的app中搜索是個(gè)關(guān)鍵功能，使用默認(rèn)的、顯眼搜索欄樣式。如果搜索功能使用頻率不高，則使用極簡(jiǎn)樣式。

必要時(shí)，在搜索欄提供線索和背景。搜索框可以包含占位文本來(lái)提示可搜索的類型，比如“搜索服裝、鞋子和飾品”或只是簡(jiǎn)單的“搜索”二字。也可以在搜索欄正上方展示一行簡(jiǎn)明扼要的帶有適當(dāng)標(biāo)點(diǎn)的文字，用來(lái)引導(dǎo)用戶。比如股票（Stocks），就在搜索框上方展示了一行文本告知用戶他們可以輸入公司名稱或股票符號(hào)。

考慮在搜索欄下方提供快捷鍵之類的內(nèi)容。利用搜索欄下方的區(qū)域幫助用戶更快地獲取內(nèi)容。比如瀏覽器（Safari），在你點(diǎn)擊搜索框的時(shí)候會(huì)立即顯示你的書(shū)簽，無(wú)需輸入任何關(guān)鍵詞的情況下即可進(jìn)入選擇的對(duì)象。股票app在你對(duì)搜索欄輸入的時(shí)候，會(huì)一邊在下方展示相關(guān)的結(jié)果列表，你可以在列表中點(diǎn)擊選擇而不用完整輸入字符。

必要時(shí)，為搜索欄添加書(shū)簽和結(jié)果列表按鈕。利用書(shū)簽按鈕讓用戶能夠快速獲得他們可能需要再次查找的信息，比如保存的、上一個(gè)或是最近的搜索記錄。使用結(jié)果列表按鈕來(lái)暗示搜索結(jié)果的存在，并在用戶點(diǎn)擊按鈕的時(shí)候顯示這些結(jié)果。但你無(wú)法同時(shí)展示上述兩個(gè)圖標(biāo)。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UISearchController和UISearchBar。

范圍欄(Scope Bars)：

范圍欄可以附加于搜索欄，讓用戶定義搜索的范圍。范圍欄采用和搜索欄一樣的外觀。

專注于優(yōu)化搜索結(jié)果而不是一味添加范圍欄。當(dāng)用戶想在定義明確的類別中搜索時(shí)，范圍欄會(huì)有很大的幫助。但是，更好的做法是優(yōu)化搜索結(jié)果，這樣用戶就無(wú)需通過(guò)范圍欄進(jìn)行篩選了。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UISearchBar。

6.3 狀態(tài)欄（Status Bars）

狀態(tài)欄在屏幕的頂端出現(xiàn)，顯示與設(shè)備當(dāng)前狀態(tài)相關(guān)的有用信息，比如時(shí)間、運(yùn)營(yíng)商、網(wǎng)絡(luò)狀態(tài)以及電池容量。狀態(tài)欄上真正顯示的信息根據(jù)不同的系統(tǒng)設(shè)置有所變化。

使用系統(tǒng)提供的狀態(tài)欄。用戶希望狀態(tài)欄在系統(tǒng)內(nèi)部保持一致。不要用自定義的狀態(tài)替換掉它。

明

暗

根據(jù)你的app設(shè)計(jì)選擇協(xié)調(diào)的狀態(tài)欄顏色。狀態(tài)欄的文本和指標(biāo)的視覺(jué)樣式非明即暗，在你的app中，可以統(tǒng)一使用一種配色，或是根據(jù)不同的屏幕選擇單獨(dú)的配色。暗色系的狀態(tài)欄在淺色的界面上效果好，淺色系的狀態(tài)欄在深色系的界面上效果好。

遮蓋狀態(tài)欄下方的內(nèi)容。狀態(tài)欄的背景默認(rèn)是透明的，這樣會(huì)顯示出狀態(tài)欄下方的內(nèi)容。既要保證狀態(tài)欄的可讀性，又不能讓人誤解下方的內(nèi)容是可交互的，通常通過(guò)以下幾種技巧來(lái)實(shí)現(xiàn)：

• 在你的app中使用導(dǎo)航欄，它會(huì)自動(dòng)顯示狀態(tài)欄背景以保證狀態(tài)欄下方不會(huì)出現(xiàn)任何內(nèi)容。
• 在狀態(tài)欄下方放置一張自定義圖片，比如漸變或純色背景。
• 對(duì)狀態(tài)欄下方的內(nèi)容進(jìn)行模糊處理。

半透明

全屏展示媒體文件時(shí)考慮暫時(shí)地隱藏狀態(tài)欄。當(dāng)用戶想要集中注意力在媒體上時(shí)，狀態(tài)欄會(huì)令他們分心。暫時(shí)地隱藏狀態(tài)欄元素能夠提供一個(gè)更加沉浸式的體驗(yàn)。比如照片app，在用戶全屏瀏覽照片時(shí)時(shí)會(huì)隱藏多余的界面元素。

避免永久地隱藏狀態(tài)欄。在沒(méi)有狀態(tài)欄時(shí)，用戶需要退出你的app去查看時(shí)間或是檢查他們是否連接至Wi-Fi。允許用戶可以通過(guò)簡(jiǎn)單、易于發(fā)現(xiàn)的手勢(shì)來(lái)重新喚醒被隱藏的狀態(tài)欄。在照片app中瀏覽全屏照片時(shí)，用戶只需在屏幕上輕點(diǎn)即可呼出狀態(tài)欄。

在狀態(tài)欄顯示耗時(shí)較長(zhǎng)的網(wǎng)絡(luò)活動(dòng)狀態(tài)。

當(dāng)你的app在使用網(wǎng)絡(luò)，尤其是耗時(shí)較長(zhǎng)的操作時(shí)，顯示網(wǎng)絡(luò)活動(dòng)狀態(tài)欄指示器，這樣用戶就知道活動(dòng)正在進(jìn)行中。請(qǐng)參閱Network Activity Indicators。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UIApplication中的UIStatusBarStyle?constant 和UIViewController中的preferredStatusBarStyle?property。

6.4 標(biāo)簽欄（Tab Bars）

標(biāo)簽欄在app屏幕底部出現(xiàn)，提供了在app不同部分間快速切換的途徑。標(biāo)簽欄是半透明的，也可能會(huì)有純色背景，在橫豎屏都保持一致的高度，并且在出現(xiàn)鍵盤(pán)時(shí)會(huì)被隱藏。一個(gè)標(biāo)簽欄可以包含無(wú)數(shù)個(gè)標(biāo)簽，但其所能容納的可見(jiàn)的標(biāo)簽數(shù)量根據(jù)設(shè)備大小和橫豎屏模式有所變化。受水平空間的限制，當(dāng)某些標(biāo)簽無(wú)法被顯示時(shí)，最后一個(gè)可見(jiàn)的標(biāo)簽會(huì)變成“更多”， 并通過(guò)該入口前往其余標(biāo)簽列表的另一屏。

一般來(lái)說(shuō)，利用標(biāo)簽欄組織應(yīng)用程序級(jí)別的信息。標(biāo)簽欄是扁平化信息層級(jí)的好辦法，并且一次性提供了前往多個(gè)平級(jí)信息類別或模式的途徑。

不要在某個(gè)標(biāo)簽的功能不可用時(shí)去掉該標(biāo)簽或是使其失效。如果標(biāo)簽時(shí)而可用時(shí)而不可用，你的app界面會(huì)變得不穩(wěn)定和難以捉摸。確保所有的標(biāo)簽都是有效可點(diǎn)擊的，并且向用戶解釋當(dāng)前標(biāo)簽內(nèi)容不可用的原因。比如，當(dāng)本iOS設(shè)備沒(méi)有歌曲時(shí)，音樂(lè)app的“我的音樂(lè)”標(biāo)簽頁(yè)就對(duì)如何下載歌曲做出了說(shuō)明。

標(biāo)簽欄只能作為導(dǎo)航。標(biāo)簽欄按鈕不應(yīng)該執(zhí)行其它操作。如果你需要在當(dāng)前視圖提供作用于元素的控件，你可以使用工具欄。請(qǐng)參閱Toolbars。

避免太多的標(biāo)簽。每增加一個(gè)標(biāo)簽就減小了選擇單個(gè)標(biāo)簽的可觸區(qū)域，并且增加了app的復(fù)雜性，讓用戶更難找到所需的信息。盡管“更多”標(biāo)簽可以展示額外的標(biāo)簽項(xiàng)，但這需要額外的點(diǎn)擊步驟，并且對(duì)標(biāo)簽欄的有限空間沒(méi)有很好的利用。太少的標(biāo)簽也是個(gè)問(wèn)題，它會(huì)讓你的界面感覺(jué)被分離。一般來(lái)說(shuō)，在iPhone上使用3至5個(gè)標(biāo)簽，在iPad上則可稍微多幾個(gè)。

使角標(biāo)（badge）低調(diào)地傳達(dá)信息。你可以在標(biāo)簽上展示角標(biāo)——一個(gè)帶有白色數(shù)字或感嘆號(hào)的紅色橢圓——來(lái)暗示該標(biāo)簽視圖或模式含有新信息。

總是在與標(biāo)簽欄相連接的視圖切換內(nèi)容。為了讓你的界面符合用戶預(yù)期，選擇一個(gè)標(biāo)簽后應(yīng)該直接作用于與標(biāo)簽欄相連接的視圖，而不是屏幕其它范圍的視圖。比如，在分屏視圖（split view）的左側(cè)選擇了一個(gè)標(biāo)簽，是不會(huì)導(dǎo)致右半部分突然變化的。在彈窗（popover）選擇一個(gè)標(biāo)簽頁(yè)不會(huì)導(dǎo)致下方的視圖發(fā)生改變。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UITabBar。

Tips：

• 理解標(biāo)簽欄和工具欄之間的不同十分重要，因?yàn)檫@兩種欄都是出現(xiàn)在app屏幕的底部。標(biāo)簽欄讓用戶在app的不同部分間快速切換，比如時(shí)鐘app中的“鬧鐘”、“秒表”、“計(jì)時(shí)器”。工具欄包含了執(zhí)行當(dāng)前視圖相關(guān)操作的按鈕，比如創(chuàng)建項(xiàng)、刪除項(xiàng)、添加注釋或是拍照。請(qǐng)參閱Toolbars。標(biāo)簽欄和工具欄決不會(huì)在同一個(gè)視圖內(nèi)同時(shí)出現(xiàn)。

6.5 工具欄（Toolbars）

工具欄在app屏幕底部出現(xiàn)，包含了執(zhí)行當(dāng)前視圖或包含內(nèi)容相關(guān)操作的按鈕。工具欄是半透明的，也可能會(huì)有純色背景，并且通常在用戶不太需要它們時(shí)被隱藏。比如，在瀏覽器(Safari)中，當(dāng)你滾動(dòng)頁(yè)面表明你再閱讀時(shí)，工具欄就藏起來(lái)了。當(dāng)你在屏幕底部點(diǎn)擊時(shí)，工具欄又會(huì)再次出現(xiàn)。當(dāng)前屏幕有鍵盤(pán)時(shí)，工具欄也會(huì)被隱藏。

提供相關(guān)的工具欄按鈕。工具欄必須包含在當(dāng)前環(huán)境下有意義的常用操作命令。

考慮圖標(biāo)或文字按鈕是否適合你的app。當(dāng)你需要多于三個(gè)工具欄按鈕時(shí)，圖標(biāo)可以實(shí)現(xiàn)。當(dāng)你只有三個(gè)或是更少的按鈕時(shí)，文字有時(shí)候看起來(lái)更加清楚。比如，在日歷app中，文本就被當(dāng)作按鈕使用，因?yàn)閳D標(biāo)可能會(huì)令人迷惑。因?yàn)槭褂昧宋谋荆癐nbox”按鈕還能顯示所有的日歷和事件邀請(qǐng)數(shù)量。

給予文本按鈕足夠的空間。

如果你的工具欄含有多個(gè)按鈕，文本按鈕就會(huì)擠在一起，導(dǎo)致按鈕間難以區(qū)分。在按鈕之間插入固定間距使其分離。了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UIBarButtonItem中的UIBarButtonSystemItemFixedSpaceconstant value。

避免在工具欄使用分段控件。

分段控件讓用戶切換內(nèi)容，而工具欄更針對(duì)于當(dāng)前屏幕。如果你需要提供切換內(nèi)容的方式，請(qǐng)考慮使用標(biāo)簽欄替代。請(qǐng)參閱Tab Bars。

了解開(kāi)發(fā)細(xì)節(jié)，請(qǐng)參閱UIToolbar。

相關(guān)閱讀：

譯文 | iOS 10 人機(jī)界面設(shè)計(jì)指南 （一）

譯文 | iOS 10 人機(jī)界面指南（二）

譯文｜iOS 10 人機(jī)界面指南（三）

原文地址：https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/

譯者：喵大神經(jīng)，交互新人

本文由 @喵大神經(jīng) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。