Material Design在项目...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
13810 6 72 2017-04-21

这篇文章会介绍MD基本设计架构规范,dp/sp的换算,还有一些设计过程中的注意事项。

上篇文章简单了说了在做Android平台是该注意的事项,这次就具体分享一下Material Desgin在项目中常用的的设计规范,并且怎么去解读这个规范。


一、首先我们简单的了解一下 Material Design    

      我们知道Android平台下的机型分辨率可谓是参差不齐,每个厂商甚至都有特定分辨率,为了在不同分辨率下产品产品体验不会降低,谷歌在发布Android5.0的同时,也规范了其设计语言,它就是Material Design(以下简称MD),也叫作“材料设计”。

       MD区别于苹果设计最大的不同就是强调层级关系,每个版块儿在Z轴上都会有一个高度,如下图:Image title

而且版块儿本身跟现实中的卡片一样,是有厚度的,都是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)

Image title




     然后是文字规范: 注意:所有文字最小是:12sp     

     小字提示 : 12sp    

      正文/按钮文字:14sp

      小标题:16sp

      Appbar文字:20sp

      大标题:24sp

      超大号文字:34/45/56/112sp                  

                                             

                                               重点来了!!!


刚刚上面给出的数值都是dp,sp,但是我们在做设计图的时候怎么去换算成px呢?

我们要了解,dp和sp都是安卓开发单位,dp是长度单位,sp是文字单位。1dp=1sp。

                          我们又要用到这个图片了(一定要收藏起来啊Image title

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。



 


全部评论:6

  • 那个闷油瓶子

    2019-04-16 14:42

    谢谢分享~

  • 鼻子打不开

    2019-03-25 09:57

    @ssscorpion: 嗷,你说出来这个问题我才去查了一下,具体为什么用dpi的原因暂时还没查到,只不过切图工具和开发那边显示的切图就是DPI,等我问清楚了再回复你哈,thanks girl

  • ssscorpion

    2019-03-24 14:38

    请问为啥是dpi不是ppi呀

  • Wurinã92

    2018-10-10 15:08

  • 鼻子打不开

    2018-09-20 10:20

    @Aaaaaaaaronnn: thank you man!

  • Aaaaaaaaronnn

    2018-09-18 09:59

    兄弟,总结的不错!受教了

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票