提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这篇文章会介绍MD基本设计架构规范,dp/sp的换算,还有一些设计过程中的注意事项。
上篇文章简单了说了在做Android平台是该注意的事项,这次就具体分享一下Material Desgin在项目中常用的的设计规范,并且怎么去解读这个规范。
一、首先我们简单的了解一下 Material Design
我们知道Android平台下的机型分辨率可谓是参差不齐,每个厂商甚至都有特定分辨率,为了在不同分辨率下产品产品体验不会降低,谷歌在发布Android5.0的同时,也规范了其设计语言,它就是Material Design(以下简称MD),也叫作“材料设计”。
MD区别于苹果设计最大的不同就是强调层级关系,每个版块儿在Z轴上都会有一个高度,如下图:
而且版块儿本身跟现实中的卡片一样,是有厚度的,都是1dp。版块儿的高度是通过阴影来体现出来的,在Android5.0以后的版本,开发人员可以通过设计一个值(下面会说具体值是多少)就可以实现,在5.0以下开发起来可能会有难度。
二、接下来就看看做设计稿时布局的基本规范
注意:1. 所有可操作元素最小点击区域是 48dp
2. 所有距离,尺寸都应该是8dp的整数倍(涉及到栅格系统,我也在研究 中,先记住)
状态栏高度:24dp
标题栏(Appbar)最小高度 : 56dp(因为有的应用会把导航和标题合到一起, 到时候标题栏的高度就会增加)
底部导航栏:48dp
悬浮按钮(FAB):56*56dp/40*40dp(FAB按钮在百度贴吧和淘宝的iOS客户 端中被借鉴)
用户头像:64*64dp/40*40dp
小图标尺寸:24*24dp 点击区域:48*48dp
侧栏到屏幕右边的距离 : 56dp
卡片间距:8dp
大多数元素的留白区域:46dp
分隔线上下留白:8dp
屏幕左右对齐基线:16dp
文字左侧距屏幕的距离:72dp
(自己做的一些标注,大家可以参开一下,设计稿尺寸:1920*1080)
然后是文字规范: 注意:所有文字最小是:12sp
小字提示 : 12sp
正文/按钮文字:14sp
小标题:16sp
Appbar文字:20sp
大标题:24sp
超大号文字:34/45/56/112sp
重点来了!!!
刚刚上面给出的数值都是dp,sp,但是我们在做设计图的时候怎么去换算成px呢?
我们要了解,dp和sp都是安卓开发单位,dp是长度单位,sp是文字单位。1dp=1sp。
我们又要用到这个图片了(一定要收藏起来啊)
dp和px之间的关系:1dp是屏幕密度为160dpi时的1px,也就是说在密度值为160dpi的情况下,1dp=1px。
上图中,以mdpi(160dpi)为基准,和其他密度的比例关系是:
3/4 : 1 : 1.5 : 2 : 3
ldpi:mdpi:hdpi:xhdpi : xxhdpi
以1920*1080(我认为是当前主流分辨率)为例:
在1920里,1dp=3px,上述规范中,状态栏高度是24dp,所以在设计稿中状态栏的高度就是72px。其他的以此类推。
最后我们来说一下怎么计算dpi,很简单哦!
dpi就是一英寸显示多少像素点,也就是dpi=像素/英寸(对角线长度)
以1920*1080,5.0英寸的屏幕为例:
先利用勾股定理(A的平方=B的平方+C的平方),我们可以算出来对角线的像素是2203px,然后除以5等于440,所以,分辨率在1920*1080,5.0英寸下的dpi是440dpi。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册