iOS 設計指南

標籤：des   android   blog   http   io   ar   color   os   使用   

有時候為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

iOS 設計指南