提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
写在前面
在我们平时的项目中,留给我们发挥的空间很大,很多时候没必要去刻板遵守设计规范,但是作为UI设计师不仅仅要把手上功夫练好,基本的主流设计规范也要了解。
这次整理了一个“精简版”Android设计规范,方便大家在需要的时候快速查看。
大纲
1、单位换算
2、设计尺寸
3、字体
4、基础组件
5、切图 & 标注
6、常用命名规范
7、相关资料链接
8、总结
一、单位换算
主要了解:DP、SP;以及与PX之间的转换关系。
详细介绍:
DP
dip,Density-independent pixel, 是安卓开发用的长度单位,dp会随着不同屏幕而改变控件长度的像素数量。
1dp表示在屏幕像素点密度为160ppi时1px长度。
比如:我将一个控件设置长度为1dp,那么在160dpi上该控件长度为1px,在240dpi的屏幕上该控件的长度为1*240/160=1.5个像素点。
SP
dp是长度单位 , sp是字体单位。
sp与dp类似,但是可以根据用户的字体大小首选项进行缩放。
一般情况下可认为sp=dp。
PX
pixel,像素,电子屏幕上组成一幅图画或照片的最基本单元。
平常我们所说的界面尺寸:1920×1080 —— 是像素数量,也就是1920px×1080px(代表手机高度上有1920个像素点,宽度上有1080个像素点)
DPI
dot per inch,每英寸多少像素点,该值越高,则图片越细腻。
PPI
ppi是指屏幕上的像素密度,其计算方法为:
公式: ppi= 屏幕对角线上的像素点数/对角线长度 = √ (屏幕横向像素点^2 + 屏幕纵向像素点^2)/对角线长度
DP 转 PX(划重点)
举个例子:
假设在同一面积的房间里放爱心,1颗心相当于1PX,放心的面积就相当于DP,所以一个房间里能放多少爱心,1DP等于多少PX,这完全取决于爱心的密度。
如上图两个房间的面积同是1DP,那么左边的因为密度大,所以PX值就高,右边的因为密度小,所以PX值就少。
所以我们可以把PX看成是单位个数,DP看成是单位面积,所以PX(个数) /DP(面积)=密度。
PX/DP=密度
而密度=ppi/160,所以PX/DP=ppi/160
* DP 转 PX公式:
px = dp值×(当前dpi / 160 dpi )
dp = px值×( 160 / 当前 ppi )
如果还是对这里感觉不太清楚的同学可以看这两个解释,更详细:
http://www.woshipm.com/pmd/176328.html
https://www.cnblogs.com/JLZT1223/p/6784449.html
二、设计尺寸
以下是Android的密度划分以及代表的分辨率:
目前做安卓计稿时一般采用1080×1920px,因为它是现在的主流尺寸,方便适配。
三、字体
中文:思源黑体(“source han sans”和“noto sans CJK”)
英文:Roboto
四、基础组件
间距与元素尺寸:
大多数间距单位是8dp的整数倍,对齐间距和整体布局。
较小的组件(如图标和排版)可以与4dp网格对齐。
App bars : Top
App bars : bottom
icon 尺寸
icon 有效触摸范围
五、切图 & 标注
切图
一般来说,提供3套切图资源就可以满足适配:HDPI、XHDPI、 XXHDPI 。
命名:模块_功能_控件_状态-xhdpi.png
具体可查看此表格
标注
建议用 DP 与 SP 去标注页面,不推荐 PX
( 在资源输出之前要与搭档开发进行充分沟通,会减少很多不必要的问题发生 )
六、常用命名规范
七、相关资料链接
附上相关资料的链接供大家查阅。
Android 设计尺寸:
https://material.io/devices/
Android 设计规范:
https://developer.android.com/design/index.html
Google 设计规范:
https://design.google.com/
Material Design 设计规范:
https://material.io/
总结
作为UI设计师,Android 与 iOS 的设计规范都应该非常了解,这样在完成项目的时候才能够更加得心应手,不会在一些基础的问题上犹豫不决。
希望这篇对大家有帮助~
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册