開發輔助 | 前端開發工程師必懂的 UI 知識

       移動 UI 設計的世界 ...

---

一、屏幕尺寸

　　屏幕大小，指屏幕對角線的長度，而不是屏幕的寬度或高度； 單位爲英寸

　　如 iPhone 7 屏幕尺寸爲 4.7 英寸；三星 S6 屏幕尺寸爲 5.1 英寸；

　　　　

　　

二、屏幕像素密度 --- ppi

　　指每英寸屏幕所擁有的像素數；由屏幕尺寸 / 屏幕裏所包含的像素數量 計算出來的單位；

　　ppi 指每英寸所擁有的像素數 ，即每英寸像素。 像素密度越高，表明屏幕圖像顯示越清晰。

　　

　　一樣 5 英寸的屏幕，像素數多，屏幕像素密度大，屏幕更清晰；

　　

　　屏幕尺寸 和 像素數不相等時，就很難判斷誰的屏幕像素密度更大了。。

　　ppi的計算公式：

　　　　

　　iphone 7  分辨率 750*1334 4.7英寸  ppi 326

　　三星GALAXY 1440*2560 5.1英寸 ppi 576

三、視網膜屏幕

 　　蘋果公司 提出了視網膜屏幕的概念：當你的手機距離眼睛25-30cm時，你的眼睛沒法分辨出屏幕的像素點。這就是視網膜屏幕。

　　

四、PPI 與 DPI 之間的基情

　　PPI： 每英寸所能顯示的像素數。 ---  衡量屏幕清晰度的重要單位，值越大，固然密度就越高，單位尺寸上的像素點就越多，屏幕越清晰；

　　DPI： 平面設計、印刷計數單位，指每英寸所能印刷出來的網點數。 ---  衡量打印機精度的主要單位，值越大，表示打印機的打印精度越高。

 　  ps：中文版的ps 欺騙了你們十幾年  :(

　　

　　打開中文ps的新建窗口。寬度高度，指的就是顯示分辨率

　　印刷設計 - 顏色模式CMYK - 分辨率指的就是DPI

　　UI設計 - 顏色模式RGB - 分辨率指的就是PPI

五、 安卓的dp/dip、sp 虛擬尺寸單位 ，不受ppi的影響

　　

　　

　　

 六、iPhone 分辨率 與 單位轉換

　　IOS開發虛擬尺寸單位： piont / pt

　　

　　iPhone6S 真實分辨率：

　　

　　原則：

　　　　主流配置；上下適應，承上啓下；保持清晰度；推薦： 750*1334 主流配置

　　安卓Android 手機應用結構：

　　

七、Android 基本佈局

　　基準間距原則：

 　　

　　水平外邊距：

　　

八、安卓文字排版標準

　　

　　

　　文字排版：

　　逗號不排在最左側；左對齊優先右對齊；標題越重要、級別越大顏色越深、越突出；字號大小有層次；正文寬不要超過320dp；