What 是什么

简介：「输入线索」是指用示例输入或说明文本以占位符（Placeholder）的形式显示在输入框中，以帮助用户理解需要输入的内容，或给出相关线索的一种设计方式。

例子：  在 Ant Design 输入框组件 的示例中（如下图），我们可以看到「输入线索」可以更好地帮助界面说明输入字段的内容或解释输入字段的功能。

Why 为什么

「输入线索」这种设计模式可以让界面不言自明。由于输入线索的内容位于用户输入的位置，因此用户往往不会忽略这个信息。

对比：「输入线索」VS「输入说明」

「输入说明」与「输入线索」都是辅助用户输入的设计模式，这些模式可以帮助用户明确输入信息的内容形式。

那么这两种模式有什么差异性呢？

使用「输入说明」这种模式时，快速浏览用户界面的用户可能会轻易地忽略说明信息，因为用户的目标是尽可能快地完成表单，然后进入下一步操作（虽然有的场景下这也是其中一个设计目标，但在这里不讨论）。因此，过多的文本说明也会给用户带来较大的心智负担。

Google 注册账号页是结合使用「输入说明」与「输入线索」的一个典型案例。通过使用「输入线索」告诉用户需要填写的内容，通过「输入说明」来补充填写信息的相应意图，进而使得用户可以清晰地意识到需要填写什么，并输入相应信息。

When 什么时候使用

用户可能不一定清楚需要在输入框中输入的内容。在设计上，你可能不希望在输入框附近上添加更多的字，造成视觉压迫。还有一种情况，如果界面空间有限，无法使用「输入说明」时，也可以考虑使用「输入线索」。当出现下拉菜单或者组合输入框时，往往需要配合该模式进行使用。

使用条件

· 输入框要求输入的内容可能不容易让人马上理解；

· 设计上不希望在其他地方补充新的内容；

· 可以承载文本的输入空间可能没有太多；

· 配合下拉菜单或者组合输入框使用；

How 如何使用

1. 选择适当的提示文本

· 对于下拉列表，使用 “选择”、“选取”等单词，英文使用 Select Choose 或者 Pick 等；

· 对于文本输入框，使用“输入”等单词，英文使用 Type 或 Enter；

· 尽量使用祈使句，以动词短语开头；

· 以描述输入内容的名词结尾，例如“选择状态”，“在此处输入消息”或“输入患者姓名”等；

2. 提示文本的位置

有关文本提示的位置应该和输入值的位置一致。 比如，提示本身不应该是下拉菜单中的可选值。

Example 案例

案例一：Ant Design Pro 登录功能预览

用户需求：用户登录功能的预览与体验

Ant Design Pro 是一个中后台开发的模板脚手架，其并不提供真实账号登录服务。因此 Ant Design Pro 的开发者为了模拟真实使用环境，提供了一个可正常登录的账号，账号密码分别 user 和 ant.design ，其余情况下用户输入的账号密码均会提示不正确。

在这个场景下，通过将正确的账号密码以输入线索的方式显示在占位符中，巧妙地告诉体验 Ant Design Pro 的用户正确的账号密码。

案例二：163邮箱登录页面

用户需求：登录账号

163邮箱登录页面的账号输入框中的输入线索非常有用。正常用户在看到后缀有 @163.com 时可能并不一定能意识到可以输入手机号码。而通过在占位符中 显示「邮箱账号或手机密码」，高效便捷地提示了用户可以直接输入手机号码进行登录。

案例三：小米账号登录页面

用户需求：输入账号密码

「输入线索」有一种设计上的变体，称为「浮动标签」。因为一般来说，当用户激活输入框时，占位符文本会消失。而「浮动标签」不会消失，通过移动位置和更改大小驻留在界面中。这种设计方式可以使得界面变得简洁、优雅。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

华为会定期派员工去两个地方做用户研究。第一个地方是华为手机线下门店，这个地方很好理解，通过观察和访谈顾客，能挖掘到不少体验设计需求。另外一个地方我完全没想到是——手机维修中心！来维修手机的用户都是愤怒而且失望，如果员工能体会到这些用户的心境，对产品的设计底线和情感关怀应该会做得更好。

另外一方面，通过数据分析、竞品分析得来的信息，我们不过是依据脑子里已经存在的假设再设计方案验证罢了。有很多信息是未知的盲区，未知的盲区有潜在不可预估的风险，通过用户访谈探索盲区能帮助我们打破固有观念，补齐短板，做出更贴近用户的设计方案。

通过访谈确实得到了想要的信息，也为后来产品优化提供方向。访谈期间发现了一些实用的小技巧，在此分享给各位读者。

技巧 1：通过预访谈修正大纲

我猜设计好访谈大纲的你迫不及待的马上想去访谈用户，但是如何证明现在的访谈大纲的正确的呢？万一设计的问题不对，那自然得到的访谈结论也是错的。所以在设计好访谈大纲后，可以先只预约 1 个用户，或者和目标用户相近的朋友进行一次访谈预演习。通过这次演习找到大纲问题或者访谈中遇到的其他突发情况，对大纲进行修正之后再批量预约用户进行访谈。

也可以把大纲当作一款互联网产品，每一次访谈之后对大纲进行反思迭代，让下一次访谈更好。

技巧 2：寒暄和循循渐进

如果和访谈的用户一开场就单刀直入的提问，可能用户此时刚从其他事情抽身出来，注意力和记忆力都还没进入访谈状态。开场立即提问会让用户懵，因此建议一开场先和用户寒暄，比较轻松的聊一些和产品相关的问题，给访谈热热身。

技巧 3：鼓励用户畅所欲言

中国人讲究和气生财，尤其对陌生人更是客气得很。不敢当面指出你的问题，担心你面子上挂不住或者生气。另外你认为是很重要的细节，用户可能不太在乎。为了从用户言语里得出更多信息，要鼓励用户多说不好的地方，甚至可以卖惨宣称收集不到足够的问题会被老板骂，求用户多吐槽。

技巧 4：不要使用用户不懂的术语

虽然在客户面前说些黑话会让你显得很专业，或者你和同事在公司里有约定的简化术语。但是用户并不懂这些，所以在用户前面收起你身为互联网人的身份气质，好好的说人话来和用户沟通，本身也是在设计真正的用户体验。

技巧 5：多询问曾经的真实经历

越是宽泛和抽象的问题越难回答，不知道该从哪个角度开始讲起。“从场景中寻找痛点”可不能只是嘴上说说的场面话，询问用户曾经的真实经历，就是获得现实的用户使用场景，具体的问题也能让用户回忆起当时的细节，这样你才能从细枝末节中找到痛点。

技巧 6：穿插现场操作，鼓励口述想法

用户访谈是非常消耗时间的方法，好不容易访谈一次就尽量榨干所有价值。建议访谈过程中穿插一些让用户现场操作的小任务，观察用户的现场操作，根据行为分析出体验优化点。同时注意让用户一边操作时一边说出脑中的想法，获取用户的思考过程，更能得到有价值的信息。

技巧 7：不要问封闭式问题

封闭式问题得到的信息很少，而且所有的问题答案都只是你对现有已知信息设置的。如果要获得封闭式问题的答案，不如网上直接发问卷来得效率高呢，在访谈中问这些性价比不高。我们尽可能多问开放式问题，多收集未知的信息。

技巧 8：给用户荣誉感

“垃圾是放错地方的资源”——说明对某些人不重要的信息对另外对人可能非常有价值。用户对访谈中说过的话认为并不是很有意义的信息，但是对于你来说可能就是提升产品体验的高价值问题。

我几乎每次访谈的最后用户都会对我说“我就随便说说，希望能帮到你”，这时候就真诚的告诉用户这些信息很有价值，让用户心中获得访谈的荣誉感，这样可能比给物质奖励让用户更开心。并且荣誉感会激励用户之后再给你反馈更多产品使用问题，持续得到有价值的反馈。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设  作者：龙爪槐守望者

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设  作者：Alipay

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

场景细分

随着各大智能厂商对用户行为数据的收集积累，拆分提炼出了不同场景下用户的特定需求，相比以前的大而全臃肿的功能界面，现在的功能、信息更加精确，产品将不同场景下的解决方案为用户提前准备好，用户只需要简单的选择就好，更加人性便捷。

1. B&O 音箱歌曲模糊切换界面

B&O 音箱面向的人群是音乐发烧友，他们对音乐有独到的理解，为了为用户提供便捷合乎口味的音乐，B&O 将歌曲类型与颜色情感相结合，分别是：黄色代表愉快的歌曲、红色代表激情的歌曲、紫色代表忧郁的歌曲、蓝色代表轻松的歌曲。用户只需要选择颜色就可以播放相应风格的音乐，给用户浓烈的感性艺术气息。

并且 B&O 将音乐播放场景做了细分：只收听自己收藏的歌曲、收听与自己品味相似的歌曲、随便听听；这三个场景下的需求通过三层圆环来满足：点击外环区域播放全网歌曲、点击中环区域播放与用户收藏相似的歌曲、点击内环区域播放用户收藏的歌曲。这种感性的操作方式省去了搜索歌曲的过程，极大的提高了便捷性。

2. 三星智能冰箱 2.0 系统

我们先了解一下三星智能冰箱 1.0 的系统是什么样的，首页包含时间、天气显示、音乐播放、购物清单、备忘录、相册、留言板、设备控制，用户在冰箱面板上什么都能做，整体感觉是一个臃肿的功能集合。

在 2.0 中，三星将用户使用场景做了以下的细分：烹饪模式、日常模式、娱乐休闲模式、家庭管理模式；在烹饪场景下，为用户展现菜谱，用户可以专注的去研究饭菜制作方法；在日常场景下，为用户提供日历、照片墙、留言板、日程等日常生活相关信息；娱乐场景下，用户可以在厨房一边忙碌一边听音乐，还可以查看社交消息，所有的功能都是围绕娱乐休闲；家庭管理场景下，全职妈妈可以一边做着饭，一边看着监控屏幕上儿童房孩子的情况及全屋的安防情况，也可以控制家中的设备。

场景细分可以有重点的为用户提供他们真正需要的服务，让用户感受到产品带来的贴心感。

3. Orvibo 灯光照明场景

Orvibo 根据用户使用灯光的习惯，按照用户对于光线的需求程度，将灯光使用场景分为：夜晚光线昏暗需要明亮的光照、白天光线充足不需要灯光、休闲时需要柔和些的光线、阅读需要不刺眼但明亮的光线、起夜时微弱的轮廓照明即可。为用户提供每种场景下的照明方案，准确快速的满足用户不同的需求。

4. 小米 TV 端空调控制界面

小米根据用户对于空调各个功能的操作频率，罗列出核心功能：开关、温度调节、冷热模式，界面中只体现这几种种信息，将低频功能隐藏起来，为视觉降噪，突出核心功能，提升了用户操控效率。

5. WOM 天气展示模块

针对那些上班中不方便看手机、穿好衣服正要出门、旅游到达当地酒店需要看一眼天气状况的场景，WOM 提供了简洁直观的设计方案，产品显示区域只保留 4 种常见天气类型，高亮的天气 icon 代表当前的天气状况，当天气将要发生变化时，相应的天气 icon 会闪烁。

此外，通过利用颜色来传达不同的温度，蓝色代表 0℃，白色代表10℃，黄色代表20℃，红色代表30℃，在不需要手机的情况下为用户提供了丰富的展现形式。

6. 三星电子画框

随着手机的普及，家庭对于电视的需求已不完全是为了收看节目，往往一个礼拜也看不了几回。三星基于这种情况为了延续电子屏幕的销量，赋予了电视装饰属性，演变为纯展示的电子画框，用户可以选择各种风格的肖像或风景图片进行轮播展示，扮演艺术装饰画的角色，从而满足用户日常家庭装饰需求。

直观明确的表现方式

在设计中融入图片，将操作、状态可视化，这些具象的形式可以让用户快速理解并操作，让我们看看各大智能产品厂商是如何实施的：

1. Nest 温控器安装界面

大多数智能设备买回家后，需要用户自己安装，有的甚至牵扯到线路问题，Nest 温控器安装界面采用与实物一致的模型元素，让用户有参照依据；通过零部件的运动告诉用户安装顺序；通过放大细节，告诉用户应该选哪一个部件及如何链接。让用户有更好的参与感、成就感，还可以降低公司的人力安装成本、客服成本。

2. 小米智能家居电视

小米智能家居电视背景运用实物图片，给用户营造家庭的氛围，设备卡片 icon 运用半写实风格，和实际产品一一对应，便于用户快速查找设备；卡片底部体现设备状态，精简的卡片信息使得设备的状态更容易被用户感知到。

3. 三星、苹果智能家居系统首页

三星、苹果都运用图片作为系统的背景，可以很好的和用户拉近距离，通过白色或磨砂卡片与背景做区分，三星的设备 icon 采用多彩渐变风格，和它趋于年轻化、时尚个性的品牌战略方向保持一致。

4. Whirlpool 洗衣机、烤箱、冰箱模式选择界面

由于洗衣机、烤箱、冰箱的运行模式和用户想要洗的衣物类型、材质、烹饪的食物类型、储藏的食物类型有强关联，Whirlpool 运用图片作为模式背景，将功能和物品类型结合，用户可以直观感性的理解和区分各个功能，从而快速做出选择。

5. Orvibo MixPad

Orvibo 在大屏智能面板的设计上大量使用图片元素，不仅可以区分各个功能模块，还增添了内容的丰富性，要知道智能面板的首屏和设备控制列表页功能是不一样的，它是用来承接并向用户展示房间内各个信息的，房间图片作为背景烘托出家的氛围，每个房间页面的左上角显示屋内温度、湿度、当前开启的设备类型及数量，很直观的向用户展示屋内信息。

每个场景都用具体的图片作为卡片背景，可以让用户预想到每个场景对应的运行效果。有的场景卡片中体现所属房间信息，告诉用户该场景只联动运行特定区域的设备。

运用图片会有以下问题：1、找到能体现各个特定功能的图片增加了人力成本；2、图片的多样性容易打破画面的整体统一感。所以要结合公司的现状克制的运用图片。

6. Amazon 智能家居系统

Amazon 的监控设备卡片背景外显了房间内的监控画面，用户在设备列表界面就可以直观的看到监控区域的信息，强调了用户关注的内容，缩短了操作步长。

7. Lenovo Smart Clock 备忘提醒时间设置界面

通常，我们设置时间时，系统会给我弹出时间选择控件，需要我们上下滑动设置；Lenovo Smart Clock 的做法是将时、分的设置具象成了时钟实际运行的圆形轨迹，与用户对于时间的认知保持一致，很贴心的设计，这种方式非常值得我们学习。

8. Google Nest Hub 定时界面

Google Nest Hub 将传统的定时列表具象成了一个个正在倒计时的时钟，用户可以更直观的看到每个定时的状态。点击某个定时卡片可以快速的进行暂停或删除操作。

9. 小米空气净化器界面

小米空气净化器界面，每一档空气质量值都对应不同的颜色，并且将颜色延续到了其他操控按钮，让用户对当前空气质量有更强的感知；净化器被关闭时，显示区域、控制区域置灰，明确告知用户设备状态及可操作区域。

10. 三星 SmartThings 设备连接查看界面

房屋面积大，会有很多的设备与多个网关连接，家中与网关连接的智能设备有时候会连接中断，具体哪个设备与哪个网关中断了不容易被查清。三星 SmartThings 将设备与网关的连接情况可视化，可以向用户直观的反映出哪个设备连接出了问题。

运用手势控制

通过利用不同形式的手势操控，让用户和产品的交互过程更新颖更便捷。要注意的是虽然手势不需要操控物理按键，但手势操控的形式要建立在用户已有认知习惯之上，请看以下案例：

1. LG 手机系统控制界面

最左边的图为行程信息截屏操作，目前截图方式有几个按键一起按下的，也有手机背面敲击三下的，这些都需要与设备接触，接触交互的过程就需要花费用户更多的时间，LG 通过双手捏合截图的形式体现现实中“抓取”的语义，用户使用起来顺其自然，瞬间就可以完成截图的目标。

中间的图为应用快速切换操作，用户只需要对着屏幕做挥手动作，就可以切换至下一个应用，这个隔空操控的手势核心使用场景是：当你正在厨房，手上沾着面粉或其他东西时，需要操控手机又不想弄脏手机，那么隔空操作就可以解决这一痛点。

最右边的图为多媒体音量调节，只需要作出旋钮的动作，就可以实现音量的控制，是不是觉着很 Cool。这种新的控制形式可以让用户加深对产品的印象。

2. Google Nest Hub 音乐播放控制界面

在 Google Nest Hub 的音乐播放界面，当你想开启或暂停音乐播放，只需要手掌隔空朝着屏幕方向做按压动作，就可以快速触发相应功能，这种方式让用户会感觉很爽，自己就像有了魔力。

3. Google Nest Hub 闹钟控制界面

早上闹钟响起时，需要用户选择关闭闹钟还是稍后提醒，常见的情景是，用户睁开眼伸手去点击某个选项，会干扰想要接着睡的用户。Google Nest Hub 在此处增加了隔空操控手势，用户如果想关闭闹钟，只需要闭着眼，手掌朝着屏幕一挥手，就可以搞定了，有没有被宠爱的感觉。

4. HomePod 音乐投射功能

苹果用户如果想将手机上正在听的歌曲通过 HomePod 播放，只需要将手机靠近 HomePod，就可以轻松完成音乐投射，整个过程就像将一个容器的内容倒入到另一个容器内，既充满趣味性又大大简化了音乐播放设备切换的过程。

提供个性化、多样化的选择

通过设计语言为用户提供更多的视觉风格，甚至开放编辑权限让用户更自由的制定自己喜欢的形式，这些都可以满足用户的个性化需求及专属感，请看以下案例：

1. Sony HUIS 遥控器

Sony HUIS 遥控器为用户提供了最大限度的自主编辑权，用户可以从后台设定每个按键的形式及功能，也可以在屏幕中设置户型图，方便控制对应的设备。

甚至可以绘制只有自己理解的专属图案，大大提升了专属感。

2. 三星智能冰箱屏保

用户具有喜新厌旧的心理，三星智能冰箱为用户提供了丰富的屏保：有没有任何信息展示的抽象几何艺术画风格、有配合温度展示的春夏秋冬风格、有简洁素雅的时间显示风格、还有照片背景墙风格；兼顾了用户日常装饰和功能的需求。

3. Lenovo Smart Clock

Lenovo Smart Clock 对于时钟屏保为用户提供了不同的风格，涵盖了大多数的人群风格喜好：活泼跳跃、实用直观、极简现代、抽象艺术、纯文字、纯数字等

甚至在同一种风格中再细分为多种色彩搭配方案供用户选择。可以说想尽办法来满足用户的个性化需求。

统一的设计语言及操控逻辑

这里的统一设计语言有两个方面：一、同一个功能在不同的智能设备上布局要一致；二、同一类设备在 APP 中的功能布局要一致；操控逻辑统一指的是：产品中设备的操控方式要和用户对实际设备的认知一致。一致性可以降低学习成本，提升更稳定的操控体验。请看以下案例：

1. 温控器多端控制界面

Nest 温控器及 ecobee 温控器在设备上的设计语言和 App 上的保持一致，方便用户在多端设备上的无缝操控体验。移动端与智能设备界面唯一不同的是，移动端，同一层级上展示的功能入口更多，适合更复杂的操作。

2. Orvibo 移动端设置界面

在移动端设置智能面板功能按键的界面中，Orvibo 将按键列表做成与实物一致的样式，便于用户快速找到对应的按键进行设置，这是提升智能家居一致体验常见的方式。

3. 三星 SmartThings 功能卡片

在智能家居 App 中，由于功能种类繁多、内容不确定等因素，承载它们的卡片在布局设计上面临很大挑战，需要兼容各种功能、还要保证卡片的整体一致性及合理的屏效比。

在 SmartThings 智能家居控制系统中，三星对功能卡片进行了统一的部署，卡片左上角为功能名称，左下角为状态信息，右下角区域为操控区，并且还考虑了只有功能控制没有状态、只有信息没有功能控制情况下卡片的拓展形式，充分保证了操控的一致体验。

4. Google Nest Hub 调光灯控制界面

在调光灯的操作逻辑里有这么个问题：是将亮度值调至 0%关闭灯光，还是需要一个单独的开关按钮。看看 Google 是怎么做的，它将调光区域与灯的开关做了区分，也就是说亮度通过调光区域操作最低为 1%，需要通过开关按钮进行关闭；这样做的好处是操作逻辑明确，并且当用户在 80%亮度下关闭灯光，下次开启时还是 80%的亮度，更加人性。

总结

目前网上各平台的智能产品界面有很多，然而大多都是不落地的概念稿，里面的设计稿由于没有具体场景及需求的约束，大多都无法解决公司实际项目中的问题，经常浏览仅能提升个人审美。只有平时通过对各行业实际落地产品的搜集积累和分析，才能发现它们在提升产品体验道路上的共通点、差异点，从而为公司提供真正有价值的设计方案。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设  作者：Aaron杜斌 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

图表作为一个使用频率不高却很重要的组件，让设计者们操碎了心。看着自己设计的图表，总觉得有哪里不好，但又说不上来。本文作者总结了快速提升B端图表用户体验的15小细节，一起来看一下吧。

B端界面中使用频率不高，但却无比重要的组件——图表，可谓是让设计者们烦透了心。图表设计起来不难，但想要设计好，也是需要下一番功夫的。

很多小伙伴问我，说：每次在设计图表的时候，总是找不出自己哪里设计的不好，但看着自己设计的图表，又没有那么满意，该如何办呢？今天，我们就来一起了解下B端的图表，挖掘一些设计者们平时未曾捕捉到的细节，获得这些细节，将从细微之处提升产品的用户体验。

本文将从以下五个部分来展开：

1. 什么是图表
2. 图表的优势
3. 开源图表库有哪些
4. 15个图表小细节
5. 总结

一、什么是图表

百度百科解释：“图表，Microsoft Office用语，泛指在屏幕中显示的，可直观展示统计信息属性（时间性，数量性等），对知识挖掘和信息直观生动感受起关键作用的图形结构，是一种很好的将对象属性数据直观，形象的‘可视化’的手段。”

根据百度百科的解释，我们来做一个”数据图表化“的小推导。我从网站找了一段描述低码的数据（数据来源艾瑞咨询，并做了一些小修改），如下：

“2016年开始低代码概念开始从国内逐渐兴起，当年低代码相关产品投融资事件达10起，亿元以上融资数量2起，至2020年中国低代码市场共有59起投融资事件，其中亿元以上融资共有13起。2017年融资事件11起，亿元以上融资3起；2018年融资事件12起，亿元以上融资2起；2019年融资事件12起，亿元以上融资3起；2020年融资事件14起，亿元以上融资3起。随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升，市场会迎来新的发展契机，短期内投融资热度将持续增长。”

虽然以上的文字已经做了一些简练，但阅读时候不免觉得有些绕，不能很直观的理解数据，且要记住关键数据还是较为困难的。

下面，我们对以上文字进行再次梳理，适当分段，进行结构化排版：

“2016年开始低代码概念开始从国内逐渐兴起，当年低代码相关产品投融资事件达10起，亿元以上融资数量2起。

至2020年中国低代码市场共有59起投融资事件，其中亿元以上融资共有13起。

2017年融资事件11起，亿元以上融资3起；

2018年融资事件12起，亿元以上融资2起；

2019年融资事件12起，亿元以上融资3起；

2020年融资事件14起，亿元以上融资3起。

随着企业对系统敏捷性、易用性需求的增加和对业务部门低代码接受度的提升，市场会迎来新的发展契机，短期内投融资热度将持续增长。”

通过分段描述，以上段落显得清楚了很多，但是例如”融资事件、亿元以上融资“等词语还是反复出现，整体来说不够简练。

那么，我们再将以上数据进行表格化展示来看看，如下：

我们可以发现，表格的展现形式比分段的结构化文本又清晰了太多，使得数据展示非常直观。不仅用户可以看清楚数据本身，还可以对比数据，假如表格再设计的人性化一些，可以将最大值进行重点标注（根据业务需要对数据进行差异化标注）。

不过表格也有劣势，无法展现数据随时间变化的趋势等问题。我们再次仔细阅读上述数据，可以梳理出如下图表。

上图将2016年到2020年的融资事件总数进行了重点处理，亿元以上融资事件数量进行了次要处理。并且用柱状图叠加折线图的图表表达了2016年到2020年低码融资事件数量的趋势情况。

二、图表的优势

综上所述我们可以发现，从通常意义上来说，图表优于表格，表格优于结构化文本，结构化文本优于普通段落。那我们来看看图表有哪些优势。

1. 针对性

一图一类型是图表的特点，例如柱状图是用来比较同一指标下不同对象情况的图表；饼图是展现部分与部分之间，及部分与整体之间占比的情况。我们在使用图表时，需要先对数据进行判断，再选择合适的图表进行展现。

2. 直观性

图表与文字相比，在数据的表现上非常直观。不仅可以让用户一目了然地看到数据，还能让用户将数据进行对比，从而发现问题，定位原因，解决问题。

3. 混合与拓展性

根据数据的属性，图表是可以进行混搭与拓展使用的。混搭是指图表和图表可以拼搭使用，例如折线图与柱状图经常合体使用。拓展性是指根据基础图表可以拓展出一系列个性化图标。例如堆叠柱状图是由基础柱状图衍生出来的。

三、开源图表库

目前开源的图标库以下几种：

1. AntV G2

在AntV的官网上，是这么描述G2的：“一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。”

2. ECharts

百度百科：“ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。”

3. High Charts

百度百科：“Highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。”

4. Chart.js

Chart.js是一个面向设计人员和开发人员的简单而灵活的 JavaScript 图表。以下是Chart.js的文档链接。

https://chartjs.bootcss.com/docs/

5. Chartist.js

Chartist.js 是一个面向设计人员和开发人员的简单的响应式图表，是前端图表生成器。

目前来说B端产品使用最广泛的图标库是AntV G2和ECharts。

四、15个图表小细节

在大致了解了图表以后，笔者总结了基于自身经验、团队经验与行业经验的图表小技巧。希望这些小技巧能润物细无声地影响我们的设计者，从而为B端提升一点小体验。

1. 折线图2px

通常在B端中，我们用到线，以1px居多。但在折线图中，我们经过反复推敲，发现2px线优于1px线。首先，2px线条显得有力而清晰；其次，在线条多的时候，便于分辨。

2. 柱状图间距

柱状图中柱子与柱子之间的间距与柱子的宽度一致就好，且最左边和最右边柱子距离两边的间距为柱子的一半。如下图所示，若柱子的宽度为X，则柱子与柱子间的间距为X，两边柱子距离各自向外间距为X/2。

3. 刻度值

图表上的刻度值递增数值根据实际情况需要做适当约束，如最大数值为150，就不适合刻度值上线标记为1000。其次，若业务数据一直处于动态变化中，则图表Y轴可以设置成动态。

4. 饼图文字显示

在饼图分类较少时候，可以将文字写在饼图上，但当分类较多时候，文字适合写在饼图外。

5. 饼图块排列

饼图块排列也是个值得考究的事情，通常来说，饼图块呈顺时针方向旋转，且以12点钟方向为起点，块面从大到小布局，若有“其他”模块，则放置在最后。

6. 标签位置

通常标签都会放在图表的上方区域，但这并不是一成不变的规则，例如当折线图线较多的时候，可以考虑将标签直接跟在折线的尾部。同时可以做一些交互效果，鼠标点击标签可以让线弱化或者显示。

7. 图表色彩

图表在配色上要使用区分度大的颜色，不要为了好看而使用相邻的色彩，这会导致图表的可读性大大降低。如有条件，建议在色彩上考虑无障碍视觉。

8. 同类色使用

属于同一色相，不同明度和饱和度的颜色，也是有使用空间的，通常表示同一对象的梯度变化。

9. 显示重点

当图表上数据及其多，且产品团队压根没打算将数据量减少时，我们可以考虑展示重点数据（系统默认展示推荐重点，用户可以自己选择他所需的重点），弱化其他数据。

10. 标题的妙用

标题不仅仅是用来呈现普通描述的，在特殊场景下，标题描述可以稍微进行变化，从而达到直观表述图表核心含义的目标。

11. 时间周期太长

某些业务的数据统计需要跨很长的时间周期，这时，图表无法满足如此长周期的时间展示需求，我们不要慌，可以通过以下几种方式去解决。

11.1 添加缩略滑块

给图表添加缩略滑块，可以通过拖拽滑块了查看某段时间范围的数据。滑块拉拽的越大，可以看到的时间范围越大，但注意，会有极限值。

11.2 添加滑动滑块

给图表添加滑动滑块，可以通过滑动一个固定大小的滑块，查看某短时间范围的数据。它与缩略滑块的区别在于，滑动滑块每次看到的时间段是一致的。

11.3 区块放大镜

如果图表的呈现就是希望时间周期显示完整，那么当时间周期较长的时候，颗粒度可以展示的稍微粗一些，不用太细，例如无需2月1日、2月2日、2月3日、2月4日、…连续展示，只要2月1日、3月1日、4月1日、5月1日、…间隔展示即可。在交互上，鼠标移入图表区不断进行某时间周期数据框选（即放大），就可以让框选区数据不断清晰。日K线常用此类方法去做。

12. 时间轴显示

当时间轴日期跨越在当年时，无需每个时间点都带上年份；而当跨年时，可以带上年份，这样可以保证时间轴显示更简单，不拥挤。

13. 等宽字体

若图表中会采用表格去协助查看某类数据的明细，联动展示，那么表格中的字体建议使用等宽字体，等宽字体方便用户用视觉来比较大小。

14. 数据归类

指标大盘上放置着各类型图表数据，建议设计者们对数据的进行归类整理，属于一类的数据临近展示，方便用户连续性查看相关数据。

15. 静态与动态图表

图表分为静态和动态图表，当业务呈现较为简单时，使用静态图表就好。而当业务复杂，一张图表难以表达细节时，就要考虑动态图表去呈现了，“鼠标交互，数据扩展和下钻”是动态图表的特征。

五 、总结

图表的小细节远远不止文中提到的这15种，还有好多好多。由于每时每刻都有设计者因为产品需求创造出新的好用的图表类型，图表成为了B端可持续探索的一片海洋。

2021年6月5日~6日，人人都是产品经理举办的【2021中国B端产品经理大会·上海站】完美落幕。携程旅游搜索产品负责人@毛新年 进行了精彩的内容分享，他分享的主题是《聚焦B端产品价值——B端产品的落地实践指南》。

一、B端产品核心价值解析

他首先将B端产品主要分为企业自身业务对应的B端产品和互联网业务对应的B端产品。

企业自身业务对应的B端产品服务于企业自己，产品形态多为ERP、CRM等，产品提供者是IBM、用友或者企业自研等；

互联网业务对应的B端产品服务对象是B端商家形成的商家生态，产品形态如阿里/美团商家系统等，产品提供者则是阿里/美团等互联网平台。

企业是市场竞争的主体，B端产品核心目标是为企业降本增效。

二、从企业管理到业务执行，B端产品的价值体现

那么B端产品如何实现助力企业成本降低呢？

针对B端企业工作的重复、繁杂、专业特点，B端产品在产品设计上遵循以下四个逻辑可为降低企业成本发挥自己的价值：

• 人机替代：需要人做的工作尽量少，对应产品功能就要求工作尽量能够自动化，实现人机替代；
• 智能化：如果工作确实不能系统替代，那么应该使系统尽量降低对人专业知识的依赖，对应产品功能要求系统高度智能化，小白也能做；
• 自主学习：对于小白不会的工作，系统应提供在线指导和交互学习，对应的产品功能要求系统提供便捷自助学习的能力，小白非常方便自我学习来完成工作；
• 无障碍：当有疑似错误操作时，系统能智能提示并容错，对应的产品功能为自检&容错

除了降低成本之外，B端产品还能在提升企业效益方面做出自己的贡献，针对B端业务管理对象多，业务蕴含的价值大的特点，在产品设计遵循如下这三个逻辑，可以充分挖掘大数据价值，提升效益：

• 规范化：将语义相同的各种说法规范为统一说法，有助于大数据的统计、归一、计算的一致性，有助于挖掘出业务内涵价值，这要求建立业务规范知识库；
• 标准化：B端企业在标准化业务上往往得心应手，将非标业务标准化，给平台和商家提供增量业务空间，这就要求B端产品提供业务标准化能力，这要求建立业务标准知识库；
• 平台化：将工作成果平台化共享，平台化一方面减少商家工作量，另一方面提升了数据准确性，提升平台和商家经营绩效，这就要求建立业务规格知识库。

接下来用典型案例来展示上述产品逻辑如何在实践中落地。

以电商平台商品发布业务为例，店小二发布一款商品要经历以下步骤，每个步骤的难度不一样。

首先要选择商品所属目录，接着要填写商品属性规格，这是工作难度最大的，也是工作量最大的。还有填写物流信息、填写服务信息、上传商品主图、上传商品详情图等一系列操作。

这是前端的业务流程，而从产品的角度，可以分成六大模块。

• 目录选择步骤对应的产品后台能力为目录智能预测。
• 属性填写需要产品后台规范知识库、标准知识库、产品信息库，实现各类属性的填写。
• 物流填写对应的是地址智能提示，毕竟人不能记住国家地理区划，这就需要物流地址的智能提示功能。
• 服务填写对应的是标准服务项目库。以前服务不是标准化的，但是作为平台来说需要将服务项目标准化。
• 主图和详情的上传对应的是图片智能检测，看看图片是否符合国家的合规规范和电商平台的管理规范。
• 后端大数据智能化和各类知识库支撑商品发布业务的准确、快速、低成本的B端商家诉求。

从商品发布来看如何实现降本增效？

1）重复繁杂工作自动化

每天的商品上新，营销活动都需要大量修图抠图工作，电商平台和商家每年耗费大量美工投入到图片制作。

2017年阿里双11多达4亿张图片，如果靠设计师人工去设计制作，即使是业务熟练的设计师，也需要100位设计师不眠不休工作300年。所以要用人机替代的方式，利用系统来完成上述重复繁杂的工作。这种通过深度学习海量素材，自动生成各种图片，不仅大大减少了人的工作量，而且系统设计的图片点击率增长一倍多，除了电商平台自己使用外，还直接提供给商家使用，这样大大降低了商家小二的工作量，为商家节约了大量人工成本。另外，平台每天需要审核的图片也有很多，通过系统自动检测图片是否涉黄涉敏、图文不符、违反广告法，违反电商平台的运营规范等，大大减少人审核工作量，也为商家降低了大量用人需求，节约了不少成本。

2）专业工作智能化和便捷自主学习

B端产品对商家小二专业知识要求高，商家的用人成本高。

比如在类目选择环节，需要小二熟悉平台类目体系。

在属性填写环节，需要小二熟悉商品知识。

在图片制作环节，需要小二熟悉国家电商法律法规以及平台运营规范。

所以，就需要将专业知识内嵌的产品系统，减少对商家小二知识的依赖，这些要求在产品能力上通过智能化技术进行支撑。

有了智能化支持，在发布商品的时候，小二只需要填写商品标题或者几个关键词，系统就会提醒你它可能属于什么类目，让你去做选择。

属性的填写也是如此，系统将可能的属性值罗列出来，让你做选择就行。

这样即使不是一个资深的采购也能明白，将难度降低到中级甚至初级。

如果有些小二对于平台规则不熟悉，系统会在页面给出指引或者视频图文在线交互学习，引导小二正确操作。

比如小二不知道生产许可证编号是什么，系统会给出相关提示和案例，小二看到案例就会一目了然。为什么电商平台要做到如此细致，因为商家太多了，比如阿里、拼多多、美团等平台的商家数量高达千万，不可能商家有疑问就找平台客服。通过便捷式学习自助式解决，只要中初级人员就可以完成工作，降低了商家的用人成本，同时也减少了平台客服的用工人数，降低了电商平台企业的成本。

3）系统自检和容错

在智能化或在线学习前提下，小二仍旧可能发生错误操作，或者利益驱使下故意犯错，或者系统知识不完备，有时候商家是正确操作，但是系统认为是错误的。在这样的情况下，系统要具备实时自检能力，根据事先内嵌的专业知识，实时校验并提示商家实时纠错。如果商家坚持，系统具备容错能力，业务依旧可以进入后续环节，而不是在线等待。

比如在填写冰箱的体积时，系统会内设一个最大最小的体积范围，但是商家的冰箱超出了最大体积，在商家小二进行属性填写的时候，系统会根据内嵌的物流体积范围，校验小二填写的体积，超过范围实时提示商家纠正，如果商家坚持，还可以继续填写，但是系统会记录这个异常数据，平台客服会与商家小二进行确认，最后更新内嵌知识。

小结：

人口红利消失，增量业务拓展难度加大的时代背景下，降成本也是提升企业竞争力的有效手段。针对B端业务的重复、繁杂、专业的业务特点，我们B端产品经理应该将B端系统设计成足够自动化、智能化实现人机替代，并设计友好无缝的交互学习素材实现低专业知识依赖，帮助企业实现降成本的目标。

4）规范化

每个商家对商品的理解可能不同的，所以说法可能就不一样。比如同一罐奶粉，它适用于一到三岁的孩子，也可以写作12到36个月。相同含义项目多且杂，商家不知道该选谁、用哪种说法，因此大数据也无法归一统计，精准分析。这就要求知识尽量规范化，将含义相同表述不同的业务知识规范化，形成业务规范知识库。

规范化提炼后，尽量让商家小二选择属性值，减少自由填写错误。大数据根据规范之后的知识进行统计分析，提供给商家的数据更精准，这样对于商家决策来说帮助更大。

而这些知识是从哪里来的呢？从商品说明书，客服、评价、调研中采集而来，属性值通过历史数据和商家小二的在线提报补充到知识库，内嵌于系统中。

5）标准化

随着电商发展，各种非标商品急需在线上获得商业机会，同时消费者对服务的要求越来越高，所以，将非标商品或服务标准化，扩大商家的商业机会，同时有助于提供统一的交互语言和商品定价。其中包括服务的标准化，比如保险、物流、售后等，能够提供这些服务的商家会获得更多的流量和更高的转化，也会倒逼其他商家进行服务升级。

将非标商品标准化，例如生鲜水果，通过建立标准，提供统一定价依据，有助于优质商品实现优质优价，同时避免商家描述不一致带来的客诉。

6）平台化

平台上有大量商家做完全相同的工作，那么能否在商家间共享工作结果，节约社会资源，例如有上百个商家卖同样的苹果手机，这些商家发布商品都需要填写商品的参数信息（多达上百项），将这些相同的工作进行平台化后能让所有商家共享。

将商品的描述分为产品信息和销售信息，其中产品信息是相同的，所有商家共享；销售信息每个商家都不一样，自己做维护。

建立这样一个产品信息库之后，商家只要在发布商品时检索产品信息，其他信息全部由产品信息库提供，无需商家输入，数据一致性有了保障。

例如手机只需要填写品牌、系列、颜色、内存，其他公共信息可被自动调出来供所有商家使用。

包括快消品，以湿纸巾为例，只要检索品牌、序列、规格，就能其他信息调出来。非标品的服饰也可以这么做，提供品牌和货号就可以调出其他信息。

小结：

马老师曾经说过：“数据就是互联网时代的石油”，挖掘业务蕴含的数据价值，可以为企业提升经营效益，在B端产品系统中，通过规范化、标准化和平台化可以提升数据的准确性和一致性，有利于发挥大数据价值。

三、B端产品实施落地的难点剖析

B端产品在实施落地中主要存在两大难点。

1. 企业内组织问题

很多时候，老板说要做一项工作，产品经理可以给出方案，推动研发并实施上线，但是产品上线后缺乏运营，最终导致产品难以达到预期成效。这主要企业内分工不清晰，有产品无运营，有系统无人背负运营或者经营指标考核，要求产品经理推动无运营无考核不立项进行产品设计，规划，更别说研发了。

B端产品想要降本增效，但是很多人担心会因此丢了工作。所以，他们有所顾虑让降本增效难以推进。因此，在存量业务中找增量业务，把部分员工分流到新业务中去。例如，针对电商业务，我们可以不仅仅只做零售，还可以做批发；不单单做线上，还可以做线下，这样对员工的技能也是很大的提升。

2. 企业间协作问题

现在企业合并或并购已经非常常见了，弱势企业B端系统往往被要求对齐到强势企业，改造过程困难也比较大。

尤其是文化习惯制度方面的差异，这些差异往往也体现在B端产品上。

所以，在企业文化融合方面要建立沟通共识。文化习惯制度灵活把握尺度，非原则问题的差异，可以求同存异，逐步对齐，原则问题需要一步对齐。

除了文化方面，在业务方面，不同公司也不一样，有成熟的业务也有新业务。这种情形最好是互补，而不是一味用强势企业取代被并购/合并方，否则不仅可能造成人员的大幅动荡，而且可能将被收购企业的成熟业务破坏掉。例如某线上的电商平台，并购了线下的企业，在进行商品融合的时候，给原来线下的企业新增一个线上的渠道。

以卖葡萄酒为例，线下门店是按照国家产区进行分类，比如法国、意大利、澳大利亚；而线上是按葡萄酒类型分类的，比如起泡酒、干红等。

为什么会出现这样的差异呢？因为电商起初的进口酒业务是商家C模式，佣金扣点都是相同的，但是线下门店是自营模式经营，来自不同国家进口葡萄酒关税不同，因此分类体系也不同。

在融合方案的时候，不能只是简单将线下知识废弃掉，而是合理地吸收。

因此融合之后，线上的商品主数据多了类别和产地，线下的商品也可以在线上进行销售。

小结：

B端产品核心价值为企业降本增效。B产品经理是企业降本增效的“引擎”，主导系统架构设计，能否按照降本增效背后本质的产品逻辑，设计出具备人机替代、智能化、规范化、标准化和平台化系统功能决定降本增效能否实现。同时在业务流程中，我们需要设计好交互学习环节来降低工作人员的专业知识的学习成本，同时建立纠错容错能力确保业务顺利快速展开。

针对B端产品落地实施难点，产品经理除了需要提升自身专业能力外，也需要关注企业内的组织问题和企业间的协作问题，前者主要通过明确职责分工和寻找增量业务来化解，后者需要掌握融合的原则和抓住业务差异背后的本质原因，对症下药。这背后需要我们产品经理具有深刻的业务洞察力，可以说思考力深度决定了产品经理职业天花板的高度。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

超级秒杀日是秒杀频道衍生出来的大促营销活动，在大促期间扮演着重要的角色。虽然秒杀的商品及价格由业务侧主导，但设计师仍可以通过方法论的应用去提升会场的转化效果。本篇将会介绍如何将 fogg（福格） 模型运用到秒杀会场的设计中。

什么是秒杀？

1. 秒杀的特点

秒杀就是在限定时间内，通过发布一些超低价格的商品，吸引买家抢购的一种销售方式。因此秒杀具有两个核心特点，一个是限时降价，一个是限量抢购。

现阶段，秒杀作为一种营销工具，已被各大电商平台广泛使用。利用秒杀的特点，平台可实现用户活跃、粘性提升、销售增长等目标。

2. 超级秒杀日的定位

超级秒杀日是京东秒杀频道推出的营销活动，旨在辅助平台销售的增长，同时提升频道的知名度，带来日常流量的增长。在促销期间，会场承担着流量分发、单品销售、商业合作的作用。

FOGG（福格） 模型简介

Fogg 模型的核心理论比较好理解——想要用户完成转化，需要满足三个条件：

• 用户有足够的动机
• 用户有能力完成转化
• 有触发用户转化的因素

如下图所示，当用户有高动机，并且有较强的能力完成某件事时，很容易成功触发转化行为，反之则容易触发失败。

FOGG （福格）模型在秒杀会场中的应用

在实际项目中，需要结合具体的场景，综合考虑三个要素的对应关系，进行针对性的设计。

1. 动机层

动机分层

根据大促的用研报告，将会场用户的动机分为 3 层：强目的性，弱目的性和无目的性。其中，弱目的性的用户占大多数，表明用户的转化还有很大的提升空间。

因此在会场的整体动线设计上，会对不同动机的用户进行针对性的内容设置，着重提高会场的可逛性，通过多维度营销矩阵刺激这部分用户的消费需求。

动机增强

除了依靠动线去匹配不同的用户，实现用户动机的增强外，还可以采用氛围营造的方法，快速感染用户的心智，激发用户的潜在需求。这部分通常通过视觉设计进行表现，例如秒杀会场，会通过闹钟元素及鲜亮的颜色，去提示用户商品是限时的，需要马上抢购。

2. 能力层

降低价格门槛

降低价格门槛的目的是为了匹配用户的购买能力。限时降价是秒杀业务的核心特点，在会场中不仅要明确告知用户商品的价格，还应突出价格优惠的力度，在强调秒杀属性的同时实现用户的快速转化。价格优惠可通过多种形式表现。

减少决策成本

会场中存在过多冗杂的信息会干扰用户的判断，导致用户流失。因此，要减少用户的决策成本，让用户不经过大脑思考便下了决定。例如，可在会场中增加推荐模块，根据用户的行为进行实时推荐，实现商品的精准打击。

3. 触发器

触发即是在恰当的时间告知用户，现在可以去做了。因此触发器的本质是将目标用户与目标行为进行连接。在秒杀会场中，触发通常以消息推送，文案提醒，利益刺激等形式呈现。

在预热期设置提醒功能，并将优惠券或券包的使用时间定在高潮期，能有效地提升用户回访，完成购买。

在楼层和弹窗内设置互动任务，完成后给予奖励，可以提高楼层的点击率，而获得的红包将进一步刺激转化。

小结

秒杀会场并不仅仅承载着销售转化的功能，因此会场的内容及设计，需要综合考虑业务目标及业务规划。FOGG 模型虽然从理论上来看比较容易理解，但实际的应用情况也是灵活多变的。运用 FOGG 模型，可以让你的设计思路更加清晰，在一些细节上也能更加出彩，只需要加深对它的理解，就能在各种变动中抓住用户转化的关键点，确保会场的转化效果不受影响。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设  作者：JellyDesign

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

体验度量是什么？

简单来说，用户体验度量是通过一套测量体系量化用户体验的过程。

尽管体验很难被科学客观地分析，但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话：If you can’t measure it, you can’t improve it（如果你无法度量它，你就无法改进它）。我们相信更好地衡量体验设计的价值，可以帮助我们更好地实现产品价值、用户价值、商业价值，甚至是社会价值。

为什么要做体验度量？

下面我们再来分析一下做好体验度量能帮我们解决哪些难题，首先从我们遇到的几个问题出发。

概念过于抽象主观：设计师们提出的体验优化方案被认为过于主观，难以得到直接证据支持，各部门很难达成共识，方案难以推进落地。怎么办？

影响因素复杂多元：现有的 NPS 满意度调研反映了每个季度的商家整体满意度，但是团队面对 NPS 结果无法直接定位问题，难以进行有效的诊断和提升。怎么办？

问题难以闭环管理：现有的 VoB 系统能够收集到一定数量的商家反馈问题，但是这些零散的应急需求很难被高效地纳入体验优化项目。怎么办？

相信大家或多或少遇到过类似的问题，虽然大家有着“以用户为中心”提升“用户满意度”的共同目标，但在过程中具体该怎么做，仍然是抽象模糊的。体验度量恰恰是解决这些问题的关键策略，我们希望通过体验度量帮助京麦达成以下目标做出更好的设计，创造更大的价值。

目标一：让商家体验从“抽象”到“具象”，从“玄学”到“科学”，定义一套被各部门认可的衡量标准；

目标二：与商家建立更加直接的联系，从商家角度直接洞察需求，更有针对性地定位优化问题；

目标三：更好地实现体验设计价值及体验设计体系化，与各部门建立合作关系，长期监测跟进优化。

怎么做体验度量？

体验度量一般可以分为五个步骤：拆指标、采数据、做诊断、再优化、续监测。

在京麦一期度量中，我们主要完成了前三个步骤，后期我们会尝试推进后两个步骤，同时也将继续完善现有的度量模型和调研方式。

1. 拆指标

首先我们要明确这个产品的用户体验由哪几部分构成，就比如评价一个人的英语水平如何，我们可以从听、说、读、写这四方面进行评价。

通过比对分析业界相对成熟的指标模型，我们发现各个模型有不同的切入点，比如 PULSE 模型以网页产品商业化为导向，HEART 模型以用户为核心，PTECH 模型更适合企业级产品，UES 模型更适合技术产品等。涵盖的维度多种多样，有的维度是产品相关指标，比如留存率、日活用户数、转化率，有的维度是用户侧反馈，如 NPS 净推荐值、满意度。

深入分析这些维度，我们发现几乎所有指标都可以被分为系统表现、用户行为、用户感受这三类。

有了前面提到的三大目标和参考指标，我们开始分析京麦移动端的现有情况。

由于京麦在现在这个阶段已经有了相对稳定的产品形态，市场上也有了同类型的产品。因此，我们首先把完整性作为反映产品系统表现的重要维度，也就是商家需要的、别人家都有的，京麦“有没有”？

第二项维度是参与度，店长是否会通过移动端来经营管理店铺呢？客服是否会通过移动端来答复客户呢？也就是各类角色“用不用”。

而作为一款 B 端产品，它的使用效率和易用性是至关重要的，我们要关注用户的行为，也就是商家们是否能“又快又好地使用”。

最后一项指标是满意度，它代表了用户的主观整体感受，这也是所有指标中涵盖面最广的一项。总的来说，商家们是否认为这个产品“令人满意”？

TIPS：体验度量具有非常强的业务属性，不同的业务类型、业务阶段、业务规模、资源情况都会有与之相配的不同的合适的度量方式，适合自己的指标才是好指标。

2. 采数据

有了度量指标之后，我们需要通过从不同渠道去收集尽量全面的数据。还是拿英语举例，我们该如何去给听、说、读、写这四部分打分呢？可以通过听力、口语、阅读、写作的统一考试打分，可以让老师根据平时上课的表现打分，也可以让同学互相评价打分。

那么度量的数据也可以有多种来源，比如通过用户访谈得到用户主观使用感受（定性数据），通过问卷调研得到满意度或是易用性评分（定量数据），通过后台数据得到用户的行为数据（定量数据）。

基于移动端京麦现在所处的发展阶段阶段，我们重新明确了我们的调研目标：

• 清晰与竞品差距与机会点；
• 关注核心模块的使用体验；
• 了解用户的主观感受。

因此，我们在这个阶段实施了用户访谈、问卷调研和竞品分析三种不同的调研活动，收集了大量的定性数据及定量数据。

竞品功能完整性对比分析

调研目的

通过分析对比现在行业内同类产品的功能，计算京麦功能的完整性得分。以千牛、拼多多、京麦三个平台六个端为分析对象，测试各一级、二级、三级功能的支持情况。

调研方法

确认竞品后，通过使用各家产品的具体功能，拆分一级、二级、三级或更细节的功能，填写完整性分析表；

计算完整性得分（京麦具体计算以二级功能为标准，分为六个不同等级，分别对应六个分数）。

TIPS：可以通过与产品同学的沟通，共同完成各级功能模块及相应支持程度的定义；后期可以纳入客观数据指标，结合用户的参与情况、平台满意度计算权重，重新定义重要程度、支持程度；以一个季度为统计周期，及时跟进新上线功能。

线上用户访谈

调研目的

与用户直接对话，较为直接、细致地了解不同角色用户如何使用各功能，以及在使用过程中经常遇到的问题，了解他们的使用习惯和实际需求。获得用户画像、用户使用感受、用户问题反馈等定性数据。

调研方法

用户招募：提前 1 周设计招募问卷，并在 QQ 商家群投放、回收，筛选目标用户，提前打电话确认访谈意向；

前期沟通：添加商家的微信，了解商家的基本信息，预约商家参与时间，并要求商家提前在手机/电脑上安装腾讯会议；

访谈大纲：根据具体想要了解的功能模块、用户群体等，撰写访谈大纲，包括开场白、基本信息、具体问题、观察操作提问、延展问题、结束语等；

实施访谈：提前预约会议室，打印访谈记录表。需要至少一位主持人、一位观察记录员，访谈时长控制在 30-45 分钟左右；

访谈结果梳理：每场访谈结束，参与者进行快速回顾总结，截取录屏中关键段落，提炼对应的用户行为、态度、问题、需求等信息，逐步建立猜想，并在后续的访谈中进行验证、修改；每轮访谈结束，对共性问题进行分类归纳，梳理电子化在线表格；撰写访谈报告（可能包括用户体验地图、用户画像等）；

后续跟进：邮寄周边礼物，并建立商家体验群，维护长期合作关系。

TIPS：提前争取更多利益点吸引商家参与；提前明确目标用户类型，与产品侧配合利用线上使用数据定位筛选访谈用户（如使用经验、使用频率、经营类目等）；提前与受访者沟通，可以让商家准备反馈问题列表，与商家反复确认时间；确认用户接受上访谈使用的设备及场景，对可能出现的意外情况做预案；访谈后，在企业版微信建立相对稳定的商家关系，以便回访；访谈信息整理需要更多人同时参与，尽量在访谈当天或次日完成转录、问题分类，及时补充假设，在后续访谈中验证/推翻；及时从录屏中截取关键段落、截图，便于举证。

线上问卷调研

调研目的

以更大样本量验证访谈结论，同时通过对大量用户的主观打分、行为习惯的分析，得到对产品整体的使用评价，直接获得用户角度满意度、参与度、易用性得分。

调研方法

问卷设计：提前 1 周开始设计问卷，根据前期访谈结果，有针对性地设计各模块、各角色对应问题；

问卷投放：针对不同端的问题，分为 2 个问卷，分别投放；（如果需要长期追踪，建议以季度为单位，以京麦为例，紧跟平台满意度调研投放时间，在 1 月/4 月/7 月/10 月初分别投放）；提前与产品、运营侧进行沟通，确认上线、下线时间，以及所需物料，如文案、icon、banner 等；

问卷结果梳理：数据清洗、分析；梳理关键信息，制作图表；输出报告结论。

TIPS：1. 尽量咨询用户研究团队专业人员，听取他们对问卷题目设置的建议，留出组内讨论、线上测试时间，进行 1-2 轮调整；

2. 如果需要长期追踪，建议以季度为单位投放问卷，以京麦为例，紧跟平台满意度调研投放时间，在 1 月/4 月/7 月/10 月初分别投放；

3. 提前与产品、运营同学进行沟通，确认上线、下线时间，以及所需物料，如文案、icon、banner 图等。

3. 做诊断

收集了大量数据信息之后，我们需要设定不同维度的权重，并通过一定的规则计算出各指标的最终得分。比如工具类产品，可能更强调用户达成任务的效率，因此易用性和任务效率权重较高，而主观数据的满意度权重则相对更低。

同时每项指标的背后都有一种或多种的数据采集方式，每项指标的数据颗粒度也不同，有的可能只针对一个模块，有的可能涵盖整个使用过程。因此，我们在设定计算规则的时候，要尽可能的全面客观。

最后，将度量体系的各个维度进行加权计算，基于数据表现，可以诊断出产品的提升信号。

完整性 | 功能完整性对比分析（客观）

目前，京麦在整个商家后台行业中已经处在功能相对较为完善的阶段，因此完整性将作为一个重要指标纳入整个体验度量体系中。通过与其他同类产品对比，可以看出各端功能的覆盖完整度，这一维度是完全客观的度量指标。

易用性 | 用户使用难易程度（主观）

易用性是衡量用户在使用产品各功能时感受到的难易程度的标准，是完全主观的度量标准。在比较了各类可用性测试、易用性测试度量体系后，我们选取了表格中的四项维度和对应的七个问题。通过问卷的形式，以李科特五度度量（强烈反对=20 分，反对=40 分，中立=60 分，赞同=80 分，强烈赞同=100 分）换算获得了易用性的分数。

参与度 | 各角色用户常用功能模块的使用率（主观）

参与度是衡量用户对各功能模块的使用率的主观度量标准。使用京麦的商家可以按照其工作岗位分为店长、运营推广人员、客服人员、财务人员、技术人员等多种类型，通过对各类人群常用功能模块的使用率的加权平均值，计算整体的参与度。

任务效率 | 各角色用户完成特定任务的投入产出比（主观&客观）

任务效率是用户通过使用京麦完成某一特定工作任务（发布新商品、填报活动等）的投入产出比，通常以时间、完成度、出错率等具体业务指标来具体定义。一期我们以 100%-用户主观反馈问题的比例来推测计算任务效率。二期计划：与各条业务线沟通，以他们的业务指标来定义更具体的任务效率指标，通过用户行为监控数据来计算客观的任务效率值。

满意度 | 用户对产品整体的使用感受（主观）

使用季度性《平台商家满意度调研报告》统计得分，也可以在问卷中设置相应打分题进行统计。

4. 再改造

通过前面几个步骤的计算得分，产品已经有了较为宏观的改造方向，我们可以再结合前期调研收集的用户反馈问题，重点解析数据表现背后的原因。这个阶段需要引入更细致的专家评估等方法，对各类问题的优先级进行排序。

我们计划结合产品现有的移动化进程，首先提升完整性，然后分批次地针对核心模块优化易用性、任务效率，并通过概念设计及用户测试等方式进行产品优化改造的快速验证。

5. 续检测

后续，我们也希望引入更多用户的行为数据指标，如用户活跃度、用户增长率、功能插件使用率、页面点击率等，从业务指标中获得更全面的数据信息。

同时引入监测工具，对产品重塑后的关键指标进行持续追踪，周期性监测指标的改善情况，让各部门同时参与体验度量的工作，提升优化产品的效率。从体验度量指标的数据采集到数据分析到数据的可视化，再到最后的优化落地，让体验度量的闭环全程可管理。