本文对几种常见的异常状态进行设计总结，其中介绍了不同异常状态的表现形式以及我们应展现的设计状态与规范。

异常状态多在特殊场景下出现，比如服务器异常、网络异常等，因为异常状态出现的概率是较低的，所以异常状态也常常会被忽略，等到实际碰到的时候才会意识到原来还有这种状态……

作为交互设计师，在完成主流程设计后，也应该考虑到异常场景。

从全局性出发，我们可以预先考虑到产品将会碰到的异常状态，针对不同的异常状态制定相应的设计规范，在后续的设计需求中直接复用即可。

下面对几种常见的异常状态进行设计总结。

一、网络异常

1. 原因

网络异常的原因主要有以下两种原因：

（1）网络连接权限

针对某App的网络连接权限可以通过手机进行设置，可设置为关闭应用使用数据，或者只允许应用在WLAN下使用，或者允许应用在WLAN与蜂窝网络下均可使用。

所以以下均属于网络异常的情况：

• 关闭应用使用数据，在流量或WI-FI环境下打开App
• 只允许应用在WI-FI下使用，但在流量环境下打开App

（2）网络连接状况

在断网（打开飞行模式）、弱网（手机信号差）的情况下， 也无法正常获取数据。

2. 处理方式

当网络异常时，用户点击进入新页面或在当前页进行操作时，App会通过异常状态缺省页或交互反馈来告知用户当前异常状态和解决方案。主要分为两种情况：

（1）当用户操作进入App新的页面时，常以缺省页的形式提醒用户当前网络异常。当应用检测到有可用网络时，缺省页将自动刷新页面内容。

比如网易云音乐在无网络连接下，进入新页面时，缺省页以简单的文案告知无网络的基础原因，通过查看详情来告知用户解决方案以及引导如何解决问题。

美团、腾讯视频等，引导用户检查网络权限设置和稍后再尝试刷新页面，稍后再试是因为弱网环境是暂时的，比如在地铁上高铁上或者某处手机信号接收较差的地方。

（2）当用户点击操作当前页面时，比如上拉加载页面、下拉刷新页面，点赞、关注等操作时，常以toast或对话框的形式提示用户。

比如网易云音乐，网络异常情况下下拉刷新或上拉加载页面均进行对话框提示，并引导用户检查网络权限设置。

美团外卖，无网络连接环境下，在我的订单页面进行评价操作，会进行toast提示。

二、流量警告

前面说完网络异常的设计规范，接下来就不得不提到流量警告的场景。

对于需要消耗大量流量的应用：

（1）在流量环境下进行需要消耗大流量的操作，比如播放/下载音视频等，页面会进行流量警告。比如网易云音乐在流量环境下打开MV。

（2）在WI-FI环境下切换到流量环境时通常应用会主动暂停进程并进行流量警告，并在页面上告知用户原因，让用户选择是否继续进程。

比如网易云音乐、爱奇艺、芒果TV、BiliBili等音视频娱乐App，在以上2种场景下，在视频画布上进行告知让用自己选择是否继续播放，同时也提供按钮入口让用户办理业务可免流量进行播放。其中，芒果TV和BiliBili的继续播放按钮还贴心地告知了用户将要消耗的流量值。

对以上两种场景的处理方式进行归纳，均为流量警告方式。

三、网络异常和流量警告适用场景快速查询

总结完网络异常和流量警告的设计规范，我们知道其中影响因素包含：网络连接权限、网络连接状况以及网络环境的变化，下面做一个小总结，以便快速查询。

在总结之前强调一下，网络权限设置是针对某App，连接Wi-Fi和流量是针对手机（所有应用）。以iOS为例，设置截图如下：

情况一：当前网络环境不变化

情况二：当前网络环境发生变化

针对以上情况，表现状态为“网络异常”，则参照网络异常的设计规范；表现状态为“流量警告”，则参照流量警告的设计规范。

四、服务器异常

服务器出错的情况是较少出现的，若出现服务器异常，其异常的时间也较为短暂。

一般不提示具体原因，处理方式为进入新页面的话则以缺省页（文案或是文案+插画）的形式进行提示+重试按钮，例如，进入小米金融贷页面时服务器出现异常，缺省页提示错误原因同时提供重试按钮。

点击操作的话则以toast或对话框的形式进行提示并重试，比如下图的段友app，服务器出错，刷新页面后进行toast提示；前段时间超级火的zao应用，朋友圈火爆传播，一度造成服务器访问过载，制作视频的时候应用给出了对话框提示。

五、加载失败

1. 原因

在数据加载过程中，导致异常的原因可能是：
1、网络异常导致加载失败

2、服务器请求数据失败导致加载失败

2. 处理方式

1、如果是因为网络异常导致加载失败，处理方式参照网络异常的设计规范。

2、如果是服务器请求数据失败，处理方式参照服务器异常的设计规范。

六、空状态

1. 原因

空状态就是指页面当前无内容，主要在以下场景下会出现空状态的情况：

1. 无权限，某些界面和功能会针对不同的角色设定不同的使用权限，无权限访问的页面会出现空状态的情况
2. 搜索无结果，搜索无相应结果会进行空状态提示
3. 初始内容为空，例如无浏览记录、无收藏、无购买记录、无订单记录、无下载记录等
4. 内容被删，若内容允许被清空，内容清空后会回到初始前的空状态

2. 处理方式

当前页面为空一般会提示用户当前页面为空状态，同时也可能会做适当的引导。

针对空状态的场景，主要采取以下几种设计原则：

（1）用户无权限

一般在B端产品中会碰到这种场景，通常来说，若用户无权限访问某功能模块的话，处理方式一般是将该功能模块对用户进行隐藏。

若有其他原因不能隐藏对应功能模块，处理方式为缺省页面（文案或是文案+插画），但文案要足够明确，告知无权限的用户该如何处理才能访问，一般是联系管理员添加权限。

（2）搜索无结果
搜索无结果的处理方式一般有两种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上相关推荐。具体用哪一种根据设计目标来决定。

比如网易云音乐搜索音乐无结果直接用文案告知。豆瓣搜索书影单无结果以插画+文案的形式展示结果。美团搜索不到相应的内容，应用直接推荐其他商家刺激用户购买。

另外也有应用会添加一些引导操作收集用户数据来优化搜索，比如微信读书找不到相关的数据，在页面的底部提供一个入口让用户填写书籍名称和作者，基于用户的反馈数据，微信读书在后续书城书目的收录工作中，就可以优先收录用户搜索率较高的书籍了，在优化搜索的同时也提供了用户反馈诉求的入口。

（3）初始内容为空

需要用户进行操作产生内容的页面，初始状态一般为空，和搜索无结果的处理方式类似，有2种处理方式，一种是缺省页面（文案或是文案+插画），另一种是在第一种的基础上加上快捷入口或推荐内容，其目的都是在于引导用户进行操作从而产生数据。具体用哪一种还是根据设计目标来决定。

直接用缺省页面告知方式上，例如网易云音乐，个人未发布相关动态，该动态页面直接用简短的文案告知用户暂无相关动态。

提供快捷入口上，比如微信读书，用户未加入书籍到书架时，进入书架页面，会有一句话文案引起用户共鸣，另外附上找书按钮方便用户快捷进入书城进行找书。

如果通过用户浏览记录和搜索行为等能够分析出用户的兴趣爱好，进行精准推送，那在空状态页面进行推荐引导也不乏是一种很好的尝试。比如网易云音乐、腾讯视频和美团均有采取该方式。

网易云音乐里头我从未购买或领取过数字专辑，该页面也是无数据的，网易云音乐在页面底部进行了数据专辑的推荐，具体的推荐算法不太清楚，我觉得可以是销售量较大的专辑，或者根据我个人的搜索和浏览记录进行相关推荐，最后通过埋点数据分析通过推荐引导购买是否提高了专辑购买率。

（4）内容被删除

页面内容被删除区分场景说明。

第一种是需要用户操作产生内容的页面，用户也可以通过删除将页面内容清空。

对于该场景，当页面内容被用户清空后，页面内容为空，处理方式和初始状态为空类似，以缺省页（文案或是文案+插画）的形式告知或在此基础上加上快捷入口或用户推荐。

比如清空网易云音乐中我的下载列表所有单曲、清空腾讯视频我的缓存视频，清空微信读书的书架，清空后的状态和初始状态是一致的。

另一种场景是的页面入口依然存在，但二级页面内容已经被删除了，二级空页面的设计处理方式是以缺省页（文案或是文案+插画）的形式告知，文案信息告知用户内容已被删除。

例如某微信订阅号的文章发布记录中的某篇文章已经被删除，点击进入二级页面后的提示如下：

七、功能重建

功能已上线，后期进行产品升级或迭代功能正在开发中，功能入口没有进行关闭还是允许用户访问，通常会在用户进入该页面之后进行对话对话框提示，告知原因。

总结

以上对几种常见异常状态的设计规范进行了总结，相对正常状态，异常状态较为少见，容易忽略，大家可以参照以上规范进行异常状态设计和优化调整。后面碰到其他异常状态，我会继续补充。

文章来源：人人都是产品经理

本文从什么是场景化、场景化设计的案例、为什么要基于场景化做设计和如何进行场景化设计 4 个方面为你完整梳理场景化设计思维的知识点。

什么是场景化设计

「场景」在百度百科里的定义是：戏剧、电影中的场面，泛指情景。情景又指：

• 感情与景色
• 情形、景象
• 环境：假设是在这个情景。

在戏剧或影视剧里，场景由人物，时空，事件（行为），环境（社会环境和自然环境）等要素构成。

互联网中的「场景」我把它分为两类，一类是为了实现用户目标而产生的场景，这种类型的场景需要明确用户目标，可能并不需要涵盖用户是怎么实现目标的。这类场景指根据用户的精准需求，为其提供精准服务，用明确的差异化服务给用户提供一个使用产品的动机。比如微博和微信，微信定位是熟人社交，微博则是陌生人社交。另一类是更加精细化的场景，这类场景需要明确用户操作流程。本文主要针对第二类场景展开。

场景化设计指基于对场景的分析，得出用户痛点与需求，结合前后场景预判用户目标，通过设计提高用户效率，给予用户惊喜与感动。

场景要素包括：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。其中 Where 又包括线上地点和线下地点，线下指现实中的定位，可以通过手机信号塔数据（GPS），Wifi 连接等获取；线上指用户所处的具体页面。

如：用户（who）早上上班（when）在地铁上（where）看电子书（what），地铁上人多嘈杂且操作不方便（how）。再比如用户（who）中午（when）在办公室里（where）点外卖（what），肚子很饿还不知道吃什么（how）。五要素就像口诀，帮助我们全面快速地描述场景。

有哪些场景化设计的例子

为帮助大家更好的理解场景化设计，这里基于上面提到的场景五要素举一些例子。

人是变量：用户不同，看到的信息不同。随着大数据和智能推荐技术的普及，越来越多的产品通过挖掘不同用户的喜好，生成用户画像，为每位用户提供「千人千面」的个性化内容。这样的产品大家都很熟悉，比如抖音，淘宝，微博，今日头条。

时间是变量：时间不同，看到的信息不同。比如小米 MIUI11 的效率革新功能「智能出行」，当在出行类 app 上定好行程后，MIUI11 就会自动将该行程记录在负一屏显示并同步日历，同时会根据出行的时间点，在通知栏实时更新提示：

再比如在 Google Maps 的 app 里开启导航时，如果目的地在预计到达时间还没有开门，或者快要/已经关门了的话，会有个弹窗提醒。

还有蚂蚁森林的页面会根据用户打开的时间进行变化（白天与夜晚模式）等等，这些都是充分考虑了场景中时间这一变量，才有如此暖心的设计。

地点是变量：同一个用户，在不同地点看到的信息不同。比如，大众点评APP当用户从常住地北京（where）定位成非常住地杭州（where）时，根据用户的上个场景与当前场景预测用户可能处于旅游状态，从而预测用户下一步的目标是在杭州「吃喝玩乐」，所以首页和攻略页的内容都发生了变化，为用户推荐旅行地的「吃喝玩乐」。

环境是变量：不同环境看到的信息不同，比如设备环境发生变化时：iOS13 中的备忘录页面，将「添加」按钮移到了右下角。为什么？因为手机屏幕越来越大，把按钮从右上角移到右下角，更有利于用户单手操作。

再比如：我们在驾驶环境下，要保持注意力集中，避免或减少分心驾驶导致的交通事故，所以基于驾驶环境，iOS11 上线了驾驶模式功能。当 iphone 与车内的 USB 或蓝牙连接，或 iphone 感知到人的移动速度时，iphone 就会自动进入驾驶模式，在该模式下，任何人发短信，我们都不会收到提示，对方会收到「我正在驾驶，稍后回复您」的自动回复。同时，iphone 会追加一条短信，提示对方只要回复「紧急」关键词，我们就能立刻接收到他们的消息提示。

为什么要基于场景做设计？

通过上面的举例想必大家已经了解到了基于场景做设计的好处。由于与用户的空间相隔，设计师无法感知用户在真实场景中使用产品的具体情况。通过场景化设计的方法，对用户使用场景进行分析与预期，可以帮助设计师找到用户与场景的内在联系，探索新的功能及交互方式。

怎么进行场景化设计

可以概括为以下四步。

1. 根据用户使用流程和行为路径穷尽场景

根据用户的使用流程和行为路径列举场景，这里以乘坐飞机（手机购票）为例，列举乘坐飞机涉及到的关键场景：

• 乘客（who）在航旅纵横页面（where）购票（what），航班多查找起来麻烦（how）。
• 乘客（who）起大早拖着疲惫的身体（how）在去往机场的路上（where），又遇到早高峰堵车，内心焦躁烦闷（how）。
• 起飞前（when）乘客（who）在机场（where）过安检（what），安检流程复杂，又检测出不符合登机规定的物品，让人心烦，手忙脚乱（how）。
• 起飞前（when），乘客（who）在候机口（where）候机（what），人多嘈杂，没有座位，还背着繁重的行李，还要时刻关注航班信息（how）。
• 起飞前40分钟（when），乘客（who）背着行李排着队（how），将登机牌（纸质/电子）和身份证出示给工作人员（what），工作人员（who）站在入口处（where）开始检查每位乘客的登机牌和身份证（what）。
• 检完票后（when），乘客（who）拿着身份证和登机牌，背着行李（how）乘坐摆渡车（what），摆渡车上嘈杂、拥挤（how）。
• 下摆渡车后（when），乘客拿出登机牌，背着行李（how）排队检票登机（what），工作人员（who）站在飞机前（where）开始检查每位乘客的登机牌（what）。
• 在起飞前30分钟（when），乘客（who）登机（what），背着行李在狭窄拥挤的通道里（how）寻找自己的座位（what）。找到座位后，将沉重的行李艰难的（how）放到上方的置物架上（what）。放好行李后，坐到自己的座位上（what），系好安全带（what），调节座椅靠背（what），等待飞机起飞（what）。
• 飞行过程中（when），气流导致飞机颠簸，乘客感到恐慌不适（how）。飞行过程中，乘客通过看电影，看书，睡觉打发时间（what）。
• 到达目的地（when），乘客（who）从高处置物架上（how）取下行李（what），拿着沉重的行李（how）排队下飞机（what）。此时乘客对目的地的天气等其他情况都不清楚。
• 乘客走出飞机到达航站楼后，在陌生的机场（where），跟着标牌指示艰难的找到自己的行李（what）。拿着行李跟着指示牌（how）困难的找出口（what）。

通过对关键场景的详细描述，我们将摸不着的用户场景像过电影一样在眼前一一呈现，有利于我们发现很多想不到或者通过调研得不到的细节，帮助我们发现用户真正的痛点与需求，洞察设计机会点。

2. 根据场景挖掘机会点

完成了第一步的场景列举，我们对流程中涉及的场景有了深刻的了解。下一步就是对场景的判断与分析，挖掘机会点。机会点挖掘有两个方向，一是通过分析当前场景存在的痛点和需求挖掘机会点，二是通过对用户下一步目标的预判寻找机会点。

通过分析当前场景存在的痛点和需求挖掘机会点

支付宝「朋友」界面，当用户输入某数值时，输入框上方会自动显示「给对方转账***元」按钮，用户可点击该按钮完成转账。这是因为经常有用户误以为输入数值发送即完成了转账，导致很多尴尬的状况出现。基于该场景下的痛点与需求，支付宝做了这个改进，贴心又好用。

iOS 系统在切换 APP 操作时，会将一些金融类 APP 虚化，以此来保证用户信息安全。这一设计细节也是充分考虑了用户在切换 APP 时的场景，解除了用户在公告场合担心被窥屏而泄露个人财富信息的担忧。

还有，当我们用耳机听音乐或播放视频时，拔下耳机，声音就会自动停掉，这样就算在安静的场合听音乐或者看视频，耳机不小心掉下来也不会发出尴尬的声音，这些都是充分考虑了用户当前使用时的场景，才做出如此贴心的设计。

通过对用户下一步目标的预判寻找机会点

第二个方法是通过对用户当前场景的分析，预判用户下一步的行为与目标，从而寻找当前场景的机会点。

如何预期用户下一步目标？有三个方法：

• 通过成组动作进行预期，如复制→粘贴，编辑→保存。
• 通过用户认知流程预判，如，浏览时反向滑动→结束浏览/回到顶部；再比如谷歌翻译在发音时，第一遍是正常语速，第二遍语速变慢，第三遍又恢复到常速。是不是很贴心，很符合用户期望？
• 通过产品使用流程进行预期，如订外卖→取外卖→评价。

在谷歌浏览器，当我们打开多个浏览窗口时，通常需要手动一个个地关闭标签页。chrome 充分考虑到了用户的使用场景，当用户关闭一个标签页时，预期用户会关闭下一个标签页，所以当关闭一个标签时，相邻标签会自动靠近，保证关闭的按钮始终位于鼠标的当前位置，这样用户就不用移动鼠标关闭下一个标签页，提高了用户的使用效率。

3. 机会点转化为落地的设计方案

在将机会点转化为具体的设计时，有两个可作为依据的设计原则，分别为，情感化。

实现有以下几个方法：

行动点前置

通过对用户下一目标的预测，将用户目标在当前场景展示，缩短操作流程，达到的目标。如淘宝首页的 tab 栏会根据每个用户的浏览记录预测用户目标，千人千面个性化展现，缩短了用户查找商品的路径，提高商品购买效率。

行动点置换

还是拿淘宝举例，淘宝底部的第一个导航，当用户滑动首页下方的商品流时，该按钮由首页变成置顶。

行动点相关提示

意思是根据用户当前目标或下一步目标进行相关的提示。如支付宝朋友页面，当上滑时，会出现「找人转账」的提示，点击进入朋友列表的纯净模式（去掉了服务通知等跟转账无用的列表），提高了用户寻找的效率。

再比如，网易邮箱，当邮件中提到附件，但是没有上传附件时，点击发送后，系统弹出下方的提示，解决了用户常常忘记添加附件的困扰。

突出行动点

根据用户当前目标或下一步目标突出关键按钮，帮助用户快速找到关键操作，吸引用户点击，降低了用户思考成本，提升效率。运用这个方法进行设计的例子太多了，比如淘宝的商品详情页用红色突出购买按钮等。

直接执行

根据用户当前目标或下一步目标直接执行。比如滴滴的扫一扫界面，当检测到光线较暗时，手电筒会自动打开，提高了扫一扫的效率。

情感化

唐纳德·诺曼在《情感化设计》中提到设计的三个层次，分别为：本能的设计，行为的设计，反思的设计。情感化设计是能打动人的，它能传递感情，勾起回忆，给人惊喜，情感化设计是帮助产品与用户之间建立情感的纽带，能强化用户对品牌的认知，培养对品牌的忠诚度。

情感化设计的步骤依次为：提炼影响产品的的情感指标→聚焦用户对产品的情感诉求→产出设计方案→验证设计价值（来源于周姮—知乎蚂蚁金服体验技术部的一次分享）。

在谷歌表格每列的开头依次输入「Pride」五个字母后，表格会变成彩虹样式。

网易云音乐在用户生日时会变成「生日快乐」的蛋糕样式，点击进去的音乐列表，第一首歌是生日歌，让人心里暖暖的。

4. 设计检验

最后一步就是设计方案的验证，设计方案能否帮助用户缩短操作流程？降低用户思考成本？帮助用户地完成任务？是否能打动用户给他们带来惊喜与温暖？通过可用性测试及上线后的数据反馈，帮助我们更好的优化设计方案。

总结

1. 什么是场景化设计？

场景五要素：4W+1H，即Who人、When时间、Where地点、What事件 、How环境，什么人，在什么时候，在什么地方，做了什么事情，所处的环境如何。

2. 有哪些场景化设计的例子？

3. 为什么要进行场景化设计？

4. 怎么进行场景化设计？

• 根据使用流程和行为路径穷尽场景
• 根据场景挖掘设计机会点
• 将机会点转化为落地的设计方案
• 设计检验

产品：这次需求很简单，对比上期只有字段和操作项的差异，把上次的稿子直接复制一下应该不用很多时间吧？

交互：上次你是不是做过高级筛选组合？我这期需求要用到，你把那部分稿子发给我用用吧。

研发：这个组件我在其他模块里看到过已有样式，这次为什么用不一样的？不然又要重复开发呀，能不能统一一下。

视觉：同一个按钮在不同的模块颜色不一样诶，这次要和哪个模块一致啊？

……

通过以上对话不难看出，最常出现在需求沟通与研发过程中，由于缺少统一的规范和标准化体系，导致实施环节各方沟通成本高，造成设计成果与实现有一定差距，影响用户体验；通用组件和业务组件混用，导致设计模式和代码复用率低。尤其是当业务发展到一定体量时，对于复杂产品的大量重复且类似的需求场景，如果没有一种的工具和规范来协同工作，将大大影响团队的生产及沟通效率。

问题

• 认知：产品、研发、设计师对于同一需求都有自己理解的解决方案，缺少统一规范的约束，难以达成共识。
• 效率：设计效率低，交互原型的维护成本及上下游团队的沟通成本高，易造成不专业的印象。
• 品质：认知和效率的局限性，最终导致实施落地的产品质量和用户体验难以得到保障。

解决

大家应该都知道乐高（LEGO）积木，它是一种可以互相嵌套组合的塑料积木，形状共有 1300 多种，每种形状都有 12 种不同的颜色，可以拼插出多种造型。其实组件库的工作方式就很像乐高，通过小元件的互相嵌套来产生多种组件或模块，多种组件模块结合生成页面结构。我们先来梳理一个概念，组件库是什么？

组件库是设计系统的一部分，是在我们常规界面设计过程中可以直接用来制作交互图例和搭建页面的组件集合，它可以作为单个组件独立存在，也可以通过多个组件组合而成的结构或模式来解决类似场景的设计问题。组件库是在约束条件下去构建解决方案的过程，所以组件的使用也需遵循一定的规范，按照一套标准化的体系复用于多个业务场景。

一个有效的组件库，可以帮助设计师和研发提高工作效率，提升设计专业度的同时让产品本身的体验更加一致、可学，品牌感更强，它所具备的基本特征一定是通用的、灵活的、复用的。

• 通用性：意味着足够基础和常见且不带业务属性，参与设计环节的每个人都应该知道这个组件的功能及目的，同时具备一定扩展性。
• 灵活性：要求元件的组合需灵活，可以在不同场景下通过互相组合来快速搭建交互框架原型图，并根据不同页面结构的演变来适应新的业务需求。
• 复用性：指的是适用于多个业务或产品，在设计过程和研发过程中都可以高频复用。

那么用组件库这种标准化体系来完成设计方案时，到底能带来怎样的价值？

组件库的价值

保证产品体验的一致性：对于一个含有多业务系统的大型复杂产品，每个独立的业务系统虽然在功能上有一定区别，但整体的用户体验需要满足基本的一致性。比如，当我使用同一个产品中的业务系统 A 和业务系统 B 时，我能通过类似的页面结构、组件及样式的一致性、操作反馈乃至提示文案结构的一致性，来感知到我使用的A、B业务系统隶属于同一个产品。

提升设计师的效率：在需求量巨大且需求来自不同的业务线时，需要逐一绘制页面及组件，造成大量重复劳动，并且在评审及需求沟通环节还可能存在不断地细节调优。所以对于设计师而言，组件的高频复用能大大提升设计效率，使设计师更多的将精力聚焦于理解和解决用户的实际问题。

提升产研团队的效率：通用场景及普通需求直接按规范进行设计和研发，减少上下游对同一页面及组件使用方式的不同理解而产生的多余沟通成本。

利于沉淀设计规范：组件本身的设计和使用方式就可以直接作为交互和视觉规范的一部分，按照统一的设计规范来确定需要使用的主题色、组件样式、组合方式及页面结构，可以快速搭建出一个或多个产品的交互框架。

构建「FishDesign」企业级UI组件库

那么如何构建一个企业级 UI 组件库？

我将用前段时间参与的「FishDesign企业级UI组件库」项目为例，通过在网易七鱼产品中的应用，来介绍一个企业级 UI 组件库的设计原则，内容构成包含哪些类型和元素，每种组件类型在分类和设计过程中是如何考量的。本文侧重讲述构建一个组件库所涵盖的内容，而不是某组件类别本身的设计方法。

顾名思义，「企业级」意味着 FishDesign 所服务的业务都是具备一定体量的，可能是服务一个包含了多个独立子业务系统的大型复杂产品，比如网易七鱼；也可能是同时服务多款产品，比如网易七鱼和网易定位等。

组件库是帮助设计者及前端工程师快速构建业务系统的工具，除了最重要的组件内容，还需要设计原则、配色方案及布局规范来指导具体业务产品的设计有效落地。

1. 设计原则

基于 FishDesign 目前主要是帮助搭建 B 端企业级产品，而 B 端业务的产品目的决定了它所才采取的设计模式，所以我们将用以下四点作为塑造组件库的设计原则：

• 简洁：如无必要，勿增实体，慎重筛选客户当前需要信息内容。
• 直接：提供用户操作后的直接反馈，保证用户的操作结果符合预期。
• 优雅：设计方案追求优雅，给使用者有质感的操作感受。
• 适应性：设计方案需提供可扩展能力及适应性，以适应不同模式的企业使用。

2. 颜色

产品会根据自身的产品目标和受众群体去选定产品的配色方案。前文提到，一个有效的组件库需满足通用性、灵活性、复用性，像配色方案就应该能被灵活自定义来应对多样化的诉求。以网易七鱼为例（下文均以网易七鱼为例），设置了 1 种主色，4 种辅助色和 6 种中性色来搭建一致的外观感受。

• 主色：选择蓝色系来传达智能服务、信任可靠、技术创新的品牌形象。
• 辅助色：除了品牌主色调蓝色，在辅助色中也存在一样的蓝色，那是因为蓝色是相对泛用性较广的色系，用于产品中的主操作按钮、文字按钮或 icon 等。红色唤起注意并昭示危险，所以一般用于谨慎操作及错误提示。黄色则常用于警示信息，提示用户操作可能带来的风险及后果。绿色能传递安全和健康的情绪感受，用于正向反馈提示或成功操作的引导。
• 中性色：一般采取黑灰色调来展示产品的文本信息、背景和边框色，用来表现层次结构。

3. 布局规范

为处理多业务中网页设计区域内的信息收纳问题，我们用规则的网格阵列来指导和规范版面布局以及信息分布，即栅格系统和页面布局。FishDesign 在 12 栅格系统的基础上，将整个设计区域按照 24 等分的原则进行划分，来增加页面的相似度，提升用户体验。

我们通过基本的配色及布局规范解决了产品风格及信息区块框架的设计，那组件库中重要的组件部分，是如何作用于产品搭建的？Brad Frost 提出的「原子化设计理论」可以帮助我们更好的理解，原子化设计的灵感来自于现实世界当中的分子结构，UI 中颗粒度最小的元素，即「原子」，组成了颗粒度较大的元件，即「分子」；而诸多分子又组成了更加复杂的组件与模块，即「有机体」。

组件库构建之初无法一应俱全，是需要后续不断的维护与迭代的。如何在最初海量组件中圈定适合的组件范围呢？最合适的切入点就是从身边的业务场景出发，从最基本、最简单、最小的元素入手。

4. 组件分类

我们根据当下已有的业务场景和对往后一段时期的业务发展方向进行规划，将组件库的组件类型分为通用组件和业务组件。一般业务组件库是不对外的（毕竟使用场景特殊也有限，放出来参考意义不大），所以在 FishDesign 官网只能看到通用组件部分。

• 通用组件：指适用范围广、复用频次高，可复用于多个业务且不包含业务逻辑。比如导航栏、按钮、toast、弹窗等。
• 业务组件：这类组件对比通用组件而言，最大的特点就是包含了较多业务属性，跟产品功能有较强的关联性，所以影响到适用范围可能仅限于 1~2 个业务系统或特殊场景，且复用频次不高。比如网易七鱼的在线和呼叫系统中的咨询分类组件。

一个大型复杂的业务产品通常有不止一位设计师或前端工程师参与设计，需要在多种处理方式中选择合适的设计模式来解决不同的场景问题，这要求根据组件属性的差异，需对通用组件做细分，那么如何确定通用组件中的子分类呢？

• 竞品学习与研究，穷举该部分产品类型中的组件类型。
• 遍历自己所负责产品内已有的业务场景，提取并整理业务场景中所用到的组件。
• 将整理好的两部分组件进行筛选去重，保留高频通用的部分。比如同样是下拉筛选组件，由于缺少统一规范和组件，可能导致的后果就是在同一产品不同业务系统的相同场景下，使用的组件从样式到交互方式都不一致。我们要做的就是对这部分在类似业务场景中使用了多种表达形式的组件做合并去重，然后通过设计组内审来圈定最后通用组件的范围。
• 基于组件的属性和使用场景，对圈定的组件范围进行归类。

由上述步骤，我们将通用组件继续细分为五个子类别：基础组件、导航、数据录入、数据展示、操作反馈。

• 基础组件：即按钮、图标等，相较于其他组件的使用场景更通用，或其他组件在实现时依赖了这些组件来实现的组件类别。
• 导航：即导航菜单、标签、面包屑等，可以帮助用户产品系统内快速找到所在页面层级或位置的组件类别。
• 数据录入：即输入框、选择器、表单等，支持用户将数据信息录入到系统的组件类别。
• 数据展示：即图表、表格、气泡卡片等，将录入到系统的数据信息多样化展示出来的组件类别。
• 操作反馈：即对话框、警告提示（Alert）、全局提示（Toast）等，在用户操作前后，使系统状态得以合理反馈的组件类别。

用组件库设计「网易七鱼」示例

以网易七鱼为例，看下有组件库参与搭建的设计示例，以下页面中所用组件均出自 FishDesign 组件库。

「导航组件」使用示例：

「表格组件」使用示例：

「弹窗组件」使用示例：

「步骤组件」使用示例：

总结

组件库最大的价值在于提升整个团队的产研效率，使设计质量得以保障的同时，提升产品整体的用户体验。

我们对构建企业级 UI 组件库的步骤及要素做个简单回顾：

• 首先，明确组件库所需解决的问题及存在的价值，这决定组件库的体量和服务范围是什么，以及构建的时机是否合适。
• 其次，通过竞品分析并结合身边最熟悉或深耕的业务入手，通过产品目的来选择设计模式，从最小元素开始逐步整理，包括产品配色方案和栅格系统等布局规范。
• 第三，需要对组件库的重要组成部分「组件」，进行圈定及合理分类。这里需要注意的是，组件范围的圈定，尤其在组件库搭建的初级阶段并不是越多越好，而是需要有效的覆盖那些经过规划的业务场景即可。
• 最后，组件库并不是构建完就结束了，是需要在后续项目中逐步维护与更新的长期积累过程。

任何组件库的构建都离不开一个优秀的团队在整个设计过程中的协同，十分感谢参与的设计师与前端工程师们。上文仅是个人参与过程中的一些经验总结，还不够全面，同时篇幅有限，关于组件的具体设计考量无法一次详尽，欢迎一起讨论组件库及标准化设计体系相关的更多内容。

文章来源：优设

本文作者结合实际案例，跟大家分享一下在RARRA模型下，如何做用户增长？

从AARRR到RARRA的运营思路转变

众所周知，AARRR经典的增长黑客体系，也称之为「海盗法则」，分别是获取、激活、留存、变现以及推荐。提出这个模型的 Dave McClure 认为，所有创新型、成长型的企业都应该按照这样的模型来做增长。

AARRR专注于获客（Acquisition），作为一个2007年提出的概念， AARRR模型可能已经不再适用互联网运营这个瞬息万变的场景。原因有二：

（1）获客成本增加

市场竞争激烈，用户获客成本已经不再便宜，一组数据显示：阿里线上获客的成本翻了 6 倍， 京东的获客成本翻了 1.5 倍，趣头条用户获取成本增加了 8 倍，百度的流量获取成本增长了 41%。在当前的情况下，以拉新获客为中心的增长模式意味着要比十年前这个模型提出时平均增加5倍以上的成本。

（2）流失率高

一组数据显示，现在平均每个App在安装后的情况：前3天内将流失掉77％的DAU。在30天内，它将流失90％的DAU。而到了90天，流失率跃升到95％以上。不管你是否心存怀疑，这就是目前众多创业公司所面对的现实窘境，它创造了Brian Balfour所说的“无意义成长之轮”。

因为以上两个原因，现在黑客增长的真正关键在于用户留存，而不是获客。所以我们需要一个更好的模型——就是RARRA模型。

AARRR与RARRA的区别

RARRA模型是托马斯·佩蒂特Thomas Petit和贾博·帕普Gabor Papp对于海盗指标-AARRR模型的优化，RARRA模型突出了用户留存的重要性。

简单的说，AARRR模型的核心在于获客，而在RARRA的模型下，专注用户的留存。

RARRA模型下，如何做用户增长？（成功案例分享）

分享一个我们前不久自己做的RARRA模型下用户增长的成功案例：

我们做的是一个在线教育平台，课程的分类包括：

• 以拉新为目的的新用户免费体验课（0元）；
• 以转化为目的的低价专题课（50元以内）；
• 以盈利为目的的短期班课（999元以内）和系统课（1000-4000元）。

这样的课程显然是以拉新-留存-转化个流程进行的设计，也是现在很多在线教育平台通用的课程模式设计，其实本质上和其他行业的平台也是类似。

在RARRA的模型下，数据驱动更重要。因为如果专注获客，可以在渠道选择等方面凭借经验和主观判断来选择，但是专注留存，就必须用数据分析找出每个留存环节的差异因素，进而制定最的方案大幅度提升留存率。在在线教育平台的运营中，因为从推广到课程设计、课程质量、售前售后服务等，包含大量影响营收的因素，因此数据分析方法也相对复杂。

数据分析的第一步，也是关键点在于：构建指标体系。

对于一个平台来说，一般的数据指标都非常多，但必须确定唯一关键指标（OMTM），也是大家常说的北极星指标，作为驱动的方向。

回归商业本质，一切商业模式的终极目标当然是收入，但是收入这个指标并非北极星指标，而是决定北极星指标的上级因素。如下图所示，平台收入=有效听课用户数*客单价。因为课程的客单价有大致的市场标准，不会做太多变动。因此经过分析，我们认为直播课程运营的北极星指标是——有效听课用户数，也就是购买了课程并且有效听课的用户数量。

那么接下来，就要对北极星指标进行分解。

从指标拆解来看：

• 有效听课用户中的新用户数=外部流量导入*转化率；
• 有效听课用户中的老用户数=老用户数*续报率。

在最后分解的四个指标中，除了老用户数是直接由新用户转化率决定的之外，流量、转化率、续报率三个指标都是可以通过运营来提升和改善的。

但是由于时间和资源的限制，对于三个指标，运营策略上肯定会有侧重点和先后顺序。

一开始，我们采用的是AARRR模型，把重点放在提升流量和新用户转化率上。通过广告投放、拉新红包等大量引流，并在课程设计上做了很多设计促进新用户转化率。最后流量和转化率都提升了，但问题是，用户停留在0元免费课和低价转化课上，而续报高价课的有效用户很少，这样看似产品新增用户很多，热热闹闹，但整体的营收还是上不去。

团队分析后认为，AARRR模型可能并不适合我们。既然续课率出了问题，应该尝试采用RARRA模型，把运营重点放在留存上。

于是，数据组开始探索留存的问题点出现在哪里。

我们拉出不同维度用户数据进行对比，最后发现新用户和老用户的续课率差值竟高达53%。

也就是说，新用户进行初步低价课转化后，在从低价课到达正价课的留存续课阶段，是流失最严重的一块。

找到了最痛的点，问题其实已经解决了一半。

接下来，通过各种数据因素分析，我们判断出了影响新用户续课率的几个重点因素，分别是：用户来源、课前服务、课程质量。并且对每一个因素继续分解深挖。（标红为续课率效果最好）

• 在课程质量方面，三个细分数据指标综合可以衡量课程质量。
• 课前服务时间上，通过数据对比，我们发现课前两周进行服务的效果最好，续课率也最高。
• 用户来源上，短期班课的用户续课率远高于其他两个来源。

根据以上的数据分析，给出了运营策略指导为：

1. 教师和教研团队狠抓课程质量，改变以前主观评价模式。用出勤率、完课率和作业完成率三者综合考核教师KPI；
2. 助教团队的课程服务时间前置，从以前的课前一周和课后进行服务，改为课前两周开始进行用户服务；
3. 服务人群的重点转移到短期班课新用户上。

改进后的效果：

通过以上三个方向的运营策略调整，同样的团队，仅用了一个月的时间，就把新老用户续课率的差值从53%缩小到了9%！效果非常明显。同时平台整体收入也大幅增加，而运营成本却比以前大规模进行渠道投放大大节省了。

阶段性的成功，正是及时调整了用户增长模型，并采用系统的数据分析方法驱动用户增长。可以看出，数据驱动下，最终给出的运营策略非常简洁，但前面数据组背后付出的努力和精力是很难被看到的。这正是我们想要的结果，扎根稳且深入，但呈现的却是简洁明了的运营指令。

在网页和移动端界面中，内容和信息是否能够经过系统性、有效的整理和组织，对于内容的可用性和实用性，都是意义巨大的。而在呈现信息的时候，视觉间隔是组织信息的关键因素。它说起来并不难理解，但是在实际的运用当中，却是千变万化，今天我们来梳理一下流行的视觉间隔的方法。

什么是视觉间隔

视觉间隔是一种布局元素，它有助于将内容分隔成为清晰的分组、选项和部分。它可以让设计师更好地组织内容的视觉体验，处理信息的层级，也有助于用户理解内容，明白内容之间的关系。

视觉间隔和页面上的其他内容在一起，构成视觉层级，这是它最重要的作用。在视觉间隔的帮助之下，用户可以轻松地感知内容之间的关系，明白各个信息片段之间的关系是相似，并列，承袭，从属，还是其他。

视觉间隔的可用性也同样重要：在很多时候，有的视觉间隔元素看起来是可点击，可交互的，这在移动端界面上，是非常重要的。

视觉间隔的种类

谈到视觉间隔，我们可以从两方面来进行拆解分析：视觉间隔的外观和功能。按照视觉特征，视觉间隔有5种基本的类型：

• 线条
• 色彩
• 负空间
• 阴影/体积
• 图片

下面我们分别针对这5种类型进行说明。

线条

很长时间以来，在排版印刷领域，线条就一直是一种用来分隔内容的方法。线条的分隔功能是认可度最高的一种间隔方式，用户几乎不用思考，就能够理解和感知它，并且发挥作用。

另一方面，这种间隔方式也很容易显得过于简单，并且和应有的形态相去甚远。这也是为什么设计师在想尽办法去寻求别的视觉间隔形态。太多的线条间隔会让屏幕上的视觉干扰太多，并且带来不必要的视觉噪音。

所以，能够将线条间隔用得微妙、恰到好处、出神入化，是设计师功力的一个重要体现。

在这个网站产品页面中，使用深色的线条间隔来分割产品信息，用来组织和间隔信息内容。

在这个页面当中，线条分隔了不同的内容区块，让页面的结构更易于被扫读。

这个电商网站将不同级别的视觉内容进行了分离，借助简单的水平线将价格、CTA按钮以及承载相关信息的表单分隔到不同的区域。

负空间

负空间，也就是留白，也是最为常见的一种视觉分隔元素。留白绝不是对空间的浪费，和屏幕上其他的元素一样，它同样发挥着重要的作用，拱卫支撑着整个用户体验。负空间是最为流行的视觉分隔之一，尤其是在极简主义风格为主导的设计当中。负空间本身遵循着格式塔原理，尤其是其中「接近原理」和「相似原理」是负空间在设计中，发挥分隔作用的核心所在。合理地运用负空间，还能强化页面的呼吸感。

上面这款旅行规划 APP当中，使用留白将不同的条目分开，没有使用额外的具体视觉元素，仅仅只靠留白。

Health Blog 的列表的排版层次是基于负空间来实现的，看起来清晰又充满呼吸感。

色彩对比

高对比度的色彩，同样能够带来清晰的视觉间隔效果。在 UI 界面中高对比度的色彩有着极为明显视觉表现潜质，它们能够增强网站的信息和内容的表现力，分割区块，营造氛围。对比度是影响页面和屏幕可读性的关键因素之一。在具体的应用当中，不同的色彩会有效地分离不同的选项、条目和区域，这意味着它作为视觉分隔的作用非常强。这也是近年来分屏式设计如此流行的原因所在。

这是一套移动端菜单的概念设计，强烈的色彩对比让信息清晰可见。

即使是在这样的柔和的设计当中，色彩的对比度也发挥了相当的作用：一方面，强烈的色彩对比让CTA按钮和输入框之间有了明显的区分，另一方面，右侧的主视觉元素的背景也同样借由不同色彩的对比，做到了突出的效果。

在 GNO Blankets 这个网站当中，强烈的明暗对比将网站元素分隔成为精美而清晰的区块。

阴影和体积

阴影和体积也是一种非常常见的视觉间隔方式，通过营造在「高度」或者说高程上的视觉差异，从而达到分层的效果，而这种设计也是符合人类一直以来的认知习惯。这种方法有利于保持整个设计的平衡和易读性，另一方面，它又能保持足够的微妙和自然，不会那么引人瞩目从而让人觉得出戏或者受到干扰。

这个APP的目录页面所有元素都采用了白色的背景，而阴影让布局呈现出了纵深层次，让内容足以展现又不显突兀。

这款提供定制化花束服务的APP也采用了类似的阴影元素，让整体看起来清晰又通透。

图片

图片在 UI 界面当中，同样也是一种非常有效的视觉间隔，尤其是在包含大量文本内容的界面中。无论是博客、在线媒体网站还是其他类型的网站当中，图片的间隔作用都非常明显。无论是照片、插画、3D图形，它们作为图片都可以很好的平衡文本内容，提高内容的识别度和可读性，有效地划分层级，并且提高情感吸引力。

这个比特币网站的着陆页就使用了带有3D效果「了解更多」动态图片，图片和文本在内容和功能上都清晰地分隔开来。

在这个餐厅 APP 当中，图片作为划分内容的关键元素而存在。

按照功能划分

如果从功能的角度上来划分视觉间隔，可以根据它所处的层次来进行划分。

全出血间隔

使用线条作为全出血间隔是最为常见的，它会很跨整个屏幕布局来作为信息层级的划分。

这个画廊图库 APP 的艺术家目录当中，使用线条作为全出血间隔，来区分艺术家。

这个名为完美食谱的APP也使用了全出血间隔线来区分内容。

在这个财务APP当中，也使用了全出血间隔线来区分条目。

在这个电影APP的结帐页面当中，也使用了线条来作为全出血间隔。

嵌入式间隔

嵌入式间隔的功能是将相关性较高的内容分割开，并且它通常会和标题或者其他的特定元素保持对齐或者对应，它们通常是进行某个大区块内不同组件的分隔，或者将多个同类的元素分隔开。

这个网站当中，使用横向的短分隔线来区分表单中的参数条目。

中间分隔

这种分割线通常会置于布局的中间某处，同样是分隔相关的内容，但是通常它们在属性上不一定是一致的，但是层级近似。

在这个出售草药的电商网站的右侧，使用中间分隔线将文本和可交互的区域清晰地分隔开。

值得思考的问题

上面对于不同类型的视觉分隔方式都有描述，在此之外，还有两个问题需要注意：

• 保持微妙：视觉分隔不应该醒目、太过引人瞩目，它们不应该分散用户的注意力，它们应该支撑布局的同时，微妙而不那么抓人眼球。

• 中等频率：这和上一点是相辅相承的，过多的分隔线会变成视觉噪音，让用户浏览的时候感到疲倦。因此，应该仔细考虑使用频率，尽可能使用负空间，而不是线条。不要过度使用太多色彩，应该尽量保持整体的协调一致。

文章来源：站酷

我们通过门铃声儿得知门外有人来访，也能通过电话铃声得知正被人呼叫。短信通知也有着类似的作用，包括各类产品的消息推送。

但不同的是，消息推送的重要性随着「通知」被滥用而变得不那么重要了。它们变得不像门铃或电话铃声起到的作用性那么大，包括短信现在也大多是垃圾信息。

而且，通知越来越多地通过各种方式去触达用户。比如消息未读的红点提示，或者显示消息的数字统计，以及手机使用过程中的顶部提示与声音或震动的提醒，等等。

但我们还是无法抑制点击图标的冲动，这仅仅是因为它具有未读的计数或红点提示，即使我们已经知道当中的内容并不重要。

而我要说的是，当通知内容变得次要且被滥用之后，它仿佛成了一种违背设计原则的功能 —— 中断用户当前行为。因为它打破了用户与产品之间的层级关系，破局至产品之外来吸引用户的注意力，这是一个非常打扰的行为。如果我在看书，突然收到一条并不重要的消息，那我一定会非常反感。

所以，为了不被「红点」支配，以及不让通知所打扰，我会把手机里所有产品的消息推送都给关了。

但是，以上内容并不能说明通知的无用论。同样有许多用户还是沉迷于通知的使用上，它所控制的是用户对于某个产品的控制欲，担心错过某条消息，就好像我在豆瓣写了篇随笔，就想看别人给我点赞评论的消息，但我又不可能一直盯着，所以通知这时候就起到了一个很好的作用。

以至于对于优秀的产品人或设计师，包括运营来说，利用好通知，就能掌握用户心理，巧妙的将用户留在产品中。它们甚至有助于与打算放弃产品的用户建立联系并促进互动。

那么，我们应该如何更合理的设计通知呢？下面我们通过「通知的组成部分」以及「通知的使用类型与规则」来详细做一次拆解。

通知的组成部分

关于通知的简单定义：它是一种吸引用户注意的功能模式，让用户获悉新事件的信息动态。产品将其发送给用户并与用户产生交流。

因此从这个定义中我们可以知道，通知有两种形式，分别是被动只读型和操作反馈型。

被动只读型，是指该信息可读，但不可进行操作；操作反馈型，是指用户可对该通知进行操作，如某宝订单支付成功后的地址信息确认通知。

所以在梳理组件的时候也要注意掉这个差异。

1. 消息中心

这里的消息中心，是一个信息汇总中心，但并不一定是信息来源。意思是，信息来源可能是有很多用户在你的文章下面点赞了，而这个点赞行为被汇总到了消息中心，再用消息中心指引作者去到文章页面查看具体详情。

所以它是一个汇总表。但也有可能它就是信息来源点，比如一些系统通知，告知要升级，因为它没有其他功能可承载，所以只会在消息中心里出现。

或者类比 iOS 系统的通知中心，如果通知是 App 推送的，那么它会指引用户进入某个 App；如果通知是系统行为，如勿扰模式，「6:00 前来电和通知将会静音」这个通知，是只可在通知中心进行操作的。想要更改，就需要手动打开设置。

2. 通知指示符

它可以是点，也可以是计数器，只要表明目前消息中心有新的信息就可以。我个人一直觉得这就是让我们多数人养成强迫症的罪魁祸首。

3. 信息标题

它主要是指该信息来自于谁或属于什么子类型，比如用户互动点赞消息，评论消息，系统消息等等。用户可以通过标题来获悉该信息类型，再通过内容摘要来判断内容是否重要。

当然，这里的摘要如果过长，就需要省略处理，引导用户进入消息源或消息中心。

4. 推送时间

推送时间是一个看起来简单，实际上也好像不是很复杂的逻辑。只要说明该通知的发送时间即可，但是需要注意的是时间段问题。比如几分钟前，几小时前，几天前，这里的逻辑是按照时间推进规则持续增加来告知用户该消息的推送时间节点的。也就是过得越久，时间概念就越大。

5. 通知图标

上面讲到消息类型，我们也经常会在各类产品中发现不同通知的类型会汇总在各自的类型下。包括用户所接收到的信息，通常也会告知用户该信息属于什么类型。有时候，标题可能会更细，但是用户通过图标可以判断该信息属于什么类型，甚至都不需要仔细查看标题与内容。

但是，并不是所有产品的信息都可以通过图标来判断，有时候图标只是一个大方向，如果手机锁屏，相对于用户来说，这条通知只是告诉用户该信息是由什么产品推送，而并不能指向至该产品的什么类型的信息。所以在使用的过程中，同样需要根据业务的场景，谨慎地选择图标。

6. 阅读指示器

它就像是上面提到的红点，这里指的是进入 App 的消息中心之后，所显示的内容。

7. 操作行为

这里的操作行为分两种，分别是 App 外与 App 内，它们之间的操作逻辑是不同的。iOS 系统通知的清除操作，只是在系统的通知中心将该信息清除，进入具体 App 后，这条消息还是会存在。而在 App 内删除该条信息，则该信息才会真正消失。

所以从上面可以看到，通知推送，是有两大类别的，分别是 App 外与 App 内，它们之间的逻辑关系与展示形式会有所差异，需要根据具体情况进行设计分析。

8. 小结

对上面的内容进行总结，可以得到这样一幅画像：

大部分系统或产品的通知组成，都可以通过此图概括，唯一不同的是，它们会随着不同的业务而发生变化。

比如豆瓣的推送消息告知用户近期有新的电影上映，那么通知来源要么是电影模块的功能详情页，要么是通知中心的系统消息；而通知类型就是内容更新；详情则根据具体内容来组合排列；最后送达至用户。

而其中的差别就是，如果是通知中心推送的，用户点击之后则是进入通知中心列表。如果是具体功能推送的，那么用户点击进入的就是具体功能页面。如下图所示：

从这里可以看出，通知是有具体模式的。

一旦确定了通知的主要目标，以及想要解决的问题，包括它们如何对业务产生作用以及对用户形成吸引力，就可以确定通知的具体样式了。

在这一节里只要知道通知的组成部分与通知模式如何指引用户进入 App 即可。后面我来带大家理一遍逻辑，以及在设计通知时要注意哪些问题。

通知的使用方法

聊完上面的内容之后，我相信大家对通知的组成与使用模式已经有了全新的认识，但也仅此而已，我们还是不知道一个优秀的通知功能应该从哪些方面去提升用户体验。这里面所包含的不止是表象，还有内在的规则逻辑。所以从这一节开始，我们仔细来梳理一遍。

从我们平时使用到的，以及上文提到的，可以大概先梳理出几类常见的通知类型。

1. 用户信息类通知

这种类型的通知有很多，比如微信消息发送，知乎私信，手机短信等等，它们主要由用户主动生成发送至其他用户被动接收，作用就是促进用户与用户之间的互动关系，以提升用户使用产品的频率与时长。

这种通知，可给予用户操作也可不给予操作，不操作就是读取，并回复；操作就是可对该用户的信息进行屏蔽、已读、删除等设置。

这是最常见的通知类型，在多数社交产品与有社交特性的产品里都能看到。

说明

之所以给予用户信息的操作行为，是因为用户信息可分为感兴趣的与不感兴趣的，它主要取决于人。不感兴趣的人，频繁的发送信息，会影响用户对产品的好感度，毕竟有很多用户消息并不是用户想要接收的，所以在社交产品里，用户可删除好友，或拉黑好友；在有社交属性的产品里，用户可拉黑账户，以达到不被骚扰的诉求。

如果没有到达删除好友的程度，也可对该好友的信息进行屏蔽，甚至对该好友信息做已读而实际上未读的处理；或者对重要信息做未读而实际上已读的处理。

当然，用户还能对群消息做更复杂的设置。这就是产品对这类通知的一种优化方式。

2. 系统推送类通知

我们经常会在手机上收到一种系统类通知，或者在 App 中也会收到类似的系统通知。大多是关于系统升级，密码更新等。

这类通知多数是用户被动接收，且对于系统与用户来说是较为重要的。当然也有不重要的，比如 App 更新说明的通知，告知用户新功能有什么变化，或系统更新了什么等等。

对于这类通知，用户大多无法进行设置，因为它们比较强制，没有可以商量的余地，类似于告知用户：我们有新的消息，比较重要，你来看看，即使你不打算更新或执行也来看下。

说明

系统类通知，通常来说较为被动，要么强制用户执行操作，要么就是提醒用户系统近期做了更新，或者是一些并不重要的信息提示，比如勿扰模式。

强制类系统通知不能频繁，否则会给用户造成控制欲反制的副作用。类似于本身用户使用产品需要对产品享有控制权，现在反而被产品控制了。这是不行的。

3. 通用推送类通知

这类通知就是第一节中提到的那些，比如点赞/评论，内容更新等等，这类通知如果是忠实用户，那么或许不会反感它的频率，当然还是需要适当。但如果是普通用户，那么造成的影响就是直接关闭该 App 的所有通知。

我们现在的很多人，之所以开始反感通知的主要原因，就是这类通知所造成的。内容不断更新，随着时间的推移，每天推送多条对于该用户来说无用的通知。包括只适合一些符合条件的用户参与的活动通知也推送给所有人，那么用户就会逐渐对这类产品的通知失去兴趣，造成无法弥补的损失。

即便像某团一样，经常弹出开启通知的弹框，也依然无法召唤回用户。这就是很典型的下场。

说明

通用型通知，如果是业务很复杂的产品，就必须建立通知推送的功能模块，给予用户进行选择接受哪类信息的权力。允许用户进行相应的设置，如活动类推送可拒绝接收。

在很多产品中都已经置入这样的推送模块设置，如下图。

这类内容就是针对于产品的具体业务进行细分。

比如兴趣精选，私信消息等做好类别划分。用户可对自己感兴趣的通知做选择性的推送接收。

另外就是，在相同账户的不同设备之间，推送应该同步推送与被处理。不能这边推送了，那边没推送，或者这边处理了，那边没被处理。

4. 智能推送类通知

不知道大家是否有印象，在使用如大众点评等产品时，只要你切换了城市，产品就会推送通知告知用户该城市有哪些值得游玩的景点与品尝的美食。

虽然这类通知还算不上多少智能，但至少在用户群体中是存在这类诉求的。而这类诉求有时候并不能主动感知，因为用户可能会想不起来通过哪类产品来查找附近美食。当这么一条通知出现的时候，正好解决了用户的问题，反而提升了用户对于产品的好感度。

现在很多产品的通知都逐渐智能化，不会像以前那样，三更半夜发来一条无关紧要的通知。而出现这类问题的主要原因还是在于产品、设计、运营，在这方面没有下过功夫，只将通知作为一种普通的工具来使用。导致用户开始排斥通知，将其强制关闭。之后，就很难再让用户开启了。同理心效应，当做这类功能的时候，可以回想一下自己是如何被其他产品打扰的。

随着大数据的发展，我相信未来的通知系统会更加全面，且能做到千人千面的模式，不过在此之前，各位产品设计师，还需要对通知下一番功夫才是。

5. 小结

我们还可以继续举例说明，但是基本大同小异，所以到这里为止，我再对上面的内容做一次总结，梳理出一个好的通知应该是如何设计的。

干扰最小化：通知本身具有强制性和干扰性。它的目的是把用户的注意力吸引到产品上来，所以要认真思考发送通知的内容、时间、频率；不要提醒用户当前屏幕上已经处于展示状态的内容；也不要推送与用户无关的系统信息。

跨设备：当用户读过了某条信息，这条信息应该不再做展示。同理，用户也应该能够在其它更适合接收消息的设备上找到已读信息。用户通知应该在所有设备上进行同步。

允许设置：允许用户在「设置」中禁止或调整通知的形式。如案例一，通过选择推送内容，来影响接收推送的频率。案例二，可选消息提醒的形式是红点+数字，或仅是红点。

时效性：良好的通知应尽可能实时推送。而不是等这件事情都过去很久了，才推送给用户知道。

支持汇总：把同类型的通知合并为一条，并显示信息未读数量。也可以考虑一键展开通知，显示信息详情。

可操作性：把通知和操作结合在一起，让用户不需要打开首页就能对特定通知进行常规操作。操作应该清晰明了，且仅在未重复默认操作时提供。同时操作应该是有意义、实时、和内容对应的，并且能让用户完成某个任务。如案例一，可以在不打开邮件的情况下，直接对通知进行管理、查看和清除。案例二中的操作针对的是未读邮件，可便捷地在通知板面进行回复、删除、标为已读或垃圾邮件。

总结

对本篇文章的拓展总结：

• 通知具有召唤属性，但是频率过多就会变成打扰，所以要注意通知的频率与内容重要性；
• 设计师或产品经理应该将通知的内容分类梳理出来，以便维护或新增必要需求可能需要用到的推送信息。
• 通知一般为两种类型，一类是推送只读型，一类是操作反馈型；设计师需根据不同类型的通知做好对应的设计，针对具体问题具体分析；
• 想要利用好「通知」，也需要对业务有详细的了解，再代入本文所列举的注意点，就可以设计出一个体验更佳的通知模式。
• 通知规则不会脱离本篇文章的范围，所以只要详细研读，必会有所收获。

文章来源：站酷

一年一度，天猫双十一全球狂欢节，如约而至！

从2015年开始，我们每年都会在双十一期间，将双十一品牌设计的完整思路分享给大家，这已经成为双十一设计团队的传统。不为别的，各位同仁辛苦一年，想跟大家就着新鲜出炉的设计唠唠嗑。

每逢双十一logo出街，都会有热心的朋友帮我们解读，也有人问我们为啥不搞个官方发布？各位朋友，您现在看到的就是官方发布的内容，它不只有logo，而是从头到尾一个完整的故事。

△ 2019天猫双十一主logo

△ 2019天猫双十一主logo多语言版本

今年是双十一的第十一年，当我们接到这个任务的时候，就有机灵的同学提议：「我们用6个1吧，111111，61儿童节！」、「让我们回归购物的纯真快乐！」。

「哈哈哈哈哈哈…」魔性的笑声在整个会议室回荡，看来往年挠破头也解不开的难题，就这么解开了？故事当然不会这么简单，我们还没有往这个方向尝试就被否了。

• 其一，双十一是一个深入人心的认知，这四个一已经成为了超级符号，是我们宝贵的品牌资产，而六个一不但不能帮我们强化认知价值，反而会增加认知成本。
• 其二，六个一是一个纯视觉的创意，他很难支撑起我们要传达的消费者价值，也很难建立起情感连接。

我们应该从哪儿入手？

回归到设计的本质来思考，我们认为，设计的本质是将一个想法或者观点巧妙的表达给目标对象，表达的过程中，形式只是手段，重点在于我们要表达什么。

我们集合了阿里各事业部的设计师代表，让大家回归到一个普通消费者的状态，一起聊一聊各自的双十一故事，把这些故事提炼出来，就是消费者对于双十一普遍真实的认知。在全年最便宜的一天，无论凑热闹也好，跟风也好，贪便宜也好，好像不买点什么总感觉错过了什么。在这一天，「购物」毫无疑问成为头等重要的事情。

△ 阿里巴巴经济体设计师共创

那么我们要对消费者表达「购物」吗，讲我们多么便宜，货品多么丰富，多么物美价廉？这些是消费者早就形成的认知，是我们不用表达大家都知道的事，它看起来并不是一个想法和观点。

还是购物，但肯定不是教大家怎么购物，作为消费者，购物能给我们带来什么？

有人说，购物能让我们吃饱穿暖，让我们出行方便，让我们安居无忧。

如果这些你都有，你为什么还要购物？

因为每个人都向往更好的生活！

为了更好的生活，我们需要通过物品的改善带来心理的满足感。当然也有人会会说，满足感也可以通过其他的方式获取，比如关爱他人、亲近自然、学习、修行、冥想等等，我们非常认同，更好的生活当然不仅仅只有购物。但我们当下探讨的范畴仅仅只是「购物」以及「购物」能带来的满足感，对这种满足感的期待，是每一个消费行为的动因。比如你想要买一件新衣服的时候，其实你已经在期待穿上这件新衣服的样子，你在挑选一件礼物的时候，已经在期待他人收到这件礼物时的反应……

双十一，全年最便宜的一天，无疑让你的期待，变得「更值得」期待，所以「更值得」让大家买得更多。

但，这些洞察还只是帮我们理清了消费行为背后的共性规律，实际上，细分到每个消费者，因为身份角色生活方式的不同，动因各自不同，还不能简单的用向往更好的生活来概括，因为它太抽象，听上去对，但每个消费者更关心的是我的需求是不是被满足，而对于双十一来讲，我们就是要打造属于每一人的双十一，而不仅仅只是购物，这样它才具有节日的文化属性。

所以，我们开始探寻真实的消费者故事，寻找那些通过物品让生活变得更好的故事，这些真实的故事，给了我们很大的感触。我们发现，购物行为下，其实还隐藏了每一个消费者内心更深层的需求，它是一个个藏在心底的愿望，正是这些不同人的愿望，成就了每一个平凡人鲜活的人生。我们想要帮助他们实现自己的愿望。在双十一当天，帮助每个消费者「愿望11实现」！这才是双十一更应该满足的消费者需求，它不仅仅是购物，而是通过物品价值上升到情感价值，这样的品牌，才真正能够让人感受到温度。

在倾听这些故事的时候，我们的阿里女神被感动了，她主动要求帮我们写一首歌，她想把她的感动通过音乐的方式记录下来，配合我们精选出来的11个故事，讲给大家听。

△ 双十一品牌设计概念篇mv

「logo出来了？」低沉而沙哑的声音，把我们从自我陶醉中唤醒，我们找到了想要表达什么，但和怎么表达之间还隔着上百个logo方案。

于是，我们开始了一轮又一轮的打磨，打磨的的重点放在了如何表达「愿望11实现」这一主题，这个过程中，有两个大方向上的分歧：

一个大方向是表现「愿望」，因为它比较有画面感，也比较容易表达。

另一个大方向是表现「实现」，因为它是对结果的描述，更符合消费者对结果的预期。

在纠结挣扎过后，我们选择了把两个方向融合，剧情貌似又回到了熟悉的设计故事，「把这两个方案融合一下！」我相信做设计的朋友，一定反复听过这句话，没听过的朋友，那说明你做设计还不久，我保证在你今后的职业生涯里，这句话一定会反复出现。（一个会心的微笑）

融合说起来容易，这么抽象的文字怎么转换成图形表达，同时还要和猫头+11.11融合，为什么要和猫头+11.11融合呢，因为这是我们重要的品牌形象资产，从2015年开始，猫头+11.11的组合就固定下来了，这意味着logo的80%的主体已经固定，我们的难点就在于在这20%的区域里，如何既要表达主题，还能做出和往年不一样的感觉。我敢向你保证，双十一的logo是所有logo里最难的，没有之一，至少是我十几年职业生涯里最硬的茬。

「愿望、实现、猫头、11.11」这几个词反复在脑海里萦绕，经验告诉我们，当面对如此复杂的局面，我们应该从里面跳出来，换个视角看问题，换什么视角？当然还是再次回到消费者视角，消费者愿望实现时是一种什么样的状态？是愿望实现时的满足？好像还差点意思，愿望平时也能实现，和在双十一实现愿望有什么不同？

我们认为，它应该是超越你期待的表达，从愿望实现时的满足，升级到愿望实现时的惊喜！这才是狂欢节该有的味道。当然，惊喜也有很多种它还不够有体感，如何找准惊喜体感？

答案是感同身受。于是我们开始了场景模拟，模拟消费者逛双十一的场景。

当我们来到双十一的时候：「咦！今年好像真的不一样！」

继续探索的时候：「呀！找了好久的idou同款原来在这里！」

准备下单的时候：「喔！真的很便宜！」

收到快递的时候：「哇！！！！」

听上去有点夸张，但这确实是我们想要营造给消费者的惊喜，当人感到超越期待的惊喜时，会不自觉的放大瞳孔、张开嘴巴脱口而出。这是人类共通的体感，是不用解释就有的共鸣。这让我们瞬间被点亮了，「惊喜到脱口而出！」我们一下子找到了核心创意。

通过反复尝试，我们发现气泡形的表达，不仅能成为承载所有消费者愿望的想法框，同时也能成为表达愿望实现时惊喜到脱口而出的对话框，把这个气泡形和猫头+11.11结合，这就是我们今年双十一主logo的原由，这个logo和以往双十一的logo最大的不同在于，它更像是一个容器，容纳不同人不同的个性化表达。它一改之前一直端着的状态，以一种更加亲民，更加个人化的方式呈现给大家。

△ 2019天猫双十一品牌logo演绎视频

当然，作为容器，我们还要把核心创意延展到线上线下各个场景。

△ 双十一定制礼盒

△ 走向全球的双十一

过去几年，我们向大家介绍过天猫双11的主风格的来龙去脉，一定会在创新的基础上，保持一贯的传承。所以今年波普艺术的主基调还是会延续下去，问题又回到了我们如何在波普艺术这个大的基调下面，通过老元素的新组合，创造出全新的视觉感受。相比符号，视觉风格更容易表现「惊喜到脱口而出！」这个idea，它可以通过形色质构全方位的表达。

当一个人「惊喜到脱口而出！」的时候，快乐的气场围绕在他周围，这些无形的从中心向四周放散的表现，看上去很像是圆形声波，同时它还能根据不同人的状态做动态变化，这就形成了一种设计语言，一种能用固定的形式做出千变万化的效果的语言。

当我们把它和波普艺术的主基调结合的时候，就形成了今年双十一独特的视觉语言，再通过形色质构的拆解，应用到各个场景。

△ 装置应用

△ 天猫双十一发布会现场应用

△ 天猫双十一开幕盛典现场应用

文章来源：优设

先问一个问题：怎么样衡量一个设计好与不好？工作中实践越多次，越会发现华丽的设计稿并不是体现设计师专业能力的唯一标准。普通设计师和高级设计师区别在于，设计方案是否具备完整设计思路；设计对于业务有没有真正的价值体现；以及设计方案的推动落地的完整性到底有多少。设计越往后走，越考验产品思维，设计思维，以及设计推动能力。这是产品设计师需要关注的核心三要素。

设计师在工作中接到设计需求会不自觉的第一时间想着如何去进行视觉表达，视觉表达确实非常重要，也是公司对于设计师的核心价值的定位之一，但视觉表达只是其中设计专业本职工作中的一个环节。设计师还要应该能够站在产品、设计、技术等不同维度去思考设计方案的可行性。产品打磨-视觉呈现-落地执行，在这三个核心点里面设计师分别有不同的定位和价值所在。 

  一. 产品“双标”满足   

产品打磨包含产品规划，内容组成，界面布局，交互梳理等等…所有环节的工作是为了符合产品最终的目标。产品所有的能力会核心围绕两个点：1商业变现 2用户需求满足。这两个目标在产品执行的环节有时候会有一些冲突，在产品打磨阶段设计师通过怎样的方式，做到既满足产品商业目标又满足用户体验需求？可以按照以下几个步骤进行分析寻求切入点： 

这里用腾讯动漫付费模块举例说明： 项目背景是腾讯动漫产品要做付费体系升级设计，接到需求先有由产品源头一步步深入，逐步展开设计方案的规划。 

 01 产品目标确认  

通过对项目背景的解读和产品方案的深入了解，以及总结当前存在的一些问题，可以明确得到项目中产品核心目是什么。付费升级核心原因是付费转化低，用户付费意愿不够强烈。此次升级的核心目标是促进内容消费，提升付费率。 

 02 分析用户路径  

确认目标之后从哪个模块儿开始进行首要需要考虑的。对于现有现有功能的升级，建议核心从产品本身着手，可以根据用户行为分析，获取用户常规使用路径，找到用户使用场景下的核心目的，从而去挖掘用户在付费路径下的诉求点，根据诉求点找到付费升级的触点。这里我们罗列了用户阅读产品的路径。 

 03 观察用户核心需求是否被满足 

 用户在每个场景下都会有“痛点”和“痒点”。比如在阅读前，核心目是想快点看到漫画内容；阅读过程中，想要及时宣泄对漫画的故事情节的感受；阅读后，希望找到更多相关内容或者能够和内容有更多的互动。目前产品在这三个关键的路径节点都存在一些问题，阅读前对于付费缺乏正向引导，阅读过程中互相行为较少，阅读后没有更多延展内容可供消费等。 

 04 洞察设计切入点  

根据用户在阅读 “前 中 后” 关键路径的节点的不同情绪反馈，我们可以做出找到相应情感满足切入点，并且制定解决方案 

 05 制定设计方案  

将之前找到的设计情感切入点用交互和视觉的形式呈现出来，尽可能完整的表达清晰。下面展示是关于付费升级优化的完整视频DEMO。整个方案采用趣味情感化形式为核心设计思路，逐步去引导用户付费。让用户在趣味互动中完成产品的商业转化目标。 

https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html

 二. 设计呈现的“差异化”   

视觉呈现是设计师们都比较擅长的工作，但不同专业高度要求下方案最终呈现出的效果是完全不一样的。好的设计方案，需要在设计上做出明显的“差异化”，这里的差异化是指要区别于常规输出一般的水平。差异化的可以从多个点入手：

优质的设计美感：

美感是作为设计师首先需要培养的技能之一，也是在后续职业生涯的一直需要用到的技能。设计师被神职化的很大一个原因就是因为设计师的美感比一般人要好，有懂得欣赏美、鉴别美、以及创造美的能力。单一从视觉层面，设计作品是合格品还是精品，最终取决于画面的精美程度。项目不分大小，再小的一个项目都可以做出精致品质，这也是体现设计师专业度的核心衡量之一。

完整设计思路：

设计方案的完整性也能够很好的设计师专业度的差异化，几张图的设计稿和一个有完整设计思路的设计方案在品质上自然是明显差别的。设计师不光需要将设计呈现出来，更需要有严谨的设计思路并且表达出来让受众到你的设计想法。设计前期分析、中期执行、后期落地以及迭代优化，能够让设计师有意识的锻炼和提升自己的设计思维，对于设计师能力提升有必然的帮助。 

独特创意：

设计差异化呈现上，创意是一个非常好的切入点。行业大趋势的前提下，现在同类产品越来越趋于同质化，受众使用产品的时候都会有一些常规认知，关于功能的、交互操作的、内容组成的等等，淘宝和京东、大众和美团、甚至QQ音乐和网易音乐在产品使用体验上都有高度重合的地方，这些已经在用户心智中形成习以为常的认知感受。如果能够在用户的常规认知里，用创意手法呈现出超出他们预期的内容使其惊喜，产品设计就会有明显差异化体现。 

善用情感化：

具备美感的设计能让作品看起来有高级感，但更为高级且有效的是能够引起用户情感共鸣的设计。设计是主观的，对于设计每个人都有自己的想法，也正是因为主观的设计感受，能让设计在情感化打造方面可以有很多的尝试方向。能够引起受众主观情感上的共鸣和认同的设计，会形成产品的核心记忆点之一。设计师对于情感化设计往往会有一些误区，认为图形可爱，色彩羡慕，动效流畅且能够形成一套视觉体系，就能够算情感设计。真正的情感设计是需要从用户角度出发，挖掘用户的认知领域和喜欢，从而去进行符合用户情感诉求的呈现。 

三. 方案推动的效能管理 

设计方案输出只是整个产品生产流程中的一个核心环节，产品上线后体验如何最终取决于落地实现的程度。在方案落地支持过程中，效率协调和实现能力是保证设计方案贯彻一致执行的关键因素：

 协作  

产品设计师工作协调分为内部协作和外部协作。内部协作即设计师之间的沟通协同，主要内容是如何保持设计语言一致性，除了制定设计规范，还可以建立公共控件库，线上调用。控件库能够使设计师协作无学习成本，设计师输出设计稿效率也能够大大提升，同时保一致性。

外部协作主要是和下游的技术同事直接的工作对接，设计方案的交接方式以及开发获取信息的效率很关键。在开发接收设计方案的时候，尽能力降低获取成本以及理解成本。比如设计稿的标注，在标注上设计师一般会花很长时间，开发也需要逐步查看，偶尔还会有标注遗漏的地方。我们团队会直接采用插件，设计稿及时同步，并且开发可以自己随时查看每个元素的标注信息，便捷。

这里推荐两款协调软件：一款是InVision可以在sketch里进行控件协同调用，所有想用的元素直接源文件调用，不需要再问同事要源文件！另一款是Zeplin技术同学可以直接查看元素属性以及间距等，设计师解放双手不再需要标注！

官网链接： 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/

实现能力   

专业技术之间的壁垒，也会成为设计方案实现的阻力。同样的界面，设计人员用设计软件实现，技术人员用逻辑代码实现，实现的方式和成本存在很大的差异性，所以往往设计师认为很简单的需求在开发层面的确非常难实现。当然，不是所有需求都是无解的，设计师在技术实现层面还是可以做一些事情：

01 方案前置沟通

设计一个新的功能的时候，如果有非常规的设计方案，可以提前和技术人员沟通实现的难易程度，让技术人员有前期预判和预演的时间。并且，可以将设计做成简易DEMO方便技术人员快速理解，避免双方存在信息不对等的情况。

02 搭建开发控件库

开发控件库和设计规范一样，是最基础但应用最为频繁的模块儿。开发控件库可以将最基础的元素形成固有规范，所有开发实现都用同一套规范，以确保实现的高度一致性，同时也能够提升实现效率和设计还原。设计可以辅助开发一起制定开发控件库，确保控件库和设计规格的一致性。

03 寻求技术语言共通性

尽量将设计方案转化为技术能够理解和复用的形式进行对接。除了静态设计稿的标注，设计和技术实现最大的难点在于动态交互的实现上，对于动态设计，将设计方案转换为代码文件交付给技术实现，这样能确保功能的正常实现同时减少后期设计还原性的偏差。

以上初步总结的关于产品设计师在设计过程中从前期产品规划到中期设计执行再到后期开发落地应该注意的一些核心点：

第一条，设计方案既要满足产品目标又同时要兼顾用户体验；

第二条，优秀的设计师，会保持设计方案的“差异化”；

第三条，设计师职责除了确保设计方案完整性，更重要的是推动设计方案的完整落地。

在产品设计过程中，设计师需要关注还有很多关键点，这里也欢迎大家一起补充交流，正是这些关键点，将设计师的思维逐步打开，使其成为一个具有全链路思维的设计人才。 

文章来源：UI中国