PPI(Pixelsperinch):每英寸所拥有的像素数,即像素密度。
DPI(dotsperinch):即每英寸上,所能印刷的网点数,一般称为像素密度。ppi计算公式:ppi=屏幕对角线像素数/屏幕对角线英寸数,通过勾股定理计算屏幕对角线像素数。
ScreenSize(屏幕尺寸):手机屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是对角线的长度。
DIP(deviceindependentpixel):即dip/dp,设备独立像素。1px=1dp
density(由dpi决定)
Resolution(分辨率):指手机屏幕垂直和水平方向上的像素个数。eg分辨率480
800,指该设备垂直方向有800个像素点,水平方向有480个像素点。
px(Pixel像素):相同像素的ui,在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真,大分辨率上被缩小。
AndroidDesign里把主流设备的dpi归成了四个档次:
120dpi、160dpi、240dpi、320dpi
,具体见如下表格。
实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照dpi之间的比例即2:1.5:1:0.75来给界面中的元素来进行尺寸定义。
也就是说如果以160dpi作为基准的话,只要尺寸的DP是4的公倍数,XHDPI下乘以2,HDPI下乘以1.5,LDPI下乘以0.75即可满足所有尺寸下都是整数pixel。但假设以240dpi作为标准,那需要DP是3的公倍数,XHDPI下乘以1.333,MDPI下乘以0.666,LDPI下除以2。而以LDPI和XHDPI为基准就更复杂了。同时第一款Android设备(HTC的T-MobileG1)是属于160dpi的。鉴于以上各种原因,
标准dpi=160
谷歌官方对dp的解释如下:
AvirtualpixelunitthatyoushouldusewhendefiningUIlayout,toexpresslayoutdimensionsorpositioninadensity-independentway.
Thedensity-independentpixelisequivalenttoonephysicalpixelona160dpiscreen,whichisthebaselinedensityassumedbythesystemfora"medium"densityscreen.Atruntime,thesystemtransparentlyhandlesanyscalingofthedpunits,asnecessary,basedontheactualdensityofthescreeninuse.Theconversionofdpunitstoscreenpixelsissimple:
px=dp*(dpi/160).
Forexample,ona240dpiscreen,1dpequals1.5physicalpixels.Youshouldalwaysusedpunitswhendefiningyourapplication'sUI,toensureproperdisplayofyourUIonscreenswithdifferentdensities.
简单来说,以160dpi的设备为准,该设备上1dp=1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2个像素)。在app开发时,最好用dp来做界面的布局,以保证适配不同屏幕密度的手机。
dp和px的换算公式:
我的理解,该公式表示px的数值等于dp的数值*(设备dpi/160)
注意,px、dp是单位,但density没单位。
applyDimension的源码如下,可参考:
android的尺寸众多,建议使用分辨率为
720x1280
的尺寸设计。这个尺寸720x1280中显示完美,在1080x1920中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。
app启动图标为48*48dp,对应各dpi设备,图像资源像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|48
48px|72
72px|94
96px|144px
144px|
操作栏图标为32*32dp,对应各dpi设备,图像资源像素如下:其中图形区域尺寸是24*24dp,可参考平时ui切图会有部分留白。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|32
32px|48
48px|64
64px|96px
96px|
通知栏图标为24*24dp,对应各dpi设备,图标像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|24
24px|36
36px|48
48px|72px
72px|
某些场景需要用到小图标,大小应当是16*16dp,其中图形区域尺寸12*12dp。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|16
16px|24
24px|32
32px|48px
48px|
APP界面标注及切图注意事项一、App屏幕适配通用知识简介
1.标注时注意事项
一般情况要定位一个Icon只需给出上/下边距,左/右边距
标注图标距离只需标到可点击范围外
通用型颜色、字体单独标明一份
通用型模块只需单独标明一份,如导航栏
手机可视区域一般为宽度固定,长度超出边界可滑动,所以,标注物体宽度时可按比例说明
如果要标注内容上下居中,左右居中,或等比可不标注
当绘制的是一个列表时且每一条内容一样时,只需标注一条,如果每条内容有少许不同时,只需标明差异____糠
当交付的是一张完整图片时,不需做机型适配,只需给高清图(1920*1080)即可,注意进行压缩
当背景是纯色时只需给出色值(iOS使用RGB色值,Android使用16进制色值)
图标应给出可点击区域
若图标在不同页面重复出现,且尺寸相差不大,直接给出最大一份切图,并在圆形图标明尺寸,程序会根据需求缩放
可点击按钮通常要给出两种状态:普通/点击(选中)
按钮如果只是矩形、圆角矩形、圆形、椭圆形,给出尺寸和色值,可程序设置
渐变效果可通过程序实现,只需给出起始和结束色值跟范围
2.切图命名规范
背景:bg_
按钮:btn_xxx_
图片:img_
标签:tab_
图标:icon_
照片:pht_
导航:nav_
图示:tip_
菜单:menu_
侧栏:sidebar_
二、iOS应用屏幕适配
1.iOS究竟要是适配多少种机型,以哪款机型分辨率作为设计尺寸最好
2016-3
iOS只需兼容iPhone4,完美兼容iphone5以上机型
如果按矢量图制作设计图按1X尺寸作图,后期放大成2X、3X;如果按传统的px作图应用最大尺寸(3X)作为画布。
以3X作为画布(1242*2208)难记且不能整除,我们可直接以1280(640*2)作为宽度,完美缩放为1X、2X;
2X->3X以1.5来算尺寸和字号可得到较好效果
2.界面尺寸
设备分辨率状态栏高度导航栏高度标签栏高度
iPhone6plus1242*2208px60px132px146px
iPhone6750*1334px40px88px98px
iPhone5/5s/5c640*1136px40px88px98px
iPhone4/4s640*960px40px88px98px
iPad3/4/Air/Air2/mini22048*1536px40px88px98px
iPad1/21024*768px20px44px49px
iPadmini1024*768px20px44px49px
导航栏背景图中,如果考虑状态栏背景,则背景图尺寸为导航栏px+状态栏px,如果只改变导航栏颜色则只需要导航栏px
3.图标尺寸
设备AppStore程序应用主屏幕spotlight搜索标签栏工具栏和导航栏
iPhone6plus1024*1024px180*180px144*144px87*87px75*75px66*66px
iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px
iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px
iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px
iPadmini1024*1024px90*90px72*72px50*50px25*25px22*22px
按钮切图建议以等宽高尺寸切图,且像素必须>=88、*88px,当本身图片宽度或高度不足时,补充空白像素(透明像素).一般情况下,只需要普通状态下按钮切图即可
(适配不建议等比放大)
4.参考文献
友盟设备指数
APP切图流程和APP切图命名规范详细完整版
APP切图详细规范终极指南
iOS和Android的app界面设计规范
APP界面切图命名和文件整理规范
三、Android应用屏幕适配
1.用px作为基础单位的缺陷
对比上图可以知道,ppi越低图片显示的越大,ppi越高图片显示的越小,造成不同手机上显示图片布局不统一!
使用dp作为单位所有机子显示统一
2.衡量一个屏幕清晰度单位————屏幕密度(dpi==ppi)
计算公式:屏幕dpi=√(屏幕长^2+屏幕宽^2)/屏幕尺寸
名称密度代表分辨率Android单位与像素换算
mdpi120dpi~160dpi320*4801dp=1px
hdpi160dpi~240dpi480*8001dp=1.5px
xhdpi240dpi~320dpi720*12801dp=2px
xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px
xxxhdpi480dpi~640dpi2k~4k1dp=4px
屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画
320*480px48*48px32*32px16*16px24*24px不小于2px
480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小于3px
720*1280px96*96px64*64px32*32px48*48px不小于4px
1080*1920px144*144px96*96px48*48px72*72px不小于6px
3.究竟要适配多少种机型
2016-3
得出结论:只需适配高端的xxhdpi(720*1280/1080*1920),低端的hdpi(480*800)
4.度量单位与边框
可触摸控件都是以48dp为单位的
为什么是48dp?一般情况下,48dp在设备上的物理大小是9mm(会有一些变化)。这刚好在触摸控件推荐的大小范围(7-10mm)内,而且这样的大小,用户用手指触摸起来也比较准确、容易。(xxhdpi标准下为144px)
边框注意留白界面元素之间的留白应当是8dp。
例:
5.字体排版
Roboto是Android系统的默认字体集,字体大小单位sp(可缩放像素数,scaleablepixels)
根据Android设计规范,推荐使用12、14、16、20和34号,字体粗细可调
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
(注意:字号要为双数,且不可带小数位)
6.9-patch图制作
什么是9-patch图
为什么要用9-patch格式制作图
适应各种手机屏幕拉伸图片需求,有效缩减图片体积
什么情况下使用
当发现图片是背景时且可能拉伸被拉伸时,或图片过大时
如何制作patch9图
图片外层增加一全透明像素,在透明像素区花4条纯黑色边
1.宽度可拉伸区域
2.高度可拉伸区域
3.垂直内容区域
4.水平内容区域
8.参考文献
友盟设备指数
Android设计指南简体中文版4.x
MaterialDesign中文版
Android设计中的.9.png
技术干货：ApplewatchAPP设计规范一、规范概要
1.导航形式
层级式,通过当前页面点击跳转到另外页面的形式。适合应用于复杂产品,需要层层递进。
页面式,页面切换,滑动,类似轮播
AppleWatch导航形式任选其一,不得同时存在。
2.交互方式
轻触:列表、按钮、切换等控件的操作
手势:纵向轻扫,界面滚动;横向轻扫,界面导航之间的查看;从屏幕左侧边缘向右轻扫,返回父级界面。
压力触控:唤出当前页面情景菜单
实体控件(手表旋钮):长页面浏览,避免手指长时间轻扫界面何遮挡界面
3.色彩
使用黑色作为APP的背景色,或者深色且高斯模糊的图片作为背景
高对比度的颜色使用于文字、图标、界面
4文字
SF和苹方
5.图标
通知图标、首屏图标和长看图标、短看图标
情景图标(App内功能图标)
6.布局
并排放置的图标一行不要超过三个
布局优先采用左对齐
二、设计尺寸
1.1屏幕尺寸
38mm(272*340px)
42mm(312*390px)
1.2图标尺寸
通知图标48PX(38mm)55px(42mm)
首屏图标和常看图标80px(38mm)88px(42mm)
短看图标172px(38mm)196px(42mm)
菜单情景图标(App内的功能图标)
图标大小70px,实际图标大小46px。(38mm)
图标大小80px,实际图标大小54px。(42mm)
图标线宽不得小于4px
1.3图标
1.3.1
通知图标,系统通知弹出的图标
1.3.2
首屏图标,如下图所示。首屏图标80px(38mm)88px(42mm)
1.3.3长看图标,如下所示,左上角图标。常看图标80px(38mm)88px(42mm)
1.3.4短看图标,如下图所示。短看图标172px(38mm)196px(42mm)
2.字体和文字
2.1字体
SF和苹方
2.2文字(字号,常见字号单位是PT和PX,PT是开发单位,PX是设计单位,在@2X下换算关系1PT=2PX)
标题headline18PT
正文标题caption15PT
正文body15PT
备注、脚注、辅助文字footnote12PT、13PT
3.颜色
高对比度的颜色使用于文字、图标、界面
1.主色,如下图所示
2.辅助色、点睛色(控件、按钮)
按钮控件在设计中通常带有透明度
3.字体颜色和透明度
4.布局
1状态栏和下方图片和列表布局间距
38mm(30px),42mm(32px)
2状态栏和列表按钮布局间距
38mm(11px),42mm(13px)
3状态栏和下方文本布局间距
38mm(46px),42mm(50px)
4文字边距和分割线按钮列表图片边距
38mm和42mm边距相同
5.图片和按钮到屏幕两边距离
38mm和42mm边距相同
5.控件和列表
1单行控件和列表布局尺寸
38mm
42mm
2.双行控件和列表布局尺寸
2.1正文+备注
38mm
42mm
2.2双行正文
38mm
42mm
3.三行控件和列表布局尺寸
38mm
42mm
4.多行控件和列表布局尺寸
38mm
42mm
5.控件和列表类型
_