企业级产品中常见的问题 腾讯企点 产品线，包括客服、电话营销、商通等 SaaS 产品，产品受众角色多，业务场景复杂，由于角色与场景的复杂性，在产品设计中也遇到了一些问题：

腾讯企点往期实战案例复盘：

腾讯实战案例！企业产品如何做好用户教育系统设计？ toB 产品具有逻辑复杂、使用门槛高、试错成本高、用户角色多样化的特点，通过用户教育设计向用户传递产品价值，提升产品易用性与可学性。

阅读文章 >

1. 产品界面信息量大，操作繁琐

任务流程复杂；

界面信息量大、复杂度高；

核心功能操作步骤繁琐

2. 产品功能复杂，用户难 get

新功能透传不够直观；

视频等功能透传效果好的形式制作成本高；

3. 品牌形象对外宣传不统一

品牌动态对外宣发文章/素材 logo 缺乏统一形象。

面对上述问题，除了常规的交互视觉优化外，探索基于动效的方式来解决企点在用户体验、用户教育、品牌传递三个方向的问题，提升用户教育效果，标准化视频制作流程提高视频质量并降低制作成本，建立可持续的 动效设计 系统，规范 动效 在产品内外的设计，提高易用性与统一性。

基于上述三大方向遇到的问题，我将从以下三个方面来介绍：

Part 1 巧用动效，提升产品体验友好度

Part 2 动效传递功能亮点，产品特性秒 get

Part 3 基于品牌内核，建立动效设计系统

Part 1.巧用动效，提升产品易用性 任务流程复杂？- 聚焦核心任务、优化信息布局与优先级分层

结合场景梳理任务流程，通过动效将界面信息层级与操作优先级结合，聚焦核心任务，从而降低界面信息复杂度。

知识库内容展示层级优化

在客服工作台中，访客的问题命中了知识库的内容，则会展示知识库的预设内容，辅助客服进行回答，以提高接待的效率。由于每个问题对应的回答内容长度与形式不一，如果直接展示这些信息，有可能会导致寸土寸金的聊天窗被辅助文本占用过大的区域，影响客服操作。

因此在设计策略上，需要将信息进行分层，将命中内容拆分为摘要和全部信息，当触发知识库的内容时，先展示摘要，客服可以快速判断是否需要，如果是则进一步展开查看全部信息，确认无误后发送给访客或者编辑后发送给访客。

通过动效，将命中内容改为抽屉式的展开与收起，把信心拆分成多级展示，既保证了整体页面区域的信息展示，又能够通过简略信息判断下一步的操作，提高了操作效率。

客服工作台信息响应规则优化

在工作台左侧最近会话列表不同角色有不同的信息展示：

标签是判断客户的重要信息来源，以往的标签存在单个标签字数显示固定 3 个，标签数量显示固定 3 个的问题，导致标签可读性低、容易产生混淆、空间利用率低。

因此优化的策略是在有限的空间内展示更多标签，且不降低可读性，这里分两个维度考虑：1.标签展示的数量；2.标签内文字数。其一是影响判断客户的维度，二是单个标签信息展示的可读性。

通过动态的响应规则，优先满足可读性的情况下，充分利用空间，客服标签信息快速在列表中判断不同的客户，根据实际需要选择应答，提前做好话术准备，提高接待效率与服务的质量。

界面焦点分散？-强化视觉吸引与视觉反馈

动效可以吸引用户的焦点，在基于浏览器的中后台界面中，使用者大多是多焦点工作，以提高工作流的效率，对一个工作流中的功能，适当的环节加入动效，可以引导用户按照预设的流程工作，从而提高单点功能的预期效果。

提高机器人回答反馈收集率

客户与客服沟通过程中，企业会引入客服机器人对客户服务以降低人工成本，初期接入机器人回答的能力后，存在未能解决用户问题的回答，除了通过算法进行调优以外，在功能设计上也需要为用户提供反馈通道，通过点赞或者点踩，可以疏导因机器人回答不准确导致的用户情绪，并帮助机器人优化回答精度，利用 hover、press 等操作方式，引导用户反馈，手型变化趋势亦可降低点错率。

功能指引内容外露，提高用户教育效果

企点中后台页面中，部分功能比较复杂不好上手，将帮助内容做成视频的形式可以提高用户教育效果，为让帮助内容触手可及，在中后台配置页的右下方集成播放组件，为企业提供更专业的配置指南，每次进入页面时，自动展开具备吸引力的文案，在一段时间后收起。

在合适的时机通过展开的动画吸引用户转移焦点，自动收起逻辑避免用户不需要的情况下遮挡页面的内容。

操作步骤繁琐？-优化层级减少额外步骤

核心路径的工作流中，引入支线的操作往往会打断主线任务的操作，降低主线工作流效率，将支线任务通过同一界面的不同层级进行优化，以降低对主线操作的影响，从而提高主线工作流效率。

快捷回复层级简化

快捷回复是客服的高频核心功能，在 PC 端我们利用 hover、双击等多种交互方式可实现快捷编辑与发送，但移动端交互方式以触摸为主，如何让移动端也有类似 PC 端的高效操作呢？

在页面层级，移动端定义了一套弹层页面规范，弹层的应用场景为临时的操作或展示，在于不打断操作流程，减少页面跳转。

快捷回复的内容用弹层来承载，减少页面间的跳转，并利用层级关系做不同层级间的交互，也可长按拖动直接发送，在习惯这种发送方式后，可以更加直观高效的发送快捷回复内容，也减少了操作步骤。

Part 2.动效传递功能亮点，产品特性秒 get 产品功能总被忽略？- 氛围动效吸引用户驻足

经常会遇到新的产品功能使用数据不理想的情况，也许是内容透传的时机和内容本身不够吸引力，从而被用户忽略，将产品的核心能力与具有吸引力的内容结合，往往可以达到更好的透传效果。

客户端新手引导氛围渲染

新用户首次打开客户端时，需要进行一些简单的设置，用户对于弹框形式的新功能会下意识的点击右上角关闭，阻碍了功能的介绍和初始设置的完成度。

客户端的弹框受众和对应的目标为以下三种：

新用户首次使用：需进行简单的设置，同时承载核心亮点功能的透传； 老用户版本迭代：新版本升级后对于版本一系列的新功能介绍； 老产品升级用户：除了新老用户外，企点还存在从老产品迁移至企点的老用户，因此更多是介绍两者的不同，企点的优势等。 弹框内的信息比较重要，设计方案上考虑动效的形式，在首屏吸引用户关注，提高点击率。

通过轻松自然的客服形象，围绕企点轻快、亲和的品牌元素，周围的聊天气泡代表高效的消息处理，营造出轻松高效的氛围。

针对老产品升级用户，动态语义上强调穿越到新世界的感觉，表达了新产品完善的功能：

动态引导图上线后，相对于以往的静态引导方案，点击率有约 50%的提升。

电子行业商机应用氛围渲染

在电子行业商机应用中，商机对于中间商来说意味着成单与获客的机会、销售额的增长，用户首次进入时会有动态商机墙，铺面满眼的商机，在告诉用户使用这个应用可以获得海量的商机，除了吸引用户的效果外，也起到传递产品核心能力的作用。

在商机列表页也增加了轮播广播，商机热度等动态，营造出热闹、紧俏的商业交易氛围：

宣传视频流程化，提升产出效率与质量

做好产品的同时，如何卖出去也同样重要。在销售过程中，传递产品的亮点与能力，最终打动决策者，可以提高销售业绩。

企点产品主要通过各级经销商售卖，以往是经销商将产品卖点功能通过录屏，并播放给客户，这种视频主次区分不明显，且视频冗长，往往效果不是很好，影响成交率，进而影响到销售业绩；但更好的效果意味着更多的工作量，如何在不增加工作量的前提下提高视频的效果，为满足于此，建立教育内容素材制作流程，包括视频脚本流程、转场素材、合作规范等；基于标准化的流程，可快速生成高质量内容。

当有新的视频需求时，可快速拉通相应负责人，同步视频受众与核心用户场景，提炼串联的核心能力并套入脚本模版，制作过程根据视频内容套入合适的转场素材，并快速输出多设备多渠道的宣传视频，帮助商务讲好故事，帮助销售讲好功能，帮助产品做好宣传。

相对于以往制作视频，平均制作时长从 2 周左右一条优化为 4 天左右一条，同时视频的质量与统一性也有比较好的提升。

Part 3.基于品牌内核，建立动效设计系统 当越来越多的需求与功能我们开始用动效来解决时，也会发现一些问题：

1. 协同设计下，如何保证设计的统一性，

2. 动画缓动是否有据可循，时长如何定义，

3. 协同设计下，动效的认知不同，从理性和感性两个方向来考量，从设计者角度来看，应该更多的理性来思考如何构建一个具备特定调性的动效，从观看者交互来看，更多的理性感受动效所传达的调性。

1. 动效基础原则 在企点的产品线中，动效也会应用在产品体验、用户教育与品牌传递三个领域，业务的深度和广度都比较大，因此须有指导原则来统一动效的设计，使用户在企点产品中获得一致的体验与感受，从而形成固有印象，加深对于产品认知度。

企点体系的产品调性是一致的，动态的语意也需要保持与品牌调性一致，基于企点的品牌内核：轻快、高效、亲和，来指导企点的动效基础原则，再规范企点不同领域的动效设计，从而保证企点整体的调性一致。

将品牌内核的关键词映射到动效的主观感受上，得出更加具体的关键词：

2. 动效曲线的建立 建立动效规范如同建立设计规范一样，是一个复杂且庞大的工程，这里以动效曲线的建立为例，阐述动效规格的建立过程。

深入运动的本质

“运动太生硬了”、“不够流畅”、“怎么这么拖沓”、“不错哦，看着比较舒服”

这些描述大多基于主观感受，难以量化，需要将主观感受抽象成客观可量化的指标。将运动曲线量化为客观的物理世界的规则，连接品牌内核与运动感受。

从品牌内核到运动力学

力是改变物体运动状态的原因，要量化运动的变化的前提，是量化力的变化。

运动过程中两个重要的元素：材质 和 力。不同的材质和力，会产生不同的运动变化曲线。

从品牌内核出发，基于动效基础原则，得到 轻质、有力、连续变化 这三个关键词来描述材质和力。

轻质 即物体质量较小，可以迅速响应力的变化，以实现轻盈、简短的效果；

有力 即施加在物体上的力数值大，以实现流畅与快速响应的效果；

连续变化 即力的大小与方向并非固定的数值，会随着时间变化，以实现缓和舒服的效果。

反应到实际的运动中，轻质的物体与大数值的力，会在很短的时间内进入最大速度，同时通过连续变化的力，迅速减少力的大小，在中后期进入缓和。

在感知范畴，人的感知变化总是比变化晚一些，物体产生变化，到人感知之间有个时间差，且持续变化的冲击，会产生心里压力，如果在适应变化的节点减少冲击，则会感到舒适。

基于此得到最终的运动曲线：轻快有力的控制感，延绵流畅的舒适感。

同时针对进入与退出场景增加两种曲线：

动画时长

相同大小的力，作用于不同质量的物体上，达到同一效果的时长不同，质量越大的物体时长越长，因此，越大的元素运动时长越长，同时保持效率为先，适当缩短整体时长，抵消滞留感。

时长的规则：轻快高效，退出快于进入，大质量物体时长大于小质量物体时长：

回顾曲线建立的流程，以企点品牌关键词为内核，以动效基础原则为基底，以理性规则为表层，最终建立标准化动效曲线，同样适用于其他动效设计系统的建设。

3. 建立品牌动效体系 所有企点对外宣传文章、视频、展会等都是是曝光企点品牌的机会，动态的品牌元素可以在短暂的与客户交互的机会中，加深对企点品牌的印象。

基于企点的品牌内核，同时对企点 logo 设计元素进行拆解，提取空间透视作为 logo 动态演绎的 DNA。

强烈的空间感还原了企点 logo 的形成过程，线条辗转向上的动态语义也对应了腾讯企点帮助客户实现业绩向上，实现客户成功的愿景。

企点的子产品众多，在各领域的应用须有统一的品牌调性，也要体现子产品的特点，因此子产品图形形态的是基于母品牌动态 logo，并结合了各个子产品的核心功能；比如客服选择气泡沟通元素，动态语意表达出亲和、轻松顺畅的服务沟通；“营销”采用抽象的漏斗三角元素，动态语意凸显倒三角的复购和裂变等。

将动态素材化，可以应用到企点内外输出的任何需要动态演绎的地方。

小结 企业级产品面向的业务场景和角色都比较复杂，除了交互视觉上的设计策略外，探索动效设计系统在 to B 业务的用户体验、用户教育、品牌传递三个方向发挥的作用，为业务带来更大的增益，为产品提供更好的体验。

腾讯出品！AE 动效设计必备指南（附超多神器和技巧） 动效是用户体验的重要组成部分，也是产品调性的重要体现。

阅读文章 >

大家好，我是和你们聊设计的花生~

随着人工智能技术的发展，运用算法自动进行图片处理的工具越来越多，极大地提升了设计师的工作效率。之前向大家推荐了在线 AI 修图神器 Hama，能够轻松抹除图片中不需要的部分，与背景实现完美融合；还有在线 AI 抠图 神器「Erase.bg」，能在几秒内快速从任何图片去除背景，并且以提供原始分辨率下载。

不限次数！快收藏在线免费抠图神器「Hama」 Hama 如同上次介绍的「Magic Eraser」，让用户上传图片、将画面中不想要的部分抹除，因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力，会分析标示人物或物品，移除后将附近的颜色补充进来，就会使去除后的相片画面很自然，而且这项服务完全免费，使用者只要

阅读文章 >

又一个抠图神器！在线免费一秒搞定超好用！ 当今的在线去背工具多半会整合 AI 人工智能技术，以机器学习方式去建构出可准确辨识前景和背景的模型，使用机器自动化去除背景的好处是快速、精确而且无需额外编辑，即使没有专业绘图软件一样可以在浏览器进行，remove.bg 是在线去背服务最早出现、而且最强大的选择，后来也有 FocoClip

阅读文章 >

今天要向大家推荐的 ClipDrop Remove Background 也是一款免费的在线 AI 背景扣除神器，它的背景移除功能非常强大，在 Producthunt 社区 5 月 12 日的每日产品榜单中排名第 5。

据开发人员介绍，他们研发的算法使 Clipdrop 的背景移除精准度、速度和稳定性都达到了前所未有的高度。ClipDrop Remove Background 的功能特色主要体现在以下 2 点：

① 能自动识别图片主体进行抠图，不会将颜色相近的阴影或背景错误保留：

② 扣除背景的同时也能保持细节，并做到边缘干净无白边。

Clipdrop 对上传的图片没有尺寸和大小的限制，处理时间最长不超过 10s，抠图完成后直接下载原图，支持输出最高 5000*5000px 的图片。我也上传了几张图片测试其抠图效果：

首先是人物图片，原图尺寸 3917*5354px，大小 1.45MB，抠图时间为 7 秒，抠图后输出图片尺寸为 3658*5000px，大小为 7.92MB。抠图效果非常不错，头发部分的一些空隙都清除的很干净，衣服边缘也扣得很干净，没有模糊的白边。

接着我又试了一张椅子图，原图尺寸为 3569*4461px，大小为 1.56M。抠图时间比人物图片更短一点，输出的图片为 3569*4461px，大小 8.94MB。抠图边缘同样非常干净，而且很精准的只抠出了椅子的主体。

个人使用感受非常棒，能为经常需要处理抠图的小伙伴省去不少时间精力，感兴趣的小伙伴可以去官网体验一下： https://clipdrop.co/remove-background

最后再为大家总结一下 ClipDrop Remove Background 优点：

免费在线 AI 智能抠图，打开即用 抠图速度快精度高，自动识别主体，边缘清晰无白边 上传图片无限制，输出图片最高支持 5000*5000px 以上就是今天的推荐，如果你有关于设计的疑问，欢迎加入优设官方设计交流群和大家一起交流，进群方式见下图↓

大家好，我是和你们聊设计的花生~这期继续给大家推荐5位值得关注学习的插画师。

上期回顾↓

这 5 位优秀的贴纸设计艺术家，是我每日学习的源泉！ 大家好，我是和你们聊设计的花生~ 上一期为大家推荐了 5 位擅长扁平风插画的艺术家： [link https://www.uisdc.com/5-illustrations-artist] 今天要为大家推荐的 5 位艺术家，都非常擅长「贴纸」设计。

阅读文章 >

Patryk Wojciechowicz 「Behance 主页」 https://www.behance.net/wojciechowicz

「Dribbble 主页」 https://dribbble.com/PatrykW/shots

Patryk Wojciechowicz 是一位来自波兰的插画师，他的插画以自然景物为主，场景视觉层次分明，色彩绚烂，氛围感极强。

Patryk 善于在插画中使用对比色与近似色，主色彩往往只有 2-3 种，通过明度差异制造前中后景的层次差异。在视觉中心使用高明度高饱和度的色彩，与周围的暗色调形成强烈对比，使视觉中心得以凸显。并通过添加噪点表现光的扩散， 使色彩间的过渡自然柔和，使插画光感通透浪漫。

相关免费插画教程

扁平清新的森林小插画丨 https://uiiiuiii.com/illustrator/1212213732.html

如何在绘制矢量插画时实现噪点效果？丨 https://uiiiuiii.com/illustrator/1212113398.html

Priya Mistry 「个人网站」 https://www.priyamistry.co.uk/portfolio/

「Behance 主页」 https://www.behance.net/priyamistry

「Dribbble 主页」 https://dribbble.com/PriyaMistry

Priya Mistry 是一位来自英国伦敦的插画师，他的用色大胆丰富，擅长用画面来讲故事，所以经常与杂志及新闻网站合作社论插画。

Priya 喜欢用干净的色块加简单线条来塑造画面形象，无论是人还是物品，都只有 2 个层级的分形，再利用明度差异立体块面塑造，这使他的画面内容清晰明了，处理复杂的画面也不会显得杂乱。Priya 非常喜欢用油漆马克笔在纸上作画，画笔和画纸的纹理让插画的质感更独特。这样偏好也影响到他的板绘创作，Priya 喜欢用带有粗糙质感的画笔，为画面带来更多的 手绘 质感。

相关免费插画教程

PS 教程！手绘风格街头小景插画！丨 https://uiiiuiii.com/photoshop/1212372835.html

PS 教程！4 步原创顶级扁平噪点插画丨 https://uiiiuiii.com/photoshop/1212330347.html

Jorsh Peña 「Instagram 主页」 https://www.instagram.com/jorshpena/

「Behance 主页」 https://www.behance.net/jorshpena

「个人网站」 https://www.jorshpena.com/

Jorsh Peña 来自墨西哥，是一位插画师兼艺术导演。他的插画偏扁平线条为，用极简的几何形状拼接出各种元素。画面中的意象奇幻神秘，用色对比强烈，有极强的个人特色。曾被评为墨西哥最佳 150 名插画师之一，与微软、谷歌、Snapchat 等诸多知名品牌都有合作。

Jordan 喜欢用等距插画来构建立体事物和空间场景，对事物的抽象方式非常独特，画面中人如同中宗教中的石像，且经常会结合主题进行大胆的分离解构。高饱和度的用色常常铺满整个画面，再在局部用无彩色进行调和，这样即使色彩强烈也不会觉得眼花，具有透气感。

相关免费插画教程

科技感满满的 2.5D 机器人插画！丨 https://uiiiuiii.com/illustrator/1212353650.html

从头学习绘制扁平风购物主题插画丨 https://uiiiuiii.com/illustrator/1212433830.html

Juan Afanador 「Behance 主页」 https://www.behance.net/juanchaco

「Instagram 主页」 https://www.instagram.com/juanchaco0825/

Juan Afanador 是一位来自哥伦比亚的自由艺术家，他喜欢街头涂鸦，插画也是同样的潮流风格。Juan 创作的潮流插画线条流畅，元素造型饱满。画面以高明度高饱和度的色彩为主，搭配渐变、波点、半调网格丰富效果。长期的创作积累让 Juan 已经形成了鲜明的风格，也有了自己原创的 IP 形象，很多知名品牌的都有与他合作，他的插画也衍生出了很多时尚周边，收到年轻人的喜爱。

相关免费插画教程

UDT 分享！教你绘制潮流风格商业插画丨 https://uiiiuiii.com/illustrator/121286858.html

用 10 分钟教你创作国潮风新春锦鲤插画丨 https://uiiiuiii.com/illustrator/1212359444.html

Andrew Nye 「Behance 主页」 https://www.behance.net/andrewnye

「个人网站」 http://www.ajnye.co.uk/

Andrew Nye 是一位来自英国的插画师，他专注于矢量插画的绘制，作品构思精巧，画风细腻华丽。Andrew 非常擅长金属玻璃质感的绘制及对细节的深入刻画，这让他的作品有了突破二维画面的立体感和真实感；画面用色多而不花，始终带有如钻石般精致闪耀的质感。除了画风的精致，Andrew 的作品内涵也非常有深度，常能将日常事物的进行不可思议的组合，绘制出展示背后的深层含义与问题的社论插画。

相关免费插画教程

巨详细的霓虹炫彩插画绘制过程演示丨 https://uiiiuiii.com/illustrator/1212430179.html

创意手电筒灯塔 插画设计 教程丨 https://uiiiuiii.com/illustrator/1212420504.html

以上就是今天的分享，更多相关插画资源↓

头像如何画才能简单又传神？资深插画师6大步骤经验全分享！ 关于我：优设大课堂金牌讲师，高级原画师、插画师。

阅读文章 >

我们邀请了3个优秀插画师，总结了这份商务合作流程指南 本文邀请了优设的优秀老师哔波、林不慌和香奈，为大家分享他们多年的接私单经验。

阅读文章 >

企业级产品中常见的问题 腾讯企点 产品线，包括客服、电话营销、商通等 SaaS 产品，产品受众角色多，业务场景复杂，由于角色与场景的复杂性，在产品设计中也遇到了一些问题：

腾讯企点往期实战案例复盘：

腾讯实战案例！企业产品如何做好用户教育系统设计？ toB 产品具有逻辑复杂、使用门槛高、试错成本高、用户角色多样化的特点，通过用户教育设计向用户传递产品价值，提升产品易用性与可学性。

阅读文章 >

1. 产品界面信息量大，操作繁琐

任务流程复杂；

界面信息量大、复杂度高；

核心功能操作步骤繁琐

2. 产品功能复杂，用户难 get

新功能透传不够直观；

视频等功能透传效果好的形式制作成本高；

3. 品牌形象对外宣传不统一

品牌动态对外宣发文章/素材 logo 缺乏统一形象。

面对上述问题，除了常规的交互视觉优化外，探索基于动效的方式来解决企点在用户体验、用户教育、品牌传递三个方向的问题，提升用户教育效果，标准化视频制作流程提高视频质量并降低制作成本，建立可持续的 动效设计 系统，规范 动效 在产品内外的设计，提高易用性与统一性。

基于上述三大方向遇到的问题，我将从以下三个方面来介绍：

Part 1 巧用动效，提升产品体验友好度

Part 2 动效传递功能亮点，产品特性秒 get

Part 3 基于品牌内核，建立动效设计系统

Part 1.巧用动效，提升产品易用性 任务流程复杂？- 聚焦核心任务、优化信息布局与优先级分层

结合场景梳理任务流程，通过动效将界面信息层级与操作优先级结合，聚焦核心任务，从而降低界面信息复杂度。

知识库内容展示层级优化

在客服工作台中，访客的问题命中了知识库的内容，则会展示知识库的预设内容，辅助客服进行回答，以提高接待的效率。由于每个问题对应的回答内容长度与形式不一，如果直接展示这些信息，有可能会导致寸土寸金的聊天窗被辅助文本占用过大的区域，影响客服操作。

因此在设计策略上，需要将信息进行分层，将命中内容拆分为摘要和全部信息，当触发知识库的内容时，先展示摘要，客服可以快速判断是否需要，如果是则进一步展开查看全部信息，确认无误后发送给访客或者编辑后发送给访客。

通过动效，将命中内容改为抽屉式的展开与收起，把信心拆分成多级展示，既保证了整体页面区域的信息展示，又能够通过简略信息判断下一步的操作，提高了操作效率。

客服工作台信息响应规则优化

在工作台左侧最近会话列表不同角色有不同的信息展示：

标签是判断客户的重要信息来源，以往的标签存在单个标签字数显示固定 3 个，标签数量显示固定 3 个的问题，导致标签可读性低、容易产生混淆、空间利用率低。

因此优化的策略是在有限的空间内展示更多标签，且不降低可读性，这里分两个维度考虑：1.标签展示的数量；2.标签内文字数。其一是影响判断客户的维度，二是单个标签信息展示的可读性。

通过动态的响应规则，优先满足可读性的情况下，充分利用空间，客服标签信息快速在列表中判断不同的客户，根据实际需要选择应答，提前做好话术准备，提高接待效率与服务的质量。

界面焦点分散？-强化视觉吸引与视觉反馈

动效可以吸引用户的焦点，在基于浏览器的中后台界面中，使用者大多是多焦点工作，以提高工作流的效率，对一个工作流中的功能，适当的环节加入动效，可以引导用户按照预设的流程工作，从而提高单点功能的预期效果。

提高机器人回答反馈收集率

客户与客服沟通过程中，企业会引入客服机器人对客户服务以降低人工成本，初期接入机器人回答的能力后，存在未能解决用户问题的回答，除了通过算法进行调优以外，在功能设计上也需要为用户提供反馈通道，通过点赞或者点踩，可以疏导因机器人回答不准确导致的用户情绪，并帮助机器人优化回答精度，利用 hover、press 等操作方式，引导用户反馈，手型变化趋势亦可降低点错率。

功能指引内容外露，提高用户教育效果

企点中后台页面中，部分功能比较复杂不好上手，将帮助内容做成视频的形式可以提高用户教育效果，为让帮助内容触手可及，在中后台配置页的右下方集成播放组件，为企业提供更专业的配置指南，每次进入页面时，自动展开具备吸引力的文案，在一段时间后收起。

在合适的时机通过展开的动画吸引用户转移焦点，自动收起逻辑避免用户不需要的情况下遮挡页面的内容。

操作步骤繁琐？-优化层级减少额外步骤

核心路径的工作流中，引入支线的操作往往会打断主线任务的操作，降低主线工作流效率，将支线任务通过同一界面的不同层级进行优化，以降低对主线操作的影响，从而提高主线工作流效率。

快捷回复层级简化

快捷回复是客服的高频核心功能，在 PC 端我们利用 hover、双击等多种交互方式可实现快捷编辑与发送，但移动端交互方式以触摸为主，如何让移动端也有类似 PC 端的高效操作呢？

在页面层级，移动端定义了一套弹层页面规范，弹层的应用场景为临时的操作或展示，在于不打断操作流程，减少页面跳转。

快捷回复的内容用弹层来承载，减少页面间的跳转，并利用层级关系做不同层级间的交互，也可长按拖动直接发送，在习惯这种发送方式后，可以更加直观高效的发送快捷回复内容，也减少了操作步骤。

Part 2.动效传递功能亮点，产品特性秒 get 产品功能总被忽略？- 氛围动效吸引用户驻足

经常会遇到新的产品功能使用数据不理想的情况，也许是内容透传的时机和内容本身不够吸引力，从而被用户忽略，将产品的核心能力与具有吸引力的内容结合，往往可以达到更好的透传效果。

客户端新手引导氛围渲染

新用户首次打开客户端时，需要进行一些简单的设置，用户对于弹框形式的新功能会下意识的点击右上角关闭，阻碍了功能的介绍和初始设置的完成度。

客户端的弹框受众和对应的目标为以下三种：

新用户首次使用：需进行简单的设置，同时承载核心亮点功能的透传； 老用户版本迭代：新版本升级后对于版本一系列的新功能介绍； 老产品升级用户：除了新老用户外，企点还存在从老产品迁移至企点的老用户，因此更多是介绍两者的不同，企点的优势等。 弹框内的信息比较重要，设计方案上考虑动效的形式，在首屏吸引用户关注，提高点击率。

通过轻松自然的客服形象，围绕企点轻快、亲和的品牌元素，周围的聊天气泡代表高效的消息处理，营造出轻松高效的氛围。

针对老产品升级用户，动态语义上强调穿越到新世界的感觉，表达了新产品完善的功能：

动态引导图上线后，相对于以往的静态引导方案，点击率有约 50%的提升。

电子行业商机应用氛围渲染

在电子行业商机应用中，商机对于中间商来说意味着成单与获客的机会、销售额的增长，用户首次进入时会有动态商机墙，铺面满眼的商机，在告诉用户使用这个应用可以获得海量的商机，除了吸引用户的效果外，也起到传递产品核心能力的作用。

在商机列表页也增加了轮播广播，商机热度等动态，营造出热闹、紧俏的商业交易氛围：

宣传视频流程化，提升产出效率与质量

做好产品的同时，如何卖出去也同样重要。在销售过程中，传递产品的亮点与能力，最终打动决策者，可以提高销售业绩。

企点产品主要通过各级经销商售卖，以往是经销商将产品卖点功能通过录屏，并播放给客户，这种视频主次区分不明显，且视频冗长，往往效果不是很好，影响成交率，进而影响到销售业绩；但更好的效果意味着更多的工作量，如何在不增加工作量的前提下提高视频的效果，为满足于此，建立教育内容素材制作流程，包括视频脚本流程、转场素材、合作规范等；基于标准化的流程，可快速生成高质量内容。

当有新的视频需求时，可快速拉通相应负责人，同步视频受众与核心用户场景，提炼串联的核心能力并套入脚本模版，制作过程根据视频内容套入合适的转场素材，并快速输出多设备多渠道的宣传视频，帮助商务讲好故事，帮助销售讲好功能，帮助产品做好宣传。

相对于以往制作视频，平均制作时长从 2 周左右一条优化为 4 天左右一条，同时视频的质量与统一性也有比较好的提升。

Part 3.基于品牌内核，建立动效设计系统 当越来越多的需求与功能我们开始用动效来解决时，也会发现一些问题：

1. 协同设计下，如何保证设计的统一性，

2. 动画缓动是否有据可循，时长如何定义，

3. 协同设计下，动效的认知不同，从理性和感性两个方向来考量，从设计者角度来看，应该更多的理性来思考如何构建一个具备特定调性的动效，从观看者交互来看，更多的理性感受动效所传达的调性。

1. 动效基础原则 在企点的产品线中，动效也会应用在产品体验、用户教育与品牌传递三个领域，业务的深度和广度都比较大，因此须有指导原则来统一动效的设计，使用户在企点产品中获得一致的体验与感受，从而形成固有印象，加深对于产品认知度。

企点体系的产品调性是一致的，动态的语意也需要保持与品牌调性一致，基于企点的品牌内核：轻快、高效、亲和，来指导企点的动效基础原则，再规范企点不同领域的动效设计，从而保证企点整体的调性一致。

将品牌内核的关键词映射到动效的主观感受上，得出更加具体的关键词：

2. 动效曲线的建立 建立动效规范如同建立设计规范一样，是一个复杂且庞大的工程，这里以动效曲线的建立为例，阐述动效规格的建立过程。

深入运动的本质

“运动太生硬了”、“不够流畅”、“怎么这么拖沓”、“不错哦，看着比较舒服”

这些描述大多基于主观感受，难以量化，需要将主观感受抽象成客观可量化的指标。将运动曲线量化为客观的物理世界的规则，连接品牌内核与运动感受。

从品牌内核到运动力学

力是改变物体运动状态的原因，要量化运动的变化的前提，是量化力的变化。

运动过程中两个重要的元素：材质 和 力。不同的材质和力，会产生不同的运动变化曲线。

从品牌内核出发，基于动效基础原则，得到 轻质、有力、连续变化 这三个关键词来描述材质和力。

轻质 即物体质量较小，可以迅速响应力的变化，以实现轻盈、简短的效果；

有力 即施加在物体上的力数值大，以实现流畅与快速响应的效果；

连续变化 即力的大小与方向并非固定的数值，会随着时间变化，以实现缓和舒服的效果。

反应到实际的运动中，轻质的物体与大数值的力，会在很短的时间内进入最大速度，同时通过连续变化的力，迅速减少力的大小，在中后期进入缓和。

在感知范畴，人的感知变化总是比变化晚一些，物体产生变化，到人感知之间有个时间差，且持续变化的冲击，会产生心里压力，如果在适应变化的节点减少冲击，则会感到舒适。

基于此得到最终的运动曲线：轻快有力的控制感，延绵流畅的舒适感。

同时针对进入与退出场景增加两种曲线：

动画时长

相同大小的力，作用于不同质量的物体上，达到同一效果的时长不同，质量越大的物体时长越长，因此，越大的元素运动时长越长，同时保持效率为先，适当缩短整体时长，抵消滞留感。

时长的规则：轻快高效，退出快于进入，大质量物体时长大于小质量物体时长：

回顾曲线建立的流程，以企点品牌关键词为内核，以动效基础原则为基底，以理性规则为表层，最终建立标准化动效曲线，同样适用于其他动效设计系统的建设。

3. 建立品牌动效体系 所有企点对外宣传文章、视频、展会等都是是曝光企点品牌的机会，动态的品牌元素可以在短暂的与客户交互的机会中，加深对企点品牌的印象。

基于企点的品牌内核，同时对企点 logo 设计元素进行拆解，提取空间透视作为 logo 动态演绎的 DNA。

强烈的空间感还原了企点 logo 的形成过程，线条辗转向上的动态语义也对应了腾讯企点帮助客户实现业绩向上，实现客户成功的愿景。

企点的子产品众多，在各领域的应用须有统一的品牌调性，也要体现子产品的特点，因此子产品图形形态的是基于母品牌动态 logo，并结合了各个子产品的核心功能；比如客服选择气泡沟通元素，动态语意表达出亲和、轻松顺畅的服务沟通；“营销”采用抽象的漏斗三角元素，动态语意凸显倒三角的复购和裂变等。

将动态素材化，可以应用到企点内外输出的任何需要动态演绎的地方。

小结 企业级产品面向的业务场景和角色都比较复杂，除了交互视觉上的设计策略外，探索动效设计系统在 to B 业务的用户体验、用户教育、品牌传递三个方向发挥的作用，为业务带来更大的增益，为产品提供更好的体验。

腾讯出品！AE 动效设计必备指南（附超多神器和技巧） 动效是用户体验的重要组成部分，也是产品调性的重要体现。

阅读文章 >

前言 这篇文章针对车载行业的可用性测试，我们做一下深入探讨，前面几篇跟下来的读者也都知道我写作的节奏，前面会深入讲解该主题的基础内容，并结合一些我工作中实际案例给予大家去了解，后半部分以实践案例为主，将前面基础知识融入进来，结合案例进行剖析可用性测试，这次文章大纲分为三大内容：可用性基础知识、HMI可用性测试实际工作内容、 HMI 可用性测试评估维度体系，最后一点是重头戏。

往期回顾：

万字长文！车载 HMI 语音设计基础知识科普 前沿： 开头必须来一句，我相信语音一定是未来，我非常确认 这篇 HMI 的语言探索以介绍语音交互内容为基础，结合我的实际工作项目经验，输出总结关于语音设计的内容，最后结合案例，在对话设计中会进行深度的探索，并提出个人的想法和思路，因为有的时候深度去思考觉得我们项目还可以有

阅读文章 >

万字干货！超全面的HMI 竞品分析手册 他来了～ 他来了～ 一个月时间的打磨，不知道熬了多少次通宵了 前沿： 为了输出这篇竞品分析文章，我也是够拼了，利用周末的休假时间，预约这四家 4S 店进行试驾，并进行对车辆的拍照，和销售对话的录音等获取到一手资料，再去做分析、总结这一次的探索。

阅读文章 >

我们在文章前夕先谈谈可用性测试与用户访谈，可能后期也会针对 #HMI 用户访谈# 这块内容会再输出一篇文章。可用性测试和用户访谈的区别→ 可用性测试更偏向于观察用户的操作行为，而用户访谈是更好的挖掘用户的需求。可用性测试是为了找出产品的问题而测试，通过这种测试找出产品中存在的问题，加以解决，最后目的也是为了让 产品 用起来体验更加。

大家也发现了，关于 HMI 设计类文章很多平台上很少有，还有设计师工作中用到的设计方法论，如何运用到 HMI 车载领域当中，确实都很难找到，并且专业领域的内容车厂也不愿意拿出来分享，我一开始写文章的初衷就是想打破这个格局，虽然一个人力量很小，但我还是坚持做下去了，希望通过我的分享能够让更多的人能进入这个赛道，并且也能输出自己的经验传递下去，成为光，并散发光。

进入我们今天的正题吧。

可用性基础知识 ISO9241 中对“可用性”的定义是：特定用户在特定的使用场景中，为了达到特定目标而使用某产品时，所感受到的有效性、效率和满意度。

1. 可用性原则 有效性（Effectiveness）：用户完成特定任务的情况。比如：设定一个调节空调风量的任务，让用户操作，记录员在旁边记录用户的一个完成度的情况，成功完成、求助后完成、未完成的状态。

效率性（Efficiency）：用户完成特定目标的效率，任务完成时间和完成的一个路径。在记录过程中如果在一个正常时间范围内无需关注，主要还是要记录在某些功能上面花费较多时间完成的任务。在操作路径上也要观察，是否符合我们设定的操作路线，是否存在偏差或者是犹豫不决的地方。

满意度（Satisfaction）：用户使用该车机系统主观满意度，当然我们也要提前做好一些标准，比如任务完成的难易度进行评价，任务完成的满意度测评等，

总结一下

一个好的可用性必须能够满足这三个维度，这三个维度也会有一个重要程度之分，有效性 > 效率 > 满意度。

需要最后补充一下：

在评估一个任务可用性以外，还要需要注意该功能的价值，尤其是 OTA 升级发布新的功能，功能价值分为两类：用户价值和商业价值，作为设计师的我，觉得用户的体验应该是放在第一位的，有了好的体验才能够更好的去谈商业价值，不然就是在扯蛋。例如→ 我们在优化负一屏中的体验，将调节音量新增了可以调节四种音量大小，多媒体、电话、导航、语音，旧版本的音量调节，用户经常会吐槽，因为当时功能设定负一屏音量调节是整个的一个系统调节，你在音乐调节很大音量的时候，如果有一个电话接入进来，对方说话声音就很大，会吓到用户，这个在驾驶过程中会很危险的，因此在OTA升级后，我们做了优化。

2. 可用性测试类型

其实可用性测试方法和类型很多，会在不同情况下使用，选取的方式也是需要看团队设定的目标、在什么阶段、最终的预算能有多少钱，真的，没钱很难办事情。

探索性测试：

产品在不同阶段，可根据不同的测试类型做可用性测试，在产品初期可使用探索性测试方法，利用产品的原型图展示给用户，探索性的测试目的是，用户是否对这款产品有所了解，如果在某些方面有所疑惑需要记录，根据多组测试，重叠性较高的功能就需要 UX 去优化，在产品初期需要不断的试错。

比较性测试

我们先说一下比较性测试，我们在做设计时会出几个不同的方案，需要在这个几个方案中做出选择，如果公司非常重视测试数据的话，会将设计方案同时上机进行路测，最终结合数据，让体验专家评判方案之间的优缺点，最终决策出符合用户体验的方案；另外一种比较是选择两种或者更多的产品，去研究他们优缺点，确定哪个设计方案能够提供给用户带来良好的操作体验；这两种方案取决于项目的时间长短，如果像服务形的乙方需要快速的出方案，则更多的采用的是第二种，甲方有着自己设计研究部门可以给到部门有试错的时间成本，那么他们更会倾向于两者相结合的方案，我们只能提供可行性的方案，最终还是需要领导层进行拍板实施。

评估性测试

当产品进入后半段，在发布版本前后，上机进行测试，HMI 上机测试分为在室内台架上测试，另外一种是装机在道路上测试，不同场景的路测，在这个阶段的可用的测试方法是评估性测试。评估性的可用性测试目的是确保这个产品在发布之前将潜在的问题进行修复；在版本发布之后本公司或者一些测评机构会根据自己的评测标准进行对这款产品进行评估测试，对照自己的评判标准进行打分，方便后续 OTA 升级，版本优化迭代功能。

3. 可用性测试方法 相信大家对于定性和定量这两个词并不陌生，在可用性测试中承担着重要的组成部分。

定性 / 定量研究

定性研究是指参与本次车载系统的体验者对于可用性的一个直接评估，从而产生结果，并且发现哪些功能在操纵的时候会出问题，有哪些体验是觉得不错的，哪些功能的体验需要进行优化，听完这些内容是不是觉得和车载系统的专业测评人差不多了吧，当然，在做这个定性测试的时候需要找不同的人群进行测试，需要做到完整性。

定量研究也是我们常用到的一个测试方法，定量研究出的数据对于可用性启到了间接评估，通过参与本次车载系统体验的用户，观察他们在操作事先列举好任务上的表现状况，这些状况包含了本次任务完成消耗的时间、完成的成功率、错误点击等；定量研究的结果是一些简单的数据，这些数据需要有一个参考的依据，一个已知的标准，要么就是竞品体验的一个对比数据，还有一个是自己车载系统前后版本的一个对比看看改进多少（专业术语：ROI），一个词需要找到 “参照物” 。

例如：在多少秒内操作是一个安全的范围值？

单次交互操作动作不能超过 2 秒（1 秒内为最佳）如果一个在行驶过程中需要交互操作的动作 用时 2-3 秒就已经是一个危险状况，所以我们参考这个依据，可以进行对我们车载系统做一个判定。

定量的数据是有了，参考标准也有了，有的功能方案是不 OK 的需要去优化，但是这些数据没有告诉我们如何去优化它，需要在设计方案中何如去优化？定量分析研究只是记录了一个过程中得到的数据，也没办法得到用户在什么项目中遇到什么困难，比如车辆设置中的调节 ADAS 的某一个设置选项，用户不知道在哪里寻找，我们只能记录这项任务失败。所以在为了更好的做可用性测试，我们通常会使用定性研究来增加进行补充缺失的部分。

如何运用定性和定量研究

前面有提到他们之间的区别，那我们在日常的工作中该如何的运用呢？在什么阶段用什么研究？

在发布车载系统 1.0 版本和后续迭代版本优化 1.x 版本，可以使用定量、定性、两者组合性来评估，如果这次评估的目的是数据方面，在这个功能点上我们优化多少，提升了多少用户使用了这个功能，那么就需要采用定量分析，因为只有定量研究才能得出每一个版本对比上一个版本到底优化了、提高了多少。

需要针对车载系统重新设计内容时候，要通过定性的研究方法去完成，在这个过程中用户的角色是承担为设计提供可行性方案的人，他会觉得在哪方面可以进行优化，到得这些用户数据和意见之后，也便于设计师们做出选择性的优化，创建出一个新的体验感，所以这个阶段使用定性研究方式更为适合。

举个例子：

用户在体验过程觉得在操作调节音量的交互感觉不好，抓住关键词“调节音量体验不好”，那么就要询问清楚，问到用户：“是在下拉出现的负一屏中 调节体验感觉不好，还是在进入设置项中的去调节音量体验感觉不好呢？因为在做定性的研究的时候不会设定怎么进入，因此会出现通过多种方式去操作系统某一个功能，所以需要针对这个问题询问清楚，才可以正确的优化这个体验流程。后面还需要跟进这个问题，是操作步骤过多，需要优化路径？还是在滑动的体验感需要加强？等这类问题，当然也可以让体验者去叙述他自己的点。如果同样的去发现这类的问题，你去使用定量那么会增加很多工作成本不说，预算成本也会增加。

可用性测试实际工作内容 由于我们项目的保密性，不能透露过多内容，我将这次案例换成了其余车载系统，这次可用性测试的目的是系统评分数据

1. 设计任务 前面提到定量研究测试，是请多名用户来参与对我们车载系统的一个体验，我们将原先设定好的任务对用户进行说明，然后我们在车内观察用户使用我们产品的一个状况。可用性的评估是基于任务的，所以接下来我们讲一下任务的五个原则：锁定主要任务、明确任务起点与目标、给任务设置约束条件、任务不应过于简单、避免提供线索和描述操作步骤

主要任务

用户在使用车载系统目的有很多种类，需要听音乐、电台、看视频、导航到目的地、接/打电话、调节空调/温度等等，可能会有上百个功能点需要去操作，但一场测试不可能全功能进行测试，我们只有挑选出最重要的任务来进行测试，或者是刚上线的车载系统，需要测试一下基础功能评测，如果遇到产品 OTA 升级或者是改动很大的版本点，会改变用户的操作步骤，更或者是新增加的功能，都可以优先测试。

再举个例子：

任务：调节空调的温度

我们需要观察的是，他是如何调节空调温度的（我们设计师自己肯定知道全部的调节方案）

第一种方案：可以点击导航栏下方的温度，点击可以进行前后拖动来改变温度

第二种方案：按下方按键，呼出语音 “温度调节到 21 度”

明确任务起点与目标

在可用性测试中最重要的就是用户能否可以完成任务项，所以需要明确目标，如果没有的话，就无法判断用户是否完成任务，我们最初设定一个目标。

例如 “在音乐界面中将播放模式调成单曲循环模式”这是我们这个任务的最终目标，只要最终用户在音乐界面中将播放模式改为“单曲循环”即为此项任务成功完成。

给任务设置约束条件

在设定任务的时候，会出现可以多种方式去完成，上诉案例空调调节温度，就可以使用两种方法去完成，因此如果本次全程操作不允许用语音操作（这是作为一个约束的条件）本次的全部测试项目是关于在中控测试评估的，语音会有他自己的一套测试任务，这些都需要在任务开始前设定好的。

任务不应过于简单

如果你想测试用户是否找到这个功能，请不要用“找到一个 xxx 暂停按钮”，我们需要给用户提供一个处理现实场景中的任务，而不只是去找这个按钮的位置，例如：“找到音乐暂停按钮” 改为“在酷我音乐界面暂停一首歌曲”这样会有一个明确的场景，这个场景是可以运用到现实驾驶中出现的任务，如果变成“找到音乐暂停按钮”就属于一个不 OK 的任务。

避免提供线索和描述操作步骤

设计任务的时候应该给出具体的目标，而不是列举好的整个操作步骤去教用户去完成，这个跟说明书没两样。

例如：“购买酷我音乐的季度会员”。进入酷我音乐界面、点击酷我音乐中我的、然后点击会员中心、再点击续费、出现弹框选择季度充值、最后扫码付款。用户在接受到这些信息后，就知道先进入音乐应用、找我的、寻找充值入口、最后再进行支付。

引导性过强的话会失去任务测试的意义，这样做会错失用户在操作过程中发现的一些问题，观察员也将错失记录的机会，如果没有这提前事先布置好的步骤，可能会出现一些操作让他感觉有异议，不知道自己是否操作成功或者是是不是点错了等等状况。在用户使用产品的时候，我们应该考虑使用的目标，不是考虑具体的操作步骤。我们在设计任务的时候一定要避免提供线索和描述操作步骤给到体验者。

总结一下

针对用户来看的话，车载系统对他们只是一个工具，达到他们想要的操作目的“比如听音乐、导航”这些功能目的，所以在可用性测试中，我们需要把测试车载系统某个功能目的作为重点。

2. 招募人选 在招募人选问题之前，需要根据这次测试的目的和需求，确认是定性研究还是定量研究或者是组合性的研究测试方式，这次的目的是对于新系统的一个评分，这次研究方向确定好是做定量研究测试。

定量研究可用性测试是基于（30+以上人 体验者），但也有时候定量研究也会少于 30 人，因为预算的问题，或者其他的原因无法请到这么多人，因为招募车载系统的一个体验用户，相对于招募去体验 APP、网页端产品、还是 B 端的产品，都会难很多，因为条件的限制，所处的环境也变化了，因为是有驾驶的一个状态，还需要去操作提前布置的任务，所以在招聘人员的时候确实相对其他平台要难。数据就会存在一些偏差。定量研究通过任务的完成率、完成时间、满意度进行评分。这些总结性的评估数据，通常都是用于车载系统的迭代过程的跟踪，在下一个版本中数据是否得到提高，从而达到优化的目的。

另外给大家补充一下定性研究人员选择

定性研究用户可以 5 人参加这场测试，就可以发现大多数（85%）的产品可用性问题，随着用户的增加，会发现的问题会逐渐减少，因此最终定性研究分析选定的人数需要我们去考量。

在后面的实际案例中，我们采用的是定量研究，会针对整个定量研究全案做一个详细的解说，也会增加一些定性的来作为补充说明。

总结一下：

我们要根据实际情况来确定我们招募的用户数量，对比每一次的测试结果于后续 OTA 升级后的效果，是否需要增加投入的预算来做可用性测试。

3. 准备工作 在做可用性测试之前需要规划好准备的工作事宜，先是测试地点和工具的准备，后续是相关资料的准备，后面需要签署保密协议，最后就是整个的可用性测试剧本准备。

测试地点和环境

HMI 车载系统测试场景相对于其他端的测试场景要多，这些不同测试地点和环境主要目的就是针对影响用户操作的因素来做多方考量。

车载系统测试的地点：

路测（大马路上，封闭路段、正常道路）、地下车库、路面停车场、隧道等

车载系统测试的环境：

晴天、雨天、阴天、下雪天、雾霾、沙尘暴等

对于硬件的测试还会增加在不同温度/湿度下的测试：

极寒地区、干旱地区、常年潮湿雨水多地区等等（这类测试跟设计关系不大，想普及一下）

准备的工具 

需要在测试车内装机好需要测试的系统；安装眼动仪来记录用户的观看轨迹，便于后续优化界面设计和交互设计；还需要后排记录人员跟拍操作录像资料，便于后期的分析操作细节。

相关资料

首先就是准备整套测试中的任务卡片，便于用户查看；还有要为自己准备一张表格，记录用户操作中出现状态的数据，如任务是否完成、完成时间等状态；还有一些记录关键事件和测试中观察用户体验的表格，比如设计中可能会出现的问题，方便结束后进行总结，加入到后面迭代版本点中。

签署协议

在测试期间需要签署保密协议等，因为用户测试的是未上线的产品，为了确保项目安全起见，需要让参与测试的用户签署保密协议。

剧本准备

HMI 可用性的剧本准备和其他基本类似没有过多的出入，这个过程是：接触用户 →开场白 → 开始测试 → 事后访谈 →给予奖励并送走用户的整个过程，这些相同的剧本准备、还紧跟后面的观察、访谈这些内容，大家都可以自行搜索，因为下面还有更重要的内容需要细讲。

最后一步就是分析前面所得的数据，但需要一个标准去评估衡量，下面进入我们本篇文章最核心的部分吧。

HMI 可用性测试评估维度体系 对于 HMI 车机系统可用性测评有很多的标准，我们对 Thoughtworks 的度量标准进行了分析学习，根据前面的可用性测试原则，最终得出评估的三个维度：视觉行为表现（Visual Behaviors）、HMI 软件任务表现（HMI Task Performance）、主观感受（Subjective Feelings），这测试的体系主要针对的是动态测试下的 HMI 车机系统可用性测试的标准，静态测试（注：静止状态下、车辆未启动状态下的操作）任务还会有另外一套测量体系的标准。

1. 视觉行为表现（Visual Behaviors） 视觉行为表现的二级维度是视线离开路面的时间，因为这个维度是针对→完成任务是否是在安全时间内的一个评估标准，这一项是至关重要的，HMI系统在设计方面一定要遵循安全的设计原则。

评估它的指标是用户在车机单次扫视时长，车机总扫视时长，为什么会增加这一个评估指标呢，因为有些任务不是单次扫视就能完成操作的，比如在中控上面调节音量大小，我们项目中有一个定义是在绝大数页面当中，在空白区域左右滑动就可以改变音量的大小，所以这项任务测试数据中交互手势是表现相对较好的。当然还有其他方式→第一步：下拉交互手势，将负一屏滑动下来；第二步：找到调节音量大小的滑块进行调整音量大小。这个交互方式和其余的车载系统是基本相似的，所以在整体考量方面，在中控调节音量大小是一个比较危险的操作，因为总时长较长，甚至单次扫视的时间也有过长的一个情况。

2. HMI 软件任务表现（HMI Task Performance） HMI 软件任务表现的二级维度是有效性和效率，这方面测试用户的一个任务完成度情况。

有效性的评估指标是任务的完成率和人均错误次数 ，这两个数据是指测试的任务是否成功完成了，在操作这个任务的时候用户犯了几次错误最终才完成的任务。设定一个任务：完成“搜索找周围加油站”，操作状态：静止状态下（非驾驶状态），操作限制：中控屏幕内操作。通过这些条件得到不同的数据。类似这种任务，我们可以做多种不做任何限制状况。

得出的结论是：

语音操控下最优，完成率和人均错误次数较低，错误的就是有些地方的方言无法识别，其余都可以正常完成；在中控屏幕中操作，只有在非驾驶中可以完成任务，在中控屏幕操作中需要很多步骤，1.首先进入导航页面，2.进入导航页面后，有不同的操作路径可以进行搜索加油站，第一个直接在输入框中搜索加油站，第二个就是在下方有加油站的 icon，可以直接查找，在第一次使用我们产品的用户，绝大多数都是进行第一种方案。

最后数据比较非驾驶中完成任务率和人均错误次数远低于驾驶状态，因为驾驶状态下完成这类任务时间会增多，并且驾驶中不可能长时间定于屏幕。其实现实场景中，在驾驶中搜索加油站的场景会偏少，所以更推荐用户多运用语言进行搜索完成任务，如果不习惯语言交互，那么请在非驾驶状态下进行操作中控屏幕。

效率的评估指标是完成时长 ，通过上面的案例我们也可以直观的看出语音交互搜索加油站完成的时长是最短的，因此他在效率上也是最高的，语音交互也分为驾驶状态和非驾驶状态，效率也是不一样的，非驾驶状态效率要高于驾驶状态，因为驾驶状态下去扫描屏幕信息难度要高于非驾驶状态下的。其次就是静止状态下的操作中控屏幕效率也要高于驾驶状态下操作。排个序不同场景在不同的交互方式，非驾驶状态语音交互 > 驾驶状态语音交互> 非驾驶状态中控操作 > 驾驶状态中控操作。

3. 主观感受（Subjective Feelings） 主观感受的二级维度是综合感知负荷 ，事物通过感官在人脑中的直接反应，感官这一个词大家也许会感觉还是有些陌生，HMI 车载系统交互中从视觉、听觉、嗅觉、触觉以及味觉等方面的感官交互，也就是通过眼睛、耳朵、鼻子、嘴巴以及皮肤触摸实现，围绕这些感官进行设计的，这些对用户直观的感受都需要记录下来，作为对于后续优化系统作为研究内容。

综合感知负荷的评估指标是感知脑力负荷，这个词想必大家也没咋听说过，我简单介绍一下，从任务和个体两方面出发，脑力负荷中的任务和执行任务的个体均相关。在同一任务中，不同的用户所感受到的脑力负荷仍可能不同，用户自身的情绪、动机、策略及个人能力都可能影响到脑力负荷。从信息处理能力的角度出发，将脑力负荷定义为: 用户在执行某项任务时对所应用的“信息处理能力”的大小，可以通过测量其“信息处理能力”来直接度量其脑力负荷的大小。一共有两个因素来决定，一个方面是“时间占有率”，时间占有率是指完成某项车载任务过程中用户的最低处理时间。“时间占有率”越低，则脑力负荷越低，“时间占有率”越高，则脑力负荷越高；另一个方面是“信息处理强度”，信息处理强度是指在单位时间内需要处理的信息量或者处理信息的复杂程度，“信息处理强度”越高，则脑力负荷越高，反之则相反，有点难理解的话还是多看几遍吧。

脑力负荷的测评方法主要包括: 主观测评方法、作业绩效测评方法、生理测评方法以及综合测评方法，关于这些维度的后续我们在详细探讨。

4. 给大家开一个小灶 本想这个留着后面慢慢讲的，但是已经谈到这个专业领域的知识，我又没收住，就简单的给大家提一嘴，后期还会单独针对这一块做深入的探讨。上面谈到脑力负荷，那我们设计 HMI 车载系统的时候，该如何降低脑力负荷呢？

从视觉、认知、操作三个角度出发减少脑力负荷

视觉：

是指 HMI 车载系统的界面信息视觉复杂程度，减少视觉负荷，需要做到信息功能更加精炼、主次分明等要求。根据调查：人对产品的第一印象是在 0.5s 秒形成的，有一点要知道：为了降低视觉负担，不是设计的很简单就完事了，驾车环境和其他产品不一样，对于视觉要求较高，因为用户每盯屏幕多 1s 钟，就会多一分危险，所以在设计的时候不能将其他端的设计照搬硬套，减少用户阅读的信息，简化信息内容等。

认知：

是指用户对于 HMI 系统界面的理解、思考的脑力消耗，交互设计中有一条原则：不要让用户做过多的思考，不要增加用户的认知负荷。在设计 HMI 车载系统的时候，视觉设计和交互设计要保持全局的一致性，HMI 车载系统的设计和其他端也不一样，APP 端要将这个行业的框架结构要一样，所以大家看到淘宝、京东、网易严选、苏宁易购等购物平台 APP 首页的框架都是一样的，从而降低用户认知成本，这个是行业的一致性。

但是大家可以看到车载系统，每家的定义都有差异化、也有相同点。比如小鹏、蔚来、特斯拉都是以导航为首页，理想 ONE、五菱星辰首页的设计方式是以卡片为主，所以在于车载系统中的一致性是在自己本产品中体现，视觉、交互的一致性，不能做过多、过于复杂的交互方式。

视觉的一致性就体现在的通用颜色，比如导航模块中的交通拥堵的颜色，深红色为极度拥堵路段、红色代表堵车、黄色代表缓行路段、绿色代表畅通路段，这个只能在一个颜色系列下微调，不能做大幅度改动，但这个还需要按照每一个国家的定义来，有一些国家对于颜色定义有着自己的要求，所以在做海外导航的小伙伴们要时刻注意下。

操作：

是指用户移动头部、手臂、手指来点击触碰 HMI 车载系统，如何做到减少操作负荷。下面从软件层面和硬件层面来讲讲：

针对软件方面的优化：

交互内容面积越大越容易操作；交互的内容应该偏向于主驾驶便于操作的区域，距离主驾驶越近越好；与其他交互手势、方向避免冲突；点击的交互方式易用性强于长按和双击，但车载系统有的地方还是需要用到这些其他交互方式，全局做到尽量少用，放大地图之类也需要延续双指交互手势等；单指交互优于多指交互。

针对硬件方面的优化：

对于硬件操作的优化，沃尔沃汽车将主驾驶屏幕做了倾斜，对于主驾驶是方便操作，唯一的缺点就是不可以挪动，他是完全镶嵌进去的，如果副驾驶需要链接手机蓝牙到车上面，对于副驾驶的观感就不太友好了。这一点新款的特斯拉 S/X 系列做的很到位，他可以将屏幕左右的倾斜，在设置项中可以选择屏幕的调整，针对操作这一点优化相当不错的，我在其他平台看到有的车主在特斯拉 model 3 改装了屏幕，将固定的屏幕改装成左右上下都可以移动的屏幕，动手能力超强，给车主点个赞。

总结 本篇文章是HMI车载领域的可用性测试，但其他领域的设计师们也可以有学习的内容。

前言 这篇文章针对车载行业的可用性测试，我们做一下深入探讨，前面几篇跟下来的读者也都知道我写作的节奏，前面会深入讲解该主题的基础内容，并结合一些我工作中实际案例给予大家去了解，后半部分以实践案例为主，将前面基础知识融入进来，结合案例进行剖析可用性测试，这次文章大纲分为三大内容：可用性基础知识、HMI可用性测试实际工作内容、 HMI 可用性测试评估维度体系，最后一点是重头戏。

往期回顾：

万字长文！车载 HMI 语音设计基础知识科普 前沿： 开头必须来一句，我相信语音一定是未来，我非常确认 这篇 HMI 的语言探索以介绍语音交互内容为基础，结合我的实际工作项目经验，输出总结关于语音设计的内容，最后结合案例，在对话设计中会进行深度的探索，并提出个人的想法和思路，因为有的时候深度去思考觉得我们项目还可以有

阅读文章 >

万字干货！超全面的HMI 竞品分析手册 他来了～ 他来了～ 一个月时间的打磨，不知道熬了多少次通宵了 前沿： 为了输出这篇竞品分析文章，我也是够拼了，利用周末的休假时间，预约这四家 4S 店进行试驾，并进行对车辆的拍照，和销售对话的录音等获取到一手资料，再去做分析、总结这一次的探索。

阅读文章 >

我们在文章前夕先谈谈可用性测试与用户访谈，可能后期也会针对 #HMI 用户访谈# 这块内容会再输出一篇文章。可用性测试和用户访谈的区别→ 可用性测试更偏向于观察用户的操作行为，而用户访谈是更好的挖掘用户的需求。可用性测试是为了找出产品的问题而测试，通过这种测试找出产品中存在的问题，加以解决，最后目的也是为了让 产品 用起来体验更加。

大家也发现了，关于 HMI 设计类文章很多平台上很少有，还有设计师工作中用到的设计方法论，如何运用到 HMI 车载领域当中，确实都很难找到，并且专业领域的内容车厂也不愿意拿出来分享，我一开始写文章的初衷就是想打破这个格局，虽然一个人力量很小，但我还是坚持做下去了，希望通过我的分享能够让更多的人能进入这个赛道，并且也能输出自己的经验传递下去，成为光，并散发光。

进入我们今天的正题吧。

可用性基础知识 ISO9241 中对“可用性”的定义是：特定用户在特定的使用场景中，为了达到特定目标而使用某产品时，所感受到的有效性、效率和满意度。

1. 可用性原则 有效性（Effectiveness）：用户完成特定任务的情况。比如：设定一个调节空调风量的任务，让用户操作，记录员在旁边记录用户的一个完成度的情况，成功完成、求助后完成、未完成的状态。

效率性（Efficiency）：用户完成特定目标的效率，任务完成时间和完成的一个路径。在记录过程中如果在一个正常时间范围内无需关注，主要还是要记录在某些功能上面花费较多时间完成的任务。在操作路径上也要观察，是否符合我们设定的操作路线，是否存在偏差或者是犹豫不决的地方。

满意度（Satisfaction）：用户使用该车机系统主观满意度，当然我们也要提前做好一些标准，比如任务完成的难易度进行评价，任务完成的满意度测评等，

总结一下

一个好的可用性必须能够满足这三个维度，这三个维度也会有一个重要程度之分，有效性 > 效率 > 满意度。

需要最后补充一下：

在评估一个任务可用性以外，还要需要注意该功能的价值，尤其是 OTA 升级发布新的功能，功能价值分为两类：用户价值和商业价值，作为设计师的我，觉得用户的体验应该是放在第一位的，有了好的体验才能够更好的去谈商业价值，不然就是在扯蛋。例如→ 我们在优化负一屏中的体验，将调节音量新增了可以调节四种音量大小，多媒体、电话、导航、语音，旧版本的音量调节，用户经常会吐槽，因为当时功能设定负一屏音量调节是整个的一个系统调节，你在音乐调节很大音量的时候，如果有一个电话接入进来，对方说话声音就很大，会吓到用户，这个在驾驶过程中会很危险的，因此在OTA升级后，我们做了优化。

2. 可用性测试类型

其实可用性测试方法和类型很多，会在不同情况下使用，选取的方式也是需要看团队设定的目标、在什么阶段、最终的预算能有多少钱，真的，没钱很难办事情。

探索性测试：

产品在不同阶段，可根据不同的测试类型做可用性测试，在产品初期可使用探索性测试方法，利用产品的原型图展示给用户，探索性的测试目的是，用户是否对这款产品有所了解，如果在某些方面有所疑惑需要记录，根据多组测试，重叠性较高的功能就需要 UX 去优化，在产品初期需要不断的试错。

比较性测试

我们先说一下比较性测试，我们在做设计时会出几个不同的方案，需要在这个几个方案中做出选择，如果公司非常重视测试数据的话，会将设计方案同时上机进行路测，最终结合数据，让体验专家评判方案之间的优缺点，最终决策出符合用户体验的方案；另外一种比较是选择两种或者更多的产品，去研究他们优缺点，确定哪个设计方案能够提供给用户带来良好的操作体验；这两种方案取决于项目的时间长短，如果像服务形的乙方需要快速的出方案，则更多的采用的是第二种，甲方有着自己设计研究部门可以给到部门有试错的时间成本，那么他们更会倾向于两者相结合的方案，我们只能提供可行性的方案，最终还是需要领导层进行拍板实施。

评估性测试

当产品进入后半段，在发布版本前后，上机进行测试，HMI 上机测试分为在室内台架上测试，另外一种是装机在道路上测试，不同场景的路测，在这个阶段的可用的测试方法是评估性测试。评估性的可用性测试目的是确保这个产品在发布之前将潜在的问题进行修复；在版本发布之后本公司或者一些测评机构会根据自己的评测标准进行对这款产品进行评估测试，对照自己的评判标准进行打分，方便后续 OTA 升级，版本优化迭代功能。

3. 可用性测试方法 相信大家对于定性和定量这两个词并不陌生，在可用性测试中承担着重要的组成部分。

定性 / 定量研究

定性研究是指参与本次车载系统的体验者对于可用性的一个直接评估，从而产生结果，并且发现哪些功能在操纵的时候会出问题，有哪些体验是觉得不错的，哪些功能的体验需要进行优化，听完这些内容是不是觉得和车载系统的专业测评人差不多了吧，当然，在做这个定性测试的时候需要找不同的人群进行测试，需要做到完整性。

定量研究也是我们常用到的一个测试方法，定量研究出的数据对于可用性启到了间接评估，通过参与本次车载系统体验的用户，观察他们在操作事先列举好任务上的表现状况，这些状况包含了本次任务完成消耗的时间、完成的成功率、错误点击等；定量研究的结果是一些简单的数据，这些数据需要有一个参考的依据，一个已知的标准，要么就是竞品体验的一个对比数据，还有一个是自己车载系统前后版本的一个对比看看改进多少（专业术语：ROI），一个词需要找到 “参照物” 。

例如：在多少秒内操作是一个安全的范围值？

单次交互操作动作不能超过 2 秒（1 秒内为最佳）如果一个在行驶过程中需要交互操作的动作 用时 2-3 秒就已经是一个危险状况，所以我们参考这个依据，可以进行对我们车载系统做一个判定。

定量的数据是有了，参考标准也有了，有的功能方案是不 OK 的需要去优化，但是这些数据没有告诉我们如何去优化它，需要在设计方案中何如去优化？定量分析研究只是记录了一个过程中得到的数据，也没办法得到用户在什么项目中遇到什么困难，比如车辆设置中的调节 ADAS 的某一个设置选项，用户不知道在哪里寻找，我们只能记录这项任务失败。所以在为了更好的做可用性测试，我们通常会使用定性研究来增加进行补充缺失的部分。

如何运用定性和定量研究

前面有提到他们之间的区别，那我们在日常的工作中该如何的运用呢？在什么阶段用什么研究？

在发布车载系统 1.0 版本和后续迭代版本优化 1.x 版本，可以使用定量、定性、两者组合性来评估，如果这次评估的目的是数据方面，在这个功能点上我们优化多少，提升了多少用户使用了这个功能，那么就需要采用定量分析，因为只有定量研究才能得出每一个版本对比上一个版本到底优化了、提高了多少。

需要针对车载系统重新设计内容时候，要通过定性的研究方法去完成，在这个过程中用户的角色是承担为设计提供可行性方案的人，他会觉得在哪方面可以进行优化，到得这些用户数据和意见之后，也便于设计师们做出选择性的优化，创建出一个新的体验感，所以这个阶段使用定性研究方式更为适合。

举个例子：

用户在体验过程觉得在操作调节音量的交互感觉不好，抓住关键词“调节音量体验不好”，那么就要询问清楚，问到用户：“是在下拉出现的负一屏中 调节体验感觉不好，还是在进入设置项中的去调节音量体验感觉不好呢？因为在做定性的研究的时候不会设定怎么进入，因此会出现通过多种方式去操作系统某一个功能，所以需要针对这个问题询问清楚，才可以正确的优化这个体验流程。后面还需要跟进这个问题，是操作步骤过多，需要优化路径？还是在滑动的体验感需要加强？等这类问题，当然也可以让体验者去叙述他自己的点。如果同样的去发现这类的问题，你去使用定量那么会增加很多工作成本不说，预算成本也会增加。

可用性测试实际工作内容 由于我们项目的保密性，不能透露过多内容，我将这次案例换成了其余车载系统，这次可用性测试的目的是系统评分数据

1. 设计任务 前面提到定量研究测试，是请多名用户来参与对我们车载系统的一个体验，我们将原先设定好的任务对用户进行说明，然后我们在车内观察用户使用我们产品的一个状况。可用性的评估是基于任务的，所以接下来我们讲一下任务的五个原则：锁定主要任务、明确任务起点与目标、给任务设置约束条件、任务不应过于简单、避免提供线索和描述操作步骤

主要任务

用户在使用车载系统目的有很多种类，需要听音乐、电台、看视频、导航到目的地、接/打电话、调节空调/温度等等，可能会有上百个功能点需要去操作，但一场测试不可能全功能进行测试，我们只有挑选出最重要的任务来进行测试，或者是刚上线的车载系统，需要测试一下基础功能评测，如果遇到产品 OTA 升级或者是改动很大的版本点，会改变用户的操作步骤，更或者是新增加的功能，都可以优先测试。

再举个例子：

任务：调节空调的温度

我们需要观察的是，他是如何调节空调温度的（我们设计师自己肯定知道全部的调节方案）

第一种方案：可以点击导航栏下方的温度，点击可以进行前后拖动来改变温度

第二种方案：按下方按键，呼出语音 “温度调节到 21 度”

明确任务起点与目标

在可用性测试中最重要的就是用户能否可以完成任务项，所以需要明确目标，如果没有的话，就无法判断用户是否完成任务，我们最初设定一个目标。

例如 “在音乐界面中将播放模式调成单曲循环模式”这是我们这个任务的最终目标，只要最终用户在音乐界面中将播放模式改为“单曲循环”即为此项任务成功完成。

给任务设置约束条件

在设定任务的时候，会出现可以多种方式去完成，上诉案例空调调节温度，就可以使用两种方法去完成，因此如果本次全程操作不允许用语音操作（这是作为一个约束的条件）本次的全部测试项目是关于在中控测试评估的，语音会有他自己的一套测试任务，这些都需要在任务开始前设定好的。

任务不应过于简单

如果你想测试用户是否找到这个功能，请不要用“找到一个 xxx 暂停按钮”，我们需要给用户提供一个处理现实场景中的任务，而不只是去找这个按钮的位置，例如：“找到音乐暂停按钮” 改为“在酷我音乐界面暂停一首歌曲”这样会有一个明确的场景，这个场景是可以运用到现实驾驶中出现的任务，如果变成“找到音乐暂停按钮”就属于一个不 OK 的任务。

避免提供线索和描述操作步骤

设计任务的时候应该给出具体的目标，而不是列举好的整个操作步骤去教用户去完成，这个跟说明书没两样。

例如：“购买酷我音乐的季度会员”。进入酷我音乐界面、点击酷我音乐中我的、然后点击会员中心、再点击续费、出现弹框选择季度充值、最后扫码付款。用户在接受到这些信息后，就知道先进入音乐应用、找我的、寻找充值入口、最后再进行支付。

引导性过强的话会失去任务测试的意义，这样做会错失用户在操作过程中发现的一些问题，观察员也将错失记录的机会，如果没有这提前事先布置好的步骤，可能会出现一些操作让他感觉有异议，不知道自己是否操作成功或者是是不是点错了等等状况。在用户使用产品的时候，我们应该考虑使用的目标，不是考虑具体的操作步骤。我们在设计任务的时候一定要避免提供线索和描述操作步骤给到体验者。

总结一下

针对用户来看的话，车载系统对他们只是一个工具，达到他们想要的操作目的“比如听音乐、导航”这些功能目的，所以在可用性测试中，我们需要把测试车载系统某个功能目的作为重点。

2. 招募人选 在招募人选问题之前，需要根据这次测试的目的和需求，确认是定性研究还是定量研究或者是组合性的研究测试方式，这次的目的是对于新系统的一个评分，这次研究方向确定好是做定量研究测试。

定量研究可用性测试是基于（30+以上人 体验者），但也有时候定量研究也会少于 30 人，因为预算的问题，或者其他的原因无法请到这么多人，因为招募车载系统的一个体验用户，相对于招募去体验 APP、网页端产品、还是 B 端的产品，都会难很多，因为条件的限制，所处的环境也变化了，因为是有驾驶的一个状态，还需要去操作提前布置的任务，所以在招聘人员的时候确实相对其他平台要难。数据就会存在一些偏差。定量研究通过任务的完成率、完成时间、满意度进行评分。这些总结性的评估数据，通常都是用于车载系统的迭代过程的跟踪，在下一个版本中数据是否得到提高，从而达到优化的目的。

另外给大家补充一下定性研究人员选择

定性研究用户可以 5 人参加这场测试，就可以发现大多数（85%）的产品可用性问题，随着用户的增加，会发现的问题会逐渐减少，因此最终定性研究分析选定的人数需要我们去考量。

在后面的实际案例中，我们采用的是定量研究，会针对整个定量研究全案做一个详细的解说，也会增加一些定性的来作为补充说明。

总结一下：

我们要根据实际情况来确定我们招募的用户数量，对比每一次的测试结果于后续 OTA 升级后的效果，是否需要增加投入的预算来做可用性测试。

3. 准备工作 在做可用性测试之前需要规划好准备的工作事宜，先是测试地点和工具的准备，后续是相关资料的准备，后面需要签署保密协议，最后就是整个的可用性测试剧本准备。

测试地点和环境

HMI 车载系统测试场景相对于其他端的测试场景要多，这些不同测试地点和环境主要目的就是针对影响用户操作的因素来做多方考量。

车载系统测试的地点：

路测（大马路上，封闭路段、正常道路）、地下车库、路面停车场、隧道等

车载系统测试的环境：

晴天、雨天、阴天、下雪天、雾霾、沙尘暴等

对于硬件的测试还会增加在不同温度/湿度下的测试：

极寒地区、干旱地区、常年潮湿雨水多地区等等（这类测试跟设计关系不大，想普及一下）

准备的工具 

需要在测试车内装机好需要测试的系统；安装眼动仪来记录用户的观看轨迹，便于后续优化界面设计和交互设计；还需要后排记录人员跟拍操作录像资料，便于后期的分析操作细节。

相关资料

首先就是准备整套测试中的任务卡片，便于用户查看；还有要为自己准备一张表格，记录用户操作中出现状态的数据，如任务是否完成、完成时间等状态；还有一些记录关键事件和测试中观察用户体验的表格，比如设计中可能会出现的问题，方便结束后进行总结，加入到后面迭代版本点中。

签署协议

在测试期间需要签署保密协议等，因为用户测试的是未上线的产品，为了确保项目安全起见，需要让参与测试的用户签署保密协议。

剧本准备

HMI 可用性的剧本准备和其他基本类似没有过多的出入，这个过程是：接触用户 →开场白 → 开始测试 → 事后访谈 →给予奖励并送走用户的整个过程，这些相同的剧本准备、还紧跟后面的观察、访谈这些内容，大家都可以自行搜索，因为下面还有更重要的内容需要细讲。

最后一步就是分析前面所得的数据，但需要一个标准去评估衡量，下面进入我们本篇文章最核心的部分吧。

HMI 可用性测试评估维度体系 对于 HMI 车机系统可用性测评有很多的标准，我们对 Thoughtworks 的度量标准进行了分析学习，根据前面的可用性测试原则，最终得出评估的三个维度：视觉行为表现（Visual Behaviors）、HMI 软件任务表现（HMI Task Performance）、主观感受（Subjective Feelings），这测试的体系主要针对的是动态测试下的 HMI 车机系统可用性测试的标准，静态测试（注：静止状态下、车辆未启动状态下的操作）任务还会有另外一套测量体系的标准。

1. 视觉行为表现（Visual Behaviors） 视觉行为表现的二级维度是视线离开路面的时间，因为这个维度是针对→完成任务是否是在安全时间内的一个评估标准，这一项是至关重要的，HMI系统在设计方面一定要遵循安全的设计原则。

评估它的指标是用户在车机单次扫视时长，车机总扫视时长，为什么会增加这一个评估指标呢，因为有些任务不是单次扫视就能完成操作的，比如在中控上面调节音量大小，我们项目中有一个定义是在绝大数页面当中，在空白区域左右滑动就可以改变音量的大小，所以这项任务测试数据中交互手势是表现相对较好的。当然还有其他方式→第一步：下拉交互手势，将负一屏滑动下来；第二步：找到调节音量大小的滑块进行调整音量大小。这个交互方式和其余的车载系统是基本相似的，所以在整体考量方面，在中控调节音量大小是一个比较危险的操作，因为总时长较长，甚至单次扫视的时间也有过长的一个情况。

2. HMI 软件任务表现（HMI Task Performance） HMI 软件任务表现的二级维度是有效性和效率，这方面测试用户的一个任务完成度情况。

有效性的评估指标是任务的完成率和人均错误次数 ，这两个数据是指测试的任务是否成功完成了，在操作这个任务的时候用户犯了几次错误最终才完成的任务。设定一个任务：完成“搜索找周围加油站”，操作状态：静止状态下（非驾驶状态），操作限制：中控屏幕内操作。通过这些条件得到不同的数据。类似这种任务，我们可以做多种不做任何限制状况。

得出的结论是：

语音操控下最优，完成率和人均错误次数较低，错误的就是有些地方的方言无法识别，其余都可以正常完成；在中控屏幕中操作，只有在非驾驶中可以完成任务，在中控屏幕操作中需要很多步骤，1.首先进入导航页面，2.进入导航页面后，有不同的操作路径可以进行搜索加油站，第一个直接在输入框中搜索加油站，第二个就是在下方有加油站的 icon，可以直接查找，在第一次使用我们产品的用户，绝大多数都是进行第一种方案。

最后数据比较非驾驶中完成任务率和人均错误次数远低于驾驶状态，因为驾驶状态下完成这类任务时间会增多，并且驾驶中不可能长时间定于屏幕。其实现实场景中，在驾驶中搜索加油站的场景会偏少，所以更推荐用户多运用语言进行搜索完成任务，如果不习惯语言交互，那么请在非驾驶状态下进行操作中控屏幕。

效率的评估指标是完成时长 ，通过上面的案例我们也可以直观的看出语音交互搜索加油站完成的时长是最短的，因此他在效率上也是最高的，语音交互也分为驾驶状态和非驾驶状态，效率也是不一样的，非驾驶状态效率要高于驾驶状态，因为驾驶状态下去扫描屏幕信息难度要高于非驾驶状态下的。其次就是静止状态下的操作中控屏幕效率也要高于驾驶状态下操作。排个序不同场景在不同的交互方式，非驾驶状态语音交互 > 驾驶状态语音交互> 非驾驶状态中控操作 > 驾驶状态中控操作。

3. 主观感受（Subjective Feelings） 主观感受的二级维度是综合感知负荷 ，事物通过感官在人脑中的直接反应，感官这一个词大家也许会感觉还是有些陌生，HMI 车载系统交互中从视觉、听觉、嗅觉、触觉以及味觉等方面的感官交互，也就是通过眼睛、耳朵、鼻子、嘴巴以及皮肤触摸实现，围绕这些感官进行设计的，这些对用户直观的感受都需要记录下来，作为对于后续优化系统作为研究内容。

综合感知负荷的评估指标是感知脑力负荷，这个词想必大家也没咋听说过，我简单介绍一下，从任务和个体两方面出发，脑力负荷中的任务和执行任务的个体均相关。在同一任务中，不同的用户所感受到的脑力负荷仍可能不同，用户自身的情绪、动机、策略及个人能力都可能影响到脑力负荷。从信息处理能力的角度出发，将脑力负荷定义为: 用户在执行某项任务时对所应用的“信息处理能力”的大小，可以通过测量其“信息处理能力”来直接度量其脑力负荷的大小。一共有两个因素来决定，一个方面是“时间占有率”，时间占有率是指完成某项车载任务过程中用户的最低处理时间。“时间占有率”越低，则脑力负荷越低，“时间占有率”越高，则脑力负荷越高；另一个方面是“信息处理强度”，信息处理强度是指在单位时间内需要处理的信息量或者处理信息的复杂程度，“信息处理强度”越高，则脑力负荷越高，反之则相反，有点难理解的话还是多看几遍吧。

脑力负荷的测评方法主要包括: 主观测评方法、作业绩效测评方法、生理测评方法以及综合测评方法，关于这些维度的后续我们在详细探讨。

4. 给大家开一个小灶 本想这个留着后面慢慢讲的，但是已经谈到这个专业领域的知识，我又没收住，就简单的给大家提一嘴，后期还会单独针对这一块做深入的探讨。上面谈到脑力负荷，那我们设计 HMI 车载系统的时候，该如何降低脑力负荷呢？

从视觉、认知、操作三个角度出发减少脑力负荷

视觉：

是指 HMI 车载系统的界面信息视觉复杂程度，减少视觉负荷，需要做到信息功能更加精炼、主次分明等要求。根据调查：人对产品的第一印象是在 0.5s 秒形成的，有一点要知道：为了降低视觉负担，不是设计的很简单就完事了，驾车环境和其他产品不一样，对于视觉要求较高，因为用户每盯屏幕多 1s 钟，就会多一分危险，所以在设计的时候不能将其他端的设计照搬硬套，减少用户阅读的信息，简化信息内容等。

认知：

是指用户对于 HMI 系统界面的理解、思考的脑力消耗，交互设计中有一条原则：不要让用户做过多的思考，不要增加用户的认知负荷。在设计 HMI 车载系统的时候，视觉设计和交互设计要保持全局的一致性，HMI 车载系统的设计和其他端也不一样，APP 端要将这个行业的框架结构要一样，所以大家看到淘宝、京东、网易严选、苏宁易购等购物平台 APP 首页的框架都是一样的，从而降低用户认知成本，这个是行业的一致性。

但是大家可以看到车载系统，每家的定义都有差异化、也有相同点。比如小鹏、蔚来、特斯拉都是以导航为首页，理想 ONE、五菱星辰首页的设计方式是以卡片为主，所以在于车载系统中的一致性是在自己本产品中体现，视觉、交互的一致性，不能做过多、过于复杂的交互方式。

视觉的一致性就体现在的通用颜色，比如导航模块中的交通拥堵的颜色，深红色为极度拥堵路段、红色代表堵车、黄色代表缓行路段、绿色代表畅通路段，这个只能在一个颜色系列下微调，不能做大幅度改动，但这个还需要按照每一个国家的定义来，有一些国家对于颜色定义有着自己的要求，所以在做海外导航的小伙伴们要时刻注意下。

操作：

是指用户移动头部、手臂、手指来点击触碰 HMI 车载系统，如何做到减少操作负荷。下面从软件层面和硬件层面来讲讲：

针对软件方面的优化：

交互内容面积越大越容易操作；交互的内容应该偏向于主驾驶便于操作的区域，距离主驾驶越近越好；与其他交互手势、方向避免冲突；点击的交互方式易用性强于长按和双击，但车载系统有的地方还是需要用到这些其他交互方式，全局做到尽量少用，放大地图之类也需要延续双指交互手势等；单指交互优于多指交互。

针对硬件方面的优化：

对于硬件操作的优化，沃尔沃汽车将主驾驶屏幕做了倾斜，对于主驾驶是方便操作，唯一的缺点就是不可以挪动，他是完全镶嵌进去的，如果副驾驶需要链接手机蓝牙到车上面，对于副驾驶的观感就不太友好了。这一点新款的特斯拉 S/X 系列做的很到位，他可以将屏幕左右的倾斜，在设置项中可以选择屏幕的调整，针对操作这一点优化相当不错的，我在其他平台看到有的车主在特斯拉 model 3 改装了屏幕，将固定的屏幕改装成左右上下都可以移动的屏幕，动手能力超强，给车主点个赞。

总结 本篇文章是HMI车载领域的可用性测试，但其他领域的设计师们也可以有学习的内容。

大家好，我是和你们聊设计的花生~

随着人工智能技术的发展，运用算法自动进行图片处理的工具越来越多，极大地提升了设计师的工作效率。之前向大家推荐了在线 AI 修图神器 Hama，能够轻松抹除图片中不需要的部分，与背景实现完美融合；还有在线 AI 抠图 神器「Erase.bg」，能在几秒内快速从任何图片去除背景，并且以提供原始分辨率下载。

不限次数！快收藏在线免费抠图神器「Hama」 Hama 如同上次介绍的「Magic Eraser」，让用户上传图片、将画面中不想要的部分抹除，因为这类服务都是使用人工智能 AI 加上机器学习方式训练出更强大的程序辨识能力，会分析标示人物或物品，移除后将附近的颜色补充进来，就会使去除后的相片画面很自然，而且这项服务完全免费，使用者只要

阅读文章 >

又一个抠图神器！在线免费一秒搞定超好用！ 当今的在线去背工具多半会整合 AI 人工智能技术，以机器学习方式去建构出可准确辨识前景和背景的模型，使用机器自动化去除背景的好处是快速、精确而且无需额外编辑，即使没有专业绘图软件一样可以在浏览器进行，remove.bg 是在线去背服务最早出现、而且最强大的选择，后来也有 FocoClip

阅读文章 >

今天要向大家推荐的 ClipDrop Remove Background 也是一款免费的在线 AI 背景扣除神器，它的背景移除功能非常强大，在 Producthunt 社区 5 月 12 日的每日产品榜单中排名第 5。

据开发人员介绍，他们研发的算法使 Clipdrop 的背景移除精准度、速度和稳定性都达到了前所未有的高度。ClipDrop Remove Background 的功能特色主要体现在以下 2 点：

① 能自动识别图片主体进行抠图，不会将颜色相近的阴影或背景错误保留：

② 扣除背景的同时也能保持细节，并做到边缘干净无白边。

Clipdrop 对上传的图片没有尺寸和大小的限制，处理时间最长不超过 10s，抠图完成后直接下载原图，支持输出最高 5000*5000px 的图片。我也上传了几张图片测试其抠图效果：

首先是人物图片，原图尺寸 3917*5354px，大小 1.45MB，抠图时间为 7 秒，抠图后输出图片尺寸为 3658*5000px，大小为 7.92MB。抠图效果非常不错，头发部分的一些空隙都清除的很干净，衣服边缘也扣得很干净，没有模糊的白边。

接着我又试了一张椅子图，原图尺寸为 3569*4461px，大小为 1.56M。抠图时间比人物图片更短一点，输出的图片为 3569*4461px，大小 8.94MB。抠图边缘同样非常干净，而且很精准的只抠出了椅子的主体。

个人使用感受非常棒，能为经常需要处理抠图的小伙伴省去不少时间精力，感兴趣的小伙伴可以去官网体验一下： https://clipdrop.co/remove-background

最后再为大家总结一下 ClipDrop Remove Background 优点：

免费在线 AI 智能抠图，打开即用 抠图速度快精度高，自动识别主体，边缘清晰无白边 上传图片无限制，输出图片最高支持 5000*5000px 以上就是今天的推荐，如果你有关于设计的疑问，欢迎加入优设官方设计交流群和大家一起交流，进群方式见下图↓

前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

「夸克」 轮播视频 – 降低切换流失率，提升视频穿透性

1. 使用场景

搜索相关内容时，瀑布页会出现相关视频，给予用户多元多类型内容呈现。

2. 设计思考

设计目标：提高视频穿透性，从而带来视频播放转化率的提升。

设计方案：当用户搜索关键词后，首屏会出现相关视频，当用户停留在视频区 1 秒时，四宫格视频会自动播放 2-3 秒视频中的精彩瞬间，给予用户判断是否感兴趣，精准打开感兴趣视频，降低频繁跳页面，给用户带来的繁琐流程。同时提高视频曝光率。是一个对用户友好体验的设计点。

「微信」 合成表情 – 自定义文案，体验表情包双层快乐

1. 使用场景

聊天时，找一个贴合当下场景使用的表情包太难了。

2. 设计思考

设计目标：提升聊天场景表情包文字呈现的贴合性，凸出表情包文字定制化体验

设计方案：在聊天界面，通过向表情搜索页输入具体名字+动词或其他，可生成带有文案专属的表情包，相比收集别人表情包发送，这种 DIY 表情更能打动对方。参考：（ps：快给过生日的朋友发送“你的名字+祝生日快乐）

「哔哩哔哩」 一键三连 – 交互发挥到极致，就形成品牌效应

1. 使用场景

看 B 站视频和直播经常会和粉丝进行互动，家人们给我一键三连支持一下。

2. 设计思考

设计目标：提高交互易用性，减少交互流程，缩短触达时间

设计方案：想点赞+收藏+投币视频，常规挨个点击，需要点击三次。更好的三连方式：长按点赞图标，激活投币收藏图标联动，当环形进度表走完一圈你会看到三连反馈，便捷操作同时，带来的是惊喜和爽的体验。当我发现这个操作后，投币的习惯就自然形成。你会发现一个小的交互为产品提供价值不可估量，当然，这个交互是否贴合产品本身这就是需要考虑的了。

「人民日报」 报纸情怀 – 习惯永流传，交互更自然

1. 使用场景

人民日报 1948 年创刊至今传统报纸已深入人心，也是具有情怀感的。

2. 设计思考

设计目标：提升人民日报报纸感知，从线下浏览到线上查看，无缝隙转移，留住用户情怀诉求，提升产品内在调性，提高用户忠诚度。

设计方案：在首页，点击左上角「人民日报」文案，可进入日报模式，用户可点击模块内容进入对应信息中，且会有点击反馈感知，增加用户理解。针对不同用户，还可进行 tab 切换形式，一个是报纸排版，一个是瀑布式文字描述，满足多场景用户需求。

「微信」 刚刚看过 – 视频看完，想要接着继续看，快速定位

1. 使用场景

在刷视频号时，看到一个具有连续性的视频时，需要进入作者主页查找对应视频。

2. 设计思考

设计目标：提高浏览视频的易用性体验，增加关联属性视频曝光，提高用户活跃。

设计方案：采用和抖音一样的交互形式，当在视频流看完内容后，进入作者主页，右下角会出现「刚刚看过」点击按钮，点击后，自动定位到已看过的视频位置，让用户刚好的进行顺序浏览，提高用户看连续视频的体验。

「iPhone 钱包」 地铁充值 – 提前做出选择，减少用户行为路径

1. 使用场景

充值金额时，常规的输入已经是很简单的了 还能做到更易用嘛。

2. 设计思考

设计目标：提升产品易用性体验，预判用户的预判。

设计方案：当用户进入充值页面时，数字键盘上放会常驻提供三个充值额度，当用户输入其他金额第一个数字时，常驻位置会提前预判用户充值金额进行展示，以提供充值方便。如果你发现，这个操作怎么样都要点两次！那恭喜你，开始思考了。在键盘上方提供快速按钮，此位置是离大拇指最易近的操作区，最下方 0 同样也是，但需要考虑女性留美甲的情况，按 0 键，大多是手指内侧或者顶部点击，长指甲用户操作不便，相反，键盘上方易操作区都是通过指腹来操作，相比更高效。

「闲鱼」 图片模糊提醒 – 二手交易更在意商品图片信息，让闲置快速流通

1. 使用场景

发布二手商品后，有的商品曝光展示高，很快卖出去，有的则无曝光基本置灰。排除物品本身流通性，那还有什么原因呢.

2. 设计思考

设计目标：提升卖家发布商品图的清晰度，减少因照片模糊不清导致卖出概率低，提高优质详情曝光。

设计方案：用户上传商品图片，当图片质量较低时，通过缩略图形式给予用户温馨提示文案“图片模糊，建议重拍”告知用户模糊图片具体位置，建议用户重新上传，提高商品曝光提高成交率。

「懂车帝」 Tab 标题 – 登录登出，状态一目了之

1. 使用场景

使用产品时，想看是否已登录账号、需要点击个人中心查看。

2. 设计思考

设计目标：缩短交互链路，提升登录状态多维度显示体验。

设计方案：常规个人中心，在未登录或已登录都叫“我的”“个人”等，用户仅通过固定文字很难获取是否登录，需要点击跳转页面查看登录状态。「懂车帝」在未登录时，底部 Tab 显示“未登录”字符，已登录显示“我的”字符，虽然只是简单的文案替换，但就能为部分用户带来直观了解。就拿我说，当我发现后，「懂车帝」品牌就会强化我的心智，当你看到去使用，你也将把这个细节点记住，并且持续一段时间。

「iPhone 备忘录」 防错弹窗 – 放下手机行走，撤销弹窗出来

1. 使用场景

在通勤时间经常使用备忘录记录文字，时常会有不小心删除了一段话的情况。

2. 设计思考

设计目标：通过弹窗降低误操作，防错机制来给用户安全保障。

设计方案：备忘录摇一摇撤销，之前觉得此设计多余。在坐地铁时，发现这个设计很有必要。当你在编辑文本期间，要转乘、出站、行走时、不关屏幕的前提下，手指、衣物等都可能会对屏幕造成全局操作行为，此时摇一摇撤销弹窗发挥到作用，弹窗中仅有的两个按钮，很好的避免了全局可操作带来的风险，通过交互热区的缩小来避免误操作的风险，是一个很好的设计洞察点。

「QQ」 趣味 Tab – 变换的表情，让你忍不住拖拖拖

1. 使用场景

QQ 亿级用户，人群覆盖面广，相比微信，用户群体更年轻，喜欢尝试新鲜事物。

2. 设计思考

设计目标：通过趣味化表情，Tab 的变式玩法，给用户提供趣味性体验，提升用户心智，增加品牌传播

设计方案：双击消息 Tab 刷新页面，在用户等待期间变换 tab 图标，吸引用户注意，从而降低等待焦虑。用户也可长按拖拽释放 tab 消息图标来变换 Tab 图标，趣味、恶搞、古怪，总有一个能戳中你，快来试试看吧。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期 产品细节 分析结束，我们下期再见！

10个产品细节剖析，看看大厂是如何做设计的！ UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

阅读文章 >

欢迎关注作者微信公众号：草蓉三石

前言 好的产品总会关注细节，将细节做到最好，这篇文章分析了十个产品的使用场景和产品的设计思考，最后总结产品成功的原因，一起学习一下吧。

「夸克」 轮播视频 – 降低切换流失率，提升视频穿透性

1. 使用场景

搜索相关内容时，瀑布页会出现相关视频，给予用户多元多类型内容呈现。

2. 设计思考

设计目标：提高视频穿透性，从而带来视频播放转化率的提升。

设计方案：当用户搜索关键词后，首屏会出现相关视频，当用户停留在视频区 1 秒时，四宫格视频会自动播放 2-3 秒视频中的精彩瞬间，给予用户判断是否感兴趣，精准打开感兴趣视频，降低频繁跳页面，给用户带来的繁琐流程。同时提高视频曝光率。是一个对用户友好体验的设计点。

「微信」 合成表情 – 自定义文案，体验表情包双层快乐

1. 使用场景

聊天时，找一个贴合当下场景使用的表情包太难了。

2. 设计思考

设计目标：提升聊天场景表情包文字呈现的贴合性，凸出表情包文字定制化体验

设计方案：在聊天界面，通过向表情搜索页输入具体名字+动词或其他，可生成带有文案专属的表情包，相比收集别人表情包发送，这种 DIY 表情更能打动对方。参考：（ps：快给过生日的朋友发送“你的名字+祝生日快乐）

「哔哩哔哩」 一键三连 – 交互发挥到极致，就形成品牌效应

1. 使用场景

看 B 站视频和直播经常会和粉丝进行互动，家人们给我一键三连支持一下。

2. 设计思考

设计目标：提高交互易用性，减少交互流程，缩短触达时间

设计方案：想点赞+收藏+投币视频，常规挨个点击，需要点击三次。更好的三连方式：长按点赞图标，激活投币收藏图标联动，当环形进度表走完一圈你会看到三连反馈，便捷操作同时，带来的是惊喜和爽的体验。当我发现这个操作后，投币的习惯就自然形成。你会发现一个小的交互为产品提供价值不可估量，当然，这个交互是否贴合产品本身这就是需要考虑的了。

「人民日报」 报纸情怀 – 习惯永流传，交互更自然

1. 使用场景

人民日报 1948 年创刊至今传统报纸已深入人心，也是具有情怀感的。

2. 设计思考

设计目标：提升人民日报报纸感知，从线下浏览到线上查看，无缝隙转移，留住用户情怀诉求，提升产品内在调性，提高用户忠诚度。

设计方案：在首页，点击左上角「人民日报」文案，可进入日报模式，用户可点击模块内容进入对应信息中，且会有点击反馈感知，增加用户理解。针对不同用户，还可进行 tab 切换形式，一个是报纸排版，一个是瀑布式文字描述，满足多场景用户需求。

「微信」 刚刚看过 – 视频看完，想要接着继续看，快速定位

1. 使用场景

在刷视频号时，看到一个具有连续性的视频时，需要进入作者主页查找对应视频。

2. 设计思考

设计目标：提高浏览视频的易用性体验，增加关联属性视频曝光，提高用户活跃。

设计方案：采用和抖音一样的交互形式，当在视频流看完内容后，进入作者主页，右下角会出现「刚刚看过」点击按钮，点击后，自动定位到已看过的视频位置，让用户刚好的进行顺序浏览，提高用户看连续视频的体验。

「iPhone 钱包」 地铁充值 – 提前做出选择，减少用户行为路径

1. 使用场景

充值金额时，常规的输入已经是很简单的了 还能做到更易用嘛。

2. 设计思考

设计目标：提升产品易用性体验，预判用户的预判。

设计方案：当用户进入充值页面时，数字键盘上放会常驻提供三个充值额度，当用户输入其他金额第一个数字时，常驻位置会提前预判用户充值金额进行展示，以提供充值方便。如果你发现，这个操作怎么样都要点两次！那恭喜你，开始思考了。在键盘上方提供快速按钮，此位置是离大拇指最易近的操作区，最下方 0 同样也是，但需要考虑女性留美甲的情况，按 0 键，大多是手指内侧或者顶部点击，长指甲用户操作不便，相反，键盘上方易操作区都是通过指腹来操作，相比更高效。

「闲鱼」 图片模糊提醒 – 二手交易更在意商品图片信息，让闲置快速流通

1. 使用场景

发布二手商品后，有的商品曝光展示高，很快卖出去，有的则无曝光基本置灰。排除物品本身流通性，那还有什么原因呢.

2. 设计思考

设计目标：提升卖家发布商品图的清晰度，减少因照片模糊不清导致卖出概率低，提高优质详情曝光。

设计方案：用户上传商品图片，当图片质量较低时，通过缩略图形式给予用户温馨提示文案“图片模糊，建议重拍”告知用户模糊图片具体位置，建议用户重新上传，提高商品曝光提高成交率。

「懂车帝」 Tab 标题 – 登录登出，状态一目了之

1. 使用场景

使用产品时，想看是否已登录账号、需要点击个人中心查看。

2. 设计思考

设计目标：缩短交互链路，提升登录状态多维度显示体验。

设计方案：常规个人中心，在未登录或已登录都叫“我的”“个人”等，用户仅通过固定文字很难获取是否登录，需要点击跳转页面查看登录状态。「懂车帝」在未登录时，底部 Tab 显示“未登录”字符，已登录显示“我的”字符，虽然只是简单的文案替换，但就能为部分用户带来直观了解。就拿我说，当我发现后，「懂车帝」品牌就会强化我的心智，当你看到去使用，你也将把这个细节点记住，并且持续一段时间。

「iPhone 备忘录」 防错弹窗 – 放下手机行走，撤销弹窗出来

1. 使用场景

在通勤时间经常使用备忘录记录文字，时常会有不小心删除了一段话的情况。

2. 设计思考

设计目标：通过弹窗降低误操作，防错机制来给用户安全保障。

设计方案：备忘录摇一摇撤销，之前觉得此设计多余。在坐地铁时，发现这个设计很有必要。当你在编辑文本期间，要转乘、出站、行走时、不关屏幕的前提下，手指、衣物等都可能会对屏幕造成全局操作行为，此时摇一摇撤销弹窗发挥到作用，弹窗中仅有的两个按钮，很好的避免了全局可操作带来的风险，通过交互热区的缩小来避免误操作的风险，是一个很好的设计洞察点。

「QQ」 趣味 Tab – 变换的表情，让你忍不住拖拖拖

1. 使用场景

QQ 亿级用户，人群覆盖面广，相比微信，用户群体更年轻，喜欢尝试新鲜事物。

2. 设计思考

设计目标：通过趣味化表情，Tab 的变式玩法，给用户提供趣味性体验，提升用户心智，增加品牌传播

设计方案：双击消息 Tab 刷新页面，在用户等待期间变换 tab 图标，吸引用户注意，从而降低等待焦虑。用户也可长按拖拽释放 tab 消息图标来变换 Tab 图标，趣味、恶搞、古怪，总有一个能戳中你，快来试试看吧。

结语 设计师要有发现美的眼睛。美不仅是视觉，还有好的体验流程。不要让用户思考，这是每个设计师所追求的。认真记录产品细节，了解背后的思考，也是不断提升自己逻辑思维和表达能力的一种方式。

本期 产品细节 分析结束，我们下期再见！

10个产品细节剖析，看看大厂是如何做设计的！ UI/UX 设计能力的提升离不开分析与探索，针对优秀产品的设计进行分析总结，探索设计背后的经验规则。

阅读文章 >

欢迎关注作者微信公众号：草蓉三石