蓝蓝设计建立了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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是围绕应用生命周期的编排设计

围绕应用生命周期的编排设计是一种企业级技术产品设计策略。

它的核心是要解决设计师很难上手企业级技术产品，且更加难以找到体验设计机会点的问题。我们是一群工作在企业级技术产品领域里的设计师，同时也是掘金者，这篇分享即是我们在企业级技术产品领域里探索的一些方法总结。

当设计遇上技术

工作现状

在我们日常工作中，和技术产品 PD 聊需求是一件非常痛苦的事情，他们讲的每一个字都认识，但是组合起来就不知道是干什么的了，因此设计师也很难去想象用户是怎么在用这些功能。

因此相较于 C 端产品来说，B 端的技术产品目前还处于基本可用的状态，更谈不上什么体验了。

分析原因

究其原因，我们总结有三点：

① 这些产品大多数都是由技术来主导，功能优先

② 设计在整个流程中都处于非常被动的状态

③ 设计与技术之间存在一定的专业壁垒，技术往往比较抽象难以理解

同时，我们的用户并不是客户，用户不能根据自己的意愿喜好选择产品。用户隐藏在企业内部，设计师日常中很难接触到真实用户。另一方面，用户的技术专业背景与设计师的专业存在鸿沟，这使得设计师对用户需求的理解也不够深，所以说在这种环境隔离和语境不通的状态下，设计师其实难以和用户构建同理心。

能做的事

在这种狭小的设计发挥空间里，我们能做什么呢？

其实我们设计师有明显的优点：

比较擅长找规律找方法，有破局意识，从而能够发现设计的机会点。

企业级技术产品设计探索

发现规律

所以我们回过头看一下之前做过的这些产品和功能，从它们的作用对象、出现时间、用户目标、用户行为这四个维度对他们进行归纳和总结。

我们发现这些产品具有很强的阶段性，通过不同的产品来支撑各个阶段下的用户目标。用户通过产品的功能来实现各种编排动作，例如对应用本身代码的编排、对应用依赖的底层资源的编排，从而支撑用户应用的生命周期。

因此企业级技术产品具有以下四个特点：

• 阶段性

• 驱动性

• 流程性

• 抽象性

提出策略-围绕应用生命周期的编排设计

首先我们要针对这四个特性进行一轮判断，了解这个产品的场景，场景下对应的角色，每个角色执行的是单线还是多线任务流，以及任务流是由哪些功能支撑。经过这层判断之后再定位具体问题：

① 每个阶段的目标是什么

② 阶段下每个角色各自的小目标又是什么

③ 任务要对应用还是应用相关的内容进行编排

④ 产品的功能是如何实现的

当找到这些问题的答案以后，我们就可以对产品的上下游场景进行编排，明确各阶段的侧重以及上下游场景的限制条件；对角色进行权限分配以及协作触点的确定；将任务流从起点到过程再到结果进行梳理；以及最后通过对底层技术的理解，合理编排产品信息架构和界面内容。

为了能够更加高效的完成以上信息的收集和处理，我们沉淀了 CMTD 四个小工具。

策略详解

C 是 Collaboration，协同场景，主要回答四个问题：When、What、Who、Where。

① When：用以明确产品所处阶段以及上下游阶段，以全链路的视角看用户的完整使用场景，因为产品往往可能只是解决用户部分场景的问题

② What：定义当前场景的阶段目标以及要做的事情

③ Who：当前阶段的事情由哪些角色参与

④ Where：这些角色在线上或线下是如何配合协作的

例如我们要做一个技术产品，通过 Collaboration，我们知道它覆盖了发布阶段、日常运维阶段，目的是把经过测试的应用发布上线并进行日常维护，主要是运维人员配合研发人员和发布经理完成线上的问题排查和线下配置文档的交接，我们就能比较清楚的知道我们要做的是一个运维平台。

M 是 multi-role，多角色，主要用以分析产品是由哪些角色共同协同驱动的。

与 C 端产品不同的是，我们除了对核心角色的自然人属性进行洞察，还要定义清楚该角色的目标有哪些，目标对应的任务流以及支撑的功能和权限。并且企业级技术产品往往都不是一个角色就能完全执行完成，所以该角色的上下游角色也要摸清之间的协作触点在哪里。

多角色的信息我们可以通过在客户现场或者用户访谈来收集，并沉淀为用户角色库。

基于收集来的用户信息，来定义我们产品的角色：

T 是 Task flow，任务流。任务流一定是基于一个用户角色的某个目标，来定义任务的起点-过程-结果。

起点就是界面上用户的操作入口，过程需要包含触发操作、自操作、条件判断以及是否有协作角色参与进来，在结果处除了提供结果反馈还要提供下一任务的去向入口，帮助用户把流程串联起来。

任务流可以借助现有流程的走查或按照 T 模型来梳理任务流信息，从而帮助我们更好的定义一条用户的任务流是如何执行的。

例如我们要做的运维平台的产品，核心角色是运维，他其中的一个目标是为应用创建工作空间。按照 T 模型，我们可以很方便的将这条任务流定义出来。

D 是 deep ，深化。主要从两个维度展开：技术架构和逻辑原理。这是两个在做技术产品的过程中经常会接触到的两个概念。

在分析技术架构时，我们可以重点关注两个点：看由哪些功能模块构成，这些功能之间的静态结构，是包含关系还是依赖关系。分析逻辑原理，一是了解这些功能产生的实例，是一对一的关系还是一对多的关系，信息或流量在这些功能模块之间如何流转。通过这些分析，我们可以把掌握的功能特征和逻辑规律。

举例来说，运维平台的核心角色运维人员需要为应用创建工作空间，按照梳理出的任务流，用户需要经过3次跳转7步完成，那这个是否还有优化空间呢？

我们可以从 Deep 深化的角度入手，看这条任务流是由哪几块功能支撑的。例如工作空间内包含网络和安全组，安全组内包含负载均衡和虚拟机。就像我们了解汽车的制动装置，看到装置内包含气室，气室内包含活塞体、密封垫，密封垫连接在推杆上。

再从逻辑原理图入口，了解流量会先按照工作空间进行隔离，从工作空间走专有网络还是经典网络，网络将流量分发到安全组，安全组里的负载均衡会负责调配流量到虚拟机。他们之间层层递进互相依赖。就像汽油从油箱到达制动装置，在发动机里和空气一起被压缩燃烧后能量转化转送到动力装置一样。

通过上面的分析我们了解到这几个功能其实是紧密关联的，用户没有必要分散到不同的地方进行添加和创建，完全可以借助流程表单和抽屉把他们串联在一起。

因此我们找到优化体验的机会点，把之前需要三次跳转7步完成的任务流，优化到1个入口5步完成。

总结回顾

企业级技术产品有四个特性：阶段性、驱动性、流程性、抽象性。通过 C、M、T、D 四个小工具来帮助我们收集和归纳信息，实现对上下游场景的编排、角色的定义、任务流的编排以及界面的编排。

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

文章来源：站酷  作者：Ant_Design

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

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

一、布局原则：古登堡、尼尔森

二、结合B端产品和页面分析

三、大厂布局设计规范分析

四、总结

一、布局原则

布局设计在设计的每个领域都有涉及，这里说的不是设计中的布局四原则：亲密、对齐、重复、对比（专业术语：格式塔原则），这是平面设计中常用的布局方式，我的理解就是排版。但B端的布局设计是不同的，每个企业或者产品的设计规范有各自不同的依据。

B端页面布局最常用的原则我见过有两种：古登堡原则和尼尔森F型视觉模型。下面是网上找的图：

（1-侵权提删：古登堡原则）

古登堡原则：阅读引力是从上到下，从左到右，呈现Z字形移动，而起点和终点会作为重点视觉记忆区，中间过程会轻扫作为次要视觉记忆区。左上和右下是用户会比较容易关注和注意到的地方。

（2-侵权提删：尼尔森F模型）

尼尔森F模型：我们在第一次观看页面时，视线会呈 F的形状关注页面。先从顶部开始从左到右水平移动，目光再下移开始从左到右观察但是长度会相对短些，以较短的长度向下扫视，形成一个 F形状。

这两个原则都是从用户视觉角度分析，在按需带入产品页面设计的。没法单纯的说哪个对哪个错，或者说哪个更好。因为要结合产品属性、信息结构、及用户心理等因素。

二、结合产品和页面属性分析

我们公司产品的列表页面是参考古登堡原则制定的布局设计规范。这是一个运维产品（我们通常称为SaaS：软件即服务）-列表页面的模板，可以看到大部分内容被表格占据，且表格中的内容是相似的。通过与腾讯蓝鲸团队的沟通，最终确定这种布局的页面用户视角浏览流程是“Z”型的。

主要操作按钮在左侧的第一视角区，通常以“新建”等主要按钮为主、“导出”或“批量操作”等次要按钮为辅一同摆放。因为列表通常是某个任务的罗列，会把新建的入口也放在一起，一是为了方便用户快速找到新建任务入口，二是为了让信息结构更聚拢。强休息区放搜索框。在不同场景下，按钮和搜索框位置要视需求确定位置。在我们公司的大部分产品场景下，按钮是在左侧。最终落脚点是在操作字段（表头属性，技术角度称为字段）。

弹窗的布局也是类似的，很容易可以判断出标题和确定、取消按钮是两个视角落脚点。

当然不是所有页面都遵循古登堡原则，像下面的表单页面就是使用F模型。因为最主要信息标题都在左侧，且信息流是集中往下走，并不分散也不需要横向跨度很大。所以使用尼尔森F模型就可以支持布局走势。

三、大厂布局设计规范

这里以腾讯Magic Box VUE组件库和阿里AntDesign来分析我个人的理解：

这是从antdesign官网找到的信息复杂度和相关性模型，选用相应的信息呈现方式，选用合理的布局方案来承载详情页的内容。这应该是阿里内部自己建立的布局规范，既不符合古登堡原则，也不适应尼尔森F模型。但从地下不同页面内容的分布来看，我觉得是把这两种模型结合了。请看下图：

古登堡原则注重左上角和右下角的内容。尼尔森F模型是只注重左侧内容，这种布局方式通常是信息量比较大时用的比较多。我们把页面的内容拆开看就可以分析出，每个模块也是可以分成不同模型的结合。

腾讯Magic Box的布局规范就是前面我们公司用的是一样的，就不多分析了。

四、总结

通常：信息流页面使用尼尔森F模型。需要用户操作页面的则常常把古登堡和F模型结合使用，具体使用哪种看两个：1、用户在页面的常用操作是什么，2、你想或者说是产品想传递给用户的信息是什么。

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

文章来源：站酷  作者：lq934731638

蓝蓝设计( 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端可持续探索的一片海洋。

体验度量是什么？

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

尽管体验很难被科学客观地分析，但将度量这种手段运用于体验的管理是非常有必要的。引用管理学大师彼得•德鲁克的一句话：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. 续检测

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

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