B端产品分类

产品定位公式

产品定位 = 目标客户 + 差异化的价值

例：淘宝 =「让天下没有难做的生意」提供平台与公域流量；有赞 =「帮助商家成功」提供工具与私域营销玩法。

五大趋势重塑B端设计

1. 流量竞争加剧 → 运营效率成为核心竞争力，B端产品对企业管理效率的杠杆作用凸显
2. 线下业务渗透加深 → 线上线下的边界越来越模糊，B端产品需要打通全渠道数据
3. 业务模式越来越重 → 简单的工具不再够用，一体化解决方案（ERP+CRM+BI）成为主流
4. 产业互联网兴起 → 垂直行业的B端产品需求爆发（教育、医疗、物流、制造）
5. AI重塑B端体验 → 从智能表单填充到自动化报表生成，AIGC正在改变B端设计范式

米勒定律（7±2法则）

人类工作记忆一次只能处理 7±2 个信息块。应用：一级导航 ≤7 项、表格列数 7±2、面包屑 ≤5 级、图表数 5-9 个/页、标签页首屏 5-7 个。

席克定律（Hick's Law）

选择越多，决策时间越长。应用：宽而浅的信息架构优于窄而深、提供默认视图减少决策负担、选项过多时用搜索+筛选。

菲茨定律（Fitts's Law）

到达目标的时间取决于目标大小和距离。应用：主按钮放大、高频操作放左侧+顶部、导航项高度 ≥32px、批量操作按钮足够大。

古腾堡原则（Gutenberg Diagram）

用户视线从左上到右下均匀流动。应用：顶部导航符合阅读动线、弹窗底部「取消→确认」右对齐、主按钮放在视线终点方向。

渐进式披露（Progressive Disclosure）

初始只展示核心字段，用户操作触发新字段出现。应用：表单按需展开、筛选项默认折叠低频项、详情页用折叠面板收纳次要信息。

设计不能凭感觉——B端设计的量化验证

B端用户研究特点

三种研究路径

四种核心研究方法

NPS 净推荐值

一个问题的调研——「你有多大可能向同事/朋友推荐这个产品？」1-10 分选择。计算方式：推荐者（9-10分）占比 − 贬损者（0-6分）占比。

NPS 是 B 端产品最常用的满意度指标，简单、可对标行业基准。

深度用户访谈完整流程

角色画像（Persona）

B 端需要区分两种画像：

角色画像的构建要素

用户画像在B端的作用

• 统一团队认知——产品、设计、开发、运营对目标用户达成一致理解
• 指导设计决策——当功能有争议时，回归画像：这个角色的核心目标是什么？
• 确定功能优先级——为谁设计？解决什么问题？画像帮你做减法
• 辅助沟通汇报——向业务方或老板解释设计决策时，画像是最有力的证据

用户旅程图（User Journey Map）

用可视化方式呈现用户完成某个任务的完整过程——从起点到终点，包含行为、触点、情绪、痛点。

业务泳道图（Swimlane Diagram）

梳理多角色协作流程的核心工具。横向为流程步骤，纵向为角色/部门，清晰呈现谁在什么阶段做什么。

适用场景：跨部门审批流程、订单履约流程、客户服务流程——任何涉及 2 个以上角色协作的场景。

MVP 流程梳理

MVP（Minimum Viable Product）= 最小可行产品。梳理核心业务流程 MVP 的目的是：先保证主干流程跑通，再逐步补齐分支场景。

1. 确定核心用户角色和目标
2. 绘制主干流程图（只包含必经步骤）
3. 识别每个步骤的信息输入和决策输出
4. 标注异常分支（但不阻塞主干）
5. 验证流程闭环——每个起点都有终点

框架总览：两个层面，七个维度

一、业务闭环

设计必须支撑核心商业流程的完整运转，确保业务目标达成。这是B端产品的立身之本——功能可以不够多，但主线流程绝不能断。

检验方法：对照用户旅程图，逐节点检查每个触点是否有对应的功能支持。任一触点缺失 = 业务不闭环。

二、安全可信

建立用户对产品的信任感，保障数据隐私与系统稳健。企业级产品的生命线——B端数据涉及核心业务，安全问题的代价远高于C端。

三、效率至上

追求用户完成任务的速度与流畅度，最大化投入产出比。B端用户每天重复操作数百次，每一步的节省都会放大成显著的效率提升。

四、认知减负

主动简化信息结构，降低用户的记忆与理解负荷。用户不需要思考和推理，凭直觉就能理解当前发生了什么。

核心检验：新用户不经过培训，能否在 30 秒内理解当前页面的主要功能和自己的位置？

五、视觉秩序

通过规则和一致性，构建清晰、稳定、专业的视觉界面。视觉一致性不只是「好看」——它让用户在一个模块学会的操作模式，能无缝迁移到其他模块。

六、及时相助

在用户卡点前、中、后提供精准的引导与帮助，防患于未然。好的帮助设计让用户甚至意识不到自己在「被帮助」。

七、体验升华

超越工具属性，为用户创造惊喜、愉悦与专业成就感。这是七维度中的最高层次——不是锦上添花，而是从「能用」到「好用」再到「想用」的关键。

实战案例：用七大维度审视「批量导入数据」功能

如何让这七个维度「为我所用」？

1. 动态调整，形成专属清单——这是通用起点，请根据你的行业特性（电商后台/CRM/SaaS）和产品阶段，补充具体问题和解决方案，迭代出你自己的「超级自查清单」
2. 融入流程，而非最后检查——设计初期聚焦「业务闭环」「安全可信」对齐业务边界；方案深化期重点检查「效率至上」「认知减负」「视觉秩序」；评审前夕完整自查一轮
3. 关联原则，系统性思考——维度之间不是孤立的。为了「效率至上」增加的快捷功能可能增加新用户的认知负担，此时需要「及时相助」平衡。像指挥官一样灵活调遣它们

终极目标：通过反复练习，将这些维度内化于心，达到「手中无剑，剑在心中」的境界。

七维度速查表

9色阶定义法（标准色 + 黑白透明法）

Ant Design 和 Arco Design 均采用此思路。进阶：品牌色彩系统建议使用 HSL 或 Lab 色彩空间以获得更均匀的视觉梯度。

功能色

功能色遵循国际通用语义，降低跨文化认知成本：

中性色与文字色

黑带点蓝色色相更显纯粹（如 #1F2329），纯黑 #000 反而显得沉闷。

字体选择

推荐 Font Stack：-apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif

Web端字号体系（PC后台）

字重与行高规范

B端产品通常不超过3种字重：Regular(400)正文 / Medium(500)标题 / Semibold(600)重要强调。

8px网格系统

B端设计系统普遍采用8px基础网格（Ant Design、Arco Design、Material Design）。为什么是8px？大多数屏幕尺寸可被8整除；8的倍数同时是4和2的倍数，灵活性高。

常用间距序列：4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 56 / 64

格式塔接近原则的间距应用

24栅格系统

B端设计普遍采用24栅格（Ant Design引领）。可被整除的列数：1 / 2 / 3 / 4 / 6 / 8 / 12 / 24，覆盖从1栏到4栏的几乎所有常用布局。

按钮尺寸规范

按钮六态模型

任何交互组件理论上都应覆盖这六个状态：

视觉权重层级

品牌色填充+白字 > 品牌色边框+品牌色字 > 灰度边框+灰度字 > 纯文字按钮

图标尺寸体系

原则：绘制大小 = 显示大小 − 4px（预留内边距）。风格统一（全系统统一线型/面型）、视觉均衡、可识别性优先。

三层投影体系（Z轴空间层级）

投影颜色统一使用#4D6CA0（带蓝色色相的深灰），比纯黑阴影更自然。B端产品中投影应克制使用。

Z轴空间分层模型

三种全局导航对比

局部导航速查

组件选型速查

表单设计核心原则

后台产品的本质 = 数据的增、删、改、查。增、改、查都可以用表单完成。

表格——B端最重要的组件

表格被公认为展现结构化数据最为清晰、高效的形式。

表格关键规范一览

空状态设计

空状态是数据展示中最容易被忽略但最常见的状态：

反馈强度金字塔

按照对用户的打扰程度，从弱到强：用最低的打扰强度完成反馈目标。

弹窗设计五条黄金法则

1. 使用前判断：是否有使用弹窗的必要？（替代：气泡卡片、抽屉、新页面）
2. 不超过两种操作选项：一般是「主操作 + 取消」或「确认 + 取消」
3. 信息量过大用页面承载：超过960px弹窗 → 考虑抽屉或新页面
4. 避免弹窗叠弹窗：体验极差
5. 必须叠加时：二级弹窗复杂度应低于一级（形式从「大」到「小」）

弹窗 vs 抽屉：如何选择？

Token层级架构

Token命名规范

推荐采用 命名空间-类别-属性-修饰符 结构：

{namespace}-{category}-{property}-{modifier}
例：color-bg-container-hover / spacing-md / font-size-heading-lg

WCAG 2.1 核心对比度要求

B端无障碍检查清单

• 颜色不是传达信息的唯一手段（关键数据同时使用颜色+形状/纹理/标签）
• 弹窗打开时焦点自动移入，关闭后焦点回到触发元素
• 所有表单输入有明确的≶label>关联
• 表格使用正确的≶th scope>标记表头
• 弹窗使用 role="dialog" + aria-modal="true"
• 通知类反馈使用 aria-live 区域
• 面包屑使用 ≶nav aria-label="Breadcrumb">
• 支持完整键盘导航（Tab/Shift+Tab/Enter/Esc）
• 1/12男性是红绿色盲——避免红绿相邻对比
• 推荐使用ColorBrewer配色方案做数据可视化

数据过滤三种形式

筛选项太多如何排列？（渐进式展示）

1. 信息排序：用户目标优先于业务逻辑（最常用的放前面）
2. 默认折叠低频项：依据数据埋点确定
3. 全部低频 → 高级筛选：弹窗承载，入口显示「+N项筛选」
4. 多角色场景：自定义筛选配置，每个角色保存自己的筛选视图

数据操作分类与位置

查看详情：承载方式选择

表单设计的三大目标

交互方式选择（从亲密度低到高）

提升表单易用性的五大策略

表单页的体验衡量

两类用户，两种工作台

工作台构成的六大要素

角色化工作台

不同角色看到的工作台应不同——CEO看全公司KPI、部门经理看团队进度、一线员工看待办任务。在SAP、Salesforce、钉钉等成熟产品中，工作台都是按角色差异化的。

典型详情页分区

OKR驱动详情页优化

O：提升详情页的信息查找效率

KR1：合理的信息架构和布局 → 用户5秒内找到目标信息

KR2：高效的操作路径 → 从查看到编辑的步骤 ≤2步

KR3：清晰直观的视觉表现 → 信息层级一眼可辨

三种看板类型

任务看板设计要点

• 状态列数：2-4列全部展示；5-7列+横向滚动；>7列合并或折叠
• 卡片信息：标题（必选）+ 1-2个关键属性 + 状态标签。其余放详情
• 拖拽反馈：放置目标高亮、卡片阴影跟随、松手后平滑动画
• 辅助功能：搜索、筛选、排序、多视图切换（表格/看板/列表）

预注意属性（Pre-attentive Attributes）

人类大脑在200-250ms内就能自动处理的视觉特征：

这就是为什么「柱状图比饼图更容易读取数值差异」——长度是更精确的预注意属性。

数据-墨水比（Edward Tufte）

「Above all else, show the data.」——最大化数据墨水，最小化非数据墨水。

• 去除背景、厚重网格线、冗余标签
• 弱化或移除坐标轴线（保留刻度即可）
• 直接标注数据点，而非依赖右侧图例
• 3D效果几乎永远不需要——它扭曲数据比例

图表绘制五原则

1. 大小一致：同级别图表保持相同尺寸
2. 线条粗细、圆角一致：粗线+直角→严谨硬朗（金融/工业）；细线+圆角→亲和圆润（消费/创意）
3. 风格一致：线条型/面型/微扁平——全页统一
4. 复杂度一致：每张图表信息密度相当
5. 表意合适、具备识别度：不被误解的图表才是好图表

仪表盘设计六大法则

设计系统的核心价值

设计系统搭建步骤

Design Token 打通设计到代码

Token是设计师和开发者的共同语言。设计师在Figma中定义Token → 导出为JSON → 开发导入项目 → 代码中引用Token变量。一次修改，两端同步。

设计交付清单

• 完整的页面设计稿（含所有状态：默认、悬停、激活、禁用、加载、空、错误）
• 标注稿/设计标注工具（间距、字号、颜色Token引用）
• 交互说明文档（流转逻辑、异常状态、边界条件）
• 组件变体说明（每个组件的所有变体和适用场景）
• 响应式断点与适配策略
• 动效参数（时长、缓动函数、触发条件）

多语言设计四大核心影响

B端产品国际化策略

• 布局采用弹性设计：Flexbox/Grid布局 → 内容自然适配不同语言长度
• 图标代替文字：全局通用的图标语义，减少翻译工作量
• 日期/时间/货币格式化：使用国际化库（如Intl）自动按locale格式化
• 预留30%扩展空间：所有UI文案位置预留充足空间
• 时区处理：明确所有时间戳的显示时区（用户本地时区 vs 系统时区）

B端设计质量评估框架

数据周期建议

• 改版前后对比：新版上线后至少等2-4周再分析——用户需要适应期
• A/B测试：确保样本量足够大，测试周期至少覆盖一个完整业务周期
• 定期审计：每季度进行一次设计走查，检查规范执行情况
• 持续跟踪：建立设计度量看板，长期监测趋势

AIGC在B端设计的六大应用场景

启动新项目时

• 明确产品定位：目标客户是谁？差异化价值是什么？
• 梳理核心用户角色（使用者/决策者/购买者）及其目标
• 了解业务流程和关键指标
• 确定技术约束（B/S还是C/S？私有化还是云部署？）
• 调研竞品和行业最佳实践

设计规范建立时

• 定义Design Token（Global → Semantic → Component三层）
• 建立色彩系统（主色+功能色+中性色+拓展色9阶）
• 确定字体体系（字号×字重×行高矩阵）
• 确定间距体系（8px网格+接近原则分层）
• 确定栅格系统（24栏+固定版心+空白自适应）
• 覆盖组件六态模型（Normal/Hover/Active/Disabled/Loading/Focus）

页面设计时

• 信息架构是否合理？（宽而浅 > 窄而深）
• 导航选型是否正确？（≤5项且<2级→顶部；>5项→侧边；多产品线→混合）
• 空状态、加载态、错误态是否都已设计？
• 操作按钮位置和层级是否正确？
• 表格列数是否在7±2范围内？
• 弹窗/抽屉选择是否合理？
• 是否有无障碍问题？（对比度、键盘导航、屏幕阅读器）

上线前

• 所有交互状态是否覆盖完整？
• 错误提示是否具体有用（非「正确的废话」）？
• 是否设置了数据埋点（任务完成率、操作时长）？
• 是否制定了数据收集周期（至少2-4周）？
• 多语言/国际化是否考虑了字符扩展空间？
• 移动端适配是否已测试？