開發輔助 | 前端開發工程師必懂的 UI 知識
移動 UI 設計的世界 ...
1、屏幕尺寸
屏幕大小,指屏幕對角線的長度,而不是屏幕的寬度或高度; 單位為英寸
如 iPhone 7 屏幕尺寸為 4.7 英寸;三星 S6 屏幕尺寸為 5.1 英寸;
2、屏幕像素密度 --- ppi
指每英寸屏幕搜擁有的像素數;由屏幕尺寸和屏幕裏所包含的像素數量 計算出來的單位;
ppi 指每英寸所擁有的像素數 ,即每英寸像素。 像素密度越高,代表屏幕圖像顯示越清晰。
同樣5英寸的屏幕,像素數多,屏幕像素密度大,屏幕更清晰;
屏幕尺寸 和 像素數不想等時,就很難判斷誰的屏幕像素密度更大了。。
ppi的計算公式:
iphone 7 分辨率 750*1334 4.7英寸 ppi 326
三星GALAXY 1440*2560 5.1英寸 ppi 576
3、視網膜屏幕
蘋果公司提出了視網膜屏幕的概念:當你的手機距離眼睛25-30cm時,你的眼睛無法分辨出屏幕的像素點。這就是視網膜屏幕。
4、PPI 與 DPI 之間的基情
PPI: 每英寸所能顯示的像素數。 --- 衡量屏幕清晰度的重要單位,值越大,當然密度就越高,單位尺寸上的像素點就越多,屏幕越清晰;
DPI: 平面設計/印刷計數單位,指每英寸所能印刷出來的網點數。 --- 衡量打印機精度的主要單位,值越大,表示打印機的打印精度越高。
ps:中文版的ps 欺騙了大家十幾年 :(
打開中文ps的新建窗口。寬度高度,指的就是顯示分辨率
印刷設計 - 顏色模式CMYK - 分辨率指的就是DPI
UI設計 - 顏色模式RGB - 分辨率指的就是PPI
5、 安卓的dp/dip、sp 虛擬尺寸單位 ,不受ppi的影響
6、iPhone 分辨率 與 單位轉換
IOS開發虛擬尺寸單位: piont / pt
iPhone6S 真實分辨率:
原則:
主流配置;上下適應,承上啟下;保持清晰度;推薦: 750*1334 主流配置
安卓Android 手機應用結構:
7、Android 基本布局
基準間距原則:
水平外邊距:
8、安卓文字排版標準
文字排版:
逗號不排在最左側;左對齊優先右對齊;標題越重要、級別越大顏色越深、越突出;字號大小有層次;正文寬不要超過320dp;
開發輔助 | 前端開發工程師必懂的 UI 知識