MODULE 09 / LESSON 03

复杂工作台与渐进披露

在高密度信息中保留清楚的主任务。

35 / 60 课适配不同平台

先理解这个概念

工作台需要平衡可见信息、操作效率与学习成本。把全局导航、当前对象和局部动作区分开;把低频复杂选项放在可发现的位置。高频用户可以得到快捷操作,但新用户仍应有可见路径。

工作台需要帮助用户持续处理对象,重点是上下文稳定与操作效率。列表、详情和工具面板通常承担不同角色;随意堆叠统计卡片不会自动支持工作。渐进披露应降低非当前任务的干扰,同时保留频繁命令的可发现性。

用程序员的语言说

像 IDE:编辑区、项目导航和命令入口各有职责,不是把所有功能都放进一个菜单。

记住这三个原则

  1. 01

    确定主要工作区域,辅助面板不抢占核心空间。

  2. 02

    保留当前选择、筛选和编辑状态。

  3. 03

    用可预测的组合结构承载扩展,而不是无限加侧栏。

实际设计时,分三步做

  1. STEP 01

    写出用户一段连续工作的顺序,例如筛选问题、打开详情、修改、回到下一项,找出必须保持可见的上下文。

  2. STEP 02

    给导航、对象区、详情区和操作区分配明确职责,避免同一筛选条件在多个面板各有一份。

  3. STEP 03

    定义选中、编辑、批量模式与面板切换时的规则,特别是未保存内容与权限变化,避免静默丢失。

一个容易理解的例子

BEFORE / 常见问题

一个股票分析页有三层侧栏、七个彩色统计卡,却找不到公司公告。

AFTER / 可以这样改

围绕当前公司组织概览、公告与财务,重要内容在同一上下文中切换。

结构跟随对象与任务,减少在不同区域之间建立关联的成本。

展开看:从场景到设计决定

处理反馈的工作台可以左侧保留筛选后的列表,右侧展示当前详情。处理完成后当前项更新状态,列表选中合理移动或保持,用户无需重新寻找。窄屏改为列表和详情两级,但筛选与当前位置延续。若右侧又嵌套多个工具抽屉,应检查是否把核心处理动作推到不可见区域。

适用边界与取舍

侧栏不是工作台的必需形式。对象较少、任务较轻时顶部导航或单列流程更合适;结构应跟随工作量,而不是套用传统后台外观。

YOUR TURN

把这个原则用一次

先做一个小判断

给代码片段平台划分三个主要区域。

再完成一份设计练习

为“审阅十篇待发布文章”设计连续操作路径,说明审核一篇后下一步怎样发生。

容易踩的坑

密度高不等于字号小。优先减少重复信息和无效容器。

继续查阅

本课为原创教学解释。具体平台规则与标准可查阅官方资料。

MDN · CSS layout