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

5. 圖像（Graphics）

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

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

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

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

設(shè)計一個易于辨識的圖標(biāo)。用戶不應(yīng)通過分析圖標(biāo)才能弄清楚它代表什么。比如，郵件app的圖標(biāo)使用了一個信封，因為它普遍與郵件聯(lián)系在一起?；c時間去設(shè)計一個好看迷人且精煉的圖標(biāo)，藝術(shù)性地傳達你的app的目的。

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

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

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

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

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

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

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

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

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

大圖標(biāo)會被用在蘋果商店。

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

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

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

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

Tips：

• 如果你的app能創(chuàng)建自定義文檔，你無需額外設(shè)計文檔圖標(biāo)，因為iOS會利用你的app圖標(biāo)自動創(chuàng)建文檔圖標(biāo)。

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

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

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

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

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

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

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

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

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

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

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

iOS通過坐標(biāo)系在屏幕上放置內(nèi)容。該坐標(biāo)系以點為測量單位，這些點映射到顯示器中以像素表示。在一個標(biāo)準(zhǔn)分辨率的屏幕中，1點（pt）（1英尺的72/1）等于一個像素(px)。高分辨率屏幕有更高的像素密度。因為在相同的物理空間內(nèi)有了更多數(shù)量的總像素，所以平均每點有了更多的像素。因此，高分辨率的顯示屏需要像素更多的圖片。

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

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

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

5.4 啟動畫面（Launch Screen）

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

啟動畫面

首屏

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

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

避免在啟動畫面包含文本。因為啟動畫面是靜態(tài)的(static)，任何展示的本文都不能被定位。

淡化啟動。用戶通常會在不同的app之間頻繁切換，所以請設(shè)計一個啟動畫面，能夠讓app的啟動體驗不易被人察覺。

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

• 靜態(tài)啟動畫面圖片

最好使用Xcode故事板制作啟動畫面，但必要時你也可以提供一組靜態(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)，用來在導(dǎo)航欄、標(biāo)簽欄、工具欄和主屏幕快速操作中使用。因為用戶對這些圖標(biāo)很熟悉，所以最好盡可能地使用這些內(nèi)置的圖標(biāo)。

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

Tips：

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

了解開發(fā)細節(jié)，請參閱UIBarButtonItem。

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

了解開發(fā)細節(jié)，請參閱UITabBarItem。

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

了解開發(fā)細節(jié)，請參閱UIApplicationShortcutIcon。

6. UI 欄

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

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

Tips：

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

考慮在導(dǎo)航欄顯示當(dāng)前視圖的名稱。在大多數(shù)情況下，名稱提供了環(huán)境，因為它讓用戶知道他們在看什么。但是，如果給導(dǎo)航欄命名看起來是多余的，你可以讓名稱欄空著。比如，備忘錄(Notes)不會在當(dāng)前筆記的導(dǎo)航欄上放名稱，因為內(nèi)容的第一行已經(jīng)提供了所需的環(huán)境線索。

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

不要包涵多段的面包屑路徑。返回按鈕只能執(zhí)行一個單獨的操作，即返回到上一屏。如果你認為用戶可能會因為忘記到達當(dāng)前屏的完整路徑而迷路，請考慮扁平你的app層級。

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

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

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

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

了解開發(fā)細節(jié)，請參閱UINavigationBar Class Reference。

6.2 搜索欄（Search Bars）

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

顯眼

極簡

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

占位文本

清除按鈕

取消按鈕

書簽按鈕

結(jié)果列表按鈕

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

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

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

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

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

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

了解開發(fā)細節(jié)，請參閱UISearchController和UISearchBar。

范圍欄(Scope Bars)：

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

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

了解開發(fā)細節(jié)，請參閱UISearchBar。

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

狀態(tài)欄在屏幕的頂端出現(xiàn)，顯示與設(shè)備當(dāng)前狀態(tài)相關(guān)的有用信息，比如時間、運營商、網(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è)計選擇協(xié)調(diào)的狀態(tài)欄顏色。狀態(tài)欄的文本和指標(biāo)的視覺樣式非明即暗，在你的app中，可以統(tǒng)一使用一種配色，或是根據(jù)不同的屏幕選擇單獨的配色。暗色系的狀態(tài)欄在淺色的界面上效果好，淺色系的狀態(tài)欄在深色系的界面上效果好。

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

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

半透明

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

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

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

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

了解開發(fā)細節(jié)，請參閱UIApplication中的UIStatusBarStyle?constant 和UIViewController中的preferredStatusBarStyle?property。

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

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

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

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

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

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

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

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

了解開發(fā)細節(jié)，請參閱UITabBar。

Tips：

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

6.5 工具欄（Toolbars）

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

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

考慮圖標(biāo)或文字按鈕是否適合你的app。當(dāng)你需要多于三個工具欄按鈕時，圖標(biāo)可以實現(xiàn)。當(dāng)你只有三個或是更少的按鈕時，文字有時候看起來更加清楚。比如，在日歷app中，文本就被當(dāng)作按鈕使用，因為圖標(biāo)可能會令人迷惑。因為使用了文本，“Inbox”按鈕還能顯示所有的日歷和事件邀請數(shù)量。

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

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

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

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

了解開發(fā)細節(jié)，請參閱UIToolbar。

相關(guān)閱讀：

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

譯文 | iOS 10 人機界面指南（二）

譯文｜iOS 10 人機界面指南（三）

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

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

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