导航模式是提高可用性的捷径。当你查看近年来最成功的交互导航设计时，显而易见的赢家是那些完美执行基本原则的人。虽然跳出条条框框思考是一个非常好思维方式，但有些规则是你不能打破的。以下是创建出色的移动导航的四个重要原则：

简单

首先，最重要的是，导航系统必须简单。良好的导航应该感觉像一只无形的手，引导用户。一种方法是根据移动用户最有可能执行的任务来确定移动应用程序的内容和导航的优先级。

可见

正如雅各布·尼尔森（ Jakob Nielsen）所说，识别物体比记忆更容易。这意味着你应该通过使操作和选项可见来最小化用户的记忆负担。导航应该始终可用，而不仅仅是在我们预期用户需要导航的时候。

明确

导航功能必须是不言而喻的。你需要以简洁明了的方式传递信息。在没有任何外部指导的情况下用户应该一目了然的知道如何从A点转到B点。试想一下购物车图标，它作为一个标签或查看项目的标识符。用户无需考虑如何导航才能进行购买；此元素将指导他们执行适当的操作。

一致性

所有视图的导航系统应相同。不要将导航控件放在不同页面上的新位置。不要欺骗你的用户，要始终保持言行一致。你的导航应该使用“最不意外的原则”。导航应该激励用户参与并与你所提供的内容互动。

大拇指设计法则

史蒂文·霍伯在对移动设备使用情况的研究中发现，49%的人依靠一个拇指在手机上完成任务。在下面的图中，手机屏幕上的图表是近似可达图，其中颜色表示用户可以触及的屏幕区域，并与拇指交互。绿色表示用户可以轻松到达的区域；黄色表示需要伸展的区域；红色表示需要用户改变握住设备的方式的区域。

在设计时，要考虑到你的应用程序将在多种环境中使用；即使是喜欢使用双手握手机的人也不一定总是使用多个手指，更不用说双手与你的用户界面交互了。将最高层级且常用的操作放在屏幕底部非常重要。这样，通过单手和拇指的交互即可轻松达到目标。

另一个重点是底部导航应该用于具有相同重要性的最高层级目标。是需要从应用程序中的任何位置都可以直接访问的。

最后，也是很重要的一点，要注意点击目标区域的大小。Microsoft 建议 你将触摸目标区域大小设置为9平方毫米或更大（135 ppi显示器上的48×48像素，缩放比例为1.0倍）。避免使用小于7平方毫米的触摸目标区域。

触摸目标区域不应小于44像素到48像素（或11毫米到13毫米），包括填充。

标签栏

许多应用程序使用标签栏来显示应用程序最重要的功能。facebook只需轻触一下就可以提供核心功能的主要部分，允许在功能之间快速切换。

底部导航设计的三个关键因素

导航通常是将用户带到他们想要去的地方的工具。对于具有相似重要性的指定目的地，这些目的地需要从应用程序中的任何位置直接访问。好的底部导航设计应该遵循以下三个原则。

1.仅显示最重要的目的地

避免在底部导航中使用五个以上的访问标签，因为TAP目标之间的距离太近。在标签栏中放太多标签会使人们很难点击他们想要的标签。而且，随着每个额外的选项卡显示，就会增加了应用程序的复杂性。

避免使用五个以上的目的地。

避免滚动内容

对于小屏幕来说，部分隐藏的导航似乎是一个非常好的解决方案，因为你不必担心有限的屏幕空间，只需将导航选项放入一个可滚动的选项卡即可。但是，可滚动的内容效率较低，因为用户必须先滚动才能看到所需的选项，因此最好尽可能避免。

该避免在选项卡栏中放置太多项目，以防止用户滚动，然后才能单击所需的选项。

2.明确当前位置

应用程序菜单上最常见的一个错误是没有明确用户的当前位置。“我在哪里？“是用户遇到的基本问题之一。用户应该第一眼就知道如何从A点转到B点，而不需要任何外部引导。你应该适当的使用视觉提示（图标、标签和颜色），这样导航就不需要任何解释。

图标

底部导航应该与图标的内容进行适当的结合。尽管有一些用户熟悉的通用图标，但大多数图标代表的功能包括搜索，电子邮件，打印等。

在适用于Android的先前版本的Bloom.fm应用程序中，很难理解用户的当前位置。

颜色

避免在底部选项卡栏中使用不同颜色的图标和文本标签。相反，遵循这个简单的规则，用应用程序的主颜色为当前的底部导航（包括图标和任何显示的文本标签）着色。

左：不同颜色的图标使你的应用看起来像一棵圣诞树。右：只使用一种原色。

这是iOS的Twitter应用程序中的底部栏菜单。消息视图处于选中状态。

如果底部导航栏是彩色的，请确保对当前位置的图标和文本标签使用黑色或白色。

左：避免将彩色图标与彩色底部导航栏配对。右：使用黑色或白色图标。

文本标签

文本标签应为导航图标提供简短且有意义的定义。避免使用长文本标签，因为它们不会截断或自动换行。

避免换行，截断和缩小文本标签。

菜单元素应易于理解。用户应该能够理解点击元素时会发生什么。

目标尺寸

使目标区域足够大，以使其易于点击或单击。要计算每个底部导航动作的宽度，请将视图的宽度除以动作数量。或者，将所有底部导航动作设置为最大动作的宽度。Android建议移动设备底部导航栏的尺寸如下。

显示了移动设备上的固定底部导航栏，单位为密度独立像素（dp）

标签上的微标

你可以在标签栏图标上显示微标，以表明存在与该视图或模式相关的新信息。

考虑对标签栏图标加微标以保持通俗易懂。

3.使导航不言而喻

良好的导航感觉就像是一只看不见的手，可以引导用户前进。毕竟，如果人们找不到它，即使是最酷的功能或最引人注目的内容也没有用。

行为

每个底部导航图标必须指向目标目的地，并且不应打开菜单或其他弹出窗口。点击底部的导航图标可以引导用户直接进入相关的视图，或者刷新当前活动的视图。不要使用标签栏为用户提供对当前屏幕或应用程序模式下的元素起作用的控件。如果需要提供控件，请改用工具栏。

每个底部导航图标必须通向目标目的地。

上面的控件是工具栏而不是底部导航。

保持一致性

尽可能在各个页面上显示相同的选项卡。最好是你能给用户一种视觉稳定性的感觉。

当选项卡的功能不可用时，不要删除它。如果在某些情况下删除了某个选项卡，但在其他情况下没有，替换使应用程序的UI无法预测。最好的解决方案是确保所有选项卡都已启用，但要说明为什么选项卡的内容不可用。例如，如果用户没有本地文件，则Dropbox应用中的“本地”选项卡将显示一个页面，说明如何获取文件。

Dropbox应用的空状态页面

滚动时隐藏标签栏

如果屏幕是滚动的，则当人们滚动查找新内容时，标签栏可以隐藏，而当他们开始回到顶部时，标签栏可以显示。

标签导航可以在滚动时动态消失。

视觉愉悦

避免使用横向运动在视图之间转换。活动视图和非活动视图之间的过渡应使用淡入淡出动画。

图形图标：创意导航

屏幕尺寸是将你的观点传达给用户的主要挑战。使用图形图标作为菜单元素是解决移动端屏幕空间有限问题的最有效的方法之一。图标的图形说明了点击它后将会进入什么页面，这种导航模式更加节省屏幕空间。

Google Material Design，浮动操作按钮

Google Material Design 对这种类型的导航使用术语“浮动擦操作按钮”。它们的区别在于浮动在UI上方的带有圆圈的图标，并具有运动行为。

像Evernote这样的应用程序通过对最重要的用户操作使用浮动操作按钮简化了操作流程。

Tumblr具有漂亮的图形图标以及适当的标签。当你在应用程序中滑动屏幕时，这些图标也很方便地消失。

然而，这种模式有一个明显的缺点-浮动操作按钮隐藏内容。从用户体验的角度来看，不便于用户频繁点击操作

而且，许多研究人员表明，图标难以记忆，而且效率极低。只有普遍理解的图标才能被很好的记忆（例如，打印，关闭，播放/暂停，回复等）。这就是为什么使图标清晰直观*，并在图标旁边引入文本标签的*重要原因。

结论

导航通常是将用户带到他们想要去的地方的一种媒介。在使用应用程序时，要始终考虑用户角色以及他们的目标。然后，定制导航以帮助他们实现这些目标。为用户设计。一个产品对他们来说越容易使用，他们使用它的可能性就越大。

转自：UI中国-Coldrain1

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在我看来，界面设计的视觉层面主要可以分为三个维度来解析：信息传递、视觉美化、创意创新。

在做交互文档之前，我们先要明白什么是交互文档、为什么要做以及做了给谁看。

一、什么是交互文档 

交互文档，即交互设计说明文档。英文 Design Requirement Document ，简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。

二、为什么需要交互文档          

有些人可能对文档这种东西比较反感，尤其是从事工作不久的朋友。其实工作得越久，越会发现文档的重要性，它可以帮助你理清思路，并记录下来，便于回顾。

通常，一个比较基础、规范的交互文档（DRD）由：文档封面、更新日志、文档图例、设计背景/思路、业务流程、页面交互、全局通用说明、废纸篓八部分组成。当然，这不是绝对，你可以根据你的实际工作需要进行增减。

比如，如果是C端产品的话，用户调研的结论、用户画像、用户体验地图等等，都可以放进去给看的人一个参考。尤其是在如今这么关注用户体验、产品思维的一个大环境下，这些数据支撑很有力量。同时还可以帮助开发人员、界面设计人员培养产品思维、体验思维，大家一起将产品变得更好。

其次，交互文档的整洁与美观也很有必要。相信在过去几年不少人有遇到过这样的产品经理（兼交互），他们会输出一些有时连他们自己都看不太懂或者直接从其它竞品截图来的线框图。当开发和界面设计的人提出质疑的时候还美其名曰线框不重要，重要的是里面的业务逻辑。。。其实用产品思维想，交互文档就是交互设计师的产品，而看的人就是用户，保持良好的可读性，可谓至关重要。

1、文档封面

交互文档的封面如上图，通常包括产品的名称、Logo、版本号以及版本发布时间、所属部门、对接负责人/对接人。

2、更新日志

我们都知道，在产品的迭代的过程中，需求/功能是会不断调整的。而更新日志，就是为了迭代而生。它一般由修改日期、修改内容、修改人、版本号和备注组成。如果是新增的功能或模块，建议是要加上链接可直接跳转至新增内容的，如上图。

版本号也是同理，都应加上对应的版本链接，便于查看者回溯之前的内容，与当前的新版本形成对比。这一点对开发人员来说很重要，其次对于新同事深入理解产品也能起到很大的帮助。

修改日期，通常是按时间倒序排列，查看起来会比较方便。

3、文档图例

文档图例，顾名思义就是关于此文档的一些辅助说明，目的是为了让读者更好地理解文档。如上图的：操作/跳转图例、标签图例、流程图例以及手势操作图例。

4、设计背景/思路

因为我今年对接最久的是一个B端产品的项目，所以整理了一个产品画像，仅供参考。

5、业务流程

业务流程图，不是操作流程图也不是页面流程图。它是产品的整体业务流程，直接和业务挂钩，可以说是产品的核心流程。

例如淘宝APP，买家购物由始至终的流程就是它的业务流程。通常用泳道图的形式展示，多数情况下是由产品经理绘制。

以上是我所负责产品的核心业务的流程图。因为是B端产品，涉及角色较多，针对3个代表性角色分别进行了绘制，仅供参考。(涉及到保密协议，所有关键词都去掉了)

6、页面交互

（1）信息架构

信息架构属于用户体验的结构层，是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代，否则不会大改。

（2）权限说明

如果是C端产品，权限这一块相对简单，比较好整理的。B端产品涉及角色众多，可能要单独拎出来分析整理。以上仅供参考，大家具体情况具体分析。若是功能很单一的产品，交互文档中也可省去这个模块。

（3）操作流程图

产品操作流程图就是通过图形化的表达形式，阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时，会产生的一系列操作和反馈的图标。

上图是登录、注册和找回密码的操作流程图。仅供参考。模板源文件下载，后台回复“交互”即可。

（4）页面线框图

页面线框图，是通过图形化的表达形式，阐述产品在页面层面的信息。包括： 

【页面标题】即每一个页面的对应标题，一般就是导航栏标题

【页面内容】以黑白为主，保证信息规整易读

【交互说明】用标签将其对应起来，包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则 等等

【主流程线】只需要画出主流程线即可，千万不可太多太杂，时刻考虑读者的感受

以上是注册/登录的线框图和详细的交互说明。将重点内容用红色标记，可以让查看者一目了然更好理解文档。

7、全局通用说明

（1）常用控件

常用控件类似UIKit，通常将极具复用价值的控制整理在一起，方便及时调用。

（2）复用界面

（3）时间规范

（4）缺省页汇总

五、总结

文档、软件只是工具，最重要的还是要落地、实行起来才能对产品有所帮助。所以在撰写文档的每时每刻，都应该站在“读者”的角度思考，他们看的时候感受会是怎样的，会觉得很难理解吗？

转自-站酷

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

图标是 UI 设计中极为重要的一个环节，我们在做每个界面的设计几乎都会涉及到图标的表达，出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功，因此除了日常多画提升对图标造型的把控力外，我们也更需要了解和学习图标设计的趋势类型，从而帮助我们提高在设计中的效率。

基于自我学习的目的，平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理，以及自己对于每种图标类型的思考。

图标的类型划分

设计网站上的图标可以说是多种多样，不同类型的图标都有着独特的魅力。例如，线性图标简洁轻量、面性图标厚重直接，当然同一种类型的图标也具有很多不同的表现形式。

因此基于本人对图标的理解，大致划分为三类：线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。

线性图标

使用轻量的线条勾勒的图标，整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受，细线轻量、直线硬朗、曲线柔美。

1. 线型图标基础分析及想法

粗细对比

粗细不同，图标的力度和重量感就会有差异。粗线的图标，视觉关注力来说会更加突出，但较于细线的图标也会显得粗壮、厚重。细线的图标，精致、透气、秀美。

但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细，而并非单纯的考虑图标的关注度，反而更需要考虑图标与界面整体的平衡感。

柔度对比

直角与圆角决定了外形的感知和风格的走向，如下图对比中看出，圆角越大图形越趋向于可爱柔美（如下右图），圆角越小则越直接、硬朗和阳刚（如下左图）。因此刚或柔或中间值完全取决于早期对于整体风格的定调。

繁简对比

除了轻量化和简洁之外，图标的识别性也是极为重要。如下左图，「过度简洁」 导致图标失去该有的识别度而出现歧义，而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中，应该保持在不影响图标识别度的情况下，最大限度的提升图标的简洁程度。

特征的识别度

除了简洁程度，也需要考虑图标该有的特征。例如下图 「评论」 图标的案例，当我把图标中的「三个点」 去掉时，图标依旧具有 「对话/评论」 的表意，而当我把下面的 「箭头」 去掉保留 「三个点」 时，则会出现歧义，它可以被表意为 「更多」 的意思，因此在设计图标时需要对于表意做精准把握，避免歧义出现。

保持图标的特征美感

如下面的 「心形」 图标，下左图是我们具有普识性的图标，与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计，整体外形虽然保持着爱心，但为了与整体风格「一致」 强行对外轮廓进行切割，与原图形在美感上则稍微有些出入，这也是我们需要思考的关键点。

组合型比例

组合型的比例会影响到图标的精致程度，准确的 「比例值」 能让整体的造型趋向平衡，更具有美感。如下图案例尝试了两组不同比例的效果，这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时（下图2），图标的整体视觉效果较为平衡；当大于 1 : 2 并接近 4 : 3 时，图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时（下图3）则会产生稀疏不紧凑的效果。（这里的比例只是案例需要，实际设计以最终的视觉感知为准）

2. 线性类型拓展

基础的理论，结合延展的应用，可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例，可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约，没有多余的线条，通过线条还原图形的本质，外形 「简单」 却具有很强的识别性，在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控，多一笔可能显得复杂，少一笔可能影响识别程度。以上图为例，图标的组合元素保持在 2 个左右，整体较为干净。

实际应用：Instagram、Airbnb、Facebook、Twitte

双色

相较于 「纯色的图标」 更具表现力，细节上也会更加丰富，形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系：同为冷色系、暖色系或同一色系的表达形式。如下图案例，以暗色为主色，亮色点缀提亮，使得图标具有一种高光提亮的感觉。

另一组案例是亮色主色结合暗色，整体图标效果还算可以，但较亮的颜色没有应用在图标的关键特征上，使得图标第一眼的感知稍有减弱。

对比互补色：颜色跨度更大，层次更加分明。如下图案例，红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。

实际案例：腾讯动漫我的页面

透明度变化

本质上与上面一种为一个类型的设计，通过透明度的叠加和变化，提升图标的层次感和空间感，降低图标的压迫性。

实际案例：爱奇艺9宫格图标

渐变层次叠加

渐变带出了图标的质感，结合「不同深度」或「不同饱和度」的变化，让图标更具有细节和层次。

黑白+品牌色

黑白色作为主色调，结合品牌色作为点缀色。与常规的黑白图标相比，既产生了变化，同时兼顾了品牌色的透出。

实际案例：大众点评攻略页面图标

线性渐变

结合渐变的颜色，丰富了整个图标的视觉表达，并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试，白底：粗线比细线的视觉效果相对较好，渐变也能较为清晰地被表达；黑底：细线比粗线的视觉效果显示得更加精致和具有锐度感。

实际案例：网易考拉、NAVER

一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感，关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如，「从左到右」或「从右到左」形成一体化的连贯线条，开口起始点不一致会影响整组图标的一致性，应用在页面时也会显得杂乱。

断点图标

与上一种较为类似，但没有连贯度的要求。在线形图标基础上面，寻找一个缺口来打破 「全包边图标」 的沉闷感，使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小，另外需要控制开口个数避免过多导致图标外形过于零碎。

实际案例：腾讯体育、京东

面性图标

面性图标比线性图标更能表达出图标的力量感和重量感，比线性图标会更加容易吸引用户目光。在识别度上，面性图标更加依赖于外轮廓的清晰度，因此在设计时对于外形的打磨是重中之重，清晰的外轮廓可以帮助提高识别度。

1. 面型图标基础分析及想法

轮廓对比

轮廓的差异会体现出不同的气质，如下图的左边和右边的区别，一个气质较为直接硬朗，另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整，如下图中间的图标在轮廓的处理上则显得比较碎，整体外轮廓造型的连贯度有所欠缺。

镂空对比

适当的镂空除了补充了图形的识别度之外，还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例，过小或过大都可能影响图标的平衡感。如下图的中间和右边，镂空过小对图标的辨识度并没有多大作用，没有镂空则少了一些透气感。

形体对比

形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例，单独形体与组合之后的形体相比视觉感知更直观些，而组合形的图标相对会精致一些，多了一些层次。在日常设计中的经验是：越小的图标形体应该越简单，因此建议单体出现较好；若图标的尺寸足够大时可采用组合型的设计，补充图标的细节。

繁简对比

设计面性图标时，对于多余细节的管理也很重要。随着细节的增加，块面切割过多，会使得整体图标变得过于零碎（如下右图）。保持简约的设计提高图标的识别度，在关键的特征细节上做补充（如下中间图的相机闪光灯）。

2. 面性图标类型拓展

面性图标在设计时也可以结合各种不同的表达方式，来提升图标的质感和创意，而非只是简单的填充颜色。

单色面+点缀色

整体的外形使用统一的颜色，结合图标的属性感知使用不同的颜色进行点缀，通过点缀色提亮了图标的视觉效果，达到既统一又具有差异化。

多彩双色

通过对比色、邻近色的搭配来营造整体的图标氛围，提升了图标的层次和丰富度，双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见，简单且容易出效果。

微质感渐变

微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果，因此可以根据不同设计的需要进行调整。如下图案例：

实际案例：全民K歌

透明度/灰度变化

透明度/灰度的变化，让原来单色的图标变得更加具有层次感和空间感，设计细节更加丰富，降低了单色面性图标的厚重感。

实际案例：企鹅FM我的页面

透明度变化+渐变

渐变的设计提升了面性图标的质感，从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化，使得图标具有了层次感。

透明叠加的图标+渐变的背景

此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。

实际案例：全民K歌点歌页面

颜色叠加穿透

图标透明叠加之后产生了交错的负形，叠加出第三个面。虽然整体设计依然保持着扁平化，但却多了一份层次感，并且增加了图标的细节。

实际案例：百度网盘

渐变层次叠加

整体的效果与透明度变化的图标较为接近，通过渐变的深浅变化，使得形状的衔接处出现了明暗对比，因此图标也具有了厚度感和层次感。

实际案例：NAVER、掌上生活

高斯模糊

此类图标基本没有在 APP 中看到，与「透明度变化」或「颜色叠加」相比都更具层次感和空间感，同时图标也具有较强的设计感。

线面结合

结合了线性和面性的优点，既保持了面性的重量感，同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控，不同比例可以呈现出不同的视觉感知。

1. 线面结合图标的基础分析及想法

线面比例

线面比例的差异，图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例，从下图中可以看出，当填充与外形窄边比为 1 : 3 时（左图）图标呈现往内收的感觉；填充与外形窄边比为 1 : 2 时（中间）图标整体较为平衡；当填充与外形窄边比为 2 : 3（大于1:2）时（右图）整体具有外扩趋势。

组合形式

线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标，不同的组合形式会体现出不同的设计风格，因此在设计时尽量多发散思考，寻找出适合你的组合方式。

繁简对比

线面结合本身就由两种形式组合，因此在设计的时候更需要对整体造型进行把控，单体（线和面）造型必须保持较高的简洁程度，这样最终组合形成的图标才不会过于复杂（左图），若本身形态过于复杂，则会降低图标的辨识度和视觉美观度。

2. 线面结合图标类型拓展

线面结合的图标集合了线性和面性的优点，在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合，因此可以结合出更多设计的可能性。

黑白线+面性品牌色

与「线性+品牌色」的做法较为接近，统一的线性颜色叠加品牌色的透出。

实际案例：好好住、soul

线面双色

基于线面的基础上，在线和面的颜色上做差异。具体做法与线性或面性的双色接近。

线面结合-阴阳

线和面的结合按 50% 的比例进行设计，依据上下、左右、居中等基础方式的结构化设计，整体图标的视觉效果较为跳跃，非常规。

线面双色+错位

在双色图标的基础上，线和面按照统一的 「百分比」 进行缩放，并进行透视和位移的设计，整体呈现出来的是一种交错叠加的视觉效果，相比普通的线面双色更加丰富。

实际案例：闲鱼底部tab、脸球底部tab

线面错位+渐变

基于上一种风格，对面或者线的颜色进行渐变设计，丰富了图标的质感和颜色更加细腻。

线面透明度变化

与「线面透明度变化」的设计方式大致一样。如下图案例，「弱线强面」的第一识别度较弱，而「弱面强线」 的外形识别度较高，也更符合图标的表达。

实际案例：新浪微博、腾讯新闻

基于三种基础的类型表达，可以拓展出多种多样的设计形式。除了以上的案例之外，还收集了一些其他的设计。

线面结合 – 插画

整体比较偏向插图的感觉，细节和元素较多，常见于一些 APP 的空白页设计。

线面结合 – 卡通插画

整体感觉比较可爱、卡通、二次元，常见于一些二次元或漫画类的 APP。

面性 – 渐变强质感

整体风格的光影质感会比较强烈，常在一些活动运营或小游戏的界面出现。

面性 – 扁平写实

整体感觉比较扁平，细节的丰富度与现实感知接近。

线面+渐变插画

整体风格比较偏向绚丽多彩的颜色风格，质感和细节较为丰富。

写实风格

3D质感图标

由于 C4D 的制作成本相对较高，目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势，在时间和能力允许的情况下需要多做这方面的尝试。

等距的线面结合

等距的设计，让原本线面的图标丰富了层次，并具有立体透视的感觉。

除了以上这些之外，我们在实际场景中也会发现一些较为特别的图标设计。

Facebook 更多页面的列表图标

整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计，因此整个页面在图标的设计上做了很大胆的尝试，与常规的单色图标相比更具有吸引力。为了区别不同的业务，系统性质的功能图标做了色调的区分。

APP Store 游戏和新APP界面下的类别列表图标

整体为具象化扁平风格的设计表达，图标的颜色还原了最基本的现实感知。

iOS 系统办公类软件的起始页面图标

整体风格比较偏商务简约，具象的图形表达+轻微的渐变质感。

QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达，色调方面基于业务属性结合品牌色进行了区分，整体既统一又具有差异化。

大众点评顶部入口的图标

整体风格偏向写实+强渐变+炫光感，每个图标都具有丰富的细节表达。

旅法师营地

游戏、二次元类的 APP，因此在图标的设计上也偏向细节较为丰富的插画风格。

哔哩哔哩动漫

图标风格偏向卡通插画，选中态与默认态的设计较为巧妙。

总结

本文的重点在于透过这些设计类型或者技法的了解，帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础，却有很深的学问，精致的图标更是可以起到点睛的作用，提升界面的质感和氛围。

图标的种类远远不止本文所提到的这些内容，但是万变不离其宗，都是「线性、面性、线面结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。

我们除了需要掌握这些内容之外，还需要提升图标设计的造型能力，更需要日积月累的练习和思考，从量到质的变化。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。

本文是基于我对《破茧成蝶2》读后的观点和反思，自己的项目经历跟作者相似，也是为了更好的总结这两年对产品、对设计的心得。

本文篇幅较长，请耐心阅读。主要是总结一个完善的体系，便于大家理清自己的设计思路和自我定位。

阅读本文你可以获得什么？

一、前言——拥抱变化，破熵而行

二、产品设计师的思维转变

三、对设计师的能力模型

四、设计师该关注的数据

五、产品周期影响设计策略

六、设计师顺势而为，自我定位 

一、前言——拥抱变化，破熵而行

在人口红利、流量红利、资本红利逐渐消退的互联网下半场，从“买流量、买用户”为代表的粗放式发展进入了稳扎稳打的精细化时代，需要考虑在有限的资源及能力的基础上精打细算、量入为出，让产品可持续地发展下去。

互联网产品正在从标准化、大众化转向个性化。针对垂直领域或细分用户群体的产品越来越有市场。战略层也需要抽丝剥茧，抛去形式注重产品的本质。比如一些下沉型电商业务，红包和会员都只是一种形式，其实本质还是用户追求“性价比”有利可图，所以一旦用户的“便宜需求”难以达到，还是会引发数据的下降，这就需要大量可持续资本投入维持。见利期的变长，传统电商行业的锋芒也被新零售掩盖，投资人也不断转移更创新可收的项目。所以真正的留存是可持续发展的，且需要根据企业自己的实际情况，在战略上和运营上，有一个人无我有的本质上的创新点（核心竞争力），而非形式上的创新。

在日新月异，变化百态的互联网下半场，创业者和产品设计工作者都需要改变自己的想法，拥抱变化破熵而行，保持自己战斗力，用更科学客观的方法来提升产品价值。

二、产品设计师的思维转变

产品设计师的重要标志是“以产品为中心”的思维及觉悟，即能打破本位主义，站在产品的角度，从整个项目闭环上协同解决问题，提升产品价值。设计师的角度理解，就是打开自身格局，扩展上下游的知识，通过自己的综合能力助力于业务。在此过程中职能会有跨界，比如我会提出验证数据的方法，比如ABtest，从业务角度推设计可以通过哪些数据进行提升，然后做出不同方案进行评审，推动项目实施落地。

产品设计者可以由产品经理，UX，UI担当或转变，我更倾向是全栈的UX，通过思想认知的转变，职能界线的打破来扮演这个角色。自己也是这样努力的在转型。得益于公司的开放包容，这两年我还是能承担起这样的角色，建立组织，带领团队，通过设计来提升产品价值。对于产品设计师，第一个需要改变的就是产品设计思维。

2.1从“问题驱动”到“价值驱动”

2.2 始终贯彻精益思维

互联网寒冬，连阿里都要把钱花在刀刃上。阿里8月15日发布的财报上，虽然新零售收入水平同步增速高达134%，高于上一季度132%，成阿里本季营收增长引擎，但是阿里本财季对盒马新零售业务投入仍然十分谨慎。最近两个季度盒马开始由原先的大门店业态转向更多元、成本更低的小业态的转型期，本财季内净增门店仅为15家。所以需要我们始终贯穿精益思维去做产品。

精益思想（Lean Thinking）源于20世纪80年代日本丰田发明的精益生产（Lean Production）方式，精益生产方式造成日本汽车的质量与成本优势，曾经压得美国汽车抬不起头。世界汽车工业重心已向日本倾斜。精益思想的核心就是（消除浪费）以越来越少的投入——较少的人力、较少的设备、较短的时间和较小的场地创造出尽可能多的价值；同时也越来越接近用户，提供他们确实要的东西。

那么要做到产品上的精益思维，一方面要贯彻“以提升产品价值为目标”并用数据验证；另一方面建议先用较小成本在小渠道验证，然后在扩大投入。

整个产品团队，不管是产品负责人、产品经理、设计、运营、开发都需要紧密联合在一起，为提升产品价值而努力。为什么这么说，其实本质上大家都是为了业务好，但是每个人却扛着不一样的KPI，产品经理有业务指标，运营有运营指标，设计师也有自己的设计价值观。如果大家都只为了自己，产品和运营会唯业务指标做导向，典型的就是引入大量无法留存的流量，耗费资源，最终对整个产品长期发展并没有太多价值。对设计师来说，我见过很多设计都很有偏向性，要么就是一味追求好看，感觉业务挡了自己发挥才能，要么一味分析竞品和交互，却给不出有效、有价值的解决方案。其实都不是站在产品价值上看问题，更希望是自己能交出一份满意的答卷。我自己也在一个电商摸索期犯过类似错误，无法忍受一个没有细节的产品，过多追求设计质量，而其实产品初期，负责人只想着能快速迭代，找到活下去的出路。

2.3以始为终打造数据闭环 

数据闭环就是从你的产品价值目标来拆分你的量化目标，通过设计上线等验证数据，形成闭环，然后循环优化的这个过程。需要从传统的“问题驱动”转变成“价值驱动”，因为解决问题是难以被价值量化的，整个业务发展过程中也会出现很多产品问题需要被优化，我们把“提升产品价值”作为目标就形成了“以终为始”的数据闭环。其实现在大部分企业都是以目标驱动业务的，拆分目标，变成颗粒度目标数据再进行逐步达成，这个过程不是说不去“发现问题-解决问题”，而是需要知道工作要务，“重要紧急”的先做，“重要不紧急”的长期计划实行，至于用户体验上的东西也是要有节奏的去优化。

三、对设计师的能力模型

对设计师的能力模型一直在提出不同的更高要求，无论是哪个大咖提出来的理论似乎都是非常的正确和所需要的，导致很多设计师的恐慌，我是不是要被淘汰了。

其实还是要抓住本质，因人而异看待。设计的能力分布模型，大概分为 “I”型 、“一”型、“T”型。

“I”型为单一型，传统对设计师的定义就是单一的，领域分的比较细。单一型主要看深度，深度达到一定程度可以成为专家，但是如果浅薄又单一很容易被淘汰。

“一”型为广博型，广博型最忌讳的就是成为什么都会却什么都不精的“万金油”，看似什么都懂，结果做起来什么都废。

新型模式“T”型，“T”型既有较深的专业知识，又有广博的知识面，这类是集深与博于一身的人才，也是市面上最有市场的一类。

综合性人才都是需要一个长期由深度到广度，再由广度到深度循环提升的过程，在此过程中也很容易迷失，跟“I”型对比，无法通过有限的时间都提升上去，那么需要掌握一定的方法，认识自我逐步提高。

3.1、强大扎实的专业能力——知行合一 广而不范

为什么强调专业能力，《破2》里面提到，思维是1，技能是0，话是没有错，但是80%以上的设计师还是靠技能在吃饭。有的东西你想得再好无法落地，也是无济于事。所以一个专业合格的设计师必须有强大扎实的专业能力，当然思维是内驱力，如果你的专业很出色，估计内核也不会差。

首先要有一个专业优势判断，然后强化自己的优势，再根据横向模型去扩展对自己工作最优帮助的继续加强，做到广而不范。比如你是一个ui设计师，你要保证自己的视觉能力，然后去扩展交互能力，其次再去强化动效，体验等等。再比如你是一个交互设计要保证自己对交互的精通，然后提高用研、数分能力，再去扩展其他能力。还有要做到知行合一，其实大部分我们都在通过不同的学习提升自己的能力，但是要把理论性，缥缈性的知识概念落实到自己的工作中去，努力去实践，再复盘总结不断提升自己的实操能力。比如你学了插画，你的项目上能不能用上；你竞品分析了更好的体验，能不要也变相用到自己的项目里；你新学了一些分析原理，能不能用同样的思维来分析自己的项目等等。

3.2、保障基础软实力 —— 一颗强大正能量的心

心力、脑力、体力，都要保障，尤其是互联网年轻化后，体力也非常重要，京东就直接把不能加班的员工全开了，多么痛的领悟。那么对于产品设计师其实更关键的是心力和脑力，越是高阶设计师，思维能力、洞察能力越是重要。无论是ui、ue、还是产品设计师我觉得都需要有强大的自我驱动能力，打破本位主义，不断扩展自己的专业素质，才能更好的融合于业务。阿里提出：人才是聪明的，的确很多人忽略了先天的差距，事实上同样的努力，不一样的天分，总还是有区别的，有的人适合做小兵，有的人适合做将军，但是你可以保证的是心态，心态里我总结了两个我觉得非常重要的点，一个就是皮实、一个就是积极，就是有一颗强大而正能量的心！

3.3、先让自己变得足够优秀再考虑做管理

对于走技能线还是走管理岗，很多人会想的很多。其实先让自己变得足够优秀，不断提升，一切自然水到渠成。领导者或许需要天分，管理者是每个人都可以成为的，且有一些理论和工具可以支撑的，所以很多团队会内部提拔，因为培养起来并不难。只要你足够优秀，还是很有希望做管理，相反过早做管理，自己的基石没打好，管理起来也会比较艰难。有兴趣的人可以去听一下喜马拉雅上的《可复制的领导力》。如果你励志要走向管理层，也可以根据阿里的纵向能力模型对号入座，不断提升，不过很多时候机遇也很重要。

四、设计师该关心的常规数据

想要驱动产品增长必须要对数据有所了解，来帮助我们产出更贴近用户行为的设计，同时需要了解数据产生的过程和基础工具。最基础的就是产品提出数据，让开发进行埋点，此过程中设计也可以提出自己想要关心的数据点。公司有后台可以直接观测数据，现在也像GrowingIO数据分析产品无需在网站或app中埋点，即可获取并分析全面、实时的用户行为数据，需要观察数据可以直接去后台关注，也可以让产品经理或者数据分析师给你拉数据。

页面浏览量（PV）

用户每1次对网站中的每个网页访问（成功访问/进入）均被记录1次。用户对同一页面的多次访问，访问量累计。在一定统计周期内用户每次刷新网页1次也被计算1次。理论上PV与来访者数量成正比，但是它不能精准决定页面的真实访问数，比如同一个IP地址通过不断的刷新页面，也可以制造出非常高的PV。

独立访客人数（UV）

访问网站的一台电脑客户端为一个访客。00:00~24:00内相同的客户端只被计算一次。使用独立用户作为统计量，可以更加精准的了解一个时间段内，实际上有多少个访问者来到了相应的页面。

用户访问次数（VV）

当用户完成浏览并退出所有页面就算完成了一次访问，再次打开浏览时，VV数+1。VV同时也是视频播放次数（Video View）的简称。

跳出率（BR）

表示用户来到网站后，没有进行操作就直接离开的比例，代表着陆页面（访客进入网站的第一个页面）是否对用户有吸引力，常用的计算方式是落地页面的访问量除以总访量。

退出率（GA )

针对网站内某一个特定的页面而言，退出率是衡量从这个页面退出网站的比例，通过一个页面的退出次数除以访问次数。退出率反映了网站对用户的吸引力，如果退出百分比很高，说明用户仅浏览了少量的页面便离开了，因此需要改善网站的内容来吸引用户，解决用户的内容诉求。

平均访问时长（AAT )

指在特定统计时间段内，浏览网站的一个页面或整个网站时，用户所停留的总时间除以该页面或整个网站的访问次数的比例。该数据是分析用户粘性的重要指标之一，也可以侧面反映出网站的用户体验。平均访问时长越短，说明网站对用户的吸引力越差。

转化率（CR )

在一个统计周期内，完成转化行为的次数占推广信息总点击次数的比率。常用的是登录注册的新流量转化率和产生实际支付的转化率。转化率是产品盈利的重要指标之一，它直接反映了产品的盈利能力。提升转化是提升产品价值的重要性指标，一般用A/Btest去检验更优方案来提升转化率。

回购率（RR）

指用户对商品或者服务的重复购买次数（回头客），是针对有购买功能的产品，回购率越高，用户粘性越高。

新增用户

既安装应用后，首次成功启动产品的用户，按照统计跨度不同分为日新增（DNU）、周新增（WNU）、月新增（MNU）。新增用户量指标主要是衡量营销推广渠道效果的最基础指标。新增用户占活跃用户的比例也可以用来用于衡量产品健康程度。如果某产品新用户占比过高，那说明该产品的活跃是靠推广得来，这种情况非常有必要关注，尤其是新增用户的留存率情况，这种情况留存率低对产品来说也非常危险，视为不可持续发展的流量。

活跃用户

既在特定的统计周期内，成功启动过产品的用户。除此之外，我们还可以将活跃用户定义为某统计周期内操作过产品核心功能的用户（按照设备去重统计）。

活跃用户是衡量产品用户规模的重要指标，和新增用户相辅相成。

DAU（日活）：某个自然日内成功启动过应用的用户，该日内同一个设备多次启动只记一个活跃用户；

WAU（周活）：某个自然周内成功启动过应用的用户，该周内同一个设备多次启动只记一个活跃用户。这个指标是为了查看用户的类型结构，如轻度用户、中度用户、重度用户等；

MAU（月活）：某个自然月内成功启动过应用的用户，该月内同一个设备多次启动只记一个活跃用户。这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。

留存率

留存率是验证用户粘性的关键指标，既在某一统计时段内的新增用户数中再经过一段时间后仍启动该应用的用户比例（留存率=留存用户/新增用户*100%）。统计留存用户的颗粒度有：
自然日：包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
自然周：包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
自然月：包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
自然日的留存中主要关注（次日留存、7日留存、30日留存并观察留存率的衰减程度。一般来说，留存率低于20%会是一个比较危险的信号。）

日留存率：快速判断App粘性
日留存率：可以很快的帮助我们判断 App 的粘性到底强不强。我们可以通过日留存率的数值来判断一个 App 的质量，通常这个数字如果达到了 40% 就表示产品非常优秀了。我们可以结合产品的新手引导设计和新用户转化路径来分析用户的流失原因，通过不断的修改和调整来降低用户流失，提升次日留存率。

周留存率：判断App用户忠诚度
周留存率：我们可以通过周留存率来判断一个用户的忠诚度，在一周的时间段里，用户通常会经历一个完整的使用和体验周期，如果在这个阶段用户能够留下来，就有可能成为忠诚度较高的用户。

月留存率：了解App版本迭代效果
月留存率：通常移动 App 的迭代周期为 2 - 4 周一个版本，所以月留存率是能够反映出一个版本的用户留存情况，一个版本的更新，总是会或多或少的影响用户的体验，所以通过比较月留存率能够判断出每个版本更新是否对用户有影响。

流失率

指那些曾经使用过产品或服务，由于各种原因不再使用产品或服务的用户。用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。流失率和留存率有紧密关联，流失率高既留存率低，但活跃度不一定高，因此需要综合分析。也是重点关注次日、7日、30日的流失率。对于流失用户的界定依照产品服务的不同而标准不同。社交类产品用户几乎每天登录查看，可能用户未登录超过1个月，我们就可以认为已经流失了。而电商类产品用户可能3个月未登录或者半年内没有任何购买行为可以被认定是流失了，所以不是每个产品都有固定的流失期限，而是根据产品属性而判断。

一次性用户

既新增日后再也没有启动过应用的用户。一次性用户是关键的营销指标，和判断无效用户的标准，从中把目标用户过滤出来。一般划定的界限是至少超过7天时间才能够定义是否是一次性用户。

使用时长

既统计时间段内，某个设备从启动应用到结束使用的总计时长。一般按照人均使用时长、次均使用时长、单次使用时长进行分析，衡量用户产品着陆的粘性，也是衡量活跃度，产品质量的参考依据。

启动次数

既统计时间段内，用户打开应用的次数。重点关注人均启动次数，结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过30s，再返回或打开应用时，则统计为两次启动，启动次数主要看待频数分布情况。

使用间隔

既用户上次使用应用的时间与再次使用时间的时间差。使用频数分布，观察应用对于用户的粘性，以及运营内容的深度。虽然是使用间隔，但是通过计算同一设备，先后两次启动的时间差，来完成使用间隔统计，充分考虑应用周期性和碎片化使用的特征。

常规数据基本就这些，值得思考的是不同类型的产品，定义每个数据的具体量是不同的，而且产品周期中的不同阶段关注的主要数据指标也会有不同侧重点。

五、产品周期影响设计策略 

产品阶段就是产品生命周期，可分为探索期、成长期、成熟期、衰退期，每个阶段的设计策略和工作权重都有所不同。虽然每个阶段侧重点不同，凡是还是需要辩证看待结合实践，比如大厂的产品初期起点较高，有大流量的引流和背后大数据支撑，所以各种方式都没有太大的限制，根据业务，资源不同来根据产品用方法。

5.1探索期（产品初创期）

目标：掌控产品方向（活下去）

关注：用户价值

用户：假设用户

策略：最小成本验证产品方向

方法：假设的用户画像、产品故事地图、设计冲刺法、访谈、用户研究（定性分析）

关注数据指标：推荐意愿/新增用户数/满意度

品牌：不急于建立

5.1.1、通过访谈、调研，初步建立用户画像，抽象假象用户，提炼关键点。

用户画像是在大数据时代背景下，用户信息充斥在网络中，将用户的每个具体信息抽象成标签，利用这些标签将用户形象具体化，从而为用户提供有针对性的服务。

产品摸索期我所定义的目标用户其实并不准确，而是假象用户，此阶段的概念用户一直随着产品方向的改变而改变，所以无法确立明确针对性的用户画像信息，但是我们应该先确定一个大概的目标用户定性的去分析，区分用户角色，挖掘不同角色的痛点，然后找到解决问题的切入点。

5.1.2、利用用户诊断法建立产品假设，并进行价值评估，明确产品方向。

5.1.3、利用用户故事地图筛选核心任务及对应功能

用户故事地图可以用小会议的形式展开，就是让所有参与者一起用便签，一张一个动作，从左至右按照时间线，描绘用户在产品使用场景下所发生的所有用户行为。同一时间发生的，就写在同一位置的下方；出现同一场景不同可能的动作时，可能会形成不同的分支动作；直到重回主线或者结束支线。最后关键还是总结用户痛点和产品核心的功能点。

5.1.4、贯穿最小成本原则，最小成本试错——MVP和设计冲刺法

最小可行产品（MVP）是指可以产生预期成果的最小产品发布，对于迭代产品来说，又可以讲最小可行方案：最小可行方案是指可以产生预期成果的最小发布方案。

设计冲刺法的本质理念跟MVP还是一致的，只不过所用成本更小。设计冲刺法特点：参与人员较少且有最终决策权；闭关冲刺使用白板随时记录；适用于风险高、时间紧、起步难的情况。

MVP是最小可行方案进行发布验证，而设计冲刺是更短时间产生一个头脑风暴的真实原型，进行真人测试，这个过程并没有真正设计一款产品，而是通过设计方式做了一次早起用户调研，并获得相对有验证性的结果，避免真实上线效果不好对用户造成的负面影响。

其实市面上大部分还是用的MVP，因为实际上用设计冲刺，一个是对设计人员的要求较高，二是验证的结果由于测试范围的限制不一定与市场反应一致。与做一个小产品来说，现在更流行保险的办法可以做一个小程序，或者几个小程序进行方案对比，大流量下好乘凉，小程序的开发成本，用户引入成本更低。

5.1.5、定性为主，不断试错中掌控产品方向

船小才好调头，对于产品来说如果本身战略层出现问题，后续投入越多的资本越难收场，用户量不上不下，用户粘性不高，结果资金不够了，用之鸡肋弃之可惜，再转方向还是比较困难。尤其是用户对产品建立一定认知后，重新调整大方向，基本等于刷新用户流。

5.2成长期（产品高速增长期）

目标：巩固差异化的产品定位（活得好）

关注：产品核心竞争力

用户：目标用户

策略：大胆创新巩固差异化的产品定位

方法：提炼用户画像不断校验、用户体验地图、设计接力法（定性+定量）

关注数据指标：新增用户数/留存率/复购率/活跃度

品牌：建立有创意且能落地的品牌，加深用户认知，占领用户心智

5.2.1、用户校验，确立产品定位

产品成长期用户大量涌尽，掌握一定数据和掌控产品方向后可以通过数据分析或用户调研，来看实际用户特征和之前假设的用户人群特征是否符合。集中精力服务好最重要的用户群体，定性挖掘、定量验证的思路去完成用户画像。

可针对目标用户进行调研和深度访谈，从用户选择产品最关键因素提炼产品目前的核心吸引点。用户的关心点也要跟产品本身的当前定位做对比，看用户接受到的点是否是产品让他们感受到的点，感受不到又是什么原因，不断提炼核心竞争点的优势。

成长期需要确认产品的定位，就是差异化的产品方向，即差异化的目标用户群体（价值排序）、差异化的产品及服务（竞争优势）、差异化的产品价值（核心优势）。

价值排序：通过了解用户特征，明确用户分类及相关利益群体，然后明确把谁放在第一位。在实际产品设计过程中，我们也可以用价值排序，来设计产品功能和交互体验，比如平台收费是针对买方还是卖方。

竞争策略：避实就虚地找到竞争对手的盲区或自己的优势所在，为用户提供差异化服务。竞争策略主要依赖高层的洞见和判断，如果你出产品和竞争对手没有本质差异，那就考虑是否可以服务与不同种类的人群或者能提供不一样的价值。比如同样是做电商，你的质量、价格、物流、种类是不是有优势。

5.2.2、确立增长指标

增长指标是对应于产品差异化定位的可量化指标。增长指标要符合：可成长性，客观性，有方向性。避免主观，虚荣的指标，最常见的就是过分关注获客拉新指标，留存不足，及前后导向不一致的情况。至于用户满意度、任务完成度等主观的体验指标可以作为参考，但是不能作为最终的增长指标。核心关注点是转化、留存、复购、活跃度等指标，既侧面体现了良好的用户体验，增加了用户与产品粘性，让产品长期可持续发展。

5.2.3、利用用户体验地图（E-Experience Map），同理心地图，结合增长指标大胆提出假设，排优先级，并根据开发成本等因素通过四象限原则，选择最小成本提升指标   

用户故事地图、用户体验地图、同理心地图的区别：用户故事地图强调用户使用产品/服务的任务流程，用它来筛选当前最重要的任务及对应功能，以完成最小可行产品设计；用户体验地图不仅包括任务流程，还包括与之对应的体验问题，更关注用户的体验情绪，从而找到提升体验的机会点；同理心地图帮助我们在每个不同场景下与用户换位思考、打开思路，挖掘用户选择决定的深层动机。在实际使用场合没有严格界线，可根据实际情况使用核心点进行分析。

5.2.4、体验升级——逐步发布验证（设计接力）

大版本迭代的优点就是一旦成功，可以大幅度拉开和竞争对手的差距，但是一旦失败，会影响业务的发展得不偿失。所以为了预防风险，大多数公司会在上线前先进行可用性测试，进行必要的线上验证再发布。通过不断分析增长指标，找选设计方向，进行模块拆分，接力发布，循环验证，提升产品价值。

先验证后发布方法：

a、A/BTest

制作两个（A/B）或多个（A/B/n）版本，在同一时间维度，分别让组成成分相同（相似）的访客群组（目标人群）随机的访问这些版本，收集各群组的用户体验数据和业务数据，最后分析、评估出最好版本，正式采用（消除UX、bug带来的影响数据），并不断迭代进入一下个A/BTest。产品成长期，中小型企业可以用局部变量测试，大型成熟产品可以重叠实验（更多、更好、更快）。

要求：1、随机抽样；2、足够的样本量。

优点：可以在同时段观测效果，受到环境影响因素一致，容易客观验证方案

缺点：需要占用开发资源，完整的一次测验需要花费时间较多

b、灰度测试

先进行一个小范围的尝试工作，然后再慢慢放量，直到这个全新的功能覆盖到所有的系统用户。比如Facebook先发布1%，慢慢推广到全部，现在普遍大厂也会用到这个方法，减少大版本试错带来的损失。灰度测试的同时可以A/Btest，在灰度测试过程中选出最佳方案，然后全部发布。

合适:用户群体较大，否则会因为流量小而导致结果不准确。

c、分时段测试

可以通过不同时段测试，对比数据。为减少对用户过多干扰和负面影响，可以先用夜间或用户量较小时段切换到新版本。

缺点：得到的是环比数据，不像ABtest对比结果明显有参考意义。而且在没有确定方向的摸索阶段，用分段测试，数据指向不明确，通常会存在数据一直不好的情况，频繁换方案， 自乱阵脚。

d、分渠道测试

渠道推广对业务支出也是占比较大，优秀的商业设计也能让渠道转化提高，从而减小获客单价。所以渠道上的设计都会做n版，优化总结，提升最终的数据。

e、新旧版本切换

新版本上线后留出”返回旧版“的入口，这样一旦用户不喜欢新版可以切换到老版本。这样可以很大程度降低风险，还可以监测不同版本数据，还给用户一个缓冲时间让用户逐渐接受新版本。

缺点：如果新版本运行效果不佳，决策者会进退两难，一般在较有把握，或者想教育用户新的体验会局部用这个方法。

5.2.5、寻求差异，扩大竞争优势

A、疯狂联想法

a、横向联想

结合产品定位，先得出核心关键词，再在核心关键词的基础上继续发散。比如一个男士护肤品电商网站，核心关键词是：垂直、B2C、男用户多、护肤品等，可以根据这些关键词找到合适的参考。值得注意的是关键词的选择也可以根据你需要的提升的核心价值点去联想。

b、纵向联想

纵向联想是从一个关键词出发，纵向不断延展出新的关键词，并找到对应竞品。比如保健品有一个重要的特征就是注重功效，我们可以想到具有同种特征的护肤品。

关于联想，在头脑风暴中并没有特备严格的步骤方法规定，可以根据自己的认知由近至远拓展。思维跟横向纵向也是类似，可以先参考最典型接近的，再利用共同关键特征来扩散，也可以利用不同组合的关键词重新找到相应的竞品。最后根据四象限原则，把相关度高，体验好的，更有参考价值的竞品拿来精细分析。

B、竞品对比分析法

通过联想发我们也能联想出不同维度的竞品，这师我们需要考虑竞品哪些部分类似可以参考的，哪些部分不同需要注意的，但同时也可以考虑借鉴不同部分的优势转化成自己的优势。比如最早弹幕只出现在视频上，抓住弹幕可以活跃气氛，满足观众发表评论和观看时时评论达到的心里共鸣，增加用户之间的互动性，从而提高用户粘性的核心点后，弹幕也出现在直播、音频、新闻，甚至是炒股软件上。

5.2.6、做有创意且能落地的品牌设计

品牌的核心点就是让人“记住”，最好能找到目标用户心智中空缺的领域，在这个垂直领域占领优势位置，所以品牌强调差异化。比如一想到打车就想到滴滴，一想到购物就想到万能的淘宝，一遇到问题就上百度。

传统的方法：了解业务——发散关键词——情绪版——视觉方案

精益方法：内外调研——语言钉——个性关键词——视觉锤（快速落地）

成长期的品牌建设更需要突出创新性，让人眼前一亮，记忆犹新。这里展示展示了御膳房网站的品牌三元法示例，御膳房的风格的确做到了主题感强烈，让人眼前一亮，不过个人认为作为科技网站，还是略显了花哨，安全感不足。品牌三元法是也是通过对产品的了解，分别从理性业务层和感性业务层出发，延伸个性创造层，记录关键词展开设计，其本质还是围绕业务拓展价值。成熟的品牌设计者，不仅要从业务出发，更要考虑不同场景的品牌应用，打造统一有个性的全方位品牌。

5.3成熟期（产品稳定期）

目标：提升产品价值（赚的多）

关注：商业变现

用户：活跃用户

策略：科学严谨提升商业价值

方法：用户体验地图、设计跨栏法（定量为主）

关注数据指标：活跃度/流失率/营收/成本率/现金流

品牌：扩大品牌影响力和品牌价值

5.3.1、用户分层，寻找核心价值用户

a、核心价值用户是留存用户中最活跃的部分

b、找到核心价值的用户特征

通过RFM模型来筛选核心价值用户

R=Recency最近一次消费

F=Frequency消费频率

M=Monetary消费金额

（RFM，1代表高，0代表低）

（111）重要价值客户：最近消费时间较近、消费频次和消费金额都高，典型的核心价值用户，高留存、高活跃度

（011）重要保持客户：最近消费时间较远，但是消费频次和金额都很高，说明这是一段时间没来的忠实客户，需要与他保持联系，召回

（101）重要发展客户：最近消费时间近、消费金额高，但是频次不高，忠诚度不高，很有潜力的用户，必须重点发展

（001）重要挽留客户：最近消费时间较远、消费频次不高，但消费金额高的，可能是将要流失或者已经流失的用户，应当采用措施挽留

一般公司都会有利用RFM来观测核心用户，针对不同类型来做不同的措施，但是所有数据的利用率都跟产品客观成长度有挂钩，成长期可能还不是那么细分，成熟期就会更精细的分析。最简单粗暴的就是看看最近一次消费，超过多少天就短信消息召回给个优惠券之类的。

c、总结核心规律，改进产品，调整运营策略

找到核心价值的用户特征后，需要探测他们的行为模式与贡献的规律，从而激励更多用户贡献更多价值。比如喜马拉雅，找到订阅节目的用户明显留存度更高，用户活跃度也高于随便听听的用户的规律后，在产品设计时会把订阅放在显眼的位置，并且在首页把用户感兴趣的模块放在优先的位置来提升订阅度。

5.3.2、商业价值提升

a、以科学创新为代表的产品核心竞争力：数据和技术驱动一切，科技提升效率。

b、用户价值：用户价值是商业变现的基础，没有人会在没有用户转化的平台上投入资金。

c、商业变现：用户付费，广告收入，与用户体验合理价值平衡。

在商业变现阶段，除了要着眼于如何更的赚到钱，也需要平衡用户体验，且不断提高产品本身的价值。百度在成为巨头后，百度贴吧过多不相关的推送导致用户粘性急剧下降，魏则西事件等负面消息，再到陆奇离职，目前市值缩水至365.38亿，被拼多多赶超。而微信和抖音这方面做的较为出色。微信是迫不得已不愿打扰用户，所以广告频率一直不高，广告质量也有所保障，会根据用户的喜好推荐广告。抖音是沉浸式的广告体验，一不留神就进入了广告的坑，而且广告的形式与抖音原生用户的不谋而合，有些有创意的网红视频用户的接受度也很高，从而会极大的提高转化，对用户体验的影响也较少。

5.3.3、增值假设——围绕目标增长（量化设计师的价值）

设计策略：稳定、规范、统一、科学严谨

a、拆分变量科学测试

到了成熟期，设计师在修改设计方案的时候不是改的越多越好，有的时候一个模块的重构，一个按钮的颜色变化都能影响数据转化，所以需要通过科学的方式，调整到合适的颗粒度去测试。  

b、把AB测试作为一项基本制度

如果想要验证设计效果，那么可以在保持功能不变的情况下，只看设计方案的区别，这样就可以有效的量化设计。

2018 年，中国移动互联网用户增长放缓，上半年仅增长 2 千万。但是头条系却异军突起，超过百度系、阿里系稳居总使用时长第 2 名。头条系的崛起有许多的原因，强大的数据监控系统，成熟的增长引擎，上百组同时进行的AB测试等等都在帮助产品经理和运营们找到最优的方案。

c、用户增长地图

用户增长地图是借用AARRR概念作为骨架的展开的，通过AARRR模型针对没一步提出增值假设，以提升总体价值指标。

5.3.4、提高整体效率：通过DPL（Design Pattern Library）组件库批量优化；科技力量-人工智能

a、根据长期积累下来的AB测试结果，沉淀规范后，把这些规范内容快速复制到若干条产品线上。从产品周期来说，摸索期需要建立一定的视觉规范，但不合适做细致化的组件，等业务慢慢稳定下来，不会有大方向的改变后，需要慢慢建立细致的组件库，以方便团队合作。每个业务也有其特殊性，to B的业务一般建立组件库会比较早，模式化的东西较多，针对不同的B端也会有定制化的内容，DPL可以大大提高整个业务的效率。

b、通过智能科技的力量来提升整体的效率。比如阿里的千人千面，通过消费者偏好进行个性化投放，鲁班系统对banner进行简单的合成，大大提高大促期间海报生成的效率。

5.3.5、打造统一的全业务线品牌设计

a、形成统一且独特的品牌印记

成熟期面对繁多支线，先对内树立统一的品牌形象；主品牌与产品调性统一；线上线下风格的统一。

b、品牌印记提取与深化

品牌趋势都是化繁为简，比如苹果、奔驰的logo就越来越简单，利于大众记忆，也利于线下拓展。

提取出logo基因去强调品牌作为拓展延伸，比如天猫和考拉的吉祥物头部图形的简化应用，都比较简约，易记，易拓展

C、成熟期的品牌也不是一成不变的

成熟期，产品在市场中已经有了稳固位置，品牌不宜过度设计，而需要采取保守、稳重、扩展性强的风格。品牌的更新升级，一方面顺应企业的战略方向的改变，一方面顺应整个设计前瞻潮流。比如美团变黄的品牌升级，是为了更好的从外卖这个触点深入用户心智，而OPPO ，vivo等品牌升级感觉更美有特色，其实也是顺应国际化的设计趋势，更有文字辨识度，更国际化。

5.4衰退期

每个产品都有一个生命周期，这是受市场因素导致的，此时用户会逐渐流失，既被其它新产品的体验模式所吸引，所以这时应该更关注用户流失后使用的产品，分析竞品的商业模式和功能，同时监测流失速度，需尽快拓展产品边界，寻找新的切入点。不过好的产品都是在不断优化，迎合新时代的需求，不断扩大自己的影响力和产品价值。之前文章我也写过关于微信的未雨绸缪，不断优化。微信的用户粘性强大，谁也不好说他能再打几年，像抖音这种迅速崛起的产品是否是现象级的昙花一现，也要看它是否能与时俱进。

六、设计师顺势而为，自我定位

一般来说小公司的大部分项目处于探索期和成长期，而大公司的项目很多处于成熟期，也有一些孵化探索的项目。处于探索期的项目，需要大胆创新同时，有可能变化极快，无法冷静下来根据数据用不同设计方式达成增长目标，我就经历过一个首页一星期全新大改版n次的惨痛经历。反观大公司很多流程复杂，验证方式系统完善，有些设计师感觉没有用武之地，不能施展才华。

根据不同阶段采取适合自己的设计方法，驱动产品提高设计价值，切勿漫无目标、抱怨环境，浪费时间。

如果你思维极其颠覆爱挑战可以选择从0到1的新行业；如果你喜欢创新可以选择成长型的行业及公司，或是成熟公司里的成长型项目；如果你追求科学、严谨、，那么可以选择成熟型的公司、项目。

转自-UI中国

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。

写在前面

过去几年中，我们的积极反应促使我们继续探索和分析主要设计领域的新趋势。尽管大多数趋势都是去年发生的变化，但到2020年，我们仍有一些新趋势值得追求。最重要的趋势是与技术有关的趋势，以及它们的发展趋势，以及它们如何影响设计领域。 

总体趋势

2020年的主要趋势动作设计与动画， 对于2020年，我们认为运动设计是主要趋势，因为我们在所有设计领域都遇到动画，从小的交互到徽标和UI，一切都在变化。动画内容正在进入现代世界，在现代世界中，书面内容没有以前那么吸引人。 动作设计正确实施后，可使广告系列的信息更快，更正确地传达给受众。

01. theQoos品牌插图由  闵庆  02  军团赛季 3由  尼克Scarcella   03.  溶剂-使大麻银行公开赛由  BluBlu工作室  04  云服务（动画图标）由  亚历山大Baleev  05.  病毒性肝炎由  昂布尔集体 ，  蒂博ZELLER ，  乔纳森Plesel  06 。  UXC_Design2020_Project研究通过  Donerzozo

目录

1. UI / UX

2.插图

3.动态图形

4.平面设计

5.基于技术的趋势 

6.包装

7.版式

8.趋势工具

1. UI / UX

1.1暗模式（Android Q和iOS 13）

暗模式是2020年的新趋势，Android引入了两种类型的暗模式，分别称为“强制暗模式”和“系统暗模式”。微软通过在其电子邮件应用程序中展示其暗模式击败了谷歌，但谷歌迅速推出了自己的针对Android 10的Gmail应用程序的暗版本模式。

有了介绍此更新的大公司，许多设计师将选择在他们的应用程序或站点中使用暗模式，因此希望在来年看到越来越多的暗模式。

1.2粗体颜色

在过去的两年（到2020年）中，强烈的色彩已成为重要的趋势。大胆的色彩丰富，明亮，甚至极富活力。它们可以是主要或次要颜色。 

01.  EMART UX / UI可再生的通过  加X，  李宝蓝 ，  Sabum卞 ，  熙荣，  尤金全度妍 ，  원 지 혜，  Bongho彩  02  NSH通过  索菲娅费多托娃   03.   埃尔多拉多赌场-移动Web UI，应用程序ü用  的Loredana PAPP-Dinea ，  Mihai Baldean ，  Milo主题  04.  mmcité+网站由  工作室9  兹林，帕维尔Valek  05.  自动哈克系列＃21-25由  安德烈福  06.  Flipd应用程序通过  ESTUDIO PUM

1.3 UI中的插图

多年来，插图一直是设计中最强劲的趋势之一。插图是对概念的直观解释，可以使用户更好地理解产品背后的思想。除了一些精美的插图使这一概念独具匠心外，它们还可以更快地传达信息。

01.  海妖重新设计，以  西尔Theyssens ，  安东尼科拉德  02  浮雕-医疗项目由  马丁Pankiewicz  葛尔若，  米沃什Pożarkowski  03.  abuk：图书封面设计有声书商店到  谢尔盖Valiukh，  Tubik工作室  04.我llustration系统GOL到  ESTUDIO PUM  05 。  智能家居的应用程序- IOS到  玛丽亚Osadcha  06.斯基林贸易（skilling.com） -   Loredana酒店PAPP-Dinea ，  米哈伊Baldean 

1.4讲故事

设计中的讲故事是关于帮助用户在平台上的旅程，从而使他的体验尽可能轻松和流畅（在UX设计中）。一个好的故事可以帮助用户更轻松地了解产品。为了讲述一个故事，我们可以使用一个特别创建的角色，将这个角色赋予他个性，我们创建一个故事和一个冲突，最终由我们的产品（UI设计）解决。这是产品设计中讲故事的基础。讲故事在UI和UX中都使用，并且基于相同的原理，但实现方式有所不同。

01.  余吴-旅行计划应用由  朱莉张庭  02.  UX / UI | 食品外卖应用由  康斯坦丁Seredkin  03.  COOC通过  cuneyt仙

1.5动画图形和微交互

正如我们所说，动态图形是今年的趋势，它在UI设计中也有很强的表现，它为插图增添了力量，使创意更易于吸收并保留在用户的记忆中。 

微交互在2018年成为第一流，但这一趋势值得在2020年关注。它们是UI设计中极其重要的趋势，这使基本应用程序/网站与非凡的应用程序/网站有所不同。微交互在使用户了解系统的工作原理并引导其获得更好的体验方面起着至关重要的作用。 

如果您是UI设计师，但尚未在工作中使用微交互，建议您这样做，因为到2020年，没有UI的任何UI设计都将是非常基本的。 

01.  UI / UX | 智能药房应用的   阿纳斯塔西娅中号，  谢尔盖Nikonenko UX   02.  气候与动物：灭绝危机网站UI / UX  由  丹尼尔·谭，  达芙妮龙  03  飞素食者由  帕特里夏赖纳斯  04.  UKRPOSHTA。乌克兰国家邮政局的移动应用程序，伊洛娜·金（  Ilona Kim）  05 .  Tagir Tikeev 的聋人报警应用程序

1.6用户界面中的视频

到2020年，信息必须非常快地到达用户手中，最好通过视频内容来完成。您选择通过动画或经典电影来解释产品，视频内容对于任何网站或应用程序都是必不可少的。

1.7功能

UI设计中的一个重要部分是功能，即，根据其目的和功能选择每个元素。许多人认为您必须在设计和功能之间进行选择，但是在新技术的帮助下，这两种技术可以很好地融合在一起并相互补充。设计负责引起对站点或应用程序的注意，其功能使体验变得更轻松。它使用户可以更快地找到信息。

01.斯基林贸易（skilling.com） -   Loredana酒店帕普用餐 ，  迈克尔Baldean 

1.8注意细节

在UI设计中，对细节的更多关注非常重要。从按钮，图标，加载到导航到细微的细节，都可以打造出非凡的设计。随着新技术的出现，我们在UI中必须注意的细节始终在变化。

在明年，我们将看到越来越少的按钮，以及更多基于手势的导航。例如，后退按钮（Android的导航常用）在Android 10中正式消失。

01.  FLYR的视觉形象和营销网站的  Ramotion 

02.  闹钟应用聋人通过  Tagir Tikeev

1.8渐变

几年来，我们一直在谈论设计中的渐变，这种趋势在2020年将继续保持强劲，因此值得一提。新鲜的色彩是成功渐变的完美选择。它们可以用于按钮，图标，插图，甚至用于排版。

01.  Wavecut - IOS应用程序通过  Eleken局  02.  抗忧郁症的应用程序-产品设计（UX / UI）由  安娜Arutiunian 

03.  保罗回肠-电影音乐作曲家，制作人，DJ，Perfomer  通过  的Loredana PAPP-Dinea ，  米哈伊Baldean ，  米洛主题  04.  ITEXIA通过  下一页局 ，  亚历克斯海鸥 ，  Jegor Walowski

2.插图

2.1角色设计

角色设计包括定义一个支持整个概念的角色。最重要的是，通过绘图，设计师向角色灌输了强烈的个性。您在应用程序或网站中遇到的虚拟助手是角色设计的一个很好的例子。

01.  新微小的事情•儿童图画书由  Vuon插图 ，  荣阮 ，  荣范  02  的Adobe X Createfulness由  迈特弗兰基，  马蒂厄Tarwane  03。 3D人物V2由  安东尼奥·佩蒂特Cwirko  04.  Malayali由  丹尼·何塞

2.2纹理

插图和纹理很好地结合在一起，可以创造出令人难忘的构图。从粒状纹理到预制的笔触，您可以找到许多想法来为插图添加纹理，也可以手动创建它们。浏览网络时，您可以找到许多可以在插图中使用的纹理，预制笔刷和工具。 

01. JDE - Common Grounds by Marianna Tomaselli 02. Japan by 饭 太稀

2.3平面插图

在过去的几年中，我们到处都可以看到平面插图。它们仍然处于趋势中，但现在有了一个新的组成部分：对每个元素应用细线。大多数艺术家都选择使用细的黑色笔触，但也可以将其上色，使其阴影比所涉及的对象暗。

01. BILLY KENNY -刚刚为音乐通过  桑戈BANG  02 Babelia - Lecturas对维拉诺由  米格尔·安赫尔Camprubí  03.  拳击猫-第一滴血由  Felms   04.  COUSCOUS STUDIO | 解释器VIDEO  由  哈立德abdelazi ž

2.4等轴测图

是的，等轴测图仍然在这里。它们主要可以在UI设计中找到。随着人们对加密货币的兴趣不断增加，这种趋势似乎已经生效，但是在2019年它已经发展了，现在我们在其他业务领域中发现了这一趋势。

01.  庞克市由  温祚_  02  FastCompany -等距号由  阿图尔Tenczynski  03和05.  抗体亚型由  马里奥·德•梅耶尔  04.  松弛插图由  京张 

2.5 3D

随着效率越来越高的软件和工具的出现，3d渲染已逐渐发生变化。3D插图非常受欢迎，因为与2D插图不同，它提供了更逼真的图像。

01. 游戏巴伊亚之家由  Miagui  02  天平 由  卡韦萨Patata工作室  03.  城堡毁灭者由  穆罕默德Chahin  04.  Eyoo家庭3D插图由  Baianat  05.  个人插图第1卷由  巴勃罗·马林 06.  一个人旅行通过  乱伊莱恩

2.6超大胆的色彩

大胆的颜色非常适合插图。它们营造出欢乐的氛围，使角色脱颖而出，并在图像背后展现故事。

01.  玛莎·希肖娃（Masha Shishova）摄于莫斯科的  STRTFD咖啡壁画  02. 作家- 利奥·夏目（  Leo Natsume）的移动互联网思想  03.  可口可乐圆罐插图由塔尼亚·雅库诺娃（  Tania Yakunova） 

3.动态图形

3.1 3D视频 

在2020年，无法想象没有3D设计的运动。设计的这个分支打开了一个世界的大门，在这个世界中，只有想象力是极限。我们可以在广告，电影，游戏，广告活动等中找到3d。

01.  庞克市由  温祚_ ，  视觉设计艺术的影响  

3.2视频+动画插图（混合媒体）

拍摄的视频，动画插图以及有时是静止的照片的结合可以产生非凡的效果。2d或3d插图可创建令人难忘的视频，从几行运动到3D真实人物甚至是现实生活中不存在的复杂视觉效果。

01.  Coppel /回到学校通过  大量工作室  02  PWR  由安娜·霍查，  Edvina元 

3.3 2D动画-说明性视频

2D动画专注于创建故事和角色，并在创作过程中使用矢量。当您想要广告系列或产品的说明性视频时，2D可能是理想的选择。在一个总是忙碌而又没有时间阅读的世界中，说明性视频对于任何网站都是必不可少的。

01.  Freelive  由  工作室Infografika ，  谢尔盖·萨多斯基 ，  阿纳斯塔西娅Alterka ，  Arsentiy Lesnik宾馆 ，  尤里·阿姆斯特朗 ，  阿林好，  乔治VALD ，马克西姆Tleubaev  

3.4动画徽标

您已经了解到动画是2020年的“必备”，为了保持竞争力，我们还必须将它们集成到徽标设计中。许多公司已开始对其徽标进行动画处理，以引起人们的注意。这也是徽标设计的主要趋势。

01.  杯茶由  维多利亚伍  02 - 07.  运动野兽✕Logomachine。动画标志的  运动设计学院，  维克托Villamarin的，  波格丹·杜米特留，  Logomachine .NET ，  亚历山大·库兹涅佐夫，  扎克李，  丹尼斯Siurin ，  斯坦尼斯拉夫·马尔琴科，  莉扎薇塔Tsareva ，  Supremus Levenus ，  安东·福明，  埃米尔Khafizov ，  胆碱哈达           

3.5混合动画2D和3D集成

这一趋势不是一个新趋势，但绝对值得一提。混合动画就是使用为此创建的特定软件将2D与3D结合在一起。 

4.平面设计

4.1平面设计中的3D 

尽管2d垄断了设计的这一分支，但3d可以为最终概念添加额外的内容。3d渲染可以采用插图，动画或字体的形式。

01.  画像由  费尔南多·多明格斯Cózar  02.  NASA | 太空时代的  工作室-JQΔ   03.  美国宇航局X BBC | 不自然世界的  工作室，JQΔ

4.2双色

精益求精的概念可以完美描述这一趋势，设计师在其中创造出大胆的元素，并带有优雅的手感和强烈的对比。这种趋势是创建更易于访问的打印的理想选择，因为某些打印技术如果颜色更多，则价格会更高。

01.  冬季公开赛'18由  Kinoto Studio，  Romina Rios，  Luc Geoffroy  02 Synticate©由  斯捷潘索洛德科夫   03.  TIGER在博物馆由  de_form工作室，  诺拉demeczky ，  的Eniko DERI  04.  刻字系列IX由  拉斐尔·塞拉

4.3光学感知艺术

欧普艺术作品是抽象的，有许多知名的黑白作品。通常，它们给观看者留下动感，隐藏的图像，闪烁和振动的图案或肿胀或翘曲的印象。（来源：wikipedia.org）。

这种趋势给人以动静的印象，但是以一种静态的方式。如果要实现在印刷海报中移动图形的想法，这是最合适的方法。

01 02  东京电影节共混物由  梅赛德斯巴桑 ，  的Adobe住  03.  海报-第一卷由  Xtian米勒

4.4平面设计中的插图

插图在设计的所有领域都非常重要，因此我们在图形设计中也可以找到它们。2D插图在现在已经非常流行了几年，并且即使在2020年，也将继续成为设计师的最爱。 

01.  GOOSE赫尔-海报由  Ewelina鹅  02  CAT酒吧和舞厅/ 2019至  kissmiklos，  Eszter萨拉 

4.5动画海报

动画无处不在，我们在设计的各个领域都可以找到它们，当然它们也存在于数字海报中。动画可以将2D与3D混合在一起，效果令人着迷。

01  节地铁地铁由  Bzoing，  维吉尼贝达德  02.  失败的Windows由  皮埃尔Kleinhouse，  辖Zivony 

4.6复古合成波

复古合成波是一种在80年代出现的趋势，但一旦好莱坞开始发行该十年的电影后便开始重新出现。随着《陌生人事物》系列的成功，这一潮流再次开始流行。

01.  鸡尾酒和梦想通过  Gjorgji Despodov  02.  CINEMAX由  杰森巴尔巴  03.奇怪的事情（Netflix.com）

4.7瑞士设计，达达主义，包豪斯

20世纪最重要的图形设计运动始终是最好的设计师的灵感来源。这些样式值得一提，因为它们始终是的，遵循它们所施加的规则几乎不可能在设计中犯错误。总的来说，这些运动强调版式，无衬线字体（Helvetica于1957年在包豪斯舞台上创建），几何形状，简单的线条，体积和颜色。

01.  瑞士海报01（版式方面）由  Mehman Mammedov  02.  黄视VOL.3通过  维奥莱纳齐名

4.8大的不间断彩色空间 

大型，不间断的色彩空间将在明年成为非常流行的趋势。它们与大胆的字体搭配使用，可以在图形设计，产品设计以及ui中找到。

01.  Synticate©由  斯捷潘索洛德科夫  02  Havaianas人字品牌内容由  约翰Vernizzi  03.  Kekkilä-BVB的  Kurppa Hosk

4.9超极简主义

极简主义的设计仅使用必需品，非常有限的调色板和简单的形状来打造令人难忘的身份。放弃多余的元素，使所有设计项目都有目的。要创建超极简主义的设计，您需要使用尽可能多的白色/负空间，简单的配色方案和一些基本的几何形状。

01.  Heim杂志，第3页，  Sasha Yaguza撰写  02.  Andrei Gheorghe- DADA-通过  moodley品牌标识发布

5.基于技术的趋势

技术通过智能设备和崭新的理念正在彻底改变我们的生活。这些新技术使设计师已经开发出进入当前趋势的新功能。人工智能，机器学习，虚拟现实和增强现实正在影响设计师的思维方式和创作方式。

5.1增强现实的移动应用

随着苹果和谷歌推出自己的AR开发平台ARKit和ARCore，很明显，整个世界将面向增强现实技术。 

许多大品牌已经在其应用程序中采用了这项技术，而那些尚未采用这种技术的公司必须认真考虑如何使用户在这种新现实中与之交互。

有一些AR交互可用于创建直观的应用程序。第一个是将应用程序固定在手机屏幕上时。另一个是AR UI与用户周围的环境相关联时。最常用的互动方式之一

是当UI与对象相关并通过扫描特定项目触发时。该动作将数字动画连接到特殊的“标记”。 

有关更具体的AI规则，请阅读Apple指南，以提供“将真实的虚拟对象与现实世界无缝融合的沉浸式，引人入胜的体验”。

5.2 AI，ML，聊天机器人和虚拟助手

聊天机器人是一种 通过听觉或文本方法 进行  对话的  软件。[1]  此类程序通常旨在令人信服地模拟人类作为对话伴侣的行为，尽管截至2019年，它们仍远远不能通过  图灵测试。[2]  资料来源：维基百科

人们还不习惯与AI对话，因此设计师（和开发人员）的工作很大一部分是使流程简单并建立信任。他们需要帮助人们了解系统可以做什么以及如何使用它。

使用AIML（人工智能标记语言）设计和编写脚本聊天机器人，是出色的UX设计人员的魔力可以发挥作用的地方。

大多数使用聊天机器人的公司都选择说明助手来为AI做鬼脸。以下是一些在其UI设计中使用聊天机器人的品牌：Spotify，星巴克，万事达卡，丝芙兰，Lyft，必胜客。

5.3 VR

大多数人将VR与游戏行业联系在一起是有充分理由的，但是随着所有大型科技公司开发VR套件和应用程序，我们可以肯定地说，我们将发现使用和享受这项技术的新方法。VR已经用于教育，医疗保健，旅游，房地产或建筑。 

5.4语音用户界面（VUI）

语音用户界面（VUI）使用语音识别  来理解语音命令和问题，通常是文本到语音以播放答复，从而  使语音与计算机的人机交互成为可能  。语音命令设备（VCD）是受语音用户界面控制的设备。资料来源：维基百科 

去年，使用互联网连接的设备的人中有40％每月至少使用一次语音助手，与去年相比，这一数字增加了10％。

6.产品设计

6.1包装中的图案

在过饱和的包装市场中，很难创造出可以脱颖而出的新产品，因此设计师要回到根源并创造出使产品在拥挤的零售货架上脱颖而出的样式。几何，花卉，浪漫或单色图案是任何产品包装的大胆选择。

01.  飞行山羊咖啡由  妮可LaFave    02.  VITA SPA皮肤  由  DWYW   03.  巧克力包装设计由  算术   04.  100手绘无缝的图案和形状   的  Arseny Samolevsky

6.2包装插图

插图一直是包装设计中的重要元素。通过他们，我们可以讲述一个故事，使目标受众可以更好地理解该概念背后的历史。平面插图已经存在了数十年，并且很可能会一直处于流行趋势。

01. 布里格斯原件由  熙宰金  02  天鹅绒咖啡杯  由  安东Malishev，  呵呵卡罗拉  03.  废物不包括厨房-品牌打造的  尝试和真正的DESIG ň04  家，甜蜜的寿司儿童  通过  精明的机构，  马里亚纳星火  05.  Cerveza塔Maleante通过  Antonay 

6.3留白

极简主义是设计的基本原则，而今天它又是新事物。它放弃了设计中不需要的所有内容，并用负空间代替了它。这种趋势将功能带到了最前沿，并专注于简洁的设计，使版式脱颖而出。

01.  香味精油 由Y u型简林，  黄恶嗯-祥  ，  智泰莲 02.  重塑品牌理念，为BodriPincészet由  克里斯托夫Gáthi

6.4单色和两种颜色

首先，在调色板中仅使用1或2个色调似乎有些限制，但它们可以创建非常强烈的视觉识别感。仅使用一种或两种颜色，就可以保持简约的外观，放弃所有多余的东西。结果是精美，高雅的产品令人赏心悦目。

01. Zerbet冰糕由  才林贾尔斯  02.  贝利啤酒  由  埃德大厅 悉尼，  叶卡捷琳娜Leontyeva ，  波阿斯孙

6.5大胆的颜色

大胆的颜色和渐变仍然是非常强烈的趋势，这种趋势将在2020年持续。使用这些颜色，您可以创建令人难忘的产品。

01.  极简主义和享乐主义：Fabula Branding 重新设计了  千年品牌

02  纹身商城  通过  Openmint工作室，  叶卡捷琳娜Teterkino ，  烟，  叶戈尔Kumachov 

03.  Organic  by  Larissa Kendrik 和  加布里埃尔· 沙茨曼

04.  VIZOU -老花眼镜  的  工作室开头语，  阿克塞尔杜马克 

05.  包装的调味开心果由  米拉Katagarova

6.6注意细节（受新艺术风格启发）

注重细节的包装比以往任何时候都更受欢迎。设计师选择这种趋势是因为它赋予了产品真实性。这种趋势使我们以现代方式思考经典。 

01.  HYWILDE由  查德·迈克尔·工作室  02  AMSTEL KARGO IPA通过  卡帕罗设计船员

03.  大岛咖啡烘焙-咖啡咬伤的  农场设计

6.7包装中的讲故事

到2020年，品牌将不得不重新考虑其产品和包装。品牌必须讲述一个故事，以帮助客户体验产品的本质。这可以通过为包装创建视觉和叙述身份来实现。

01.  喙接通过  骨干品牌推广   02.  Colorea用t  骨干品牌

7.版式

7.1粗体印刷

粗体印刷术是设计中的重要趋势，它取代了图像作为主要元素。勇敢的排版可以在网页设计和图形设计中发挥作用。

01.  埃里克·林格（Eirik Lyng），作者：  埃里克· 赫斯特雷（ErikHerrström）；  02.  包豪斯（Bauhaus_100）（x3），作者：  BunkerType（JesúsMorentin）

03.  UCCA当代艺术中心北京由  布鲁斯·莫设计（BMD）  ，耶勒马雷夏尔 

7.2小写

越来越多的应用程序使用完全小写的文本，非常易于阅读，并且完美地融入了简约和现代的设计中。在明年，我们绝对必须关注这一趋势。

01.  Autea品牌和网页设计由  米哈尔Markiewicz  02  山大食品公司 CI由  臣藤田/ tegusu公司 03.  Aquality品牌的  哈坎Fidan的

7.3自定义字体 

尽管自定义字体没有什么新意，但我们将看到这种趋势越来越多地出现在设计中，尤其是在徽标和海报中。这种做法在大品牌中更常见，因为生产专用字体可能会非常昂贵，但是设计人员可以对现有字体进行少量调整，结果可能会非常独特。 

01.  Think8全球研究院通过  勃洛克设计  02  ZINEZŐ//设计周期由  芭芭拉·卡托纳 ，  媒体与设计系埃格尔  03.  式设计'19通过  TRÜF创意  04.  Cako字体由  维奥莱纳齐名

7.4动力学排版

就像我们说的那样，动画在设计中无处不在，因此在排版中也很常见。动态字体使用小的和简单的交互作用来移动和移动屏幕上的字体。这种简单的技术可以处理文本并创建最终产品，该产品保留在查看器的内存中。

01和02.  Grafika  ，  Gimmick Studio设计  。03＆04.  增强现实与动作排版，作者：  Alex Slobzheninov

7.5堆叠字体 

堆叠文本可能是一种现代化的解决方案，可以吸引您注意基本信息。我们可以在网页设计，应用程序设计和图形设计中看到这种趋势。

01.  L'嗡通过  Atipus巴塞罗那  02  期刊由  杰玛马奥尼  03.  海报收藏| VOL.8由  罗马发表  04. SMLXL由  梅丽莎Baillache，  垫新郎，  杰森·利特尔

8.趋势工具

8.1 Adobe Spark

Adobe Spark是Adobe Systems  开发的  用于移动和Web的媒体创建应用程序的集成套件  。[1]  它包含三个独立的设计应用程序：  Spark Page，  Spark Post和  Spark Video。（来源：WIkipedia） 

他的免费Adobe Spark Web应用程序可与Spark Page，Spark Post和Spark Video  iOS移动应用程序同步  ，从而使用户可以从任何设备创建，编辑和共享其视觉故事。

[3]  这三个设计应用程序允许用户创建和设计可用于企业，教育，社交媒体营销人员等的视觉内容。[4]  Spark Gallery突出显示了使用该应用程序的人们所做的不同项目。使用这三个应用程序时，用户可以导入图片或搜索图片。

8.2繁殖

 Procreate是 由Savage Interactive针对iOS开发和发布的   用于  数字绘画的  光栅图形编辑器 应用程序。针对iPad的艺术可能性而设计  ，并且适合从初学者到专业人士的艺术家。

 它提供130多种逼真的画笔，多层，  混合模式，  蒙版，   过程视频的4K分辨率导出  ，  自动保存以及许多其他经典和原始的  数字艺术  工具。除光栅图形外，该软件的编辑和渲染文本和矢量图形能力有限  。（来源：Wikipedia）Procreate是2018年App Store上最畅销的应用程序。

8.3 Adobe XD

Adobe XD是  由Adobe Inc开发和发布的   用于  Web应用程序  和  移动应用程序的基于矢量的 用户体验设计工具。它适用于  macOS  和  Windows，尽管有适用于iOS  和  Android的版本   可帮助直接在移动设备上预览工作结果。XD支持  网站线框图，并创建简单的交互式点击型原型。（来源：维基百科）

作者授权

总结

每一年每一个时间段都会有新的趋势，学会的辩证的眼光去看待便是最大的智慧。世界一直都在变，趋势也是。保持学习和探索的心不变就是对自己热爱的事情最好的回应，念念不忘，必有回响。共勉！

转自：站酷-木七木七