B端产品原型设计如何摆脱简陋感？本文以客户关系管理系统为例，系统拆解导航框架、列表页与详情页的设计范式。从1920*1080画布设置到皇家蓝导航栏配色，从顶部菜单区规划到面包屑导航设计，手把手教你打造兼具视觉质量与操作逻辑的专业后台原型。

“思想与理论”系列文章目前已发布5篇，并将持续更新。从本篇开始，我们将进入 “方法与实践” 系列。本系列聚焦于真实业务场景中的设计方法论总结与实战案例剖析，旨在提供具体、可操作的经验参考。

首篇文章，我们将探讨 B端产品原型设计的基础范式。其中的经验主要来自于我个人多年设计经验的总结。

在B端产品设计中，管理后台的原型设计是最高频的需求。那么，如何设计才能让原型摆脱“简陋感”，具备良好的视觉质量和操作逻辑呢？本文将以一个客户关系管理系统为例，系统阐述导航框架、一级页面（列表页）和二级页面（详情页） 的核心设计范式。

一、导航框架：构建清晰的系统骨架

一个结构清晰、空间利用率高的导航是后台系统的基石。

1. 效果预览

下图展示了一个推荐的导航框架布局：

2. 实现步骤拆解

步骤1：确定画布。选择 1920 * 1080 的标准尺寸作为设计界面。

步骤2：铺设底色。为整个画布铺设浅灰色背景（如 #F6F6F6），奠定简洁、专业的基调。

步骤3：布局顶部导航。放置一个高度为64px（行业常见规范）的顶部导航栏，将页面进行初步分区。导航栏颜色可选用沉稳的皇家蓝（#2980b9）。

步骤4：规划顶部区域内容。

• 左侧：放置公司Logo与系统名称。
• 中间：作为一级菜单区，按大的业务场景进行划分。
• 右侧：放置用户头像、用户名及功能下拉按钮。
• 注意：左右两侧建议预留约12px的边距，保持视觉呼吸感。

步骤5：构建主体内容区。顶部导航下方区域分为两部分：

• 左侧：放置树形结构导航，作为二级/三级菜单的容器（若无下级菜单可省略）。
• 右侧：核心内容展示区。此处强烈建议增加页签（Tabs）导航，以便支持多页面快速切换与并行操作，极大提升操作效率。

3. 设计思路解析

此布局的关键在于充分利用顶部导航区域承载一级菜单。许多系统为了追求极致简洁，常将顶部区域留白，但这可能导致两个问题：1）空间浪费；2）所有菜单项被迫堆叠在左侧导航栏，造成层级复杂、信息过载，用户寻找功能困难。将一级菜单置于顶部，实际上是按核心业务场景对系统功能进行了一次清晰的一级归类，能有效减轻侧边栏的认知负担。

二、一级页面（列表页）：标准化与效率的体现

管理后台的一级页面多为列表页，其核心目标是信息的高效检索与管理。一个标准的列表页通常包含以下四个部分：

1.查询区域：支持条件展开/收起。默认收起时，仅展示最常用的3个查询条件，以保持界面整洁；在需要复杂筛选时可展开更多选项。

2.操作栏：

• 必备操作：“新增”按钮不可或缺。
• 批量操作：“导入”（批量新增）与“删除”（批量删除）是此区域的常客。“导出”功能则用于导出当前查询结果下的所有数据。
• 避坑建议：不建议将“编辑”置于此处，因为不存在“批量编辑”场景。单条数据的编辑，通过表格行内的操作列完成更为直接。

3.表格部分：

• 支持复选框，用于批量操作。
• 展示当前页序号，方便定位。
• 最后一列为操作列，至少应包含对该条数据的“查看”、“编辑”、“删除”等核心操作。

4.分页部分：采用标准分页组件即可，无需过度设计。

三、二级页面（详情页）：明确上下文与操作路径

当需要展示或处理大量字段信息时（如查看客户详情），使用二级页面比弹窗更合适。它能提供更专注的浏览和操作空间。

此页面的设计重点在于顶部的内容导航区，它解决了用户的三个核心疑问：

1.“我从哪里来？”：明确的“返回”按钮，确保用户能一键退回至来源的列表页。

2.“我在看什么？”：返回按钮后紧跟本页标题（如“中国电信集团有限公司”），清晰定义当前内容。

3.“我在哪？”：标题下方的面包屑导航，清晰展示用户在整体信息架构中的位置（例如：客户档案 > 详情）。

通过这“三位一体”的导航设计，能有效消除用户在深度页面中的迷失感，确保操作路径的流畅与清晰。

四、结语

以上就是B端产品原型设计基础范式的经验分享，掌握这些基础，我们便构建了一个坚实、可扩展的基础框架。在“方法与实践”的下一篇文章中，我们将在此基础上，深入探讨更复杂的交互场景与“进阶”技巧。