客服沟通、设备协作和项目处理后台,都可能把消息放在工作台的一角。内容少时,几张聊天气泡就能说明问题;当频道、附件、提醒和不同任务同时出现,消息区就变成一套需要仔细组织的界面。dpopstudio在Chapps的分享里讨论了列布局、消息分组与状态。兰亭妙微这次从实际画面出发,延伸到一个假设的后台协作场景,看看哪些细节能让读者持续找到正在处理的事。
假设系统里同时存在多个项目和多组会话。最左侧可以负责切换工作区,中间列表用于定位某次沟通,右侧再承接具体内容。分栏的意义,是让使用者知道每一层在回答什么问题。如果三个区域都在显示相似的名称和未读标记,虽然看起来整齐,实际定位仍会反复绕路。
原文Chapps桌面协作主视觉,展示工作区导航和内容面板的整体关系。
每一栏的滚动关系也值得提前说明。打开某个会话后,频道列表应继续保留原来的位置;阅读很长的消息时,输入区不必跟着离开。可以用一组连续画面演示这些关系,让开发同事清楚知道哪一部分固定、哪一部分滚动,而不只交付一张所有内容都刚好放下的截图。
当可用宽度变小时,还要确认次要区域怎样收起。收起会话信息不等于失去当前上下文,任务名称、选中项和返回入口仍应有所保留。把这些规则写在完整页面旁边,比只在组件库里规定一个侧栏宽度,更容易表达它在实际业务中的作用。
一段连续对话里,并不是每一行都需要同样强的头像、姓名和时间。如果同一个人连续发送几条相关内容,可以通过位置和间距表达它们属于同一组。换人、换话题或出现关键处理结果时,再给出更明显的分隔。读者由此能先抓住对话结构,再细看具体句子。
原文设计系统图展示字体、颜色与状态样式;具体消息分组规则仍需结合使用任务判断。
需要弱化的是重复信息,不是责任归属。转交记录、操作确认和带有任务结果的消息,仍应让人辨认是谁在什么情况下发出的。评审时可以准备一段混合文本、图片和附件的对话,看看读者能否找到最近的处理结果,而不必逐条打开时间提示。
悬停后出现的快捷操作也要留意位置变化。复制、回复和更多操作可以放在已有空间里,避免一移动鼠标,消息行就突然变高。对密集工作台来说,稳定的位置本身就是一种帮助:读者刚刚看到的信息,不应该因为工具栏出现而不断上下移动。
深色模式不只是把背景换成黑色。以消息后台为例,工作区、列表和正文需要有可辨认的层次;次要时间和摘要也应该在常用显示条件下读得清。若所有面板共用同一种底色,分栏关系可能消失;若每张卡片都带发光描边,重要内容又会淹没在装饰里。
原文多页总览,包含会话、联系人、通话及设置等不同画面;并非全部都在展示异常状态。
可以先确定几类信息的优先顺序:当前会话、待处理事项、未读提醒、已读正文和辅助说明。它们不一定都需要一种新颜色,也可以借助字重、位置、背景范围和标签形状区分。颜色承担什么含义,应在浅色与深色主题之间保持一致,而不是每次换主题都重新解释。
对长时间使用的后台,最好拿真实长度的示例内容去看,而不是只放几句很短的占位文字。长文件名、多人姓名和较长摘要更容易暴露问题。阅读层级是否稳定,最终要放回这些普通但经常出现的内容里判断,不能只凭一张漂亮的展示图做决定。
一条消息从点击发送到对方可以读取,中间可能还有上传、等待、失败和重试。设计可以先区分内容是否已经保存、是否还在传输,以及使用者还能执行哪些动作。附件上传到一半时,进度、取消入口和文件身份应在一起,避免用户只看见一条没有对象的进度条。
AI概念示意:发送失败、附件进度和新消息提示;不是Chapps的实际交互实录。
失败以后,原有内容也需要有可找的位置。让用户直接重试、修改后再发,还是保留草稿等待恢复,应结合产品规则决定,再把结果清楚地呈现。不要在同一处同时放出两个意义接近的红色按钮,却不说明分别会发生什么;操作结果要能与前面的状态对应起来。
后台常见的另一种情况是,读者正在翻较早的记录,新消息却不断到来。此时可以保留当前阅读位置,并提示新增内容的数量与去向,而不是突然把列表拉回底部。是否自动跟随新消息,应随着当前阅读状态改变,这种细节可以通过原型讨论,不能从静态界面直接验证。
还可以加入一段跨天的示例对话,检查日期分隔、未读位置和再次进入会话后的状态。若同一会话关联某张工单,消息与工单的入口应能相互辨认。读者需要的是继续工作,而不是重新猜测一段聊天属于哪件事情。
好的消息区,会让分栏、分组和状态共同服务于正在进行的任务。它既要承接快速沟通,也要保留之后查找和继续处理的线索。我们在看这类B端界面设计时,最想留下的并不是一组固定像素,而是这些关系:谁在说话,哪条信息要处理,刚才的操作现在进行到哪里。