起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識譯文｜iOS 10 人機界面指南（四）
iOS10發布了，蘋果遵循了一切從簡但又增加了一些提升用戶體驗的功能，比如向開發者開放了更多接口，設計者又如何跟隨iOS的步伐做好產品設計呢？
5. 圖像（Graphics）
5.1 應用圖標（App Icon）
每個app都需要一個精美、令人印象深刻的圖標，能在蘋果商店和主屏幕奪人眼球。輕瞥圖標的瞬間，是你的第一個機會來傳達你的app的目的。你的圖標也會在系統中經常出現，比如在設置里和在搜索結果里。
擁抱簡潔。尋找個單一的元素能夠表現你的app的精髓，然后通過一個簡單但是獨特的形狀來表現這個元素。謹慎地添加細節部分。如果一個圖標的內容或是形狀過于復雜，那么細節就很難辨認了，尤其是在更小的尺寸時。
提供一個單獨的焦點。為圖標設計一個單獨的、集中的點，使它能快速吸引注意力并且明確地代表你的app。
設計一個易于辨識的圖標。用戶不應通過分析圖標才能弄清楚它代表什么。比如，郵件app的圖標使用了一個信封，因為它普遍與郵件聯系在一起?；c時間去設計一個好看迷人且精煉的圖標，藝術性地傳達你的app的目的。
讓背景簡單并且避免使用透明度。確保你的圖標是不透明的，并且不要讓背景變得雜亂。使用一個簡單的背景，這樣它就不會過度影響周圍的其它圖標。你沒有必要將整個圖標填滿內容。
只有當logo全部或部分由文字組成時，才在圖標使用文字。在主屏幕時，一個app的名稱會在圖標之下顯示。不要包含沒有意義的文字重復說明名稱或是告訴用戶該如何使用你的app，比如“Watch”或“Play”。如果你的設計包含了一些文字，那么請強調文字與你的app提供的實際內容相關。
不要包含照片、屏幕截圖或是界面元素。影像細節在很小的尺寸會難于辨認。屏幕截圖對于一個app圖標來說太復雜了，也一般不利于傳達app的目的。在圖標中的界面元素會令人誤解并且困惑。
不要復用Apple硬件產品的圖形。Apple產品受版權保護，不能在你的圖標或是圖片中被二次創作。一般來說，避免復用設備的圖形，因為硬件設計頻繁地更新換代，這會導致你的圖標看起來易于過時。
不要在界面里到處放置app圖標。在app里發現一個圖標用于多種目的會讓人困惑。反之，考慮使用圖標的色彩方案。請參閱Color。
在不同的壁紙下測試你的圖標。你不能預期用戶會為他們的主屏幕選擇什么樣的壁紙，所以不要只是在一種深色和一種淺色的背景上測試你的圖標。而是觀察它在不同的照片上如何表現。在有動態背景的真實設備上試用它，因為背景會隨著設備移動而改變視角。
保證圖標的四角是方的。系統會自動覆蓋一個遮罩層讓圖標變成圓角。
（1）App 圖標大小
每一個app都必須提供一大一小兩個app圖標。小圖標會出現在主屏幕，并且當你的app被安裝后會被系統使用。為不同的設備提供不同尺寸的小圖標。確保你的app圖標在所有支持的設備上都看起來很棒。
大圖標會被用在蘋果商店。
讓小圖標與大圖標類似。盡管大圖標有著與小圖標不同的用途，但它終究是你的app圖標。大圖標一般都和小的看起來差不多，但是可以稍微豐富一些，更有細節，因為不會有任何視覺效果疊加在它上面。
（2）Spotlight和設置圖標
每個app都應提供一個小圖標，在Spotlight搜索，如果關鍵詞與app名稱相符，iOS會展示該圖標。同時，需要設置的app同樣應該提供一個小圖標用于在系統內置的設置app中展示。兩個圖標都應該清晰標識你的app——更理想地，它們應該與app圖標相符。如果你不能提供這些圖標，iOS就會壓縮你的app主圖標展示在上述場合中。
不要對用于設置的圖標疊加或是描邊。iOS會自動為所有圖標加上1個像素的描邊，以確保它們很好地呈現在設置白色的背景上。
Tips：
- 如果你的app能創建自定義文檔，你無需額外設計文檔圖標，因為iOS會利用你的app圖標自動創建文檔圖標。
5.2 自定義圖標（Custom Icons）
如果你的app含有不能用系統圖標表示的任務或模式，又或是系統圖標與你的APP風格不符，你可以設計你自己的圖標。自定義圖標通常被叫做模板，它不含有色彩信息并且通過mask來創建你在導航欄、標簽欄、工具欄或是主屏幕快速操作視圖看到的圖標樣式。
創作簡單、辨識度高的設計。太多的細節會讓圖標看起來粗糙且不具可讀性。為一個大多數用戶都能正確理解并且不會反感的設計而努力。
設計一個純色并帶有透明度的、無鋸齒、無陰影的圖標。iOS會去除所有的色彩信息，所以沒必要使用多于一種的填充顏色。允許用透明度來定義圖標的形狀。
使你的自定義圖標與系統圖標有所區分。你的圖標不能輕易地與某個系統圖標混淆。如果你想讓你的圖標看起來與iOS圖標家族相似，請使用非常細的描邊去繪制它。1pt的描邊適用于大多數圖標（在@2x分辨率下使用2px）。
保持圖標之間一致連貫。無論你只使用自定義圖標或是混合使用自定義圖標和系統圖標，在app中的所有圖標都應該在大小、細節程度、透視和描邊粗細上保持一致。
提供兩種自定義標簽欄圖標的版本。為未選中和選中態提供兩個圖標。選中態的圖標經常是未選中態圖標的填充版本，但是某些設計會使用不同的方法。比如，蘋果的原生app經常會將內部細節反過來填充，增粗或減細描邊，以及把圖標放在譬如圓形的形狀內。
不要在自定義標簽欄圖標內包含文本。如果你需要展示文本，請在標簽下面直接加上標題并且適當調節位置。
不要復用Apple硬件產品的圖形。Apple產品受版權保護，不能在你的圖標或是圖片中被二次創作。一般來說，避免復用設備的圖形，因為硬件設計頻繁地更新換代，這會導致你的圖標看起來易于過時。
自定義圖標尺寸：
5.3 圖片大小和分辨率（Image Size and Resolution）
iOS通過坐標系在屏幕上放置內容。該坐標系以點為測量單位，這些點映射到顯示器中以像素表示。在一個標準分辨率的屏幕中，1點（pt）（1英尺的72/1）等于一個像素(px)。高分辨率屏幕有更高的像素密度。因為在相同的物理空間內有了更多數量的總像素，所以平均每點有了更多的像素。因此，高分辨率的顯示屏需要像素更多的圖片。
你必須為你的app支持的設備提供所有的高分辨率圖像。依據設備的不同，將每張圖像的固有像素乘以相應的比例系數，就可以得到該設備所適配的分辨率。一張標準分辨率的圖像對應的比例系數為1.0，并被稱為@1x圖片。高分辨率的圖像對應的比例系數為2.0或是3.0，并被稱為@2x 和@3x圖片。
打個比方，假設你有一張標準分辨率（@1x）的圖片，它的分辨率為100px*100px。那么，這張圖片的@2x版本就是200px*200px，@3x版本就是300px*300px。
為不同設備準備圖片時請參照以下比例系數。
5.4 啟動畫面（Launch Screen）
啟動畫面出現在app剛開始啟動時候。隨后，啟動畫面會很快被app的首屏代替，讓人感覺你的app是快速響應的。啟動畫面不是一個炫技的時機，它只是為了增強用戶對你的app能夠快速啟動并且立即被使用的感受。每個app都應該提供一個啟動畫面。
啟動畫面
首屏
因為設備屏幕大小不同，啟動畫面的大小也有所差異。你可以以Xcode故事板或是一組靜態(static)圖片的形式為你的app所支持的設備提供啟動畫面。因為Xcode故事板靈活性高且易于適配，所以推薦采用該形式。你可以使用一個單獨的故事板來管理你的所有啟動畫面。了解關于可適配界面的開發細節，請參閱Auto Layout Guide。
設計一個與你的app首屏幾乎相似的啟動畫面。如果你的啟動畫面包含了與首屏看起來不同的元素，那么用戶會在啟動畫面過渡至app首屏時經歷一次不愉快的跳轉體驗。
避免在啟動畫面包含文本。因為啟動畫面是靜態的(static)，任何展示的本文都不能被定位。
淡化啟動。用戶通常會在不同的app之間頻繁切換，所以請設計一個啟動畫面，能夠讓app的啟動體驗不易被人察覺。
不要打廣告。啟動畫面不是一個宣傳品牌的時機。不要設計一個類似開屏廣告或是介紹窗口的登入體驗。不要在啟動畫面包涵logo或是其它品牌元素，除非它們是你的app首屏的靜態（static）元素。
- 靜態啟動畫面圖片
最好使用Xcode故事板制作啟動畫面，但必要時你也可以提供一組靜態圖片。根據設備創建不同尺寸的靜態圖片，并不要忘記包涵狀態欄區域。
5.5 系統圖標（System Icons）
iOS提供了大量表示常用的任務和內容類型的小圖標，用來在導航欄、標簽欄、工具欄和主屏幕快速操作中使用。因為用戶對這些圖標很熟悉，所以最好盡可能地使用這些內置的圖標。
（1）導航欄和工具欄圖標
Tips：
- 你可以在導航欄和工具欄使用文本代替圖標來表示某項。比如，日歷app在工具欄使用“今天”、“日歷”和“收件箱”三個字符。你還可以使用固定空間（fixed space）元素為導航欄和標簽欄的圖標提供間距。
了解開發細節，請參閱UIBarButtonItem。
（2）標簽欄圖標
了解開發細節，請參閱UITabBarItem。
（3）快速操作圖標
了解開發細節，請參閱UIApplicationShortcutIcon。
6. UI 欄
6.1 導航欄（Navigation Bars）
導航欄出現在app屏幕的頂部，狀態欄之下，它能實現在一系列有層級的app頁面間的導航。當進入一個新頁面時，導航欄的左側會出現一個返回按鈕，并且一般會標有上一個頁面的標題。有時，導航欄右側還有含有類似編輯或完成按鈕的控件，用來管理當前視圖的內容。在分屏視圖內，導航欄可能只會出現在分屏視圖的一個單獨窗格。導航欄是半透明的，也可能會有一個背景顏色，并且在適當時可以被隱藏，比如當前屏幕有鍵盤時、施加了某手勢時或是某個視圖在調整大小時。
Tips：
- 當不需要導航或是你需要多個控件來管理當前內容時，請使用工具欄。請參閱Toolbars。
考慮在導航欄顯示當前視圖的名稱。在大多數情況下，名稱提供了環境，因為它讓用戶知道他們在看什么。但是，如果給導航欄命名看起來是多余的，你可以讓名稱欄空著。比如，備忘錄(Notes)不會在當前筆記的導航欄上放名稱，因為內容的第一行已經提供了所需的環境線索。
考慮在app最高層級的導航欄放置一個分段控件。如果這么做幫助你扁平信息層級，讓用戶更容易找到他們想要的內容，你會深受其益。如果你在導航欄使用了分段控件，請確保為返回按鈕選擇了正確的標題。了解更多指導，請參閱Segmented Controls。
不要包涵多段的面包屑路徑。返回按鈕只能執行一個單獨的操作，即返回到上一屏。如果你認為用戶可能會因為忘記到達當前屏的完整路徑而迷路，請考慮扁平你的app層級。
避免用過多控件填充導航欄。一般來說，導航欄最多只能包含當前視圖的標題、返回按鈕以及一個管理當前視圖內容的控件。如果你在導航欄使用了分段控件，除此之外，該欄就不應再包含標題或其它控件。
給文本按鈕留出足夠的空間。如果你的導航欄含有多個文本按鈕，文本可能會讓多個按鈕看起來像是同時運行的，導致按鈕間難以區分。在按鈕之間插入固定空間項使它們隔開。了解開發細節，請參閱UIBarButtonItem Class Reference中的UIBarButtonSystemItemFixedSpace?constant value。
考慮在顯示全屏內容時暫時隱藏導航欄。當你想要關注內容時，導航欄會令人分心。暫時隱藏該欄以提供一個更加沉浸式的體驗。地圖app在瀏覽一個全屏地圖時會隱藏導航欄及其它界面元素。如果你要隱藏導航欄，允許用戶通過簡單的手勢復原導航欄，比如點擊。
使用標準的返回按鈕。用戶已經知道，標準的返回按鈕會讓他們在信息層級中按原路徑返回。但是，如果你使用了自定義的返回按鈕，請確保它們看起來像是返回按鈕，有直觀的表現，和界面的其它部分保持一致，并且在app內統一使用該自定義按鈕。如果你用自定義圖片替換了系統提供的返回按鈕，請同時提供一個自定義遮罩圖片(custom mask image)。iOS使用這個遮罩來實現按鈕標題在轉場時的過渡動畫。
了解開發細節，請參閱UINavigationBar Class Reference。
6.2 搜索欄（Search Bars）
用戶通過搜索欄在大量的信息中查找。搜索欄有兩種樣式：顯眼（prominent）（默認）和極簡（minimal）?！巴ㄓ嶄洝笔褂昧孙@眼搜索欄，含有引人注目的淺色背景。“照片”使用了極簡樣式，更好地融入了周邊界面。搜索欄默認是半透明的，但也可以被設置成不透明的。有需要時，搜索欄也可以自動遮蓋住導航欄。
顯眼
極簡
搜索欄含有一個單獨的搜索框，該搜索框可以包含占位文本、清除按鈕、書簽按鈕和結果列表按鈕。除了搜索框之外，搜索欄還會含有一個退出當前搜索的取消按鈕。
占位文本
清除按鈕
取消按鈕
書簽按鈕
結果列表按鈕
讓用戶通過搜索欄而不是文本框去搜索。文本框不具備用戶期待的標準搜索欄所擁有的外觀特征。
包含清除和取消按鈕。大部分的搜索欄都含有一個清除按鈕用來清空輸入欄的內容，以及一個取消按鈕來快速退出搜索。
選擇合適的搜索欄樣式，使其能夠反映出搜索功能在你的app中的價值。如果在你的app中搜索是個關鍵功能，使用默認的、顯眼搜索欄樣式。如果搜索功能使用頻率不高，則使用極簡樣式。
必要時，在搜索欄提供線索和背景。搜索框可以包含占位文本來提示可搜索的類型，比如“搜索服裝、鞋子和飾品”或只是簡單的“搜索”二字。也可以在搜索欄正上方展示一行簡明扼要的帶有適當標點的文字，用來引導用戶。比如股票（Stocks），就在搜索框上方展示了一行文本告知用戶他們可以輸入公司名稱或股票符號。
考慮在搜索欄下方提供快捷鍵之類的內容。利用搜索欄下方的區域幫助用戶更快地獲取內容。比如瀏覽器（Safari），在你點擊搜索框的時候會立即顯示你的書簽，無需輸入任何關鍵詞的情況下即可進入選擇的對象。股票app在你對搜索欄輸入的時候，會一邊在下方展示相關的結果列表，你可以在列表中點擊選擇而不用完整輸入字符。
必要時，為搜索欄添加書簽和結果列表按鈕。利用書簽按鈕讓用戶能夠快速獲得他們可能需要再次查找的信息，比如保存的、上一個或是最近的搜索記錄。使用結果列表按鈕來暗示搜索結果的存在，并在用戶點擊按鈕的時候顯示這些結果。但你無法同時展示上述兩個圖標。
了解開發細節，請參閱UISearchController和UISearchBar。
范圍欄(Scope Bars)：
范圍欄可以附加于搜索欄，讓用戶定義搜索的范圍。范圍欄采用和搜索欄一樣的外觀。
專注于優化搜索結果而不是一味添加范圍欄。當用戶想在定義明確的類別中搜索時，范圍欄會有很大的幫助。但是，更好的做法是優化搜索結果，這樣用戶就無需通過范圍欄進行篩選了。
了解開發細節，請參閱UISearchBar。
6.3 狀態欄（Status Bars）
狀態欄在屏幕的頂端出現，顯示與設備當前狀態相關的有用信息，比如時間、運營商、網絡狀態以及電池容量。狀態欄上真正顯示的信息根據不同的系統設置有所變化。
使用系統提供的狀態欄。用戶希望狀態欄在系統內部保持一致。不要用自定義的狀態替換掉它。
明
暗
根據你的app設計選擇協調的狀態欄顏色。狀態欄的文本和指標的視覺樣式非明即暗，在你的app中，可以統一使用一種配色，或是根據不同的屏幕選擇單獨的配色。暗色系的狀態欄在淺色的界面上效果好，淺色系的狀態欄在深色系的界面上效果好。
遮蓋狀態欄下方的內容。狀態欄的背景默認是透明的，這樣會顯示出狀態欄下方的內容。既要保證狀態欄的可讀性，又不能讓人誤解下方的內容是可交互的，通常通過以下幾種技巧來實現：
- 在你的app中使用導航欄，它會自動顯示狀態欄背景以保證狀態欄下方不會出現任何內容。
- 在狀態欄下方放置一張自定義圖片，比如漸變或純色背景。
- 對狀態欄下方的內容進行模糊處理。
半透明
全屏展示媒體文件時考慮暫時地隱藏狀態欄。當用戶想要集中注意力在媒體上時，狀態欄會令他們分心。暫時地隱藏狀態欄元素能夠提供一個更加沉浸式的體驗。比如照片app，在用戶全屏瀏覽照片時時會隱藏多余的界面元素。
避免永久地隱藏狀態欄。在沒有狀態欄時，用戶需要退出你的app去查看時間或是檢查他們是否連接至Wi-Fi。允許用戶可以通過簡單、易于發現的手勢來重新喚醒被隱藏的狀態欄。在照片app中瀏覽全屏照片時，用戶只需在屏幕上輕點即可呼出狀態欄。
在狀態欄顯示耗時較長的網絡活動狀態。
當你的app在使用網絡，尤其是耗時較長的操作時，顯示網絡活動狀態欄指示器，這樣用戶就知道活動正在進行中。請參閱Network Activity Indicators。
了解開發細節，請參閱UIApplication中的UIStatusBarStyle?constant 和UIViewController中的preferredStatusBarStyle?property。
6.4 標簽欄（Tab Bars）
標簽欄在app屏幕底部出現，提供了在app不同部分間快速切換的途徑。標簽欄是半透明的，也可能會有純色背景，在橫豎屏都保持一致的高度，并且在出現鍵盤時會被隱藏。一個標簽欄可以包含無數個標簽，但其所能容納的可見的標簽數量根據設備大小和橫豎屏模式有所變化。受水平空間的限制，當某些標簽無法被顯示時，最后一個可見的標簽會變成“更多”， 并通過該入口前往其余標簽列表的另一屏。
一般來說，利用標簽欄組織應用程序級別的信息。標簽欄是扁平化信息層級的好辦法，并且一次性提供了前往多個平級信息類別或模式的途徑。
不要在某個標簽的功能不可用時去掉該標簽或是使其失效。如果標簽時而可用時而不可用，你的app界面會變得不穩定和難以捉摸。確保所有的標簽都是有效可點擊的，并且向用戶解釋當前標簽內容不可用的原因。比如，當本iOS設備沒有歌曲時，音樂app的“我的音樂”標簽頁就對如何下載歌曲做出了說明。
標簽欄只能作為導航。標簽欄按鈕不應該執行其它操作。如果你需要在當前視圖提供作用于元素的控件，你可以使用工具欄。請參閱Toolbars。
避免太多的標簽。每增加一個標簽就減小了選擇單個標簽的可觸區域，并且增加了app的復雜性，讓用戶更難找到所需的信息。盡管“更多”標簽可以展示額外的標簽項，但這需要額外的點擊步驟，并且對標簽欄的有限空間沒有很好的利用。太少的標簽也是個問題，它會讓你的界面感覺被分離。一般來說，在iPhone上使用3至5個標簽，在iPad上則可稍微多幾個。
使角標（badge）低調地傳達信息。你可以在標簽上展示角標——一個帶有白色數字或感嘆號的紅色橢圓——來暗示該標簽視圖或模式含有新信息。
總是在與標簽欄相連接的視圖切換內容。為了讓你的界面符合用戶預期，選擇一個標簽后應該直接作用于與標簽欄相連接的視圖，而不是屏幕其它范圍的視圖。比如，在分屏視圖（split view）的左側選擇了一個標簽，是不會導致右半部分突然變化的。在彈窗（popover）選擇一個標簽頁不會導致下方的視圖發生改變。
了解開發細節，請參閱UITabBar。
Tips：
- 理解標簽欄和工具欄之間的不同十分重要，因為這兩種欄都是出現在app屏幕的底部。標簽欄讓用戶在app的不同部分間快速切換，比如時鐘app中的“鬧鐘”、“秒表”、“計時器”。工具欄包含了執行當前視圖相關操作的按鈕，比如創建項、刪除項、添加注釋或是拍照。請參閱Toolbars。標簽欄和工具欄決不會在同一個視圖內同時出現。
6.5 工具欄（Toolbars）
工具欄在app屏幕底部出現，包含了執行當前視圖或包含內容相關操作的按鈕。工具欄是半透明的，也可能會有純色背景，并且通常在用戶不太需要它們時被隱藏。比如，在瀏覽器(Safari)中，當你滾動頁面表明你再閱讀時，工具欄就藏起來了。當你在屏幕底部點擊時，工具欄又會再次出現。當前屏幕有鍵盤時，工具欄也會被隱藏。
提供相關的工具欄按鈕。工具欄必須包含在當前環境下有意義的常用操作命令。
考慮圖標或文字按鈕是否適合你的app。當你需要多于三個工具欄按鈕時，圖標可以實現。當你只有三個或是更少的按鈕時，文字有時候看起來更加清楚。比如，在日歷app中，文本就被當作按鈕使用，因為圖標可能會令人迷惑。因為使用了文本，“Inbox”按鈕還能顯示所有的日歷和事件邀請數量。
給予文本按鈕足夠的空間。
如果你的工具欄含有多個按鈕，文本按鈕就會擠在一起，導致按鈕間難以區分。在按鈕之間插入固定間距使其分離。了解開發細節，請參閱UIBarButtonItem中的UIBarButtonSystemItemFixedSpaceconstant value。
避免在工具欄使用分段控件。
分段控件讓用戶切換內容，而工具欄更針對于當前屏幕。如果你需要提供切換內容的方式，請考慮使用標簽欄替代。請參閱Tab Bars。
了解開發細節，請參閱UIToolbar。
相關閱讀：
原文地址：https://developer.apple.com/ios/human-interface-guidelines/graphics/app-icon/
譯者：喵大神經，交互新人
本文由 @喵大神經 翻譯發布于人人都是產品經理。未經許可，禁止轉載。
感謝分享
先收藏了