Material Design 总结

概述

为用户创造了崭新的视觉设计语言,与此同时，新的设计语言除了遵循经典设计定则，还汲取了最新的科技，秉承了创新的设计理念。这就是原质化设计(Material Design)。

环境

• 三维世界（3D world）

具备 x，y 和 z 轴的 3D 空间

• 光影关系（Light and shadow）

在 material 环境中，虚拟的光线照射使场景中的对象投射出阴影，主光源投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。
material 环境中的所有阴影都是由这两种光投射产生的，阴影是光线照射不到的地方，因为各个元素在z轴上占据了不同大小的位置遮挡住了这些光线。

样式

• 书写

  明确、精炼、简洁的文本让交互界面更加可用，并且更容易让人信任。力求写出所有人都能理解的文本，无论他们是什么文化背景或使用何种语言。

  除了这些准则，还需要翻阅具体 UI 元素的指南，例如错误，对话框，设置以及数据格式。

  语言
  语气
  大小写和标点符号
  全球化书写

  • 语言

  使用“你”对用户说话

  直接使用“你”对用户说话，不要用“我”。不要用“我”或者“我的”之类的短语。

  例外：

  • 一些法律选择：“我同意遵循 UX 书写的规则。”
  • 一些 Google Play 种类，例如“我的音乐”或者“我的书籍”

正确	你的账户
错误	我的账户

不要使用“我们”

书写要专注于用户以及用户可以用你的应用做的事情，而不是你或者你的应用正在为用户做的事情。

正确	你可以使用这个页面删除你的 Google+ 档案
错误	为这个贴子允许你删除 Google+ 的档案

做到简洁

UI 文本会对导航和发现有帮助。最好的 UI 文本是一些小的段，这样在浏览的时候就不会阅读太多。
让你的语句和短句短一点。用尽量少的概念。

正确	阅读发到你手机的操作指南。
错误	咨询发送到你手机的文档，以获取进一步的操作指南。

用现在时书写

大部分 UI 发生于现在，所以你可以用现在时书写。
如果你需要使用过去时或者未来时书写，使用简单的动词形式。

正确	消息发出
错误	消息已经被发出

书写简单直接

简单直接的语言对于用户来说更加容易理解，因为他们通常是大概浏览一个界面。

正确	保存变动？
错误	你需要保存你的变动吗？

大小写和标点符号

• 使用语句风格的大写
  为所有的标题、头部、标签以及菜单条目，还有任何你想用的地方，使用语句风格的大写。
  避免全大写，除了 material 规格需要的地方，例如，按钮风格。

正确	Search settings
错误	Search Settings / SEARCH SETTINGS

• 标点符号
  在短语和标签之后省略标点符号来构建一个简洁可读的界面。
  使用标点符号来增加清晰度和语法正确性。

布局

准则

• 页面制作
  **在Material Design里，每一个像素点都是由应用程序在一个页面上画出来的。**页面有一个平滑背景颜色并可以作用于各种目的。一个典型的布局就是由多层页面组成的。
  系统可能会为很多元件绘制像素，比如状态或者系统栏，但这些都不属于页面。可以这样想象那些系统元件，他们是被贴在显示器玻璃背面的，另外存在于一个在app内容下方的层级。
• 布置页面
  两个页面有一条共用的，长度相同的边就会产生缝合线。有缝合线的两张纸通常会一起移动。

两张 Z 轴位置不同的纸片在重叠会产生层阶[step]，因此他们通常是彼此独立移动。

• 页面工具栏

工具栏是一个主要展示操作的条状页片。这些操作通常聚集在工具栏的左边缘和右边缘。与导航相关的操作

• 维度
  在 dps 中深度是可被测量的，就像 x 轴和 y 轴。然而，在 z 坐标空间里去考虑元素的优先级是更有效的，而不只是依据绝对的，固定的位置。

• 一个概念模型
  在一个高层次级别上，每个 app 都可以被认为是放置在一个独特的空间或容器。

这样就意味着一个应用软件里的页面不能在 Z 轴空间插入另外一个页面。

这也意味着操作和元件是独立在 app 中:例如,在一个软件里让一个列表滑动消失不会导致那个列表穿过另一个不相关 app 的空间。

多容器允许多个 app 被同时看到，例如，在多种浏览器标签里。

在一个特定的 app 里，根据 z 轴主要和次要的层阶[step]，很多元素都是相对放置的。例如，一个按钮的聚焦状态是次要的层阶，而它的按下状态是一个主要的层阶。

其他元素在 app 的 Z 轴里有固定的优先级，意味着不管那些元素相对于 Z 轴的位置,他们总是位于其他元素上面或者下面。比如，浮动操作按钮总是在内容和工具栏之上，不管这个 app 可能会用到多少个页面。

• 布局注意事项
  深度不仅仅是装饰。

优先考虑元素的 z 轴空间，不是绝对的位置。

app 中的深度应该表达层级和其重要性，并且帮助用户关注手头的任务。

• 阴影
  阴影有两部分组成：顶端表达深度的阴影和底端表达边界的阴影。

模式

空状态

空状态发生于一个常规内容页面不能显示时。可能是一个没有条目的列表，或者一个没有返回结果的搜索。虽然这些情况不是典型的，但也是展示良好设计以避免用户失望或者困惑的好机会。

显示空状态
避免完全空的内容

• 显示空状态
  最基本的空状态显示一个非交互的图片和文本标语。

  使用一个图片：

  • 相对于背景来说，显得巧妙和素净。
  • 以一个生动的方式传达应用的目的和意图，就像你的应用图标

  包含一个标语：

  • 有积极的语气

  • 与你的品牌一致

  • 传达应用的意图，而不需要可操作

    (上图)可取：图片素净并且明显是背景的一部分。标语传达了应用的意图，并且没有需要操作的意思。

    (上图)不可取：图片明亮并且标语像是需要操作，让用户以为可以点击或者将会开始一段闲逛。

错误

错误是应用未按预期执行时出现的状况, 一般发生在:

应用无法识别用户输入的信息
系统或应用故障
用户执行的多个操作产生了冲突

• 用户输入错误
  在用户输入错误时给予内容提示帮助用户修正错误. 不要在用户提交了一个很长的表单后才告诉他们出现了一个错误. 而应该在检测到错误时禁用表单提交按钮. 如果错误只有在用户提交表单后才能被发现, 要清晰地指明什么地方出现了错误以及解决它需要用户做什么.

• 文本输入框
  不要让太多的提示充斥屏幕以至于降低用户的效率. 不是每个文本框都需要辅助或错误提示.
  如果在文本框下方展示错误提示, 那么该提示与其所指的出错文本框之间要留出 16dps 的间距.

内容选取

• 文本选取
  文本选取表现为高亮所选文字范围。

在移动平台上，所选文本的前后两端各会添加一个选择操作钮。对于文字相关操作的弹出菜单，所选文本的上方是理想的位置（但最好不要重叠）。

包含“剪切”、“复制”、“粘贴”和“更多”操作的弹出菜单显示在所选区域的上方

因为选择必须是连续的文本块，所以文本选择事实上是单选操作。不过选区可以通过以下几种用户行为改变：

• 初始化选择的过程中拖动来增加选区
• 拖动选区两端的选择操作钮来增加或者减少选区
• 在选区内多次点击来增加选区（单词 > 段落 > 全文）
• 键盘快捷键：
  • Shift + 左/右方向键 => 逐字符的更改选区
  • Shift + 上/下方向键 => 逐行的更改选区
  • Ctrl/Command + A => 全选

手势

• 手势

手势控制分为触发动作（Touch Mechanics，用户手指在屏幕上如何动作）和触发行为（Touch Activities，界面上特定动作在特定情境下引发的结果）。

这是因为同样的触发动作（如单次触击）在不同情境下可能会带来不同的结果（如轻触，取消，开启／关闭指示），同样单次触发行为（如放大）可能是由多种触发动作（如捏放，双次触击，双次触击拖拽等）实现。

• 触发动作
  触发动作是用户的手指在界面上做了什么。

  （1）单次触击(Touch)
  一只手指按下，提起
  例如：选择

  （2）拖拽(Drag)，轻滑(Swipe)和快掷(Fling)
  一只手指按下，移动再提起
  例如取消，轻滑，倾斜

  (3) 捏放(Pinch Open)

  双指按下，向外移动，再提起
  例如：放大

  (4) 旋转

  双指按下，以指间中点为圆心快速转动，再提起
  例如：在地图中旋转内容