首页

Cs界面设计之八:超全基础科普!全方位解析 C 端和 B 端的产品特性

博博

近年来,互联网进入下半场,C 端流量红利逐渐消退,很多企业转向了 B 端服务,随之而来的是产品设计者的转型,现在越来越多的 C 端产品设计师开始涉足到 B 端产品的设计,这是一个知识迁移的过程,需要认识到这 2 类产品的特点和区别,你才能够快速适应这个迁移的过程。

在互联网和信息化高度发达的今天,我们都是 B 端和 C 端产品的用户,能切身体会到产品的好坏,那么两个完全不同类别的产品放在一起时,会有什么新发现呢?今天想通过自己的设计历程,来梳理这 2 种产品的区别和价值。

C 全称是 Customer,即消费者(泛指用户)的产品,个人用户或终端用户,使用的是客户端。例如:微信、网易新闻、网易云音乐、有道翻译官、网易考拉等等。

B 全称是 Business,即商家(泛指企业)的产品,通常是企业或商家,为工作或商业目的而使用的系统型软件、工具或平台。例如:京东云、阿里云、网易云、网易有数或企业内部的 ERP 系统等等。


相同点


1. 都要给人使用

小到打车、外卖和购物软件,大到逻辑复杂连产品经理有时候都犯糊涂的企业级业务系统,无论个人用户,还是企业用户,本质都是由人来使用,只不过产品类型不同。

2. 都要兼顾用户体验和业务之间的平衡

既然是给人来使用的产品,就要兼顾用户体验和业务之间的平衡。无论是 C 端或 B 端,谁都不愿意使用一个不好用且耽误效率的产品,当然还是会有一些用户体验较差,用户又不得不使用的产品存在,因为它可能具有一定的垄断性质,或者在某些场景下被强迫使用,用户本身是别无选择的。但不能说用户体验就不重要,只能说对于业务更复杂、为工作而生的 B 端产品来说,想要做好这一点会比 C 端更困难。

3. 都要坚守做产品设计的核心思想

对于每一个产品设计者来说,「在什么场景下为怎样的用户(客户)采取什么方法解决哪些问题」,这句话是再熟悉不过了,也是经常讨论或挂在嘴边的话。可是面对工作中蜂拥而至、突如其来的事情时,却又常常容易忽略掉。就像是一个人如果太饿了,只顾着吃饭填饱肚子,却忘记了吃了什么。

不同点


超全基础科普!全方位解析 C 端和 B 端的产品特性

1. 目标用户

首先,我们明确一下 C 端产品和 B 端产品的用户是谁,产品给哪些人用?

超全基础科普!全方位解析 C 端和 B 端的产品特性

C端

产品是面向个人用户,服务于每个脱离「企业」场景之外的人,也就是生活场景。他需要做更细致的用户画像,比如:用户的年龄、职业、文化程度、收入水平、工作单位、个人喜好等都会影响到功能设计,每个人都可以对产品提出优化意见,这个意见只代表个人,而不是任何社会群体,但这些意见只要被产品经理验证是可以提升产品价值的,就可能会排进迭代周期内。

相对来说,C 端产品不管从服务范围、渗透力、密度都远远超过 B 端,原因是因为它面向的用户群体更广泛,用一个核心功能解决大多数人的一个主要诉求,我们每个人随时随地都可以成为 C 端用户,可选用的产品也非常多,产品团队更多的思考是让我们更长时间的停留在产品上面,让用户有更高的粘性和活跃度,需要利用产品的特色功能和优质体验来吸引我们,并解决我们在生活便利和情绪方面的问题,让我们享受这些服务并为此买单。

B端

产品则是服务于企业用户,这个「企业」可以是一个组织、商家、团队,是某种经营的主体,当然使用者也是个人,不过这个「个人」是代表了组织中的某个角色而已。这类人无论性别、年龄、地区有何差异,他们都是一类角色,比如企业中的项目总监、项目经理、项目顾问,我们的产品要提供给这类角色使用,而不是某个人使用。假设我们做一个项目管理系统,主要提供给项目经理使用,张三和李四都是产品的用户,也许张三在工作之外是个活泼少女,喜欢刷短视频、购物、旅游,被简约的界面风格所折服;李四却是个内向宅男,喜欢宅在家里打游戏、看书,喜欢炫酷的界面风格,但他们的个人喜好都无法影响系统功能的设计。这里说的功能设计的主要依据就是企业对项目经理这个角色的业务定位和考核目标,他们共同的角色都是项目经理,所以系统只需要提供项目经理相应的功能和体验即可。

所以功能设计需要是多个业务功能满足特定人群的多个需求、多个场景,他所面对的用户具有特定的职业属性,也就是说他的用户只会在「工作」的场景下使用他,有些还是强制使用,个人没有选择余地,因为付费者是企业领导,而不是基层员工,而使用最多的反而是基层员工,所以 B 端产品的用户关系会比 C 端更集中、更垂直,做功能设计时,要权衡付费者和使用者之间的利弊,他们要求产品的时效性,注重如何满足企业用户的既定目标。

2. 使用场景

超全基础科普!全方位解析 C 端和 B 端的产品特性

C端

它会存在于生活中的各种场景下,而且自由度非常高,当然也包含工作场景,比如我在坐地铁时刷一下朋友圈、在睡前打开网易云听歌、在工作间隙上点了一份外卖、周末变身肥宅吃了一天鸡等等,所以 C 端产品的使用场景是碎片化的,用户并不会连续几个小时一直盯着同一个 APP,而是在多个应用之间随意切换。比如落地成盒了会打开微信回复消息,歌听乏了去看看电子书等等,所以我们看到一些比较优秀的产品,他们都在内容和用户体验上下足了功夫,目的就是为了留存用户,减少跳出率。因此 C 端产品更讲究操作直接,信息简洁,有娱乐性、社交性、可倾诉性,是为了解决生活上的问题而生,寄生于我们的情绪之中,被产品的情感化设计所折服。

B端

与 C 端正好相反,他们是为了工作而使用这个产品,因此他们必然要长时间使用产品,而且是沉浸式使用,同时使用频率是可预测的,他们并不能带着个人喜好去使用,不能说这个产品太难用了,我就可以不用了。比如上下班打卡,公司要求用 A 产品,你觉得不好用,就推荐大家使用 B 产品,对不起,虽然你是产品真正的使用者,但决策权和付费者是高层领导。个人的情绪左右不了使用场景。所以 B 端产品更讲究严谨的流程设计、贴近现实的场景面积、低风险、高效率、数据精准。它是为了解决工作上的问题而生,寄生于企业制度之中,被产品的用户体验影响着工作效率。

3. 业务和本质

超全基础科普!全方位解析 C 端和 B 端的产品特性

C端

满足自我情绪。

比如社交类产品就是构建「聊天」方式,这个聊天可以是语音、文字、图片、分享等形式,解决个人在情感、空间、工作、虚荣、欲望等情绪问题。在核心功能之外还可以附加一些「增值功能」,比如设置好友查看权限、购买 VIP 等,这都是为了提高产品的使用价值和盈利口径。

因此 C 端产品通常只有一个核心功能(比如音乐类 app 的核心功能就是听音乐,阅读类 app 的核心功能就是阅读,游戏类 app 的核心功能就是游戏),多个辅助功能,核心功能影响着产品的特色、定位、调性,而合理的辅助功能则会让产品保值增值、增强产品与产品之间的差异化,如果去除这些附加功能,产品的体验会受到一定影响,但实际上并不会阻碍用户使用核心功能。例如:去除了评论功能,但用户依旧可以听音乐;去除了打赏功能,同样也不影响用户阅读文章和作者写文章;去除了分享,用户还是可以愉快地吃鸡。

所以 C 端产品的特性可以归纳为「分享」,前面所提到的「评论」、「打赏」其实都基于「分享」的场景下,即:让他人听见「我」的声音、看见「我」的想法、赞同「我」的观点,满足双方的情绪设定。

盈利方式:内容付费、广告付费、平台抽成、增值服务(VIP、卡券、权限等)。

B端

共同完成一个目标。

日常使用产品工作的人,自己是无法独立完成一个任务的,他需要和周围的人协同完成一个任务流程的闭环,比如我发起一个请假申请,以「完成」和「打回」作为流程结点,根据企业制度设定,这个流程中会涉及到 3 种角色:发起人(我)、审核人(上级)、归档人(人事或行政)。

B 端产品的业务逻辑是复杂和多变的,尤其是权限系统,往往每个人都是流程中一个非常小的部分,就如上段所说,需要进行协作使用,这里不能穷举出每个业务,因为不同的公司业务则完全不一样,公司可以对该产品当中的功能选择性购买或租赁。而对实际用户来说,这个产品没有功能的层级,自己负责哪一块,哪一块就是他的主要任务、经常使用的功能。也就是说,从功能架构上看,这些核心功能都是扁平的,他们分配到各种使用角色的手中,没有先后排名。

而 B 端产品的本质则是满足用户的工作需要,但这从来不是单一的功能就可以满足的,这里一定包括了多项功能的组合及嵌套应用支持。当用户需要绘制多种不同类型的图表时,产品就绝不能只提供单项类型的图表功能。比如:甲公司的产品只能画柱状图,而乙公司的产品却能画 10 种甚至更多不同类型的图表,以适应不同需求场景,若你是客户,你会选择购买哪个产品呢?

盈利方式:按功能模块付费、按使用人数付费、需求付费、后期维护费用。

4. 产品需求

超全基础科普!全方位解析 C 端和 B 端的产品特性

C端

更多满足使用者的日常生活需求,所以需求来源会多样化一些,因为目的都是拉新、促活、留存、转化、裂变。像竞品分析、数据分析、用户行为分析都可能帮助挖掘出有价值的需求。我们也有很多时候因为朋友在用这个产品,或者看到产品的广告才下载这个应用,但下载以后用来干什么,那只有等我们有诉求的时候才会再次打开应用,这个诉求可能是空虚、无聊、想购物了等等。所以很多普通用户根本不知道自己的真实需求是什么,甚至有时阴差阳错打开某应用,然后被里面的买家秀、活动促销等运营模块所吸引,最后产生购买欲望。

因此,C 端产品就是站在上帝的视角,需求直接来源于用户的行为和反馈,从用户这里获取最真实的诉求。产品设计者则需要关注市场流行趋势,关注用户偏好及意见,将有效的分析结果转化为产品需求,再输出功能,引导用户产生共鸣,并通过一些运营手段,增加转化(变现)概率和裂变的辐射面积。

B端

B 端产品更多是基于已有的「业务」形态,把传统线下工作,通过程序化、系统化、信息化转换为线上行为,使业务的流转效率更高,办公成本更低。所以更要求产品设计者能熟练掌握相应的行业知识、捋清业务逻辑。

需求一般来源于产品战略定位、各部门对接、租户(客户、外部付费者)的个性需求,有些靠销售企业软件盈利的公司为了把职责再细分,通常会配置指定的一线顾问来对接租户的需求及跟进服务,然后再将需求反馈到负责这个产品的产品经理,产品经理在这里就是负责收集需求、分析、规划、设定开发优先级,然后交由开发团队进行接下来的产品设计等工作。

B 端产品的客户可能不在网上,而是在全国各地的企业里,往往需要通过老板和销售才能接触到客户,这会造成不能获取真实的客户需求,我把这种现象叫做「需求断层」。所以最好的调研方式就是做一个「面对面」的用户访谈,可以真实的面对面、也可以是视频或者电话沟通,这能容易把复制的需求沟通清楚,而不是通过邮件和文字。因为目标用户有固定的职业领域,有时候你所设计的流程你认为最合理,但和他们实际使用起来却有很大的差异,所以和真实用户面对面聊聊他们的工作习惯和业务规则,这一定能够帮助到你设计产品。

很多时候,做的产品只是为了满足付费者(即高层领导)的需求,而不是实际用户(即基层工作者),导致实际用户吐槽产品易用性差,其实是改变了他们的工作习惯而引发的抱怨,然而领导却达到了监控和实时获取数据的目的。因此在收集这些需求时,会受到来自付费者和真实用户 2 种角色声音的影响,这就需要产品设计者具有更理性的思考方式和处理手段。

5. 产品思维

超全基础科普!全方位解析 C 端和 B 端的产品特性

C端-流量思维

做 C 端产品设计,我们一切行为的出发点,都是流量,流量直接影响着变现,无论是外部的流量引入、各环节的转化、留存策略,还是产品体验的提升、流程的优化、资源的投入,我们都是在为提升流量、转化流量服务。我们经常做的各种活动专题、分析各类数据,去追求所谓的情怀、情感化设计,其根本还是为了引流,想方设法从全网获取流量,从而来提升产品的转化率,这是一切 C 端产品的宗旨,没有流量的产品只是一个花瓶。

B端-效率思维

对于 B 端产品,我们更多关注的是效率,不管是面向外部客户,还是服务于公司内部各业务角色/部门,B 端产品要解决的始终都是如何提升企业的运营效率(即工作效率),解决的是「开源节流」中的节流部分。所以我们会通过流程优化、工具打磨、策略调整,去提升各个环节的人效,降低各方面成本,从根本上提升企业效率,这点从我们做流程设计的时候能清晰的反应出来,设计目标都是在合理且效率的基础上,让用户舒适的完成这个流程,并不是说企业投入资金购买了一款数据统计软件,结果数据统计还没有人工来的精准、方便。

6. 设计原则

C端

在 C 端产品设计的过程中,我们首先要明确核心功能是给哪些目标用户使用的,也就是我们最初的设计目标是什么,需要保持产品的场景多样化,突出核心功能,因为 C 端产品的同质化现象非常严重,因此我们要好好思考,如何将我们的产品在众多产品中脱颖而出,如何让产品的品牌设计辐射到更多的地方,如何在功能和体验上寻找新的亮点。

再者就是要保持良好运营手段,因为 C 端的用户是自由的(忠诚度低,随时可以换产品使用),所以需要通过一些运营手段来绑定用户的留存。C 端产品的本质都是一个核心功能,所以设计师在产品初期时就需要全盘考虑,哪个功能是产品最核心、最不可丢弃的,哪个功能是锦上添花,为了提升产品的附加价值的。因此,我们抛开这些基本原则,还需要对用户行为进行塑造,塑造用户行为就是「绑架」用户。

把握关键时机:把握用户在使用 C 端产品过程中注意力的关键时机,用户在使用产品的过程中,注意力的分配是不均等的,比如同类产品太多,先下载 2、3 个试用,进到产品里不知道干什么,随便逛逛,逛着逛着就删除 APP 了,这就是典型的没有把握用户关键时机,没有提供给用户有用的东西,败在了产品策略和本能层次。没有在第一时间让用户知道产品是干什么的?能从中得到什么?亮点内容在哪里?是如何引导我使用的?那么作为产品的界面设计师就需要知道在哪些关键节点上,用户的注意力是集中的,哪些节点是分散的,如何引导用户关注这个点。

所以通过研究这些用户在使用过程中的关键节点,可以抓住关键时机,来达到塑造用户行为的目的。那么,这些所谓的「关键」时机反映在注意力理论下,对应的就是注意的「中心点」,反之为「分散点」。用户在使用产品的时候,注意力总是从中心和边缘来回切换。

举个例子:让交互设计师在信息流页面做一个阅读提示,用于用户在更新消息流之后的场景,目的是能让用户发现更新之前的阅读位置,并在此处刷新,不让重复信息出现,不影响用户体验。那么下图中哪个方案更合适?

超全基础科普!全方位解析 C 端和 B 端的产品特性

中心点:「上次看到这里,点击刷新」的提示消息出现在此位置和时机是有讲究的,由于它们出现在旧消息之前,新刷新的消息之后,用户的阅读注意力正在从新的信息流转到旧的信息流,中间会出现注意力断层的中心点。所以在此出现的提示更容易被用户察觉,提示内容才能发挥更大的价值,因此 A 方案最合适。

分散点:B方案中消息提示在用户刷新之后出现在底部,虽然该方式在 toast 的层级里,干扰性是最低的,因为它的位置在底部,会适当减少用户浏览内容时所产生的干扰,但是从用户行为路径上看,显然不合适,用户的行为是要翻阅信息流,而它的出现方式与「翻阅」的行为是相违背的,反观还是会阻碍用户的浏览,虽然它的感知程度很强,能让用户第一眼发现这个贴心的功能,但是出现的时机不对,这就影响了用户体验。

增加趣味性:所谓趣味性,是指能引发用户的正面情绪,比如使人感到愉悦、有意思,能感染人、打动人、教育人,这是能够引起用户注意力的重要因素。

增加产品趣味性的途径有很多种,就拿微信 H5 为例:

随着 H5 页面技术上的突破和微信推广程序井喷式的发展,微信 H5 推广领域已经成为各大 C 端产品的必争之地。推广的形式可以基于 H5 的框架进行多种形式的拓展,比如:小游戏、邀请好友赢红包、小程序等等。微信端 H5 推广的优点就是将推广的趣味性融入产品当中,将营销手段运用在用户使用过程中。这样做的好处显而易见,通过趣味的游戏程序打开市场的缺口,用户基于推广程序的趣味性,有很强的分享动机。

说到分享动机,就不得不说最近刷爆朋友圈的《能进***的个个都是人才》,这个长图就很有意思,每段内容都能让用户产生共鸣,根本想不到这是篇广告推文,直到最后一小段内容才曝光了品牌和产品,但效果显而易见(短短几天阅读量10万+),所以这种趣味性的运营方式很容易带动用户去分享,分享即裂变式传播,而 C 端产品的运营目的就是引流、裂变。

超全基础科普!全方位解析 C 端和 B 端的产品特性

增加创意性:王者荣耀无疑是近年来受众最广、用户最多、盈利最大的线上手游。我们通过分析这样一个标杆级的产品,可以得出创意对一个产品的成功与否到底起了什么作用?这款游戏火到咖啡厅一群人坐在那里玩一中午的原因在哪里?我想用我设计的眼光去审视一下王者荣耀,它到底为广大玩家提供了一种怎样的体验?

「容易上手」几乎是王者荣耀玩家的共同感觉,而这种直观感觉决定了一款手游能在多大程度上流行。一方面,王者荣耀采用了双轮盘(左右两边一个操控区域)的操控方式,玩家通过左右两边的虚拟按钮进行控制,同时可以控制自动攻击。新手玩家默认自动攻击,从可玩性角度很大程度上减少了用户的学习成本。

双轮盘的操作方式并不是王者荣耀首创,但是他却成就了这种经典的交互方式,为后来产品树立了一个成功的典范。操作方式的创新点还在于取消技能施法的方式。区别于 PC 端游戏,移动终端没有鼠标来控制技能释放与否,王者荣耀采用技能滑至右上取消的方式,创新性地解决了小屏幕交互上存在的问题。

超全基础科普!全方位解析 C 端和 B 端的产品特性

除了以上几个设计点外,C 端产品的设计手段还有很多,主要包括:推送提醒、各种红点提示、弹窗提示、嵌入广告、分享刺激、打赏刺激等。无论采用任何设计方法,其核心的目标始终是落在用户的注意力上,通过吸引用户注意的方式,达到塑造用户行为的目的。

B端

产品设计者对于用户的需求在一定程度上是可知的,所以 B 端产品是辅助用户行为,比如我们要做一个企业报销系统,这些流程和工作行为已经有一套标准的流程了,我们只需要将这些场景转化为流程设计。那这个系统会存在哪些场景,只需要找到相应的使用角色一聊就能挖掘出来,而且场景相对较固定,不用考虑用户是不是喜欢这个功能,因为这是公司制度要求,不喜欢也得用。因此在设计初期,我们要做的就是充分挖掘相应的功能需求,尽量把流程做到完善,而在设计上要有:合理的功能与模块划分、严谨的业务流程设计、一致性的操作体验、干净简洁的界面设计。

合理的功能与模块划分:即在做产品信息架构时,就需要仔细考虑功能、模块的划分,客户常用功能模块有哪些,模块与模块之间的关系是怎样的,当然有些产品版本是通过客户需求进行个性化设计的,比如有的客户要求为他们企业单独设计一套工作流程,那么怎样组合该客户的功能模块呢,这也是做 B 端产品经常遇到的需求。而对于不同岗位的人员,他们的权限划分也是不同的,比如在不同权限人员登录时显示的页面有哪些不同?能查看到的模块有哪些,里面的界面状态是怎样的?如果某岗位人员拥有不同的权限范围,怎么设置他的功能可见性?不同权限的人员怎么协同工作?需要多人协作办公时,如何进行业务上的移交、提醒、工作流的显示?这些都是设计师需要仔细考虑的点。

都说 B 端产品业务复杂,细分下来,权限设计就是最要花心思的,因为它涉及到不同的用户角色、岗位、场景,不能像 C 端那样常规化。

超全基础科普!全方位解析 C 端和 B 端的产品特性

严谨的业务流程设计:B 端产品不用揣测客户打开产品会干什么、引导他干什么,因为他是工作软件,在使用时,客户必然有明确的目的,需要什么他自己会打开,因为都是他们自己最熟悉的业务范围。总不可能利用碎片化的时间在工作软件上休闲一下吧,这个场景明显不成立。同时,设计师需要对产品的行业和业务具有一定的了解,如果产品只针对单一行业,设计师只需要了解对应行业的特性和需求即可,若是平台类产品,需要面向多元行业,那设计师就需要了解所有的目标行业特性,找到他们的异同点,针对不同使用场景,分析客户的具体需求,最后产出合理且专业的流程方案。如果你不了解客户的工作业务,你就不能有质量的产出他们满意的流程方案,所以做 B 端产品不光要学习本职岗位的技能,还要了解目标客户他们的工作流程、业务知识。

一致性的用户体验:无论是 B 端还是 C 端产品都应该遵循这一点,这是互联网产品最基本的素养。保持交互和视觉的一致性,让用户在使用时,能感到熟悉、亲切,能直观地了解到操作会带来怎样的结果。在用户疑惑时,及时给予反馈,在遇到困难时,给予帮助。在用户迷茫时,有效引导用户,这就是一款聪明的产品,它能够提前预知到用户的所想所需。同时,B 端产品的界面元素复用面积会比 C 端广而大,因此 B 端产品更应该注重交互的一致性。做过后台的都应该知道,一个提醒方式、一个表单控件,它们能覆盖到 80% 的页面。

干净简洁的界面设计:B 端产品是为了工作而生,界面里往往都是「内容为王」,不宜使用过于强烈的色彩对比,也不需要过于浮夸的设计,整体产品调性都应该尽量简洁,不要让视觉效果喧宾夺主,而应该减少干扰用户的「多余设计」。这里不是说炫酷的设计不实用,而是 B 端产品的目标用户不同于 C 端用户,B 端用户主要是通过产品来完成枯燥的工作,即便视觉效果做的再吸引用户,他们也不会给你的产品带来流量和黏度,因为买单者是高层,使用时间也相对固定。所以还不如把开发、设计的成本放在提升产品性能和流程体验上。

虽然我一名设计师,但毫无疑问,做 B 端产品必须要维持:功能为主的设计原则、视觉服务于功能的产品素养。这也是为什么很多 B 端产品喜欢用蓝色系的原因,因为与蓝色相关的负面信息很少,同时色彩上也不会过于强烈、刺激,一般人都不会排斥它,并且色彩含义也为理性、商务、科技,这就更适合 B 端产品的特性。

超全基础科普!全方位解析 C 端和 B 端的产品特性


关注点


1. C端关注人性

超全基础科普!全方位解析 C 端和 B 端的产品特性

产品强调:刚需、痛点、高频、体验。

刚需

在 B 端产品设计中,我们往往面对的是刚需。用户会非常明确的告诉你,几乎无需挖掘,「我想要什么功能,我线下是怎么完成这个任务流程的,有这个功能我就付费,没有这个功能我就不买单」。当然,用户所讲并非用户所需,需求仍需要梳理和验证。

而为什么 C 端产品却要刻意强调「刚需」?因为 C 端产品的需求不同于 B 端产品,C 端产品的用户量大、散、广,缺乏组织性,需求具有模糊性,所以需要刻意去挖掘。经常看到一些产品 YY 出一些客户需求(「我」认为的设计),其实这些需求用户根本不需要。

痛点

在 B 端产品中,用户选择产品的决策过程中,有足够的说服时间和机会,另外价格也会是一个非常重要的参考因素。

而在 C 端产品中,用户喜欢更换成本较低(QQ和微信等社交类C端产品的更换成本很高,不在此列)、决策时间短,所以能否在极端的时间内,抓住用户痛点,就非常关键,比如通过运营活动和情感化的视觉设计,在短时间内引起用户的共鸣,形成热点式引流。如果不能抓住用户痛点,产品很可能不会被下载,即使被下载,使用频率也会非常低,渐渐的就藏在手机某个角落几个月不更新,从隐藏逐渐走向了删除,这样的产品就会丧失竞争力。所以很多 C 端产品经常推送一些运营消息,文案还特别吸引人,目的都是为了让用户回归,告诉你它还很想你。

高频

在 B 端产品中,用户使用频率是由业务和工作量决定的,所以提高 B 端产品用户使用频率的机会并不多,总不能节假日的时候推送一条消息「少年,快回来工作吧,加薪升职就是现在」,这样做毫无意义,也违背了它本身的商业价值。

而在 C 端产品中,用户粘性、付费率、转化率、活跃度等往往跟用户使用的频率紧密相连。C 端产品很多都是免费使用,通过增值服务收费,比如充值 VIP 享受更多特权等,只有通过免费的方式,让用户先使用,从而培养了使用频率,这才是增值服务收费的基础。所以高频和流量就成为了能否实现增值收费的关键点。

体验

C 端产品由于用户缺乏组织的压力,并且更换产品的成本低到没有,删除你就是几个交互手势而已,所以 C 端产品必须极其重视用户体验,想尽一切办法留住用户、锁住用户、让用户把产品当成生活中不可分割的一部分。

用户体验对 B 端产品也非常重要,但通常客户更重视功能、流程和效率,而用户体验则更多的体现在产品性能方面,试想你使用一款软件工作,由于产品性能响应非常迟钝,而且数据不精准,你一定会很抓狂,很有可能一天的工作计划被这款「该死」的产品所耽误,所以在用户体验上,性能要比界面更重要。

2. B端关注组织与业务

超全基础科普!全方位解析 C 端和 B 端的产品特性

产品核心诉求:功能、流程、效率。

功能

不同于 C 端产品需要深入挖掘用户的需求,B 端产品的需求往往是非常明确的,在功能的场景覆盖面积上,和 C 端产品恰恰相反,功能多、大而全,这代表了一个 B 端产品的完整性。但这里所谓的「功能多」,并不是一些杂七杂八的锦上添花的功能,而是为了覆盖到更多业务场景的主要功能,这样才能拿去卖钱,才能给客户选择性使用,才有了更多的商业竞争机会。

至于功能过多而产生的学习成本过高现象,在 B 端领域也不是一个大问题,因为 B 端领域的客户往往需要专业的学习,客户也通常不会认为是负担,反而因为掌握了这些技能而实现了自身价值的增值,因为 B 端产品是公司主动要求员工使用的。其次我们作为 B 端产品的开发者,很多公司也会提供相应的业务培训和售后服务。

当然,SAAS 类产品(B端产品之一)由于免实施的特点,决定了功能要全面、又要容易上手的特点,所以 SAAS 产品是 B 端产品中最难设计的一种,需要在商业和体验之间权衡。

流程

既然 B 端产品要满足业务信息化的需求,那就必然涉及到流程设计。B 端系统必须要能贴合企业用户的业务流程才能正常运行,而不同企业的流程是不一样的,所以 B 端产品的流程设计是一个非常大的挑战。

因为很多时候 B 端产品是将线下的流程转移到线上,实现无纸化办公、敏捷办公,所以功能流程已经在线下有一套完善的流程了,只需要在现有的流程上做简化和整合即可,甚至一些线下的纸质文件在线上变成电子档时,客户都要求贴近原始文件,只有这样才能顺从之前的使用场景,降低学习成本,所以前面为什么说做 B 端产品设计要懂业务,就是因为产品里的功能流程是线下转移到线上,了解线下业务能帮助你更严谨地设计线上流程。

效率

B 端的产品的业务经常涉及到海量的数据,所以在 B 端产品中,效率远远比用户体验更重要,客户不是在休闲时刻把玩你的产品,而是通过你的产品完成工作任务。比如要上传 1000 条数据,那么批量上传等高效率的功能设计和性能保障,就比优化上传界面的用户体验要重要得多。

至今我们仍然可以看到有些商超还在用一些 DOS 平台上开发的收银系统,虽然这些系统已经非常陈旧、用户体验已经很差了。但是由于使用时间很长,而且效率非常高,所以依然保持着旺盛的生命力。


产品特性对比


1. 客户VS用户

客户

使用 B 端产品的人或组织。说白了就是给钱的合作方,它们通常是一个企业,以企业或部门的名义,购买或租赁了你们公司所开发的产品。

用户

使用 C 端产品的人。而个人使用者则是不受工作场景限制的每个人,拿起一个产品就可以注册登录,并直接上手把玩。

客户是理性的,用户是感性的。客户关心 ROI(投入产出比),用户关心过程(满足人性的某个弱点)。

举个例子:双十一基本上成为一个全民狂欢节,很多人吃土也要剁手,为什么?因为便宜,很多人趁着氛围一冲动就各种买买买了。

但我们很少听说有 B 端产品在搞促销,一是因为企业的采购通常有计划安排,可能还需要财务的各种审批,不太可能刚好就在你促销的时候企业就需要采购;二是企业的采购要考虑投入产出比,而不会因为你打个折扣就决定买你家的商品,这关乎到企业利益和你自己的利益。

但个人用户不一样,购物车存了好长时间的商品,总是嫌贵舍不得买,可是看到双十一突然打5折,这下便有了冲动的借口,毕竟错过再等一年。

客户有级别之分,用户则基本一样

企业有大小之分,10 个人的微企业和 100 个人的小型企业是不一样的,同样 1000 个人的中型企业和 10000 个人的大型企业也不一样。更准确地说,对于同类产品不同大小的企业它们的需求是不一样的,可能因为企业的管理方式不一样,有些企业会提出一些个性化的需求。

比如同样需要内部沟通产品,10 个人的企业大家都坐在一个办公室里,需要找谁讨论问题,吼一嗓子隔壁公司都能听见,随时随意可以开会,需要的只是传播声音的载体──空气。

但如果是 100 个人的小型企业,可能吼一嗓子就没那么好用了,因为不是每个人都熟悉,并且座位可能会离的很远,这时候就需要一个微信群方便大家沟通,这时的传播载体是──微信群。

如果是 1000 人的中型企业,跨部门协作的场景就非常多,很多时候要找的人是不认识的,还有可能对方故意潜水半天不回信息,这个时候提高沟通效率就显得特别重要,所以「钉钉」和「企业微信」的「已读、未读」功能就很受这种场景的欢迎,对方是否在故意潜水,就看是不是已读,如果长时间未读那就可以通过语音或电话找,所以中型企业就很适合用这类产品。

那 10000 人以上的企业,可能「钉钉」和「企业微信」他们的原生功能也不一定能满足复杂的协同需求,需要更多人性化的功能,这种情况一般是自己开发相应功能,或外包给第三方开发,然后接入「钉钉」或「企业微信」。

上面说的是 B 端产品面向的客户有大小之分,下面我们来看看 C 端产品面向的用户是怎么基本一样的。

再拿微信举个例子,从身份地位、收入上看微信的用户也是千差万别,但是从微信满足的人性弱点角度来看(懒惰、窥窃、色欲、存在感、虚荣、贪婪、冲动、从众、分享、嫉妒等),用户与用户之间并没有什么区别。一位成功人士和一位无业游民都有懒惰、虚荣等缺点。只是严重程度可能有所差别,他们都有通过朋友圈各种「炫耀」的需求,只是炫耀的内容可能不一样而已。所以作为 C 端产品,理论上是能满足所有用户的需求的,当然有极少部分是不看不发朋友圈的,这种小概率群体可以不计算在内。所以 C 端产品留下来的用户,他们的需求都是被该产品所解决过的,因为这些用户都有相同的需求,虽然他们的身份都不一样。

2. 工具VS「玩具」

工具的目标是性价比,玩具目标是休闲

性价比包含了两个指标,性能(效率)和价格。不难理解的是,企业之间的竞争本质上就是生产效率的竞争。所以企业采购的工具(B端产品)肯定是为了提高生产效率,比如各种管理系统是为了提高客户管理的效率,数据库系统是为了提高记录和运算的效率,在此基础上再横向对比价格,性价比最高的当然最适合。要吸引企业来购买产品,B 端产品不得不考虑产品效率和价格。

「玩具」的主要目标是好玩、休闲,这里指的都是用户体验,可以理解为用户通过碎片化的时间去享受产品给他带来的愉悦感、归属感、放松感,而用户体验则是吸引用户的重点。而满足人性弱点的体验就是好的体验,好的体验都出现在「聪明」的产品上,即「眼色活」、帮助用户思考、做到用户行为的前面去,讲的就是要满足用户「懒得思考」的弱点。比如我们都知道国民产品微信的用户体验做得很棒,其中有一点就是易用性,老年人都可以用的产品,满足了「懒」这一人性弱点,再加上其它的一些功能满足「虚荣(炫耀)」、「偷窥(看过去的朋友圈)」等弱点,就能让产品变得好玩,只有好玩才能引流,这正是 C 端产品追逐的目标,因为很多 C 端产品的商业模式都是建立在巨大的用户群体之上,有了流量,金钱也正在路上。

工具的生命周期比「玩具」的生命周期更长久

相对于 C 端产品,B 端产品的生命周期更长,一是因为 B 端产品作为业务工具,本身就比较复杂,开发这样的产品是需要大量的行业经验积累和技术积累,因此一款 B 端产品一旦赢得市场认可,就能建立经验和技术壁垒。二是 B 端产品基本都是要花钱购买的,一旦企业采购了该产品,员工也熟悉了如何使用,再换新的产品成本就比较大,所以更换的意愿会比较低。

C 端产品为好玩而存在,当新推出的产品更好玩的时候,那老产品的生命周期和地位可能要面临着挑战。比如 QQ 和微信推出后,短信就被替代了,同样是通讯类产品,微信和 QQ 就好玩很多。可能有人会说因为短信收费,这并不是最重要的原因,即便短信现在完全免费,估计也没几个人用了,因为微信不止能发消息,还能发各种表情、图片、语音、视频、支付等,自然前者就被后者所替代了。同理,当微信被玩腻,人们发现下一个产品更好玩时,微信也同样会受到挑战,可以对比下三年前和现在的朋友圈、订阅号原创文章的质量就明白了。对了,还有「昙花一现的子弹短信」。所有说产品都是有周期性的,只不过 C 端产品要比 B 端产品的生命周期更短。

工具复杂难用,玩具简单易用

B 端产品复杂难用这是众所周知的,而 C 端产品老人都可以用得很溜。为什么?一方面,B 端产品是工具类,用于生产,而不是我们的日常生活,使用工具很多时候不是人的本能行为,而是为了达到某一目的而学会的技能,因此一般是要经过培训学习才会使用,所以很多 B 端产品有售前/售后方案、使用手册、业务培训等等。

另一方面,这和 B 端产品的目标有关(效率、准确、安全),当开发资源都用在打造产品性能的时候,用在用户体验方面的开发资源难免会不足,所谓「功能先行」,就是这个道理。

而 C 端产品的目标就是易用性、易通性,只有用户体验做的比竞品好,才能赢得用户和流量。假如 C 端产品需要拿着产品说明书才能玩下去,那这种产品一定会被淘汰。

3. 「卖软件」VS「秀软件」

B端产品「卖软件」

之所以说 B 端产品的商业模式是「卖软件」,是因为 B 端产品实实在在的一手交钱一手交货,也就是说 B 端产品开发出来是要直接卖钱的。即 B 端产品从诞生第一天起就要考虑如何销售,甚至有些开发团队直接用原型 demo 去谈客户,最后还成交了。

通常来说一款 B 端产品如果能有几十万客户已经是用户量特别大的产品了,不像 C 端产品动不动就是上千万、上亿,甚至上十亿用户量。因此通过流量变现的方法是行不通的。可以想象如果一个企业工具里面插入各种杂七杂八的广告,这得受到多少企业用户的吐槽,关键是这些广告还不能直接变现,这里最基本的口碑就没了。另一方面,对于性价比高的 B 端产品,企业是愿意自主付费的。自然而然就形成了垂直变现的商业模式。

C端产品「秀软件」

C 端产品的商业模式通常是间接变现。通过开发出用户需要的产品,把产品的体验做好,内容形式有针对性,从而吸引更多的用户来使用。产品本身是免费的,比如百度,支付宝,微信等产品。在用户量足够大的前提下,通过广告、推广等方式变现,本质上就是流量间接变现的商业模式。之所以 C 端产品这么做,是因为用户群体足够庞大,当用户量足够大的时候,广告产生的收入就很可观,同时还能实现同类产品引流,把用户引导到各种「同父异母」的应用上,创造二次流量。比如「手机百度」看短视频必须要打开「全民小视频」和「好看视频」。


设计师从C转向B是什么感受?


不少设计师在做过一段时间 B 端产品设计后会感觉缺乏激情和多样性,因为做酷炫的视觉效果和时尚的微交互的机会并非常有。时间一长就会发现它既无聊又单调,整天面对一些表单、可视化数据,何时才能出头?时间一长会怀疑人生。

正因如此,设计师们感受不到设计带来的成就感,如果不重新认清自我、调整好心态、设立工作计划,很容易原地踏步。这里不是说设计师不利于做 B 端产品,而是要结合自己的职业规划做选择。

我从 C 端转战 B 端之后,发现 B 端产品吸引我的有以下几点。

1. 更有挑战性

B 端产品相对而言,场景、功能、业务流程、信息架构要比 C 端更复杂,面对的异常情况也比较多,一些专业性强的行业,甚至还需要一定的背景门槛,比如一些互金公司会帮助 PM 和设计师考取金融行业相关资格证。正因难度更大,设计 B 端产品才更具挑战性。

而C端产品目前各行业基本成熟,产品同质化相当严重,竞品中有大部分都差不多,设计师很多时候的工作就是在做领导和产品经理的需求,「借鉴、学习」成熟竞品的设计。而 B 端市场还处在发展中状态,现在正是市场红利的时候,竞品虽少,但商业竞争残酷,即便下载了竞品,你没有体验账号还是进不去的,所以从一定意义上讲,做 B 端产品的设计,很多时候都需要自己去调研用户需求,去摸索设计方法,并做出方案去验证它。对 UI 和交互设计师来说,复杂的业务场景和产品逻辑能让你养成严谨的设计习惯(思维),以后 UI 转交互,或转产品经理,B 端的设计经验都是一个非常牢固的基础。

2. 更能体现设计师的价值

上面也说了,C 端的成熟产品很多,产品也经过市场检验了,优秀的产品站在更高的角度,去除设计师自己的情怀来看,在一段时间内很难再有突破性的创新,只能在细节和体验上微创新,主要还是靠产品经理发现功能痛点或运营的手段,设计师在这种情况下发挥的价值有限,往往地位也很低下。一般的互联网公司,很多设计师都是执行者,很难参与到产品层面的工作,在开发眼里觉得设计师就是画图的。

3. 更能进行行业深耕

B 端设计师对行业、业务的了解远远深得多,他们做的不止是框架层和表现层的东西,每设计一个功能,必须要了解该功能在整个产业链的位置、功能目的,对其他业务环节有什么影响等等,只有对行业了解得更深入,才有更多的机会享受行业带来的红利。

以上是我的个人看法,当然设计师如何选择 C 端和 B 端,这和自己的兴趣、职业方向有非常大的关联。偏视觉的设计师做B端产品时肯定会有一些局限性,偏交互的设计师在你经历完 B 端的产品设计之后,你会发现 C 端的逻辑真的很简单。所以无论怎么选,请先考虑好自己的个人因素,并不能因为现在 B 端火,你就跟风,喜不喜欢、适不适合、能不能在 B 端领域生存下去,还是要看你自己。

作者:UXD笔记

转载请注明:优设网

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

魏华的微信.png

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

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

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




更多精彩文章:

Cs界面设计之二:如何区别B端与C端的产品设计差异?我总结了26条对比!






Cs界面设计之七:B端设计师来看!带你深入了解「B端C化」的设计理念

博博


引言


中国互联网公司的迅速发展正在推动着整个软件行业的审美革命,在 C 端产品市场逐渐饱和的情况下,互联网大厂正在将资本逐步转移到 B 端市场的广阔蓝海中。“B 端 C 端化”的设计理念也应运而生,认为可以用 C 端的模式和思维来进行 B 端产品的设计。


背景


除了刚刚有说到的资本慢慢向 B 端市场的蓝海转移,还有一点就是中国互联网环境的迅速发展,智能手机的大范围普及,工作人群的年轻化,使得人们已经熟练的掌握了各种软件的使用,并且在快速迭代的产品中慢慢变得挑剔、谨慎。

B端设计师来看!带你深入了解「B端C化」的设计理念

并且不断优化迭代的互联网软件产品也在无形中为用户完成了底层认知的搭建,一些功能、操作、交互逻辑已经深入人心,用户也已经被教育成了”高玩”。

所以如今一些新型 B 端产品的设计理所应当的在用户体验五要素中最贴近用户的结构层、框架层和表现层中与一些 C 端产品在一定程度保持了一致,这种设计理念其实也很好的解决了传统软件的复杂、门槛高、难用等痛点,很大程度降低了用户的认知成本和学习成本,把高效、简单、易用的工具带到大家的日常工作中。

B端设计师来看!带你深入了解「B端C化」的设计理念

对 B 端 C 化的理解


对这个概念的理解我认为是:”B 端产品在使用体验和视觉感受这两个方面和 C 端产品接近”。这是我们设计师需要特别关注的,传统的思维中,大多数设计师会认为 B 端是给公司内部人员或者商家使用的,只是一个管理系统,并不需要太过于精细,至于体验也是停留在“能用就行”的程度。但是在我看来不管是 C 端还是 B 端,其实它的使用对象都是“人”,应该要遵循人们对于事物的认知和一系列复杂的人体工程学操作习惯。两者都需要关注用户在使用时的体验感受,顺畅的使用流程、清晰的信息展示和高效的行为效率,以及有效的引导都能够快速的帮助用户完成目标任务。无论是 C 端设计还是 B 端设计,满足这些条件无疑可以给用户带来更好的体验。

B端设计师来看!带你深入了解「B端C化」的设计理念

但是也不能以偏概全的认为 C 端的设计思维可以完全复用过来。B 端产品的场景其实比 C 端产品还是要复杂的多,应该说是各有各的侧重点,思维和设计模式上不能完全照搬,下面我就先说说它们各自的不同处,再举例带你看看 B 端产品在哪些方面可以向 C 端产品借鉴学习。

B 端 C 端的不同


1. 使用者不同

B 端使用者多是同一个组织集体,以群体为单位进行协同。比如:老板、部门主管、员工或商户。而 C 端使用者相对比较单一,目标用户群体即是主要使用人群,使用目标、偏好、个性比较明确。

2. 业务不同:

B 端业务大多数会存在多重维度、场景,使用场景跟业务紧密相关,同一个系统不同角色使用时的业务处理和所关注的数据信息,侧重点会有很大的不同,需要全局考虑。不同角色使用产品的流程差异大,需要不同业务上更专业的解决方案。而 C 端业务一般维度比较单一,业务逻辑相对固定,任务路径和展示内容比较单一。

3. 价值主张不同:

B 端注重效率、成本、管控、数据分析等。追求产品的稳定性、业务的增长性,保证产品性能和技术上的安全性。而 C 端注重用户的体验、使用简单、有乐趣。

4. 产品思维不同:

B 端产品多数基于服务思维,工具化思维,更加理性;更多的是帮助 B 端用户提高效率,完成业务目标。而 C 端多数为产品化思维,游戏化思维,更感性,更多的是娱乐和情感的满足。

5. 产品形态不同:

B 端产品注重业务的梳理,多数会用到图表、表格、模型,多数产品形态偏向更垂直行业或更专业的面板形态。而 C 端更注重用户的感受,会用到很多夸张的动效,炫彩的颜色。


B 端 C 化在产品中具体的表现


1. 结构层

结构层确定各个将要呈现给用户的选项的模式和顺序。结构层是用来设计用户如何到达某个页面,并且要考虑他们完成事情之后能够去哪里。

具体在 B 端产品的表单交付场景下可以体现出,以前的 B 端表单往往过于冗长,借鉴 C 端一些注册场景的设计,把表单拆分成 3 步内的行为步骤,减少用户的疲惫感提升体验。

B端设计师来看!带你深入了解「B端C化」的设计理念

2. 框架层

产品的框架层包括:按钮、控件、照片、文本区域的位置。框架层是用于优化页面设计布局的。

具体在 B 端产品的列表页可以体现出,列表页中整体的按钮、文本区域的位置、搜索和筛选的布局设计其实与 C 端产品中的商品详情页是类似的,遵循用户的阅读顺序和视觉焦点来进行设计。

B端设计师来看!带你深入了解「B端C化」的设计理念

3. 表现层

视觉、听觉、(触觉)的体验设计。多体现在一些情感化的设计也被运用在了 B 端产品中。

B端设计师来看!带你深入了解「B端C化」的设计理念


B 端 C 化未来的设计方向


反观现在 C 端产品的一些设计风格和流行趋势,有哪些可以运用在 B 端产品的设计中呢?

1. 3D 化

B 端因为对数据的展示有较强的需求,用户在使用过程中提高效率的判断纬度也包括信息数据的获取效率,而 3D 的视觉在数据可视化层面有着天然的优势,可以帮助用户更快速的理解数据维度所表达的核心价值。近年来网速等硬件设施的升级也为 3D 化视觉带来可落地的基础,设计师也尝试在产品设计中融入更多的 3D 化元素。

B端设计师来看!带你深入了解「B端C化」的设计理念

2. 情感化

人们对传统 B 端产品的印象往往是觉得它们比较枯燥、呆板的,如今一些新型的 B 端产品的设计理念也试图在抛开用户对于产品的这种既定印象,所以很多产品在往一些娱乐化、IP 化的方向尝试,并且都达到了一些比较好的效果,未来在这方面的思考和尝试只会越来越多。

B端设计师来看!带你深入了解「B端C化」的设计理念

3. 个性化

B 端产品的同质化严重,所以 B 端产品也需要从一些产品定位去定制更加富有个性的品牌基因,可以让用户产生对产品的感情,达到从同类产品中能够脱颖而出的目标。

B端设计师来看!带你深入了解「B端C化」的设计理念


总结


不管是 B 端还是 C 端,目的都是为了解决业务场景中遇到的问题,使用对象都是人,都应该站在“人性”的角度考虑问题,有人说 B 端产品一般都不注重设计,C 端产品的设计更能满足设计师对美的追求,我只能说它们的侧重点不同,C 端更注重视觉感受,要做到在视觉表现的感性层面吸引用户,而 B 端其实更为复杂,需要做到底层的强大数据处理能力,产品的专业性包括交互、视觉的吸引力,这样才能从众多产品中得到用户的认可并脱颖而出。设计师还需要不断打磨细节和优化体验来吸引和留住用户。

所以说“B 端 C 端化”也只是在某些方面通用,但核心侧重点不同,不能以偏概全、一概而论,但可以借鉴与参考,B 端产品也可以做的很精彩。

作者:酷家乐UED


转载请注明:优设网

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

魏华的微信.png

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

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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
















Cs界面设计之六:做C端还是做B端,该如何选择?来看大厂设计师的分析!

博博

我发现很多新人设计师和我当年一样,有一个误区,认为做C端就是比做B端更好。尤其如果能做知名C端产品,想想都开心。

做C端还是做B端,该如何选择?来看大厂设计师的分析!

△ by Chris Ota @ Dribbble

我作为一个两者都做过的大厂设计师,想要总结一下自己多年的经验和观察。如果你还在犹豫选择做C端还是做B端,或者担心做B端不好,无论你是UX还是UI甚至是PM,都一定要用心看看:

P.S. 本文不能代表所有情况,只能代表很大一部分典型状态。


工作目的


  • C端搞定领导
  • B端搞定客户

领导和客户,哪个更难搞定?

我觉得领导更难搞定。

很简单,如果作为一个基层设计师,你不知道自己有多少层领导,例如设计层、项目层、产品层、公司层甚至集团层…

而且,每一层可能还有不止一位领导。

更可怕的是,他们之间的意见可能统统不一样…

这还不包括一些与你意见相左的平级队友…

而方案评审有时还逐层递进,每一层改一次。好像升级打怪一样,你还统统无法拒绝。

经常是A、B、C、D方案随机组合各遍,最后发现又回到了原点…很多情况下,C端大公司里做设计,时间就是这么被消耗掉的。

那B端就好些吗?

不但要应付本公司的领导,而且还要应付对方的领导,层级还岂不是更多了?

并不是这样。

虽然领导数量变多了,然而金主经常只有一个——甲方公司内,即能够审批是否为该项目付费的领导。

对于B端公司来说,做项目的目标特别明确,那就是——能不能让甲方爽快给钱。

只要钱给够了其它都好说,不像C端公司那样,考虑的东西特别多:口碑、留存率、转化率、活跃度…

也就是说,即便本公司领导不喜欢你的方案,但只要金主爸爸喜欢了,一般就不会有什么问题,毕竟谁也不会和钱过不去。

当然,甲方内部自己意见不统一的情况也是有的,但一般外包项目都会有比较明确的负责人,所以很多时候也不会太复杂。


工作方式


  • C端多沟通
  • B端多汇报

很多C端公司不重视汇报,很难开一次正儿八经的进度报告会。因为就那么几个人,反正办公室里抬头不见低头见,何必整那些“形式主义”。

甚至设计规范什么的,意思意思就好了,反正大家翻来覆去也就那么点页面,文档做精致了给谁看?

B端就不一样了。

一整个项目下来,真正和甲方面对面的机会不多,所以每次都一定要特别隆重:

  • 汇报内容要及其详尽
  • PPT动效要酷炫
  • 项目流程必须严谨
  • 演示原型要可点击

明明只需要一个步骤,恨不得拆分成两个,一定要让金主爸爸感觉服务到位、物超所值,最好是能够多给点钱。


需求类型


  • C端常局部迭代
  • B端常从零到一

在C端公司工作,你会发现你学的那些设计流程根本用不上几个,因为绝大多数需求都小得跟拧螺丝钉差不多了。

当然,你申请C端工作的时候,作品集里的项目流程一环不能少,得整得跟造火箭一样。

C端公司通常不求数量,更求质量。自家产品的流量来之不易,必须长期迭代维护,才能不被竞争对手超越了。

结果需求越来越细,设计方案可以为要不要圆角、标题字体要不要大1号、留白要不要多2个像素之类的小问题争论半天…

B端就不一样了,就跟做饭店一样,讲的是翻台率。项目能够1个月搞定,就绝对不要拖到1个半月。

最好是永远不要迭代,一次过审,尽快拿钱收工走人。

至于细节问题,只要刚好够忽悠甲方那就够了,多一点都是浪费。


方案偏好


  • C端追求个性
  • B端追求统一

C端产品有点像快销时尚,隔一段时间就得改个版。也不是因为之前有什么问题,就是给用户换换口味,刺激一下他们的“消费欲”。

而且每推出一个新功能时,界面上最好是设计得有点个性,生怕用户感觉不够新奇,没有点击欲。

B端就不一样了,经常是项目一次性交付,只要不出问题就几乎不迭代。

甲方已经把价格压得这么低了,还追求什么个性风格?还不如全部组件化,一套规范搞定N个界面。不容易出错,还能把成本降到最低。


职位侧重


  • C端重视觉
  • B端重交互

这句话不难理解,可以从前面的内容就可以推理而来。

C端追求个性,需要不断推陈出新,从感官上刺激用户,那么视觉设计的工作就不会少。

而由于C端产品的需求大多以局部迭代为主,少有大改或者从零到一的机会,所以交互上可以发挥的余地多少有些限制。

做C端还是做B端,该如何选择?来看大厂设计师的分析!

△ by Anton Mikhaltsov @ Dribbble

B端常用组件化设计,需要个性化的地方不多,很多后台页面甚至完全不需要视觉设计。

而且很多B端公司会将同一套视觉风格用到不同的项目中,顶多换个色调、改个首页风格。

而拼凑组件的工作,通常交互设计师就可以解决。

做C端还是做B端,该如何选择?来看大厂设计师的分析!

△ by Tom Koszyk for EL Passion @ Dribbble


总结


最后说一点,我认为C端与B端没有高下之分,就看个人取舍。

但要注意的是,一旦你选择了其中一个,以后再换方向可能就没那么容易了,所以做选择是要谨慎。

作者:体验进阶

转载请注明:优设网

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

魏华的微信.png

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

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

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















Cs界面设计之五:B端产品C端化是自嗨?对不起我想得太简单了!

博博

经常在网上看到「B 端产品 C 端化」的讨论。

一开始我以为这个概念是说 B 端产品以前做得太差了,但随着竞争越来越激烈,以后也要像 C 端产品那样注重用户体验,更加轻量化、趣味性和人文关怀才行。

当时我还挺不以为然,感觉像是噱头或者自嗨。

把用户体验做好虽然重要,但是这对 B 端公司的实际业务(钱)未必有什么直接影响。

因为对于绝大部分客户来说,功能、效率和价格才是真正的硬指标,而且光是能找到能同时满足这三点的产品就很不容易了!

然而,我最近刚开始参与一个 B 端项目,为了做竞品调研,我试用了国内外十多款产品(国外为主)。

做完之后,我深刻反思了自己过去对「B 端产品 C 端化」的理解还是太肤浅。


为什么要 C 端化?


其实 B 端产品 C 端化,并不是因为传统的 B 端产品没 C 端好用(不是这么比的)。

其实关键还是获客模式的转变。

传统的 B 端产品是销售驱动,销售人员通过电话、上门拜访等形式促使客户下单。

一旦成功卖出,只要后续的服务不太差,客户就没必要更换迁移。

现在 B 端市场越来越大、行业信息越来越透明、客户的判断能力越来越强,传统销售模式开始变为互联网营销。

B 端产品在网上发布信息并投放广告,吸引客户自己前来试用并购买,只需提供少量客服人员即可。

这与以往的 B 端业务模式有很大不同,所以就需要变革。

所谓「B 端产品 C 端化」,表面上是学习 C 端的用户体验,背后的真正意图是要学习人家 C 端的互联网获客能力。

B端产品C端化是自嗨?对不起我想得太简单了!


怎样才是好的 C 端化?


我发现 B 端产品的 C 端化程度,和他们的互联网广告投放力度成正相关。

例如我在油管上经常受到 Monday、GoDaddy 这两款 B 端产品的轮番轰炸。

先不说好不好用(毕竟我也不是目标客户),我发现他们用起来真的很有「C 端感」,和传统的 B 端产品果真不一样。

倒不是什么“轻量化、趣味性和人文关怀”,而是因为他们在我打开网站的那一刻,就开始不断吸引我探索使用。

我拿 GitLab 和 Monday 的官网首页对比一下,也许你就能感受到了:

B端产品C端化是自嗨?对不起我想得太简单了!

前者像是一板一眼的「老实人」,后者则像是对你笑眯眯的「绿茶妹」,高下立判。

“轻量化、趣味性和人文关怀”这些东西,并不足以打动用户试用和购买,顶多只能算是「低段位」手段。

只有「高段位」手段,才能让用户不自主地地被吸引,心甘情愿地掏钱。

可是要做到「高段位」真的很不容易,我今天就总结几个技巧吧~

1. 直接坦诚

遇到两个陌生人:一个打官腔又遮遮掩掩的;另一个说话友善接地气又诚实,你会更喜欢哪个?

可能大多数人跟我一样会喜欢第二个。

C 端化做得好的 B 端产品,会把自己的产品预览图直接放到首页供人观看,而不是搞一张概念图外加一堆高大上的广告词。

前面放过的那张案例,这里也可能拿来用:

B端产品C端化是自嗨?对不起我想得太简单了!

GitLab 的官网画了一些很抽象的概念图,写了一些很抽象的描述,给人感觉很模糊。

Monday 的官网明确把自己的业务类型列了出来供用户选择,还把每种业务对应的图标和展示方式画了出来,感觉很明确清晰。

2. 有效互动

遇到两个健身房销售:一个上来就说一个劲地介绍服务;另一个则先确认你平时的健身习惯,再根据你的情况介绍服务,你会更愿意听谁说话?

我肯定更喜欢第二个。

C 端化做得好的 B 端产品,不是简单地展示信息,而是先了解用户,再根据用户的需求提供不同的信息甚至服务。

B端产品C端化是自嗨?对不起我想得太简单了!

Zendesk 的网站,会把自己的功能列出来给用户,给的图像和描述又很抽象,毫无互动感。

而 Asana 会让用户选择自己需要的功能,并直接给出具体案例的界面展示图。

3. 降低门槛

遇到商场逛街时遇到两个陌生餐馆,一家在二楼;另一家在一楼,你会愿意尝试哪家?

肯定是第二个。

很多 C 端化做的好的 B 端产品,会把表单用弹窗的样式放在产品上面,让用户感觉只要填写完就能立即使用了。

B端产品C端化是自嗨?对不起我想得太简单了!

比起 Trello,Smartsheet 只是在表单展示了一下产品内部,就让用户感觉门槛低了好多。

即便 Smartsheet 的新用户后面发现背后那张图真的这是一张图而已,要填的一点不少,但这时都已经快填完了……

4. 循序渐进

两家陌生的两家餐厅都把菜单摆出来了,一家的菜单写得密密麻麻;另一家的菜单虽然菜品不多,但是推荐菜品和菜式分类很清晰,你会更愿意尝试哪家?

我相信很多人都会更愿意尝试后者。

C 端化做得好的 B 端产品,不会太在意自己的产品是不是看起来功能齐全,而是更在意用户是否能够很好的理解产品,不要造成心理负担。

B端产品C端化是自嗨?对不起我想得太简单了!

上图来源:Figma 这些交互细节,B 端设计也值得借鉴

Sketch 和 Figma 的属性面板在功能上其实没有很大的差异,但是后者看起来却清晰简洁许多,对新用户更加友好。


总结


B 端产品 C 端化这个理念其实很好,但如果被误以为只是向 C 端学习用户体验那就可惜了。

用户体验只是手段,关键目的是在没有销售人员参与的情况下,如何从互联网获客。

这次的经验的提醒我,以后如果再看到一些很火概念,不要简单的从表面理解,而是要站在决策者的角度,多思考背后的真实意图。

作者:ZoeYZ

转载请注明:优设网

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

魏华的微信.png

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

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

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















Cs界面设计之四:如何打造一个优秀的C端组件库?来看实战案例!

博博

“组件”是平台级产品非常重要的组成部分,设计组件不仅可以节约设计和开发成本,更是设计理念的约束性体现。但是,随着平台级产品业务场景的复杂度不断增加,过往沉淀的设计组件的交互模式和视觉形式,却跟不上业务发展的诉求。因此,我们思考:如何建立和迭代一个优秀的组件库——不仅能保持良好的普适性,解决全平台产品的体验一致性的问题;并且能够保持各个业务线的特色和定制化需求,即所谓平台级组件的“和而不同”。


升级组件库的背景和目标


随着近两年业务的发展,早期沉淀的组件渐渐无法满足业务诉求,一部分组件的使用率和覆盖率很低。

因此我们决定对贝壳平台组件进行一次全新的升级。我们的目标不仅是针对“基础组件”进行优化,保持其良好的通用性,达到“和”的目的;更希望能够承载业务线(二手房、新房和租房)更多体验场景的需要,做到服务于业务的“不同”。

为了更好的实现升级目标,我们思考了以下几个问题:

1. 设计组件库的使用人员有哪些不同的角色?他们的诉求是否有区别?

在我们眼里,设计组件是对设计工作的一种管理,而设计工作从产出到落地的完整链条上,主要有三种角色的人群:

贝壳平台设计师和各个业务线设计师:平台设计师穷举组件使用场景的同时,提炼业务诉求,帮助业务线设计师通过组件更省时省力的高效完成设计工作。

开发团队:通过设计师的输出,明确组件开发的具体框架和自由度(例如按钮颜色是否支持不同业务自定义等)

产品团队:通过设计组件文档明确设计的标准,在各角色有共同标准的认知下,需求中可使用组件搭建的部分无需重复提需求,节约各方成本。

因此,设计师需要产出的并不是一份简单的组件库源文件,而是一份以不同角色合作伙伴的视角,都能看得懂的设计组件表达文档。

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 1 给设计、产品和开发不同的文件样式

2. 组件真的是越多越好吗?

我们给出的结论是:面面俱到反而无从下手。在做设计组件时,大多数同学都会有患得患失的心理,认为组件足够多,就可以应对更多的使用场景,规范也足够细致和统一。

但是这是一个比较理想的状态,过于低微的颗粒度下,设计反而会失衡。这里的失衡是指,创新和规范之间的平衡被打破,显然不是我们想要的。并且平台级组件库是具备再生和持续发展的生长能力的,因此不必一味追求数量。

3. 采用什么方法可以合理的控制组件的质量和数量,挑选出通用度高的组件呢?

我们优先梳理了贝壳平台流量 TOP30 的核心关键页面,依据数据圈定范围,然后进行组件的整理。如下图,我们发现使用率最高的前十名组件,按照降序排列依次为:tabs 选择>Navbar>房源卡片(业务通用组件)>经纪人展位(业务通用组件)>按钮>通知与提示>弹层>搜索框>操作菜单>标准悬浮球。

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 2 贝壳平台流量 TOP30 页面组件应用情况

这样,我们就可以按照以上优先级,优先设计和代码化使用频次较高的组件。

我们将贝壳原有组件库的全部组件打散,重新定义后分成三大类别:

平台基础组件:指不具有业务属性的元件及基础组件,例如:按钮/表单/列表/搜索栏/系统反馈弹层/操作栏/Navbar 等。

业务通用组件:指横跨多业务,但在不同的业务场景中略有变化,有公共元件可提炼,例如:经纪人展位/房源卡片。

业务特性组件:指只属于某一业务应用范畴的组件,无公共元件可提炼,但是在单一业务线复用率较高。

组件的明确分类,可以帮助我们在日后每当有新增组件时,以统一的标准和原则进行归纳和整理。


优化业务通用组件


除了优化平台基础类型的组件外,我们还对其中使用频率很高的业务通用组件——房源列表进行了优化。

房源列表是在贝壳平台通常以线性结构呈现的。用户通过纵向扫读来获取房源宏观信息,横线浏览来了解单个房源条目的细节信息并进行相关操作。它在二手房、新房、租赁、海外等等业务线,都会经常被使用到。贝壳平台原房源列表样式,由于业务的发展,需要展示的信息逐步增多,依次罗列在列表中,导致展示效率变低,无吸引用户的亮点,最终导致用户对房源列表的“决策效率降低”。

而想要提升决策效率,并且优化后的列表能够在各个业务线使用,我们先要了解,在不同业务场景中,房源卡片都要展示哪些内容?这里我们应用到了先前研究得出的结论——用户浏览房源列表的心智模型。

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 3 用户浏览房源的心智模型

在心智模型的指导下,我们进行了“元素穷举”。

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 4 元素穷举

得到了具体展示哪些元素后,我们开始思考,一个包容性强的列表底层结构应该是什么样子?经过几次的反复推敲和尝试,我们得出如图所示的三层结构:容器背板层、可交互操作层、内容展示层。

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 5 房源列表的三层结构

容器背板层:它是承载列表内部所有内容的盒子,我们在这一层,定义了容器的形状,圆角等属性,使它成为一个统一的底层模版。

可交互操作层:这一层放置的是用户关于列表可进行的全部操作,例如关注,查看 VR 图片等。并且,我们针对具体每一种操作行为,定义了统一的交互方式。

内容展示层:这一层涵盖所有用户可以查看的具体信息,包含房源标题、楼盘名称、房源详细信息和价格的动态浮动变化信息。

通过三个层次的划分,我们可以清晰的定义每个层次的具体的职责是什么,这有利于我们后期面对复杂业务场景和海量信息内容时,可以更好的去归纳和组织信息的呈现。

在完成了元素穷举和结构分层之后,我们绘制了一个基础框架模版,如下图:

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 6 房源列表基础框架

然后我们将不同业务线的具体细节信息,嵌入模版中,设计成各个针对不同业务和不同场景使用的房源列表。带着这样的设计结果,我们与业务线的产品经理和设计师同学进行了一次深入的探讨,并且确定可推行迭代的节奏。


数据与结果


综合 14 天数据,二手房改版后,CTR 由原来的 44.65%提升到 51.35%。这对于房源列表来说,是非常难得的。

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 7 改版后的数据结果


总结


以上就是本文的全部内容,相信大家已经掌握了 C 端组件库建立的基本方法,这里我们总结一下组件库的创建流程:

如何打造一个优秀的C端组件库?来看贝壳设计的实战案例!

△ 图 8 C 端组件库的创建流程

组件库是每一位用户体验设计师,在日常工作中积累的设计资产。组件要做到“和而不同”,“和”是指用规范化的底层容器,将抽离出复用率高的元素包裹起来,形成体验一致,交互一致的封装模块。“不同”是指,每条业务线可以根据自身具体的使用场景,去定义各自在内容展示层要展示的元素,保证了一定的自由度和各自生长的能力。

房源列表在贝壳平台首页已经上线有半年左右的时间了,通过改版,用户使用房源列表时的决策效率有一定程度的提升,业务覆盖也逐步扩大。在研发老师的协同下,实现了 Native 和 Flutter 组件的封装,大大缩短了开发时长,从而提升了产品整体的研发效率。

希望能给同样正在建立组件库的设计师同学们带来一些启发,贝壳用户体验团队也会继续致力于更多业务特性组件的深挖,期待你的关注。

作者:贝壳KEDC

转载请注明:优设网

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

魏华的微信.png

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

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

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















Bs界面设计之十:B端设计基础指南:网格系统

博博


网格的历史


说到网格的应用,我们可以追溯到很远。古埃及人在他们的雕刻和绘画中描绘的人物遵循了一个规则,将比例标准定为人的拳头,一个站立的人物从地面到头顶测量为 18 个拳头。

B端设计基础指南:网格系统

公元 1040 年,首次在中国出现活字印刷,主要采用的是泥活字。在西方,金属活字印刷术在 1450 年左右出现,而古腾堡圣经在 1455 年左右的发行将是出版界的第一个重大里程碑。金属类型的文字更加充分利用了网格。

B端设计基础指南:网格系统

到了 1917 年,网格在荷兰风格派运动中最为明显,由艺术家 Theo van Doesburg 和 Piet Mondrian 领导。他们将画布限制在相交的垂直和水平线条和原色上。

B端设计基础指南:网格系统

1919 年,德国的包豪斯学校成立,他们主张的简洁实用的设计理念同样用到了网格的概念。像著名的包豪斯国际象棋,它的棋子都是正方形和长方形等简单的几何形体,可以紧密地组合在一起,以便紧凑地存放。

B端设计基础指南:网格系统

1950 年代,一种崭新的平面设计风格终于在瑞士形成。这种风格的设计,力图通过简单的网络结构和近乎标准化的排版方式,达到设计上的统一性。这种风格一直到现在影响了很多网页和平面设计师。

B端设计基础指南:网格系统

随着第二次世界大战的结束,一种新的消费主义出现了。经济快速发展,广告业的繁荣逐渐兴起。保罗·兰德作为美国第一个应用瑞士平面设计风格商业艺术家,他以企业品牌标志设计及商业广告设计而闻名,网格在这种新的广告形式中发挥了重要作用。

今天我们要聊的是关于网页设计网格系统。说起来很简单,但其实里面包含了很多复杂的概念。网页设计的第一步就是如何进行布局。标题、导航、按钮放在哪?每个元素之间的间距是多少?这些都离不开页面布局。作为网页设计的基础,页面布局可以极大地影响用户阅读的流畅度和直观度。在聊页面布局前,我们需要先普及一些概念。

B端设计基础指南:网格系统


页面布局


页面布局是网页上所有视觉元素的排列。通过页面元素的有序排列,可以建立元素间的关系,从而更好地引导用户体验。作为网页设计的关键组成部分,布局决定了页面哪些元素最受关注,以及页面的视觉整体平衡。总之,一个好的页面布局可以将用户的注意力引向正确的方向。先将他们吸引到最重要的元素上,然后按照重要性顺序阅读余下部分。


网格的作用及概念


要实现良好的页面布局,最好的办法就是应用网格系统。网格是设计的骨架,可以帮助我们对齐,有序组织页面内容。通过正确使用网格,我们不会随意地把元素放到页面里,而是明确地知道将这些元素放到哪些合理的位置上,有助于提高设计效率和设计质量。无论是 PC 端还是移动端设计,通过网格都将对我们做出有指导性的设计决策并为用户创造更好的体验。

网格由几个部分组成,分别是 Column (列)、Gutter (槽)和 Margin (边距)。它们在一起构成了屏幕的水平宽度。

接下来通过几个图例来详细解释下。

B端设计基础指南:网格系统

列(Column)是跨越内容区域的垂直部分。在网页设计中列越多,网格就越灵活。列的宽度由设计师自己来决定,传统做法是在 PC 端网页上使用 12 个,Pad 端使用 8 个,移动端使用 4 个。列宽一般定义为 60~80px。列宽是影响实际内容宽度的关键因素。

B端设计基础指南:网格系统

槽(Gutter)是列与列之间的间隙。槽的作用是将每个模块的内容进行纵向分割。较宽的槽更适合较大的屏幕设备,可以通过更宽的槽去拉开页面的间距,使页面信息展示的更加舒展。

B端设计基础指南:网格系统

边距(Margin)是内容与屏幕左右边缘之间的空间。更宽的边距更适合更大的屏幕,因为它们会在内容的周边创建更多的空白。

B端设计基础指南:网格系统

介绍了以上 3 个概念,我们可以利用 8pt 网格系统来对页面进行分割。8pt 网格系统,使用 8 的增量来调整页面元素的大小和间距。也就是说,页面中的高度或宽度、边距或填充都是 8 的倍数。


8pt 网格介绍


有没有想过我们在做移动端界面设计的时候为什么选用特别小的画板,但我们的显示设备却非常大?

比如,我们用 375×812 的尺寸来进行设计 iphone X,但其实 iphone X 的实际尺寸是 1125×2436,是我们设计尺寸的 3 倍。

B端设计基础指南:网格系统

B端设计基础指南:网格系统

因为设计尺寸会以 2 倍或 3 倍的像素进行渲染,比如 iphoneX 就是以 3 倍尺寸进行渲染,iphone8 或 iphoneXR 会以两倍尺寸进行渲染。所以我们在进行设计的时候可以采用 1 倍最小尺寸进行设计,以适配到不同设备的不同尺寸。因此,1pt 可以分别转换为 @1x(1 倍尺寸)、@2x(2 倍)和 @3x(3 倍)大小的 1px、4px 或 9px。

B端设计基础指南:网格系统

所以我们设计一个 16pt 的图标,导出@2x 或者@3x 的尺寸应该是 32px、48px


为什么一定要用 8pt?


使用偶数来调整元素大小或元素间的间距可以很好的适配到各种尺寸的屏幕。比如在@1.5x 尺寸下,如果用奇数来定义元素尺寸或间距,就很容易出现半个像素的情况。5px 在 1 倍尺寸中导出为 1.5 倍尺寸就容易出现半格像素的情况。之所以选择 8,也是因为大部分的屏幕尺寸是可以被 8 整除的,这样就很容易适配。此外在 PC 端没有使用 2 或 4,是因为其颗粒度太小,不便于设计师进行操作;用 8 的倍数来设计还有一个好处就是避免我们在设计中过于纠结。

B端设计基础指南:网格系统


文本如何设置?


基于 8pt 网格的排版系统。字体的大小可以设计成不同的尺寸,但它们的行高要尽量是 8 的倍数。

B端设计基础指南:网格系统

B端设计基础指南:网格系统

在网页端设计时,很少会遇到几倍尺寸的输出,所以通常情况下都以像素为单位,这样的话就是 8px 的倍增。我们就可以把间距或者元素定义成以 8 的倍增不同尺寸。

例如:

small = 8px
medium = 16px
large = 24px
x-large = 32px
……


页面布局类型


普及了上述概念后,我们一起进一步了解下页面的布局,页面布局大体分为几类:固定布局、流动布局、自适应布局、响应式布局。

固定布局,顾名思义就是页面的整体宽度是固定的,不会随着浏览器的拉伸变化而变化。这种页面相对死板单一,但对于设计师来讲相对容易设计,也易于开发。

B端设计基础指南:网格系统

流动布局,它会随着浏览器窗口的大小而变化,但是它变化的逻辑是以模块的百分比来定义的。无论浏览器的宽度是多少,流动布局都会填满页面的宽度。其次流动布局不需要像响应式布局那么多样性的变化。它在极大或极小的页面宽度上会存在一些缺点。比如页面很宽,内容可能会被拉伸得太长,单个文字段落可能会在单行上贯穿页面。相反,小屏幕上的多列布局也可能对内容来说过于拥挤。

B端设计基础指南:网格系统

自适应布局可以理解为是固定布局的一个升级版,举个例子,当页面内容为 960px,此时页面无论再往多宽拉伸,页面内容始终显示 960 宽度。如果缩小宽度到一个临界值时,比如 960px 以内,页面就会缩小到它的第二个宽度,假设是 640,以此类推。这个临界值我们称之为断点。

B端设计基础指南:网格系统

响应式布局结合了流动布局和自适应布局。随着浏览器宽度的增加或减少,响应式布局将像流动布局一样进行变化。同时,如果浏览器宽度超出了某个临界点,也就是断点,那么页面布局也会发生改变。通常,响应式布局是为了能够兼容网页端、平板端和移动端等不同设备进行设计的,这样会给用户带来更好的浏览体验。

B端设计基础指南:网格系统

最后用图例展示下如何利用网格系统在网页设计上进行页面布局。

B端设计基础指南:网格系统

在 figma 上的设置如图:

B端设计基础指南:网格系统

我们可以设置好列数,定义好列宽和槽宽来决定页面的实际宽度。

在网页设计上使用网格系统浅层价值是为了让页面布局有章可循,使页面看起来更加统一,深层价值其实是为了做自适应布局,让页面在不同宽度下适配到不同的设备上。

这里我也创建了 4 种不同尺寸的网页端网格系统,供大家参考,大家也可以根据自己的实际情况去建立自己的网格。

B端设计基础指南:网格系统

https://www.figma.com/community/file/1076073453929437640/8pt-web-grid

最后推荐一款 sketch 智能布局网格的插件,喜欢的同学附件进行下载。

B端设计基础指南:网格系统

切记,在实际项目中,尽可能灵活的使用网格,不必拘泥于 8pt 的单位,但尽量保持在偶数范围。

参考文献:

Bs界面设计之九:从6个层面,帮新手快速入门B端设计系统

博博


什么是设计系统?


从6个层面,帮新手快速入门B端设计系统

配图取自文章《以B端产品为例,帮你深入浅出掌握「设计系统」》

设计系统 = 设计价值观和原则+设计规范+场景定义+工具包

设计系统是在设计价值观和原则、设计标准指导下的各种共享的设计模式和组件资产,是将产品设计团队联合在一起共同打造的一套质量和效率上都有所保障的可行性解决方案,能够解决产品视觉、交互体验一致性的问题、帮助传达统一的品牌认知。帮助团队快速完成产品迭代和功能开发!


为什么要构建设计系统?


从6个层面,帮新手快速入门B端设计系统

问题 1:

随着业务的拓展,产品和项目数量不断增加,发展中期设计和交互上不一致性的问题浮出水面,需要采取措施确保产品或产品线之间保持统一的品牌传达、外观和体验,以满足用户预期并向其传达统一的品牌认知。

问题 2:

无统一的设计规范和交互原则,没有统一的 UI 组件库和代码库,各团队设计和前端需花费大量资源陷入低质量沟通协作和重复造轮子,拖慢产品和项目设计和开发节奏。

问题 3:

产品项目数量 vs 产品设计师,人员配比严重不足的情况下,团队的设计师们无法从杂/乱/急的日常需求中剥离出来,影响构建产品壁垒的质量和速度。


设计系统的价值


产品侧:

保证可复用模块的交互体验的一致性。如同一个产品类型不同分支多个团队完成的时候,可以保证产品团队使用同一份设计规范快速完成产品原型设计。

设计侧:

把设计师逐渐从不必要、重复性劳动中解放出来,节约出来的时间和精力放到更多有价值的工作上去。更多去关注对用户需求和业务逻辑的深入挖掘,如果每个设计师都具备产品用研、交互、组件化等一条龙能力,才能体现 tob 产品设计师的价值,才不会被别人称作是拖拽组件的“工具人”。

开发侧:

形成开发资产,可以提升研发效率,降低维护成本。开发工程师无需再重复开发同一个组件,只需要去组件库里调用即可,配合业务逻辑,高效完成界面开发。做到开箱即用。

测试侧:

标准化的设计规范,是测试人员最喜欢看到的。1 是 1,2 是 2 的设计准则,提升了测试效率。例如,设计规范规定弹窗 footer 区按钮组居右,那么测试人员只要测到不居右,就可以给产品提优化建议了。

主流设计系统-他山之石可以攻玉!

无需犹豫,直接基于现有的优秀的开源设计系统。

设计系统的打造不必从 0-1 构建, 例如:Ant Design 业界优秀的开源设计系统,我们完全可以站在前人的肩膀,最终生产出符合达观品牌、业务特性的设计系统。

  1. 阿里 Ant design:https://ant.design/docs/spec/introduce-cn
  2. 阿里的 teambition: https://design.teambition.com/
  3. 华为 devui: https://devui.design/design-cn/design-value
  4. 饿了么 elemnt: https://element.eleme.io/#/zh-CN
  5. 有赞: https://design.youzan.com/index.html
  6. 字节跳动 Semi Design: https://semi.design/zh-CN/
  7. 字节跳动 Arco Design: https://arco.design/
  8. Material Design:https://material.io/
  9. Lightning Design System: https://www.lightningdesignsystem.com/
  10. Microsoft fluent: https://www.microsoft.com/design/fluent/#/
  11. eva.design: https://eva.design/
  12. Atlassian design: https://atlassian.design/


以原子理论构建设计系统


1. 原子理论设计介绍

首先原子设计理论并不是什么高大上的规则。最早是由国外前端开发工程师 Brad Frost 提出的,他从化学元素周期表中得到启发,发现在化学世界中,所有的物体都是由原子构成,原子组合构成分子,分子组合构成有机物,最终形成了宇宙万物。根据他的理论,设计体系主要包含 5 个层面:原子、分子、组织、模板、页面。

原子理论设计不是一个线性的过程, 它更像是一个心理模型,来帮助我们把用户界面看作是一个连贯的整体,同时也是一些元素的集合。这五个阶段的每一个阶段都会在我们的界面设计系统层级中扮演重要角色。下面,让我们更深入的了解每一个概念哦~

2. 原子层(Atoms):

原子是物质的基础组成部分,是构成设计系统的最基础元素。

在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线、间距、圆角、间距、阴影等。

从6个层面,帮新手快速入门B端设计系统

简单概述下来就五个字:色、形、质、构、质;

从6个层面,帮新手快速入门B端设计系统

3. 分子(Molecules)层

在界面中,分子就像是一个由 UI 元素组成的相对简单的组织。如:按钮、弹窗、搜索框等。

以按钮为例,它的组成元素包含了文字、色块、图标和间距。这些抽象的原子从毫无关联组合成一个分子,图标和文字互相配合传达意义,颜色定义了按钮的特性,间距为按钮定义了一个尺寸和规范。

从6个层面,帮新手快速入门B端设计系统

4. 组织(Organisms)层

分子+原子组合成更复杂和可扩展性的模块,这个称之为组织(区块组件),如:列表操作区块、列表展示区块、表单区块、数据统计卡片区块。

以表单为例,一个表单我们可以通过数量的组合,以及间距的调整,元素的增减,在界面中表达不同的场景和含义。

从6个层面,帮新手快速入门B端设计系统

5. 模板(Templates)层

由原子+分子+组织构成的更复杂更具拓展性的模块,如:分组表单页、页面级表单、详情页、列表页、异常页、dashborad。

本质就是线框图,模版在设计系统承载的作用就是保证设计方案在原型阶段的多样性。专注于页面的底层的内容结构,页面中的信息是占位作用,而不是页面的最终内容。

从6个层面,帮新手快速入门B端设计系统

6. 页面(Pages)层

带业务逻辑的场景案例如:标注详情场景、抽取详情场景、权限管理场景。页面将真实内容应用于模板;

页面是模板的具体实例,填充了真实的内容(图片、文字等)后形成页面,也就是常说的带交互逻辑的「视觉稿」即为高保真原型图,将占位符替换为有代表性的真实内容,使设计系统有了生命。在模版的基础上进行优化和完善就形成了页面最终的设计方案。

从6个层面,帮新手快速入门B端设计系统


关于设计系统的常见认知误区


误区 1:设计体系就是设计规范或者组件库吗?

许多人认为设计系统就是单个代码库、组件库、设计规范,但实际上他们不是一个层次的东西,准确来说设计体系包含设计规范,组件库也是建立在设计体系内的,组件库是记录和共享设计模式的工具,就是设计体系工具化和表现层的部分;

误区 2:设计体系的存在扼制了组织内创造力,会替代掉设计师?

抛出这个问题,是因为经常在不同的场合听到“设计系统是扼杀设计师的创造力”之类的观点,我个人是很难认同这个的,对 design system 的最大误解就是限制设计师的想象力。首先设计系统本身就是一个庞大且复杂的设计观集合,需要调动整个团队的想象力和创造力,最终达到一个统一共识才有可能被实施和执行;

好的设计系统可以通过流程和机制促进创造力的,而且好的设计资产可以帮助大家从不必要的、重复的劳动时间内节省出来,当然也不能过度依赖过往的沉淀资产,把自己定位为设计系统的创造者,而不是使用的工具人,不断的创造和贡献好的解决方案被整个组织采用,就不必再担心那些即将沦为沉没成本的过往设计与技术资产的限制。不会替代掉设计师,反而是一个企业内部尊重设计师价值的开始!是企业对设计文化的认可!

误区 3:设计系统是一劳永逸的吗?

设计体系是动态的,永远是随着组织需求和用户需求而变化的,一切说自己已经完成了设计体系的建设的人都是错误的,都是将静态的设计规范曲解成了设计体系。

误区 4:设计系统由少数人员生产,我们负责用就行了?

正确管理机制:少数人负责管理,多数人参与贡献;避免你做、我用模式,这种生产消费模式非常内卷;避免如:我一个设计师为啥要用你的规范;这规范做的太垃圾用处不大,我才不用,用你做的规范;我苦逼做业务,你晋升拿结果的负面心态;

设计系统也不是简单的靠少数的人 1-2 个月用爱发电就能完成的,设计系统是一群人,对一种做设计文化的认可,每个与之相关的人都应该是设计体系的贡献者与布道者!


需要克服的潜在难题


当然设计体系也容易出现一些缺点,这些问题需要设计体系的构建者们去摸索去克服;

  1. 产品业务复杂性提升,提升建设难度
  2. 难以控制创造与控制间的平衡
  3. 复用与定制间的平衡,刻意追求复用率而容易丢失整体观,为特定业务目标服务时不如灵活集中化式方法等
  4. 资源问题,容易被当成是辅助项目而缺乏预算等资源….
  5. 缺乏良性有效的组件库更新迭代机制,虎头蛇尾….
  6. 收益短期不明显,搭建体系的长期收益难以被组织短期内察觉;

尽管有一系列潜在的问题,但总的来说设计体系带来的收益是大于这些投入的,总的来说方向是没错的,下一个关键问题是:我们如何去建立一个更优秀的设计体系。

今天就跟大家分享到这了,一点拙见,设计系统的话题这个我们分三期跟大家进行交流,如有兴趣,铁子们可以加个关注

作者:IM UED

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



Bs界面设计之八:用2个案例,帮你学会B端关键信息的密度提升设计

博博

在决策类产品中,用户的行为路径一般从信息分析场景到信息决策场景。系统关键信息密度的高低是影响用户决策速率的重要因子。因此我们建议从「信息拆分与重组」、「功能高效聚合」两个层级出发,以提升关键信息在页面模块中的的密度。

B 端有效信息密度提升设计框架的颗粒度由粗到细可总结为三个层级,分别为基础层、功能层与信息层。首先是基础层,B 端产品多场业务景、多用户角色、多任务流程的关键性差异决定了业务侧信息是一切设计的出发点;再者,需依据业务场景定义、角色定义与任务流排布的相关内容链接与聚合产品功能;最后,基于以上信息,使用交互与视觉相结合的设计方法,降低用户与系统的交互成本,引导用户聚焦产品核心能力,提升关键信息在页面中的密度与触达效率。

用2个案例,帮你学会B端关键信息的密度提升设计

「信息拆分重组」:在 B 端系统中,信息拆分与重组是依据业务与产品内容对信息进行重新组合,以求达到低跳转、高密度、有效触达的设计目标。

「功能高效聚合」:在 B 端系统中,功能高效聚合是依据业务场景与业务逻辑对产品功能进行重新整合,旨在单位时间、单位面积内的带来更多商业效益/效率提升。


案例一:入库计划-销售计划确认产品


设计方法:信息层拆分与重组。

项目背景:基于对计划方式的调研及整理,结合业务侧对于销售计划确认模块提供参考信息过少、浏览体验较差等问题,对明细表格及其他部分进行整体体验升级。

用户痛点:销售计划确认明细表格的浏览与分析效率低下,导致线上计划确认难。

设计目标:依据业务逻辑对表格信息进行拆分与重组,减少并优化用户眼动轨迹,提升信息展示密度。

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计


案例二:全流程数据概况产品


设计方法:功能高效聚合

项目背景:对全流程进行数据可视化,分环节数据监控,同时展示时效等更多维度数据,便于业务快速定位异常并跟进处理。

用户痛点:用户在产品方案中无法快速获取到履约率相关数据,在一定程度上影响数据分析与决策的效率。

设计目标:依据业务逻辑排布浏览分析全流程数据任务的起点、过程与终点,缩短优化用户眼动轨迹,提升信息触达时效。

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计

用2个案例,帮你学会B端关键信息的密度提升设计


最后


以上就是「关键信息密度提升设计」的全部内容啦~

录入流程设计、任务中断回溯设计已经发布,感兴趣的小伙伴记得阅读收藏哦~后续会为大家带来「场景化设计」等 B 端的设计方法,希望能给正在从事或准备入局 B 端的的小伙伴带来启发,也希望跟大家一起探讨更多的 B 端设计方法。

作者:自转一周的鹿

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



Bs界面设计之七:如何做好B端产品的信息设计?我总结了3个原则!

博博

最近在 12306 网站购票时,弹窗中展示了大段的文字信息,我只是匆匆扫了两眼就果断关闭了,实在没有耐心逐字读完。特别是节日抢票的场景,用户更不会有心情去看这些提示信息。

如何做好B端产品的信息设计?我总结了3个原则!

所以在做产品设计时,需要注重信息的传递效率。B 端产品通常用在 PC 端,屏幕显示区域大,在做设计时会不自觉的添加较多的信息,反而影响了用户的使用体验。今天我们就来讨论下如何做好信息传递?

我总结了以下 3 个原则:

如何做好B端产品的信息设计?我总结了3个原则!


匹配用户心智模型


心智模型指的是人们心中根深蒂固存在的,影响人们认识世界、解释世界、面对世界以及如何采取行动的许多假设、陈见和印象。是一个决定用户信息获取行为的内在的、可预测的认知模型。简单来讲就是人类基于经验的总结,去认知世界。

《About Face4:交互设计精髓》中提出了 3 种模型,实现模型、表现模型、用户的心智模型。好的产品的设计要尽可能匹配用户的心智模型,越符合用户心智模型的设计,产品越容易理解。

如何做好B端产品的信息设计?我总结了3个原则!

B 端产品页面内容变化较少,更强调一致性。主要由表格、表单、按钮等各种信息元素构成。在长期的使用过程中,用户对某些信息元素已经形成了特定的心智模型。例如用户看到输入框,就知道需要填写内容;看到步骤条引导,就知道多步操作;看到 Radio Button,就知道是单选。

因此方案设计时,设计师的一个重要目标就是让表现模型尽可能的匹配用户心理模型,避免因为组件使用不当,造成用户产生错误认知。

例如考虑到用户的视觉动线,“新建”主要、高频按钮通常放在左上角,方便用户浏览和操作,而辅助功能按钮会放置在右侧,用户也逐渐形成了这样的心智模型。

如果主操作按钮放置在右上角则违背了用户的心智模型,用户使用产品时,需要建立新的心智模型,改变已有的行为习惯。并且这种设计并不能带来其他层面的体验提升,个人认为有些得不偿失。

如何做好B端产品的信息设计?我总结了3个原则!


信息的层次性


B 端产品业务比较复杂,页面内容也会较多,信息的有效组织尤其重要。信息设计不是简单的内容堆砌,需要根据用户场景和需求做出优化处理,构建有效的信息的层级帮助用户去理解业务内容。

信息层级包括 2 个方面:

1. 系统空间分层

在一个系统中存在着空间分层,当页面较为复杂时,需要通过合理的内容分层,有序的展现内在逻辑关系。

B 端核心交互就是“增、删、改、查”,其中“查”就是信息的检索和浏览。所以页面主要是由搜索条件和表格构成的。而“增、改”等操作行为主要是在临时的系统空间中完成,例如弹窗、侧边浮窗、跳转页面等形式。

不同的信息在不同系统层级中相对独立的展示出来,保证了信息的层次感和秩序性。

如何做好B端产品的信息设计?我总结了3个原则!

2. 页面信息结构

复杂业务场景下,单个页面会承载大量的信息内容,需要通过合理有序地呈现给用户。主要有 2 种方式进行信息拆解。

如何做好B端产品的信息设计?我总结了3个原则!

1)高效组织——卡片化设计

在 B 端产品中,为了保证功能的完整性,必须要一个页面中展示给用户。逐条平铺,散点式的信息展示会造成信息密度过高,缺少层次性。而卡片方式可以很好的聚类相似信息,分割差异化信息,有助于降低信息的复杂性,帮助用户快速定位信息、浏览内容。

如何做好B端产品的信息设计?我总结了3个原则!

2)化整为零——步骤化设计

面对复杂的信息内容,用户容易产生畏难情绪。将复杂内容分步拆解,把用户的关注点从页面内容转移到步骤进度上,可以减少用户的心理压力。另外节点信息页也可以帮助用户更好的理解业务流程。

如何做好B端产品的信息设计?我总结了3个原则!

另外步骤化设计还可以将散点内容归集到一个任务流程中,引导用户快速完成工作任务。例如 Win11 系统安装后的设置引导,可以方便用户快速完成系统基本配置,避免用户操作的行为成本。

如何做好B端产品的信息设计?我总结了3个原则!

3. 页面元素设计

不同于 C 端产品,B 端产品更强调效率。正如奥卡姆剃刀原则所说“如无必要,勿增实体”。页面内容需要以简洁为主,避免无关要素形成信息干扰。而设计师更加感性,担心设计过于平淡,会在界面中添加各种视觉元素,反而会增加用户的认知成本。

如何做好B端产品的信息设计?我总结了3个原则!


信息的可理解性


B 端产品通常业务具有一定的专业性,用户门槛较高。在复杂业务场景下,必须让用户能够较为清晰的理解产品及功能,才能保证信息的传达效率。

1. 帮助信息

B 端产品需要尽可能地降低用户学习成本,但是本身业务层面的难度是无法避免的。因此需要为用户提供及时有效的帮助信息。

在阿里云、腾讯云界面中包含了大量的解释说明、Tips 等信息,解决用户在使用过程中的疑问,帮助用户更好的理解业务内容,减少用户的记忆量。

同时帮助信息还需要具有拓展性,当提示信息无法完全解决用户疑问时,还需要能够引导用户,查看完整的帮助文档,减少用户翻查资料的成本。

如何做好B端产品的信息设计?我总结了3个原则!

2. 可视化设计

数据可视化设计在 B 端产品中应用较多,例如概览页面,通过图形化的方式将数据的内在关系更直观的表达出来。

在某些特定的场景下,内容页面也可以通过可视化展示帮助用户理解信息,例如常见的身份证图片上传等,很多用户无法分清楚正面反面,借助图片可视化提示,便于用户更好的理解信息。

如何做好B端产品的信息设计?我总结了3个原则!


写在最后


体验设计行业需要创新,但是 B 端产品设计需要更加谨慎。尊重用户的习惯,完整表达业务逻辑性、保证内容的可理解性,是设计师必须去关注的。

作者:子牧先生

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:





Bs界面设计之六:想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

博博

有了解和学习 B 端的同学必然都听说过 SAAS 这个词,这在 B 端行业是个非常重要的产品形式和分支。

虽然它重要,但新手对这东西的理解充满了让人遗憾的扭曲。比如常见的误解式提问,Saas 应该怎么设计?适用哪些设计风格?

所以我从最底层的技术层面,来解析 SAAS 到底是什么,在未来你再也不用担心对这个词汇一知半解,无法正常参与业务讨论了。


想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

在 9 层塔中,SaaS 是完全制作好软件让用户直接上手使用的软件,而 PaaS 和 IaaS 就不一样。

1. PaaS

PaaS 全文 Platform as a Service,是平台即服务的简称。这属于完全技术化的服务,是非程序员的一般用户难以参与到的业务类型了。即服务商提供了基础的 7 层服务,只要用户购买了这些使用权,那么就可以直接在这个基础上编写或安装运行的程序进行使用了。

比如全球最大的开源 CMS 博客程序 WordPress,是由 PHP+MySQL 编写的,如果要创建这样的网站,就可以直接购买符合程序对应环境的服务器,再进行安装部署即可。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

2. IaaS

IaaS 全文 Infrastructure as a Service,就是用户只购买一个完全空白的虚拟主机,类似你购买了一台硬盘格式化后完全空白的虚拟电脑。用户可以自己选择安装什么样的系统,编写什么样的中间件,最后再搭建自己的框架。这适合定自定义要求更高的用户,完全根据自己的需要 DIY 项目的服务器功能。

3. Hosting

Hosting 则是比 IaaS 更进一步的服务,从原本的虚拟服务器升级到了完整的服务器。也就是说,在一些特定业务环境下(比如特殊的数据安全要求),用户需要购买完整的服务器硬件使用权,从原本的合租换成整租。

所以,Hosting 就是服务器托管的意思,用户向一些服务商购买了完整的服务器硬件使用权和联网功能,然后远程进行控制和使用。而商家负责硬件层面运维,防止服务器断电、断网、损坏、过热、故障等一系列硬件问题。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

4. Co-location

九层塔中,我们其实还省略了一个更底层的环节 —— 数据中心。

数据中心是一个物理名词,在今天指的是大规模的服务器数据设备安置和运行的空间。比如苹果的云上贵州,就是典型的数据中心。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

Co-location 的服务也叫场地出租,就是数据中心的商家,把数据中心的物理空间使用权租用给用户,用户自己购买服务器或商家的(不是临时租用)放进去,再借助数据中心的网络和其它基础服务实现服务器的正常运转。

这个概念大家简单理解就可以,我就不多做介绍了。所以,九层塔中包揽了不同层级数量的技术,就可以形成不同的服务,每一级服务有各自的优缺点,是由项目的实际情况决定的。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

相信看完前面的介绍大家已经知道,SaaS 等服务是建立在联网的基础之上的,也就是说,除了可以独立运行在你客户端里的本地软件,还包含更多需要联网的软件,或者干脆运行在远程服务器主机上的软件。

这是一个发展的过程……

最早的软件安装是我们到软件店里购买软盘、光盘,回到家里的电脑安装,这些软件往往只在本地运行,是不需要联网的孤岛。随着互联网行业的发展,孤岛渐渐被消除,联网上传和获取数据越来越普及,甚至,软件都不需要再下载和安装,直接用浏览器就可以访问使用。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这种模式,就催生了软件的开发维护与服务器、网络的硬件运行进行了分工,一般的产品开发团队专注在软件应用层面的开发工作,而把网络、远程服务交给其它商家,并付费购买。这样不仅带来更高的效率,而且降低了各自的成本,实现了多方的共赢。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,我们再来理解云服务这个词就很容易了,云就是网络,云服务就是基于联网实现的各种软硬件服务的总和。除了远程的虚拟机、中间件、数据库外,还有远程计算、渲染、CND 加速、直播分流等等。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

这也是为什么云服务会成为互联网发展的基础,因为它实在太重要了,几乎所有互联网公司都无法脱离云服务带来的支持。这也是为什么各个大厂纷纷投入云服务的赛道中,因为这是互联网的基建和命脉之一,拥有非常广阔的前景与市场。而在马太效应强者越强的现实环境下,头部的厂商拥有更好的机群、技术、人员,可以大幅度降低运作成本,提供更优质但价格更低廉的服务。

虽然云服务在今天不可或缺,价格也越来越有优势。但是,并不是所有企业都一定要选择购买外部的云服务,这就是我们要理解的另一个课题 —— 私有化部署。云服务再怎么便捷,也有一个缺陷,那就是数据是存储在别的商家、企业的服务器中,有一定的数据安全隐患。虽然数据安全是云服务的最基本保障,但很多对数据隐私、安全极度重视的企业,是不愿意承担任何外部风险的。所以他们就会通过自建本地服务器(私有云)的方式,实现从网络、硬件到软件全局私有化的部署。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

也就是说,服务器机房是自己公司的,网络是自己迁进机房的,服务器自己买的,环境、虚拟化、数据库自己搭建的,后端程序也是自己写的,最后电脑手机上运行的客户端,是连接这些服务器的。

哦对了,当然这些硬件日常的维护也要由自己公司的运维负责……

这样的成本高嘛?非常高。但类似国企、银行、证券、国防、政府机关等机构,对数据的安全性是异乎寻常的执着的,他们是有足够的动力划出预算来确保数据的私密与安全,用来运行自己内部的 B 端系统。这也是为什么这些机构从一开始就拒绝使用 Figma 这种公有云端软件,尤其是服务器在国外的。

再问下一个问题,私有化部署,就意味着这个环节中所有步骤全是自己搞定嘛?当然不可能,因为应用这个层面,有时候不是想开发就开发得出来,或者成本实在超出了预算。因为私有化的主要目标是数据安全,但不是应用的工具一定得个性化定制。

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

比如在即时设计官网的价格页面,就可以看到 “私有部署” 这个选项。它的实际作用,就是允许客户在自己的服务器上安装它,让内部的员工使用设计软件时是同步到公司指定的服务器而不是官方的公共服务器中,满足客户的数据隐私需求。

注:这例子大家讨论最多适合理解,非恰饭

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

想做B端还不懂什么是SAAS?一篇最专业的扫盲科普(下)

所以,了解完上面的概念,你也就大概能明白什么是云服务,什么是私有化。如果需要在工作中碰到更细节的名词还是概念,可以再进一步做理解。


结尾


关于 SaaS、PaaS、IaaS、云服务、私有化部署的扫盲,就先解释到这里。希望大家看完以后对 B 端行业一些最基本的产品概念能有一定的认识。

作者:酸梅干超人

转载请注明:优设网

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

魏华的微信.png

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

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

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



更多精彩文章:



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档