最近畫原型的時候，一直在想一個問題。就是怎麼才能做到高保真、更加規範、增強原件的複用性？嗯哼，所以決定總結出一些有規律的東西，可以自己保存並且給他人使用。
目錄
目前主流的 iOS 設備主要有 iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸）。
二、圖標尺寸
三、邊距和間距
在移動設計中，我們常常將簡單的頁面佈局好，要將各個原件佈局在頁面當中。原件擺放的位置、間距都影響着一個原型的美感和使用。
1. 全局邊距
全局邊距是指頁面內容到屏幕邊緣的距離，整個應用的界面都應該以此來進行規範，以達到頁面整體視覺效果的統一。全局邊距的設置可以更好的引導用戶豎向向下閱讀。
常用的全局邊距有32px、30px、24px、20px等等，當然除了這些還有更大或者更小的邊距，但上面說到的這些是最常用的，而且有一個特點就是數值全是偶數。
以 iOS 原生態頁面爲例，「設置」頁面和「通用」頁面都是使用的30px的邊距。
再以微信和支付寶爲例，他們的邊距分別是20px和24px。
還有一種是不留邊距，比如站酷APP（當然站酷APP 也進行了改版，首頁已經採用了不通欄的卡片式設計）。這種圖片通欄顯示的設置方式，更容易讓用戶將注意力集中到每個圖文的內容本身，其視覺流在向下瀏覽時因爲沒有留白的引導被圖片直接割裂，造成在圖片上停留更長時間。
2. 卡片間距
至於卡片和卡片之間的距離的設置需要根據界面的風格以及卡片承載信息的多少來界定，通常最小不低於16px，過小的間距會造成用戶的緊張情緒，使用最多的間距是20px、24px、30px、40px
3. 內容間距
內容佈局時，一定要重視鄰近性原則的運用。每一個應用名稱都遠離其他圖標，與對應的圖標距離較近，保持親密的關係，也讓用戶的瀏覽變得更直觀。
四、內容佈局
最常用的兩種佈局形式，列表式佈局和卡片式佈局。
1. 列表式佈局
要注意列表舒適體驗的最小高度是80px，最大的高度要視內容的多少而定。
2. 卡片式佈局
五、界面圖片設計比例
UI設計中，對於圖片的尺寸和比例沒有嚴格的規範，設計師往往憑藉經驗和感覺設置一個看起來不錯的尺寸，但事實上我們是有章可循的。運用科學的手段設置圖片的尺寸，可以獲得最優的方案，常見的圖片尺寸有16:9、4:3、3:2、1:1和1:0.618（黃金比例）。
六、界面文字設計規範
在一款 APP 中字號範圍一般在20-36之間。另外需要注意的一點是所有的字號設置都必須爲偶數，上下級內容字號極差關係爲2-4號。
七、網站首屏標準
下面這個是div的佈局標準，我覺得可以做來參考
參考資料：
你是技術宅麼？那就加入我們吧！點擊下方鏈接 或 掃描二維碼 即可。
歡迎加入 CSDN技術交流羣2：（點擊即可加羣）QQ羣:456543087
CSDN技術交流羣(已滿員)：（點擊即可加羣）QQ羣:681223095。
商務合作@羣主，謝謝！
