文章目录

双栏列表详情要保证三件事:列表高亮始终对应右侧对象,切换对象时不会混用旧内容,返回列表后保留原筛选和位置。宽屏并排显示,窄屏可以只显示列表或详情,但当前对象不能因布局切换而丢失。筛选后对象离开集合,也要明确是保留查看还是清空详情。

客服连续处理“待回复”邮件时,需要快速切换客户,又不能把回复发给错误对象。先在Pixso中设计分栏界面与组件状态,把邮件列表、详情标题和回复区放进同一工作台,再处理切换中的变化。

双栏列表详情怎么设计?选中与返回位置

什么时候适合双栏,而不是频繁打开新页

用户需要在同一集合里连续查看多个对象,而且每个对象的详情足够复杂时,双栏可以保留集合上下文。邮件、候选人资料、资料库文档都可能符合这一条件。若详情本身需要很宽的表格或长时间专注编辑,独立详情页反而可能更清晰,不必为了“后台感”强行并排。

左侧承担识别和选择,右侧承担阅读与处理。邮件行可以保留客户名、主题、时间和回复状态,详情再展开正文与附件。不要把所有字段塞进左列,使两侧都变成同一份信息的拥挤缩略版。左列够不够宽,要看最有区分力的内容能否读懂,而不是固定采用三七分。

初次进入是否默认选第一项也要明确。高频连续处理可以选中第一封可处理邮件;陌生列表或敏感操作可以先展示“选择一封邮件查看”。默认选择不意味着自动执行标记、分配或回复等动作。只有真正打开并满足阅读规则后,才按产品约定改变未读状态。

Android的列表详情布局文档将大窗口并排、小窗口单面板作为适配方式,并区分不同返回行为。这里的设计问题并不限于某个开发框架,关键仍是当前对象和导航关系在变化中保持清楚。

选中了B,A的内容就不能继续冒充B

客服先打开“交付时间咨询”,再点“发票信息补充”。若第二封加载较慢,左边已高亮新邮件,右边仍留下旧正文和回复框,就有误操作风险。切换对象后,详情标题与内容状态应一起更新;可以保留布局骨架,但旧对象的可编辑操作不能继续挂在新标题下。

本例在新邮件加载中显示主题和加载状态,暂不允许发送回复。收到新内容后再开放相应操作;加载失败只影响详情区,左侧列表与筛选仍可继续使用。点另一封邮件能换对象,重试则仍针对刚才失败的那一封,两条路径不混淆。

快速连续点A、B、C时,A的较晚回包不能覆盖C。设计稿需要标明“详情以当前选中对象为准”,并给出当前标题、对象标识与加载状态的对应。仅画三个正常画板而没有切换中间态,无法说明这种顺序问题。

在Pixso中并排制作宽屏工作台和手机详情两张画板。宽屏左列选中“交付时间咨询”,右侧标题显示同一主题;手机版只保留该邮件详情,并在顶部提供“返回待回复”。让同一个邮件对象贯穿两种布局,列表中的位置与筛选不因手机隐藏了左栏就被清空。

Pixso中的邮件列表详情布局,桌面选中项与手机详情对应同一封邮件
布局可以由双栏变单栏,当前对象和返回上下文保持一致。

列表高亮与键盘焦点也要分开。方向键在邮件之间移动时,是只移动焦点,还是同时载入详情,可以根据工作流选择,但行为应稳定。若移动焦点即切换详情,要避免每次都夺走阅读焦点;只有用户明确进入详情时,才把操作重点带到内容区。

对象还在,列表里却找不到了

客服在“待回复”筛选下发送回复,这封邮件随即不再满足筛选条件。它从左侧列表消失是合理的数据变化,但右侧马上清空会让用户怀疑刚才是否发送成功。本例保留已发送结果,提示“此邮件已移出待回复”,并提供查看下一封的动作。用户知道发生了什么之后,再继续工作。

如果产品选择自动前进到下一封,也应先确认发送结果,并明确新的对象标题。不能在提交失败时提前跳走,更不能让连续点击按钮把同一回复发给下一位客户。自动前进是一种节奏选择,需要与操作完成条件一起定义。

  • 更改筛选:当前邮件仍在新集合中时可继续选中;不在时说明离开当前结果,或清空详情并要求重新选择。
  • 更改排序:对象身份保持,列表中的位置变化,不把原行号当作选中对象。
  • 对象被删除:保留可解释的结果说明,停止相关操作,提供返回列表。
  • 权限失效:显示权限变化,不把无权查看误称为内容不存在。
  • 新记录插入:不要把当前可见列表突然推走,必要时提示有新邮件并允许刷新。

页面还可能由深链接直接打开一封邮件,而不是从当前列表进入。此时可先显示该对象,列表没有选中行并不一定是错误;需要说明它不在当前筛选结果内,并允许清除筛选定位。不要为了强行产生高亮,悄悄更改用户原来的筛选条件。

右侧正在写回复时,切换邮件属于离开当前编辑对象。草稿可按邮件分别保存,或在离开前提示处理未保存内容,但不能把A的回复文本带到B的编辑框。具体保存与退出安排可以对照未保存内容与自动保存的设计方法,这里尤其要让草稿归属对象清楚。

返回的是集合,不只是上一张截图

手机上从列表进入详情,再返回时,应恢复筛选、排序、已加载范围以及原对象附近的位置。仅保留滚动数值不够:回复后当前邮件可能已移出列表,原来的第十行已经换成另一封。可以恢复到前后相邻的仍有效对象,而不是盲目滚到旧像素。

从窄屏详情扩成宽屏时,显示列表与当前详情;再缩回窄屏时,仍停在正在看的详情,不突然退回列表。宽度变化本身不是一次新的浏览选择。详情里已经滚到附件区,也可以按产品规则保留这一阅读位置,不必每次重新回顶部。

应用内“返回待回复”通常指向列表上下文,浏览器后退可能恢复前一对象或前一页面,二者需要明确约定。若每点击一封邮件都写入历史记录,后退就会逐封走回;若选择替换当前地址,后退可能直接离开工作台。没有绝对通用的方案,但界面按钮与浏览器行为不能相互误导。

桌面左右区域独立滚动时,各自保留标题与边界。滚动详情不应带走列表筛选,滚动列表也不应重置正文位置。固定回复区还要检查是否遮住最后一段内容,不能用一个底部遮挡层换来表面上的操作方便。

双栏布局的真正价值,是用户处理一件事后仍知道自己在整个集合的哪里。身份、集合与导航都稳定,左右两块区域才能共同构成工作台;否则它只是两个容易失去联系的页面被摆在了一起。