多电商平台订单统一管理系统
UI组件 / B端视觉 2020
管理后台常常要容纳大量表格、表单和状态。我想探索的是：当页面从商品切换到订单，再切换到售后时，怎样让它们既有各自的重点，又让人一眼看出属于同一套系统。
这是我在 2020 年业余时间参加墨刀 UI 组件赛事的投稿作品。我借用多平台订单管理的场景，练习桌面端布局、信息层级和组件组合。页面中的字段与数值服务于视觉展示；这篇案例更想聊聊，我如何用有限的基础元素搭建一组有秩序的后台界面。
我没有把每个模块当作独立页面来画，而是先归纳反复出现的结构：用摘要建立概览，用列表组织比较，用表单承接输入，再用详情展开信息。这个顺序让我能把时间花在层级与组合关系上，也给整组页面留下一致的阅读节奏。
| 页面类型 | 主要信息 | 我的排版重点 | 可复用的基础 |
|---|---|---|---|
| 商品管理 | 图片、名称、属性与状态 | 固定图片与文字的对应位置，形成稳定行高 | 商品单元、状态标签、操作列 |
| 入库与订单 | 单号、阶段、数量与明细 | 摘要先行，明细按组展开 | 筛选区、数据表格、步骤条 |
| 结算与售后 | 汇总数值、记录与关联信息 | 用字号和间距区分概况与具体记录 | 指标卡、信息组、详情布局 |
| 分类与角色 | 父子关系与选择范围 | 用缩进、行距和选中态表达层级 | 树节点、复选框、局部表单 |
在概览页，我把趋势图和数字摘要组合成大小不同的信息面。大图承载连续变化，小卡片承载一个可以快速扫到的数值。它们在边距、标题位置和底色上保持联系，读起来就不会像几块临时拼上的看板。
我用上方趋势图、侧边数字摘要和下方状态卡片构成概览的阅读顺序。标题、日期筛选和明细入口各有位置，大面积内容区与小卡片互相呼应。这一页主要展示的是图表与卡片的组合方式，以及高密度信息里的轻重关系。
商品页面是我练习表单系统的一部分。我把资料、属性、物流和图片分别组织成组，用小标题和纵向留白控制阅读节奏。与其给每个字段加装饰，我更愿意先把标签、输入框和说明的对齐关系处理好。
我让商品图片、名称、属性与状态共同组成一个行单元，上方再放状态页签和搜索筛选。图片提供识别点，文字沿列对齐，操作收在右侧。比起增加更多边框，我更看重列宽、行距与文字层级形成的秩序。
我把长表单拆成基本资料、商品属性、物流、销售范围和图片等区域。小标题承担分区，单位和必填标记贴近控件，图片区用不同尺度呈现主图与补充内容。这里想表达的是一套表单组件如何应对不同信息形态。
我让查看页沿用编辑页的分组次序，再通过文本、标签和图片组合呈现内容。输入框减少之后，标题与留白就成为主要的层级工具。两种状态共享信息骨架，视觉上既有联系，也有清楚的区别。
分类树承担整体结构，小弹窗承接局部编辑。我喜欢这种尺度上的对比：背景保留完整目录，前景只聚焦少量字段。用户能看见自己正在改哪一部分，页面也不需要为一个小动作展开很大的操作面。
我用缩进和展开控件表达父子关系，让排序、启用状态和操作沿固定列排列。层级发生在横向缩进里，信息比较仍然沿纵向进行；树形结构和表格对齐可以同时成立。
弹窗把名称、排序与描述集中在一个轻量操作面里，我用较紧凑的字段间距保持连续阅读，再用底部留白区分正文与按钮。它与背景的分类树保持尺度差异，也沿用了全局表单的对齐方式。
创建入库单在这里也是一次组件组合练习：选择控件建立起点，表单组织运输信息，商品选择器承接批量内容，底部操作区收拢提交动作。我希望几个区域的视觉重量跟随填写顺序变化。
我把数字摘要、状态页签和单据列表分成三层：先看到概况，再选择范围，最后读具体记录。每层使用不同的视觉密度，但标题位置与容器边距保持统一，让内容多的页面仍然有节奏。
这张创建页把仓库、运输资料与商品区域依次展开。我让基础字段保持紧凑，把更宽的空间留给商品明细，再以底部主按钮收尾。控件尺寸统一，分组之间用距离表达关系。
我在弹窗里保留分类、搜索和商品列表，让选择器也拥有完整的小型布局。图片与规格放在一起，复选框沿列排列，底部操作与列表保持清楚的距离。它可以看作表格、树和按钮三组组件的一次组合。
我把单号与状态放在详情开头，后面依次组织供应商、仓库、运输和商品信息。上方摘要更紧凑，下方明细更宽，页面在阅读过程中逐步展开。这样的布局也能与其他单据详情形成家族感。
库存页用多个数量列形成横向比较，仓库筛选则位于表格之前。我关注数字的对齐、列间距离和表头层级，让不同类型的信息在一行内清楚分开。这张页面是数据密度与留白之间的一次平衡。
订单列表中有许多长度不同的编号和文本。我更关注它们如何共处一行：状态与主要标识先被看见，补充信息退到次级层，行内动作保持固定位置。统一骨架之后，不同模块可以通过内容和列宽形成各自的节奏。
销售订单使用和其他列表相近的骨架：上方状态入口，中间检索条件，下方明细。较长的编号与商品信息占据主要阅读区，状态和操作保持固定位置。我希望跨模块切换时，视线能够沿用熟悉的扫描方式。
我把模板下载、文件选择和已选文件分别组织在弹窗内，再用一组主次按钮结束操作。文件名和状态采用相近的行式布局，延续列表组件的节奏。轻量弹窗也可以拥有清楚的信息层级。
我让步骤条成为详情页的开场，再向下展开基本信息、商品、收货和物流。节点之间的连接负责表达顺序，正文分组负责展开内容。它与列表页形成一快一慢的阅读节奏。
创建订单页把联系人、商品和发货资料拆成几个相邻区域。商品选择与数量编辑放在同一组，长表单通过标题、间距和对齐保持连续。我希望它在信息丰富的同时，仍然保留明确的视觉起点和结束位置。
订单导入让我有机会把文件类组件放进这套系统。我把模板入口、文件选择和已选列表看成三个层次，再用主次按钮结束操作。下面整理的是我对这类弹窗的组织思路，重点是让每个区域都有清楚的职责。
我把状态表达拆成三个尺度：列表里的短标签适合扫描，概览里的数字摘要适合比较，详情里的步骤条适合建立顺序。它们可以共享颜色和文字规则，但在版面中承担的角色并不一样。
| 组件情境 | 页面中的表达 | 我的视觉取舍 |
|---|---|---|
| 列表行 | 简短状态与行内操作 | 让标签宽度和位置稳定，减少扫读时的跳动 |
| 概览区 | 数值与状态名称组合 | 放大数字，标题保持克制，卡片之间统一留白 |
| 详情页 | 阶段、节点与时间排列 | 突出当前位置，用连接关系建立阅读方向 |
| 筛选区 | 状态页签与数量 | 选中态明确，未选项保持较低视觉强度 |
| 提示区 | 状态文字与辅助色 | 用文字说明内容，让颜色负责快速定位 |
结算和售后使用不同的信息，但我仍让它们共享摘要、筛选、列表和详情这几种基本结构。这样做的好处，是整套系统的变化来自内容本身，不必靠每页换一套颜色或卡片造型来区分。
我用数字摘要呈现整体量级，再用下方表格承接细项。摘要里的数字比标题更醒目，列表里的时间、类型与状态保持规律排列。相同内容以不同尺度出现，让概览和明细形成层级。
售后页延续状态筛选与列表的组合，并将订单和退款信息放在相邻列中。我更关注多组标签如何共处一行：用位置和文字建立区分，用颜色做辅助，保持整张表格的安静感。
我在退款详情里延续步骤条、基本资料和商品信息组的布局，让它与订单详情自然关联。模块内容可以变化，但标题级别、分组边距和标签样式保持相近，整套后台就有了稳定的骨架。
我把这一组页面理解为从“横向比较”到“纵向阅读”的转换。列表强调对齐和一致行高，详情强调分组与留白，回到关联记录时再恢复列表节奏。统一感来自结构之间的呼应。
我想验证的不是一套组件能覆盖多少真实业务，而是同一套视觉规则能延展到多少信息形态。图表需要标题、图例和数值的秩序；权限树需要缩进、选择态和节点间距。它们的外观不同，但都能沿用相近的对齐与层级规则。
评价页将图表放在上方，记录列表放在下方。图形适合概括分布，表格适合逐条阅读；我让两者共享标题与内容边距，再通过尺度差异区分重点。这里展示的是图表组件与列表组件如何在同一页协作。
我用多级缩进和复选状态组织权限树，菜单、子项与具体功能形成逐层展开的结构。节点间距、选中样式和数量提示共同建立层级，让树形组件也遵循整套系统的对齐与重复规则。
做完这组页面，我更愿意从细节理解组件复用：标签离控件多远，表头与正文怎样区分，选中状态有多强，主按钮放在哪里。这些决定看起来很小，反复出现之后，就成了整套后台的视觉性格。
| 组件族 | 保持一致的部分 | 可以变化的部分 | 我关注的组合关系 |
|---|---|---|---|
| 列表与工具栏 | 筛选间距、表头层级、操作位置 | 列宽、图片比例与信息密度 | 工具栏与表格作为一个完整单元 |
| 表单与选择器 | 标签对齐、输入高度、组间留白 | 字段数量、说明长度与选择方式 | 局部控件服从整页阅读顺序 |
| 状态与步骤 | 选中态、辅助色与文字层级 | 标签、数字摘要或时间线 | 同一语义在不同尺度下保持联系 |
| 摘要与图表 | 标题位置、数字层级、内容边距 | 图表类型、卡片宽度与布局 | 大小信息面之间形成节奏 |
这次赛事练习最吸引我的，是把零散控件放进连续页面以后，再回头看它们是否协调。单独看漂亮的组件，组合起来未必自然。我在意的是重复与变化的比例：让基础规则足够稳定，再把空间留给不同内容。
如果继续延展这套探索，我会把字号、间距、表格密度、按钮层级和状态样式整理成更清楚的组件说明。对我来说，设计系统的价值就在这里：下一张页面开始之前，已经有一套可以讨论、组合和继续生长的基础。