現代交互設計師 iPhone 設計規範指南

編者按：iPhone 設計規範是每一個設計師都應該學會的基礎知識，不管你是新手老手，看完本文必定能完全理解iPhone 設計規範！

1、iPhone的歷史

次蘋果發佈會 UI設計師多是最睡不着覺的人啦。每次發佈會蘋果推出全新 iPhone 時，咱們在 iPhone 平臺上的 APP應用程序必須跟隨 iPhone 的尺寸、規範等特性調整設計稿。也就是說，幾乎每次蘋果發佈會都是UI設計師加班的通知書！這不，2018年9月13日凌晨，蘋果在 Apple Park 總部裏的喬布斯劇院舉行了2018蘋果秋季新品發佈會。此次蘋果發佈了全新的 iPhone Xs、iPhone Xs Max，iPhone Xr 三款手機。噢，不要忘記咱們也不能怠慢還在服役的 iPhone X、iPhone Plus、iPhone6/7/八、iPhone SE 等蘋果手機。做爲一個移動端 UI設計師，您必須對蘋果全部生產過和現役的 iPhone 有所瞭解。

1. 起源

談到 iPhone 咱們必須談談史蒂夫·喬布斯（Steve Jobs）。儘管喬布斯去世多年，可是他的理念仍然是現代智能手機設計的原則。喬布斯不只從新定義了智能手機，也定義了移動端應用程序。這位被領養的猶太男孩在很早就對我的電腦產生了興趣。在遊歷了印度和日本以後，他進入了大學校園。在校園裏除了無線電和嬉皮士文化，他認爲大學課程多半是無聊的。但他曾特地跑去選修了一門課程：字體設計。他所在大學的字體設計課是全美最著名的，在那個課堂上喬布斯學習到了網格設計、襯線體與無襯線體、字體的氣質等設計知識。固然在前面講過的具備搖滾精神的字體Helvetica 也深深吸引了喬布斯。後來喬布斯選擇大學肄業並在自家車庫創立了蘋果公司，自此「車庫」也成了創業者最喜好的地標。蘋果公司的第一代我的電腦內置了很是出色的用戶圖形界面系統（即GUI），而且內置了 Helvetica 等漂亮的字體。可是這並非喬布斯事業的終點，在經歷了蘋果公司的權利鬥爭後，成熟的喬布斯再次登上發佈會的舞臺，推出了真正能改變世界的產品——iPhone。通常產品名都會用名字加上產品的類型命名，好比百事可樂、英雄鋼筆等。而 iPhone 彷佛自己就是一個類別。在那次發佈會上，喬布斯指責當時的功能手機太「愚蠢」：當時的功能手機性能不好，而且屏幕很小，實體鍵盤佔用了很大的空間。以後，他拿出了一部像外星科技的產品：iPhone。自此，蘋果從新發明了手機。喬布斯如此強調用戶界面和交互設計的重要性，這種理念改變了當時和如今的設計思惟。喬布斯身後，移動端的格局在改變，接任喬布斯指揮棒的蒂姆·庫克和首席設計官喬納森·伊夫（Sir Jonathan Paul Ive）也陸續更新着蘋果手機的產品線，延續着這些偉大的產品。

△ 年輕的喬布斯

1. 初代iPhone

相關產品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。

iPhone 初代產品在2007年1月9日由史蒂夫·喬布斯在蘋果發佈會上正式發佈。初代的 iPhone 產品的共同特色是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：咱們所說的手機尺寸都是測量屏幕的對角線得出的）。iPhone 沒有實體鍵而總體是屏幕的設計，在當時彷彿是外星科技降臨通常使人驚豔。爲了讓大衆習慣直接在手機上點圖標（在此以前人機互動都是間接輸入的：好比實體鍵盤、鼠標、觸控筆等），喬布斯發佈了革命性的操做系統iOS，手機的全部圖標都是圓角：這樣能夠避免用戶認爲會刺到手指。全部圖標和界面所有是擬物設計，這樣能夠更好地讓用戶理解哪些是能夠點擊操做的。按鈕在手機上呈現的大小都是7mm左右，這是由於人類手指點擊區域大概是7mm – 9mm。系統充分地應用了多點觸控的功能，你不只僅能夠點手機裏的按鈕，還能夠進行長按、滑動、捏等手勢操做。這些用戶體驗和人性化的設計在當時具備劃時代的意義。隨後，第二代產品 iPhone 3G、第三代產品 iPhone3GS 前後由喬布斯發佈。這種能聽歌、能打電話、能上網的手機真是太炸了！並且你能夠在應用商店 App store 中下載第三方的應用程序，海量的第三方程序可謂是大千世界了。這塊3.5英寸屏的手機截圖出來後的實際分辨率是480x320px，因此若是你在當時作 UI設計的話，那麼作 APP界面建圖的尺寸就應該是480x320px。

△ 蘋果初代產品 (2007)

1. iPhone 4

相關產品：iPhone 4（四代）、iPhone 4s（五代）。

iPhone 4於2010年6月8日發佈。iPhone 4延續了 iPhone一代的多點觸摸（Multi-touch）屏界面，並首次加入視網膜屏幕、前置攝像頭、陀螺儀、後置閃光燈，相機像素提升至500萬。對咱們設計師最重要的就是加上了視網膜屏Retina。Retina 是蘋果提出的標準，它的含義就是在應用場景的視距內讓人沒法看清單個像素。咱們都知道若是你貼的夠近，通常的屏幕上都會出現一格一格的像素矩陣。屏幕是由這些矩陣組成的。這種屏幕的問題就是稍微近一些咱們就能看到那些網格和矩陣。若是咱們但願用戶獲得最好的體驗，天然是讓用戶看不到格子，那怎麼辦？答案就是：加大屏幕的密度。若是屏幕的密度到達一個指定的水平（固然也要取決於用戶的視距，即用戶與屏幕一般離多遠），那麼用戶的眼睛就沒法分辨出細小的像素顆粒了。這種屏幕就被稱爲 Retina屏，也叫視網膜屏。這是用戶體驗的巨大進步，可是也是 UI設計師的噩夢。原先的設計稿通通須要放大才能夠在 iPhone4 裏顯示得完美：好比原來咱們一個界面的尺寸是480x320px，如今由於屏幕密度增長了一倍，咱們就須要設計640x960px纔夠用。在電腦上看這個尺寸要比手機大兩倍！（固然啦，那時的電腦屏幕一般不是Retina屏）。並且3GS並無徹底被淘汰，那麼如何讓一個 APP 適配兩個不一樣尺寸的手機呢？因而每一個 APP 內預裝了兩套切圖，一套480x320px尺寸，也就是一倍圖（@1x）；一套960x640px尺寸，也就是二倍圖（@2x）。這兩套圖像資源的命名徹底同樣，只是二倍圖結尾須要加上@2x標記它是高清尺寸，好比 home_icon@2x.png。

△ iPhone 4代產品 （2010）

邏輯像素和物理像素

邏輯像素（logic point）：邏輯像素的單位是 PT，它是按照內容的尺寸計算的單位。好比 iPhone 4的邏輯像素是480x320pt。可是因爲每一個邏輯的點由於視網膜屏密度增長了一倍，即1pt=2px，那麼其實 iPhone 4的物理像素是960x640px。iOS 開發工程師和使用 Sketch 和 AdobeXD 軟件設計界面的設計師使用的單位都是PT。

物理像素的單位就是咱們常說的 pixel，簡寫成 PX。它是咱們在 Photoshop 和切圖中使用的單位，屏幕設計中最小的單位就是1px不可再分割。使用 Photoshop 設計移動端界面和網站的設計師使用的單位是 PX。在如下的文章中，若是您使 用Photoshop 設計界面，那麼只須要記住全部 px 單位的數值和支持 Photoshop 的工具，若是使用 Sketch 或 Adobe XD 設計界面，那麼只須要記住全部 pt 單位的數值和對應的工具便可。

△ 邏輯像素和實際像素計算方式不一樣

PPI

PPI（pixels per inch）指的是屏幕分辨率的單位，表示的是每英寸顯示的像素密度。屏幕的 PPI 值越高，那麼這個屏幕每英寸能容納的像素顆粒也就越多，那這個產品的畫面的細節度也就越豐富。PPI 值大於300通常咱們就沒法用肉眼察覺出屏幕上的「馬賽克」格子了。可是若是屏幕很大，那麼須要呈現視網膜屏的 PPI 值也須要更大，因此 iPhone Plus 系列的 PPI 值比 iPhone6/7/8要大。PPI 在咱們設計的工做中其實關係不大，但理解它對於幫助咱們理解爲何 iPhone4比 iPhone3GS實際像素大一倍有幫助。

△ PPI的計算公式

1. iPhone 5

相關產品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）

iPhone 5於2012年9月13日正式發佈。iPhone5在設計上帶來了不少爭議，由於 iPhone5沒有采用喬布斯認爲人類最合適的手機尺寸3.5英寸屏，而是用了4英寸的屏幕。寬度沒變而高度加長了。這樣作的緣由是市場上越大的手機越受歡迎。當時設計師也幾近崩潰，由於又要搞適配了。原來960x640px的尺寸變爲了1136x640px，可是這個變化其實不大，就是高了點兒。因而@2x高清圖的設計稿就變成了640x1136px。由於 iPhone4的手機看着也就是長了點兒，滑動不就完了嘛。除了閃屏這樣的界面須要單獨作 iPhone四、iPhone五、3GS尺寸以外，其餘界面仍然維持兩套設計稿便可。

△ iPhone 5 （2012）

1. iPhone 6/7/8 和iPhone Plus

相關產品：iPhone6和iPhone6 Plus（八代）、iPhone 6s和iPhone 6s Plus（九代）、iPhone7和iPhone7 Plus（十代）、iPhone8和iPhone8 Plus（十一代）。

這個產品迭代週期值得你們留意，從 iPhone6到 iPhone8這段時間蘋果新手機的物理像素都是750x1334px。而全部 Plus手機的物理像素都是1242x2208px。若是按照邏輯像素來計算，那麼 iPhone6/7/8的邏輯像素就是375 x 667 pt（就是750×1334除以2）；而 iPhone Plus 的邏輯像素就是414 x 736 pt（就是1242×2208除以3，由於這個屏幕太大了視距不一樣因此屏幕密度更高）。歷史到這個時候，原來的手機所有被淘汰了。也就是說 iPhone6/7/8成爲了咱們的設計標準，它的切圖就是@2x，iPhone Plus（1242×2208）使用@3x。今後沒有@1x倍圖了，只存在一個假想的概念。

△ iPhone 6/7/8 (自2014)

△ iPhone Plus (自2014)

1. iPhone X

相關產品：iPhone X（十一代）。

這四款手機所有是蘋果的全面屏手機。全面屏並非新概念了，由於從 iPhone 初代產品開始，手機業內就在構思如何把手機作成所有都是屏幕區域的技術了。可是這個技術有不少難題，好比前置攝像頭和聽筒怎麼處理。那麼蘋果採用的方案是「齊劉海」，把四周處理成圓角的方式。IPhone X 和後續三款全面屏咱們設計師須要注意的就是齊劉海。由於須要規避攝像頭和麥克風聽筒，因此導航欄比其餘 iPhone 系列產品要高；而底部 Tab欄由於最下方有圓角一樣比其餘 iPhone 系列要高。並且這兩個邊界是不該該放置任何操做功能的。也就是說只有看的份兒。

iPhone X 的物理像素是1125 x 2436 px，而邏輯像素是375 x 812 pt。也就是說若是你使用 Sketch 或者 Adobe XD 等工具設計界面的話，iPhone X 的寬度和iPhone 6/7/8是相同的；只是高了一些。那麼若是須要出一套 iPhone X 效果圖只須要把頭和尾巴替換成新版便可。而若是你用 Photoshop 設計界面的話，寬度變化仍是比較大的。須要作放大處理而後單獨調整那些亂了的尺寸。

△ iPhone X(2017)

1. iPhone XS Max

相關產品：iPhone XS、iPhone XS Max、iPhone XR（十二代）。

這三款產品的像素分辨率聽上去會比較眼暈：

iPhone XS Max：1242 x 2688 px
iPhone XS：1125 x 2436 px
iPhone XR：828 x 1792 px
可是若是咱們用點的單位看就會獲得：

iPhone XS Max：414 x 896 pt （iPhone Plus分辨率寬度）
iPhone XS：375×812 pt （iPhone 6/7/8分辨率寬度）
iPhone XR：414 x 896 pt （iPhone Plus分辨率寬度）
因此其實今年發佈的 iPhone 都是比較友好的，若是使用矢量界面工具那麼只須要調整設計稿頭和尾巴便可，若是使用 Photoshop 的設計師須要放大縮小設計稿而後調整頭和尾巴能夠獲得新版設計稿。而切圖其實和以前沒有變化，無論用什麼工具設計仍是得出兩套切圖：@2x（750x1334px）、@3x（1242x2208px）便可。

△ iPhone XS Max (2018)

以iPhone6/7/8爲基準設計

在開始比賽以前，因爲 iPhone 六、iPhone 6S、iPhone七、iPhone7S、iPhone8屏幕和分辨率都是一致的750X1334px，因此咱們能夠稱它們爲 iPhone6/7/8。而 iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和分辨率都是一致的1242×2208，因此咱們能夠稱它們爲 iPhone Plus。而 iPhone XS、iPhone X屏幕和分辨率都是一致的1125×2436，因此咱們能夠稱它們爲 iPhoneX。那這場比賽的贏家毫無疑問是價格美麗的 iPhone6/7/8 獲勝啦。那麼咱們作界面設計時須要按照 iPhone6/7/8爲基準設計。若是使用 Photoshop 就建750x1334px尺寸的畫布，若是是使用 Sketch 或 Adobe XD 等工具就創建375x667pt。固然若是要設計首頁之類的界面，它的界面很長你能夠設計一個長的設計稿，好比750x8000px。

△ 手機型號與像素對應圖

2、HIG設計指南
上文說咱們創建界面能夠根據750x1334px或375x667pt來創建畫布，可是具體狀態欄的高度、導航欄的高度、tab欄的高度是多少？那些 UIKit組件裏的東西去哪裏找呢？蘋果已經爲咱們準備好了多個格式的規範了：

資源下載地址：https://developer.apple.com/d...

1. 設計方式

在 iPhone6/7/8存量仍然很大的狀況下，咱們作設計稿仍然須要以 iPhone6/7/8爲尺寸來建圖。從蘋果官網下載好 UIKit，上面有咱們須要的一切元素。這些元素有 PSD、Sketch 以及 XD版本，無論用什麼設計軟件都可找到對應版本。打開以後你會發現蘋果已經將咱們所須要的規範元素準備好了。若是你須要一些彈窗或者控件，那麼就在 UI Elements 裏找。若是須要界面的尺寸模板，就在 Design Templates 找。全部文件都有兩份，結尾帶有-iPhoneX 的是爲 iPhone X系列設計的模板。沒有標識的是爲 iPhone6/7/8設計的模板。

△ UI Elements 文件夾中的源文件

△ Design Templates中的源文件

1. 狀態欄和導航欄

狀態欄（Status Bars）就是 iPhone 最上方用來顯示時間、運營商信息、電池電量的那個很窄的區域。導航欄（Navigation Bars）就是狀態欄之下的區域，通常來講導航欄中間是頁面標題，左右是放置功能圖標的區域。

在 iPhone6/7/8設計中，狀態欄的高度爲20pt（40px）。導航欄的高度是44pt（88px）。這兩個區域在 iOS7代以後就進行了一體化設計。因此它們加起來的高度是64pt（128px）。

在 iPhoneX 設計中，狀態欄的高度爲40pt（132px）。導航欄的高度也是44pt（132px）。這兩個區域一樣要進行一體化設計。因此它們加起來的高度是84pt（264px）。這裏注意一下，由於 iPhone X 的 PPI值爲458，因此並非如 iPhone6/7/8同樣1pt=2px換算。

△ iPhone6/7/8和iPhone X導航區域的差異

△ 部分優秀APP的導航區域設計

1. 大標題導航欄

在最新的蘋果設計中導航出現了一種新形式：大標題。出現這種形式就是爲了減小視覺噪音，讓內容更加突出。很明顯大標題的設計很像報紙的版式設計，在第一眼咱們就會明白頁面的主題。大標題導航欄的高度通常爲116pt（232px）：這包括了20pt（40px）狀態欄的高度，同時也能放得下34pt（68px）的大標題和輔助信息（如返回等圖標）。可是注意一下，大標題並不該該像傳統導航同樣常駐在頁面之上，由於它太佔空間了。因此在滑動頁面時大標題會變成正常導航欄的64pt（128px）的高度。固然若是設計稿爲 iPhone X 那麼數值須要另外換算。

△ 大標題的尺寸

1. 導航欄圖標

圖標做爲文字的補充，在移動端中應用很是普遍。在導航欄區域上的功能諸如搜索、添加、更多、返回等均須要用圖標來表達。說明：@2x和@3x在邏輯像素單位是同樣的，若是您使用如 Sketch、Adobe XD 等矢量工具設計，能夠參照邏輯像素數值設計便可。可是若是您用 Photoshop 工具以 iPhone6/7/8尺寸進行設計，就需按照@2x下的 px 單位數值設計。

△ 導航欄圖標尺寸規範

1. 標籤欄 （Tab Bars）

Tab 就是點擊的意思，Tab欄（也叫標籤欄）指的是 APP 底部的區域，如微信底部常駐有聊天、通信錄、發現、個人四個圖標。iOS 規範中 Tab欄通常有五個、四個、三個圖標的形式。也就是把寬度平分爲5、4、三份。iPhone6/7/8設計中，標籤欄的高度爲49pt（98px）。Tab欄的操做是最經常使用的，由於手指最方便點擊並且這個欄是常駐在頁面之上的。因此 Tab欄的圖標相當重要，由於不少用戶可能由於看不懂圖標而找不到重要功能的入口，一般咱們會在 Tab欄圖標之下加上11pt（22px）的註釋文字，這個註釋文字通常來講都是很是淺的淺灰色。

△ 標籤欄的尺寸

1. 標籤欄圖標

咱們在標籤欄上的圖標通常來講30pt（60px）大小左右，蘋果給出了四種不一樣形狀標籤欄圖標的尺寸參考供你們設計時參考。其意義是讓不一樣外形的圖標看上去是差很少大的，保證圖標的平衡。標籤欄圖標的選中態應該是一個彩色，來區別於非選中狀態。

△ 真實設計中的標籤欄

△ 標籤欄圖標設計規範

△ 標籤欄圖標應該儘可能使用清晰地填充風格

1. 工具欄 （ToolBars）

咱們在蘋果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當前任務相關的操做和按鈕，在滑動時能夠收起。工具欄同 Tab欄同樣都是位於底部，可是高度略窄，它的高度是44pt（88px）。

1. 閃屏資源

因爲閃屏是一張完整的靜態滿屏圖片，而不是諸如其餘頁面同樣是由切圖和文本拼成的，因此閃屏的適配更簡單粗暴：咱們須要提供不一樣尺寸的閃屏效果。閃屏資源就是滿尺寸的一張 png，上端不須要狀態欄裏的信息，程序會在開發完畢時自動在閃屏中補上狀態欄裏的信息。咱們須要提供的閃屏尺寸有：

△ 咱們須要提供的閃屏尺寸 一共6張

1. 安全距離

做爲 iPhone 全面屏系列手機，齊劉海無疑是一個特徵。可是全面屏給咱們帶來了使用上的問題：上下左右是圓角、頂部齊劉海使屏幕凹下一塊。因此在帶有圓角和齊劉海的紅色標註區域不該該放置任何功能，僅可在上端放置狀態欄，底部圓角區域留白。咱們界面豎屏使用時左右臨近手機邊緣的區域不建議聽任何操做，應留出必定的邊距（Margin）。這個邊距是多少呢？沒有明確嚴格的規定，可是通常的 APP 會留出16pt-24pt不等的邊距防止用戶在屏幕邊緣很差點擊。不過內容展示卻能夠呈如今邊距裏。若是咱們橫屏使用手機時，左右一樣很差點對吧？橫屏同時還有使人鬧心的「齊劉海」，因此一樣左右需留出必定的邊距來。因此咱們就獲得一個安全距離的矩形，內容能夠完整地呈如今這個安全距離內。

△ iPhone X系列因爲全面屏上下出現不可操做區域

1. 色彩

其實在 iPhone 上顯示的色域要比咱們做圖時的 RGB 色域要廣。因此在 iPhone 上設計怎樣的顏色均可以。只要符合產品氣質而且在色彩心理學理論上思考，用什麼顏色是設計師的自由。官方建議的系統色彩以下：

△ iPhone的系統色

1. 字體

iOS 中英文使用的是 San Francisco（SF）字體。（下載地址：https://developer.apple.com/f...），中文使用的是蘋方黑體。安裝好之後你會發現中文蘋方的字族有很多可供選擇的粗細，那麼咱們設計界面時須要根據信息的邏輯權重分配粗細：標題應該較粗，而說明字體應該較細而且能夠設計成灰色。其實字體的設計最重要的考量就是信息層級。蘋果認爲 APP 的字體信息層級有：大標題（Large Title）、標題一（Title 1）、標題二（Title 2）、標題三（Title 3）、頭條（Headline）、正文（Body）、標註（Callout）、副標題（Subhead）、註解（Footnote）、註釋一（Caption 1）、註釋二（Caption 2）這幾種。

△ HIG對APP的字體建議（基於@2x）

注意一下，以上 HIG 的建議所有是針對英文SF字體而言的，中文字體須要咱們靈活運用，以最終呈現效果爲基準調整。在設計具體界面時咱們必定要以用戶的使用情景來考慮，把設計稿導入手機去思考行高與字體大小是不是可讀的。10pt（20px）是手機上顯示的最小字體，最大的應該是目前的大標題字體了，達到了34pt（68px）。

1. 啓動圖標

在設計模板尚未現在這麼發達時，設計師須要設計啓動圖標（1024x1024px）以後按照程序員的要求切出幾十個不一樣尺寸的圖標。好比，在手機中@3x狀況下桌面圖標尺寸爲180x180px，在@2x狀況下爲120x120px；在應用商店圖標須要使用的尺寸是1024x1024px；這個工做太煩人了，好在如今咱們只須要專一在啓動圖標設計自己上了。在蘋果給咱們的這套資源中，有 Template-AppIcons-iOS 這個文件。打開這個文件，用咱們本身設計的啓動圖標替換掉智能對象裏的內容，你會發現全部尺寸的圖標都變成了咱們的圖標。而後咱們把背景隱藏，切出這些圖標便可。圖標設計建議使用 AI 等矢量軟件，而後使用規範切出圖像資源。

△ Template-AppIcons-iOS

1. 控件

控件包括：輸入框、按鈕、滑桿、頁卡、開關等，在設計模板中已經所有列出。這裏格外說明一下，爲了讓設計更符合總體產品品牌調性，這些控件均可以作成自定義的設計樣式。可是會增長工做量和切圖資源，因此通常咱們在諸如設置界面這些無需太體現設計感的頁面中都使用系統默認控件，而在一些品牌感須要強調的頁面或產品（諸如白噪音產品、遊戲等）則會使用自定義的樣式。若是咱們想本身設計控件，那麼注意兩件事：第一，點擊區域基本符合44pt（88px）原則，也就是在手機上大小大概是7mm-9mm，適合手指點擊。第二，要設計操做的不一樣狀態，不要只設計一種狀態。

△ 默認控件

△ 自定控件和默認控件

1. 控件中無處不在的44pt（88px）

以前咱們介紹過，人手指點擊區域爲7mm – 9mm，在@2x中就是44pt（88px）。蘋果的導航條、列表、工具欄都充滿了44pt（88px）這個神祕數字。咱們在設計時必定也要考慮到手指的點擊區域。

△ 無處不見的44pt（88px）

1. 鍵盤

在設計模板中您也能夠找到鍵盤的設計。這裏須要提醒的是，不少朋友作界面設計時不考慮輸入時鍵盤會遮擋到的空間，若是考慮到鍵盤彈起遮擋住的內容，那麼咱們的一些界面中的輸入框和信息可能都須要上移了。固然也不是說可能被鍵盤遮擋的地方不能夠防止任何內容，也有一種方式就是當輸入一個表單時，頁面會垂直定位到當前輸入的位置。

△ 鍵盤高度

1. iTunes 上傳截圖

在程序上傳 APP STORE 時咱們須要提供多張 APP 截圖，供用戶瞭解 APP 的功能。不少設計師朋友不太清楚這個尺寸，這裏咱們須要提供1242 x 2688px和1125 x 2436px兩套截圖。有時咱們也會在這個尺寸上作一些設計，讓用戶在 APP STORE 打開 APP 介紹時得到最好的體驗。

△ ITunes上傳用截圖

3、工做流程

1. 前期調研階段

在咱們設計界面以前，咱們必須作用戶研究來了解產品的調性，好比用戶研究手段中的用戶畫像、用戶調研、用戶使用場景分析、設計競品分析等方法。無論工做再忙也建議你們作這些工做，他們對咱們深刻了解產品大有裨益。

1. 原型圖階段

APP產品設計首先須要構建出原型圖，以後再開始視覺設計。這個工做有些公司是由產品經理負責的，也有交互設計師負責的，還有的公司由於人手較少，也會出現由 UI設計師來負責的狀況。就算有產品經理或其餘職能人員來完成原型圖，那設計師也須要和產品經理等人員溝通需求和探討原型圖，並非產品經理向設計師下發需求。設計師要站在視覺和交互的角度提出本身建設性的意見，而不是簡單等原型圖完成後照着上色而已。關於原型圖的工具，咱們不只僅能夠用 Axure RP 設計原型圖，也可使用像墨刀、Adobe XD 等新工具來完成原型圖。

△ 構建APP原型圖（工具：Adobe XD ）

1. 視覺稿階段

視覺稿階段要根據原型圖肯定的內容和大致版式完成 APP 的界面設計。可是這裏請你們注意一下：目前業界主要是以 Sketch、Adobe XD、Photoshop 這三個軟件來完成 APP 的界面設計的。Sketch 和 Adobe XD 都是以邏輯像素的單位（PT）來設計，而後導出圖像的時候再進行放大兩倍三倍來切圖。這樣作的好處是不用在設計的時候當心翼翼地使用偶數了。而 Photoshop 因爲主要是處理圖像而非矢量圖形的軟件，因此在設計移動端界面時若是作成一倍的話切圖會變得很虛，因此要基於2倍圖來進行界面設計。好比若是咱們以 iPhone6/7/8的界面來進行設計，那麼在 Sketch 和 Adobe XD 中咱們創建的畫布就是375x667pt，在 Photoshop 中則是750x1334px。

△ 視覺稿設計階段（工具：Adobe XD）

△ 視覺稿設計階段（工具：Adobe Photoshop）

1. iPhone6/7/8尺寸

在 iPhone6/7/8尺寸下，狀態欄高度20pt（40px）、導航欄44pt（88px）、Tab欄49pt（98px）、導航標題字號建議17pt（34px）、導航欄圖標建議22pt（44px）、Tab欄圖標建議30pt（60px）、Tab欄圖標註釋文字11pt（22px）、左右安全距離建議12pt（24px）。字號從10pt（20px）到34pt（68px）都可，要視具體狀況決定。

△ 在iPhone6/7/8尺寸下的設計尺寸

1. 實時預覽你的設計稿

咱們在 Sketch、Adobe XD、Photoshop 等軟件中設計界面時有一個問題：電腦上的效果總和手機上呈現的效果不一樣。這是因爲尺寸和觀察方式決定的，因此最好的方式是咱們實時地查看設計稿在手機上的呈現效果。如下 APP 經過數據線或 wifi 鏈接電腦後，便可及時在手機中看到尚未保存的設計稿呈如今手機中的樣子。

△ Design Mirror：可實時預覽Photoshop、XD等設計稿

△ Adobe XD：可實時預覽你的XD畫板

△ Sketch Mirror：可實時預覽你的Sketch畫板

1. iPhoneX設計效果圖

雖然程序員對於iPhoneX等全面屏手機的適配只須要設計師提供切圖便可，但不少設計師比較青睞 iPhone X 和最新 XR和 XSM等的設計效果，也比較願意把設計稿改爲 iPhoneX 的設計圖放到做品集或者在彙報時展現。那麼咱們應該怎麼作呢？若是設計稿須要調整爲 iPhone X 的顯示效果，能夠下載 iOS 12設計源文件，把界面頭和尾替換成 iPhoneX專用頭尾——專用頭尾在劉海和圓角處作了留白。Sketch 和 XD 都是用一倍圖設計因此不涉及修改尺寸，改頭尾便可。而 PS 比較複雜一點：須要先等比例變大整個設計稿，再把寬度改成1125寬度自適應便可。PS 變大會虛還得一個一個調一下，而後再改頭尾。

△ 替換導航區域和Tab欄區域，便可獲得iPhoneX設計效果

1. 視覺規範

若是咱們設計完了五六個主要界面，那麼如今作什麼呢？APP 設計一套視覺規範是很是有必要的，有了視覺規範咱們就能夠把控總體的設計和語言。通常來講，一套 APP 應該有3-5種主題色和輔助色；5-10種不一樣變化的字體樣式。這些若是沒有落實到一套規範中，那麼很容易跑偏。一套移動端應用的視覺規範應該包括：

主色/輔色/色彩規範：規定 APP 所能使用的色彩種類；
文字顏色/大小規範：規定 APP 主要使用文字的大小、顏色、應用場景等；
ICON規範：規定 APP 的 icon設計規範；
應用圖標規範：規定 APP 的應用圖標使用規範；
按鈕和交互態規範：規定 APP 內全部按鈕和交互態的樣式；
間距規範：規定 APP 內全部間距的尺寸。

△ 設計規範的重要性

△ 設計規範中的色彩規範

設計規範的類型能夠是 png 或者多個頁面組成的 pdf文件。其餘設計師打開咱們制定的設計規範，能夠清晰地找到當前項目適合使用的元素和字體大小、間距等。這樣儘管是多人協同工做也能夠保證項目設計風格的一致性。

1. 切圖

有了大小各異的 iPhone 尺寸，若是程序只有一套切圖，那麼必定會形成有的手機顯示不好。因此咱們要在程序裏放置多套切圖，而後讓程序判斷「主人」的手機是什麼型號，顯示不一樣的切圖。這樣纔可以完美地呈現給用戶最好的體驗。切圖的方法有不少種。Sketch 和 Adobe XD 能夠直接導出。Phtoshop 不具有這個功能，可是咱們可使用 cutterman、藍湖等插件導出切圖。無論是自帶功能仍是插件，導出切圖均可以導出@2x和@3x圖，而設計稿只須要 iPhone6/7/8一套便可。

△ 某項目中的切圖文件

1. Adobe XD切圖功能

在 Adobe XD 中將須要切出的元素在圖層面板（Ctrl + Y）點擊添加批量導出標記記錄；而後點擊 菜單 > 導出 > 所選畫板 > 用於iOS > 導出全部畫板便可。

△ Adobe XD自帶切圖功能

1. 使用Cutterman協助Photoshop切圖

在 Cutterman 官網下載 PS插件後，點擊窗口 > 擴展功能 > Cutterman 調出面板；而後選擇 iOS 並高亮選中@3X和@2X；在圖層面板裏選中須要切圖的元素，點擊「導出選中圖層」便可。

△ Photoshop中的Cutterman 插件

1. 使用藍湖切圖

在藍湖平臺能夠下載 Sketch、Adobe XD 或 Photoshop 對應的插件。而後在不一樣設計軟件插件中將設計稿上傳到藍湖（PS須要用插件標記須要切出的元素），而後在藍湖網頁版點擊切圖按鈕，選擇視網膜@2x和高清視網膜@3x，再點擊「下載該頁所有切圖」便可。

△ 在藍湖平臺導出切圖

1. 切圖命名規範

切圖最後須要命名成規範的格式，這樣方便程序員查找。切圖命名的格式建議全英文，若是你們英文很差須要想辦法提高一點簡單的詞彙量。藉由上述工具切圖後，須要整理切圖命名，或在切圖以前對圖層命名亦可。如下是切圖元素的中英文對照：

△ 切圖命名對照表

而後咱們要按照「功能_類型_名稱_狀態@倍數」來命名每一個切圖，好比咱們導航條上有一個搜索圖標，那麼它的名稱就是：navi_icon_search_default@2x.png（導航_圖標_搜索_正常@2x.png）

1. iOS開發語言

做爲 iOS 開發工程師，最重要的三個工具是：Obiective-C、Swift、UIKit 框架。Obiective-C 是目前最有效率的語言；而 Swift 開發很是高效。通常 iOS工程師會在這兩個語言中選擇一種做爲開發工具。UIKit 是蘋果系統自帶的一套框架，這個框架裏有設置按鈕、滑竿、狀態欄、電池電量、鍵盤等接口可供調用。因此咱們看到不少第三方 APP 的界面中，有許多控件和蘋果自帶程序是一致的，這就是 UIKit 的功勞。

△ 開發視角 By @alvaroreyes

瞭解開發工程師的語言和工具對咱們作設計也格外有幫助，咱們會知道哪些效果能作，哪些效果不能作，哪些效果能作很差作等等。我找了你們關注的九個問題請教了 iOS資深開發工程師程威：

△ 和iOS工程師溝通

溝通完是否是學到了很多？咱們明白了 iOS工程師工做的機制後在設計界面時就能夠作到心中有數了。在平時工做中咱們也應該多和開發小哥哥聊聊，學習一下他們實現的方式，以便咱們的設計可以更好地落地。

1. 標註

切圖後程序員獲得了什麼？一大堆碎片。把這些碎片從新用 OC 或者 Swift 構建回咱們設計的界面並無想的那麼簡單。因此開發工程師可能會老是在思考構架層面的問題，而忽視了視覺還原。而且因爲 iOS 的開發人員不會使用設計軟件，因此很容易出現好比14pt或者28px的文字，實現後是16pt或者32px。那就亂了套了不是，那怎麼辦呢？咱們能夠經過一些標註軟件把圖標之間的位置、字體的高度、字體的大小和色彩進行標註，讓程序員輕鬆省力地還原咱們的設計稿。

藍湖平臺自動標註功能

將 Sketch 和 Adobe XD、Photoshop 的設計稿上傳至藍湖後，在藍湖平臺每一個頁面左側有一個相似分享的圖標，點擊會獲取一個網址，這個網址就是系統生成的自動標註。它會自動識別設計稿中字體大小和間距等，甚至有代碼參考。

△ 藍湖自動標註工具

使用Px像素大廚標註

像素大廚一樣提供了自動標註、手動標註兩種標註方法。自動標註須要上傳設計稿，手動標註須要設計師使用「尺子」來測量距離、「吸管」來吸收色號。在界面上部有單位選擇，若是咱們給 iOS 開發作標註，那麼單位最好選擇 PT，與開發環境一致。

△ 像素大廚標註工具

「標你妹啊」進行自動標註

國產標註在線神器。只須要登陸網站後，上傳設計稿可直接生成標註網址，發給程序員就能夠啦。一樣提供代碼參考和自動標註間距尺寸等功能。

△ 在線標註工具 – 標你妹啊

Markman 手動標註

Markman 一樣是國產標註神器。並且是我使用的第一個標註工具，選用底部工具能夠進行手動標註，標註後導出 png標註圖便可。

△ Markman標註工具

1. 動效

據資深 iOS開發程威介紹，目前的 iOS 主流的動效實現方式有如下四種：第一種，設計師給到開發動效視頻或 gif，開發人員照着效果編寫代碼調用靜態切圖從新作一遍，這樣的還原度可能會有問題，須要開發和設計師多溝通。第二種，可使用序列幀的方式實現動畫，原理是給到開發按順序命名的 png，好比1.png、2.png等，而後用代碼將它們快速替換實現動畫。第三種，咱們也能夠給到程序員 avi 等視頻文件直接插入視頻。第四種，使用 Airbnb 開源的 Lottie（https://airbnb.design/lottie/）。具體來講是經過 after effects 來完成動效，而後經過 BodyMovin 插件導出 json文件，裏面記錄的就是動畫的細節，而後在安卓，iOS，React Native 上都有一套對應的 SDK，來解析這個 json文件來還原成動畫。這個方式的還原度很高，除了部分 AE特效不支持外堪稱完美。其實還有 QuartzCode、CoreAnimator 等工具，有興趣的你們能夠去嘗試一下。但我認爲無論使用什麼方式，最優秀的動效仍是要靠設計師和開發人員「真誠地交流」。

1. 項目走查

當咱們最終完成了界面設計，須要和咱們的設計稿進行對照還原。除了用肉眼辨別以外，咱們也能夠把還原後的程序截圖下來放到 PS 中對照，尋找問題。那麼咱們給程序員的反饋就是一個有截圖對照和標註的文檔，這個文檔能夠成爲 Buglist。

△ 截圖後可在軟件中對比尋找問題

項目走查除了判斷視覺還原程度，也要兼顧動效、點擊狀態等動態效果是否符合設計預期。若是有問題須要及時和技術反饋，反饋的方式建議是文檔類型，保證有據可查。

總結
咱們一塊兒來小結一下：當咱們設計 iOS平臺的 APP 時，咱們能夠選擇使用 Sketch、Adobe XD、Photoshop 等工具。爲了切圖和適配方便，設計時咱們以 iPhone6/7/8尺寸（750x1334px或375x667pt）爲基準設計。設計過程當中咱們須要經過諸如 Adobe XD 或 Mirror 等工具隨時在手機上預覽設計效果。以後咱們須要把圖像資源輸出成@2x視網膜屏幕和@3x高清視網膜屏幕兩套圖像資源，這時可使用 Cutterman 或 Sketch 和 XD 自帶的切圖功能切圖。爲了保證開發工程師可以完美地還原咱們的設計稿，咱們須要提供標註。經過藍湖或像素大廚、Markman、標你妹啊等工具咱們能夠把設計稿完美標註給到程序員，這時程序員就清晰地明白每一個元素的大小和間距了。最後，咱們要對完成的程序進行驗收。本篇文章寫於二零一八年，按照慣例，每一年蘋果都會舉辦兩場發佈會發佈新產品。若是後面發佈了新的手機，也但願你們可以理清脈絡，透過現象看到本質，找出合適的設計適配方法。

參考資料

蘋果開發者中心網址：https://developer.apple.com/
蘋果人機交互規範：https://developer.apple.com/d...
iOS設計資源下載：https://developer.apple.com/d...