UI设计规范⼀Android尺⼨单位换算及切图规范说明:
1.对象为UI设计师和Android⼯程师等开发⼈员。
2.⽅法有千种,开发⼯程师有万个,仅供参考,不喜就拿着你的建议留⾔,勿喷。
3.⽂档的本质是备份与查看,对外⽅便协作与对内提升效率。
4.⽂档不是万能的,如果⽂档查看对象看不懂,就没任何意义。我喜欢当⾯沟通,因为能避免⼤部分⽂档的局限性
5.感谢Android开发⼯程师⾼鹏的指正与指导。
Android规范
⼀:⼿机尺⼨
Android是必须要讲下⼿机尺⼨的:(只是常规,特殊尺⼨就不讲,如:1200x1600像素的惠普Slate8 Pro)
px]
1. mdpi[320x480px
1. mdpi[320x480
市场份额少,新⼿机不会有这种倍率,屏幕通常都特别⼩
、540x960px
px]
px、540x960
、480x854px
2. hdpi [480x800px
px、480x854
2. hdpi [480x800
早年的低端机屏幕在3.5英⼨档位-⽬前很少
px]
3. xhdpi[720x1280px
3. xhdpi[720x1280
即平常我们看视频讲的720P,设计图也有⼈按照此分辨率进⾏设计
4. xxhdpi[1080x1920px],[1440x2560px]
这⾥强调:⽬前1080x1920和2560×1440然后都是xxhdpi,适配难免会有误差,下边换算我会再讲到
即平常我们看视频讲的2K⾼清,或1080P,⾼清视频就需⽀持此类像素。如今⽐较常⽤,设计图也⼤多以1080这个尺⼨做。
主流尺⼨-也是主流设计尺⼨
4K(3840×2160)
5. xxxhdpi,
5. xxxhdpi,4K(3840×2160)
就是我们现在所说的4K屏⼿机,也逐渐多了起来,也有设计者针对特殊的设计要求按照此设计尺⼨做其他
6.6.其他
如魅族MX4 Pro 1536x2560 三星T705的 1600x2560 这些尺⼨暂时我也没⽤到,以后有机会再补充...
⼆:单位换算
dpi的计算⽅式就是(1080*1080+1920*1920)开⽅然后除以屏幕尺⼨,然后你看dpi落在哪个表格区间
区间
1倍:1pt=1dp=1px dpi=160 (mdpi,即320x480px)
1.5倍:1pt=1dp=1.5px dpi=240(hdpi,即480x800px等)
2倍:1pt=1dp=2px dpi=320(xhdpi,即720x1280px)
3倍:1pt=1dp=3px dpi=480(xxhdpi,即1080x1920px和1440x2560px)
1pt=1dp=4px dpi=640(xxxhdpi,即4K(3840×2160)
4倍:1pt=1dp=4px
4倍:
倍率
字体:1sp=1dp(字体⼤⼩单位sp,这个⽐较复杂,因为系统为了使字体显⽰的更清楚会对你设置的⼤⼩做补偿,可能⼤点或⼩了点,⼀般我字体:1sp=1dp
们使⽤这样的换算)
能得到与基准倍率近似(注意,这⾥是近似
近似,安卓开⾃然地,以1倍的mdpi作为基准。像素密度更⾼或者更低的设备,只需乘以相应的倍率,就能得到与基准倍率近似(
)的显⽰效果。如:
发和设计图会有区别本质在于倍率的误差,我们能做的只是减⼩误差)
在3倍情况下的⽐如1080和2560×1440然后都是xxhdpi,那么后者屏幕除以3得到的长的总dp和宽的总dp都⽐1080的多。
不过需要注意的是,Android设备的像素尺⼨并不统⼀。⽐如两种常见的屏幕480×800和1080×1920,它们分别属于hdpi和xxhdpi。除以各
各种
⾃倍率1.5倍和3倍,得到逻辑像素为320×533和360×640。很显然,后者更宽更⾼,能显⽰更多内容。所以,即使有倍率的存在,各种Android设备的显⽰效果仍然⽆法做到完全⼀致。
由此:
每个开发写代码⽅式不同,设计图和开发出来的样式难免会有不同。我们该积极的去寻解决办法,减⼩误差,⽽不是相互的推卸责任。要知道我们的共同⽬的都是为了产品能更好更快得投⼊市场。
...
三:字体
⾃从Ice Cream Sandwich发布以来,Roboto都是Android系统的默认字体集。在这个版本中,将Roboto做了进⼀步全⾯优化,以适配更多平台。宽度和圆度都轻微提⾼,从⽽提升了清晰度,并且看起来更加愉悦。
Android系统字体有:
Droid Sans、 Droid Serif 、 Droid Sans Mono、f、f、f、Roboto-
...
四:设计基础尺⼨
主流尺⼨:(xxhdpi)1080x1920, (xhdpi)720 x 1280。Android⽐iPhone的尺⼨要多,在适配上也是相对⽽⾔⽐较⿇烦,在设计中⼀般是采⽤1080x1920px的设计尺⼨。
Android常规尺⼨(px)
在Android设计尺⼨规范没有iPhone那样具体的规范,这也决定了安卓的灵活性更强,发挥的空间也越⼤。现在安卓的⼿机最近的⼏版新系统的许多交互细节都超越了iPhone。
Google Play上显⽰的启动器图标是512x512像素。
移动设备上的启动器图标是48x48 dp。
⼿机的动作栏图标应为32x32 dp。
通知图标必须是24x24 dp。
⼩图标应为16x16dp。
说明:这⾥我所列举的只是⼀些常规的,不能代表所有,仅供参考。因为⼿机千变万化,系统不断的更新,设计也要循序渐进额的跟上,现在⽹上⼀些设计规范竟然细到了连⼀个页⾯上按钮的⼤⼩都规定好,那还叫设计么。
五.切图与命名
⽂件包命名规则是:项⽬名字+切图+作者名字+⽇期
例如:蚂蚁⾦服基⾦3.5.8.5版本迭代-H5页⾯设计_切图_李笑_20170321
⽂件包压缩⽤.rar或.zip格式
⽂件包要包括:image(切图),效果图+标注图,切图简单说明(word等⽂件)。
说明:效果图必须是要有的,对于标注图可以根据技术需求,沟通必不可少
提供给程序开发的⽂档打开
1.切图说明
ps切图尺寸变小在图⽚的命名中不要有中⽂、特殊符号以及空格,字母必须是⼩写字母。在命名中很多可以是缩写,技术⼀般也是按照这样来分类。
模块_类别_功能_状态.png (状态会有:点击状态,点击压下状态,禁⽤状态,选中状态等)
建议具体命名⽅法是:模块_类别_功能_状态.png
如:home_bg_nologin.png和home_di_nologin.png
2.常⽤缩写
ic----icon(在app的图标),bg----background,di----divider(主要⽤于分割线,不仅包括Listview中的divider,还包括普通布局中的线),sl----selector,avg----average,ctrl----control,del----delete,doc----document,err----error,inc----increment,info----
information,img----image,lib----library,msg----message,pwd----password,pos----position
主要的功能界⾯,就是App界⾯中的activity,在⼀个产品中可以有很多 activity
然后每个页⾯主要功能基本上可以包括:nav , tab /toolbar , menu .
备注:不要⾃⼰定义缩写,除⾮是约定成俗的。((当然不喜欢⽤缩写的可以全拼,这⾥仅供参考))
3.后缀
nor--普通状态
pressed--按下或者是点击后效果
例如按钮(btn):home_btn_select_nor.png / home_btn_select_pressed.png
4.注意事项
(1). 切图需要⼏套分辨率的图:如1080*1920,720*1280。分别放在不同的⽂件夹中,同⼀张图⽚,在两个⽂件夹中的名字要⼀致。(2).如遇到可拉伸可平铺的图⽚,使⽤9Patch进⾏制作,产⽣xxx.9.png图⽚即可,优点:灵活度⼤,可复⽤,程序包⼤⼩减少,增加程序运⾏效率。(.9切图教程⽹上很多⽐我说的好且详细)
(3). 对于开发⼈员需要页⾯间距尺⼨,我们可以使⽤“标你妹啊”“MarkMan”等软件进⾏测量以及可以测出相对应需要提供的⾊值(提前和开发沟通好所需,能节省设计师的⼤部分时间和最后的开发修正时间)
卡卷包与会员中⼼图⽚⼤⼩⼀致
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论