史詩級規(guī)范！全新Apple iOS設(shè)計(jì)規(guī)范指南
來源：極客頭條
iOS推出很多年，已經(jīng)升級到iOS9！現(xiàn)在Apple還推出了一款全新的字體蘋方（san francisco），3D Touch和iPad分屏多任務(wù)。在Xcode中，你會發(fā)現(xiàn)堆棧視圖(Stack Views)設(shè)計(jì)神器，它會讓您的工作更輕松。Apple比以往任何時候都更多建議使用自適應(yīng)布局，從而使您的設(shè)計(jì)成果輕松跨多設(shè)備。
自適應(yīng)布局和多任務(wù)
隨著越來越多設(shè)備的推出，要處理各種版本的分辨率，讓工作變的越繁瑣，因此適應(yīng)布局出現(xiàn)至關(guān)重要?，F(xiàn)在使用Sketch或Xcode之類的工具，可以讓你的設(shè)計(jì)變的更靈活。
下面動態(tài)圖是演示iPhone如何適應(yīng)iPad Pro的布局變化?？梢园l(fā)現(xiàn)是用戶界面功能擴(kuò)展，而不是單純比例放大。比如在對于較大的屏幕iPad和iPhone6 Plus，在橫向模式中，左邊導(dǎo)航將顯示，而不是選項(xiàng)卡欄。
簡單教程：如何調(diào)整界面在多分辨率設(shè)計(jì)。
蘋方字體San Francisco
隨著iOS9和酋長石（El Capitan）系統(tǒng)的發(fā)布，默認(rèn)字體改為蘋方，這是由Apple公司開發(fā)的。我建議您觀看視頻，了解它是如何影響iOS的設(shè)計(jì)。
蘋方字體Tracking
iOS會自動調(diào)整的蘋方字體大小tracking value，這確保了字體容易閱讀。在20pt以上，蘋方用戶界面正常顯示，否則使用蘋方UI文本。雖然這些tracking value只能在Photoshop中得到應(yīng)用，但這里有Sketch的轉(zhuǎn)換公式。
使用這個Sketch插件可以快速調(diào)整字符間距值。
3D Touch
在iOS9中有一個重要的新功能是3D Touch，人們可以快速訪問您的應(yīng)用程序的內(nèi)部和外部的選項(xiàng)。
Pt和Px
第一次推出iPhone時，這兩個單位都是一樣：1pt等于1px。然后當(dāng)視網(wǎng)膜屏到來，1pt成為2px。因此現(xiàn)在正確算法是iPhone4,5,6=@2x, iPhone6Plus=@3x。
iPhone分辨率
iPhone有4個主要的分辨率：320x480pt（iPhone4），320x568pt（iPhone5），375x667pt（iPhone6）和414x736pt（iPhone6Plus）。布局不縮放，但擴(kuò)大的基礎(chǔ)上的分辨率。例如，導(dǎo)航欄只調(diào)整寬度，但保持相同的高度。它里面的元素保持不變。
iPhone6Plus的橫向模式是唯一像iPad的iPhone。換句話說，左導(dǎo)航將會出現(xiàn)，更換標(biāo)簽欄的布局。
iPad分辨率
而iPad有兩個主要分辨率：768×1024pt（iPad），1024×1366pt（iPad Pro）
iPad 2的新功能：Slide Over、Split View。，Slide Over可以從側(cè)邊調(diào)用出另外一個應(yīng)用，同時在屏幕上展示。
Split View：一個屏幕，做兩件事！你終于可以在一個屏幕上同時打開兩個應(yīng)用，一邊處理表格一邊編輯文檔；一邊瀏覽網(wǎng)頁一邊刷朋友圈；一邊瀏覽照片一邊在圖翼網(wǎng)看設(shè)計(jì)教程……
APP圖標(biāo)
圖標(biāo)是用戶看到您的APP第一件事。它會出現(xiàn)在主屏幕上，App Store商店中, spotlight搜索和設(shè)置里。
iPhone不再支持@1x，所以你不必生成它。APP圖標(biāo)現(xiàn)在只需要使用：@2x、@3x。有3種類型：應(yīng)用程序圖標(biāo)，Spotlight搜索和設(shè)置。而iPad使用：@1x、@2x。
超橢圓
從iOS7開始，已經(jīng)從簡單的圓角轉(zhuǎn)變到一個超橢圓形。
圖標(biāo)網(wǎng)格
Apple使用黃金分割在它們的一些圖標(biāo)上。這讓圖標(biāo)保持良好的比例，同時確保了美感。雖然這是一個很好的規(guī)范，但它不是嚴(yán)格要求。甚至Apple在很多圖標(biāo)上也省略了它。
顏色
iOS的使用鮮艷的色彩襯托出按鍵。這些顏色傾向于在白色或黑色背景很好地工作。請記住，配色應(yīng)該簡潔為主，這樣感知力更強(qiáng)。粗略地說，只有10-20％的部分設(shè)計(jì)時應(yīng)該有顏色，不然太搶眼，容易忽視主要內(nèi)容。
iOS的經(jīng)常使用的中性色彩作為背景和菜單區(qū)域。在白色背景，使用黑色文字，使文本能夠舒適的閱讀。用淡藍(lán)色按鈕中讓操作功能脫穎而出。
按鈕和字體大小
一般的規(guī)范是按鈕用44pt、小文字用12pt、正文文本用17pt和標(biāo)題用20pt+。
間距和對齊方式
一般的規(guī)范最低要求8pt空白或邊距。這將有足夠留白空間，使得布局更容易掃描和文本更具可讀性。而且在此基礎(chǔ)上，UI元素應(yīng)對齊，文本應(yīng)該有相同的基線位置。
狀態(tài)欄
用戶依賴于狀態(tài)欄的重要信息，如信號，時間和電池。文本和圖標(biāo)可以是白色或黑色，但背景可以被設(shè)計(jì)成任何顏色，并與導(dǎo)航欄合并。
導(dǎo)航欄
導(dǎo)航欄是用于屏幕的快速信息。左邊部分可用于配置文件，菜單按鈕，而右邊的部分是一般用于動作按鈕，如添加，編輯，完成。請注意，如果您使用這些系統(tǒng)圖標(biāo)，您不需要為它們單獨(dú)設(shè)計(jì)。
就像狀態(tài)欄一樣，背景可以被定制為任何顏色，通常有一個微妙的模糊，以確保文本始終是可讀的。當(dāng)狀態(tài)欄出現(xiàn)時，兩個背景都被合并。
搜索欄
當(dāng)你有很多的內(nèi)容，使用搜索是明智的選擇。
工具欄
當(dāng)你需要更多的空間來放置你的動作按鈕和屏幕狀態(tài)，你會需要使用工具欄。
標(biāo)簽欄
標(biāo)簽欄是多屏之間的主導(dǎo)航條。如果你有幾個欄目，避免漢堡包菜單。通常是可見的菜單會增加使用，因?yàn)轱@眼就會贏得使用。此外，建議在你的圖標(biāo)旁邊添加文字，因?yàn)榇蠖鄶?shù)人不會立即識別符號，特別是當(dāng)他們不知道。
當(dāng)他們不處于時活躍，圖標(biāo)一般只是一個輪廓，而不是被填充。這樣，他們將受到較少關(guān)注。
表格界面
表格界面，用于列出內(nèi)容的一種很常見的用戶界面。大多數(shù)應(yīng)用程序使用表格界面的形式，這是因?yàn)樗谟邢薜母叨戎?，展現(xiàn)最多的內(nèi)容。
你可以使用一些預(yù)設(shè)樣式。
元件也可以被分層設(shè)計(jì)：上面是標(biāo)題，下面是描述。
列表界面
當(dāng)您需要設(shè)計(jì)列表時，幾乎可以按你想象的任何布局進(jìn)行設(shè)計(jì)。
你可以參考下面的設(shè)計(jì)布局，也可以自己構(gòu)思更有創(chuàng)意的！
提示
提示對話框是用于輸送關(guān)鍵信息和提示快速操作。提示應(yīng)保持最少文字，退出一定是明顯。
Activity對話框允許您使用iOS的功能，如Airdrop、收藏夾、書簽和應(yīng)用程序郵件、 Facebook，Twitter分享內(nèi)容（文本、圖片、鏈接）但不能自定義外觀和選項(xiàng)。
如果提供的信息并不短，你可以設(shè)計(jì)一個界面，通常是一個滑動，淡出，翻轉(zhuǎn)或動畫顯示。它應(yīng)該像提示框，必須容易取消，并保持盡可能短。
鍵盤
鍵盤是用來輸入文本信息，如搜索，聊天或登錄。它的高度可定制的，為網(wǎng)址，電子郵件，電話號碼，甚至表情。您可以選擇鮮明和暗的主題，以及命名操作按鈕名（默認(rèn)值這返回）。
這里有一個優(yōu)秀的Sketch輸入法套件，值得下載。
選擇器
當(dāng)你有多個選擇參數(shù)，您可以使用選擇器控制。像日期，可以控制3個字段。
分段控制
滑塊
滑塊雖然不太精確，但對于快速設(shè)置，如聲音，亮度和視頻進(jìn)展非常有用的交互體驗(yàn)。
進(jìn)度
進(jìn)度條是一個活動狀態(tài)指標(biāo)。例如，您可以使用顯示網(wǎng)頁加載進(jìn)度。注意高度可定制。
開關(guān)
使用此按鈕快速切換開與關(guān)。
Stepper控件
它雖然比滑塊慢但更精確，Stepper允許用戶增加或減少一個值。邊框和背景是可定制的。
iOS圖標(biāo)
這些都是iOS原生圖標(biāo)。因?yàn)樗鼈兂Ｓ?，所以用戶會立即識別出它們的要表達(dá)意思。如果把它們用作其他可能會混淆你的用戶，所以不要亂用喔。
當(dāng)您設(shè)計(jì)圖標(biāo)時，使用眾所周知的符號是非常 當(dāng)您設(shè)計(jì)圖標(biāo)時，使用眾所周知的符號是非常重要的，不然用戶是無法第一時間識別圖標(biāo)要表達(dá)的意思。因此，我強(qiáng)烈建議在圖片的旁邊添加文字。
