分栏面板设计要同时约定拖动范围、折叠后的恢复位置和窄屏去向。最小宽度应来自列表与详情的可读需求；拖到边界就停止，不让另一栏挤到无法操作。折叠时保留重新展开的入口，窄屏改为先列表后详情，并在返回时恢复选中记录与滚动位置。
下面设计一个虚构客服工作台：左侧工单列表，右侧显示选中的 TK-203。可以先搭建工作台的分栏交互原型，用几个明确宽度的页面状态比较可读性，再决定拖动、折叠和返回各自怎样发生。
先用内容确定两侧最小宽度
本例列表需要同时辨认工单编号、标题和状态，详情需要阅读描述并操作“分配处理人”。两侧的最小宽度应通过真实字段和长文本样例确认，不能只凭左右各占一半的视觉感觉。
为便于复算，示例工作区宽 1200 像素，不包含外侧导航；中间分隔条占 8 像素。列表默认宽 320 像素，详情因此宽 872 像素。经过本例内容布局的设计约定，列表最小为 280 像素，详情最小为 560 像素。这里是原型参数，并非通用设计标准或已完成的用户测试结论。
| 布局状态 | 列表宽度 | 分隔条 | 详情宽度 | 结果 |
|---|---|---|---|---|
| 默认 | 320 | 8 | 872 | 320 + 8 + 872 = 1200 |
| 列表最窄 | 280 | 8 | 912 | 保住列表的阅读下限 |
| 列表加宽 | 520 | 8 | 672 | 适合查看较长标题 |
| 列表最大 | 632 | 8 | 560 | 详情刚好达到最小宽度 |
列表最大宽度不是一个独立随意的数，而是 1200 − 8 − 560 = 632。用户试图拖到 700 时，本例停在 632，详情仍为 560。若工作区缩小到 900，最大列表宽度随之变为 332，不能继续套用原来的 632。
拖动要有边界，也要有不用拖动的入口
分隔条需要有可识别的拖动把手，悬停和获得焦点时加强反馈；不要只放一条几乎看不见的线。拖动过程中两侧可实时变化，也可以先显示目标位置、松手后再更新内容，取决于界面重排成本。本例选择实时预览，最终实现若改为松手更新，应同步原型说明。
Ant Design 的 Splitter 文档提供初始尺寸、最小和最大尺寸、折叠等配置参考。它们是该组件的能力，不能据此认定任何原型工具都能直接执行同样的连续拖动。
本例还提供“列表宽度”设置入口，可输入一个像素值，并有“恢复默认宽度”按钮。输入 700 时不悄悄显示成 632，而提示“当前工作区可设为 280 至 632 像素”，让用户修正；拖动到边界则直接停止。两种输入方式共享同一范围，但反馈方式可以不同。
分隔条可获得键盘焦点，并用清楚的名称说明“调整工单列表宽度”。本例约定左右方向键每次调整 10 像素，Home 到最小，End 到当前最大，调整后传达当前宽度；焦点不跟着跳进列表或详情。WAI-ARIA 的 Window Splitter 模式提供了相关交互参考，但该页面明确说明模式审查尚未完成，不能把它写成已经完成的规范标准。具体语义和键盘实现仍应由研发按实际结构核验。
折叠应记住的是用户调整过的位置
用户把列表调到 520 像素，选中 TK-203，再点击“收起工单列表”。本例折叠后保留 40 像素的展开栏，移除分隔条，详情占剩余 1160 像素；展开栏显示“展开工单列表”的可访问名称，不能留下只有方向不明的小箭头。
重新展开时，在工作区仍为 1200 的情况下恢复 520 像素，继续选中 TK-203，列表滚动位置不变。不能每次都恢复到默认 320，否则用户刚调整好的阅读方式会丢失。点击单独的“恢复默认宽度”才回到 320。
恢复也要遵守当前边界。若折叠期间工作区缩到 900，原先的 520 已超出最大值 332，就恢复到 332，详情保持 560。不要为了记住历史宽度把详情挤坏。记录宽度时可同时保存用户偏好，等空间再次充足再按产品约定恢复；是否跨设备同步，应另作决定，不默认共享桌面尺寸。
空间不够时，让列表和详情分步显示
按本例的两侧最小宽度计算，完整分栏至少需要 280 + 8 + 560 = 848 像素的工作区。当可用工作区小于 848 时，本例改为列表与详情分步显示；这不是按手机型号猜出来的断点，也不是浏览器总宽度，因为外侧导航同样会占空间。
窄屏先显示工单列表，点 TK-203 进入详情，顶部显示“返回工单列表”。返回时仍选中 TK-203，并恢复进入详情前的筛选条件和滚动位置。用户从桌面分栏缩到窄屏时，如果已经在阅读 TK-203，就继续显示该详情；若还未选任何工单，则显示列表。
从窄屏再扩回足够宽的工作区，恢复双栏并保持当前工单。列表里的长标题和详情中的按钮仍要按各自布局规则换行；不能把所有文字整体缩小来维持双栏。静态页面的左右分栏构图可以参考常见网页布局，但拖动边界和返回位置需要在这类工作台中单独设计。
用状态页把宽度与工单上下文一起交付
在墨刀中可建立默认 320、加宽 520、最大 632、折叠、窄屏列表和窄屏详情六个页面状态，用点击连线演示对应结果；连续拖动尚未实现时，在说明中列出边界计算和键盘步长，不把几个跳转画面说成已经完成了拖动控件。
走查从同一条 TK-203 开始：先加宽，再折叠并展开，确认恢复 520；随后把工作区约束改为 900，确认最大列表为 332；再进入小于 848 的单栏状态，返回列表后检查选中项与滚动位置。每一步都要核对内容还在原记录中，不能只检查分隔线有没有移动。
最后补上分隔条、折叠按钮和详情返回按钮的焦点路径，按键盘导航与焦点设计检查不用鼠标时能否完成相同任务。与当前场景相关的其他界面方法，可在UI 与界面设计专题继续查找。
