用户体验

初识B端产品和C端产品

明修栈道B暗度陈仓C

在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。

而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。

虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。

B端和C端产品的区别

在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。

「从使用者的角度来说：」

• C 端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；
• B 端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么；

「从开发的角度来说：」

• C端周期短，B端周期长；
• C端用户多，B端用户少；
• C端逻辑简单，B端逻辑复杂；
• C端竞品较多，B端竞品较少；
• C端主战场是移动端，B端则是 PC 端；
• C端是用户体验驱动，B端是解决问题驱动；
• C端产品的使用决策权在用户手中，而B端产品的使用决策权则在客户手中（B端客户不一定是用户）；
• C端产品除了产品的体验以外，也要让产品更美观，让活动更有趣，让用户更舒服，产品经理有很强的同理心。B端产品的实用性大于美观性，能切实解决问题、配置资源的 B 端产品才是一个好的 B 端产品，产品经理要具有更强的逻辑思维能力。

布局

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 19201080、1366768、1440900，以 *1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440900，按照栅格系统原则向上或向下适配。展示型页面以 1440900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

栅格

已Ant Design为例， 采用 24 栅格体系。以上下布局的结构为例，对内容区域进行 24 栅格的划分设置，如下图所示。我们为页面中栅格的 Gutter 设定了定值，即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

对开发者而言栅格是实现动态布局的手段，而设计师对于栅格的理解源自平面设计中的栅格。在具体落地中视角的不同就容易造成偏差，最终影响还原度，继而增加沟通成本。
Ant Design 的设计师通过 4 点来实现设计过程中和工程师的沟通：

1. 清晰的定义动态布局范围
2. 尽量保持偶数思维
3. 关键数据的交付（Gutter、Column）
4. 区块的定义要从 column 开始到 column 结束

   常用模度

   蚂蚁中后台涵盖了大量的不同类型和量级的产品，为了帮助不同设计能力的设计者们在界面布局上的一致性和韵律感，统一设计到开发的布局语言，减少还原损耗，Ant Design 提出了 UI 模度的概念。在大量的实践中，我们提取了一组可以用于 UI 布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感。经过验证，可以在一定程度上帮助我们更快更好的实现布局空间上的设计决策。
   
   
   

   常见后台场景

   我们的后台使用内容有比较频繁的表单、表格。今天先重点讲讲表格。

   表格

   既是一种可视化交流模式，又是一种组织整理数据的手段。一般来说，由行、列分割而成的单元格是构成表格的基本元素。表格的行、列之间相互独立又相互关联，充满变化。行与列形成了单元格的长与高，不同的长高有着疏密之别，进而使表格产生充实或透气之感。

   用途

   表格是常见的信息组织手段，是web页面布局的重要组成部分，可用于保存和展示少量或大量结构化、静态化及处于变化中的数据。大量使用表格，这可能是效率最高的信息展示方式了。表格可以高效组织信息和数据，让用户方便阅览、对比和分析。

具体说来，表格结构简单，分隔明确，可保证信息可读性，易于用户快速扫描浏览并获取内容；

• 视觉方面，数据经过归纳整理和合理布局后，更易于用户感知及分辨其中的关联与区别，并进行对比分析；
• 交互方面，用户可以对数据信息进行排序、搜索、筛选、分析、分类等相关业务的复杂操作。

  视觉标准

  有效、友好的视觉标准，可以提升整个表格的体验。

填充与边距
合适的填充和边距对于视觉设计至关重要，既包括保证数据单元格之间的留白，又包括单元格内部留白，以保证易读性。当创建表格设计规范并严格遵循后，团队在执行其它项目时，都可以创建视觉一致的表。

对齐方式
合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐能够很好的形成视觉引导线。通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。

可以遵循3条半对齐原则：

1. 数字应该右对齐
2. 文字信息左对齐
3. 表头与数据对齐
4. 不要使用居中对齐

数字是从右向左读的——这是因为我们对比数字时，首先看个位，然后十位、百位。当个位数值对齐时，我们就可以快速查看前面的数值，比较多个数据的大小。因此，表格的数字应当右对齐。因为我们阅读文字信息是从左向右读，所以不采用左对齐，会降低浏览文字的效率。

表头应当同数据的对齐方式一致，这能保持表格竖直方向整洁，营造一致性。
居中对齐会导致表格的行参差不齐，浏览数据会更难，常常需要额外的分隔物。固定的内容居中对齐，如状态文字(成功，失败等)，这样的话信息呈现会更加突出，并能节省表格空间。
跨列合并单元格时，内容顶对齐。多行的数据表，用户从上往下阅读时往往搞不清楚对应的数据列内容。
跨行合并时，灵活处理，一般指多级表头，采用居中对齐，相应的未合并的表头页签也要居中对齐。如：日期之类的数字应采用始终相同的长度进行格式化，如：2020/07/19而不是2020/7/19。

合适的行高
行高是非常重要的参数，直接影响着阅读体验。
较小的行高承载更多信息，让用户无需滚动鼠标即可看到更多数据，但会降低扫描效果，导致视觉解析错误。适宜的行高使得数据更易于被阅读，但这不代表行高越大越利于阅读。
行高的大小应该是与字体成比例的，在单行文字的情况下表格间距一般在字符大小的三倍以内。

设置行高的原则：

• 单行数据显示时，数据显示紧凑、有序。
• 多行数据显示时，弱化表格形式，提供丰富的视觉展现。

因此对于单行显示的表格，建议行高为字体高度的2.5倍到3倍；对于多行显示的表格，建议内容区到上下边框的距离略小于文字高度。当然，也可以提供切换按钮让用户自己控制显示密度。