自己前端工作也是干了多年,但是很少站在怎么设计的角度去思考问题,最近兼职做了一部分B端产品的工作,其实需要考虑很多视觉和交互上的体验。看了这个专栏之后,越来越能理解设计师的工作,也能体会到他们设计思考的角度,也给自己对产品设计增加了思路方向,增强了认知,为以后的工作赋能。他通过一些实例进行对比分析,通俗易懂,扩大了视野。下面梳理出此专栏的知识结构,精选出主要知识点。 开篇通过分析B端产品体验为什么总是做不好,引出后面的一系列方法论,还有一些心理学知识,比如3C法则、双钻模型、MECE法则、5E原则、霍特林法则、光环效应、马斯洛之锤、格式塔原则、菲茨原则、多尔蒂门槛原则
下面开始正文
为什么你的B端产品体验总是做不好?
B端很难找到竞品
阶段 1:前期分析,产品竞争力与设计方向定位
阶段 2:体验设计与落地,传递清晰的产品价值
基于前期分析的方向,使用 MECE 法则、泳道图、认知映射等方法,保障产品的设计方案
阶段 3:研发实现,守住卓越体验落地的最后一公里 想要保障开发的还原性,就需要一些与研发工程师对接的有效方法,降低沟通成本
阶段 4:体验迭代,客户的要求永远都会更多
B 端产品面向的是群体需求,C 端产品面向的是单体需求
C 端产品,通常是用户量非常大的,拥有几十万上百万的用户数量的产品非常常见,但通常也只聚焦一类具有共同需求的人员。比如淘宝与抖音,一开始都是聚焦年轻女性群体,所以 C 端虽然用户量较大,但却可以将这些大量的用户都看成“一个人”,因为他们的需求是一样的。
B 端产品面对的是一个有不同需求的客户群体,所以在一致性上的考量维度完全不同。比如大家看见的很多数字化大屏,都是非常酷炫的深色科技风格,但产品界面却是白色简洁的工具风格。这是因为,B 端产品面对的是一个客户“群体”,基本可以分为管理和执行两大类。管理者注重数据的分析,而执行者注重执行业务。
B 端倾向行业定制化,但 C 端倾向行业同质化
如果你稍微观察一下,会发现一个有趣的现象。在 C 端行业中,像淘宝、微信、小红书这些 App,底部的功能顺序非常类似。通常第一个功能都是“首页”或核心功能,最后一个都是“我的”,中间的是行业特性的功能。这是一个商业定律导致的,叫做霍特林法则(Hotelling Law)。博弈论中专门讨论过类似的问题,最终总结的规律就是:卖相似产品的店,由于竞争,最终都会开在一起,并且这也是竞争中的最优解。
B 端产品随着时间发展,覆盖越来越多的行业,最终产品越来越复杂,B 端行业的产品与体验差异也一定会越来越大。 B 端与 C 端的区别,是从面向的受众不同开始的。
SaaS PaaS IaaS的区别
SaaS 产品为了让产品成为一种服务,采用的第一个手段是改变付费形式。改变的第二点是软件的载体。 当产品由定制化产品转为 SaaS 产品时,一定要注意把 80% 的精力都放到 20% 的界面上。
PaaS 的全称是 Platform as a service,中文是“平台即是服务”。比如钉钉、淘宝
IaaS,它的全称是 Infrastructure as a Service,中文是基础设施即服务。B 端中的基础设施指的是算法、云服务器等这些技术支撑的内容。
设计是传递、甚至放大企业产品或服务价值的必要方法。
在客户与产品之间,存在一条鸿沟。这条鸿沟是产品虽然花费了大量的成本制作,质量也非常好,但客户没有在使用或互动的过程中感受到,那么这个产品在客户眼中就是没有价值。所以这个过程,就必须要进行一个处理。处理的目标就是让客户更好地感知到产品的价值,让产品真实的价值与客户的感知匹配,我们通常就把这个过程称为“设计”。
5D 模型的两个关键理念:以客户为中心。所有事都应该看作一件事。
双钻模型
5D 模型就是我基于双钻模型衍生出来的一套完整的 B 端设计方法。
5D 产品设计体系,也是5D 模型:
- 发现(Discover):发现价值信息,包括用户自身信息、偏好等。
- 定义(Define):收拢信息,梳理需求,定义需求与体验设计方向。
- 设计(Design):以整个产品的流程(全生命周期)设计体验内容。
- 开发(Development):保障研发落地的实施效果。
- 迭代(Update):保障有持续收集客户反馈的渠道,提前为后续问题设计解决方案。
3C分析:和以往 C 端研究单点场景的方法不同,我们要建立新的思考维度,从行业时间线(Chain of time)、产业的业务关系链(Chain of industry)、客户内部的决策链(Chain of customer) 这三个维度深度了解手中的项目到底是如何发展到今天的形态的,从而准确洞察到客户真正的需求。这是 B 端体验设计必备的方法,也是最关键的方法之一。
3C 分析中,通过产业链,你要找到业务在产业上、中、下游中所处的位置,并且理解到业务对上、中、下游的价值在哪里;在时间链中,你要找到业务随着时间推移带来的技术升级,理解业务中不变的需求是什么,为你的设计定位明确方向。最后,你要梳理清晰业务中的利益相关者,明确决策层、管理层、执行层分别关注什么信息,在你设计的界面要针对性进行信息呈现,才能让设计做到既让客户买单,又能持续复购的良好商业结果。
前期分析
难点与机会:为什么你找不准客户需求?
基于组织结构,企业要对员工进行分级管理,通常分为三大层级:决策层、管理层、执行层。每一个层级的职责不同,也就导致他们关注的信息不同。
分享一个心理学概念——光环效应,非常实用。它的经典案例是这样的:你在路上遇见一个长相比较漂亮或比较帅的人,你会自然觉得他们的智商应该也不错,但实际上外貌与智力并没有必然的联系,很多人都会被这样的现象误导。
组织结构的部门结构,会带来完全不同的用户习惯,而通常沿袭用户的习惯,才能做出好的体验。
这个惯性思维在心理学中叫做“马斯洛之锤”。没错,就是总结了人类需求层次的那位马斯洛,而它也是非常有效,但少有人知道的理论,它的经典例子是:给一个小男孩一个锤子,然后他会发现所有他遇到的事物都需要敲打。简单理解就是人类本能地会形成一种在想达到所有目的时,都用一种工具的习惯,并且这个习惯是非常强大的。所以你要利用好客户天然给你的“马斯洛之锤”,只有满足用户的惯性思维,才能做出让用户快速理解、快速上手的好产品。
在“组织形态”这个定义下,如果你做到了深刻理解,甚至还可以做到预判需求,我举几个例子。
- 能清晰预判 ToB 产品的基础功能必须要做什么。例如,权限、角色、部门等相关功能都是基础内容,需要提前开始建立,并且尽早考虑组件化、组织化。
- 为预判产品业务发展提供基础逻辑。例如,基于业务与行业状态,核心功能有哪些是必须要做的,哪些是以后很可能需要做的衍生功能,哪些是未来可能合作的第三方功能。
- 为建立业务关联性提供预见性。 例如,建立产品框架与功能关联流程时,能预判出哪些业务可能会产生关联,提前建立组件、模态设计形式。
- 为用户研究体系构建分析基础,提供有效的分析结果。例如,不同职责关注信息不同,决策者看重数据统计,管理者关注权限与数据安全,执行者关注业务问题解决的效率。并且组织形态下,不同部门的用户也对功能有着较大差异的诉求
产业链分析:如何在7天内快速了解业务?
产业链分析,一共分为四大步骤。
- 拆解:了解基础信息与名词。
- 扩散:收集相关信息。
- 串联:上下游业务关系。
- 整理:汇总信息。
时间链分析:如何清晰定位产品优势与设计方向?
时间链分析法大致分为了 3 个步骤。
- 分析行业发展时间阶段。
- 分析每个阶段的典型问题与关注信息。
- 汇总内容,制作时间链分析图示。
B 端产品的客户需求分析很难,但本质上就是对业务流程数字化需求的分析。
决策矩阵:为什么你的产品总被客户吐槽体验糟糕?
你需要将客户需求分类理解,主要的分类方法是按决策等级分,分别是决策者、管理层、执行层
一个优化体验非常有效的方法,泳道图分析法
决策认知:接触不到客户,怎么进行客户分析?
怎么才能在很难接触到客户的情况下,洞察到他们的体验偏好,做出优秀的体验设计呢? 这个方法的核心有两个:一个是用户认知,一个是认知映射。他们相辅相成,最终一定能够帮助你有效分析 B 端客户的偏好。
客户认知是由客户对外界事物的理解逐渐积累而形成的。我们大部分时候都会把它理解为“经验”,但实际上并不只有经验那么简单。
举个例子,如果你在小时候第一次吃青苹果的时候,吃到的是一个酸的青苹果,那么下一次别人给你一个青梨,你看到的第一反应就会觉得青梨很酸。但如果你小时候第一次吃的青苹果很甜,那么在你看到青梨的时候第一反应也会是觉得很甜。所以,每个人对外界事物的认知都是不同的。
人是环境的产物
比如审美。如果你观察南方地区的政府网站,会发现大部分都是蓝色的,但北方大部分都是红色的。有研究发现这是由于南方建筑大部分是冷色系,而北方建筑大部分是暖色系影响的。其实你的很多习惯,也受到了周围环境潜移默化地影响而产生的习惯。
应用观察法的前提是要有准确的信息输入,所以你要分析的是三大方面。
- 用户最高频使用的产品是什么:这将会影响到他使用软件的习惯与审美偏好。
- 用户最典型的工作场景是什么样的:这会影响到他对软件的认知与习惯。
- 用户见过最高级的同类产品是什么样的:这将会影响他对产品体验与视觉风格的预期。
“观察法”结果的落地:认知映射
比如首先,注意观察他们水杯。是不是都非常整齐地放在了右边?并且全部是对齐的?这里就反映出了这个群体对于业务环境的集体认知是非常规整规范、清晰的。所以,你要给他们设计产品的话,那么一定要让界面的内容信息更清晰,字要相对更大,内容一定要规整、对齐。
体验设计
信息架构:为什么你的客户总觉得产品太复杂?
如何解决 B 端复杂性问题?
- MECE 法则:找得到
MECE 法则的全称是 mutually exclusive and collectively exhaustive(互相独立,完全穷尽)。最早是由大哲学家亚里士多德提出的,后来由麦肯锡的咨询专家芭芭拉发扬光大。我们主要应用到的是互相独立这个理念,大部分人也经常在这里犯错,导致产品变得很复杂。
明厨亮灶中,早期版本出现过最典型的问题就是分类不清晰,导致很多功能没有互相独立。
新改良的明厨亮灶平台的结构,不再是按照事件视频监控与违规行为记录这样的维度来划分,而是以用户为中心,匹配组织结构与业务情况做出的优化。
- 语言体系:“看得懂”并“搜得到”
业务流程:被客户吐槽产品操作太麻烦怎么办?
B 端领域中,更好的创新方式是在了解了客户原有流程习惯的基础上进行优化。
第一,客户做的到底是什么业务?
第二,原有流程的分类是什么?
泳道图的绘制实例
泳道图的第一道必须要是客户的视角。 第二列泳道也需要注意,一定是描述产品的界面的内容。 最右侧的泳道,是描述产品的逻辑,通常都是产品在后台对数据的读取、储存与判断。
如何通过泳道图判断产品现有问题的优先级?
效率优化优先级 = 步骤 x 功能使用频率 x 用户数量 x 使用客户的决策影响力
关键界面设计:被吐槽交互体验太差怎么办?
B 端体验设计师必懂的原则:5E 原则。 5E 原则是由尼尔森在可用性工程中给出的影响产品用户体验的五个关键要素,分别是易学性(Easy to learn)、效率(Efficient) 、容错性(Error tolerant)、有效性(Effective)、吸引力(Engaging) ,我分别给你介绍下五个属性相关的内容。
比如
格式塔原则
在格式塔心理学说中,认为人类在本能上会把彼此相邻(接近性分组)、看起来像(相似性分组)或具有结构经济性(良好的连续性)的元素视为属于一起的自然倾向,从而促成了某些格式化的形成。这个假设就是格式塔原则的基础。
菲茨原则
菲茨原则是 1954 年由 Paul Morris Fitts 根据信息类比提出的一个假设,该假设能够量化“移动到目标选择任务”这个操作的难度“1”。虽然这个假设还未涉及人机交互中的具体参数,却给了后来的交互研究人员极大的启发。
简单理解,就是你的按钮越大,后续点击要移动鼠标或手指的距离越短,你就会觉得越舒服。
多尔蒂门槛原则
多尔蒂门槛,是 IBM 的研究员 Walter Doherty 在 1979 年进行了一系列研究来评估算力的增长对生产力的影响后得出的一个结论。这个结论的核心是系统需要在 400ms 内对使用者的操作做出响应,这样才能够让使用者保持专注,并提高生产效率。 简单来说,就是客户点击了你产品可操作的任何一个地方,都不要没有反应,并且要在 400ms 中做出反应,不然客户就会觉得你这产品特别卡顿,感觉很糟糕。
要从 5E 原则中提出的易学性、效率、防错、有效性、吸引力五个方面进行检查,并且要注意 3 个基础设计原则——格式塔原则、菲茨原则、多尔蒂门槛是否可能会出问题。
大屏设计:如何避免领导吐槽高客单价定制化项目的视觉问题?
记住,大屏的设计非常重要,它直接影响了产品的销售过程,所以必须要重点关注,并且不能掉坑。其中有四点非常重要。
- 收集:要收集丰富的信息,从 5-10 年的行业报告中你就能找到。
- 筛选:要明确突出什么信息,并确定信息的重要等级。信息依然在 5-10 年的行业报告中去找,但要去找放最前面的内容,并且是给决策者看的内容。同时,你也可以通过了解各个部门的关键考核 KPI,投其所好,筛选出来关键的、需要突出的信息。
- 适配:不想功亏一篑,适配就是必须要注意的问题。你可以根据前面的数据优先级排序结果,以 19:6 作为基础设计内容,向下兼容 4:3 的尺寸,向上兼容 21:9 的尺寸。
- 视觉:最后还要注意最终的视觉效果,千万不要乱配色,不然可能触及到客户的高危情绪反射,导致总会觉得你的产品看着不舒服。
组件设计:定制化项目太多,不加班怎么做出好体验?
一定要熟悉市面上常用的组件库,比如 Antdesign、Element design 这些库的内容,要注意了解组件库中描述的每一个组件的适用场景,并且熟悉每一个组件的对应状态。
在落地自己组件库的环节中,也一定要记得二八原则,找出真正影响大部分体验的 20% 的组件内容,去细细打磨。
打磨的方法,其实就是基于前面给你分享的 3C 分析找到的业务目标,以及客户认知分析中得出的客户使用习惯与审美习惯偏好,不断地进行优化,才能保障你产品的体验设计一直处于领先地位。
典型模块设计:权限模块太复杂,怎么才能做出好体验?
权限模块在行业中常用的思路有 2 种,分别是 ACL(Access Control List,基于访问权限管理)、RBAC(Role-Based Access Control,基于角色管理),其中 RBAC 是最常用的一种,这里先给你做一个思维的普及。
研发实现
设计文档:研发还原度太差怎么办?
内容的自查流程程,一个化繁为简的方法:所有的内容都按照从没有到出现,到过多的情况去检查。
解决这个问题最好的方式就是书写一份清晰、完善的设计文档,这个文档需要把界面中的内容、控件的各类状态都考虑全面,并且设计对应的内容。
需求文档:为什么研发总吐槽需求写得不清楚?
研发吐槽需求提交得不清晰,是由两个大原因导致的,一部分是设计的需求没有提清晰,一部分是产品的需求不清晰。
实现路径:B端产品与设计师需要会写代码吗?
作为体验设计师,你不需要会写代码,也不需要去写代码,但一定要了解你所创新的内容是否有清晰的研发实现路径。
3D效果:别人的数字大屏很酷炫,你的产品为什么实现不了?
如果你是从来没有做过大屏的小白选手,那么像 ThingJS 这样的在线 3D 模板库是最合适你的选择。并且 TingJS 的模板都是 Web 端的,开发伙伴也可以使用,只需要挑选你觉得不错的模板,然后进行改良,短时间内就能低成本做出酷炫的效果。
用 3D 软件输出渲染好的视频或图片帧序列,去结合使用 SVG 这样的路径动画,让开发伙伴根据 SVG 动画同步数据与 3D 效果的动画内容,制作出数据信息与动画对应优质效果。最终呈现的就是一个看起来是有真实数据,效果超出大部分友商的优质数字大屏了。
关于 3D 软件的学习,推荐使用 C4D 软件来建模,再加上 OC 渲染器渲染,而如果你正好也和我一样,使用的是 Mac 电脑,那么 Blender 或者一些在线渲染器也是不错的选择。如果你想深度学习,成为做出最顶尖大屏效果的大牛,那我建议你学习 Unity 引擎的使用方法,它可以帮助你实现任何优秀的效果,甚至堪比电影大片,只是学习难度也不会小。
体验迭代
突破自我:上个版本已经做得很好了,怎么再突破?
客户的体验 = 客户预期 - 实际感受
感知边际递减。就是说人的感知会随着熟悉的程度而逐渐减弱。这个概念再结合人类本能的好奇心,就被称为推动人类进步的动力。
在洞察了客户的预期变化之后,要记得从客户感知最强的方面进行优化迭代
长远规划:如何确定迭代规划的大致方向?
最后以寄语万物玄同,相“望”于道 结束,道出了这专栏的意义,确实是不管未来从事的哪个行业的工作,这门课程的设计方法与思维都能帮助到我们。
作者 引用沈毅老师的一句话:“让设计师学商业,比让老板学设计还难”,引出设计师对商业的价值。其实说的很有道理,设计出的产品是最直接面向用户的,如文章所说视觉效果占据体验的70%,那毫无疑问能给商业赋能。