IOS設備設計完整指南

時間 2019-11-08

標籤 ios 設備設計完整指南欄目 iOS 简体版

原文原文鏈接

做爲初學者，經常不知如何下手設計，IOS應用UI設計中碰到的種種基礎小問題，在此都將一一獲得解答。這份完整的設計指南將帶你快速上手，爲IOS設計出優雅的應用吧。html

關於此設計指南

此設計指南描述的是如何按照蘋果官方的 iOS 人機界面指南（HIG）爲 iOS 設計應用，而不是如何設計自定義控件。這能夠幫助你們打破規則。此文檔只做指導做用，並不是爲了解決複雜的、特定的設計問題。ios

（非官方文檔，原做者 Ivo 將按期更新和補充。最後更新於：2014年11月11日。）git

分辨率和顯示規格

點（pt）和像素（px）的區別

像素（pixels）是數碼顯示上最小的計算單位。在同一個屏幕尺寸，更高的PPI（每英寸的像素數目），就能顯示更多的像素，同時渲染的內容也會更清晰。github

點（points）是一個與分辨率無關的計算單位。根據屏幕的像素密度，一個點能夠包含多個像素（例如，在標準Retina顯示屏上1 pt裏有2 x 2個像素）。web

當你爲多種顯示設備設計時，你應該以「點」爲單位做參考，但設計仍是以像素爲單位設計的。這意味着仍然須要以3種不一樣的分辨率導出你的素材，無論你以哪一種分辨率設計你的應用。編程

注意數組

如沒有另外指定（如一個數值加上「px」），此指南提到具體尺寸均以點（pt）爲單位。若是你須要轉換成相應的像素值，很簡單，Retina屏相應乘2或Retina HD屏則乘3。xcode

iPhone 6 Plus上的降採樣（Downsampling）

在全部iOS設備上，渲染的像素和實際像素是相等的。惟一的例外是：iPhone 6 Plus的Retina HD屏幕。由於其屏幕的像素分辨率比天然的 @3x 分辨率更低，渲染的內容會自動調整到大約原尺寸的87%（從2208 x 1242像素適應到1920 x 1080像素)。瀏覽器

（iPhone 5S、6 和 6 Plus顯示的區別。更多信息請點擊這裏。）安全

App 圖標

自帶效果

應用圖標（App icons）素材一般會以多種尺寸的無添加效果的、正方形的PNG文件添加到應用包中。當在一個設備上渲染時，iOS會自動添加多種效果在App的圖標上。

圓角

過去使用簡單半徑值的圓角已經再也不使用了。從iOS 7開始，App的圖標已經開始使用一種叫「超橢圓」（Superellipse）的形狀。由於蘋果公司並未發佈一個官方的形狀模板，因此你要用這個非官方模板來準確地肯定圖標將會被摺疊多少。

圓角不要包含在最終的導出素材中。但你在設計過程當中可能會須要用到圓角，由於添加描邊或陰影等效果時，要對齊圖標的邊角來設計。

注意：

若是以Supererllipse形狀來遮罩你的圖標素材，但願運用的一些效果能夠對齊到邊角，那麼，確保不要在遮罩區域外使用任何透明的部分。全部應用圖標都不支持透明，將會渲染純黑色。若是你的素材不是100%不透明的，那麼用戶將會在圓形邊緣上看到黑色噪點。因此推薦設計時畫布的背景設置成和App圖標相同的背景。

描邊（在某些狀況下）

若是應用圖標使用了白色背景，那麼爲了可以識別出圖標的邊界，將會帶上1像素的灰色描邊。這隻有在iOS「設置」（若是你的應用在這裏列了出來）和AppStore上會這樣。

遺留效果（iOS6及之前的版本）

在iOS舊版本上，會自帶這些效果：圓角（稍微不一樣於iOS7+圖標使用的形狀）、投影（在主屏幕上）和光澤（能夠禁用）。

柵格系統（Grid system）

蘋果開發了一套黃金比例柵格系統，能夠在你的圖標上很好地肯定元素的尺寸和對齊。不過，即便在原生應用的圖標上，蘋果的設計師們也沒有嚴格按照這個柵格系統來設計。因此，若是你的圖標元素不嚴格徹底對齊柵格能夠表現得很好，那麼打破規則約束，自由發揮吧。

字體

全部iOS版本的默認系統字體都是Helvetica Neue。iOS7開始，蘋果對此字體做了一些輕微的修改，但在設計過程當中使用原來的Helvetica Neue字體徹底沒問題。除了默認的字體，也有許多代替字體可使用。你能夠在 iOS完整預裝字體清單裏查找。

自定義字體

技術上，任何字體（.ttf）均可以在iOS應用上使用，但要注意受權許可。應該安全地使用那些能夠徹底免費商業用途的字體。不過App商業用途許可的字體很是少，即便有，得到其許可也會比較昂貴。須要的話，MyFonts 目前提供了大量的字體，能夠受權移動應用使用。

配色

自從iOS7，蘋果開始在系統界面和預裝應用上使用明亮的配色。而你可使用以上默認的iOS配色，也可使用本身的顏色（若是想脫穎而出的話最好這樣作）。

圖標運用

iOS應用裏，做爲動做執行的視覺表現，圖標永遠是最好的方式，其經常使用於搭配文本或者徹底取代文本（常見的有「新建」、「刪除」等）。一般，在導航欄、工具欄或標籤欄上，咱們會對圖標做相應的處理。

欄按鈕圖標（Bar Button Icons）

Bar上的圖標應有兩種不一樣的狀態：以1或1.5pt線寬的輪廓線描繪的默認狀態，以實體填充的活動狀態。

不要在按鈕圖標上添加任何如投影或陰影這樣的效果，由於這在舊iOS版本（iOS7 Redesign以前）上顯得十分多餘。此外，按鈕圖標應該在半透明背景上以純色繪製——圖標的形狀將用於遮罩，而圖標顏色將會以編程方式賦予。

活動視圖圖標

活動視圖（如衆所周知的分享彈出框 Share Popover）上的圖標一般是線性圖標，但iOS8開始，蘋果又迴歸到了在純白背景上使用實體填充圖標了。

經常使用設計元素

iOS提供了大量的能夠直接使用的視圖和控件，幫助開發者快速建立界面。有些元素能夠必定程度上地自定義，但有些可能就不行，並且也是不該該自定義的。當設計一個iOS應用時，你要了解這些工具庫，學會何時合適就要使用他們。不過，有些時候，建立一個自定義控件也許更好，由於你須要一個更個性的外觀，或者想要改變一個已存在控件的功能（危險領域）。總之一切皆可能，有時候打破規則更有意義，但必定要三思然後行。

狀態欄（Status Bar）

狀態欄包含基本系統信息，例如當前事件、時間、電池狀態及其餘更多信息。視覺上狀態欄是和導航欄相連的，都使用同樣的背景填充。爲配合App的風格和保證可讀性，狀態欄內容有兩種不一樣的風格：暗色（黑）和亮色（白）。

能夠隱藏狀態欄，但仍是那句，請三思。舉個例子，當應用下載網絡內容時，用戶可能想知道，是否連上了一個WIFI網絡；或者，當應用要請求藍牙鏈接到第三方硬件時，是否打開了藍牙。若是真的要隱藏，一個合理的隱藏狀態欄的理由是，當你但願從一個單一元素裏移除一切干擾時，好比當展現須要全屏的內容時，如圖片幻燈。

導航欄（Navigation Bar）

導航欄包含了一些控件，用來在應用裏不一樣的視圖中導航，以及管理當前視圖中的內容。導航欄總在屏幕的頂部，狀態欄的正下方。默認的，導航欄背景會進行輕微半透明處理，以及對下面的內容進行毛玻璃辦的模糊處理。背景能夠填充純色、漸變顏色，或者是自定義位圖。

（iPhone 6豎屏時的導航欄。）

（iPhone 4S橫屏時的導航欄。欄高度減小到12pt，在iPad上也是這樣。在橫屏時隱藏狀態欄是習慣作法。）

導航欄元素老是按照特定的對齊方式。

– 返回按鈕老是在左端左對齊。
– 當前視圖的標題則在Bar上居中。
– 動做按鈕則老是右端對齊。並且應該不要超過一個主要動做，以防誤點以及連續操做能夠更簡單些。

工具欄（Toolbar）

工具欄包含一些管理、控制當期那視圖內容的動做。iPhone上，工具欄將永遠在屏幕底部邊緣，而在iPad上，其能夠在屏幕頂部出現。

和導航欄同樣，其背景填充也能夠自定義，默認是半透明效果以及模糊處理遮住的內容。

工具欄一般用於超過3個主動做的特定視圖。不然很難適應並且外觀會看起來很混亂。

搜索欄（Search Bar）

搜索欄默認有兩種風格狀態：凸顯（Prominent）和最小化（Minimal）。兩種的功能都相同。

– 只要用戶沒有輸入文本時，搜索框內將顯示提示文本（Placeholder Text），而且，能夠選擇地設置一個書籤圖標，用來查看最近搜索以及保存的搜索。
– 一旦輸入搜索項目，提示文本將消失，而一個清晰的清空按鈕將出如今右端。

搜索欄能夠設置一段提醒——一個簡短的句子介紹搜索功能。例如，「輸入一個城市、郵編或機場。」

（彈出狀態的搜索欄，無提示和有提示版。）

（最小化狀態的搜索欄。）

爲了查詢搜索能更好地控制，能夠爲搜索欄接上一個範圍欄（Scope Bar）。範圍欄將使用和搜索欄相同的風格，其在明肯定義了搜索結果類別的狀況下會頗有用。例如，一個音樂應用，搜索結果能夠再次經過歌手、專輯或歌曲進行篩選。

標籤欄（Tab Bar）

標籤欄經常使用於快速切換應用上的獨立視圖，且通常也只能這樣用。一般在屏幕底部。默認狀況下使用和導航欄同樣的輕微半透明，以及使用和系統同樣的模糊處理遮住的內容。

標籤欄僅能夠擁有固定的最大標籤數。一旦數目超過最大數目，則最後一個選項卡將會以「更多標籤」代替，其他標籤以列表形式隱藏於此，另外，通常會有選項能夠對顯示的選項卡從新進行排序。

iPhone上最大選項卡數目是5個，而ipad上則能夠顯示多達7個而無需「更多」標籤。

通知用戶在一個新視圖上有新消息，一般會在標籤欄按鈕上顯示一個數字徽標。若是一個視圖暫時隱藏，相關的選項卡按鈕不會徹底隱藏，而是會慢慢淡化以傳達一個不可用的狀態。

表格視圖（Table View）

表格視圖用於呈現大多數列表風格的信息，能夠一列或者多列，也能夠選擇幾行來劃分信息或分組。

根據你選擇的數據類型，可能會用到這兩種基本的表格視圖類型。

純表格

純表格由必定的行數組成，在頂部能夠擁有一個表頭，以及底部能夠含有一個表尾。能夠在屏幕右端帶一個垂直導航，經過表格的形式進行導航，這在呈現大量數據時十分有用。在右端還能夠經過一些方式進行排序（例如，按字母自上到下排序）。

分組表格

分組表格視圖以分組的方式組織你的」錶行」。每一個分組能夠有一個頭（最好用於描述組的內容）以及一個尾（顯示幫助信息等）。分組表格至少要由一個分組組成，並且每一個分組至少要有一行。

對於這兩種表格視圖類型，都擁有一些風格，能以必定的方式呈現數據，讓用戶能夠簡單地檢索、瀏覽甚至修改它：

默認

默認的表格行風格是一個圖標加一個標題，而圖標在左端。

帶副標題

帶副標題的表格風格在標題下面容許有一個簡短的副標題文本。經常使用於進一步解釋或簡短描述。

帶數值

帶數值表格風格能夠帶一個與行標題相關的特別值。和默認風格相似，每行也能夠有一個圖標和標題，都是左對齊。緊隨其後的是右對齊的數值文本，一般顏色會比標題文本的顏色淺些。

模態、浮動框、警告提示

iOS提供多種臨時視圖，能夠必定程度上顯示、編輯和修改數據，以適應給定的情境。每一個臨時視圖都是具備特別的用途的，並且每一個外觀都不同。全部臨時視圖都有一個共同點：當顯示時，會在當前視圖的最頂層（即在其餘全部的上面），並且下面的內容會蒙上一層半透明黑色背景。

活動視圖（Activity View）

活動視圖是用於執行特定任務的視圖。這些任務能夠是默認系統任務，如經過選項分享內容等，或者能夠徹底自定義這些動做。當設計自定義任務按鈕圖標時，你應該按照和欄按鈕圖標激活狀態下一樣的規範——實體填充，沒有其他的效果，放在一個半透明背景上。

動做（Actions）

動做菜單（Action Sheets ），用於從可執行的動做中選擇執行一個動做，要求App用戶選擇一個動做繼續，或者取消。

在豎屏時（以及在一些小屏幕橫屏上也是），動做菜單老是以一列按鈕滑動而出顯示在屏幕底部。在這種狀況下，一個動做菜單應該有一個取消按鈕來關閉此視圖，而不是隻能執行前面的動做。

當有足夠空間時（例如在iPad屏幕上），動做菜單視圖則換成一個浮動框（Popovers）。這時並不要求要有一個關閉按鈕，由於點擊任意外面的空白地方就能夠關閉了。

警告提醒（Alerts）

警告提醒用於通知用戶關鍵信息，以及能夠強制用戶作出一些動做選擇。

警告視圖總包含一個標題文本，能夠不限於一行（對於純信息警告如「OK」），以及不限一個或兩個按鈕（請求式的決定，如「發送」和「取消」）。

同時，你能夠添加一條信息文本，若是須要，能夠添加兩個輸入文本框，其中一個能夠是遮蓋的文本，用於輸入私密信息如密碼或PIN碼。

編輯菜單

在一個元素被選定時(文本，圖片及其餘)，編輯菜單容許用戶執行復制、粘貼、剪切等操做。雖然菜單上的選項是能夠自定義的，但菜單的外觀你是沒法設置的，除非你構建一個本身的自定義編輯菜單。

浮動框（Popover）

當一個特別動做要求用戶在程序進行的同時輸入多個信息時，浮動框（Popover）是個絕佳選擇。一個很好的例子就是，當選擇添加一個項目時，有好幾項屬性須要在項目被添加前設置好，這時，這些設置能夠在浮動框上完成。

在通常狀況下，浮動框上方會有一個相關的控件（如一個按鈕），當打開的時候浮動框的箭頭指向控件。浮動框背景也是輕微減小不透明度的毛玻璃模糊效果，就像iOS7以來的其餘大多數UI元素同樣。

浮動框是一個強大的臨時視圖，其能夠包含多種元件，例如能夠擁有本身的導航欄，表格視圖，地圖以及網頁視圖。當浮動框由於包含大量元素而擁有較大尺寸時，能夠在浮動框內滾動，從而到達視圖底部。

模態（Modals）

對於要求用戶執行多個指令或輸入多個信息的任務來講，模態視圖是一個十分有用的視圖。模態出如今全部元素的頂層，並且，當打開時，其區塊會與下面的其餘交互元素產生相互做用。

輸入模態常擁有：

– 一個描述任務的標題；
– 一個不保存、不執行其餘動做的關閉模態視圖按鈕；
– 一個保存或提交輸入的信息的按鈕；
以及各類對用戶在模態視圖上輸入的信息起做用的元素。

這是三種可用的模態視圖風格：

全屏（Full screen）：覆蓋整個屏幕。
頁表（Page sheet）：在豎屏時，模態視圖只覆蓋部分下面的內容，當前視圖留下一部分可視區域，並覆蓋一層半透明黑色背景。在橫屏時，頁表模態視圖和全屏模態視圖同樣。
表單（Form sheet）：在豎屏時，模態視圖在屏幕中間，周圍區域可見但覆蓋一層半透明黑色背景。當鍵盤顯示時，模態視圖的位置會自適應地改變。在橫屏時，表單模態視圖也是和全屏模態視圖同樣。

控件（Controls）

iOS爲全部你能想到的基本輸入類型提供了範圍很廣的控件。這些控件你會發現十分重要（由於常常會用到），完整的可用控件的列表，你得去iOS開發者資料庫裏查看。

按鈕（Buttons）

或許全部中最經常使用的控件就是這經典好用的按鈕了。從iOS7開始，默認按鈕設計就再也不看起來像個按鈕了，而更像是一個純文本連接。不過按鈕控件仍是具備高度的自定義性的，容許你自定義文本風格、投影以及顏色，甚至是一個按鈕都是能夠定製的。假如沒有文本標籤的話，全自定義背景都行。

記住，一個按鈕有多個狀態，每一個狀態需傳達相關視覺語言：默認（Default），高亮（Highlighted），選定（Selected），不可用（Disabled.）。

選擇器（Pickers）

選擇器用於從可用值列表中選定一個值。其等於網站上經常使用的下拉選框（選擇器也用於觸摸模式下的Safari瀏覽器）。選擇器的拓展版本是「日期選擇器」（Datepicker），可讓用戶滾動一個日期時間列表來選擇日、月份和時間。

（左邊：表格視圖裏的日期選擇器，右邊：代替鍵盤的選擇器。）

除了背景顏色外，選擇器控件的視覺風格、尺寸都不能調整。一般，選擇器在屏幕的底部。當鍵盤同時出現時，其可能出如今其餘位置。

分段控件（Segment Controls）

分段控件包含一系列分段（至少兩個），能夠用於篩選內容或爲整理的分類內容建立標籤。

（沒有Icon和有Icon的分段控件）

每一個分段能夠包含一個文本或一個圖標，但不能同時有文本和圖標。另外，也不推薦在一個分段控件裏混用分段類型（文本和圖標混合出現）。一個分段的寬度會基於分段的數量自動改變（即兩個分段：各佔總控件寬度50%，5個分段則各佔20%）。

滑塊（Sliders）

滑塊控件可讓用戶從一個容許範圍內滑動滑塊選擇一個特定的值。由於滑動十分流暢也無需其他步驟就能夠選擇一個值，因此推薦滑塊用於選擇一個估計值，而不是一個須要精確的數值。好比，滑塊控件能夠很好地設置音量，由於用戶能夠從音量上聽出區別，同時能夠看到滑塊上響和不響的區別，但若是是輸入一個數值來設置分貝值就十分不現實了。

（無Icon和有Icon的滑塊控件。）

能夠設置最小值和最大值的Icon，在顯示控件始端和末端顯示，讓用戶直觀地知道滑塊的用途。

步進器（Stepper）

步進器應用在用戶須要在一個容許範圍裏輸入一個精確值的狀況（例如，1至10）。一個步進器須要包含兩個分段按鈕，一個用於減小當前值，一個用於增長。

視覺上，步進器能夠高度自定義。