恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
【界面设计】必须了解的Android设计规范
0.0°
2018-08-22 原创文章 规范/资料 举报 29336 172 88 8

写在前面


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


举个例子:

Image title


假设在同一面积的房间里放爱心,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的密度划分以及代表的分辨率:

Image title

目前做安卓计稿时一般采用1080×1920px,因为它是现在的主流尺寸,方便适配。





三、字体

中文:思源黑体(“source han sans”和“noto sans CJK”)

英文:Roboto





四、基础组件

间距与元素尺寸:

大多数间距单位是8dp的整数倍,对齐间距和整体布局。
较小的组件(如图标和排版)可以与4dp网格对齐。

Image title


App bars : Top

Image title


App bars : bottom

Image title


icon 尺寸

Image title


icon 有效触摸范围

Image title





五、切图 & 标注


切图


一般来说,提供3套切图资源就可以满足适配:HDPI、XHDPI、 XXHDPI 。

命名:模块_功能_控件_状态-xhdpi.png

Image title


具体可查看此表格



标注

建议用 DP 与 SP 去标注页面,不推荐 PX
( 在资源输出之前要与搭档开发进行充分沟通,会减少很多不必要的问题发生 )




六、常用命名规范


Image title

Image title


Image title




七、相关资料链接

附上相关资料的链接供大家查阅。

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


希望这篇对大家有帮助~


Image title









更新:2018-08-22

收藏

172人已收藏

Alebrije

任何值得去的地方都没有捷径。

  • 11

    作品

  • 150

    粉丝

  • 121

    关注

  • 一致性原则
  • 学会 “ 聪明地工作 ”
  • 提高你的行动力
  • 「果冻喵」表情包

    猜你喜欢

      2018-08-22 原创文章 规范/资料 举报 29336 172 88 8

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

      0.0°

      你确定要举报 【界面设计】必须了解的Android设计规范

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      88
      172
      8

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录