安卓UI (三) — 设计规范

“这是安卓UI第三篇文章，主讲Material Design设计规范里的一小部分，建议大家花时间去研读官方设计文档，这样可以系统性掌握知识。”“因为我开始写文章没多久，完全是自我总结的思路，并没有追什么热点写，所以算不上什么新鲜知识，但是既然是总结，我都尽量系统和全面。特别感谢每一位我的朋友，比心心~虽然每次只有十几阅读量，但我写作的初心并不在此，而是时间太多打发闲余时间而已，不要太羡慕我。”

01. 什么是设计规范

设计规范是对设计过程的规则描述，目的是形成统一的视觉体验。规范的制定者一定是权威性的，即对用户体验、视觉、交互都有深入的研究。

设计规范可以按范围划分，即平台设计规范、某一类产品设计规范、某个产品设计规范。平台设计规范，主要针对公司整体产品制定规范，目的是统一品牌特性，需要有的设计主管制定。某一类产品设计规范，比如APP，Web，海报，包装，印刷等，它是一个行业规范，需要很高的权威性，参考价值高，是每一个初级设计师的入门知识。指具体的某个产品，它是公司某个产品设计规范，人员根据开发的产品，自己拟定，不具有扩散性，相对主观，只能供公司内部人员交流使用。

今天这片文章属于“某一类产品设计规范”的范畴。

大多数时候，我们做设计之前，对设计规范并不那么重视，导致设计总是不那么精致，并且找不出原因。设计规范对于初级设计师来说，有非常重要的作用，因为规范也是站在美观的角度制定的，按照规范设计，可能会扼杀你的个人风格，但是必须先学会走才能学会跑，我们需要一颗谦逊的心态看待规范，并超越规范。

02. Material Design简介

它是谷歌为了在安卓平台上统一视觉体验，在Android 5.0系统使用的一种新的设计风格。从Material Design发布以来，谷歌先后进行过多次修改，作为设计师，需要时刻官方设计文档的变更，但同时，是否采用Material design设计风格，取决于项目本身。

Material Design“材料设计“，所谓“材料设计“，即借助纸张隐喻，将界面用卡片作为信息的载体。这里的纸张隐喻，不是模拟纸张的纹理和质感，而是模拟纸张的叠加、抽拉、翻转等空间关系。但同时也利用了设计的创造性，对纸张性质做了新的描述，包含：阴影和层级（空间深度）、纸张拼贴变形、响应式设计、浮动按钮、触摸波纹。

Material design在交互上充分考虑纸张在现实世界的变化过程，每个操作都有反馈，动画效果流畅自然，是一种可以媲美苹果的优秀设计风格。

在苹果iOS7发布时，苹果同样有空间深度的概念，不过相对远的距离不是用阴影表示，而是采用带有景深效果的毛玻璃处理方式。除了导航栏上微弱的浅景深效果，苹果还在导航栏底边用细线来修饰，这实现了阴影的目的：区隔。页面不滚动的时候它只是分割线，但当页面滚动时，这条线就类似于阴影，区分了上下层。苹果没有采用阴影可能觉得太拟物了。

谷歌的设计规范里，包含的内容很全面，这里只简述常用的设计知识，包含了颜色、文字、布局。

官方文档大纲

03. MD色彩规范

MD风格的颜色特点是：大胆的色调、柔和的环境、深度的阴影和明亮的高光并存。

MD文档给出了两个重要工具“颜色工具”“调色板”，前一个用来实时预览配色效果，后一个是配色参考模板，简直是色残党的福音呐。

颜色工具

链接地址：https://material.io/color/

颜色工具里有很多官方建议的颜色可选，包含主色和强调色，以及各自的深色和浅色，并且有模板可以实

时预览效果，还是很有实用性的。

但对于色块上文字透明度的规定，我觉得数值太多，不方便记忆，在实际工作中，我们可以在设计稿中肉眼设置即可，实在拿不准的，可以看看参考值。记住，色块上的文字是有透明度的就可以了。

配色参考

文字不透明度参考

调色板

调色板里有20种参考颜色，每一种颜色又有12个深浅度不同的颜色。嗯，这些颜色都很谷歌，高亮度高饱和度，颜色都很很漂亮。

接下来就是重点了！

来自谷歌的官方建议

• Google 建议使用 500 色号的颜色作为主色调，你可以在颜色模板里选择一个和品牌颜色类似的。
• 用不同深浅度的主色在元素之间形成对比度，即选择一个主色系，再搭配不同饱和度和明亮度的颜色形成对比。（这些深色浅色谷歌都有给参考）
• 辅助色可以是和主色互补的，也可以是和主色类似的。但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比（即只要和周围环境形成对比就ok），并作为强调，且应谨慎使用（主题色不是必须存在的）。
• 辅助色最适合用于：按钮、浮动操作按钮、按钮文本，文本框、光标、文本选择，进度条，选择控件、按钮、滑块，链接，标题。（这个很有参考价值！）
• 对于浅色背景中的深色文本，使用以下不透明度（填充纯黑色）： 重要文本 87%；辅助文本54%；       文本提示（例如文本框和标签）、禁用状态的文本38%；分割线12%；彩色色块上的文本不能加不透明度。

• 对于暗色背景上的白色文本见下图（填充纯白色）：文本不透明度的规定也相当重要，可能你和优秀的设计就是一个透明度的差别。

7. 图标不透明度：

8. 主题

为了保持风格统一，谷歌规定了亮色和暗色两种主题的界面颜色搭配模板，其实就是规定了黑色和白色的不透明度。

亮色主题

状态栏：填充黑色#00000，不透明度24%。

应用栏：谷歌规定的500号色。

背景：亮度98%的纯灰色，#FAFAFFA。

卡片/对话框：纯白色，#FFFFFF。

还不明白的小伙伴可以下载谷歌的主题模板，至于深色主题，我觉得平时用不上，就不多讲了。

04. MD文字规范

谷歌官方规定两种字体Roboto 和 Noto，字体优先顺序首先是 Roboto，然后是 Noto，最后才是 sans-serif。

英文用Roboto ，Roboto 有 6 种粗细，Thin、Light、Regular、Medium、Bold、和 Black。

中文用Noto ，有 7 种粗细，Thin、Light、DemiLight、Regular、Medium、Bold、和 Black。

下面分别描述中英文字体的使用：

英文

基本样式集是基于 12、14、16、20、和 34 的排版比例。

应用栏：标题字号Medium 20sp

列表、卡片标题：副标题字号Regular 16sp

文本内容：正文字号Regular 14sp

按钮：Medium 14sp，字母全大写

英文行高：行高是指文字高度+间距高度

中文

从标题到说明文字的样式，字体大小都比对应的英文样式大1px。对于大于标题的样式，则使用和英文相同的字体大小。

应用栏：标题字号Medium 21sp

列表、卡片标题：副标题字号Regular 17sp

文本内容：正文字号Regular 15sp

中文行高：

颜色& 对比度

文本颜色和背景颜色太相似，会导致很难阅读。对比度太大的文本也会难以阅读，尤其是深色背景上的浅色文本，文本应该保持至少 4.5:1 （基于亮度值计算）的对比度以保持文本清晰，最佳对比度为 7:1。

字间距

如果你想要一个良好的阅读体验，应该保持每行文本拥有正确的字符数，是文本可读性的关键。

05. MD布局规范

布局元素包含：状态栏、应用栏、底部工具栏、卡片、下拉菜单、搜索框、分隔线、侧边栏导航、对话框、浮动操作按钮等组件。

所有组件都与 8dp 的基准网格对齐；工具栏中的图标则与 4dp 的基准网格对齐；文字与 4dp 的基准网格对齐。

（上面的基准网格怎么用呢？比如文字的网格线最小单位是4dp，如果你设计的是XXHDPI尺寸也就是3X图，那么在ps的网格线应该是12px哦。）

列表

详情视图

抽屉式导航

比例

推荐的宽高比为：16:9   3:2   4:3   1:1   3:4   2:3

触摸目标大小

为了确保信息密度和可用性之间的平衡，触摸目标的尺寸至少为 48 x 48 dp；在大多数情况下，触摸目标之间至少还有 8dp 的间隔。

手机端结构

应用栏

以前称为操作栏，是一种特殊类型的工具栏，用于放置品牌、导航、搜索和操作。

菜单

菜单是一张始终会遮盖应用栏的临时卡片，而不会表现的像是应用栏的扩展。

状态栏

状态栏包含通知图标和系统图标，状态栏高度：24dp。

导航栏

包含几个设备导航控件：后退键、Home 键、任务键，高度：48dp；导航栏可以是不透明、半透明或全透明的。

侧边栏

可以位于屏幕左侧或右侧；理想状态下，左侧侧边栏应该是与导航相关的、或是与用户身份相关的内容。右侧侧边栏应该是与页面中的主内容相关的次要信息。

宽度 = 屏幕宽度 − 56 dp，最大宽度：320dp

最大宽度仅在使用左侧导航时才适用；当使用右侧导航时，面板可以覆盖整个屏幕的宽度。

浮动按钮

高度：56dp

阴影

谷歌定义的材质阴影由两种光源组成：主光源投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。我们在做设计时不能只加一个投影哦！

云盘资源有一个“阴影psd文档”，每种组件的阴影数值都有详细描述。

完！

总结：

谷歌官方文档里面的规范很全面，把规范全部照搬过来是不可能的，需要我们仔细研读，然后灵活使用。这里给两个连接，方便大家研读。

英文版  https://material.io/guidelines/

中文版  https://www.mdui.org/design/

资源下载：（国外网站要翻墙）

谷歌字体库：https://fonts.google.com/

谷歌图标库：https://material.io/icons/

设备数据统计：https://material.io/devices/

谷歌统计的一个包含各种设备的尺寸、分辨率等数据的综合性资源。

Resizer工具：https://material.io/resizer/#device=handset&url=https%3A%2F%2Fwww.android.com%2F&width=360

它是一个交互式查看器，显示数字产品如何响应桌面设备、移动设备和平板电脑上的 Material Design 的断点。

云盘资源： https://pan.baidu.com/s/1bJ3qW2 密码：ti1f

包含布局、色彩、字体相关资源。

番茄设计匠（公众号）

作者：番茄