用这13个方法，帮你做出真正轻量化的移动App 设计

编者按：无论是扁平化还是Material Design，简化图标元素都只是触及表象，想创造出本质上轻量化的设计，界面细节和交互上的考量也非常多，今天这篇好文，总结了13个帮你做出轻量化设计的方法。

1. 创造更轻的设计（Lighter Design)

什么是轻设计

扁平化设计不再使用各种斜度和阴影，让app有了更轻盈的美感。这意味着通过运用负形空间来取代斜度和阴影，创造出一个只关注核心信息的、更为简洁的界面，从而摒弃那些对app本身和用户流程来说都很低效的设计元素。

如何更轻

较轻的设计舍弃掉了那些分散人们注意力的元素，以引导用户去关注屏幕上有意义的内容，使得导航更简单，同时又塑造了一种极简、现代的高大上品牌形象。

2. 一种字体用到底

什么是只用一种字体

减少屏幕内所使用字体数量能最大限度地表现字体设计的张力。因为当你少用不同的字体、不同字号还有像斜体、黑体、半黑体等字形样式时，内容之间留白的级别差异才能更好地被区分开来。

为什么只用一种字体

让单一的字体贯穿于app中，不仅使品牌形象更趋稳定，也有利于跨渠道的内容响应（如app，手机网页，电脑网页等），从而优化全渠道体验中的手机元素。另外，用户也希望在滚屏浏览相关内容时眼前只有一种字体样式。

3. 彻底告别线条——使用空间和组块

什么是空间和组块

尽管从前常用分割线来细分屏幕里的每个区域，但是这样界面看起来会很密集凌乱。如果把线去掉，只将空间区分成不同内容的组块，这样做既能释放空间，也能使界面看起来更干净。

为什么要去掉线

去掉具体的线能让界面看起来很现代，而且更关注实用性。举例来说，图片和字型能因此放得更大，那么视觉上会更清晰，使用起来也会更简单。利用留白来替代画线分隔，就能以一种不扎眼地方式划分各个区域。

4. 将数据突出强调（Spotlighted Data）

什么是突出强调

由于用户习惯越来越趋向于极简的界面，大家也就更常用一些大字和撞色来强调某些数据，使其成为视觉焦点。根据不同目标客户群的需求，突出数据也有很多种方式。

为什么要突出数据

受到大字和跳色的影响，用户会把注意力放在屏幕内指定的区域，这样的方式既不刻意，也不强制。由于提供了更简便的导航和收集信息的体验，信息就能更迅速地被用户接受。

5. 创造微交互（Micro-interaction）

什么是微交互

微交互是在一个用例中做出一些小的视觉提升（如动画、音效等），使用情境可以是完成一段数据处理、点赞或者推送即时消息等等。这些交互虽然看起来很微妙，却能正好让你注意到关键元素，以此来提高不同产品间的辨识度。

为什么要有微交互

举例来说，当用户在完成一些小任务，比如调整设置，系统能够弹出友情提示信息，这种人性化的微交互就像是贴心小棉袄。用户也会觉得拥有特赞的微交互的app用起来更有意思。

6. 精简你的配色

什么是精简配色

2013年扁平化设计横空出世后，精简调色板就成为了一个趋势，一切以明确和简洁为纲。结果，设计师和用户为了更干净的界面，都开始尽量少用颜色。

为什么要精简配色

颜色在创造特定情绪、引导用户视线和品牌传达中都必不可少。品牌使用较少甚至专一的颜色能更直接反映出它的品牌标识性。另外，用户也更喜欢不那么乱花渐欲迷人眼的视觉效果，它能相当有效地突出要点，使导航在app使用流程中更清晰明了。

7. 让界面层次化（Layered Interface）

什么是层次化

曾几何时，界面设计是拟物化（以写实为准则的设计，如日历app做得像真的日历、有景深的app图标、手机相机的快门声音）的天下。如今，时移世易，大家都高唱“扁平化大法好”。一番改朝换代，扁平化刷新了一些新的规则，设计不再只关注3D能做多真，而是改用“层”的方式来营造实体感，从而创造一种更“可触摸”的体验。

为什么要层次化

虽说“扁平化大法好”，但扁平化设计最有可能犯的错就是“太扁”，因为其设计过于微妙，以致用户很难辨识和参与其中，更别说将其联想到3D实物世界（或者以前的拟物世界）。而“层次化”则利用z轴表达出了物件压物件的竖向关系。分层和增加深度有助于辨别不同物件之间的关系，也能让某些特定的对象得到关注。

8. 使用Ghost按钮

什么是ghost按钮

ghost按钮透明无色，边界的线非常细，形状也很简单（像长方形或正方形），有直角或柔和边缘，其中的文本都很简洁明了。

为什么要用ghost按钮

ghost按钮能在保持极简外观的同时又吸引人关注它，而且它可以使屏幕上复杂的按钮拥有等级体系。当同一页面内有很多不同的按钮时，它们会根据优先级被设计和摆放（如将ghost按钮用在选项或过渡步骤中）。在某些情况下，Material design会用细微的阴影来帮助用户察觉到这种等级体系。

9. 创造手势交互（Gestures）

什么是手势

陀螺仪和动作传感器的一体化让设备侦测到用户的动作，在此基础上，用户与设备间的交互不仅仅是对屏幕点来点去，而更像是现实生活中的手势在屏幕上的移植。

为什么要使用手势

用户都很懒，喜欢用最简单的动作。举个例，如果要让用户删除一个东西，无论男女老少都会尝试去把这东西拽出屏外。因此，如果要提升用户体验，减少点按，增加滚屏，让应用程序不是个只能点来点去的玩意儿，这样交互性会更强。

10. 使用动效（Motion）

什么是动效

随着软件革新，设计师现在也能仅通过利用风格样式列表来控制动作了。以运动特征为基础的设计元素到处都是，包括过渡、动画甚至是模仿立体的质感。设计中使用动效可以帮助用户消化内容，让关键元素或数据、对象与其他的内容区分开，以强调它的重要性。

为什么要有动效

动效能将用户的关注点转移到特定区域，或者忽略它们。在界面中做出视觉响应能提高参与度，营造小惊喜取悦用户。

11. 缩短用户流程

什么是更短的用户流程

与其让用户横跨多重页面来完成一个简单的需求处理，不如在单屏内囊括所有过渡层阶的操作，这样就能减少其放在app上的时间和精力。举个例子，用户完成前一个部分时，就会有某种形式的自动开启，或者出现下一步输入区域的提示。

为什么要缩短用户流程

移动端用户随时都在移动中，因此他们更倾向于在app内简单迅速地完成任务处理。根据这个共识所设计出的应用程序体验，理应让用户花费的精力降至最小，同时也可增强app启动时的速度。

12. 建立设计准则（Design Standard）

什么是设计准则

设计标准是在项目初始时，通过决定色彩、图标和整体布局间距等标准，来确立视觉语言的过程。

为什么要有设计准则

建立设计标准能使app内部以及在不同平台之间的表现更为稳定和统一，将项目上线时出错的可能性降到最低，也让以后的修改更容易。

13. 创造原型（Prototyping）

什么是原型

原型是产品初步或早期的工作版本，能提供对设计具有实用性和价值的分析，从而为设计的效用作出有价值的建议，预测出潜在的修改需求，以此来节约设计师在提升用户体验上所付出时间和精力。

为什么要创造原型

原型可以通过进行低成本的“实验”来显现出项目的关键要素，包括其条件和特性作用域。它能让你对产品进行实验和反复推敲，将时间和资源用来从实验结果中去学习，其整个过程是以洞察力为驱动的。

想学MD 设计，没有比这个专题更全面的教程了：

官方译文：

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

学习笔记：

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

素材篇：

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

实战教程：

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

原文作者｜Onur Oral
翻译｜邓诗韵 高雨滴
校对｜高雨滴

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

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量150万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com