有時候為iOS設(shè)計app并不是一件簡單的事，但是如果你能找到正確的最新的蘋果設(shè)備信息，并按照正確的方向，那么為iOS設(shè)計app或許會變得簡單容易些。

關(guān)于這些指南

這些指南描述了如何遵守蘋果的iOS 人機交互指南來設(shè)計app，而不是講用自定義控件可以做成什么樣的設(shè)計，有時候打破規(guī)則也很重要。該文檔的目的并不是為一些復(fù)雜的設(shè)計問題提供解決方案。該文檔是非官方的，將會定期更新和擴充內(nèi)容，最近一次更新是2014年11月11日。

分辨率和顯示屏規(guī)格（Resolutions和Display Specifications）

Points 和Pixels的區(qū)別

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

Points用以衡量分辨率。根據(jù)屏幕的像素密度，一個point可以包含多個像素（比如在常規(guī)的retina屏上，1pt包含2 x 2的像素）。

當(dāng)你針對多個顯示屏類型進(jìn)行設(shè)計時，你應(yīng)該以points進(jìn)行思考，但以pixels進(jìn)行設(shè)計。這意味著你仍需要以3種不同的分辨率來輸出設(shè)計資產(chǎn)，不管你針對哪個分辨率設(shè)計應(yīng)用程序。

iPhone 6+縮減像素取樣

在iOS上渲染像素和物理像素（physical pixels）是等同的，只有一個例外：iPhone 6 Plus的Retina HD顯示屏。由于它屏幕的像素分辨率要低于一個常規(guī)的@3x分辨率，所以被渲染內(nèi)容會自動調(diào)整為原始尺寸的87%（從2208*1242像素來適應(yīng)為1920*1082像素的顯示屏分辨率）

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

App Icons

自動應(yīng)用效果

多尺寸的應(yīng)用程序icon通常被添加到應(yīng)用程序包中，當(dāng)在設(shè)備上渲染時，iOS會將效果應(yīng)用在應(yīng)用程序icon上。

（1）圓角

圓角半徑值已經(jīng)不存在了。從iOS 7開始，app icon已經(jīng)使用了超橢圓的形狀。由于蘋果沒有發(fā)布該形狀的官方模板，所以你得精確地使用非官方的模板。

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

提醒：因為你想將應(yīng)用效果和icon拐角對齊，所以如果你正使用超橢圓的形狀對icon資產(chǎn)進(jìn)行蒙版（遮罩），那要確保在遮罩外的區(qū)域不能使用任何透明的圖形。應(yīng)用程序icon不支持透明度，相反作為純黑色進(jìn)行渲染。如果你的遮罩不是百分百精確，那用戶將會在圓角邊緣看 到黑色的鋸齒。推薦將canvas的背景設(shè)置成和app icon一樣的背景。

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

如果你使用的app icon有白色的背景，那么將會應(yīng)用1pixel的灰色邊框，以便更容易地識別icon的邊緣。這只能在設(shè)置app和App Store中進(jìn)行。

（3）后續(xù)問題（iOS 6 和之前的版本）

在舊的iOS版本中，這些效果會自動應(yīng)用：可以被禁用的圓角（和iOS 7+中使用的icon不同）、主屏幕上的陰影效果以及關(guān)澤效果等。

柵格系統(tǒng)

蘋果開發(fā)了具有黃金分割比例的柵格系統(tǒng)，可用以正確地調(diào)整和對齊icon上的元素。不過，甚至是蘋果設(shè)計師的原生app icon也沒有完全嚴(yán)格地遵守柵格系統(tǒng)。所以如果你的icon上的元素在沒有嚴(yán)格遵守柵格系統(tǒng)的情況下能更好地展示，那你可以考慮下打破一些固有的規(guī)則。

字體排版

所有的iOS版本中默認(rèn)字體都是Helvetica Neue。從iOS 7開始，蘋果使用了稍作修改的字體，但是在你的設(shè)計過程中使用原始的Helvetica Neue是極好的。除了默認(rèn)字體外，你還可以使用很多可選的字體，你可以在此查看完整的預(yù)置字體列表。

自定義字體

從技術(shù)角度講，True Type Font (.ttf)可以被用在iOS app中，但要注意許可問題。一般來說，使用完全免費或者商業(yè)化的字體是安全的。MyFonts最大數(shù)量地包含了可用在app中的許可字體。

調(diào)色板

iOS 7以后，蘋果在操作系統(tǒng)和預(yù)裝app中使用了更有生機和活力的調(diào)色板。雖然你可以使用上邊默認(rèn)的iOS調(diào)色板，但你也可以使用自己的顏色（如果你想與眾不同，當(dāng)然要使用了）。

圖標(biāo)

在iOS app中，icon一個很好的用法是使用視覺化的關(guān)系來支持文本標(biāo)簽，從而執(zhí)行一些操作或者完全取代文本（最常用的比如”New”、”Delete”等）。通常，我們使用icon來區(qū)分導(dǎo)航欄、工具欄以及標(biāo)簽欄。

各種”欄”的按鈕icon

各種”欄”中的按鈕icon應(yīng)該有兩種狀態(tài)：默認(rèn)狀態(tài)下的1或者1.5pt筆畫寬度的輪廓樣式，以及純色填充的活躍狀態(tài)。

不要在按鈕icon上添加任何額外的效果，比如下拉陰影或者內(nèi)陰影，因為這些是iOS 7之前版本中的用法。按鈕icon應(yīng)該在一個透明背景上以一種純色進(jìn)行繪制–icon的形狀作為遮罩，顏色將會以編程形式應(yīng)用。

活動視圖圖標(biāo)

活動視圖（通常指分享彈出視圖）中的icon以輪廓樣式設(shè)計，但蘋果在iOS 8以后回歸到白色背景上的實體填充icon風(fēng)格。

常用設(shè)計元素

iOS提供了很多不錯的現(xiàn)成的視圖和控件，可幫開發(fā)者快速構(gòu)建頁面。開發(fā)者可以將一些元素自定義到某個級別，但是也有一些元素不能或者不應(yīng)該進(jìn)行自定義。當(dāng)為iOS設(shè)計應(yīng)用程序時，你應(yīng)該知道一些工具集的使用，只要是可能，就應(yīng)該堅持下去。但在一些情況下，可能需要設(shè)計一些自定義控件，因為你需要一個更加定制化的界面或者想要改變現(xiàn)有控件的功能（有點危險）。幾乎任何一件事情都是有可能的，而有時候你需要打破既有的規(guī)則，不過需要三思。

狀態(tài)欄

狀態(tài)欄包含了基本的系統(tǒng)信息，比如運營商、時間、電池狀態(tài)以及其他等，它在視覺上通常與導(dǎo)航欄聯(lián)系在一起，并且使用相同的背景填充。為了匹配你的app的風(fēng)格，并且易于閱讀，狀態(tài)欄的的內(nèi)容一般有兩種不同的風(fēng)格：深色（黑色）和淺色（白色）。

你可以隱藏導(dǎo)航欄，但要思考清楚。比如在app下載web內(nèi)容時，用戶可能對設(shè)備是否連接上WiFi網(wǎng)絡(luò)比較感興趣，在app要求藍(lán)牙連接第三方硬件時，用戶可能會想知道應(yīng)用是否啟用了藍(lán)牙。一個令人信服的隱藏狀態(tài)欄的理由是你想移除對的那個元素的所有干擾信息，比如全屏展示內(nèi)容，比如圖片。

導(dǎo)航欄

導(dǎo)航欄包含在app多個視圖間進(jìn)行導(dǎo)航的控件，以及在當(dāng)前視圖中管理內(nèi)容的選項。導(dǎo)航欄通常展示在屏幕的頂部，狀態(tài)欄的底部。默認(rèn)情況下，背景是半透明的，在導(dǎo)航欄下方還有模糊的內(nèi)容。導(dǎo)航欄的背景可以是純色的，漸變的或者是自定義的位圖模式。

豎屏模式下的iPhone 6導(dǎo)航欄。

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

元素應(yīng)當(dāng)遵循特定的對齊模式：

1.返回按鈕通常居左對齊。

2.當(dāng)前視圖的標(biāo)題應(yīng)當(dāng)居中展示在bar中。

3.Action按鈕通常居右對齊。如果可能的話action按鈕應(yīng)當(dāng)限制在一個主要操作行文，以避免錯誤點擊，并維持其簡潔性。

工具欄

工具欄包含用于管理或者操作當(dāng)前視圖中內(nèi)容的一些操作。在iPhone上，它通常出現(xiàn)在屏幕的底部，但在iPad上也能出現(xiàn)在屏幕的頂部。

和導(dǎo)航欄類似，工具欄的背景填充也能調(diào)整，默認(rèn)情況下工具欄本身是半透明的，在其下方還有模糊的視圖內(nèi)容。

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

搜索欄

搜索欄默認(rèn)有兩種風(fēng)格：突出的和最小化的。兩種類型的搜索欄在功能上是一樣的。

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

2.鍵入搜索項目后，占位符消失，一個清晰的刪除按鈕會出現(xiàn)在搜索欄的右側(cè)。

搜索欄可以利用一個提示–一個短句來介紹搜索的上下文環(huán)境。比如”鍵入某個城市、郵政編碼或者機場”

不使用提示和使用提示兩種風(fēng)格

最小化搜索欄類型

想要提供對檢索詞條的更多控制，可用scope bar（范圍欄）限制搜索欄，scope bar會使用和搜索欄一樣的風(fēng)格，當(dāng)搜索結(jié)果有清晰的定義類別時，這種方法比較有用。比如，在一款音樂類app中，搜索結(jié)果可以按照專輯和歌曲再次過濾。

標(biāo)簽欄

用戶可使用標(biāo)簽欄在app的單個視圖間快速導(dǎo)航，并且標(biāo)簽欄也只能用于這個目的。標(biāo)簽欄通常出現(xiàn)在屏幕的底部。默認(rèn)情況下，標(biāo)簽欄是略透明的，并且向?qū)Ш綑谝粯邮褂孟到y(tǒng)的模糊效果。

標(biāo)簽欄包含固定的最大數(shù)量的tabs，一旦標(biāo)簽數(shù)量超過其可容納的最大數(shù)量，后邊的標(biāo)簽將會展示在隱藏的”More-tab”列表中，并且有一個選項可重排標(biāo)簽順序。

雖然iPhone上最多可展示5個標(biāo)簽，但是在iPad上最多可展示7個標(biāo)簽。

為了提醒用戶視圖上的新信息，有時候需要在標(biāo)簽欄按鈕上使用標(biāo)記數(shù)量。如果一個視圖被臨時禁用，那么相關(guān)的標(biāo)簽按鈕不應(yīng)當(dāng)完全被隱藏，相反應(yīng)當(dāng)?shù)鲆曈X范圍以表示其禁用狀態(tài)。

表視圖（Table View）

表視圖以單列或者多列形式展示少數(shù)或者多個列表風(fēng)格的信息，并有能將內(nèi)容分組的選項。根據(jù)你展示的數(shù)據(jù)類型，通?？墒褂脙煞N基本的表視圖風(fēng)格：

無格式的

無格式表視圖包含的幾行內(nèi)容的頂部可以有頁眉，最后一行后邊可以有頁腳。可以在屏幕右邊緣展示垂直導(dǎo)航，以便在表中進(jìn)行導(dǎo)航，這種情況適合展示以某種方式儲存的大數(shù)據(jù)集的時候，比如按照字母降序排列。

分組樣式

分組表視圖允許用戶對內(nèi)容進(jìn)行分組。每個分組可以有頁眉（最佳用法是描述類組的上下文環(huán)境）和頁腳（適用于幫助文本等）。一個分組的表視圖至少需要包含一個類組，并且每個類組至少要包含一行內(nèi)容。

對于以上兩種表視圖類型，可用幾種風(fēng)格來展示數(shù)據(jù)，以方便用戶快速掃描、閱讀和適當(dāng)調(diào)整內(nèi)容。

默認(rèn)

默認(rèn)的表視圖有一個居左對齊的可選圖片和標(biāo)題。

帶有副標(biāo)題

在每行標(biāo)題下展示小字號的副標(biāo)題，適用于進(jìn)一步的解釋說明或者簡短描述。

帶有數(shù)值

帶數(shù)值表類型可展示與行標(biāo)題相關(guān)的特定數(shù)值。類似默認(rèn)的類型，每行都有一個居左對齊的圖片和標(biāo)題。在該類型中，數(shù)值居右對齊，通常使用比標(biāo)題淡一點的文本顏色。

模態(tài)視圖、彈出視圖以及提醒（警示）視圖

iOS提供了多種風(fēng)格的臨時視圖，可以某種方式在既定的情況下展示、編輯或者操作數(shù)據(jù)。雖然每種臨時視圖因某個非常特定的目的而存在，但外觀上卻大有不同，不過所有臨時視圖都有一個相同的地方：在展示時，它就是當(dāng)前視圖上最上方的圖層，下方的內(nèi)容被一個黑色的背景所覆蓋。

活動視圖（ACTIVITY VIEW）

活動視圖用以展示特定的任務(wù)。這些任務(wù)可以是系統(tǒng)默認(rèn)的任務(wù)，比如通過可用選項分享內(nèi)容，或者是完全自定義的活動。當(dāng)為自定義任務(wù)按鈕設(shè)計icon時，你應(yīng)當(dāng)遵從活躍狀態(tài)和欄按鈕icon的一些設(shè)計指南–純色填充、無任何效果、以及在一個透明背景上。

活動（ACTIONS）

活動頁面用來執(zhí)行可用操作列表中的單項操作，并且強迫用戶確認(rèn)或者取消某個活動。

在豎屏模式下（以及尺寸比較小的橫屏模式下），actions以按鈕列表形式滑入，并呆在屏幕的底部。這種情況下，活動列表應(yīng)該有一個取消按鈕來關(guān)閉視圖和執(zhí)行任何列表中的action。

當(dāng)有足夠可用的空間時（比如iPad上），活動列表可在視覺上轉(zhuǎn)為彈出視圖。不過此時不一定非得有一個關(guān)閉按鈕，用戶點擊彈出視圖外的任何地方都能關(guān)閉彈出視圖。

提醒視圖

提醒視圖的目的是用來通知用戶一些關(guān)鍵性的信息，并有選擇地迫使用戶做出選擇。

提醒視圖通常包含一個標(biāo)題文本（最好不要超過一行）、一個（純信息提醒，比如”OK”）或者兩個按鈕（要求用戶做出決定，比如”Send”或”Cancel”）。

你可以在提醒視圖中添加消息文本，如果需要的話則可添加兩個文本域，其中之一可以是蒙版的輸入?yún)^(qū)，適合密碼或者PINs之類的敏感信息。

編輯菜單（EDIT MENU）

用戶可使用編輯菜單執(zhí)行復(fù)制、粘貼以及剪切等操作。雖然你能控制用戶可以選擇哪個操作，但是編輯菜單的視覺外觀是設(shè)定好的，不能重新配置，除非你設(shè)計一個完全自定義的編輯菜單。

彈出視圖（Popovers）

當(dāng)某項特定操作要求多個用戶輸入才能繼續(xù)進(jìn)行時彈出視圖就非常有用了。在水平方向上，彈出視圖可通過箭頭指向展示下方相關(guān)的控件（比如按鈕）。彈出控件的背景透明度稍有降低，可展示其下方的模糊內(nèi)容，像iOS 7以后其他很多UI元素一樣。

彈出視圖是一種非常強大的臨時視圖，可包含類似導(dǎo)航欄、表視圖、地圖或者web視圖等對象。隨著彈出視圖所包含內(nèi)容和元素的增加，其窗口也能滾動展示。

模態(tài)視圖

模態(tài)視圖適用于需要多個命令和用戶輸入的情況，位于屏幕上所有內(nèi)容的最上方。典型的模態(tài)視圖通常提供：

1.描述任務(wù)的標(biāo)題。

2.關(guān)閉模特視圖的按鈕，沒有保存或執(zhí)行任何其他操作。

3.保存或者提交任何已輸入內(nèi)容的按鈕。

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

有三種可用的模態(tài)視圖類型：

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

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

3.表格頁面模式：豎屏模式下，模態(tài)視圖出現(xiàn)在屏幕的中間。模態(tài)視圖范圍之外，父視圖內(nèi)容展示在半透明背景之下。當(dāng)需要展示鍵盤時，模態(tài)視圖的位置會自動調(diào)整。橫屏模式下類似全屏模態(tài)視圖。

控件（Controls）

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

按鈕

最常用的控件可能是按鈕。iOS 7以來，默認(rèn)的按鈕設(shè)計看起來更像一個純文本鏈接。按鈕控件支持高度自定義。按鈕可以有幾種不同的狀態(tài)，可以使用視覺語言傳達(dá)：默認(rèn)、突出、選擇以及禁用等。

選擇器（PICKERS）

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

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

除了背景色外，不可能更改其視覺風(fēng)格或者尺寸。很多時候，選擇器位于屏幕的底部，像鍵盤一樣展示，但不能用在其他地方。

分段控件（SEGMENT CONTROLS）

分段控件包含一組至少兩個以上的分段，可用來過濾內(nèi)容或者為清晰分類的內(nèi)容創(chuàng)建標(biāo)簽。

不帶icon與帶icon的分段控件

每個分段可包含一個文本標(biāo)簽或者一個圖片（icon），但不能同時包含兩者。另外，不建議在一個分段控件中混合使用不同的分段風(fēng)格，比如文本和圖片。每個分段的寬度會基于分段的數(shù)量自動調(diào)整（兩個分段各占50%，5個分段各占20%）。

滑桿（SLIDERS）

滑桿控件允許用戶從允許值范圍中選擇一個特定的值。由于使用滑桿選擇一個值的操作非常流暢，并且無需額外的步驟，所以建議在選擇預(yù)估值的時候使用滑桿，而不是選擇精確的值。比如滑桿可以很好地用來設(shè)置音量，用戶可以聽到和看到音量大小的不同，而通過輸入文本來設(shè)置精確的dB值是不切實際的。

不帶icon與帶icon的滑桿控件

可以為最小值和最大值設(shè)置icon，icon會展示在滑桿控件的開始和末尾兩端，從而在視覺上加強滑桿的目的。

進(jìn)步器（STEPPER）

當(dāng)用戶從一個有限的值范圍中（比如1-10）鍵入準(zhǔn)確的值的時候，可使用進(jìn)步器。進(jìn)步器通常包含兩個分段按鈕，一個是降低當(dāng)前值，一個是增加當(dāng)前值。

進(jìn)步器的視覺外觀支持高度自定義：

1.可使用自己的icon作為進(jìn)步器按鈕；

2.當(dāng)想維持iOS原生的外觀時，你可以自定義進(jìn)步器邊框、背景以及icon的顏色。

3.如果你更進(jìn)一步使用自定義，那你可以為進(jìn)步器的按鈕和分割符使用完全自定義的圖片。

開關(guān)（SWITCH）

用戶可使用開關(guān)在”ON”和”OFF”兩種狀態(tài)間切換。設(shè)計師可自定義兩種狀態(tài)的顏色，但是開關(guān)按鈕的外觀和尺寸是設(shè)定好的不能更改。

鍵盤（KEYBOARDS）

有多重鍵盤類型可為特定的文本輸入提供最好的鍵盤。雖然你可以使用自己完全自定義的劍蘭，但默認(rèn)的鍵盤無需調(diào)整風(fēng)格和尺寸，很多時候更加方便一些。

來源：CocoaChina翻譯? ?編輯：suiling?