Material Design在项目中常用的设计规范和解析

这篇文章会介绍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

(自己做的一些标注,大家可以参开一下)

      然后是文字规范:   注意:所有文字最小是: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。

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章