*本文基于ios 10&Android 7官方规范进行解读和写作，理解不恰当之处，欢迎指正。本文标注均基于360dp。
上一篇主要对ios 10的UI设计方法细节进行总结分享，本篇说Material Design 设计方法。作为一个优秀的规范，有很多先进的设计理念。特别是响应式布局，栅格化，比例分割，按层级配色，统一图标网格等。Material Design 对于设计有很多详细的理论和指导，虽说国内针对Android设计app的不多，但方法是通用的，连IOS app设计也受到它的影响，我把自己理解到的和大家一同分享交流~
界面基本元素
包含了一个固定的应用程序栏和浮动按钮。底部栏可在需要附加功能的时候有选择性的进行添加。侧边菜单可以覆盖其他所有的结构元素。
从左到右：侧导航，应用程序栏/主工具栏，内容区域和右侧导航。底部：底部栏。7.0中Android底部也有标签栏了，和IOS不同的是，操作栏在顶部，标签栏在底部。当然最有特点的还是侧导航和FAB按钮了。
布局
响应式12栅格
MD希望能用一套规范适应所有设备，可以说是为自适应而生的。因此MD采用响应式的的布局。提到这不得不说说他们的响应式12栅格。这是一套弹性的栅格，确保了不同层级的一致性的布局，根据临界点的规划重排不同尺寸的屏幕。
临界点呢，是指响应式页面发生布局变化的关键点，比如当屏幕宽度小于480px时加载一种样式，而当宽度在480px至600px之间时加载另一种样式。世上的屏幕尺寸五花八门，开发者不可能也没有必要为每个尺寸都去做设计，选定几个临界点，在两个临界点之间是延续上一个临界点的布局，这样皆大欢喜。
MD把屏幕按照大小分成五类，分别是：XS，S ，M ，L， XL。480以下属于XS，600~960属于S，1024~1280属于M，1440~1600属于L，1920以上属于XL。
临界尺寸：宽度包括480、600、840、960、1280、1440、1600像素
栅格：12栅格不是固定不变的，600以下是4栅格，600~720是8栅格，840以上是12栅格。
响应式12栅格主要关注间距，而不是列宽。MD布局中有一个8dp准则。在栅格里，手机通常用16dp，平板通常用24dp。
按照这个理论，如果做720的尺寸，可以分成8栏间距16dp的栅格，每栏76。
比例分割
如果说12栅格主要针对纵向分割，那么横向分割主要是按照宽高比来的。
推荐比例：16:9，3:2，4:3，1:1，3:4，2:3。例如在360dp尺寸做一个2:3的图，那么图片高度是540dp。
配色
MD的配色风格大胆鲜明，亮点突出，主次分明，阴影柔和。官方建议以原色开始，填充光谱色，推荐了500种颜色。这里就不一一放上来了。
他的配色原则非常明确，颜色要分主次，规范中把颜色划分为三种层级：
主色：应用程序中和组件中最常显示的颜色。
次主色：要区别元素之间的层级，可以根据主色的明度来调整。
辅色：主要用于一些局部强调的小元素中，辅色要与主色拉开对比，可以是主色的补色。
MD简直是设计师入门指南好吗？配色苦手的同学用这个方式配色绝对很安全迅速啊。主色通常可以从品牌色里提取，主图也选取近似色，这样一个和谐又清晰的配色方案搞定啦~
配色中的警戒线：不要阻碍了用户识别和使用。不论处于产品或者视觉层面都不要这样做。如果有收到这样的需求要拿着规范(怼)温柔的解释清楚。
比如，通篇都是重点，全部加粗加红，或者主色，次主色，辅色三者对比小到看不出，粘在一起。
这是在测视力吗？
除了彩色，MD对于黑白的显示效果也非常在意，针对不透明也给出了参考，最小值需要好好记住哦，文字和图标最浅38%黑。分割线是12%黑。做WEB的同学，最好不要用透明度标注色值，因为......古老的IE会显示有问题 ==
浅背景文字和图标：
深背景文字和图标：
字体
Roboto是Android上的标准字体，中文字体是Noto Sans。字体单位SP。
基础的排版字号为12、14、16、20，34。通常中文要比英文标准大1px。
对于中文内容来说，行高在23~26dp是比较舒适的。
文本对比度同样推荐7：1。最小不能低于4.5：1。文字与背景过于相似阅读起来就费劲了。
图标
产品图标设计从现实材料的质感和触感中获。像真实纸张一样被裁剪、折叠、照亮。通过干净清晰的边缘来表现坚固，利用微妙的光影变化来展现材料的哑光质感。请欣赏下图google的理性极客派UI设计师做图标的过程。通过做纸模拍摄来得出阴影的深浅和角度。
现在你理解他们的风格了吗？科学到可怕ヽ(*。>Д
在设计图标的时候可以使用下面这个图标栅格，有便于建立一致性，一般来说图标四周留有2dp的出血框，图标的边边角角是可以出现在出血框范围的，但是不能超出。
产品图标为48dp; 边缘为1dp，但在192 x 192 dp(边沿变为4dp)时将其缩放为400％。
系统图标使用较粗的几何线条，要求是：简洁，直观，可操作，一致。
系统图标为24dp，边缘为1dp，如果图标特别密集可以缩小到20dp。所有圆角和线条都是2dp。
特别注意在图标周围流出空间，就算是20的小图标，操作区域也是48哦。并且彼此间隔至少8dp，才能减少误操作。
UI控件规格
*基于xhdpi
之前提过几次8dp的概念，MD设计中所有的组件都以8dp宽的方形网格为基准对齐，工具栏中的图标使用4dp宽的网格。
常用组件尺寸：
标题和列表项：72dp
屏幕的左右边距：16dp
内容距离屏幕的左边距：72dp
侧边导航栏宽度= 屏幕宽度 - 56 dp (最大宽度：320dp)
底部导航栏高：48
状态栏：24dp
App bar高度：56dp
App bar的左右边距：16dp
App bar图标的上下左边距：16dp
App bar标题的左边距：72dp
App bar标题的下边距：20dp
工具栏高度：56dp
标题域高度：80dp
标题域底部边距：8dp
描述域高度：72dp
描述域底部边距：16dp
MD的阴影高度
在第一篇里，我们说MD模拟3D空间，所有对象都有x，y和z轴，z轴用于分层。它规定每层模块占据z轴标准厚度为1dp，相当于160PPI下的1px。
随着物体的高度增加，阴影会变得更柔和、更大；随着物体高度降低，阴影会变得更锐利、更小。
如果元素的阴影相同，那么表示该物体在改版形状，而不是高度。
高度(阴影)的规范
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
