資訊專欄INFORMATION COLUMN
摘要：基礎概念元素設計規范版式設計規范文字使用規范顏色使用規范輸出規范交互介紹總結在開始設計之前必須搞清楚物理像素邏輯像素倍率三個詞。依然可用設計只是高度增加了，尺寸注意狀態欄的高度由原來的變成了，另外底部要預留的主頁指示器的位置。
從事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的主頁指示器的位置。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116365.html
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：更多資源請文章轉自月份前端資源分享的作用數組元素隨機化排序算法實現學習筆記數組隨機排序個變態題解析上個變態題解析下中的數字前端開發筆記本過目不忘正則表達式聊一聊前端存儲那些事兒一鍵分享到各種寫給剛入門的前端工程師的前后端交互指南物聯網世界的 更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/jsfr...
閱讀 1262·2021-11-23 09:51
閱讀 2637·2021-09-03 10:47
閱讀 2233·2019-08-30 15:53
閱讀 2414·2019-08-30 15:44
閱讀 1375·2019-08-30 15:44
閱讀 1193·2019-08-30 10:57
閱讀 1923·2019-08-29 12:25
閱讀 1086·2019-08-26 11:57
