從事UI設計，一直沒看到完整版的UI設計規範學習資料，特此總結整理方便大家學習交流~
很多新人在開始做移動端UI設計的時候，往往對界面的一些尺寸規範不是十分清楚，對做UI設計的基礎概念也沒有清晰的認識，很多時候都是憑藉自己的感覺和經驗去繪製界面，心裏並沒有一個清晰的概念，導致做出來的頁面總是不那麼盡如人意。本文整理彙總了一些界面設計（iOS系統）中常用的一些尺寸規範和方法，如控件間距、適配、標註、切圖等，設計師在設計時並不一定要嚴格遵守，但對這些規範應有所瞭解，並融會貫通。
01.UI基礎概念
02.UI元素設計規範
03.UI版式設計規範
04.UI文字使用規範
05.UI顏色使用規範
06.UI輸出規範
07.UI交互介紹
08.總結
在開始UI設計之前必須搞清楚物理像素、邏輯像素、倍率三個詞。
屏幕都是由許多像素點組成，每個點發出不同顏色的光，構成我們看到的畫面。像我們的熟悉iphone 6s 屏幕就是由750行、1334列像素點組成的矩陣圖。設計師作圖所用的分辨率就是指物理像素，簡而言之，物理像素=分辨率，單位px
邏輯像素又叫邏輯點，是控制屏幕內容顯示多寡的一個單位，單位符號pt，程序員在開發環節必須將設計師提供的物理像素轉換成邏輯像素，並通過邏輯像素來控制頁面顯示哪些內容。不同設備邏輯像素與物理像素的比例是不同的。每個設備物理像素固定不變，我們調節顯示器的分變率其實調節的是邏輯像素。
物理像素在硬件層面構成了液晶屏幕，邏輯像素在軟件層面構成了畫面圖像倍率，1個邏輯像素對應1個物理像素，1pt=1px，倍率1x，1個邏輯像素對應1.5個物理素，1pt=1.5px，倍率1.5x，1個邏輯像素對應2個物理像素，1pt=2px，倍率2x，1個邏輯像素對應3個物理像素，1pt=3px，倍率3x，倍率=物理像素/邏輯像素。
由於開發工具不同，邏輯像素在ios,android名稱不同，ios是pt，android是dp
那麼ios設計時選擇何種倍率？
要從開發換算、設計成本、效果查看、倍率轉換、切圖5個方面來綜合選擇。
開發換算，程序員拿到設計師提供的標註圖以後，需要將標註中的物理像素轉換成邏輯像素，即px轉換爲pt，這裏便涉及到換算的問題。通常設計圖中元素尺寸在三位數以內，對於一般人而言三位數以內除以1最容易，2其次，3最後，本輪排1x>2x>3x
設計成本，在2x邏輯像素下，列表高60pt，頭像高51pt，二者不可能剛好居中對齊，勢必偏移1pt，手機實際顯示偏移2px；在3x物理像素下，列表高150px，頭像高100px，轉換到1x邏輯像素，100不能被3整除，勢必造成偏移。爲保證落地效果，1x倍率下尺寸必須爲偶數，2x倍率下尺寸必須爲4的倍數，3x倍率下尺寸必須爲6的倍數，本輪排序1x>2x>3x
效果查看，我們通常會將效果圖導入對應設備中進行查看，目前主流設備都採用2x，3x倍率，1x的設計圖在主流設備上成倍放大的同時，分割線，描邊線也會成倍的放大，如果不對這些細節二次調整，終端效果會很不理想。由於2x，3x之間等比縮放跨度不大，故而邏輯像素相同的兩個2x，3x可以直接查看彼此的效果圖，3x比2x效果好些，本輪排序3x>2x>1x
倍率轉換，1x轉換2x，3x極爲方便；2x轉換爲1x需要除以2，轉換3x需要乘以1.5較爲便捷；3x轉換2x需要除以3乘以2，轉換1x需要除以3，比較繁瑣，本輪排序1x>2x>3x
切圖，1x設計圖必須另外導出2x，3x兩套切圖，2x設計圖導出3x需放大1.5倍，3x導2x需要除以3再乘以2，麻煩，本輪排序2x>3x>1x
綜合比較分析，只有2x倍率設計圖方便向上向下適配轉換。
那麼在確立ios設計尺寸以後，android是否需要另出一套圖呢？答案是看需求，可以一稿配雙平臺。
在2x倍率下，ios有640x1136、750x1334、750x1624三種主流分辨率，android統一爲720x1280,兩平臺採用相同的APP設計規範，邏輯像素換算方式一樣，程序員根據同一份標註圖開發，實現頁面中元素尺寸完全相同，在ios3種尺寸中750x1334也最接近720p，寬度僅相差30px,相差比僅爲0.04適配無差別，故而可以一稿配雙平臺，如果對實現效果要求較高，那就需要按720x1280再出圖。
iPhone X依然可用750x1334設計,只是高度增加了290px，尺寸750*1624（@2x）注意狀態欄的高度由原來的40px變成了88px，另外底部要預留68px的主頁指示器的位置。