设计感养成记（文字版）

本文来自网易云社区

作者：任放

近10年互联网行业野蛮发展，从最早醍醐灌顶的“Don’t Make Me Think”到现在人人都是交互设计师，随着用户体验意识的普及及深入人心，各平台设计规范的不断完善，好像用Axure能画出线框图就是交互了，知乎上甚至几年前就出现了“交互在几年内会被取代么”的提问。那么交互的专业性和价值体现在哪里？好看的产品千篇一律，耳目一新的设计却是万里挑一。我们需要突破，需要对新形式有进一步的探索，如果只是交出普遍存在的交互稿，恐怕绩效也不会很美丽。我今天在这里结合自己的工作经验，讲一下其中一个方面——设计感。

上篇：设计感是一种积累

一. 跟上时尚的步伐，不要停！

提到设计感，首先想到的就是对设计趋势的关注。平时要养成关注和收集的习惯，了解设计界又发生了什么，又出了什么新的设计形式等等，有时交互无法解决的问题是可以通过视觉方式解决的。没见过美好的事物，是做不出好设计的。

图 1 设计趋势关键词

以前看文章时，有同行整理了一份关键词英文汇总表（找不到出处了），大家平时逛Dribbble、Behance等国外网站时，或许用得到。

图 2 关键词英文汇总表

二. 抄现实，一切都是那么熟悉

设计时，我们是可以从周围事物中找寻灵感的。通过加减法对现实事物进行整合、丰富、延展，来降低用户的认知成本，产生情感共鸣。

图 3IOS：ApplePay、计算器、日历

图 4网易云音乐、QQ阅读、DailyCost

三.动词打次

动效的加入也是我们为方案增加设计感的途径之一。动效的意义、案例、工具等网上已经有很多资料，我就不赘述了。这里主要分享我的实操方法。当初做出动效Demo后，我苦于如何和开发描述动效细节，同时Demo本身也不便于维护和扩展，那时我的领导教导我：复杂的东西就分解它，直到拆分成你能处理的颗粒度为止。按照这个思路，我们把动效的所有元素进行分解如下图：

图 5 动效元素拆分

我们在这个表格里对动效进行维护更新，开发们一目了然，大大降低了沟通成本。这里也分享一下腾讯出品的交互微动效设计指南：

 对于由用户操作直接触发的反馈，理想的响应时间应该控制在100毫秒内。
 对于由用户操作间接触发的反馈，响应时长可允许达到1秒左右，不可超过2秒无反馈。当反馈时间为2-9秒时，可使用循环的加载样式（如常见的菊花转）。
 当反馈时间超过10秒时，须使用带有进度指示的加载样式（如已加载了60%，还剩30秒）。

图 6 动效响应时间

小元素的轻微变化（如渐隐渐现、大小变化等小范围变化），一般在200~300毫秒以内。
较大元素的复杂变化（如包含大范围缓动位移），可长达400-500毫秒。
对于移动设备而言，屏幕越大往往动效的位移也越大，因此持续时间也应该越长。动效持续时间：可穿戴设备＜手机＜平板电脑，差值约30%。
出场动效一般比入场动效更快。

图 7 动效持续时间

动效设计同样也要懂得克制，不应对用户造成干扰。在2013年AltWWDC上，由Raizlabs产品工程师Ben Johnson提出的“1+6+2”的APP动效基本原则，即一款APP可以有1个单元欢迎动画（传达给用户产品是做什么的）、6个单元向导动画（教用户产品如何使用）、2个让人愉悦的小细节（带来惊喜）。

图 8   APP动效基本原则

下篇：设计感是一种逻辑思维

四. 头脑风暴

头脑风暴的方法大家已经非常熟悉了。通过对关键词的提取、发散、抽象、重构，可以激发出我们很多灵感，打开设计的新大门。也许最终没有采纳脑洞方案，但过程中产生的火花对以后的工作有所帮助。

几年前，对邮箱进行概念设计时，我们尝试从不同的切入点进行发散，产生了十几个形式迥异的设计方案。

图 9邮箱概念设计部分脑暴方案

头脑风暴完成前期发散之后，需要通过筛选分析之后，选择解决当前设计问题的最优方案。我曾经做过一个叫“网易青柠”的活动类校园社交产品，其中有个“附近”的界面，即通过用户所在位置来发现周边发生的活动，最初的设计方案如下：

图 10  网易青柠-附近 功能界面

可以看出这个方案中规中矩，和大多数社交产品类似功能的界面设计类似，通过时间流的方式呈现活动列表，并无新意可言。后面我们通过对“附近”这个关键词进行发散，产生了下面这个方案：

图 11  网易青柠-附近 优化设计

我们直接通过地图标注的方式，显示“我”附近发生的活动，可以hover查看活动基本信息；同一地点多个活动时，hover地标可以查看多个活动信息等等。交互形式一下变得丰富有趣起来，让人兴奋。

头脑风暴前期的发散很重要，但后期的方案分析和细化更加需要我们投入精力，让脑洞方案能解决当下的问题，让看似不靠谱的设计变得更加合理，让头脑风暴真正为产品带来价值，而不仅仅是简单的胡思乱想。

五. 信息架构

先来看看网易100分曾经的答题入口页面信息，它有哪些问题？可以如何优化？

图 12  网易100分答题入口页面优化前

信息重复出现，次要按钮过分突出，核心信息位置不当等等，这些是由于需求没有分析透彻，信息层级混乱造成的。用户进入这个页面首先就是要对当前习题练习情况有所了解，然后可以快速对薄弱点进行复习。优化后的页面如下：

图 13 网易100分答题入口页面优化后

优化后的页面是不是看起来干净清晰了许多？也许有人发现：“更改教材”的按钮怎么没了？是的，对于这种低频操作，被我直接丢到“帐号设置”里了。

我们一直强调需求分析的重要性，但当我们真的接到一个需求，还是会犯很多初级错误，信息层级/架构和操作流程永远都是交互的骨骼和经络，需要我们设计时要想清楚，页面上每个元素的摆放都是“事出有因”的，而不是在一张白纸上，把元素简单的堆砌在上面。

六. 所见即所得

下面这个案例是很久以前做的邮箱写信页面改版，之所以现在又拿出来分享是因为我认为整个改版过程很典型。当时主流显示器还是1024*768，我们的写信页面长这样：

图 14 邮箱写信页面改版前

可以看出，由于左右两侧的功能模块，和写信页面本身的丰富功能，使写信正文区被挤的可怜，当时我们的设计目标就是让写信页面简洁，扩大写信正文区。按照上面讲的信息架构的思路，我把操作统一规划，重新组织层级，设计出第一稿如下：

图 15  邮箱写信优化第一稿

我把“抄送密送”功能收在“收件人”里，“添加附件”和“正文编辑器”功能入口都用icon替代收在了“主题”后面，不经常使用的“更改发件人”、“已读回执”、“邮件加密”、“定时发送”这些功能都放在了底部。页面放眼一望只有最核心的“收件人”、“主题”和“正文区”，是不是看起来足够简洁？达到了设计目的。

 结果需求方看过方案之后，提出了几点质疑：

1. “抄送密送”属于常用功能，不能藏起来！

2. “添加附件”和“正文编辑器”在宽屏下不易发现！

3. “发件人”、“已读回执”、“邮件加密”、“定时发送”离主操作太远了！

总之就是看起来很奇怪。其实就是步子迈大了，他们接受不了，他们更怕的是几亿用户接受不了！挑战用户习惯的设计优化需谨慎。

第一稿被彻底驳回了，再重来！第二稿我们的突破口就是大家都熟悉的“所见即所得”原则，为什么写信页面和读信页面要长不一样？如果一样了会如何？我们进行了尝试：

图 16 邮箱写信优化第二稿

是不是看起来还不错？“添加附件”和“正文编辑器”作为正文区的操作被放在了一起；“已读回执”、“邮件加密”、“定时发送”和“发送”这些功能放在一起了，只是收在了“更多”里。是不是看起来还不错？

七. 数据驱动

上面的写信优化第二稿还有没有继续优化的空间？是的，编辑器这么多功能，用户都需要吗？是不是可以更简洁些？那让我们一起看下这些功能的使用数据吧。

图 17  邮箱写信正文编辑器使用数据

基于以上的数据，我们将编辑器功能重新分组，功能按优先级排序，优化效果如下：

图 18  邮箱写信编辑器优化

最后我们的写信页面优化终稿是长酱紫滴：

图 19 邮箱写信优化终稿

整个优化过程，就是深入了解需求，分析数据，通过基本的设计方法和原则对功能进行信息架构，该突出的突出，该隐藏的隐藏，保持界面的有序和节奏。

结语

增加设计感的方法远远不止我上面提到的这些，不要小看一些很基本的设计原则和方法，往往他们能帮你解决大部分的设计问题，重要的是要做有思考的设计（推荐阅读：什么是优秀的设计思维与方法？）。

最后，推荐给大家两本工具书：《通用设计方法》和《通用设计法则》，当大家遇到设计瓶颈时，可以翻一翻，找到适合的方法解决问题。只要能解决问题的方法就是好方法，谢谢！

本文来自网易云社区，经作者任放授权发布

网易云免费体验馆，0成本体验20+款云产品！

更多网易研发、产品、运营经验分享请访问网易云社区。