image.jpeg

十二、形状

Material Design 过去的版本中对形状规定较为死板，最新的 Material Design 在形状上可谓是非常自由了。菱形、半圆形、圆角都可以使用，这些充满个性的形状可以帮助我们构建更酷的界面。
image.jpeg
△ 可自行定义的形状
image.jpeg
△ 独特的形状可以引起用户的关注
image.jpeg
△ 形状也可以表示内容被选中

1. 品牌感

我们可以在整个应用程序中使用体现品牌感的视觉语言，以一致的方式将形状、颜色、弧度等特征设计界面的不同元素。这样有助于提升品牌的整体印象。当用户看到某种颜色或者形状时，就会想到我们的产品。
image.jpeg
△ 界面中使用了统一的形状增强品牌感

十三、交互

1. 空状态Empty states

空状态应该和品牌一致，可以使用幽默和可爱的情感化设计来和用户产生亲和感，但是不应该体现可操作性。不要使用口号和可点击的暗示。
image.jpeg
△ 空状态

2. 警告对话框Alert dialog

警告对话框可以让用户预知下一步会发生什么，并提供选择来取消这个行为。比如删除操作通常都会提示用户是否确定要删除。
image.jpeg
△ 警告对话框

3. 闪屏launch screens

闪屏可以使用像苹果平台上 APP 那样的图形，比如微信的闪屏页或开眼的动态闪屏等。除了闪屏页的图形动态设计之外，我们也可以使用内容的占位符作为启动页，这样用户会预知我们即将载入大概什么样的内容。
image.jpeg
△ 闪屏

4. 图像 images

在我们设计的 APP 中一个图像可能会被裁切成多个尺寸，比如1:1、3:4、16：9等，甚至是圆形或正方形。这时需要保持图像的核心区域在任何尺寸中都显示到。
image.jpeg
△ 图像的设计

5. 新手引导Onboarding

Material Design 建议产品设计新手引导界面，以此来帮助用户了解该程序是如何操作和有什么样的独特功能。通常新手引导会由插图、功能描述、注释文本、启动图标、焦点组成。这里和 iOS 的设计比较一致，但是大家要注意功能描述文本和注释文本的大小比例。
image.jpeg
△ 新手引导的设计

6. 离线功能Offline states

有些功能会因为无网络而无法完全使用。这时同样需要我们设计一些状态来表示现在是无网络的，让用户感知这个状态。当然，无网络不代表什么也做不了，我们同样可以在无网络的状态下提供给用户一些操作的选择，比如离线功能或者重新连接网络的按钮等。
image.jpeg
△ 离线功能

十四、Material Theme Editor

如果您在使用 Sketch，那么接下来是一个福利了。Material Design 发布了针对 sketch 的主题编辑器，这个主题编辑器可谓是生产力的大杀器了，比如更改某个样式即可应用到全局、图标的不同风格随意进行切换、字体样式随意调整等。
（下载地址：https://material.io/tools/theme-editor/）
image.jpeg
△ 主题编辑器

总结

我们可以使用 iOS平台的 APP设计稿（大部分采用750x1334px）改成安卓的尺寸（大部分采用1920x1080px），然后将状态栏改为安卓样式，字体改为思源和 Roboto，并使用切图工具（比如Cutterman）切出安卓所需的各套切图（一般为XHDPI、XXHDPI、XXXHDI三套或更多）即可完成粗略地安卓适配。当然我们也可以更适应安卓平台的生态环境：将返回图标换为箭头、更多图标改为竖排列三个圆点、图片改为直角等，做这些微调。第三种方式就是我们将 iOS平台和 Android平台设计完全区别开来：使用 Material Design 来为安卓设计独有的设计。Material Design 将 APP 从头到尾的各个细节都做了指引，给了参考，做了规范。并且这个规范一直在根据生态环境更新。而且学习 Material Design设计规范对于每位设计师都是一个学习的过程，在翻译本文关于 Material Design 的部分时，我也发现很多我之前忽视掉的设计上的细节，真的是受益匪浅。安卓设计和 iOS 相比，需要注意的问题更多，遇到可能坑我们的地方也更多。同样更大的挑战也会锻炼我们的设计能力，希望您设计出更好的安卓APP来。
参考资料：
Material Design规范：https://material.io
设备分辨率一览：https://material.io/tools/devices
Material Design色彩网址：https://material.io/tools/color
Vr等其他设备设计规范：https://material.io/collections/additional-google-specs
Material Design图标库：https://material.io/tools/icons
Material Design 的Sketch插件：https://material.io/tools/theme-editor
安卓开发指引：https://material.io/develop/android
扁平色彩样式：https://www.materialui.co
MD色盘：https://www.materialpalette.com
欢迎关注作者的微信公众号：「西见」
image.gif