【界面设计】必须了解的Android设计规范

【界面设计】必须了解的Android设计规范

  • 最近更新2019年01月22日

写在前面

在我们平时的项目中,留给我们发挥的空间很大,很多时候没必要去刻板遵守设计规范,但是作为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 )

如果还是对这里感觉不太清楚的同学可以看这两个解释,更详细:

二、设计尺寸

以下是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 的设计规范都应该非常了解,这样在完成项目的时候才能够更加得心应手,不会在一些基础的问题上犹豫不决。

希望这篇对大家有帮助~

作者:@ 野驴少女

分享到 :

发表评论

登录... 后才能评论