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

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

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

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

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

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

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

一、网络异常

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. 怎么进行场景化设计？

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

转自：站酷-呜呜吉良斯基

前言

为什么要重视布局

目前主流布局趋势是怎样的

-

偏移与叠加网格布局

-

上图文字与图片交叠错落排版，图片与图片之间也是网格交错

上面移动端设计，设计师通过留出左侧空网格，整体内容往右侧偏移，导航相对内容来说做了差异化设计，并未进行偏移设计（看我上图红框部分）  。这样做的目的是因为，我们点击汉堡菜单的时候，本来整体就要往右侧移动，如果再继续移动，那么内容会显示不下，同时视觉效果并没有很好

半偏移网格布局，界面中并非所有的内容都偏移底层网格，而是部分模块这样去做，原因是内容多的情况下。

分屏布局

分屏布局，顾名思义就是将屏幕进行几种不同区域的划分，然后内容分布排版在里面，分屏布局解决的主要问题将屏幕大的设备进行合理划分空间设计，一般是在横屏运用比较多，比如PAD，或者WEB或者车机中控屏，下面一起看下分屏布局在实际设计中的具体表现

上图界面设计采用了1/2分屏布局，将图片与内容文字进行区域划分，下图是将主文案摆放在分割区域中间（文字较少情况下可以这样去做）增强形式感。当然分屏布局可以有多重形式，列如，2/3,1/3，3/4等等，可以根据内容进行选择合适分屏

Z轴视差布局

-

地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/

内容重叠布局

地址:https://www.stereo.ca/project/clinique-dentaire-gagnon/

卡片布局

卡片布局还有一个最大好处就是，他能够封装内容，使得画面布局整洁，所有内容都往容器里面放，信息之间保持很好的区分

全封闭卡片布局，内容之间通过卡片封装，中间无空隙

自由式网格布局

如何运用这些布局进行创新设计

-

上面利用乐高积木思维重新对布局进行拆解组合，当然一切的布局都是基于当前你的主旨，你的产品内容，找到合适布局，然后去研究他，并且拆解，然后重新搭建属于自己产品一套布局规则

总结

-

全文向大家介绍5种布局思路，当然其实不止这5种，但是其他布局相对来说会运用少一些，这些布局我们可以加以学习利用，可以运用在任何设计中去，当然运用的时候，一定要清晰知道自己产品的主旨目标，用户群体，合理运用布局，做出创新设计！

转自：站酷-设计TNT 

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

从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，它可以通过形色质构全方位的表达。

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

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

△ 装置应用

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

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

文章来源：优设

作为交互设计师，你一定经常苦恼你的界面该怎么达到「简约而不简单」，该通过什么样的形式、功能、才能让用户获取「更好的体验」。

真正的简单并不意味着最少化，朴素的设计仍然具有自身的特征和个性。简单的特征和个性应该是源自你使用的方式，所要表现的产品，以及用户执行的任务。交互式设计 4 策略告诉你如何通过简化设计获得更好的用户体验。

交互式设计的简约 4 策略：删除、组织、隐藏、转移。

上述4策略既适用于简化功能，也适用于简化内容。而且无论项目大小，是整个网站还是一个页面，这4个策略都同样适用。你可以根据要解决的问题从中选择正确的策略。

删除

删除杂乱的特性可以让设计师专注于把有限的重要问题解决好，而且也有助于用户心无旁骛的完成自己的目标。

组织

组织往往是简化设计最快捷的方式。

隐藏

隐藏部分功能是一种低成本的简约方案，但是，哪些功能该隐藏呢？

转移

把合适的功能转移到合适的设备上。

用一句话来总结交互式 4 策略：

删除不必要的，组织要提供的，隐藏非核心的，转移可转移的。

运用恰当了一定可以使你的设计更出彩。

对于以上内容想了解更详细的读者可以阅读

前言

《以人为中心的设计指南》是我翻译的第二本完整的设计书籍。在我开始广泛的阅览国外优秀的设计团队、设计公司的沉淀输出后，收获颇丰。我意识到很多年轻的设计师尤其是传统意义上的UI，苦于进阶无门，很难系统的去学习设计理论、设计方法以及设计流程，无法系统化梳理设计知识，就只能在有限的设计范围内修修补补，就像你在局限于视觉时没有意识到体验，在忠实于体验时又忽略了商业，总是无法全面的考虑和输出设计方案，这是源于没有系统化的学习。

国外的人机交互、体验设计领域的确发展较早，有着大量的理论和方法的沉淀，国内各大设计团队虽然也开始持续输出一些本土化的内容，但仍然摆脱不了系统化这个问题。因此我从今年开始，就有了翻译国外设计论论体系及对应的成熟可用的设计方法的冲动。如果你读了我往期的文章，你应该了解到了设计思维的五个步骤、了解了用户体验的七要素、可用性方法以及众多可操作的实践方法。

我翻译的内容既有各大设计机构无私分享的内容，也有我自费购买的设计课程，我希望为大家带来一些真正持续影响设计生涯的内容，要实现这一目标，软件技法做不到，只有思维方法、系统化知识可以做到。

本次翻译的《以人为中心的设计指南》是IDEO出产的一本设计工具书，包括具体的设计思路，规范的设计流程，以及各种关键设计原则。它将结合实例，教授设计师如何解决问题，如何以人为本的解决复杂问题。

本书内容量较大，共有四大模块，及73个小章节，我将以连载的形式发布译文，完整翻译后，为大家排版一份PDF格式的电子书，分享给读者，也分享给国内的所有设计师，每个人都可以尽一份力让国内的涉及环境变得更好。

本篇文章主要翻译介绍部分和第一模块的7个小节（标红部分），阐述了IDEO团队在设计过程中一直坚守的心态。下面开始正文。

介绍

以人为中心的设计师意味着什么？
拥抱以人为本的设计意味着相信所有的问题，即使是那些看似棘手的问题，比如贫困、性别平等。此外，这意味着相信每天面对这些问题的人是掌握答案的人。以人为本的设计为任何类型的问题解决者提供了与社区与用户一起设计的机会，深入了解我们所服务的人，构思各种想法，并根据人们的实际需求创造创新性的解决方案。
在IDEO，我们几十年来一直使用以人为中心的设计来创造产品、服务、体验和社会企业，这些产品、服务、体验和企业之所以被采纳和接受，是因为我们把人们的生活和诉求放在核心位置。社会各个领域的创新时机已经成熟，我们已经一次次证明我们的方法行之有效。作为一名以人为中心的设计师，你要相信，只要你坚持从别人身上学到的东西，你的团队就能找到世界需要的新解决方案。有了这份实地指南，你现在就拥有了将这种信念变为现实所需的工具。

接受不同的心态
以人为中心的设计师不同于其他的问题解决者——我们修修补补，不断测试，我们一开始就失败了，而且经常失败，我们花了大量的时间但可能仍然不知道问题的答案。然而，我们勇往直前。我们是乐观主义者和创造者，是实验者和学习者，我们感同身受，不断重复，我们在意想不到的地方寻找灵感。我们相信解决方案就在那里。
通过专注于我们的目标群体并提出正确的问题，我们将一起达成目标。我们会想出很多点子，有些行得通，有些行不通。我们把我们的想法具体化，这样我们就可以进行测试。

然后我们提炼它们。最终，我们的方法等同于疯狂的创造力，不断地推动创新并给予我们自信，它将我们引向我们开始时从未意识到的解决方案。现在，我们要分享我们的设计哲学和心态。
让我们与众不同的七种心态:同理心、乐观、迭代、创造自信、实践、接受不确定性，以及从失败中学习。

理解的过程
以人为中心的设计并不是一个完美的线性过程，每个项目都有自己的特点，但无论你面临什么样的项目，你都将经历三个主要阶段:灵感、构思和实现。通过依次采取这三个阶段，你将与你为之设计的用户产生深刻的理解;你会弄清楚如何将你学到的东西变成设计新解决方案的机会；在最终将你的产品正式上线之前，你会建立并测试你的想法。在IDEO，我们使用以人为中心的设计来处理大量的设计挑战，尽管我们的项目涵盖社会企业到传播活动到医疗设备各个领域，但这种创造性解决问题的特殊方法每次都能帮助我们度过难关。

灵感
在这个阶段，你将学习如何更好地理解别人。你会观察他们的生活，听到他们的诉求和愿望，并逐渐加深你对这个设计挑战的理解。
构思
在这里，你将理解你所了解的一切，产生大量的想法，确定设计的机会，并测试和改进您的解决方案。
实现
现在是你把你的解决方案带到现实中的机会。你将弄清楚如何把你的想法推向市场，以及如何最大限度地发挥它在世界上的影响力。

使用工具
虽然没有哪两个以人为中心的设计项目是完全相同的，但是我们使用相同的设计流程和工具为每个项目进行设计。

例如，为了与我们要服务的人建立深厚的同理心，我们总是对他们进行访谈。

为了保持创造力和活力，我们总是在进行团队协作。

为了使我们的思维更有创造力、更加敏锐，我们总是把我们的想法做成有形的原型，因为它帮助我们解决问题。

因为我们很少在第一次就成功，所以我们总是分享我们的产出，并根据我们得到的反馈进行迭代。

这本指南中的57种方法提供了一套全面的练习和活动，可以帮助你从制定设计挑战到将其推向市场。有些方法你会用两到三次，有些则不会。但是作为一个整体，他们会让你走上持续创新的道路，同时让你所设计的社区或用户成为你工作的中心。 

相信这个过程，即使它让你感到不舒服
以人为中心的设计是一种独特的解决问题的方法，这种方法有时会让人觉得很疯狂而不像一个方法——但如果你总是使用传统的解决方案，你就很少能找到创新的解决方案。这个过程的目的是让你直接从用户那里学习，敞开心扉，接受各种各样的创造可能性，然后专注于最理想、最可行的方案。你会发现自己在这个过程中频繁地推翻假设，当你完成它的三个阶段时，你会从具体的观察到高度抽象的思考快速变换，然后再回到原型的具体细节。我们称之为发散和收敛（菱形设计法则）。 

在构思阶段，通过更广泛的思考（大范围，多领域），我们想出了各种可能的解决方案。

但因为我们的目标是最具可行性的方案，所以我们必须确定，在这一系列的想法中，哪一个最有可能真正发挥作用。你会发散和收敛几次，每一次新的周期，你会越来越接近一个投放市场级别的解决方案。

创建真正可用的方案
以人为中心的设计是一种独特的定位，最终目的是达成解决方案的可取性（用户角度），技术可行性，商业可行性。
首先从用户开始，了解他们的希望、恐惧和诉求，我们很快就能发现什么是用户亟需的。一旦我们确定了一系列能够吸引用户的解决方案，我们就开始着手于在技术上可行的方案以及如何使解决方案在经济上的可行性。这是一个平衡的过程，但这对于设计成功且可持续的解决方案至关重要。

一：心态

1.创造性的信心

任何人都可以像设计师一样理解世界。作为一个问题解决者，解锁这种潜力所需要的只是创造性的信心。创造性的自信是指每个人都具有创造力的信念，而创造力不是绘画或构图或雕刻的能力，而是一种理解世界的方式。
创造性信心是以人为本的设计师在实现思维的飞跃，信任他们的直觉以及追求他们尚未完全弄清楚的解决方案时所依赖的品质。我们相信，您可以并且将会为问题提出创造性的解决方案，并且相信所有这一切都需要着手去实践且深入尝试。
它是一种自信，相信你所需要做的只是卷起袖子投入进去。创造性的自信会驱使你去做事情，去测试它们，去不断犯错，然后继续前进，确信你会到达你需要去的地方，并且你一定会一路持续创新。
建立创造性的自信需要时间，实现这一目标的部分原因是相信以人为中心的设计过程将向您展示如何以创造性的方式解决手头的任何问题。从微小的成功开始，然后建立一个更大的目标，你会看到你的创造性信心的增长，不久你就会发现自己变成了一个非常有创造力的人。

2.着手去做

作为以人为本的设计师，我们之所以这样做，是因为我们相信有形（实物、可视化）的力量。我们知道，把一个想法变成现实，可以揭示出许多仅仅靠理论所不能揭示的东西。当目标是将有效的解决方案投入使用时，您不能生活在抽象和理论中。你必须让它们成为现实。 以人为中心的设计师是实干家、修补匠、工匠和建设者。我们使用任何我们可以使用的东西，从纸板和剪刀到复杂的数字工具。我们建立我们的想法，这样我们就可以测试它们，在真正去做一些东西后，我们会发现以前从来没有想到的机会和复杂性。制作也是一种奇妙的思考方式，它有助于我们关注设计的可行性。此外，把想法变成现实是一种非常有效的分享方式。如果没有来自人们的反馈，我们将不知道如何进一步完善我们的想法。

3.从失败中学习

失败是一个非常强大的工具，设计实验原型、交互和测试他们是以人为本设计的核心。要知道并非所有这些能发挥作用，当我们想要解决一个大问题时，我们一定会失败，但如果我们保持良好的心态，我们就会从中受益。

以人为中心的设计是从一个不知道如何解决设计挑战的地方开始的。只有通过倾听、思考、构建和提炼我们的答案，我们才能得到对我们的用户有用的东西。“早失败，早成功”是IDEO的一个常见口号，它的力量之一就是允许出错。由于拒绝冒险，一些设计师实际上与真正的创新机会失之交臂。
托马斯·爱迪生说得好:“我没有失败。我刚刚发现了10000种行不通的方法。对于以人为中心的设计师来说，找出行不通的东西是找到有用的东西的一部分。
失败是以人为中心的设计中固有的一部分，因为我们很少在第一次尝试时就能取得成功。事实上，第一次尝试就做好并不是重点。关键是把一些东西创造出来，然后用它来不断学习，不断提问，不断测试。如果以人为本的设计人员最终取得成功，那是因为他们曾经失败了无数次。

4.同理心

同理心是指站在别人的立场上，理解他们的生活，并从他们的角度解决问题的能力。 
以人为本的设计是以同理心为前提的，你为之设计的用户是你通往创新解决方案的路标。你所要做的就是感同身受，理解他们，并在设计过程中把他们时刻挂在心里。

比如长期以来，国际发展界一直在设计解决贫困问题的方案，却没有真正同情和理解它所要服务的人民。但是，通过设身处地为我们的设计对象着想，以人为中心的设计师可以开始通过一个新的、强大的视角来看待这个世界，以及所有改善它的机会。
让自己沉浸在另一个世界中，不仅会为你打开新的创造可能性，而且它能让你抛开先入为主的理念和过时的思维方式。与你为之设计的用户产生共鸣是真正理解他们生活的背景和复杂性的最佳途径。但最重要的是，它将使你的设计过程完全围绕用户，从而产出对他们来讲真正有用的东西。

5.接受不确定性

以人为中心的设计师总是从不确定的问题开始。在一些注重于快速找到方案的公司文化中，这或许不是一个好的开始。但是从第一步开始，接受不确定性的设计人员会勇敢的走出去，追求很多不同的想法，甚至找到意想不到的解决办法。通过接受这种模糊性，并相信以人为中心的设计过程将引导我们走向一个创新的答案，我们实际上迸发出更强的创新能力。 

将以人为中心的设计师与其他设计师区别开来的一个特点是，我们相信总会有更多的创意。我们不再执着于自己的传统想法，因为我们知道我们会拥有更多新的想法。因为以人为中心的设计是一个如此富有创造力的过程，而且因为我们倡导团队合作构思，所以很容易抛弃不好的想法，保留一些一般的想法，并最终得到最好的想法。
虽然这似乎违反直觉，但这种不确定性实际上促使以人为中心的设计师进行创新。
如果我们一开始就知道答案，我们能学到什么呢?我们怎样才能想出创造性的解决方案呢?我们为之设计的人会在哪里指引我们?拥抱不确定性实际上解放了我们的创造力，鼓励我们去追求一个最初无法想象的答案，这让我们走上了持续性创新的道路

6.乐观

我们相信设计本身就是乐观的。 

为了迎接一个艰难的挑战，特别是像贫困这样巨大而棘手的挑战，我们必须相信，创新是唯一的方法。如果我们不这样做，我们甚至不会去尝试。乐观是对可能性的拥抱，即使我们不知道答案，但我们相信总会有一个方案等待我们去挖掘。
除了推动我们走向解决方案，乐观还使我们更有创造力，鼓励我们在遇到死胡同时继续前进，并帮助项目中的所有参与人员凝聚在一起。从解决问题的角度来处理问题，会给整个过程注入解决最棘手问题所需的能量和动力。
以人为中心的设计师总是专注于可能发生的事情，而不是可能遇到的无数障碍。这是我们的核心信念——每一个问题都是可以解决的——这就是以人为中心的设计师的乐观。

7.迭代

作为以人为中心的设计师，我们采用迭代的方法来解决问题，从我们的用户那里得到反馈是促使解决方案诞生的关键部分。通过不断地迭代、持续改进我们的工作，我们会有更多的想法，尝试各种各样的方法，不断释放我们的创造力，更快地找到成功的解决方案。

迭代使我们保持敏捷、反应灵敏，并训练我们一直专注于核心的想法，经过几次迭代后，每个细节都恰到好处。如果你每次建立一个原型或分享一个想法时都追求完美，那么你就会花很长时间去完善一些不一定有效的东西。但是，通过构建、测试和迭代，您可以不花费过多的时间和资源来推进您的想法，直到您确定它是正确的。

在项目早期，我们不断进行迭代，因为我们知道第一次不会得到正确的结果。迭代让我们有机会去探索，去犯错，去验证我们的直觉，最终会得到一个将被采纳的解决方案。我们进行迭代，因为它让我们不断学习。我们不是躲在工作室里，打赌某个想法、产品或服务会大受欢迎，而是迅速地走出去，让我们的用户成为我们的向导。

第一部分就到这里了，重新回顾下，在本篇文章中，你应该了解到IDEO在设计过程中一直坚守的7个心态。

他们分别是创造性的信心、着手去做、从失败中学习、同理心、接受不确定性、乐观、持续迭代。