在做交互设计或者视觉设计时要遵循一些既有的原则，其中非常重要的一条就是【格式塔定律】
一、什么是格式塔原理？
格式塔心理学诞生于1912年，是由德国心理学家组成的研究小组试图解释人类视觉的工作原理。他们观察了许多重要的视觉现象并对它们编订了目录。其中最基础的发现是人类视觉是整体的：我们的视觉系统自动对视觉输入构建结构，并在神经系统层面上感知形状、图形和物体，而不是只看到互不相连的边、线和区域。“形状”和“图形”在德语中是Gestalt，因此这些理论也称做视觉感知的格式塔原理。
格式塔学派主张人脑的运作原理属于整体论，“整体不同于其部件的总和”。例如，我们对一朵花的感知，并非纯粹单单从对花的形状、颜色、大小等感官资讯而来，还包括我们对花过去的经验和印象，加起来才是我们对一朵花的感知。
格式塔心理学家认为这些原则之所以存在，是因为头脑具有天生的倾向，可以根据某些规则感知刺激中的模式。（是不是觉得hin神奇）
比如，这是著名的“人脸花瓶幻觉”图。如果以黑色为背景，白色为图形，则是一个花瓶；如果以黑色为图形，白色为背景，则是两个人的侧脸。它也反映了图形和背景对一幅图的影响。
二、什么是格式塔原理？
使用不同数量的空格来合并或分离元素是传达有意义的分组的关键。例如，在Ant Design的标题区域中，“ 搜索”功能与站点的主要导航位于同一行。但是，主导航和搜索之间的多余空格表示它们属于不同的组，因此具有独特的功能。对于使“ 搜索”功能在主菜单的其余部分中脱颖而出，此空格至关重要。
但是，在较小的屏幕上，无法保持此间距。为了避免将这些区域视为一个整体，页面收缩宽度的时候，搜索后的文字隐藏了。
应具有固定或锁头标题的网站特别可以从使用独特的背景颜色或清晰的边框中受益，从而有效地将标题与下面滚动的页面内容区分开。此外，大页脚的单一统一背景色 可有效地表示该区域中的所有链接都属于一个组。
创建清晰的边界是一种强大的视觉提示，可以压倒其他分组原则，例如接近性或相似性。因此，当需要包含几种不同类型的UI元素或无法调整对象之间的空白量时，它是一种强大的工具。我们做页面时如果需要把两个元素放成一组与其他元素区分，那么我们可以用线框画出边界来达到目的。
如果其它因素相同，那么相似的物体看起来归属于一组。接下来从形状、颜色、尺寸上来说明相似性原理，这也就是我们平时做视觉设计时的原理，比如我们设计稿宣讲时可能会被开发、产品以及测试同学问到“为什么用这个形状？为什么这里用这个颜色？为什么这两个尺寸不一致？等等，细细体会这个相似性原理就会给我们答案，让我们在画设计稿时能够有理有据。
在上图中，我们头脑中自然而然的会分成“四列”，也就是圆形一列，三角形一列，然后再圆形一列，三角形一列，而不会看成“三行”
应用共享的颜色来表示某些项目是相关的，因此可能具有相似的功能，这很有效。通用颜色往往比其他特征（例如形状）更加突出，因此可以用于组合不同类型的元素并传达它们确实相关。
在用户界面设计中，颜色通常用于指示常用功能。例如，使用单个链接颜色作为与用户交流可点击内容，链接颜色应仅保留给交互式文本和其他可单击元素，因为用户会意识到所有具有此特征的项目都是相关的，并且以相同的方式工作。因此，链接颜色不应用于关键字，不可点击的标题或实际上不可点击的附近图标。
如上图，就是一个用色的反面例子，“ 消息中心”中的所有按钮均为绿色，因此用户必须花时间确定哪个是提交表单的主要按钮。（此外，“ 提交”按钮离消息区域很远，并且根据Fitts的定律，这种缺乏接近性也会降低用户的速 度。）
相同颜色的按钮将被视为具有相同的重要性级别。因此，应为主要操作性按钮保留单独的颜色，以帮助它们在辅助按钮中脱颖而出。
在用户界面中，我们经常使用大小来强调内容或按钮中最重要的部分。相同的大小表示相同的视觉突出度，并且在所有其他条件相同的情况下，将共享该属性的所有元素连接在一起。一致地使用大小会创建视觉层次结构，并使页面易于扫描，因为人们可以立即看到并理解这些类型分组。
例如，在产品列表页面中，每个单独的产品列表都以相同的大小（和相同的形状）显示。这种一致的视觉样式告诉我们该区域中的所有物品都是产品。共享大小将其与其他不同的UI元素分开。当某项商品在此列表中以不同的大小或形状出现时，就会突出显示为不属于产品分组。下面这个产品集合的促销以单个产品列表大小的两倍显示。
下面是我最开始尝试的招聘系统首页的改版：
根据上面的相似性原理和接近性原理就可以很容易看出来，这个页面结构和逻辑不清晰：
1.待处理和招聘日程两个模块之间的区分不够清晰：因为这两个模块右侧应用了同样的形状和颜色的按钮（相似性原理），让用户在心理上产生联想，同时这两个模块之间只靠间距来区分，区分的太弱了（接近性原理）
2.招聘日程头部日期与下面的面试安排卡片联系太弱：因为面试卡片用了非常强的边界区分的线条（接近性原理-构建清晰的结构）确实在面试模块之间构建了清晰的结构，与此同时卡片与头部的日期之间看起来没有什么关联。
3.首页的选中效果太弱，分析这个页面的层级，左侧首页选中才应该是最重的，能让用户第一眼就知道在系统中的位置，很显然目前来看很容易忽视首页这个位置，关注点被吸引到了快捷入口。这并不是我们想要传达给用户的。
根据格式塔原理中的相似性原理和接近性原理，对页面的结构进行了调整，就看起来清晰多了。
所以，我们在制作完设计稿后，可以应用格式塔原理，分析下最终呈现给用户的结构和逻辑是否清晰。而这也是做视觉的理由和底气。
视觉倾向于感知连续的形式而不是离散的碎片。
连续理解起来是很简单的，但连续却解决了非常复杂的问题。通过找到非常微小的共性将两个不同的环连接成一个整体。在引导页中经常会用到这个。
视觉系统自动尝试将敞开的图形关闭起来，从而将其感知为完整的物体而不是分散的碎片。
闭合可以实现统一整体，这不难理解。但是有一个非常有趣的现象值得我们去观察和思考，就是不闭合时候也会实现统一的整体，更确切的说，这种现象是一种不完全的关闭。这些图形与设计给人以简单，轻松、自由的感觉。所以，完全的闭合是没有必要的。最著名的应用便是苹果公司的logo，咬掉的缺口唤起人们的好奇、疑问，给人巨大想象空间。
我们倾向于分解复杂的场景来降低复杂度。
我们的大脑将视觉区域分为主体和背景。主体包括一个场景中占据我们主要注意力的所有元素，其余则是背景。这个原理经常会在海报设计中应用，这也是为什么我们做海报，做平面时，一定要制作好背景，背景的氛围很重要。
文章来源：站酷 作者：ZZiUP
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
-设计过程中，共情（同理心）的一些观点和心得，希望能够让更多设计师对这些软能力有更好的提升和应用，欢迎前来交流探讨
————
在体验设计的过程中，如果不能对设计对象有更深入的了解，设计思维就无法开始。而用户对产品持有的观念、态度甚至意见并不一定会表现的很明显，这需要设计者更加主动的与用户进行互动去构建共情。这可以使得你能够更加了解他们的需求、想法、情绪和动机。好消息是，你能掌握多种方法来与用户构建共情去获取更多信息。并且当你有足够的“正念”和经验时，你也能成为共情他人的专家。
“正念”：有目的的、有意识的，关注、觉察当下的一切，而对当下的一切又都不作任何判断、任何分析、任何反应，只是单纯地觉察它、注意它。
共情(Empathy)，也称为神入、同理心，共情又译作同感、同理心、投情等。 由人本主义创始人罗杰斯所阐述的概念，却越来越出现在现代精神分析学者的著作中。不管是人性观还是心理失调的理论及治疗方法似乎都极为对立的两个理论流派，却在对共情的理解和应用上，逐步趋于一致。共情似乎为现代精神分析与人本主义的融合搭起了一所桥梁。
我们常说的感同身受、换位思考、同情心、设身处地、将心比心这都是共情的一种描述。Empathy一词源于德语“Einfühlung”，意为让人们跟艺术品融为一体，比喻走进一件艺术品的奇妙体验，因此国外常常会看见“站进别人鞋子里去”的共情比喻——（Stepping into their shoes as the saying goes, in order to gain a deeper understanding of their situations.）意为正如俗话所说，站在他们的立场上，以便更深入地了解他们的处境。
对于“共情”我更多的理解成是两个或多个载体之间的一种共识一种情绪共鸣，然后再到行为跟思维上的影响。但实际上发生完全的共情是不可能的，有时连我们自己也会做一些无法理解的迷惑行为，并且客体是多样化的，可以是跨物种的，跨维度的。而我们要做的就是在工作中定义共情的有效范围，尽可能的与目标用户产生共情以了解更多信息或需求，然后去定义和构思新的需求与设计。共情很重要，但它不是设计工作中的全部，有效而不要过度的使用也很重要。
共情载体的多样化可以是你通过一幅画感受到了作者的情绪表达
十字路口听见火车的鸣笛声，从而感知到危险的信号
当你傍晚处在城市生僻的角落，打开地图软件，亮起了回家的导航
我们身边的共情无处不在，正是这些共情使得人与人之间的情感更丰富，当然也是因为人类有强大的表达能力。通常当客体情绪在表达出来的情况下，主体是可以更容易得到共情的。所有当主体更专注的去感受客体的情绪表达时，能够使达到共情变得更迅速。
常的的共情场景；
身处于电影院，看到某一段感人的情节，很多人开始泪盈眼眶。
朋友讲述着自己的不幸，你听完后的同情与表示理解他。
看着熟睡的婴儿，人们自觉的保持了安静的氛围。
准备上楼，当眼看电梯门就要关上时，里面的人帮忙打开了电梯门。
正在写报告时，突然的停电让你措手不及，也让你的同事措手不及。
与伙伴开黑游戏，共同取得胜利那一刻。
.....
以上都是一些生活中常有的共情场景。通常当我们与其他客体得到共情时，往往我们能够更清楚客体传递的信息是什么、需求是什么，这完全可以应用到我们的设计场景中帮助我们获取更多的有效信息。
————
如果你想要更了解你的产品用户，从而让你的产品更好的服务用户得到更好的体验口碑，那么体验设计师如果对目标用户没有更深入的了解，那么产品设计中的各种设想都是没办法决策的，甚至都难以测试和验证，这对产品研发一定是一个危险信号。而共情则能帮助我们洞察用户需求和定义问题，所以共情在体验设计中显得基本且至关重要。
产品原型与交互界面时常是有所出入的，其原因在于前者更关注产品本身框架与盈利点，而后者更注重整体的用户体验的细节。共情用户需求，以及思考商业盈利与用户体验之间平衡的点似乎是无法脱离共情应用的。这便是共情应用的一种体现，也是共情价值与设计赋能的体现。
一直以来在产品营销广告中，始终存在一些流氓的交互方式让用户苦恼。往往更加注重和尊重用户感受可以更好的提升用户的好感与使用体验，这便能够使产品与用户之间的感情升温赢得口碑。
在构建产品业务框架时，大多可能会出现以公司服务资源为中心的构建方式，但同时这种由内而外开发方式会为产品带来更多的弊端（往往产品投入使用后，会出现超出预期的问题）。尝试去站进用户的鞋子里去，或者找来目标用户甚至是相关的专家来做咨询，减少研发迭代的弯路。
用户画像是体验设计中常见的一种设计工具，它能够帮助产品定义目标用户，能够有效用于产品设计决策或者洞察用户需求等。一个好的用户画像是基于真实用户的，它不是胡编乱造的。画像在于形成多组可供参考的角色材料，这有利于跨团队跨层级之间快速实现共情，达到业务目标的统一性。因此一组目标用户画像能否帮助团队快速实现共情是一个重要的衡量标准，而不仅是一组人口调查数据。
故事的元素通常会更丰富更有趣味，用故事叙事更能提升用户的兴趣和关注，这能便于构建共情。因此当你发布测试任务或者撰写研究报告时，都可以加入背景故事或用故事叙事，便于对象更容易理解和共情，你甚至可以用笔绘制故事版，像四格漫画一般，因为用图传达概念或信息更容易让人记住或回想起来，并且当你用这些方法时，自身也能加强理解。共情不是单向传递的，不要高估对方的理解能力，让你的信息更简单明了的传递也是重要的共情应用！
在与目标用户进行互动的时候，通常会借助电子设备帮助记录这个过程，目的是为了更仔细的观察和聆听，并注意到被忽略的信息。就像一种正念，我们会带有目的性的观察目标活动，并且不会进行干涉，同时不对当下发生的一切提前作出任何结论、分析或判断，直至这个过程有了一个里程或结果，我们再将收集到的各种信息放在一起去思考。倾听和观察是人与人之间互动的根本方式，相对仔细完整的倾听与观察可以获取到更加有效的共情，而片面的则可能产生共情偏差。
共情在体验设计的应用中很广泛也很重要，甚至还延展了许多帮助共情的工具，这些都是为了让设计者能够更好的了解市场、发掘用户需求、甚至找到新的产品机会，最终帮助企业解决产品实际问题。有时在共情工作中，我们就像一个老中医一般，对患者望闻问切。 一旦有了问题，就应该及时使用适当的方式去共情目标对象，定位问题所在，并制定解决方案。
————
为了寻求更加有价值的目标用户进行共情研究，我们会对共情的目标进行范围筛选，可以是根据某些用户习惯、常使用的产品服务、某个场景、也可以是社会群体(例如学生、司机)、甚至可以是动植物(例如宠物类产品)。所以第一步你要根据需求去制定共情目标的筛选条件，然后一点点缩小和锁定有效的目标群体，再开始招募、沟通或是进行其他下一步工作。我们没办法跟所有目标用户构建共情也没有必要这样做。通常五个左右的用户就能够反映出大多数问题，并出现重叠的反馈。
伴随产品的发展过程用户也在时时发生微妙的变化，在跨度大的迭代中，尝试与产品潜在用户或极端用户进行共情研究也是很有价值的。潜在用户的需求通常存在着更多的不确定，这也意味有发现新机会的可能。而极端用户通常会有一些更刻薄的需求，这些需求可能不是主流，但也有主流发展的潜力，不过至少这些改进会为极端用户带来惊喜。这就像是在公交车站下安装一台自动售卖机，不是大多数人的需求，也不是当前的主流趋势，但却能够为部分乘客带来方便或惊喜，我们不能忽略这些少数。
在体验设计的过程中，我们需要与目标对象构建共情时，一定是有目的有意图的。以使用性测试为例，往往我们都会设定一些产品测试任务和目标给用户，再进行观察和共情。这也将允许我们能够在同一个或相似的场景事件中发生共情，这样才能够获取到更真实有效的共情。以一个吸尘器产品为例，如果对方是在地毯上测试的，而你是在木质地板的环境下去共情的，那么共情结果肯定是有所出入的。所以构建一个共情目的甚至是环境是有效共情的一个重点之一。
构建共情会受情绪影响，在共情前有必要去除负面情绪影响，不要为共情构建带来更多的阻力，另外则是仔细的倾听和理解。这就好比我们要专注学习，除了认知听讲，脑子里一旦充斥着其他负面情绪或思维影响，就很难完成专注学习的目的。同理，在用户帮助我们测试产品或访谈时，我们也要首先做好彼此的心理建设，去除主要的负面情绪甚至去除不利的环境影响因素，例如缓解用户紧张不安的情绪，找一个素一点且安静的测试房间等。
图表、笔记、录制设备是帮助我们共情的最好工具，在不同的场景下，这些工具能够帮助我们更好的收集信息，并且便于我们思考和共情。我们在短时间能记住的信息是有限的，这也是为什么我们会用到7±2这种定律去控制信息量的原因。以用户体验地图为例，在记载用户体验产品的过程中，便是一种很好的共情辅助工具，它能够按照使用步骤或阶段记载用户使用情况和情绪变化等反馈。
在我的理解中，共情由四个主要的因素影响来构成。
一、尊重：受到不同的环境跟经历影响，要去准确理解一个人是很困难的，哪怕是多年的夫妻也是如此。所有首先要做到尊重，消除任何偏见，不要带有批判或评价的心理。然而做到足够的尊重也并不容易。
二、观察：观察是获取客体传递信息的主要途径，不能掌握足够的信息是无法做到共情的，片面的或者假设的信息都将影响到正确的共情。
三、思考：对客体的信息与观念进行思考，尝试理解客体的各种行为根因以达成一致的认知。
四、融入：将自己感受到的情绪与认知代入到共情对象的行径中，去仔细揣摩，以洞察用户的行为、感受、需求、思维方式以及与产品之间的关联，就像灵魂附体一般，以达到更深入的共情来定义问题。
最后便是共情结果如何应用到设计之中，将共情结果赋能到产品设计也是共情工作的价值所在。通常这套流程是共情->定义->构思->原型->测试，在这个整个过程中随时是可以返回到前面其他阶段中反复打磨的，而共情作为一个起点也揭示了其重要性。我们一切的共情工作皆为了能够优化和解决产品的问题，使得产品体验能够更好，这是我们在体验设计中不断去共情的初衷。
————
以移动端的产品来讲，现在好的共情设计真是百花齐放，这正是创新技术与共情设计发展的好趋势，也是敢于创新探索的好机遇。这里我们放三种典型的欣赏案例说一下；
一、智能便捷型：给用户提供更加智能便捷的服务功能，使得用户能够获得更轻松流畅的服务体验；
二、人性化类型：通过大数据与技术手段，为用户提供更加人性化的服务方案，提升用户好感度、依赖性，加强产品口碑与体验；
三、情感关注型：有一些属于情感关注类型的共情设计，通过获取用户的场景信息或其他数据共情用户情绪，并给予用户合适的关爱、帮助、引导。为用户带来软件有情感，品牌有温度的体验；
在体验设计中，情感化设计一定会是一个值得深入方向，我们应该关注到不同场景下用户会产生的情绪变化，为用户提供更加走心的服务体验，为产品收获更多口碑。当然，在产品完善的这个漫长过程中，我们也要随时甄别我们所做的事情是否对用户和企业有更高的价值。在研发资源有限的情况下，划分这些设计点的权重，合理分配研发资源。
————
能够对共情构建产生影响的认知偏差挺多的，这些认知上的偏差会影响到共情的正确性，不仅是构建共情的主体还是客体都会有影响。国外产品设计师Abhishek Umrao在UX MAGAZINE（https://uxmag.com/articles/6-ways-psychology-affects-your-design-work）上整理了六个关于影响UX体验设计的认知偏差可以了解一下。这里围绕构建共情补充了一些相关认知偏差，希望能够在构建共情的工作中再少一些坑；
共情偏差是指由于经验、预期和态度存在差异，我们很难准确地去体会他人的感受。这一点就是前文提到的我们无法做到完全共情，我们对共情的概念要有一定认知。
建议：通过技巧去弥补，减少认知偏差。多一些耐心的聆听，减少偏见和执念，尝试思考如果是TA该怎么办？
情绪会对我们的认识和行为产生影响，而负面情绪产生的影响则是最大的，这会对我们的共情判断产生偏差，所以前文我们会提到消除情绪噪点的概念。
建议：尽可能的维持中立或积极的情绪状态会更有助于共情工作，但至少是消除负面的情绪影响。
观察者常常会不自觉地扭曲影响因素或数据，以得到预期结果。这就好比在用户进行产品测试的期间，向你咨询了意见，而你很有可能不自觉的给出你的期望或者一些暗示，这会对目标产生可暗示性偏差(Suggestibility)，使得目标想到的内容往往会被扭曲。
建议：1. 对面向用户的测试材料进行自查纠正，尽可能处于中间立场，不要干扰测试结果。2. 在主持访谈或用户测试现场时，对于用户的主动咨询或交谈中不要解释过多，让用户理解其定义跟概念即可，说的越多越是容易出现观察者预期效应。
基于自身的认知或经历，有时做出判断会过度依赖个人直觉，而不去收集更多有益于做出准确判断的证据。这一现象常常表现为产品或项目经理的一拍脑袋的决定，但是往往因为过度依赖直觉而忽略了实际的场景差异等。
建议：对于不能直接给出有效证据的决策，要敢于质疑而去追究其正确性。当使用参考信息时要思考两者之间的差异性。总之不要凭借事件的相识性而忽略差异性，最终凭直觉决策。
人们会过度倚重某些权威的意见，而忽视事情发生的实际背景。以品牌的影响力为例，两种不同的任务实施程序，通常人们会认为大品牌的方案更好更值得信赖，而忽略了一些体验细节。
建议：对于相比较的软件测试任务，我们有时会弱化甚至隐匿品牌信息。其目的便是在比较时减少这些权威偏见，不论是正面的还是负面的，这些都会影响用户判断，所以在特殊的场景研究下，请注意这一影响是否干扰结果。
人们会过度依赖先前的经验，把一些极端事件看作正常的，认为事情很快会过去。以用户测试为例，当6个人都正常完成了测试任务，仅有一人出现出现问题时，这是一个概念问题，我们不能忽视这仅有的一个用户，更不能安慰自己这只是一个特例。
建议：上文有提到尝试与极端用户进行交流，其实道理类似，问题纯在即合理，我们有必要注重和研究这些极少数，它们极有可能带来新的机会点。
人们高估自己的个人心理状态被他人知晓的程度的一种倾向，时常表现为你以为别人都明白了你的意思，实际上别人明白的还远远不够。与“知识的诅咒”这一偏差的差别在于，前者是我以为对方明白了实际对方还有诸多不解，而知识的诅咒是你无法给对方进行可理解的解释，有着文化背景或认知的障碍，实际上这两者偏差概念都会影响到共情工作。实际办公中透明度错觉时常体现在需求表达、文档解释、跨部门沟通中，往往你以为你说的已经很清楚了，但在实际研发中却会体现出诸多差异。
建议：适当的了解其他部门的专业文化，便于更好的解释给对方。组织好信息框架，简单易懂的信息框架易于对方理解，例如书本的目录大纲、信息的分类等。跨团队或部门的PRD（产品需求文档）尽可能的减少专业术语的应用或者进行注释，文档的目的不在于体现多专业而是更加易懂的传达信息。
————
研究用户从观察自己开始。每个时代的人都会有不一样的特质或者某些现状，在这个大环境下，你会发现与同龄人之间有很多相似点，那么加强对自己的行为理解，是不是就等同研究了这些同龄用户的共有特征？这些特性是否会对你的产品使用有关联？带着这些特性去体验你的产品时，是否会发现新的机会点？
参考文献：https://uxren.cn/?p=68537#影响UX设计的6个心理偏差
参考文献：https://uxren.cn/?p=68382#如何构建同理心
文章来源：站酷 作者：泡泡bing
到底什么是共情
百科
通俗含义
身边的共情
共情对体验设计的作用
以交互设计为例
- 电商的界面设计：
- 移动端常见广告推广界面：
- 组织产品功能架构时：
用户研究中的共情应用
- 用户画像：
- 用故事去描述：
- 仔细倾听和观察：
小结：
如何在体验设计中构建共情
制定共情的范围
- 在不同研发阶段尝试与特殊的用户共情
带有目标的进行
情绪降噪与倾听
合理的工具辅助
构建共情的要素
共情为设计赋能
好的共情设计欣赏
小结：
共情构建中的认知偏差
1. Empathy gap（共情偏差）
2. Negativity bias（负面情绪偏差）
3. Observer-expectancy effect（观察者预期效应）
4. Automation bias（直觉偏误）
5. Authority bias（权威偏见）
6. Normalcy bias（正常化偏误）
7. Illusion of transparency（透明度错觉）
趣味思考
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。
企业级服务系统的智能在线处理、数据准确、信息安全等特征，成为企业实际作业的得力助手。（以下简称B端）
系统提供商也便对业务型产品、设计、开发、运营等人才有更多需求。
在C端浪潮中，设计师通过创造用户流畅和惊喜的体验，发挥了显而易见的价值。
然后B端系统的业务复杂特性，普遍认知产品经理、开发会体现更大的价值。
设计师作为中间角色，难免「尴尬」，甚至沦为产品经理原型的高保真绘制人员，缺少发言权，或初次接触对海量信息无从下手。究本质原因：
未直接接触业务方和用户，无法对需求场景有深入的了解，缺少系统性设计分析、设计判断能力
我在几年的实战中，运用辛老师 「交互设计五要素」 基础原理，融合于B端业务体系，形成一套自己的思维图谱。（以下简称五要素）
从「五要素」出发，会更快速地get到关键设计点，抱着开放的态度与产品讨论方案，总会愉快地达成一致，顺利对接开发。
就像我们写小说「讲故事」一样：时间地点人物、有什么目标、使用什么工具，完成什么事情，故事才完整。基于B端实际业务场景的五要素，阿飞解说如下：
角色：
老板、运营、销售、物流、采购、库管、财务等（不同岗位日常事项不同）
权限：
主子账号（涉及到模块间的操作权限、数据权限）
用户目标：
B端一般是具有明确的作业目标，更地完成工作。老板一般希望节约人力成本，且可即时响应客户需求
商业目标：
为客户赋能、提升下单率、支付率、新业务渗透力、裂变等
业务目标：
产品会不断的迭代，了解当下需求中的业务目标
设计目标：
基于以上目标，设计需符合用户思维习惯，提高处理效率，同时避免误操作等
任何场景下，人的行为都是有「目标动机」
当以「目标」为出发点，可以增强设计判断力，输出有效方案。另外真正有价值的商业目标一般都是和用户终极目标所吻合。
时间、地点是场景的必要组成
When：
随时随地在线或工作日期间，如：售后客服需要随时在线；财务人员一般工作日处理任务
Where：
办公室、仓库、户外等。需考虑线上线下结合，系统是为用户的线下作业场景服务
台式电脑、笔记本电脑、手机、平板、扫码枪、PDA、打印机、肢体、智能运输车等
互联网媒介又包含web网页端，web客户端，小程序，H5，App等
系统功能承载在媒介中，媒介承载在实际作业下使用的工具，存在多终端配合使用。比如仓库移动作业时，会使用到平板进行盘查核对等。
需要完成什么事？通过典型的任务流分析是否可达到目标
△ 仓库移动作业场景
B端复杂业务下，设计师主动了解用户实际的场景后，五要素作为必需思考元素，经过实战验证，带给设计师的机遇价值至少有2方面：
1. 对设计师自身：
有利于设计分析、判断思维体系的完善，考虑更全面；所输出的方案符合用户思维和习惯，更容易得到各方的认可
2. 对于业务价值
可作为考量产品方案可行性的判断准则
另外，产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，也会给予创造性解决方案
比如「开发票」功能 ：
在需求评审中，针对于「A向B申请开票，A撤销申请不需要B操作同意」这点，我提出建议：「需要B线上同意」
首先确实是要避免无谓的用户线上流程操作，但针对这点，我分析如下：
所以「A撤销申请B需要线上操作同意或拒绝」
△ 打印发票
以「五要素」的分析思维的表述，最终与产品、技术达成一致。
在设计中，考虑到「A申请撤销」的单据，对于双方都是需要优先确认和处理的。所以除有即时消息通知外，列表中我做了2点设计：
（若不这样，在分页列表中特殊单据很有可能从第二页后才出现，用户都发现不了）
△ 状态操作参考框架示例-原创
回顾下B端交互设计五要素
设计师的分析、判断能力是非常重要，五要素则作为系统性的思维支撑。
B端浪潮中，设计师仍有很大的机遇和价值。基于五要素分析，会对业务有所优化和补充，或提出创造性的解决方案。
设计不仅是一种技能，而是对事物本质的感知和洞察能力
交互设计五要素不仅对设计师有帮助，同时对产品、运营等人员同样具有价值。
文章来源：站酷 作者：Aber UX设计
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在经典的尼尔森十大启发式当中，「系统状态可见性」可以说是如今交互设计领域当中，最为重要的原则之一。通过向用户展现当前的状态，让用户拥有对系统的控制权，建立用户对于产品的信任感，这也是这种设计启发式的最重要的价值之一。
但是，想要做到可靠、易用，系统状态展现的技巧是很讲究的。这里梳理了4种最为常用的方法，结合了不少实用的案例，希望对你有所帮助。
1.1、让用户知道自己在哪
没有人会喜欢迷失方向，但是无论在现实生活还是在数字领域当中，这种情况都会发生。让用户知道他们在哪里是创建良好导航体验的关键。应用程序和网站都应该凸显当前的导航选项，帮助用户了解他们所在的位置。
Google 的底部导航栏设计
1.2、要经过多少步骤来完成任务
这也是一个非常基本的操作，通过展现步骤数量，帮助用户来预估完成这个过程所需要的时间。
Selecto 的调查问卷的设计
数字界面毕竟不是现实世界中的真实硬件机构，用户更多只能借助交互过程中的即时视觉反馈来确定是否完成了操作，即时的视觉反馈因此显得非常重要。
即时的视觉反馈让用户的操作得到了视觉上的「认可」，从而强化了「确信感」，这样一来一回的确认可以避免错误的发生，比如可以避免用户因为「感觉没有点下去」而反复点击。
这种视觉反馈的设计，最常见的范例就是点击按钮按下的微交互动画，它告知用户「系统已经捕捉到点击交互了」。
AliAli 所设计的悬停点击动画
但是在某些状况下，按钮的视觉反馈还有很多不同的呈现形式，有更多可见的、可理解的新形态，可以在原有的基础上探索更多可能性，比如下面的
2.1、单击点赞按钮
Spread love, not viruses ，作者 Charles Patterson
2.2、开关按钮
这个开关按钮不仅有点击动效，而且色彩和按钮标识也随之改变，更为清晰地表明状态，甚至兼顾到了视觉障碍用户
Switcher XLIV , 作者 Oleg Frolov
2.3、书签按钮微交互
这个书签按钮通过色彩的虚实变化来呈现书签已添加的状态，颇为巧妙。
Bookmark interaction，作者 Oleg Frolov
2.4、添加购物车微交互
在这种情况下，视觉反馈非常明确且优雅地告知用户已经添加到购物车里面了。
咖啡下单动效，作者 Nhat M. Tran
3.1、系统正忙于什么事情
当系统正在加载，正在执行，正在运行的过程中，通过动效来告知用户系统并没有停止，而是正忙于执行某件事情，是避免用户误解的手段。在用户等待的过程中，通常会实用无限加载的动效（一般使用在低于10s的操作中）：
对于超过10s的更长的执行过程，无限加载的动效会显得令人沮丧，这个时候实用进度条会更好：
这些视觉反馈很大程度上降低了系统给人的不确定感。
对于移动端应用，在初始加载阶段所使用的启动动画界面，是否精心设计，决定了用户对于整个产品的第一印象，优秀的初始加载动画能够将用户的注意力从焦躁的等待中解放出来。
Logo 闪屏 ，作者 Gleb Kuznetsov✈
3.2、内容加载
当用户需要时间来加载内容的时候，建议使用一种特殊的的容器「界面骨架」来展现。这种临时的内容容器不仅能够帮助用户快速地了解界面的整体框架，构建用户预期，并且能够在后台快速地加载数据，渐进式地帮用户获得信息。
内容加载，作者 Ginny Wood
这种设计方式对于移动端和桌面端的设计同样适用：
界面骨架加载动效，作者 Shane Doyle
4.1、通知和提醒
有效的通知和提醒，能帮用户意识到有新的事情正在发生。在多数时候，我们建议设计师使用微妙的动画来进行通知，因为动画效果会自然地吸引用户的注意力，人类的双眼的动态视觉其实是非常强的。
Aleksei Kipin 设计的通知动效
4.2、提示用户采取行动
在很多情况下，用户界面中会有很多地方会需要用户提交信息。比如，需要用户提交表单，或者用户创建了一个密码，但是在复杂度上不足需要修正，或者填写邮箱来订阅信息的时候，邮箱格式出错，等等。使用适当的视觉反馈总能够更加有效地将问题告知用户。
内联邮箱验证机制，作者 Derek Reynolds
让用户有掌控感，就是为用户创造更好的体验。在很多设计方案中，视觉反馈会因为种种原因被削弱了，甚至被忽略了。但是当用户在和 UI 进行交互的时候，期望度和可动性其实是高度依赖于这些动效和微交互，而这正是设计师需要设计出优秀视觉反馈效果的原因所在。
文章来源：优设 作者：Nick Babich
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着车内屏幕越来越多，越来越大，驾驶者在开车过程中因操作屏幕而分心机率逐渐升高。众多汽车制造商均希望探索出一种降低或避免「驾驶员分心」的安全性技术。
手势，是指人手、手和手臂结合产生的动作，作为解决「驾驶者分神」这个痛点的解决方案之一，正在全世界的汽车制造商中掀起「热浪」。
你只需要随意的挥一挥手，就能挂断电话；将手指向顺时针或者逆时针方向移动，就能调整音量大小。
汽车手势的出现，源于对车内屏幕的操作。而这些操作均来自于移动端的设计标准，比如苹果IOS设计规范中的标准手势或者谷歌Mertiral Design中的标准手势。
△ 移动端常见交互手势
常见的手势如上图，分别为
为了满足手机屏幕外观改变，屏内显示内容越来越多元化的需求，设计师们也在探索屏内手势的新玩法。
△ android底部导航栏按键从左至右分别为：返回上一级、返回主页、多任务
2017年iPhoneX的发布，正式开启了全面屏时代。为了替代Home键及android底部导航栏，各大手机厂商相继开始拥抱「全面屏手势交互」。
在车机系统中，部分汽车制造商也在积极迎接变化，比如理想one采用「三指下滑」的手势交互替代「返回主页」的图标按键。
△ 「 三指下滑」表示返回主页
2019年的Google I/O大会上，新版本Android Q选择与IOS采用一样的手势操作逻辑，即在屏幕下方提供一个指示条，用户在左侧页面边缘右滑代表「返回上一级」、提示条区域上滑代表「返回主页」、提示条区域上滑并悬停代表「多任务」。
△ android系统中的三种全面屏手势
随着全面屏手势在手机端的操作交互上达成一致，相信在不久的将来，也将越来越频繁的在车机端看到全面屏手势的「身影」。
当汽车与数字屏幕相遇，如何让屏幕与内饰结合的更加完美，又能突显品牌特性，似乎给内饰设计师带来了许多挑战与机遇，「一字屏」、「T字屏」、「7字屏」、「旋转屏」应运而生。
△ 拜腾M-Byte 一字屏
△ 理想one的T字屏
△ 合创007的7字屏
△ 比亚迪王朝系列的旋转屏
与此同时，因为成本及技术的限制，汽车制造商的量产车型不得不在屏幕上做出妥协。理想one的妥协方案是利用3块屏幕组合，在视觉上形成「大长屏」的既视感。
要让3块屏幕「变」成一块屏幕，仅仅在视觉上做足功夫显然还不够，多屏联动手势交互也不能「缺席」。
事实上，多屏联动手势交互依旧来源于IOS及android系统中的标准手势，它将不同的手势进行组合，并与页面联动显示，形成了多屏联动手势。
理想one在停车模式下，用户长按并向左滑动，即可将副驾娱乐屏上的信息「甩动」至中控屏。
天际ME7不仅有3块屏幕组合而成的前排「一字屏」，还有2块后排乘客娱乐屏，5屏联动的手势交互，天际采用「手势+屏幕显示」来解决。
在中控屏、副驾娱乐屏和后排娱乐屏上采用五指抓取手势进入多屏互动页面，比如想把中控屏上的内容分享给副驾娱乐屏，第一步是单击选中副驾娱乐屏，第二步按住并拖动中控屏至副驾娱乐屏位置，第三步在副驾娱乐屏中点击确认。
视频版交互演示：https://v.qq.com/x/page/w08791lhqus.html
通过隔空手势接听或者挂断电话，这似乎是科幻电影中才有的情节。但正如开篇所说，车内屏幕数量增多，尺寸加大的同时「驾驶者分心」的机率也增加了，盲操手势与隔空手势的出现，是解决这个痛点的一种尝试。
目前量产的汽车中，盲操手势主要是通过标准手势与声音反馈的组合来实现。
比如在理想one中，用户在空调屏上左右滑动可以调节风量，上下滑动调节温度，且系统通过声音反馈告知用户操作成功与否。
与盲操手势相比，隔空手势似乎科技感十足，备受汽车制造商的青睐，我们不仅可以在各种概念车上窥见它的踪影，在君马SEEK上，也可以实际操作一番。
君马SEEK提供8种隔空手势。
△ 左图：接听电话 右图：挂断电话
△ 左图：上一曲 右图：下一曲
△ 左图：音量升高 右图：音量降低
△ 左图：音乐播放/暂停 右图：玫瑰花
与君马SEEK相同，宝马提供「向左」手势代表上一曲、「向右」手势代表下一曲，「yeah」手势代表播放或暂停。
但在许多其他操作上，宝马与君马的手势操作则各有特色。
君马SEEK使用手掌的正面与反面来区分不同的操作，正面表示接听电话·/音量增加，反面表示拒听/音量降低。
宝马则选择向屏幕方向点击代表接听电话，手掌向右挥动代表拒听电话，手指顺时针画圈代表音量增加，手指逆时针画圈代表音量降低。
在倒车影像中，手指向右挥动代表调整视角。
△ 图片来源于「汽车界的扛把子」的短视频《宝马手势控制详细演示》
在手势交互上，拜腾也交出了自己的「成绩单」。
拜腾的手势识别共五种，手掌向下激活手势识别，手掌向上启动主页面，手指移动代表移动光标，ok手势代表确定，五指捏合可拖拽内容。
△ 图片来源于太平洋汽车网《拜腾Concept手势感应系统操作演示》
这些高大上的技术看起来令人兴奋，但在实际使用的过程中，依旧存在识别范围有限、识别精度不灵敏、识别后的响应速度慢等等问题，而各个厂家的手势识别没有形成统一的标准，且没有大规模在在用户中进行推广，必然会增加用户的学习成本。
手势识别对用户来说是「真香」还是「鸡肋」，相信时间会给出答案。
参考文献：
汽车内手势的交互设计，是一个有趣又好玩的课题，但如何让这个课题在好玩但同时易用、好用，恐怕只有设计师不断思考，并不断采用一些用户测试的方法进行验证才能获得答案。
文章来源：优设 作者：点滴DESIGN
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这次我们不聊视觉，也不畅想未来，只说说当下 HMI 产品设计与交互体验。
本文内容会涉及一些专业的汽车知识名词，因为篇幅有限，如有些知识名词不太明白可以百度一下。
说到 HMI 大多数设计师应该是既熟悉又陌生，HMI 是 Human Machine Interface 的缩写，「人机接口」，也叫人机界面，人机界面（又称用户界面或使用者界面）是系统和用户之间进行交互和信息交换的媒介， 它实现信息的内部形式与人类可以接受形式之间的转换，凡参与人机信息交流的领域都存在着人机界面。
听起来是不是觉得这不就是 UI 吗？有什么区别吗？似乎差不多，几乎是没有区别的，只不过是在某些场合和设备上管他叫 UI，比如移动端设备，而在另外某些场所和设备上管他就叫 HMI，比如汽车车机和数控机床。所以这个概念也不用去特别较真，HMI 就权当作是汽车上的 UI 界面吧。毕竟汽车是高科技与工业结合的完美产物，「HMI」念出这个词时候就感觉是蛮专业的！很般配！
刚才说 HMI 最早更应用于工业上，比如常见的各种机床、制造装备。
或者说让时间再向前推进一点！
而这里通常意义的 HMI 则更加聚焦点，基本特指汽车车机或者车载多媒体设备。
说到这里还是要从车载仪表盘说起，从德国人卡尔·本茨发明世界第一辆汽车，距今已经 100 多年的时间了，在那些还没有 HMI 这个名词的年代，那么他是以什么形态出现的？那就不得不提「仪表盘」了。
当然写这篇文章并不是去评测谁家 HMI 更优秀，而是希望通过一些假设、实验和推断，和大家一起来探讨一下如何更有效地设计 HMI。
屏幕越大越好？车内到底需要几块屏幕？
我们先从屏幕开始。
说到屏幕，设计师都是比较敏感的，因为我们最终的设计交互创意都是需要都是在屏幕上显示展示出来的，HMI 当然也不例外。现在在车载屏幕上你能看到最大尺寸多大？
拿特斯拉为例，Model S 和 Model X 车型都是 17英寸，Model 3 为 15 英尺。
当然他肯定不是最大的，熟悉汽车朋友你应该知道我想说谁了，没错就是他！拥有 48 寸可多段升降屏幕的 BYTON 新能源概念车 M-Byte！48 寸的确很夸张，难道屏幕越来越大就是未来 HMI 的方向吗？
当然这个问题肯定是否定的，为什么？那就要从车载屏幕的作用来说起。
首先我是作为一个曾经就职于汽车公司的设计师，并且是一名地道的汽车发烧友，凭借对汽车还算熟悉和热爱做出一些产品交互分析，以下如有不妥之处还望海涵。
按照功能场景总体可分为三类：主行驶状态信息、附设备状态信息、多媒体 & 外设
不可缺少还需要与使用者、场景结合，我们先来做一个大概的用户画像。
对应这些需求，汽车需要有仪表台（屏）控制和显示的区域有五个。
五个区域分别是：
其中前三个是主流配置，后两个比较少见。
关于汽车设备这块我们不做深入展开了，毕竟这篇文章主要讨论的还是设计，直接看结果！
题外音：屏幕安全性的考量
汽车是比较特殊的设备，基于安全性考虑，汽车内屏幕尺寸不宜太大与太多。
屏幕总体为玻璃材质，但与车窗挡风玻璃的材质不同，当汽车遭遇碰撞的时候，车内屏幕极易破损并形成尖锐物，极大可能会乘坐人员造成二次伤害，所以车内屏幕不易太多，更不易太大。虽然车载屏幕变大变多已不可逆转，而且随着屏幕技术的提升，柔性 OLED 的应用也将会在一定范围解决安全问题。但也需要汽车相关设计者多在安全方面进行考虑，任何产品体验应该建立在安全基础之上的，特别是交通工具。
为什么大屏幕操控成为了当前的 HMI 主流了呢？那不得不去提一下另外一个我们熟悉的设备——手机！
同样一个有限的区域，如果用物理按键那么这个区域只能是固定的功能，而屏幕就可以无限扩展。特别是在汽车中控屏上集成内容会很多，体现就更加突出。
但是在汽车上的全部使用屏幕真的是最佳选择吗？显然这是有待商榷的。
不可否认屏幕的确有很强的扩展性，但是缺点也是明显的：1.触控反馈缺乏 2.交互效率不高
对于这样的判断，我们可以通过两个实验来进行验证。
将类似于 Surface Dial 这种智能按钮交互装置引入汽车的屏幕控制中，每个按钮可以根据情景进行自定义，并且吸附到汽车屏幕的任何位置进行交互操作，相信这一定是一种全新的使用体验。当然这一定是需要解决比如吸附力、安全性等一系列问题。
虽然目前的屏幕还无法做到完美触控反馈，但已经出现了一些新的硬件技术来试图解决这些问题，比如 Tanvas Touch，其定义为 「手指与触摸界面之间的电子压力控制」。简单来说他们的产品就 「皮肤的磁铁」 一样，能够更加精准地感应手指的动作，最后结果就是比 Apple 的 3D Touch 更加具有压感的触摸操作表现。
原理是利用手指尖触摸显示屏时产生的静电引力来模拟触感，通过电磁脉冲把更的反馈发送到用户的指尖。
Tanvas 也正在与汽车制造商们合作把这项技术嵌入到汽车或屏幕上，让人们更容易感触受到不同物体的表面。
也许在未来我们真的会遇到他。
文章来源：优设 作者：残酷de乐章
医疗行业的交互设计，跟其他行业有何不同？有什么要特别考虑的点？设计师应该注意哪些方面？
产品体验设计通道中有条简单好记的定义： 1+X。
「X」这个字母常被定义为更多可能性，它的诞生往往是为了更好地服务行业与产品。
例如在医疗健康行业中，不再只有C端用户，我们要面对医院管理人员、患者、医护人员还有企业用户等；环境也不单是线上场景，它可能是医院、企业大楼、社康、疾控中心等等；合作方式同样独特，我们做出的任何一个设计都是需要客户过目的，每一个字段甚至都涉及到生命健康与安全，所以会要求我更高标准地了解行业与用户，促使我们在项目前期去不断学习和应用一些用户研究知识，使设计更加贴近用户。
过往经历中，总结了用户研究在各阶段的介入场景和方法，接下来会具体讲下在医疗健康项目中的运用。
企业健康项目是从一个合作开始的，公司的行政部门想要通过我们提供的健康管理产品来提升员工整体的健康水平，并将该方案进行复制从而提供一个企业健康管理的行业解决方案。
的确，员工是一个企业的宝贵财富，健康有活力的员工群体对提升企业生命力有着非同一般的影响。通过网络文献调研，我发现国内企业的亚健康状况并不乐观。
△ 国内企业健康现状
第一阶段用研——产品定义与设计方向
为了更了解员工和企业的真实情况和痛点，我们规划了用研计划，列出了三个用研目标：
目标1: 员工们的主要健康问题都是什么？
通过和企业方的沟通，我们发现员工的体检报告是挖掘健康问题的源头，于是我们由此开始研究。
首先，我们拿到了历年的公司员工体检数据统计（脱敏分析），整理出体检问题的Top10。
△ 腾讯2018年体检数据统计
获许可，我们也随机向外发放问卷，了解到一些公司职工最想要改善的问题。
△ 某大厦的用研报告（仅作为分析用）
目标2：企业现在所提供的服务有哪些问题，该如何改善？
B端: 由于这是一个B to C的项目，我们优先会去采访企业端遇到的问题，沟通发现企业都会投资提供的健康设施（体检，食堂，健身房等），其中很多设施并没有被充分利用，或是没有得到合理的分配，现有的线上预约流程也存在很大的后台计算成本。
△ 腾讯提供的健康服务与设施（非疫情期间拍摄）
C端: 通过公司内部招募和访谈了20名员工，我们总结为三个主要痛点：
△ 员工在体检健康中遇到的痛点
以上，我们也对企业客户与员工用户的诉求有了初步的了解。
△ B&C两端诉求分析
目标3：如何定义产品目标与设计目标？
通过以上分析，和其他合作团队一同讨论了体检与健康管理行业的现状和盈利点，我们最终确定了产品方向：通过加入AI技术，分析用户过往体检数据来给用户推荐最合适的体检套餐，帮助用户解析体检报告转化为更加易懂的方式，加强与医疗服务的定制化连接；并智能定制最适合员工的管理方式和行为，充分利用起公司资源。
△ 产品形象与定义
通过对整体流程的用户情绪地图分析，我们得出设计的关键词：专业，贴心，安全
△ 阶段情绪地图分析
知识点1: 访谈与问卷调研
不要一上来就直奔主题，可以先问一些简单回答的问题和闲聊，让用户进入放松状态时再聊重点问题。且要时刻关注受访用户的状态，比如：是不是开始疲惫，回答过于发散以及表达意思模糊等等。遇到这些问题，需要随时做调整。
访谈的时候最好不要单独行动，要有1个主导访谈的，一个记录的。如果访问过程很长，有条件以及受访者允许的情况下，可以进行录音有助于后期的整理。
访谈结束后，最好是当场，或者至少应该是当天就完成本场次的访谈记录和总结工作。因为根据遗忘曲线，人在20分钟后将遗忘42%的内容，而1天后则将遗忘74%。即使有录音笔记录，你也会忘掉很多细节的，诸如表情，用户的潜台词等等。想到的设计解决方案也可以先记录下来但不急于放到总结当中去。
第二阶段用研——产品与设计验证
确立了目标和方向，我开始从体检预约和检后管理两部分来进行设计，由于在前期建立了用研机制，我们会定期对重要版本的内容和信息设计进行测试验证，并让用户基于我们定义的设计标准来打分，判断是否达到了专业，贴心与安全。
卡片分类-测试内容与排序
在检后的体检报告解读中，我们需要对解读结果进行结构化展示，方便用户快速获取有用信息，提高阅读效率，由此我们运用了卡片分类法，让用户对其重要性的排序，得知对用户来说体检异常中的单项的指标解释>危害性>指导措施。
△ 卡片测试与分析
可用性测试-测试架构与信息形态
体检解读的首页我们绘制了三个版本的方案，来突出不同的信息通过制作原型demo来进行可用性测试，让用户选出最喜欢的并说明原因，最终选择出一个最优方案。
△ 体检解读首页可用性测试与分析
从弹窗内容组合到内容的体检解读指标的可视化设计我们都做了用研测试版本
△ 体检解读内页信息测试稿
最终得到更加符合用户认知的体检解读设计。
△ 体检解读设计
灰度测试与深度访谈
由于某些需求时间紧迫，例如体检预约，当时很快就要到体检季，于是我们快速搭建框架和基础功能的设计，细节疑问点列出后进行灰度版本测试，并对前期招募的种子用户进行测试访谈，总结现存版本的问题，同时我们也访问了企业侧，把他们的优化诉求纳入考虑。
△ 体检预约访谈脚本与测试结论
比如企业要求突出安全感，福利感与智能推荐，减少后台结算成本等，我们便通过明确隐私授权认知的全页面弹窗以及简化体检预约流程，2步变1步，增强页面福利与智能推荐的感知渲染来满足客户要求，也得到了满意的赞赏。
△ 隐私授权设计
△ 体检预约设计
以上的用研方法其实可以运用在大多数的项目中，于是我在后续的腾讯健康模块设计中也常会去使用，例如疫苗设计中的闪屏方案测试等等。需要注意的是用研应该被列入到日常的流程中去，而不能作为临时安插，需要在项目实施前就进行用研计划的拟订，才能保证我们和用研同学有条理地客观的进行调研和验证。
知识点2:卡片与可用性测试
就医流程是看似并不陌生的场景，痛点也非常明显，就是常被提到的「三长一短」问题（挂号时间长，支付时间长，问诊时间短），于是在进行线上就医服务设计时，很多人会认为没什么好特别调研的，竞品也非常多。
然而其实在设计中，最害怕的就是「我以为」。记得在做某医院的就医服务项目时，由于就医环境和用户非常复杂，所以我们在做这个项目时坚持去到了前线进行了实地考察与影子观察法，才发现了新的洞察。
实地考察中的望闻问切
说来很巧，现场的调研方法其实和中医中的「望闻问切」有异曲同工之妙。
△ 医疗场景用研方法
「望」：可理解为影子观察法：选择最能反映问题的时间和场景去观察用户行为，发现痛点，经过几天的观察我们发现早上8-10点是医院看病的高峰期，也是排队最严重，院内最拥挤的时期，所以我会在这两个小时集中观察和记录患者以及医生的状态。
「闻」：即为倾听，其实也是访谈法中很重要的一个原则，多让用户去诉说，减少自己的主观判断干扰用户的完整陈述，如果记不下可以录音。
「问」：根据我们想要了解和观察到用户的行为进行提问。
「切」：这里和中医中的切诊接触不同。是指切身去体验患者的感受，比如我会根据自己身体的某些不舒服去挂号体验流程，情景带入。
以上的实地考察后，我在第一时间用我们设计师的手法来记录整理：体验地图分析，并通过讨论提炼出设计的关键点：引导，连接，合并与转化。
△ 用户体验地图与关键点分析
知识点3:影子观察法
用户体验地图的落地应用
这四个设计关键点其实来源于痛点描述中的一些高频提到的情况，拿引导和连接这两个点来说明。
引导：通过观察发现，用户在嘈杂的就医环境中本处于极度焦虑紧张的状态，对信息阅读和处理的速度低于平时的好几倍，因此我们需要提供具体的，正向的引导。
△ 精准预约设计
连接：通过访谈和自己实际的体验发现，许多线上和线下的服务之间是断层的，一方面需要流程上连接我付了款下一步要去哪，怎么拿药；另一方面我们也发现线下的引导设计是一个非常重要的连接机会点。
于是我们从线上和线下两方面进行了连接，提供了一套整体的解决方案。
△ 候诊与取药签到设计
△ 医院物料布局与落地布置
通过用户关系图了解了每个相关利益人的人群要素和诉求，在设计中不仅会考虑针对他们的设计，也结合体验地图中的机会点引出了设计原则，作为设计的指导和验证标准。
△ 相关利益人分析与设计原则
测试与收获
上线后，我们穿上志愿者的衣服，去往前线进行现场解说和用户测试，经过一个月的努力，真实感受到了现场效率的提升和满意度的提高，院方和使用过的用户都非常满意，这也让我们设计师切实感受到了欣慰和成就感。
△复旦大学附属肿瘤医院病理会诊 整体服务上线前后对比
这得益于我们能长时间与用户在一起，真实地听到了他们的声音与感受，也把想法落地去帮助他们解决了问题。这个过程中，让我们发现类似的垂直领域需要去到前线自己去感受，而不是隔着屏幕去观察，每个人的思考角度会不同，会发现新的问题和洞察。
知识点4:用户体验地图
在医疗数据分析的场景中，我们面对的客户是政府和医院领导。相信在做TO B设计的小伙伴经常会遇到这样的问题：客户时间比较难约，给的调研时间有限；决策层客户思考的比较广而泛，很难深入用研。
基于这样的问题，我们想出了一个根据客户群体层级，区别调研的方法。
梳理角色
去年年初，我们曾走访多家公立和私立医院，优先通过管理层梳理出了关于数据处理上报的流程。他们对数据的关注度和处理顺序往往是有一个自下而上的上报过程，基层人员进行每个月度和季度的数据汇总，分析与简单的可视化表现，上报给部门管理和上级管理者进行审核提炼，最终给到管理决策者一些关键现象和趋势和对比。
由此提醒了我们，想要提供一个完整的数据解决方案，就需要绘制角色面板，区别调研目的与手段。
△ 医院层针对数据的处理流程
分角色的沟通用研
我们确立了针对基层人员，中层管理者以及决策管理者的用研目标并展开了差异化的沟通用研，我们会每个角色找1-2人和我们3-4个同事坐在一起，以焦点小组的方法一同脑暴某一数据场景和所需数据。
△ 医院数据现场用研
数据研究与总结应用
根据对医院不同角色的沟通梳理出了一些总结点，运用到了产品和设计中。
第一：我们发现了管理者们最关注的一些医院数据的形态，并打算把基础数据尽量以对比，警示等手段进行分析与场景描述。便于管理者直观获取他想要获取的辅助决策信息。
第二：根据不同角色提供针对性的角色面板，并梳理出个角色关注的数据模块和现象。
第三：各角色具体数据字段的梳理与总结，并进行了频率的标注便于后续的设计面板规划。
第四：调研中发现领导层在看数据时需要来回切换系统，且看起来没有一个统一的路径和条理，因此我们也和对方沟通，通过故事化的手法进行数据分析的流程体验设计，层层深入和下钻，从现象挖掘到问题本质。更加符合了用户看数据的顺序和认知。
△ 长沙超脑项目设计版图
除此之外，我们后面的产品和设计的汇报也会根据角色的差异来进行内容的调整，让听我们说话的人可以快速理解我们想要达成共识的内容，加快沟通效率，提升了在客户心里的印象。
这个过程中，通过用研让用户感觉到我们懂他们，并让其增加了参与感，对产品和设计都是一个推进器。
知识点5：TO B/G客户用研
说了那么多设计师在用研技能上的应用，也许有人会有这样的疑问：如何可以不断提升自己在各方面学到的技能呢？一年前读到《刻意练习》这本书，给了我一些启发，在此总结给大家，希望对你们有帮助：
1. 制定具有定义明确的特定目标
「提升专业」是个很大的词，所以我们往往定了一个很大的目标，然后被各种事情拖着然后抛之脑后。因此拆分目标才是第一步。比如最开始做交互时我发现自己在归纳场景时总会缺失，再比如每次自己在汇报总结时，耗时过长，缺乏重点，那么这些都可以被列入要提升的小目标，总之目标不要太泛太难实现，这样实现起来会更加容易，也更容易坚持和自我激励。
2. 持续学习与专注练习
研读多本相关专业书籍，并应用的项目中去。这是我的一个目标也是方法。投入项目后，我们往往会陷入事件当中，甚至会就一个点和产品争论不休。但其实跳出来，去看些新思路不妨为一个好方法。
比如我最近在读《感官心理学》这本书，提到人们对于「软」和「硬」的触感印象会延伸到女性和男性的联想上，提到女性人们自然都会有柔软的印象，男性则会有刚硬事物的联想，这也就充分佐证了对于不同性别上的设计形态差异。类似的小实验可以帮助我们的设计更有说服力。
大多时候理论知识很枯燥，也难以一时间就可以用到，但只要你读过，在需要的时候它就会突然跑出来给你灵感。
专注是我一个单线程人的特点，我很难在一个时间里同时处理多件事，所以我会每天根据要完成的训练目标，把时间进行划分，个人感觉这的确产出效率也会高一些。
3. 一定要有反馈
每一次的练习必须要得到反馈，这也是评审的重要性。但其实不同的目标点可以对应方面的专家，不仅限于leader了，同事也是很好的老师，比如我会去发现身边汇报比较厉害的同事，帮我把关。只要遇到问题，一定不会放过去问用户研究同学的机会。
某方面没有老师怎么办？让用户告诉你！首先我会常用可用性测试的方式去检测自己的方案中的信息传达，交互反馈等等在进步，另外我也会在每个项目后整理一个小总结，来记录自己的思考与进步
另外，以下是我在用户研究学习中读过的几本书，推荐给大家～
面对飞速发展的现在，各行业的产品也都在积极转型，例如开始涉足TO B行业和客户，开始研究00后的新生代用户，面对新事物我们设计师更要保持敏锐的眼光，利用自身的设计洞察能力去挖掘新的问题与方法，于是新的技能和方式也开始出现，所以我们一直认为产品体验设计师没有一个固定的能力模型，还是要根据你所从事的行业和产品来发现所需的技能点去发挥价值。学习的过程中，我们成就项目的同时也在慢慢成就自己。
文章来源：优设 作者：腾讯 April
通过一个案例解释那些让你们看得有大的交互专业词汇
UI 和交互这两个词汇是一对孪生兄弟，有非常密切的联系，我们在前期了解 UI 的时候“交互”这个词总是形影不离，出现的频次极高。
但是，从我开始学习 UI 起，就被它困扰了非常长的时间，并不是苦于如何在实战中应用，而是在中文语境下，交互有关的词义实在是太“玄学”了，网上对它的解释多数也含糊不清。
比如看百度词条里，交互本身有两种解释，我们分别来看一下。
1.交互：指替换；互相；彼此。语出《京氏易传·震》：“震分阴阳，交互用事。”（阴阳……难道是我想的那个意思？）
2.交互：通过某个具有交互功能的互联网平台，让用户在上面不仅可以获得相关资讯、信息或服务，还能使用户与用户之间或用户与平台之间相互交流与互动，从而碰撞出更多的创意、思想和需求等。（交互使人类进步？）
单就这个词，如果词条看不懂，多在网上搜索相关的信息，咂摸个10天半个月的，是可以对它有个大致的认识。我会用一个比较简单词来概括它 —— 相交互动。即人和机器有了接触并产生操作、互动的整个合集。
好不容易把这个词搞懂，但是，交互事件、交互操作、交互方式、交互流程、交互原型、交互设计、交互文档、交互体验、交互动效……又是什么意思？
当我们在网上看一些交互相关的分享，你就会感受到这种混乱，比如下文截图的这种表述方式。
这是我非常不喜欢的风气，通过非常生硬的专业名词包裹自己的思路，去总结一个非常简单易懂的道理或原则，也就是俗称的 “不讲人话”。
所以，对于这个问题的反感，我打算自己做一篇 “接地气” 的分享，对交互的基本常识做一次扫盲。
针对这些解释，我找了一个我自己课程学员正在处理的真实案例作为依据，并进行改版优化，来解释所有和交互有关的名词具体含义，以及对应的实例是什么。
先看看下面这个案例。
Protopie线上可交互稿：https://cloud.protopie.io/p/a66d68949d
围绕这个案例开展，该页面是公司内部人员使用的订单管理页面，订单代表的是为客户上门测量门框门扇数据和进行设计定制的服务。
再详细点解释，就是销售找到定制门的客户，要创建一个销售订单，填写客户的基础资料信息，然后设计师会上门进行进行测量，并将测量结果和定做要求编辑进去，以及填写具体定制参数，还有服务的价格明细。
这个页面与公司内部的四个角色有关联，分别是销售客服、设计师、财务、派单员。
销售客服：联系到客户以后，确定客户的资料信息基本需求，然后创建订单填写基本的客户资料。
设计师：设计师在看见订单后需要上门进行测量沟通，并给出方案确定报价，然后将明细也记录到资料中。
财务：财务在做账的时候有时候需要进来订单查看具体的明细和数据。
派单员：派单员要根据订单内的具体数据要求，联系仓库进行准备和发货（进销存管理）。
说到这里，大家应该还已经对这个页面是做什么的有了基本的认识了把。那么我们先不讨论它的优缺点，就来讲讲上面的交互名词在这个页面中的对应实例。
人机交互：就是指上面销售、设计、财务、派单四个角色进入这个页面，编辑信息、查看信息的所有操作和行动的合集。
交互界面：该页面可以进行操作和编辑，就叫做交互界面。
交互操作：交互操作就是指我们操作这个页面的行为方式，该页面目前只有两种，点击（Tap）和上下滚动（Scroll）。
滑动Scroll
点击Tap
交互方式：这是软件允许用户操作的规则，比如想要选择设计师，就要通过点击 “设计师” 栏目，在弹出的选择器中，通过滚动列表来选取指定人选的方法，就叫交互方式。
交互事件：交互事件是指整个人机交互中的其中一个独立事件，比如上面案例讲的，点击设计师触发选择器弹出的事件，就是一个交互事件，在选择器列表中选择具体设计师，也是一个事件。
交互流程：交互流程是完成一个操作目标的操作流程，范围可大可小。比如上面选择设计师的全部操作流程，可以定义为一个交互流程。而完成整个页面信息录入的过程，也可以成为一个交互流程。
交互动效：比如选择设计师的交互流程中，点击设计师选择器的动画效果，就叫交互动效。交互动效是由交互操作触发而成的，方便用户理解界面的内容，而不是任何在UI中看到的动效都叫交互动效，比如下图这种。
交互体验：它和产品、用户体验还不太一样，专指用户在交互流程中得到的体验，维度并没有覆盖产品服务、情感化设计。
关于交互设计、交互原型、交互文档，我们在下一个部分讨论。这里的结尾我们就来讲讲交互体验，交互体验的评判维度有很多。但抛开所有技术分析，我自己将交互体验的结果简化成 3 个：难用、能用、好使。
交互体验的好坏不是产品、交互、设计师、程序员说了算的，是由用户来评判的。所以产品和设计行业都会强调 “共情” 能力，可以站在用户的角度来审视我们做出来的东西，而不是呆滞的上帝视角。
之所以挑这个案例，就是因为即便作为读者的你们，应该也可以想象如果你是这个页面的操作用户，那么体验一定会非常差，虽然它功能可能是完备的，但一定是 “难用” 的。
而对难用的分析上，绝对不是直接去套理论分析哪里难用，而是先找到难用的原因。
这个是多数新手会犯的错误，不站在业务、用户的角度去使用应用，找出原因，而就指望着去套理论套公示来对这个界面进行 “专业分析”。
所以这里我们简单讲讲，它的主要问题：
页面菜单选项太多，操作起来感觉压力非常大
菜单内容的分布感觉混乱，很难形成记忆点每次要设置的东西在什么位置
不同角色对这个页面的功能诉求不同，现在的设计显然没有满足
在得到上面三个问题以后，我们就可以对这个页面做出新的优化。 而要优化交互，我们就要首先从交互原型入手，即根据我们的想法设计出可以表现交互方式、交互流程的原型图，比如下图案例。
Protopie线上可交互原型：https://cloud.protopie.io/p/838165bdad
交互原型和产品原型不一样，产品原型是用来解释产品经理自己对产品功能的规划，不需要着重考虑交互体验，逻辑能跑顺并且能讲清楚即可。
而最终的设计稿，就是基于交互原型的基础上，遵照它的交互方式、事件、流程展开视觉内容的填充和细化。
我们再回到这个改版过后的案例，讲讲我们在交互原型中的流程给大家一点启发。
首先这个页面的所有菜单，并不是只有一个人完成填写，最起码要由派单员、设计师两个人，而财务、派单员进入到这个页面中，通常会有明确的目的要查看哪一部分数据，其它的数据信息对于他们而言都是干扰。
所以，我们将所有数据类型进行划分，统计结果如下（大致规划，了解意思即可）。
完成分类后，旧版中只使用上下滚动查找菜单的方式显然是不满足实际需要的，所以我就根据内容的划分创建一个分页栏的形式，将不同类目的菜单对应进行匹配。
当我们要查找某个具体元素的时候，首先选择对应的分类以后，再在分类下方查找。并且我们还引入一个新的 “交互方式”，可以通过左右滑动的 “交互操作” 来切换分类页面。
并且这个分页器栏目也可以进行标识，你的账户对这些内容的权限如何，比如 “不可看”、“只读”、“可编辑” 等等。
而每个分类下方，对它们再做一次逻辑分类，还有区分必填项和非必填项。如果有大量非必填项目为空，那么对于信息的查阅检索都是干扰，选填内容是用户需要填写的情况下才会去填，所以我们将每个分类下面的必填和选填也作出拆分，默认将选填菜单进行折叠（也可以是默认不折叠）。
这样，我们就可以得到一个你没有想到的 “船新” 版本。相信大家在这个版本的交互体验肯定比老版好出不少。
当然，这只是对交互流程的其中一个改版，并不代表我们的交互只能这么改而已，实际项目中，优秀的设计师都会提供几种不同的版本进行评审和测试，挑出其中最优的方案。
比如，我们可以不把分类页面做成左右滚动的，而是做成上下滑动的。
所以，在了解上面两套交互原型的案例，我们就可以再来介绍交互设计（UE）了。交互设计就是制定用户操作界面的流程、方式、体验的设计，和界面视觉设计并不能划上等号。
虽然过去行业里喜欢强调，将交互设计 (UE) 和界面视觉设计 (UI) 岗位拆分开来，但这不是一个太合理的现象，对于多数业务和团队来说增加 UE 岗位只是平添负担而已，未来的大趋势是由 UI 设计师负责交互设计的内容，当然也有个洋气的新名称叫 UX。
最后，在完成了上面这些内容的设计和规则制定以后，事情还没完。专业的 UE 和 UX 还会提供一份文档叫 “交互文档”，除了将交互原型图置入进去以外，还要具体来介绍它的交互方式、交互事件和交互流程的说明。
基于时间原因我就没办法提供一份基于这个案例制作的交互文档了，大家只要明白，如果我没在一个地方标注可以通过左右滑动来切换页面的方式，或者默认状态下选填内容是展开还是关闭之类的信息，那么最后落实到开发环节中可能就会导致很多细节问题的错误。
以上，就是我们关于对交互有关名词扫盲和解释的全部内容了。学习交互，要先从这些名词的认识开始入手，搞清楚底层的逻辑和原因，然后再通过实践和分析来积累对这部分内容的经验。
只有深入去了解业务，并站在用户角度审视，勤于思考的设计师，才能在交互领域中有所建树，理论知识只是其中嘴不重要的一环。
下面再把所有涉及的名词罗列一遍做个总结：
人机交互：用户和机器、软件实现操作和互动的过程。
交互界面：可以用来进行交互和操作的UI界面。
交互操作：用户操作软件、界面的具体操作，比如单击、双击、长按等。
交互方式：软件允许用户操作的规则，比如按钮的交互方式要通过点击才能触发。
交互事件：没完成一次交互操作并获得反馈的事件。
交互流程：用户为完成目标所做的一系列交互的合集。
交互原型：用来确定产品交互方式的原型图。
交互设计：制定用户操作界面的流程、方式、体验的设计。
交互文档：用图文记录交互思路、具体交互规则的文档。
交互动效：用来协助交互操作明确交互事件的动画效果。
交互体验：完成交互流程后所获得得感受。
完！
转自：站酷-酸梅干超人
在页面导航栏中，常会见到返回、取消与关闭三者按钮。许多同学会弄混它们的使用逻辑，所以写一篇小文帮助各位梳理下。
先抛开图标，我们回到功能本身的含义上看。如果我们不在产品的语境里，就单看「返回」和「关闭」这两个词，你首先会想到什么呢？
当我这么去问自己的时候，脑子里出现的并不只是零碎的词语，而是一些场景和画面。比如我走错路了，需要原路返回；公司复工了，我要返程回去。或者，睡觉时间到了，我该关闭电脑了；饭菜烧好了，我得把油烟机关掉，等等。
如果仔细去想的话就会意识到，语义衍生出来的，都是我们日常生活中的经验和对世界的认知。产品中使用的各种语言，不管是文字也好，或者图标图形也罢，一直都是以我们对它最本能的理解为基础的。所以只要你联想自己对「返回」和「关闭」的看法，就能知道它应该在什么样的产品情境中出现，以及它为什么会出现。
于是，很自然的，我们会把「返回」和「路径」联系在一起，所以「返回」在导航设计中不可或缺。并且「返」也预示着我们会回到之前的路径节点，整个过程是连续性的，不被切断的。而「关闭」就完全不一样了，它一般和我们的动作有关，是一个短暂性的操作，相比返回也显得更为独立。
根据我们对语义的判断，再结合实际产品中「返回」的场景，我们可以概括出「返回」和「关闭」的特征差异。
1. 返回
连续性：按照产品的页面层级顺次跳转。但存在特殊情况，因为有些产品定义的功能出入口是不一致的，在信息架构层级已经做了一定的优化，所以返回不一定会按原来的路径回去，可能会按产品既定的路径。比如网易云音乐歌曲播放页进入直播后返回不是到播放页。
整体性：在产品功能页面关联性较强的功能中，「返回」需要连接各个页面与层级之间的架构关系，因此「返回」作为操作节点，可以帮助产品功能的各个页面之间建立联系，维持产品的整体性。
2. 关闭
非连续性：用于产品中的临时内容或临时动作，比如弹窗或活动页，与上一级页面没有直接关系。
独立性：非产品原生内容或是产品内的独立内容。比如小程序、浏览器标签等。
3. 返回和关闭的使用场景
知道了返回和关闭的特征后，我们可以从两者的使用角度上再去梳理一下。
现在产品中关于返回和关闭有三种状态：
1 和 2 的情况很好理解，我们只要根据前面各自的特征去看就能够理清场景。
3 的情况会有特殊性，因为它同时具有返回和关闭这两种看起来相矛盾的特性。其实这是由内容决定的，当内容同时具有独立性和整体性时，就需要支持两种操作。如小程序可以作为一个独立功能，但其本身又可以看作是一个完整的小产品，具有自己的页面结构和页面层级。所以小程序对于它所属的产品，我们有关闭的需要，小程序内的页面导航又需要返回来实现。
除此之外，产品可能开始只有返回，后面临时出现关闭按钮，比如微博「疫情地图」中使用「小区疫情查询」和「7×24 小时疫情快讯」后会出现关闭功能（帮助用户快速退出）。
这里我们可以从连续性和非连续性的角度看，产品针对具有复杂层级和内容的页面设计了顺次（返回）和跳页（关闭）的导航方式，其中关闭随实际情境出现。以此为用户提供了更为灵活的导航路径，来同时满足用户逐级深入、连续返回浏览和选择性查看、临时关闭的需求。
针对于「关闭」，它和「取消」会有重叠的含义，所以有时并不能很好地去区分这两个功能表达的应用场景。于是，我们可以借用之前的方式，先把「取消」单独拿出来理解。
一般来说，「取消」意味着行为过程中，还有后续行为，整个过程没有完成，当下后悔了，因此取消了当前操作。它更倾向于表达我们主动去做了什么改变，然后中途放弃了。
比如，想煮个饭，于是下了米，倒了水，定时，确认（取消），完成（关闭）。
这时候中间如果突然不想煮饭了，在定时之后，就停止当前行为，那就是取消。但点了确认并完成煮饭之后，这个行为就结束了，只能关闭。因此，它们之间就是行为上的差异。
就好比，打开微信公众号文章，内容已经加载出来，行为已经产生并结束，这时候左上角就一定是关闭。而发朋友圈的时候，左上角是取消，那是因为行为过程还在继续，没有发布，所以可以取消。而发布之后，就无法取消，想要关闭，也就只能删除这条朋友圈了。
所以在操作行为中的页面，左上角最好是使用「取消」。
当我们对词的含义有了进一步思考后，就可以去看它们在产品中的表现了。
比如广告的关闭、推荐内容的关闭。都是产品自身提供的内容，用户不想看到就选择关掉了，没有试图去改变什么。
包括内容页面，或者活动页面，被点开，且加载完成呈现出来之后，这个行为就结束了，没有取消的概念，只有关闭。
再比如，选择图片文件时的取消，微信发朋友圈、微博发帖时的取消等等，我们能发现都是用户主动采取了什么措施，但是又后悔了所以选择取消。
或者如游戏设置，就不适合用关闭，会让用户在理解上产在歧义，比如用户设置到一半，不想设置了，那现在关闭的话，设置是生效了么？所以用取消会更合适。
这些时候，不存在关闭的概念，因为没有内容可以关闭，只能是取消当前行为。如果使用关闭，与该场景下的用户行为不符，反而增加了用户对文案的理解成本。
简单来说，取消强调的是放弃改变，关闭强调的就只是抉择。
不过这里也有一个特殊例子，就是，微信公众号文章转发给好友，左上角是关闭，而钉钉里面内容转发给朋友，就是取消。为什么呢？
在一些特殊场景之下，「关闭」是包含「取消」的。
好比刚才煮饭的例子，现在的电饭煲很高级，如果在过程中不想继续了，拔掉电源就是完全关闭了，但同时这个行为也包含了人不想继续煮饭这个行为，想取消掉了，所以这时候关闭是包含取消的。它跟文章加载完成，已经呈现出来，是不一样的。
而上面这个微信与钉钉的例子，就存在这种包含关系。比如，内容已经加载完，要分享给好友，这时候加载出来的好友列表已经出现，只是选择发送给谁的问题，用户可以关闭已经加载完成的好友列表页面，或者理解为用户打算取消当前行为。
不过这样的设计并不建议大家将其定义为关闭，因为毕竟行为还在继续，使用取消反而更容易理解也更符合场景定义。
譬如，PC 的弹窗经常会同时出现叉（指代关闭）和取消，虽然操作的结果都是使弹窗消失，但是用户的操作目标是不一样的，事实上这里提供了两种选择，即我不想做决定，我要关掉弹窗，以及我决定现在不这么做，我要取消这个动作，这里的关闭其实就暗含了取消的动作。
在 PC 端，我们有足够的空间为用户提供不同的选择，给予用户充分的自主控制权，以满足他们对功能的不同期待。而在移动端，我们需要删减或合并功能，所以当用户同时产生重叠的诉求时，我们往往会选择当下最符合用户心境的功能，这是「场景细化」的结果。这也能解释为什么现在很多 PC 产品的弹窗中也只会保留取消，而不提供叉（指代关闭）的选择。因为用户面对功能不知所措、不做决定的情况已经越来越少，更多的用户已经明确地知道自己应该怎么做。
这就是「取消」和「关闭」的差异，以及移动产品对两者的取舍的根本原因。
同样的，有一些页面，取消和关闭都会用叉的图标来表示，只是在不同情境中，这个叉同样可以理解为取消，关闭，以及取消或关闭。差异点跟上述内容相同。
返回、取消和关闭看起来简单，深入分析后又显得复杂，但相对复杂的分析都只是为了能简单地去运用。在这个问题中，每个人都可以从自己日常的经验出发，然后在产品不同的语境里去体会一个词语、一个图标背后隐藏着我们什么样的认知和使用的习惯。
那由这个问题延伸的，其实还有产品的导航方式，页面出入口的设计差异，产品中整体与独立，连续与非连续的内容结构，原生与非原生页面的差异等等。
小问题同样可以见大，但我们也不需要过度思考，本来问题的解读角度就是因人而异的，也无法面面俱到，上面的只是我的理解方式。设计还是需要回归到用户和产品的目标，再去结合场景和产品业务的使用模式才能得出合理有价值的方案。
文章来源：优设 作者：呆呆U理
保持好奇，巧妙融合，追求卓越，自然而然
蓝蓝设计的小编 http://www.lanlanwork.com