Spell（高级产品设计@Salesforce）：今年年初的时候，我写了一篇关于2016年设计趋势预测的文章。一方面为了记录自己观察到的一些现象，一方面让自己养成每年总结的好习惯。回头一看，记录下的点滴竟然逐一变成了现实，不禁感觉非常幸运。今天我来分享一下我自己对于2017年设计趋势的观察。

我会谈到以下5点：

1. 微交互将会大量主导产品设计细节
2. 平，却不再那么平了，颜色，字体和质感将成为设计师追捧的视觉利器
3. The internet of everything真正崛起，将增加设计的复杂度
4. 人的距离将会无限被拉近
5. 触觉声音3D，我的五感都可以有交互

阅读时间大约5分钟。

咚咚咚：前段时间参与设计一个较大的线上活动，包含十个奥运相关小游戏及一些相关界面，前后历时几个月。奥运后活动下线，设计工作完结后，我整理了这过程中的收获及工作方式，和大家分享下。

立项前信息收集与准备

有些大型项目是很早就规划了要做的，只是具体哪天立项发邮件或哪些人参与还没确定，如果知道要自己要参与这件事，可以做些准备工作，提前了解一些信息：

• 项目人员。了解各个职能的接口人是谁，运营、产品、视觉、前端、后端、测试等有谁参与，有些人可能之前都不认识，大家的工作方式和性格也不一样，提前了解认识下，对后期合作和方案推进会有帮助。
• 信息。保证自己了解到的信息是一手资料很重要。和各方沟通过程中收集下项目的背景、目标、投入的资源、方案的思路及活动体量、以及可能的用户利益点、项目时间点（通常deadline是确定的）等等等等。这些信息可以通过产品和运营了解到。如果是公司的例行活动，能够拿到以往活动的数据和资料当然是最好，如果没有的话也尽量找到以前做过类似活动的人员了解一些前人的方法和经验。
• 别人的想法。项目组人员总会有自己的想法和方案，有时候甚至方案是比较确定的。尽早的了解到产品或者运营的想法可以预估个大概的时间节点和需求，做到心中有数。如果有好的想法这个时候提出来也最容易被采纳，毕竟时间上一切来得及。

编者按：可以说现如今的移动端UI设计中，卡片式设计撑起了半壁江山，它随性自由又充满了逻辑和组织性，它不仅流行着，而且还正在变得更加流行。它长盛不衰的秘密到底何在？读下去~

个性化的用户体验是目前网页和APP设计的大趋势。个性化的新体验大多建立在单独内容的聚合体之上，而多类型的内容想要聚合起来，卡片式的界面则是最合适的载体。如今你所看到的UI界面设计，卡片式设计几乎无处不在，从新闻类站点到游戏界面，从物流APP到社交媒体，等等等等。今天的文章将会详细解释卡片式设计对于设计师的意义，以及常见的卡片式设计的功能与特性。

编者按：如何形成自己的设计方法，建立交付物的衡量标准，优化协同模式。在这篇文章里，你可以看到一个阿里专业设计师是如何进行自我提升的。

鸿影：如果2015对我来说尚处于用户体验设计的职场入门阶段，2016的核心则是开始撕下初级与新人标签的进阶修炼。4月份的2016 S1开始的时候，我给自己设定了包括形成个人设计方法论与应用案例等一系列目标，如今S1结束，也是时候对这段时间的进阶修炼来一个总结回顾了。

形成自己的设计方法

在公司内部经常会有一些跨部门的UED分享活动，听下来个人最明显的一点感触就是，这些来分享的设计师普遍有着一套自己思考总结出来的设计方法论，并且有成功应用案例支撑。

也许有人会有疑惑，现在关于设计方法的轮子到处都是，网上随便一搜就能找到某某大厂某某大牛的设计方法分享，直接拿来用就好了，为什么还要费心费力自己造轮子呢？

在我自己的设计方法还没有完全成型时，我一度很迷信于网上别人的各种设计方法的分享，并试图在自己的项目里加以运用，但结果却差强人意：设计推导的过程看似洋洋洒洒专业性十足，拿出来给别人一看一讲就发现漏洞百出；有时为了套方法而套方法，体验地图一类的输出物看似有模有样，最后项目做完了才发现设计方案时基本没用到……虽然自己用的都是别人经过验证的设计方法，但却没有理解透这些方法的应用场景与局限所在，也不清楚哪些环节其实并非必要存在，自然也让实际的应用效果大打折扣。而靠自己思考、沉淀和交流改进出来的设计方法，理解和运用起来则要透彻顺手很多。

编者按：如何形成自己的设计方法，建立交付物的衡量标准，优化协同模式。在这篇文章里，你可以看到一个阿里专业设计师是如何进行自我提升的。

鸿影：如果2015对我来说尚处于用户体验设计的职场入门阶段，2016的核心则是开始撕下初级与新人标签的进阶修炼。4月份的2016 S1开始的时候，我给自己设定了包括形成个人设计方法论与应用案例等一系列目标，如今S1结束，也是时候对这段时间的进阶修炼来一个总结回顾了。

形成自己的设计方法

在公司内部经常会有一些跨部门的UED分享活动，听下来个人最明显的一点感触就是，这些来分享的设计师普遍有着一套自己思考总结出来的设计方法论，并且有成功应用案例支撑。

也许有人会有疑惑，现在关于设计方法的轮子到处都是，网上随便一搜就能找到某某大厂某某大牛的设计方法分享，直接拿来用就好了，为什么还要费心费力自己造轮子呢？

在我自己的设计方法还没有完全成型时，我一度很迷信于网上别人的各种设计方法的分享，并试图在自己的项目里加以运用，但结果却差强人意：设计推导的过程看似洋洋洒洒专业性十足，拿出来给别人一看一讲就发现漏洞百出；有时为了套方法而套方法，体验地图一类的输出物看似有模有样，最后项目做完了才发现设计方案时基本没用到……虽然自己用的都是别人经过验证的设计方法，但却没有理解透这些方法的应用场景与局限所在，也不清楚哪些环节其实并非必要存在，自然也让实际的应用效果大打折扣。而靠自己思考、沉淀和交流改进出来的设计方法，理解和运用起来则要透彻顺手很多。

在很长一段时间里面，网页中的背景图片元素，一直都生活在CSS、JS甚至视频的阴影当中，它的“参与感”并不强烈。不过随着审美和用户需求的逐步变化，背景图片在网页装饰上，开始发挥着越来越重要的作用。

当然，从总体上来看，变化并不明显，但是在绝大多数的情况下，背景图片开始作为主要的视觉驱动力而存在。

传统意义上的背景主要是使用图片，近几年开始流行视频背景了。而这些主要还是集中在网站的页头、Banner等位置，大多用来欢迎用户，推荐内容。许多网站都采取了相似的策略，让用户有所期待。

随着动效的流行，现在越来越多的设计师开始试图将CSS3、HTML5和JS等技术融入到背景设计中来，寻求全新的解决方案。事实上，现在已经有四种不同类型的动态背景设计方案，它们风格都非常符合时下流行的趋势，且都具备不俗的发展潜力，今天我们聊聊这四种风格前卫大气的背景设计。

动效能讲述故事。和图片不同，动效能够呈现变化的过程，讲述一段简短而有趣的故事，能够同你进行对话：“嘿，你该看这个按钮了”或者“哦耶！你刚刚完成了一个操作！”不过，动效的目标并不是单纯的娱乐用户，而是帮助用户了解交互的效果和界面中发生的变化，让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点：

“我们设计的不再仅仅只是静态的界面，实际上，我们所设计的是用户从界面获得内容的过程。”

动效广泛运用于网页内容和背景当中，用来强化功能，提升美感：它会直接影响用户的行为，引导用户注意到特定的内容，呈现状态，帮助用户找到他们想要的内容，达成目标。想要借助动效提升用户体验，可以参考下面的指引来进行优化：

进入2016年后，我们会发现行业在体验设计上出现了很多新的元素，从我们平时经常浏览的设计社区中，这些新元素出现的频率越来越高，比如彩色投影、双色调渐变设计等，我们也慢慢开始接受这些新变化，并且逐步应用到我们的产品中。这篇文章的初衷是希望能更系统更全面地梳理出一份流行趋势的分析，能对我们平时的工作能产生一定的指导作用。

一、使用模糊背景

模糊背景和iOS毛玻璃效果非常的相似，也符合时下流行的扁平化和现代风的设计，设计效果十分的赏心悦目，可以很好的和幽灵按钮以及时下流行的元素搭配起来，提升用户体验。

以淘宝电影为例，采用的是虚化电影海报作为背景，这样做的好处是每一个页面的头部效果都不一样，这样的排版视觉效果更佳，同样也突出电影信息等主要内容。从设计的角度来看，这也很容易实现，让内容模块变的清晰，同时可以规避复杂的设计，还可以降低设计成本，花最少的时间达到最大的效果。

从今年4月份开始，我被安排负责一个直播项目，设计之路可谓曲奇坎坷，难得的设计经验让我对交互设计本身有了一些新的认识。结合自身的感悟，我自认为交互设计师除了专业能力的要求外，还应该具备以下素质：

1，业务深度带来业务驱动力

在工作之初，我认为无论负责什么项目，交互设计都是一种解决复杂问题的能力，从设计分析到设计产出是具有绝对的普适应；而且随着设计能力的提升，经验的积累，这种普适性更加凸显；这一层我并不否认，但交互设计师只聚焦于普适性可能永远都处于门外汉的水准；有机会专门负责直播项目，让我不得不接触和使用各种直播App，不得不和很多专门做直播的人合作，在这过程中，让我对于直播业务有了深入了解。

举个栗子，比如设计一个直播的发布流程。

乍一看许多APP的布局并不复杂，感觉换成自己也能设计出来，但是当你真的开始着手设计这么一个APP的原型的时候，会发现事情并不是那么简单。看着别人已经设计完成的设计可能觉得不难，可是当自己动手的时候，在特定的元素的选取和设计上很容易陷入困局，这个时候才明白它的难点并不在于工作量的多少，设计者常常深陷于细节构建的囹圄，这才是它的困难之处。即使是元素与元素之间的分隔方式，都能随随便便用一整篇文章来进行探讨。

传统的分隔方式

在UI界面中，最传统也是最常见的分隔方式用的是线，将视觉上或者内容上需要区分的内容用横向或者纵向的细线区分开来，它帮助用户了解页面的层次结构，赋予页面内容以组织性。