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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
Material Design在项目中常用的设计规范和解析
0.0°
2018-09-14 原创文章 经验/观点 举报 13800 99 72 6

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



 


更新:2018-09-14

收藏

99人已收藏

鼻子打不开

加班炼成泪水,是一种勇敢

  • 5

    作品

  • 62

    粉丝

  • 21

    关注

  • 小麦智能家居APP
  • 来聊聊安卓平板适配问题
  • Spider-man小插画+小动效
  • UI设计师在只做安卓应用时该怎么去做

    猜你喜欢

      2018-09-14 原创文章 经验/观点 举报 13800 99 72 6

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

      0.0°

      你确定要举报Material Design在项目中常用的设计规范和解析

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年04月21日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      72
      99
      6

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

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

      登录

      手机号

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

      登录
      第三方账号登录