本文6000字上下，反覆校對6遍以上，初步閱讀完大概需要25分鐘，若是深入理解並完全吸收則建議“先收藏再反覆的品，細細的品”。希望對各位朋友有所幫助，不足之處望校正，祝閱讀愉快。
雙20年終究還是來了，網際網路產品對於這個時代不是什麼新鮮事了，網際網路人也從未停止對優秀產品的探索和創新。而做為一個設計人的我們，在前行的腳步中也應該溫故知新，就讓我跟大家一起來對iOS、Android的設計規範、適配問題做一次全面的梳理和複習吧。
iOS設計規範
蘋果自07年1月9日正式釋出iPhone到目前為止的iPhone11Pro Max，已經歷了十三代產品。19年9月11日推出的11、11Pro、11Pro Max並沒有新增尺寸，所以對設計師而言也就沒有額外新增工作量了，還是按照以前的做法：750*1334px（@2x）或（375*667pt，@1x）做設計稿，再提供@2x、@3x切圖。
一代：iPhone
二代：iPhone3G
三代：iPhone3GS
四代：iPhone 4
五代：iPhone 4s
六代：iPhone 5
七代：iPhone 5s、iPhone 5c
八代：iPhone6、iPhone6 Plus
九代：iPhone 6s、iPhone 6s Plus
十代：iPhone7、iPhone7 Plus
十一代：iPhone8、iPhone8 Plus、iPhone X
十二代：iPhone XS、iPhone XS Max、iPhone XR
十三代：iPhone11、iPhone11Pro、iPhone11Pro Max
如何有效記住iOS設計規範，這裡我總結了一個方法“iOS五點兩圖記憶法”，也就是五個點+兩張圖。
1、設計尺寸：375x667pt @1x（750x1334px @2x）為基準設計。
2、設計工具：Sketch、Adobe XD、Photoshop
3、預覽效果：Sketch Mirror、Adobe XD或Ps Play
4、切圖輸出：@2x @3x兩套
5、標註工具：藍湖，摹客
兩圖psd下載連結：https://pan.baidu.com/s/1GfGOdy51M-7nD1McW6Fabw 提取碼: abjj
考考你：
1、iPhone8尺寸的設計稿如何快速變成iPhoneX的設計稿？
2、@2倍圖被當作@3倍進行開發，會導致什麼樣的後果？
3、為什麼要用375x667pt @1倍圖進行設計？（後文也有詳細答案哦）
4、iPhone8顯示為34px的文字在iPhone11 pro Max裡面是不是也是34px？
這裡我們首先重點理解下PX和PT這兩個單位， 弄清楚為什麼建議使用一倍圖進行UI設計，才能在設計中以不變應萬變。（說明：該部分內容優化自靜電老師的總結。公眾號@靜Design）
PX大家可能比較熟悉，就是畫素，英文pixel的簡稱。最通俗的理解就是找一個放大鏡（不是電腦中的放大鏡，是真實的放大鏡），然後對準自己面前的顯示器或者手機螢幕觀看，大部分顯示器會在放大鏡下出現一個個點。這就是我們平時所說的畫素概念。在一臺物理解析度為1080x1920px的顯示器中，橫向分佈1920個點，縱向則有1080個點。這些點通過顯示器的光學特性，為我們組成不同的影象。
請注意， 在不同尺寸的顯示器上，這些點的單位面積並不是一樣的。比如一臺22英寸的1080p液晶顯示器與一臺27英寸的1080p液晶顯示器，可以發現這兩臺顯示器的畫素分佈就是27英寸的顯示效果明顯遜於22英寸顯示器的效果，一個重要的原因就是兩臺液晶面板中的“畫素”顆粒大小不一。
由此可見，畫素這個單位是一個相對單位，不能用釐米、毫米等這些絕對度量單位來衡量他的長度或者寬度，因為1畫素只代表一個單位的“點”。
另一個重要單位是PT，英文point的簡稱，這個單位也是iOS開發過程中使用的單位，與px這樣的相對單位不同，PT（Point）是一個絕對單位，中文名字是“磅因（或者磅）”（1PT=1/72英寸）。
同樣用簡單直觀的例子來演示，拿兩臺不同型號的iPhone，比如一臺ip11和一臺ip11pro Max，開啟同樣一款應用（如QQ音樂），準備好一把尺子，使用尺子分別測量最上方title“音樂館”文字尺寸。經測量，可以發現不同型號的“音樂館”文字的尺寸都一樣。也可以請iOS開發人員分別寫兩個針對不同尺寸機型適配的同一個檔案，並在兩部手機安裝，確保這個檔案中的字型使用一個字號（30PT）。在兩個手機中執行並用尺子測量，我們發現他們的物理尺寸完全一樣。
請大家記住一點，px是相對單位，pt為絕對單位（類似單位為釐米，毫米等等）。在不確定螢幕密度的情況下，px與pt沒有任何可比性。
在開發工程師眼中，你如果使用750px的解析度作圖，那麼按原大小標註設計稿中的尺寸的話，他們同樣在開發環境中是要換算為一倍尺寸的，比如你標註了字號為40px，那麼最終開發工程師寫在程式碼裡的就是20pt，除以2的關係。但是呢，如果使用一倍基準解析度作圖，那麼就不用除以2啦，所有尺寸開發工程師直接拿過去隨取隨用。
sketch作為一款純向量的移動端ui設計軟體，不管是設計還是後期與開發工程師的配合，都嚴格遵從開發原理，這種設計方法可以最大限度保證設計稿的復現，同時也可以減小檔案體積和系統資源消耗，不管是從哪個方面看，都是設計師製作ui介面的明智之選。
最後總結一下原因，設計師使用一倍基準尺寸作圖，主要是單位轉換方便，輸出切圖方便，理解簡單。對於工程師，他們不用再進行復雜的換算，有助於完美復現設計稿。
我們繼續熟悉iOS中一些必不可少的頁面規範細則。
一、引導頁
引導頁是一張完整圖，不能適配，因此需要單獨出設計圖，iOS共需提供6套尺寸，當然也支援視訊形式。（目前5以下的適配基本淘汰）
二、圖示
以1024x1024px尺寸進行圖示創作即可。再通過現成尺寸模版資源，一鍵生成整套尺寸匯出即可。（模版連結：https://developer.apple.com/design/resources/Template-AppIcons-iOS）
注意：最終提交給到程式設計師的切圖是直角，非圓角圖示。
裝置名稱
應用圖示
App Store 圖示
Spotlight 圖示
設定圖示
iPhone11P, 11P Max, X, Xs, 8P , 7P , 6s P , 6P
180 x 180 px
1024 x 1024 px
120 x 120 px
87 x 87 px
iPhone11, XR, 8, 7, 6s, 6, SE，5s, 5c, 5,4s, 4
120 x 120 px
1024 x 1024 px
80 x 80 px
58 x 58 px
iPhone 1, 3G, 3GS
57 x 57 px
1024 x 1024 px
29 x 29 px
29 x 29 px
iPad Pro 12.9, 10.5
167 x 167 px
1024 x 1024 px
80 x 80 px
58 x 58 px
iPad Air 1 & 2, Mini 2 & 4,3 & 4
152 x 152 px
1024 x 1024 px
80 x 80 px
58 x 58 px
iPad 1, 2, Mini 1
76 x 76 px px
1024 x 1024 px
40 x 40 px
29 x 29 px
其他裝置圖示尺寸
三、狀態列和導航欄（具體尺寸見五點二圖）
狀態列：顯示時間、運營商資訊、電池電量等資訊區域。(齊劉海區域)
導航欄：狀態列下面的區域，含頁面標題、功能圖示等資訊區域。
狀態列跟導航欄一般會進行一體化設計。現在流行大標題導航欄設計，也就是加大導航欄的高度，融入頁面內容的標題，當內容上滑時，大標題再回歸到常規導航高度。（大標題導航欄的高度一般為116pt（232px），這裡包括了20pt（40px）狀態列的高度，同時也能放得下34pt（68px）的大標題和輔助資訊（如返回等圖示）。
導航欄中的元素必須遵守如下幾個對齊原則:
2、當前介面的標題必須在導航欄正中。（可無）
四、標籤欄（具體尺寸見五點二圖）
標籤欄：即Tab欄，為底部快速入口，iOS規範中Tab欄一般有五個、四個、三個圖示的形式。分為“純圖示標籤”和“圖示加文字標籤”兩種形式。
五、iTunes 上傳頁面
在程式上傳App Store時我們需要提供多張App截圖，供使用者了解APP的功能。這裡我們需要提供1242 x 2688px和1125 x 2436px兩套截圖。也支援視訊形式。（微信目前採用的是五張靜態頁面形式）
六、 字型
中文字型：PingFang SC，英文字型：SF UI Text 、SF UI Display，其中SF UI Text適用與小於19pt的文字，SF UI Display適用於大於20pt的文字。
連結: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35
七、色彩
在iPhone上顯示的色域要比我們作圖時的RGB色域要廣。所以在iPhone上設計怎樣的顏色都可以，只要符合產品氣質並且在色彩心理學理論範圍內。官方建議的系統色彩如下：
iPhone的系統色
八、控制元件
控制元件包括：輸入框、按鈕、滑桿、頁卡、開關等，在設計模板中已經全部列出。（下載地址：https://developer.apple.com/design/resources/）為了讓設計更符合整體產品品牌調性，這些控制元件可以做二次設計。
但得注意兩件事：第一，點選區域基本符合44pt（88px）原則，也就是在手機上大小大概是7mm-9mm，適合手指點選。第二，要設計操作的不同狀態，不要只設計一種狀態。
預設控制元件
控制元件中無處不在的44pt（88px）
之前我們介紹過，人手指點選區域為7mm - 9mm，在@2x中就是44pt（88px）。蘋果的導航條、列表、工具欄都充滿了44pt（88px）這個神祕數字。我們在設計時一定也要考慮到手指的點選區域。
無處不見的44pt（88px）
九、介面設計原則
1.邊距和間距（@2x）
在移動端頁面的設計中，頁面中元素的邊距和間距的設計規範是非常重要的，一個頁面是否美觀、簡潔、通透和邊距、間距的設計規範緊密相連。
（1）全域性邊距（iOS13，@2x）
全域性邊距是指頁面內容到螢幕邊緣的距離，整個應用的介面都應該以此來進行規範，以達到頁面整體視覺效果的統一。在實際應用中應該根據不同的產品氣質採用不同的邊距，讓邊距成為介面的一種設計語言，全域性邊距的設定可以更好的引導使用者豎向向下閱讀。還有一種是不留邊距，通常被應用在卡片式佈局中圖片通欄顯示，這種圖片通欄顯示的設定方式，更容易讓使用者將注意力集中到每個圖文的內容本身。
iOS原生態頁面“設定”和“通用”頁面的邊距都是40px。（@2x）
（2）卡片間距
在移動端頁面設計中卡片式佈局是非常常見的佈局方式，至於卡片和卡片之間的距離的設定需要根據介面的風格以及卡片承載資訊的多少來界定，通常最小不低於16px，過小的間距會造成使用者緊張情緒，使用最多的間距是20px、24px、30px、40px，當然間距也不宜過大，過大的間距會使介面變得鬆散，間距的顏色設定可以與分割線一致，也可以更淺一些。
以iOS（750*1334px）為例，設定頁面卡片間距為70px，而通知中心承載了大量的資訊，因此採用了較小的16px作為卡片的間距。
總結：卡片間距的設定是靈活多變的，一定要根據產品的氣質和實際需求去設定，平時也可以多截圖測量一下各類APP的卡片間距都是怎麼設定的，看的多了並融會貫通，卡片間距設定自然會更加合理，更加得心應手。
（3）內容間距
一款APP除了各種欄（狀態列、導航欄、標籤欄、工具欄）和控制元件icon，就是內容了，內容的佈局形式多種多樣，這裡不去探討內容具體應該如何去佈局，我們來說一說內容的間距設定問題。
格式塔鄰近性原則：
單個元素之間的相對距離會影響我們的感知，互相靠近的元素看起來屬於一組，而那些距離較遠的則自動劃分組外。來看下圖，左圖中的圓在水平方向比垂直距離近，那麼，我們看到了4排圓點，而右圖則看成4列。
在UI設計中內容佈局時，一定要重視鄰近性原則的運用
2.內容佈局
在APP的設計中內容的佈局形式多種多樣，這裡介紹最常用的兩種佈局形式，列表式佈局和卡片式佈局。
（1）列表式佈局
列表式佈局方式非常普遍，隨便開啟一個APP，基本都存在這種佈局方式。特點在於能夠在較小的螢幕中顯示多條資訊，使用者通過上下滑動的手勢能獲得大量的資訊反饋。這也是一種非常容易理解的展示形式。
（2）卡片式佈局
這種佈局形式相對靈活。其特點在於每張卡片的內容和形式相互獨立，互不干擾，所以可以在同一個頁面中出現不同的卡片承載不同的內容。卡片式佈局相對時尚、前衛，很多to C產品經常用到。另外，雙欄卡片的佈局形式，也常見於以圖片資訊為主導的App，例如一些商城的商品陳列頁面。這種形式能在一屏裡顯示更多的內容（至少4張），同時，由於分開左右兩欄的顯示，使用者可以更加方便地對比左右兩欄卡片的內容。
3.介面圖片設計比例
在UI設計中，對於圖片的尺寸和比例沒有嚴格的規範，設計師往往憑藉經驗和感覺設定一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設定圖片的尺寸，可以獲得最優的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）等。
4.APP版式設計規範
版式設計又叫做版面編輯，即在有限的版面空間裡，將版面的構成要素（文字、圖片、控制元件）根據特定的內容進行組合排列。一個優秀的排版要考慮到使用者的閱讀習慣和設計美感，在UI設計中版面設計的基礎原則有哪些呢？
（1）對齊
對齊是貫穿版式設計最基礎，最重要的原則之一，它能建立起一種整齊規矩的外觀，帶給使用者有序一致的瀏覽體驗。
（2）對稱
（3）分組
物以類聚，人以群分。分組是將同類別的資訊組合在一起，直觀的呈現在使用者面前，這樣的設計能夠減少使用者的認知負擔，在移動端介面的設計中最常見的分組方式就是卡片，為使用者選擇提供專注而又明確的瀏覽體驗。
十、切圖命名規範
切圖最後需要命名成規範格式，方便程式設計師查詢。切圖命名的格式建議全英文，如果大家英文不好需要想辦法提升一點簡單的詞彙量。藉由上述工具切圖後，需要整理切圖命名，或在切圖之前對圖層命名亦可。以下是切圖元素的中英文對照：
切圖命名對照表
然後我們要按照”功能_型別_名稱_狀態@倍數”來命名每個切圖，比如我們導航條上有一個搜尋圖示，那麼它的名稱就是：
(導航_圖示_搜尋_正常@2x.png)
Android設計規範
接下來，再一起來看看Android設計規範，這裡只是把安卓規範中一些關鍵資訊做了彙總，更詳細的不過多贅述，網上已經有很多大佬產出過此類文章，大家可自行搜尋。
一、安卓開發單位是DP、SP
DP：安卓專用長度單位。
以160 DPI螢幕為標註，則1DP=1PX
計算公式：dp x dpi/160=px
例：以720x1280px （320dpi）為例， 1dp x 320 dpi/160=2px
SP：安卓專用字型單位。
以160 DPI螢幕為標註，則1SP=1PX
計算公式：sp x dpi/160=px
例：以720x1280px （320dpi）為例， 1sp x 320 dpi/160=2px
二、安卓設計尺寸：以1080x1920px作為設計稿標準尺寸
1.從中間尺寸向上、下適配，介面調整幅度最小，最方便適配。
2.大螢幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。
3.用主流尺寸來做設計稿尺寸，極大的提高了視覺還原和其他機型適配。
三、安卓圖示尺寸
四、安卓字型
中文：思源黑體 / Noto Sans Han
英文：Roboto
大小：主題文字 36-34px 正文 28-26px 提示文字 24-22px
連結: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35
五、切圖規範
1.切圖尺寸必須為雙數
2.單畫素的圖會出現邊緣模糊的情況
一般情況下，我們只需要提供3套切圖資源就可以滿足安卓工程師的適配，分別是HDPI、XHDPI、 XXHDPI 3套切圖資源。
如何用iOS的設計稿適配安卓
現在絕大多數公司限於人力物力的限制，不能把iOS和安卓的設計稿全部執行出來，因此就存在一稿兩用的情況；設計師以iOS版本的設計稿來適配安卓，下面我們來看一組有趣的數學換算題：
1080/1.5=720，720/1.5=480，1242*2208/1.15=1080*1920，也就是說，1242*2208（iOS@3倍尺寸）與1080*1920（安卓尺寸）是可以等比縮放的，所以，iOS與Android的尺寸是可共用1242*2208px。因此，以iOS設計尺寸進行設計是可以適配Android的。（前提是必須和安卓工程師溝通清楚）
另一種方式，就是把750×1334px等比例調整尺寸到安卓1080×1920px，對各個控制元件進行微調，重新提供標註（用dp標註）。也就是需要提供兩套標註，一套給iOS，一套給Android。
iOS開發語言
作為iOS開發工程師，最重要的三個工具是：Obiective-C、Swift、UIKit框架。Obiective-C是目前最有效率的語言；而Swift開發非常高效。一般iOS工程師會在這兩個語言中選擇一種作為開發工具。UIKit是蘋果系統自帶的一套框架，這個框架裡有設定按鈕、滑竿、狀態列、電池電量、鍵盤等介面可供呼叫。所以我們看到很多第三方APP的介面中，有許多控制元件和蘋果自帶程式是一致的，這就是UIKit的功勞。
iOS開發裡單位是pt
750×1334尺寸的換算關係 1pt=2px，也就是說程式設計師拿到我們的px單位的標註稿，自己除以2就是pt了。（這也是為什麼建議設計師用@1倍圖做設計稿的原因）
參考資料及資源下載
蘋果開發者中心網址：
https://developer.apple.com/
蘋果人機互動規範：
https://developer.apple.com/design/human-interface-guidelines/
iOS設計資源下載：
https://developer.apple.com/design/resources/
iOS控制元件下載地址：
https://developer.apple.com/design/resources/
設計師必備APP字型包：
連結: https://pan.baidu.com/s/17cKM9co53TEN85gj4vy5dw 提取碼: hd35
螢幕尺寸規範資源：
http://www.woshipm.com/screen/watch.html
PS藍湖外掛下載：
https://lanhuapp.com/ps
SKetch外掛下載：
https://lanhuapp.com/mac
藍湖手機預覽APP下載：
https://lanhuapp.com/app
藍湖自動同步網盤團隊協作：
https://lanhuapp.com/sync
我是Piger，一個遊走在設計行業十餘年的設計人。我積累了很多“無用功”，我將毫無保留的分享出來，與大家一同學習、進步。
整理不易，願各位有所收穫。
感謝！
2020.1.15