想提高可用性？看谷歌Material Design 的官方教程是怎么做的！

荣超：本节是谷歌Material Design可用性部分的中文完整译本，非常完整地阐述了提高可用性的方法和技巧。

一. 无障碍/可访问（Accessibility）

无障碍设计能够使用户成功浏览、理解和使用您的UI。

原则

让无论是视力低下、失明、听力障碍、认知障碍或运动障碍的用户都可以使用产品。提高产品的可访问性就是提高面向所有用户产品的可用性。这也是正确的事情。

Material design的内置无障碍注意事项将帮助你的产品适应所有用户。本节所讲主要适用于移动端UI设计。有关设计和开发无障碍产品的详细信息，请访问 Google accessibility site

清晰

设计清晰的布局和调用不同的操作来帮助用户导航。每一个额外添加的按钮、图像和文本行都会使页面变得更加复杂。所以你需要简化你应用的UI：

• 清晰可见的元素
• 足够的对比度和尺寸大小
• 明确的优先级关系
• 关键信息一目了然

直接明了

设计你的应用来适应不同情况的用户。实际场景中，面对使用新产品注意力相对分散，或使用纯文本屏幕阅读器（一个使用语音合成朗读或使用盲文显示的软件）的用户，你的应用应该让其中每个用户都能轻松地：

导航：给予用户信心，让用户知道自己在应用中所处的位置以及当下最重要的任务是什么。

了解重要的任务：通过视觉和文字提示加强重要的信息。使用颜色、形状、文本和动效来向用户传达正在发生的事情。

访问你的应用：使用合适的内容标签去提升纯文本版本应用的用户体验。

具体

适配不同平台的辅助技术，就像支持触摸屏、键盘或鼠标输入方式一样。例如，你的Android应用需要支持Google屏幕阅读器，TalkBack

辅助技术通过屏幕阅读器、放大设备、轮椅、助听器或记忆辅助设备来帮助残障人士提高、维持或改善自身功能性的能力。

颜色和对比

使用颜色和对比度帮助用户浏览和理解你应用的内容，同时了解操作并与正确的元素进行交互。

无障碍调色板

选择支持可用性的应用主色、辅色和强调色。确保元素颜色之间有足够的对比度，以便视力低下的用户可以正常浏览和使用你的应用。

对比度

根据万维网联盟（W3C），颜色与其背景之间的对比度基于明度或发出的光的强度不同分成1-21。

对比度表示颜色与另一种颜色之间的区分，通常写成1：1或21：1。比值中两个数之间的差值越大， 颜色间的相对明度的差值就越高。

W3C建议正文文本和图像文本的对比度：

小文本相对其背景应有至少4.5：1的对比度。

大文本（14 pt bold/18 pt regular及以上字重）相对其背景应有至少3：1的对比度。

可行

以上文本行遵循了颜色对比度建议，因此相对其背景颜色是可读的。

不可行

以上文本行不符合颜色对比度建议，并且很难根据从其背景颜色中进行读取文字

Icons或其他关键元素也应使用上述对比度建议。

可行

这些icons遵循了颜色对比度建议，因此可以能够从其背景中突显出来。

不可行

这些icons没有遵循颜色对比度建议，所以从其背景中很难辨别。

Logos和装饰元素

装饰元素（如logos或插图）虽然不需要满足上述对比度建议，但如果它们在应用中具备重要功能时，那它们必须能够被用户辨识。

可行

可区分、辨识的装饰logos不需要满足对比度。

不可行

没必要为了满足对比度让你的logo失真

其他视觉提示

面对色盲或看不到颜色差异的用户，除了颜色外，还需要包含设计元素，以此确保这类用户能够与其他人一样接收到相同数量的信息。

色盲有不同的形式（如红-绿、蓝-黄、单色）。面对这类用户你需要使用多个视觉提示来传达重要的状态。例如使用路径、指示器、图案、纹理或文本等元素来描述操作和内容。

可行

文本字段的错误状态使用了多个提示进行传递：标题颜色、字段路径和字段下面的错误消息提示。

不可行

文本字段的错误状态只通过红色路径进行传递，但是色盲用户是无法感知路径颜色的。

声音和动效

声音

声音是视觉的替代物，反之亦然。为关键的音频元素和声音警告提供隐藏字幕（CC）、文字副本或其他可视化选项。

允许用户向UI元素添加描述性标签来使用声音进行应用内导航。当使用屏幕阅读器（如TalkBack和触摸探索导航）时，当用户用指尖触摸到UI元素时，标签会大声朗读。

应避免下列声音：

在屏幕阅读器上播放不必要的声音，如在进入网页时自动播放的背景音乐。如果有背景声音，请确保用户可以安全的暂停或停止。
添加到本地元素上的额外声音（屏幕阅读器能够正确解读本地元素）。

标记用户界面元素（Add audible des criptions to input controls and other elements）

动效

Material design利用动效来引导不同视图间的焦点，这有助于减少用户分心。用户跟随页面焦点变化，为了避免分散用户注意力，那些不重要的元素会被移除。

为了让对运动和视觉敏感的用户能够舒适地使用界面，请遵循Material design动效规范，同时它支持以下W3C的动效准则：

• 如果启用自动移动、滚动或闪烁的内容的持续时间超过5s的话将被暂停、停止或隐藏。
• 闪烁内容限制在1/2时间内允许三次闪烁, 以满足闪烁和红色闪烁阈值。
• 避免在屏幕中央大面积闪烁。

定时控件

应用中的控件可能会被设置为在一定时间后自动消失。例如，启动视频五秒后，播放控件会从屏幕上淡出。

高优先级控件：

避免在高优先级功能的控件上使用计时器，因为用户很可能还没注意到这些控件时就已经消失不见。例如，TalkBack阅读控件被用户激活朗读时，如果控件设置了定时将会阻止控件完成任务。

对于启用其他重要功能的控件，请确保用户可以再次打开控件或以其他方式执行相同的功能。了解更多的层次结构和焦点。详情见以下 层级与焦点 。

自动发声文本（Read about placing text in a live region.）

样式

布局

Material design的触发目标指南能够帮助那些无法看到屏幕或有手脚不便问题的用户可以在你的应用中正常触发元素。

触发目标

触发目标是屏幕上响应用户输入的区域。这个区域超出了元素的可视界限。例如，一个24x24dp大小的icon，它周围存在48x48dp的触发区域。

触发目标应至少48x48dp大小。无论屏幕大小是多少，该范围大小的触发目标的物理大小约等于9mm。触摸屏元素的推荐目标大小为7-10mm。为了容纳更大范围的用户（如发展运动能力的儿童），可以适当使用更大范围的触发目标区域。

触发目标间距

在大多数情况下，触发目标之间应该间隔8dp或更多的空间以确保信息密度的平衡和可用性。

• 头像：40dp
• Icon：24dp
• 触发目标：48dp

△  触发目标案例

• 触发目标高：48dp
• 按钮高：36dp

△  触发目标和按钮案例

对项进行分组

将关联项保持在彼此接近的水平，对于那些视力低下或注视屏幕有缺陷的人是很有帮助的。

可行

滑块值与滑块控件接近

不可行

滑块值离控件太远。使用屏幕放大的用户可能无法同时查看到滑块和滑块值

字体

为提高可读性，用户可能会增大字号。移动设备和浏览器包含允许用户调整系统范围内字体大小的功能。要在Android应用中启用系统字体大小，请将文本及其相关的容器的单位变为sp。

请确保大的外文字体有着足够多的空间。推荐外文字体大小的相关信息, 请参阅 行高

层级与焦点

应用应该向用户传递他们在应用中的位置。导航控件应该易于定位和清晰写入。视觉反馈（如标签、颜色和icons）和触摸反馈表示界面中可访问的内容。

导航需要有清晰的任务流程，同时能够以最少步骤达成。焦点控制，或控制键盘和阅读焦点的能力，应该在频繁使用的任务中实现。

启用焦点导航（Use focus controls for navigation）

屏幕阅读器

屏幕阅读器为用户提供了多种浏览屏幕的方式，其中包括:

• 触摸界面屏幕阅读器允许用户在屏幕上移动他们的手指去听手指下方传递的信息。这种方式能够快速的为用户营造整个界面的感觉。另外，用户也可以从肌肉记忆中快速找到并移动到一个UI元素上。在TalkBack中，此功能称为“通过触摸进行探索”。最后，用户必须双击才能进行选择。
• 用户也可以通过在屏幕上来回滑动来移动焦点，从上到下进行线性阅读。这能够让用户可以在某些元素上进行磨练。在TalkBack中，这称为线性导航。
• 用户可以在“触摸式浏览”和“线性导航”模式之间切换。当页面内标记使用了适当的语义标示时，一些辅助技术允许用户在这些页面标记（如标题）之间进行导航。
• 硬件或软件方面控制器（如D-pad、轨迹球或键盘）允许用户以线性方式从选区跳转到另一选区。

层级

根据它们之间的重要性区分将其放置在页面中。

重要操作: 在屏幕的顶部或底部放置重要的操作（可通过快捷方式到达）。

相关项: 将类似层次结构的相关项放在相邻的位置。

可行

在屏幕顶部放置的重要操作，它们会在层次结构中加倍赋予更大的重要性。

不可行

如果重要的操作嵌入到其他内容中去，用户会不知道页面上最重要的元素是什么。

焦点顺序

输入焦点应遵循视觉布局的顺序：从屏幕的顶部到底部。同时也是最重要的到最不重要的排序。决定以下的焦点和操作：

• 元素接收焦点的顺序
• 元素的分组方式
• 当元素焦点消失时焦点移动
• 通过视觉指示器和辅助功能文本的组合来说明焦点存在的位置。

分组

将相似项进行分组。这些组对内容进行组织。

转换

屏幕和任务之间的焦点遍历应尽可能的连续。

如果任务被中断然后再继续，请将焦点放在先前聚焦的元素上。

△  绿色圆圈表示屏幕上元素接收焦点的顺序

安装启用

通过使用标准的平台控件，你的应用将自动包含某平台辅助技术中正常运行所需的标记和代码。同时能够适配你的应用以满足每个平台上的无障碍标准和辅助技术 (包括快捷方式和结构），从而给予用户一个有效的体验。

可行

此屏使用了该平台的标准对话框

不可行

此屏使用了非标准的对话框来执行标准化的对话任务。如果想实现无障碍访问就需要额外的编码和测试让这个非标准的控件运行辅助技术

设置中打开平台的辅助功能来测试你的设计。

其他设计注意事项：

使用可伸缩文本和宽泛的布局来适配可能打开了大文本、颜色校正、放大或其他辅助设置的用户。

使用键盘/鼠标作为输入方式的界面中的每个任务和所有悬停（hover）信息需要只通过键盘就能够进行访问。

使用手指触摸作为输入方式的应允许屏幕阅读器和其他辅助技术设备对界面进行朗读。朗读的文本对用户来说应该是有意义且有帮助的。

可行

此UI已扩展适配放大和大文本辅助设置

不可行

此UI没有适配放大和大文本辅助设置。部分内容已经重叠或被截断。

标签可视化UI元素

屏幕阅读器需要让用户知道哪些UI元素是能被点击触发的。要使屏幕阅读器能够大声读出组件的名称，请将 contentDes cription 属性添加到组件 (如按钮、icons和包含icons但无文本的tabs) 中。

设置UI元素标签（Use the contentDes cription attribute to set labels）

• 设置搜索icon标签
• 设置麦克风icon标签

• 设置编辑icon标签
• 设置聊天icon标签

帮助文档

任何具备特殊辅助注意事项的功能都应包含在帮助文档中。例如，阅读该指南了解如何在Google Drive中使用屏幕阅读器。

测试和研究

遵循这些辅助指南将有助于提高应用的可访问性，但是不能保证完全的可访问体验。所以建议你：
在各种辅助技术启用下测试完全你应用中的任务。例如，通过在TalkBack中触摸来打开“探索”，同时更改文本朗读的速度。

让有障碍的用户测试你的应用。

考虑如何在一连贯的用户流程中对个别元素进行访问。

确保每个用户都能完成你希望用户完成的主要任务。

与用户交谈，特别是那些使用辅助技术的人。了解他们的需求--他们想从你的应用中得到什么。他们使用哪些工具以及他们如何使用它们。熟悉这些工具，这样你就能给他们最好的体验。

△  人们用不同方式使用辅助技术

描述

清晰、有用的辅助描述文本能够让用户更容易访问UI。视力受限或失明的用户能够从清晰的口头描述中获得访问帮助。辅助描述文本是指屏幕阅读可访问性软件使用的文本，例如Android上的TalkBack、iOS上的VoiceOver和桌面端上的JAWS。屏幕阅读器朗读屏幕上的所有文本，包括可见文本和不可见的替代文本。

辅助描述文本包括可见文本（包括UI元素的标签、按钮上的文本、链接和表单) 和不显示在屏幕上的不可见的描述（如不带文本标签按钮的替代文本)。有时，屏幕上的标签可以用辅助描述文本覆盖，从而为用户提供更多信息。

可见的和不可见的文本应该具备有意义的描述和独立的意义，因为一些用户只通过网页上的标题或链接进行浏览。使用屏幕阅读器测试你的应用--识别出缺少的区域或确定使用更好的辅助描述文本。

简洁

内容和辅助描述文本需简短清晰。文本越短，用户就可以越快地浏览它。

切换到heyfromjonathan@gmail.com。

可行

清晰和简短的辅助描述文本。

账户切换开关。切换账户到 heyfromjonathan@gmail。

不可行

冗长的辅助描述文本。

避免在文本中包含控件类型或状态

屏幕阅读器可以通过声音自动述说控件的类型或状态，或者在辅助描述文本之前或之后说出控件名称。

可行

使用简短的描述

不可行

不写入控件类型

开发人员注意：如果控件类型或状态未正确读取，则控件的可访问性role可能设置不当或为自定义控件。每个元素在网站上都应该有一个相关的可访问性role，或者被编码为正确发布。这意味着按钮应设置为按钮，复选框为复选框，从而以便将控件的类型或状态正确地传达给用户。如果从本地UI元素扩展或继承，则会得到正确的role。如果不是，你可以在每个平台上覆盖此信息以获得可访问性（用于web的ARIA、AccessibilityNodeInfo for Android）。

在Android上，将控件的类的 name 字段AccessibilityNodeInfo设置为 "android.widget.Button"。

构建可访问的自定义视图

仅通过 Wi-Fi 下载。

可行

使用简短的描述。

已选择通过 Wi-Fi 下载。

可行

过多描述

表示元素的含义

使用操作动词来表示元素或链接的作用，而不是通过描述元素外观。这样才能使视力受损的用户理解。其中，链接文本需：

说明点击链接将执行的任务。

避免含糊的描述，如“点击这里”。

确保元素在所使用的任何地方都具备相同的描述。

可行

朗读中的描述指示该icon所代表的操作

不可行

描述icon的外观并不能清楚地说明该操作的作用

可行

导航菜单的辅助描述文本可以是“显示/隐藏导航菜单” (首选) 或“显示/隐藏主菜单”(次选)。

可行

朗读时，描述文本“侧边抽屉”并不能表示其操作的作用。

元素和其状态更改

对于在确切含义或状态之间切换的icon，请根据向用户显示的方式来描述icon。

如果icon为列表项所有，请将其设置为复选框，以便屏幕阅读器表达其当前状态，例如“on”或“off”。

如果icon是一个操作，请编写在选择icon时发生操作的文本标签，如“添加到收藏夹”。

元素的使用方式将影响它们的展示方式。例如，如果星形icon代表向“收藏”中添加东西的操作，则在应用中需表达为“添加到收藏夹”或“从收藏中删除”。

不要提及确定的手势或交互

不要告诉用户如何与控件进行物理交互，因为他们可能使用键盘或其他设备进行浏览，而不是用手指或鼠标。辅助软件将向用户描述正确的交互方式。

可行

指令“语音搜索”的描述与输入方式为语音的用户任务（搜索）配对

不可行

指令“点击”描述不准确，因为它不是激活此控件的唯一方法（用户可以通过键盘按键、开关设备或盲文显示进行选择）。与此同时，这个例子中用户的主要任务是搜索，所以应该向用户提到操作而不是“说话（speak）”。

确认操作

使用对话框、toasts或snackbars（Android）来确定或确认用户操作的破坏性（如“删除”或“移除”）或难以撤消操作。

对于通过可视方式确认的操作（例如在删除项目时宫格重新排列）就不需要toasts。在这些情况下添加辅助描述文本提供确认。

提供提示语音

提示语音能为不清晰的操作提供额外的提示信息。例如，Android的“双击选择”功能在用户选择某个项目但没有双击选择时提示。Android的TalkBack也会朗读任何与元素相关的自定义操作。谨慎地使用提示语音（仅适用于复杂的UI）。

Android自定义操作

二.  双向性（Bidirectionality）

像阿拉伯语和希伯来语这种从右向左（RTL）阅读的语言，需要符合阅读习惯确保内容能被这类用户正常阅读。

镜像UI概述

从左向右（LTR）和从右向左（RTL）语言系统之间的主要区别是内容的显示方向：

LTR的语言从左向右显示内容

RTL的语言从右向左显示内容

RTL的内容也会影响一些icons和图像的显示方向，特别是那些描述一系列事件的内容。

元素           LTR                                           RTL

文本           句子从左向右读                    句子从右向左读

时间轴      从左到右的时间序列           从右到左的时间序列

图像           从左向右向前指示：→      从右向左向前指示：←

当UI从LTR更改为RTL（反之一样）时被称为镜像。RTL布局是LTR布局的镜像，不同的布局会影响内容、文本和图像的安排。

当UI从一个方向更改为另一方向时，以下项将不被镜像：

数字

未翻译的文本（即使它是词组的一部分）

文本应遵循语言始终在其正确的方向。例如，任何LTR的单词（如URL），即使UI的其余部分处于RTL中，它仍然会继续以LTR的格式显示。

可行

文本和数字需始终为该语言的正确阅读方向

不可行

LTR文本不应以相反的顺序显示，保持原来的阅读顺序。

当UI被镜像时，以下内容将会改变：

• 文本字段icons显示在字段的另一侧
• 导航按钮以相反的顺序显示
• 类似“箭头”这样表示方向的icons会被镜像
• 文本（如果转换为RTL语言）向右侧对齐

以下内容不被镜像：

• 不表示方向的icons，如相机icon
• 数字，如时钟和电话号码
• 图表和图形

△  LTR中的英语用户界面

△  RTL中的阿拉伯语用户界面，数字以LTR形式显示

△  LTR中的文本编辑菜单

△  RTL中的文本编辑菜单

图中1：与双向性相关的icons被镜像，以此反映一行文字的开始和结尾

LTR页面

在LTR页面上，第一项个tab向左对齐，用户向左滑动可以查看更多tabs。

• 触摸目标高度：48dp
• 第一个tab距屏幕边缘的距离：72dp
• Tab标签底部内边距：20dp
• Tab标签左右内边距：12dp

RTL页面

在RTL页面上，第一项个tab向右对齐，用户向右滑动可以查看更多tabs

• 触摸目标高度：48dp
• 第一个tab距屏幕边缘的距离：72dp
• Tab标签底部内边距：20dp
• Tab标签左右内边距：12dp

△  LTR页面

RTL页面

• 标题、icons和UI元素从右向左显示
• 后退按钮指向右
• 文本右对齐
• 主、辅按钮匹配读取方向被镜像
•  在文本右侧显示复选框
• 不表示方向的icons不改变
• 不同语言之间单位放置的地方也不同
• 进度条在内容阅读的方向上进行填充

LTR

导航、溢出菜单和从左向右显示的icons

Icon向屏幕边缘的内边距：16dp

标题距屏幕边缘：72dp

标题的下内边距：20dp

导航栏高：56dp

溢出菜单的内边距：16dp

RTL

• 导航、溢出菜单和从右向左显示的icons
• Icon向屏幕边缘的内边距：16dp
• 标题距屏幕边缘：72dp
• 标题的下内边距：20dp
• 导航栏高：56dp
• 溢出菜单的内边距：16dp

LTR

• LTR icons和文本的外边距和内边距
• 列表项高：72dp
• Icon向屏幕左边缘的外边距：16dp
• 列表项距离屏幕左侧边缘：72dp

RTL

• 当镜像布局时，icon和文本的内外边距也会切换位置以匹配RTL的布局。
• 列表项高：72dp
• Icon向屏幕右边缘的外边距：16dp
• 列表项距离屏幕左侧边缘：72dp

RTL镜像指南

当文本、布局和icons都被镜像匹配从右向左（RTL）UI时，与时间相关的任何内容都需要从右向左改变。例如，在RTL布局中，向前是指向左侧，向后是指向右侧。

有关RTL icons的详细开发指南，请查阅：

• RTL Material Design icons 指南（了解如何镜像图标）
• RTL Sketch 插件（将现有设计和资源转换为RTL格式）

什么时候需要镜像

最重要的镜像icons是“后退”和“前进”按钮。后退和前进导航按钮刚好相反。

△  LTR 后退按钮

△  RTL 后退按钮

△  LTR 前进按钮

△  RTL 前进按钮

显示向前移动的icon需要镜像。

在LTR的UI中，一辆面向右侧的自行车通常会传达一种向前移动的感觉。

在RTL的UI中，一辆面向左侧的自行车一样会传达一种向前移动的感觉。

大多数RTL国家不会镜像斜杠。

可行

LTR的斜杠一样使用RTL环境

不可行

RTL环境下斜杠不需要镜像

右侧带有滑块的音量icon需要镜像。滑块在RTL下，音量应从右边开始计算。

△  LTR：带滑块的音量icon

△  RTL：带滑块的音量icon

有些icon中带有时间的隐喻。例如，Google文档中的“重做”和“撤消”按钮用一个水平（线性）和环形（循环）方向指向来隐喻“时间”。

在LTR中，环形和水平指向与时间进度相同。但在RTL中，你需要考虑是否还用环形或水平方向去指示时间。

△  LTR：Google文档的工具栏中的“重做”和“撤消”按钮

包含文本表示形式的icons的镜像需要小心谨慎。

RTL中文本向右对齐。如果段落开头有段落缩进，且段落末尾有未完成的行或右侧出现不齐整的情况，那需要镜像icon。

△  LTR：聊天icon

△  RTL：聊天icon

什么时候不需要镜像

在RTL中，时间的线性指向发生镜像时，时间的循环指向就不需要镜像。对于RTL语言，时钟依旧是顺时针旋转。也就是说不需要镜像如带有顺时针指向的时钟icon、循环刷新或进度指示器。

△  刷新icon显示时间朝前，方向为顺时针。该icon没有镜像。

△  历史icon在时间上朝后，方向是逆时针的。该icon没有镜像。

某些icons不存在镜像与否。

例如，物理键盘在世界各地看起来都一样，所以它们不应该被镜像。

△  键盘icon

△  耳机icon

某些icons看起来似乎具有方向性，但实际上它们代表的是用右手持有物体。

例如，搜索icon的手柄通常在右下角。因为大多数用户是右撇子。

使用RTL书写的国家的大多数用户也是用右手的，所以这样的icon不需要镜像。

△  搜索icon

△  咖啡馆icon

时间经过

任何描述时间经过的东西都需要被反映出来。

不要镜像媒体播放按钮和进度条，因为它们指的是正在播放的“磁带”的方向，而不是时间方向。

由于媒体播放按钮和进度条反映了磁带的方向，所以它们不需要镜像

可行

用于播放的媒体控件一直都是LTR

不可行

不要镜像媒体播放按钮或进度条。这些元素的方向表示磁带的方向，而不是时间

本地化

图形中的文本。

包含文本的图形通常需要本地化。

数字

数字（包括包含数字的icon）必须针对使用不同数字符号的语言进行本地化。例如，孟加拉语、马拉地语、尼泊尔语和一些阿拉伯语语言环境下使用的不同数字符号形式。

△  包含数字的LTR icon

△  阿拉伯语中的RTL icon

镜像

有时候，即使UI没有被镜像，也可能需要镜像内容。例如，当用户在LTR文档中编辑RTL段落时，RTL文本的工具栏按钮需要在RTL布局中。

在LTR文档的这个RTL段落中，即使主要的UI方向是LTR的，但缩进和列表按钮也应该是RTL的。

• 段落对齐
• Icons翻转
• 希伯来语文本方向为RTL

本章结束。想继续学习的同学记得转微博哟。

「Material Design 好文合集」

官方译文：

1. 《中文版来了！新版Material Design 官方动效指南》
2. 《中文版来了！新版MATERIAL DESIGN 官方动效指南（二）》
3. 《中文版来了！新版MATERIAL DESIGN 官方动效指南（三）》

学习笔记：

1. 《学霸的自学笔记！Material Design设计规范学习心得》
2. 《重磅教程！帮你全面彻底搞定MATERIAL DESIGN的学习笔记》

素材篇：

1. 《新鲜热辣！一组实用的MATERIAL DESIGN风格素材！》

实战教程：

1. 《重磅改版！网易新闻安卓客户端MATERIAL DESIGN实战》

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================明星栏目推荐================

优优教程网： UiiiUiii.com 是优设旗下优质中文教程网站，分享了大量PS、AE、AI、C4D等中文教程，为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章，按照我们的专栏一步步学习，一定可以迅速上手并制作出酷炫的视觉效果。

设计导航：国内人气最高的设计网址导航，设计师必备：http://hao.uisdc.com