MODULE 09 / LESSON 03
复杂工作台与渐进披露
在高密度信息中保留清楚的主任务。
先理解这个概念
工作台需要平衡可见信息、操作效率与学习成本。把全局导航、当前对象和局部动作区分开;把低频复杂选项放在可发现的位置。高频用户可以得到快捷操作,但新用户仍应有可见路径。
工作台需要帮助用户持续处理对象,重点是上下文稳定与操作效率。列表、详情和工具面板通常承担不同角色;随意堆叠统计卡片不会自动支持工作。渐进披露应降低非当前任务的干扰,同时保留频繁命令的可发现性。
像 IDE:编辑区、项目导航和命令入口各有职责,不是把所有功能都放进一个菜单。
记住这三个原则
- 01
确定主要工作区域,辅助面板不抢占核心空间。
- 02
保留当前选择、筛选和编辑状态。
- 03
用可预测的组合结构承载扩展,而不是无限加侧栏。
实际设计时,分三步做
- STEP 01
写出用户一段连续工作的顺序,例如筛选问题、打开详情、修改、回到下一项,找出必须保持可见的上下文。
- STEP 02
给导航、对象区、详情区和操作区分配明确职责,避免同一筛选条件在多个面板各有一份。
- STEP 03
定义选中、编辑、批量模式与面板切换时的规则,特别是未保存内容与权限变化,避免静默丢失。
一个容易理解的例子
一个股票分析页有三层侧栏、七个彩色统计卡,却找不到公司公告。
围绕当前公司组织概览、公告与财务,重要内容在同一上下文中切换。
结构跟随对象与任务,减少在不同区域之间建立关联的成本。
展开看:从场景到设计决定
处理反馈的工作台可以左侧保留筛选后的列表,右侧展示当前详情。处理完成后当前项更新状态,列表选中合理移动或保持,用户无需重新寻找。窄屏改为列表和详情两级,但筛选与当前位置延续。若右侧又嵌套多个工具抽屉,应检查是否把核心处理动作推到不可见区域。
适用边界与取舍
侧栏不是工作台的必需形式。对象较少、任务较轻时顶部导航或单列流程更合适;结构应跟随工作量,而不是套用传统后台外观。
把这个原则用一次
先做一个小判断
给代码片段平台划分三个主要区域。
再完成一份设计练习
为“审阅十篇待发布文章”设计连续操作路径,说明审核一篇后下一步怎样发生。
密度高不等于字号小。优先减少重复信息和无效容器。
继续查阅
本课为原创教学解释。具体平台规则与标准可查阅官方资料。
MDN · CSS layout