初入UI 的小朋友们都会很懵设计规范,加上前段时间微软雅黑字体“出事了”!这些其实并不影响一个UI设计师的能力提升,但规范、字体确实UI设计师的工作基础。博主从业以来收集了很多资料,今天准备整理出来,新手可鉴。
(摘自sumaart及知乎,已在每章段标注作者,摘抄于此仅为分享及自己备份,如介意请联系作者删除)
关于设计规范
一、像素密度
像素密度,即每英寸屏幕所拥有的像素数,像素密度越大,显示画面细节就越丰富。像素密度=√{(长度像素数^2+宽度像素数^2)}/ 屏幕尺寸。
注:屏幕尺寸单位为英寸
例:分辨率为1280*720 屏幕大小(对角线长度)为6英寸 计算所得像素密度约等于245
二、计量单位
iOS和Android平台都定义了各自的像素计量单位。iOS的尺寸单位为pt,Android的尺寸单位为dp。单位之间的换算关系随倍率变化如下:
1倍:1pt=1dp=1px(mdpi、iPhone 3gs)
1.5倍:1pt=1dp=1.5px(hdpi)
2倍:1pt=1dp=2px(xhdpi、iPhone 4s/5/6)
3倍:1pt=1dp=3px(xxhdpi、iPhone 6)
4倍:1pt=1dp=4px(xxxhdpi)
在设计和开发过程中,应该尽量使用逻辑像素尺寸来思考界面。Android的最小点击区域尺寸是48x48dp,这就意味着在xhdpi的设备上,按钮尺寸至少是96x96px。而在xxhdpi设备上,则是144x144px。无论画布设成多大,我们设计的是基准倍率的界面样式,而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通,双方都需要以逻辑像素尺寸来描述和理解界面,无论是在标注图还是在日常沟通中。(博主从业后遇到了很多设计师并不了解逻辑像素是怎么回事,关于逻辑像素博主将在以后的博文中做出详细讲解。)
三、IPHONE 所有型号的尺寸
1.0) iPhone x
分辨率:1125×2436px
PPI:458PPI
状态栏高度:132px
导航栏高度:132px
标签栏高度:147px
屏幕尺寸:5.8 in
1.1) iPhone6\7\8 plus设计版
分辨率:1242×2208px
PPI:401PPI
状态栏高度:60px
导航栏高度:132px
标签栏高度:147px
屏幕尺寸:5.5 in
1.2) iPhone6\7\8 plus放大版
分辨率:1125×2001px
PPI:401PPI
状态栏高度:54px
导航栏高度:132px
标签栏高度:147px
屏幕尺寸:5.5 in
1.3) iPhone6\7\8 plus物理版
分辨率:1080×1920px
PPI:401