到底管理什么
先确定订单、客户、库存等对象,以及对象之间的关系。导航跟着业务组织,避免同一件事分散在多个菜单。
先确定订单、客户、库存等对象,以及对象之间的关系。导航跟着业务组织,避免同一件事分散在多个菜单。
从列表查找,到详情确认,再到编辑保存。把入口、结果和返回路径画完整,别只交付彼此孤立的页面。
加载、空数据、保存失败、操作完成都需要反馈。同一订单处于待处理或已完成状态,可用操作也会不同。
区分查看、编辑、审批与导出权限,明确按钮是隐藏、禁用还是提示原因,减少研发对规则的猜测。
列表 → 详情 → 编辑
列表只保留用于识别、比较和处理的关键字段;完整记录放到详情页;编辑表单按任务分组。减少同屏堆叠,比把所有信息缩小更有效。

好的后台,不只停留在截图里
用下面的订单列表体验关键细节:查询结果及时反馈,空结果提供下一步,查看详情后仍保留筛选条件。画后台原型时,也值得把这些操作逐一连起来。
共 4 条订单
| 订单号 | 客户 | 金额 | 状态 | 操作 |
|---|---|---|---|---|
| SO-1024 | 星河商贸 | ¥2,400 | 待处理 | |
| SO-1025 | 远山科技 | ¥3,680 | 处理中 | |
| SO-1026 | 青禾零售 | ¥1,280 | 已完成 | |
| SO-1027 | 星河商贸 | ¥5,600 | 待处理 |
试试缩短关键词,或重置筛选后查看全部订单。
设计要点:优先让用户知道“发生了什么”,再提供明确的下一步。
筛选有反馈更新结果数量,不让用户猜查询是否生效。
空结果有出口说明原因,并提供重置条件的快捷操作。
返回有上下文保留筛选,继续处理刚才找到的记录。
用可复用的设计,承接不断增加的业务
后台页面经常共享导航、筛选区和表格。先建立一致的布局与操作习惯,再按业务调整字段和状态,后续页面更容易保持统一。
使用表格、表单、导航等组件搭建页面,用母版统一重复区域;在数据总览中搭配图表,把趋势、比例与明细分开表达。
从素材中选取 Ant Design、TDesign 等风格的组件时,先统一尺寸、间距和操作位置,再扩展到整个后台。

用智能填充准备姓名、日期、数字等内容,再补充长名称、空值、多状态和大金额。检查换行、对齐与溢出,别只用整齐的占位文字。
连接筛选、查看、编辑和返回操作,预览完整流程;邀请同事通过评论指出问题,讨论具体到页面和位置。

从相近的业务开始
模板先看页面关系和业务流程,再看视觉风格。进入详情后可查看具体内容与使用条件。

先说清业务,再让 AI 起稿
在墨刀 AI 描述业务对象、使用角色、页面结构和操作规则,生成初稿后继续调整。已有需求材料时,也可以先整理成下面这样的任务描述。
如果希望从描述直接开始,可了解AI 生成后台原型的使用方式;需要统一细节时,再结合组件与交互继续完善。
用 AI 开始后台设计替换成你的实际角色、字段和状态,保留清楚的操作关系。
开始之前,你可能还想知道
从设计结构,到原型交付,把容易混淆的问题说清楚。
先列出主要使用角色、业务对象和高频任务,再整理导航。优先画一条完整流程,例如“查找订单—查看详情—编辑—保存—返回”,然后扩展其他模块。数据看板是否作为首页,取决于用户是否需要先查看整体经营情况。
后台原型用于表达界面、交互和业务规则,适合评审、演示和研发沟通。最终系统的数据接口、服务端权限、数据存储及运行性能仍需要开发和测试;原型中的按钮隐藏或禁用,并不等于完成了真实权限控制。
列表优先保留识别记录、判断状态和执行操作所需的字段,低频信息放到详情页。确实需要宽表格时,可在设计中规划固定关键列、分组、列配置和横向滚动,并用长名称、空值及不同金额检查布局,不要单纯缩小字号。
可以从墨刀素材中选择相关风格的组件,组合表格、表单和导航,并用母版保持一致。设计素材用于搭建原型,实际工程组件的版本、代码实现和可用属性,需要与研发使用的组件库对应。
至少写清使用者、业务对象、页面范围、关键字段、状态变化和权限规则。例如订单后台需要说明谁能编辑、哪些状态允许操作,以及查询无结果或保存失败时如何反馈。生成后沿实际任务预览并继续修改,优先修正流程和信息缺漏。
先连接关键页面与操作,再分享可预览的原型。让同事按具体任务走一遍,比如找到待处理订单并查看详情,通过评论记录页面位置、触发操作和预期结果。将确认后的字段、状态与权限说明一并交给研发,后续修改也围绕这些问题追踪。
让业务复杂,让使用简单
把页面结构、操作流程和团队意见,放在同一个设计空间。