iOS 設計指南

有時候爲iOS設計app並非一件簡單的事，可是若是你能找到正確的最新的蘋果設備信息，並按照正確的方向，那麼爲iOS設計app或許會變得簡單容易些。

關於這些指南

這些指南描述瞭如何遵照蘋果的iOS 人機交互指南來設計app，而不是講用自定義控件能夠作成什麼樣的設計，有時候打破規則也很重要。該文檔的目的並非爲一些複雜的設計問題提供解決方案。該文檔是非官方的，將會按期更新和擴充內容，最近一次更新是2014年11月11日。

分辨率和顯示屏規格（Resolutions和Display Specifications）

Points 和Pixels的區別

Pixels（像素）是數字顯示屏上咱們可控制的最小物理元素，在一個特定屏幕尺寸中能夠有多個像素，PPI（pixels-per-inch）越高，則渲染的內容會越清晰。

Points用以衡量分辨率。根據屏幕的像素密度，一個point能夠包含多個像素（好比在常規的retina屏上，1pt包含2 x 2的像素）。

當你針對多個顯示屏類型進行設計時，你應該以points進行思考，但以pixels進行設計。這意味着你仍須要以3種不一樣的分辨率來輸出設計資產，無論你針對哪一個分辨率設計應用程序。

iPhone 6+縮減像素取樣

在iOS上渲染像素和物理像素（physical pixels）是等同的，只有一個例外：iPhone 6 Plus的Retina HD顯示屏。因爲它屏幕的像素分辨率要低於一個常規的@3x分辨率，因此被渲染內容會自動調整爲原始尺寸的87%（從2208*1242像素來適應爲1920*1082像素的顯示屏分辨率）

iPhone 5S, 6 以及6+顯示屏區別的詳細信息可參看：The Ultimate Guide To iPhone Resolutions

App Icons

自動應用效果

多尺寸的應用程序icon一般被添加到應用程序包中，當在設備上渲染時，iOS會將效果應用在應用程序icon上。

（1）圓角

圓角半徑值已經不存在了。從iOS 7開始，app icon已經使用了超橢圓的形狀。因爲蘋果沒有發佈該形狀的官方模板，因此你得精確地使用非官方的模板。

圓角的圖形不該該包含在最終的輸出資產中，但若是你想要添加和應用程序icon拐角對齊的描邊和陰影效果，那你可能還會用到圓角圖形。

提醒：由於你想將應用效果和icon拐角對齊，因此若是你正使用超橢圓的形狀對icon資產進行蒙版（遮罩），那要確保在遮罩外的區域不能使用任何透明的圖形。應用程序icon不支持透明度，相反做爲純黑色進行渲染。若是你的遮罩不是百分百精確，那用戶將會在圓角邊緣看 到黑色的鋸齒。推薦將canvas的背景設置成和app icon同樣的背景。

（2）邊框描邊(某些狀況下)

若是你使用的app icon有白色的背景，那麼將會應用1pixel的灰色邊框，以便更容易地識別icon的邊緣。這隻能在設置app和App Store中進行。

（3）後續問題（iOS 6 和以前的版本）

在舊的iOS版本中，這些效果會自動應用：能夠被禁用的圓角（和iOS 7+中使用的icon不一樣）、主屏幕上的陰影效果以及關澤效果等。

柵格系統

蘋果開發了具備黃金分割比例的柵格系統，可用以正確地調整和對齊icon上的元素。不過，甚至是蘋果設計師的原生app icon也沒有徹底嚴格地遵照柵格系統。因此若是你的icon上的元素在沒有嚴格遵照柵格系統的狀況下能更好地展現，那你能夠考慮下打破一些固有的規則。

字體排版

全部的iOS版本中默認字體都是Helvetica Neue。從iOS 7開始，蘋果使用了稍做修改的字體，可是在你的設計過程當中使用原始的Helvetica Neue是極好的。除了默認字體外，你還可使用不少可選的字體，你能夠在此查看完整的預置字體列表。

自定義字體

從技術角度講，True Type Font (.ttf)能夠被用在iOS app中，但要注意許可問題。通常來講，使用徹底免費或者商業化的字體是安全的。MyFonts最大數量地包含了可用在app中的許可字體。

調色板

iOS 7之後，蘋果在操做系統和預裝app中使用了更有生機和活力的調色板。雖然你可使用上邊默認的iOS調色板，但你也可使用本身的顏色（若是你想不同凡響，固然要使用了）。

圖標

在iOS app中，icon一個很好的用法是使用視覺化的關係來支持文本標籤，從而執行一些操做或者徹底取代文本（最經常使用的好比"New"、"Delete"等）。一般，咱們使用icon來區分導航欄、工具欄以及標籤欄。

各類"欄"的按鈕icon

各類"欄"中的按鈕icon應該有兩種狀態：默認狀態下的1或者1.5pt筆畫寬度的輪廓樣式，以及純色填充的活躍狀態。

不要在按鈕icon上添加任何額外的效果，好比下拉陰影或者內陰影，由於這些是iOS 7以前版本中的用法。按鈕icon應該在一個透明背景上以一種純色進行繪製--icon的形狀做爲遮罩，顏色將會以編程形式應用。

活動視圖圖標

活動視圖（一般指分享彈出視圖）中的icon以輪廓樣式設計，但蘋果在iOS 8之後迴歸到白色背景上的實體填充icon風格。

經常使用設計元素

iOS提供了不少不錯的現成的視圖和控件，可幫開發者快速構建頁面。開發者能夠將一些元素自定義到某個級別，可是也有一些元素不能或者不該該進行自定義。當爲iOS設計應用程序時，你應該知道一些工具集的使用，只要是可能，就應該堅持下去。但在一些狀況下，可能須要設計一些自定義控件，由於你須要一個更加定製化的界面或者想要改變現有控件的功能（有點危險）。幾乎任何一件事情都是有可能的，而有時候你須要打破既有的規則，不過須要三思。

狀態欄

狀態欄包含了基本的系統信息，好比運營商、時間、電池狀態以及其餘等，它在視覺上一般與導航欄聯繫在一塊兒，而且使用相同的背景填充。爲了匹配你的app的風格，而且易於閱讀，狀態欄的的內容通常有兩種不一樣的風格：深色（黑色）和淺色（白色）。

你能夠隱藏導航欄，但要思考清楚。好比在app下載web內容時，用戶可能對設備是否鏈接上WiFi網絡比較感興趣，在app要求藍牙鏈接第三方硬件時，用戶可能會想知道應用是否啓用了藍牙。一個使人信服的隱藏狀態欄的理由是你想移除對的那個元素的全部干擾信息，好比全屏展現內容，好比圖片。

導航欄

導航欄包含在app多個視圖間進行導航的控件，以及在當前視圖中管理內容的選項。導航欄一般展現在屏幕的頂部，狀態欄的底部。默認狀況下，背景是半透明的，在導航欄下方還有模糊的內容。導航欄的背景能夠是純色的，漸變的或者是自定義的位圖模式。

豎屏模式下的iPhone 6導航欄。

橫屏模式下的iPhone 4S導航欄。導航欄的高度減了12pt，除了iPad。這也是常見的橫屏模式下隱藏狀態欄的方法。

元素應當遵循特定的對齊模式：

1.返回按鈕一般居左對齊。

2.當前視圖的標題應當居中展現在bar中。

3.Action按鈕一般居右對齊。若是可能的話action按鈕應當限制在一個主要操做行文，以免錯誤點擊，並維持其簡潔性。

工具欄

工具欄包含用於管理或者操做當前視圖中內容的一些操做。在iPhone上，它一般出如今屏幕的底部，但在iPad上也能出如今屏幕的頂部。

和導航欄相似，工具欄的背景填充也能調整，默認狀況下工具欄自己是半透明的，在其下方還有模糊的視圖內容。

當一個特定視圖要求三個以上主要活動，但放在導航欄上又顯得凌亂時，你可使用工具欄。

搜索欄

搜索欄默認有兩種風格：突出的和最小化的。兩種類型的搜索欄在功能上是同樣的。

1.只要用戶沒有輸入文本，搜索欄中會展現佔位符文本，而書籤icon則可用來訪問最近或者保存的搜索。

2.鍵入搜索項目後，佔位符消失，一個清晰的刪除按鈕會出如今搜索欄的右側。

搜索欄能夠利用一個提示--一個短句來介紹搜索的上下文環境。好比"鍵入某個城市、郵政編碼或者機場"

不使用提示和使用提示兩種風格

最小化搜索欄類型

想要提供對檢索詞條的更多控制，可用scope bar（範圍欄）限制搜索欄，scope bar會使用和搜索欄同樣的風格，當搜索結果有清晰的定義類別時，這種方法比較有用。好比，在一款音樂類app中，搜索結果能夠按照專輯和歌曲再次過濾。

標籤欄

用戶可以使用標籤欄在app的單個視圖間快速導航，而且標籤欄也只能用於這個目的。標籤欄一般出如今屏幕的底部。默認狀況下，標籤欄是略透明的，而且嚮導航欄同樣使用系統的模糊效果。

標籤欄包含固定的最大數量的tabs，一旦標籤數量超過其可容納的最大數量，後邊的標籤將會展現在隱藏的"More-tab"列表中，而且有一個選項可重排標籤順序。

雖然iPhone上最多可展現5個標籤，可是在iPad上最多可展現7個標籤。

爲了提醒用戶視圖上的新信息，有時候須要在標籤欄按鈕上使用標記數量。若是一個視圖被臨時禁用，那麼相關的標籤按鈕不該當徹底被隱藏，相反應當淡出視覺範圍以表示其禁用狀態。

表視圖（Table View）

表視圖以單列或者多列形式展現少數或者多個列表風格的信息，並有能將內容分組的選項。根據你展現的數據類型，一般可以使用兩種基本的表視圖風格：

無格式的

無格式表視圖包含的幾行內容的頂部能夠有頁眉，最後一行後邊能夠有頁腳。能夠在屏幕右邊緣展現垂直導航，以便在表中進行導航，這種狀況適合展現以某種方式儲存的大數據集的時候，好比按照字母降序排列。

分組樣式

分組表視圖容許用戶對內容進行分組。每一個分組能夠有頁眉（最佳用法是描述類組的上下文環境）和頁腳（適用於幫助文本等）。一個分組的表視圖至少須要包含一個類組，而且每一個類組至少要包含一行內容。

對於以上兩種表視圖類型，可用幾種風格來展現數據，以方便用戶快速掃描、閱讀和適當調整內容。

默認

默認的表視圖有一個居左對齊的可選圖片和標題。

帶有副標題

在每行標題下展現小字號的副標題，適用於進一步的解釋說明或者簡短描述。

帶有數值

帶數值表類型可展現與行標題相關的特定數值。相似默認的類型，每行都有一個居左對齊的圖片和標題。在該類型中，數值居右對齊，一般使用比標題淡一點的文本顏色。

模態視圖、彈出視圖以及提醒（警示）視圖

iOS提供了多種風格的臨時視圖，能夠某種方式在既定的狀況下展現、編輯或者操做數據。雖然每種臨時視圖因某個很是特定的目的而存在，但外觀上卻大有不一樣，不過全部臨時視圖都有一個相同的地方：在展現時，它就是當前視圖上最上方的圖層，下方的內容被一個黑色的背景所覆蓋。

活動視圖（ACTIVITY VIEW）

活動視圖用以展現特定的任務。這些任務能夠是系統默認的任務，好比經過可用選項分享內容，或者是徹底自定義的活動。當爲自定義任務按鈕設計icon時，你應當聽從活躍狀態和欄按鈕icon的一些設計指南--純色填充、無任何效果、以及在一個透明背景上。

活動（ACTIONS）

活動頁面用來執行可用操做列表中的單項操做，而且強迫用戶確認或者取消某個活動。

在豎屏模式下（以及尺寸比較小的橫屏模式下），actions以按鈕列表形式滑入，並呆在屏幕的底部。這種狀況下，活動列表應該有一個取消按鈕來關閉視圖和執行任何列表中的action。

當有足夠可用的空間時（好比iPad上），活動列表可在視覺上轉爲彈出視圖。不過此時不必定非得有一個關閉按鈕，用戶點擊彈出視圖外的任何地方都能關閉彈出視圖。

提醒視圖

提醒視圖的目的是用來通知用戶一些關鍵性的信息，並有選擇地迫使用戶作出選擇。

提醒視圖一般包含一個標題文本（最好不要超過一行）、一個（純信息提醒，好比"OK"）或者兩個按鈕（要求用戶作出決定，好比"Send"或"Cancel"）。

你能夠在提醒視圖中添加消息文本，若是須要的話則可添加兩個文本域，其中之一能夠是蒙版的輸入區，適合密碼或者PINs之類的敏感信息。

編輯菜單（EDIT MENU）

用戶可以使用編輯菜單執行復制、粘貼以及剪切等操做。雖然你能控制用戶能夠選擇哪一個操做，可是編輯菜單的視覺外觀是設定好的，不能從新配置，除非你設計一個徹底自定義的編輯菜單。

彈出視圖（Popovers）

當某項特定操做要求多個用戶輸入才能繼續進行時彈出視圖就很是有用了。在水平方向上，彈出視圖可經過箭頭指向展現下方相關的控件（好比按鈕）。彈出控件的背景透明度稍有下降，可展現其下方的模糊內容，像iOS 7之後其餘不少UI元素同樣。

彈出視圖是一種很是強大的臨時視圖，可包含相似導航欄、表視圖、地圖或者web視圖等對象。隨着彈出視圖所包含內容和元素的增長，其窗口也能滾動展現。

模態視圖

模態視圖適用於須要多個命令和用戶輸入的狀況，位於屏幕上全部內容的最上方。典型的模態視圖一般提供：

1.描述任務的標題。

2.關閉模特視圖的按鈕，沒有保存或執行任何其餘操做。

3.保存或者提交任何已輸入內容的按鈕。

4.模態窗口主體中提供大量用戶可輸入的元素。

有三種可用的模態視圖類型：

1.全屏模式：覆蓋整個屏幕

2.頁表模式：豎屏模式下，模態視圖覆蓋屏幕上的部份內容，僅在半透明的暗色背景上展現部分父視圖的內容。橫屏模式下，模態視圖會像全屏模態視圖那樣展現。

3.表格頁面模式：豎屏模式下，模態視圖出如今屏幕的中間。模態視圖範圍以外，父視圖內容展現在半透明背景之下。當須要展現鍵盤時，模態視圖的位置會自動調整。橫屏模式下相似全屏模態視圖。

控件（Controls）

iOS爲基本上任何類型的輸入需求提供了各類各樣的控件。如下列出的是最經常使用的控件，但想要看詳細的完整的可用控件列表，請在iOS Developer Library中查看。

按鈕

最經常使用的控件多是按鈕。iOS 7以來，默認的按鈕設計看起來更像一個純文本連接。按鈕控件支持高度自定義。按鈕能夠有幾種不一樣的狀態，可使用視覺語言傳達：默認、突出、選擇以及禁用等。

選擇器（PICKERS）

選擇器用來在一個可用值列表中選擇某個值，和Web上的下拉選框功能相似。選擇器的擴展版本是日期選擇器，容許用戶滾動日期和時間列表來選擇一個月、日以及具體時間。

左：表視圖中的日期選擇器，右：選擇器做爲鍵盤

除了背景色外，不可能更改其視覺風格或者尺寸。不少時候，選擇器位於屏幕的底部，像鍵盤同樣展現，但不能用在其餘地方。

分段控件（SEGMENT CONTROLS）

分段控件包含一組至少兩個以上的分段，可用來過濾內容或者爲清晰分類的內容建立標籤。

不帶icon與帶icon的分段控件

每一個分段可包含一個文本標籤或者一個圖片（icon），但不能同時包含二者。另外，不建議在一個分段控件中混合使用不一樣的分段風格，好比文本和圖片。每一個分段的寬度會基於分段的數量自動調整（兩個分段各佔50%，5個分段各佔20%）。

滑桿（SLIDERS）

滑桿控件容許用戶從容許值範圍中選擇一個特定的值。因爲使用滑桿選擇一個值的操做很是流暢，而且無需額外的步驟，因此建議在選擇預估值的時候使用滑桿，而不是選擇精確的值。好比滑桿能夠很好地用來設置音量，用戶能夠聽到和看到音量大小的不一樣，而經過輸入文原本設置精確的dB值是不切實際的。

不帶icon與帶icon的滑桿控件

能夠爲最小值和最大值設置icon，icon會展現在滑桿控件的開始和末尾兩端，從而在視覺上增強滑桿的目的。

進步器（STEPPER）

當用戶從一個有限的值範圍中（好比1-10）鍵入準確的值的時候，可以使用進步器。進步器一般包含兩個分段按鈕，一個是下降當前值，一個是增長當前值。

進步器的視覺外觀支持高度自定義：

1.可以使用本身的icon做爲進步器按鈕；

2.當想維持iOS原生的外觀時，你能夠自定義進步器邊框、背景以及icon的顏色。

3.若是你更進一步使用自定義，那你能夠爲進步器的按鈕和分割符使用徹底自定義的圖片。

開關（SWITCH）

用戶可以使用開關在"ON"和"OFF"兩種狀態間切換。設計師可自定義兩種狀態的顏色，可是開關按鈕的外觀和尺寸是設定好的不能更改。

鍵盤（KEYBOARDS）

有多重鍵盤類型可爲特定的文本輸入提供最好的鍵盤。雖然你可使用本身徹底自定義的劍蘭，但默認的鍵盤無需調整風格和尺寸，不少時候更加方便一些。

延伸閱讀和資源

上述指南僅提供了開始iOS設計的基本信息，一旦深刻挖掘，你可能會對更細節性的內容感興趣，那麼下邊這些文章和資源或許能幫到你：

基礎內容：

蘋果：iOS Human Interface Guidelines（中文版）

蘋果：UIKit User Interface Catalog

Marc Edwards：My app design workflow

Treehouse：Learn Mobile App Design

動畫和原型

Framer.js：$79.99, 可試用

Marvel：免費

Pixate：iOS動態原型

Origami：Facebook出品的交互原型利器

Meng To：How To Prototype In Xcode Using Storyboard

入門指南

Mike Rundle：Building iOS Apps From Scratch

開源控件收集：Cocoa Controls

"欄"按鈕icon

Creative Market：3000 Retina Icons for iOS（$99）

2080 iOS 8 Icons

Creative Market：on Creative Market（$69）

Creative Market：1640 iOS Icons - Streamline（$69）

Creative Market：500 Line Vector Icons（$11）

App ICONS

Photoshop：App Icon Template

Sketch：iOS App Icon Template

UI KITS

Sketch：iPhone GUI for Sketch (iOS 7)

Photoshop：iOS 7 GUI PSD (iPhone)

Sketch：iPad GUI for Sketch (iOS 7)

Photoshop：iPad GUI PSD

Sketch：iOS 8 UI Kit + for Sketch

Sketch：Blueprint

 

本文由CocoaChina翻譯自Ivo Mynttinen Design，原文：The iOS Design Guidelines，轉載請註明出處。

 

Coc