收藏 | 史上最全的iPhone設計規範!
如果您不熟悉iPhone設計規範，請一口吃下本篇文章。伴隨筆記吃下效果更佳：）
載入超時，點擊重試
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/8、iPhone SE等蘋果手機。作為一個移動端UI設計師，您必須對蘋果所有生產過和現役的iPhone有所了解。
起源
談到iPhone我們必須談談史蒂夫·喬布斯（Steve Jobs）。儘管喬布斯去世多年，但是他的理念仍然是現代智能手機設計的原則。喬布斯不僅重新定義了智能手機，也定義了移動端應用程序。這位被領養的猶太男孩在很早就對個人電腦產生了興趣。在遊歷了印度和日本之後，他進入了大學校園。在校園裡除了無線電和嬉皮士文化，他認為大學課程多半是無聊的。但他曾跑去特意選修了一門課程：字體設計。他所在大學的字體設計課是全美最著名的，在那個課堂上喬布斯學習到了網格設計、襯線體與無襯線體、字體的氣質等設計知識。當然在前面講過的具有搖滾精神的字體Helvetica也深深吸引了喬布斯。後來喬布斯選擇大學肄業並在自家車庫創立了蘋果公司，自此「車庫」也成了創業者最喜愛的地標。蘋果公司的第一代個人電腦內置了非常出色的用戶圖形界面系統（即GUI），並且內置了Helvetica等漂亮的字體。但是這並不是喬布斯事業的終點，在經歷了蘋果公司的權利鬥爭後，成熟的喬布斯再次登上發布會的舞台，推出了真正能改變世界的產品 - iPhone。一般產品名都會用名字加上產品的類型命名，比如百事可樂、英雄鋼筆等。而iPhone似乎本身就是一個類別。在那次發布會上，喬布斯指責當時的功能手機太「愚蠢」：當時的功能手機性能很差，並且屏幕很小，實體鍵盤佔用了很大的空間。之後，他拿出了一部像外星科技的產品：iPhone。自此，蘋果重新發明了手機。喬布斯如此強調用戶界面和交互設計的重要性，這種理念改變了當時和現在的設計思維。喬布斯身後，移動端的格局在改變，接任喬布斯指揮棒的蒂姆·庫克和首席設計官喬納森·伊夫（Sir Jonathan Paul Ive）也陸續更新著蘋果手機的產品線，延續著這些偉大的產品。
年輕的喬布斯
初代iPhone
相關產品：iPhone（一代）、iPhone3G（二代）、iPhone3GS（三代）。
iPhone初代產品在2007年1月9日由史蒂夫·喬布斯在蘋果發布會上正式發布。初代的iPhone產品的共同特點是：玻璃屏、屏幕清晰度普通、3.5英寸屏（注意：我們所說的手機尺寸都是測量屏幕的對角線得出的）。iPhone沒有實體鍵而整體是屏幕的設計，在當時彷彿是外星科技降臨一般令人驚艷。為了讓大眾習慣直接在手機上點圖標（在此之前人機互動都是間接輸入的：比如實體鍵盤、滑鼠、觸控筆等），喬布斯發布了革命性的操作系統iOS，手機的所有圖標都是圓角：這樣可以避免用戶認為會刺到手指。所有圖標和界面全部是擬物設計，這樣可以更好地讓用戶理解哪些是可以點擊操作的。按鈕在手機上呈現的大小都是7mm左右，這是因為人類手指點擊區域大概是7mm - 9mm。系統充分地應用了多點觸控的功能，你不僅僅可以點手機里的按鈕，還可以進行長按、滑動、捏等手勢操作。這些用戶體驗和人性化的設計在當時具有劃時代的意義。隨後，第二代產品iPhone 3G、第三代產品iPhone3GS先後由喬布斯發布。這種能聽歌、能打電話、能上網的手機真是太炸了！而且你可以在應用商店Appstore中下載第三方的應用程序，海量的第三方程序可謂是大千世界了。這塊3.5英寸屏的手機截圖出來後的實際解析度是480x320px，所以如果你在當時做UI設計的話，那麼做APP界面建圖的尺寸就應該是480x320px。
蘋果初代產品 (2007)
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的計算公式
iPhone 5
相關產品：iPhone 5（六代）、iPhone 5s和iPhone 5c（七代）
iPhone 5於2012年9月13日正式發布。iPhone5在設計上帶來了很多爭議，因為iPhone5沒有採用喬布斯認為人類最合適的手機尺寸3.5英寸屏，而是用了4英寸的屏幕。寬度沒變而高度加長了。這樣做的原因是市場上越大的手機越受歡迎。當時設計師也幾近崩潰，因為又要搞適配了。原來960x640px的尺寸變為了1136x640px，但是這個變化其實不大，就是高了點兒。於是@2x高清圖的設計稿就變成了640x1136px。因為iPhone4的手機看著也就是長了點兒，滑動不就完了嘛。除了閃屏這樣的界面需要單獨做iPhone4、iPhone5、3GS尺寸之外，其他界面仍然維持兩套設計稿即可。
iPhone 5 （2012）
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（就是750x1334除以2）；而iPhone Plus的邏輯像素就是414 x 736 pt（就是1242x2208除以3，因為這個屏幕太大了視距不同所以屏幕密度更高）。歷史到這個時候，原來的手機全部被淘汰了。也就是說iPhone6/7/8成為了我們的設計標準，它的切圖就是@2x，iPhone Plus（1242x2208）使用@3x。從此沒有@1x倍圖了，只存在一個假想的概念。
iPhone 6/7/8 (自2014)
iPhone Plus (自2014)
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)
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：375x812 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 6、iPhone 6S、iPhone7、iPhone7S、iPhone8屏幕和解析度都是一致的750X1334px，所以我們可以稱它們為iPhone6/7/8。而iPhone 6 Plus、iPhone7 Plus、iPhone8 Plus、屏幕和解析度都是一致的1242x2208，所以我們可以稱它們為iPhone Plus。而iPhone XS、iPhone X屏幕和解析度都是一致的1125x2436，所以我們可以稱它們為iPhoneX。那這場比賽的贏家毫無疑問是價格美麗的iPhone6/7/8獲勝啦。那麼我們做界面設計時需要按照iPhone6/7/8為基準設計。如果使用Photoshop就建750x1334px尺寸的畫布，如果是使用Sketch或Adobe XD等工具就建立375x667pt。當然如果要設計首頁之類的界面，它的界面很長你可以設計一個長的設計稿，比如750x8000px。
手機型號與像素對應圖
HIG設計指南
上文說我們建立界面可以根據750x1334px或375x667pt來建立畫布，但是具體狀態欄的高度、導航欄的高度、tab欄的高度是多少？那些UIKit組件里的東西去哪裡找呢？蘋果已經為我們準備好了多個格式的規範了：
資源下載地址：
https://developer.apple.com/design/resources/
設計方式
在iPhone6/7/8存量仍然很大的情況下，我們做設計稿仍然需要以iPhone6/7/8為尺寸來建圖。從蘋果官網下載好UIKit，上面有我們需要的一切元素。這些元素有PSD、Sketch以及XD版本，不管用什麼設計軟體均可找到對應版本。打開之後你會發現蘋果已經將我們所需要的規範元素準備好了。如果你需要一些彈窗或者控制項，那麼就在UI Elements里找。如果需要界面的尺寸模板，就在Design Templates找。所有文件都有兩份，結尾帶有-iPhoneX的是為iPhone X系列設計的模板。沒有標識的是為iPhone6/7/8設計的模板。
UI Elements 文件夾中的源文件
Design Templates中的源文件
狀態欄和導航欄
狀態欄（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的導航區域設計
大標題導航欄
在最新的蘋果設計中導航出現了一種新形式：大標題。出現這種形式就是為了減少視覺噪音，讓內容更加突出。很明顯大標題的設計很像報紙的版式設計，在第一眼我們就會明白頁面的主題。大標題導航欄的高度一般為116pt（232px）：這包括了20pt（40px）狀態欄的高度，同時也能放得下34pt（68px）的大標題和輔助信息（如返回等圖標）。但是注意一下，大標題並不應該像傳統導航一樣常駐在頁面之上，因為它太占空間了。所以在滑動頁面時大標題會變成正常導航欄的64pt（128px）的高度。當然如果設計稿為iPhone X那麼數值需要另外換算。
大標題的尺寸
導航欄圖標
圖標作為文字的補充，在移動端中應用非常廣泛。在導航欄區域上的功能諸如搜索、添加、更多、返回等均需要用圖標來表達。說明：@2x和@3x在邏輯像素單位是一樣的，如果您使用如Sketch、Adobe XD等矢量工具設計，可以參照邏輯像素數值設計即可。但是如果您用Photoshop工具以iPhone6/7/8尺寸進行設計，就需按照@2x下的px單位數值設計。
導航欄圖標尺寸規範
標籤欄 （Tab Bars）
Tab就是點擊的意思，Tab欄（也叫標籤欄）指的是APP底部的區域，如微信底部常駐有聊天、通訊錄、發現、我的四個圖標。iOS規範中Tab欄一般有五個、四個、三個圖標的形式。也就是把寬度平分為五、四、三份。iPhone6/7/8設計中，標籤欄的高度為49pt（98px）。Tab欄的操作是最常用的，因為手指最方便點擊而且這個欄是常駐在頁面之上的。所以Tab欄的圖標至關重要，因為很多用戶可能因為看不懂圖標而找不到重要功能的入口，通常我們會在Tab欄圖標之下加上11pt（22px）的注釋文字，這個注釋文字一般來說都是非常淺的淺灰色。
標籤欄的尺寸
標籤欄圖標
我們在標籤欄上的圖標一般來說30pt（60px）大小左右，蘋果給出了四種不同形狀標籤欄圖標的尺寸參考供大家設計時考慮。其意義是讓不同外形的圖標看上去是差不多大的，保證圖標的平衡。標籤欄圖標的選中態應該是一個彩色，來區別於非選中狀態。
真實設計中的標籤欄
標籤欄圖標設計規範
標籤欄圖標應該盡量使用清晰地填充風格
工具欄 （ToolBars）
我們在蘋果自帶瀏覽器底部就能看到工具欄。工具欄提供了和當前任務相關的操作和按鈕，在滑動時可以收起。工具欄同Tab欄一樣都是位於底部，但是高度略窄，它的高度是44pt（88px）。
閃屏資源
由於閃屏是一張完整的靜態滿屏圖片，而不是諸如其他頁面一樣是由切圖和文本拼成的，所以閃屏的適配更簡單粗暴：我們需要提供不同尺寸的閃屏效果。閃屏資源就是滿尺寸的一張png，上端不需要狀態欄里的信息，程序會在開發完畢時自動在閃屏中補上狀態欄里的信息。我們需要提供的閃屏尺寸有：
我們需要提供的閃屏尺寸 一共6張
安全距離
作為iPhone全面屏系列手機，齊劉海無疑是一個特徵。但是全面屏給我們帶來了使用上的問題：上下左右是圓角、頂部齊劉海使屏幕凹下一塊。所以在帶有圓角和齊劉海的紅色標註區域不應該放置任何功能，僅可在上端放置狀態欄，底部圓角區域留白。我們界面豎屏使用時左右臨近手機邊緣的區域不建議放任何操作，應留出一定的邊距（Margin）。這個邊距是多少呢？沒有明確嚴格的規定，但是一般的APP會留出16pt-24pt不等的邊距防止用戶在屏幕邊緣不好點擊。不過內容展現卻可以呈現在邊距里。如果我們橫屏使用手機時，左右同樣不好點對吧？橫屏同時還有令人鬧心的「齊劉海」，所以同樣左右需留出一定的邊距來。所以我們就得到一個安全距離的矩形，內容可以完整地呈現在這個安全距離內。
iPhone X系列由於全面屏上下出現不可操作區域
色彩
其實在iPhone上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以。只要符合產品氣質並且在色彩心理學理論上思考，用什麼顏色是設計師的自由。官方建議的系統色彩如下：
iPhone的系統色
字體
iOS中英文使用的是San Francisco (SF)字體。
（下載地址：
https://developer.apple.com/fonts）
中文使用的是蘋方黑體。安裝好以後你會發現中文蘋方的字族有不少可供選擇的粗細，那麼我們設計界面時需要根據信息的邏輯權重分配粗細：標題應該較粗，而說明字體應該較細並且可以設計成灰色。其實字體的設計最重要的考量就是信息層級。蘋果認為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）。
啟動圖標
在設計模板還沒有如今這麼發達時，設計師需要設計啟動圖標（1024x1024px）之後按照程序員的要求切出幾十個不同尺寸的圖標。比如，在手機中@3x情況下桌面圖標尺寸為180x180px，在@2x情況下為120x120px；在應用商店圖標需要使用的尺寸是1024x1024px；這個工作太煩人了，好在現在我們只需要專註在啟動圖標設計本身上了。在蘋果給我們的這套資源中，有Template-AppIcons-iOS這個文件。打開這個文件，用我們自己設計的啟動圖標替換掉智能對象里的內容，你會發現所有尺寸的圖標都變成了我們的圖標。然後我們把背景隱藏，切出這些圖標即可。圖標設計建議使用AI等矢量軟體，然後使用規範切出圖像資源。
Template-AppIcons-iOS
控制項
控制項包括：輸入框、按鈕、滑桿、頁卡、開關等，在設計模板中已經全部列出。這裡格外說明一下，為了讓設計更符合整體產品品牌調性，這些控制項都可以做成自定義的設計樣式。但是會增加工作量和切圖資源，所以一般我們在諸如設置界面這些無需太體現設計感的頁面中都使用系統默認控制項，而在一些品牌感需要強調的頁面或產品（諸如白噪音產品、遊戲等）則會使用自定義的樣式。如果我們想自己設計控制項，那麼注意兩件事：第一，點擊區域基本符合44pt（88px）原則，也就是在手機上大小大概是7mm-9mm，適合手指點擊。第二，要設計操作的不同狀態，不要只設計一種狀態。
默認控制項
自定控制項和默認控制項
控制項中無處不在的44pt（88px）
之前我們介紹過，人手指點擊區域為7mm - 9mm，在@2x中就是44pt（88px）。蘋果的導航條、列表、工具欄都充滿了44pt（88px）這個神秘數字。我們在設計時一定也要考慮到手指的點擊區域。
無處不見的44pt（88px）
鍵盤
在設計模板中您也可以找到鍵盤的設計。這裡需要提醒的是，很多朋友做界面設計時不考慮輸入時鍵盤會遮擋到的空間，如果考慮到鍵盤彈起遮擋住的內容，那麼我們的一些界面中的輸入框和信息可能都需要上移了。當然也不是說可能被鍵盤遮擋的地方不可以防止任何內容，也有一種方式就是當輸入一個表單時，頁面會垂直定位到當前輸入的位置。
鍵盤高度
iTunes 上傳截圖
在程序上傳APPSTORE時我們需要提供多張APP截圖，供用戶了解APP的功能。很多設計師朋友不太清楚這個尺寸，這裡我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。有時我們也會在這個尺寸上做一些設計，讓用戶在APPSTORE打開APP介紹時獲得最好的體驗。
ITunes上傳用截圖
工作流程
前期調研階段
在我們設計界面之前，我們必須做用戶研究來了解產品的調性，比如用戶研究手段中的用戶畫像、用戶調研、用戶使用場景分析、設計競品分析等方法。不管工作再忙也建議大家做這些工作，他們對我們深入了解產品大有裨益。
原型圖階段
APP產品設計首先需要構建出原型圖，之後再開始視覺設計。這個工作有些公司是由產品經理負責的，也有交互設計師負責的，還有的公司因為人手較少，也會出現由UI設計師來負責的情況。就算有產品經理或其他職能人員來完成原型圖，那設計師也需要和產品經理等人員溝通需求和探討原型圖，並不是產品經理向設計師下發需求。設計師要站在視覺和交互的角度提出自己建設性的意見，而不是簡單等原型圖完成後照著上色而已。關於原型圖的工具，我們不僅僅可以用Axure RP設計原型圖，也可以使用像墨刀、Adobe XD等新工具來完成原型圖。
構建APP原型圖（工具：Adobe XD ）
視覺稿階段
視覺稿階段要根據原型圖確定的內容和大體版式完成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）
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尺寸下的設計尺寸
實時預覽你的設計稿
我們在Sketch、Adobe XD、Photoshop等軟體中設計界面時有一個問題：電腦上的效果總和手機上呈現的效果不同。這是由於尺寸和觀察方式決定的，所以最好的方式是我們實時地查看設計稿在手機上的呈現效果。以下APP通過數據線或wifi鏈接電腦後，即可及時在手機中看到還沒有保存的設計稿呈現在手機中的樣子。
Design Mirror：可實時預覽Photoshop、XD等設計稿
Adobe XD：可實時預覽你的XD畫板
Sketch Mirror：可實時預覽你的Sketch畫板
iPhoneX設計效果圖
雖然程序員對於iPhoneX等全面屏手機的適配只需要設計師提供切圖即可，但很多設計師比較青睞iPhone X和最新XR和XSM等的設計效果，也比較願意把設計稿改成iPhoneX的設計圖放到作品集或者在彙報時展示。那麼我們應該怎麼做呢？如果設計稿需要調整為iPhone X的顯示效果，可以下載iOS 12設計源文件，把界面頭和尾替換成iPhoneX專用頭尾——專用頭尾在劉海和圓角處做了留白。Sketch和XD都是用一倍圖設計所以不涉及修改尺寸，改頭尾即可。而PS比較複雜一點：需要先等比例變大整個設計稿，再把寬度改為1125寬度自適應即可。PS變大會虛還得一個一個調一下，然後再改頭尾。
替換導航區域和Tab欄區域，即可得到iPhoneX設計效果
視覺規範
如果我們設計完了五六個主要界面，那麼現在做什麼呢？APP設計一套視覺規範是非常有必要的，有了視覺規範我們就可以把控整體的設計和語言。一般來說，一套APP應該有3-5種主題色和輔助色；5-10種不同變化的字體樣式。這些如果沒有落實到一套規範中，那麼很容易跑偏。一套移動端應用的視覺規範應該包括:
主色/輔色/色彩規範: 規定APP所能使用的色彩種類；
文字顏色/大小規範: 規定APP主要使用文字的大小、顏色、應用場景等；
ICON規範: 規定APP的icon設計規範;
應用圖標規範: 規定APP的應用圖標使用規範；
按鈕和交互態規範: 規定APP內所有按鈕和交互態的樣式；
間距規範: 規定APP內所有間距的尺寸。
設計規範的重要性
設計規範中的色彩規範
設計規範的類型可以是png或者多個頁面組成的pdf文件。其他設計師打開我們制定的設計規範，可以清晰地找到當前項目適合使用的元素和字體大小、間距等。這樣儘管是多人協同工作也可以保證項目設計風格的一致性。
切圖
有了大小各異的iPhone尺寸，如果程序只有一套切圖，那麼一定會造成有的手機顯示很差。所以我們要在程序里放置多套切圖，然後讓程序判斷「主人」的手機是什麼型號，顯示不同的切圖。這樣才能夠完美地呈現給用戶最好的體驗。切圖的方法有很多種。Sketch和Adobe XD可以直接導出。Phtoshop不具備這個功能，但是我們可以使用cutterman、藍湖等插件導出切圖。不管是自帶功能還是插件，導出切圖都可以導出@2x和@3x圖，而設計稿只需要iPhone6/7/8一套即可。
某項目中的切圖文件
Adobe XD切圖功能
在Adobe XD中將需要切出的元素在圖層面板（Ctrl + Y）點擊添加批量導出標記記錄；然後點擊 菜單 > 導出 > 所選畫板 > 用於iOS > 導出所有畫板 即可。
Adobe XD自帶切圖功能
使用Cutterman協助Photoshop切圖
在Cutterman官網下載PS插件後，點擊窗口 > 擴展功能 > Cutterman 調出面板；然後選擇iOS 並高亮選中@3X和@2X；在圖層面板里選中需要切圖的元素，點擊「導出選中圖層」即可。
Photoshop中的Cutterman 插件
使用藍湖切圖
在藍湖平台可以下載Sketch、Adobe XD或Photoshop對應的插件。然後在不同設計軟體插件中將設計稿上傳到藍湖（PS需要用插件標記需要切出的元素），然後在藍湖網頁版點擊切圖按鈕，選擇視網膜@2x和高清視網膜@3x，再點擊「下載該頁全部切圖」即可。
在藍湖平台導出切圖
切圖命名規範
切圖最後需要命名成規範的格式，這樣方便程序員查找。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點簡單的辭彙量。藉由上述工具切圖後，需要整理切圖命名，或在切圖之前對圖層命名亦可。以下是切圖元素的中英文對照：
切圖命名對照表
然後我們要按照 功能_類型_名稱_狀態@倍數 來命名每個切圖，比如我們導航條上有一個搜索圖標，那麼它的名稱就是：
navi_icon_search_default@2x.png
(導航_圖標_搜索_正常@2x.png)
iOS開發語言
作為iOS開發工程師，最重要的三個工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語言；而Swift開發非常高效。一般iOS工程師會在這兩個語言中選擇一種作為開發工具。UIKit是蘋果系統自帶的一套框架，這個框架里有設置按鈕、滑竿、狀態欄、電池電量、鍵盤等介面可供調用。所以我們看到很多第三方APP的界面中，有許多控制項和蘋果自帶程序是一致的，這就是UIKit的功勞。
開發視角 By @alvaroreyes
了解開發工程師的語言和工具對我們做設計也格外有幫助，我們會知道哪些效果能做，哪些效果不能做，哪些效果能做不好做等等。我找了大家關注的九個問題請教了iOS資深開發工程師程威：
和iOS工程師溝通
溝通完是不是學到了不少？我們明白了iOS工程師工作的機制後再設計界面時就可以做到心中有數了。在平時工作中我們也應該多和開發小哥哥聊聊，學習一下他們實現的方式，以便我們的設計能夠更好地落地。
標註
切圖後程序員得到了什麼？一大堆碎片。把這些碎片重新用OC或者Swift構建回我們設計的界面並沒有想的那麼簡單。所以開發工程師可能會總是在思考構架層面的問題，而忽視了視覺還原。並且由於iOS的開發人員不會使用設計軟體，所以很容易出現比如14pt或者28px的文字，實現後是16pt或者32px。那就亂了套了不是，那怎麼辦呢？我們可以通過一些標註軟體把圖標之間的位置、字體的高度、字體的大小和色彩進行標註，讓程序員輕鬆省力地還原我們的設計稿。
藍湖平台自動標註功能
將Sketch和Adobe XD、Photoshop的設計稿上傳至藍湖後，在藍湖平台每個頁面左側有一個類似分享的圖標，點擊會獲取一個網址，這個網址就是系統生成的自動標註。它會自動識別設計稿中字體大小和間距等，甚至有代碼參考。
藍湖自動標註工具
使用Px像素大廚標註
像素大廚同樣提供了自動標註、手動標註兩種標註方法。自動標註需要上傳設計稿，手動標註需要設計師使用「尺子」來測量距離、「吸管」來吸取色號。在界面上部有單位選擇，如果我們給iOS開發做標註，那麼單位最好選擇PT，與開發環境一致。
像素大廚標註工具
「標你妹啊」進行自動標註
國產標註在線神器。只需要登錄網站後，上傳設計稿可直接生成標註網址，發給程序員就可以啦。同樣提供代碼參考和自動標註間距尺寸等功能。
在線標註工具 - 標你妹啊
Markman 手動標註
Markman同樣是國產標註神器。而且是我使用的第一個標註工具，選用底部工具可以進行手動標註，標註後導出png標註圖即可。
Markman標註工具
動效
據資深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等工具，有興趣的大家可以去嘗試一下。但我認為不管使用什麼方式，最優秀的動效還是要靠設計師和開發人員「真誠地交流」。
項目走查
當我們最終完成了界面設計，需要和我們的設計稿進行對照還原。除了用肉眼辨別之外，我們也可以把還原後的程序截圖下來放到PS中對照，尋找問題。那麼我們給程序員的反饋就是一個有截圖對照和標註的文檔，這個文檔可以成為Buglist。
截圖後可在軟體中對比尋找問題
項目走查除了判斷視覺還原程度，也要兼顧動效、點擊狀態等動態效果是否符合設計預期。如果有問題需要及時和技術反饋，反饋的方式建議是文檔類型，保證有據可查。
總結
我們一起來小結一下：當我們設計iOS平台的APP時，我們可以選擇使用Sketch、Adobe XD、Photoshop等工具。為了切圖和適配方便，設計時我們以iPhone6/7/8尺寸（750x1334px或375x667pt）為基準設計。設計過程中我們需要通過諸如Adobe XD或Mirror等工具隨時在手機上預覽設計效果。之後我們需要把圖像資源輸出成@2x視網膜屏幕和@3x高清視網膜屏幕兩套圖像資源，這時可以使用Cutterman或Sketch和XD自帶的切圖功能切圖。為了保證開發工程師能夠完美地還原我們的設計稿，我們需要提供標註。通過藍湖或像素大廚、Markman、標你妹啊等工具我們可以把設計稿完美標註給到程序員，這時程序員就清晰地明白每個元素的大小和間距了。最後，我們要對完成的程序進行驗收。本篇文章寫於二零一八年，按照慣例，每年蘋果都會舉辦兩場發布會發布新產品。如果後面發布了新的手機，也希望大家能夠理清脈絡，透過現象看到本質，找出合適的設計適配方法。
推薦閱讀：