表格页面的难点,通常从放进真实内容以后才开始显现:名称有长有短,状态不止两种,筛选以后还要继续处理。dpopstudio在10月20日分享了Datchs后台的布局与状态设计,配图可以作为观察信息密度的入口。这里不沿用文中的效率数字或固定尺寸结论,而是结合假设的企业客户管理任务,分享几种值得带回设计评审的问题。其中的表格操作示意为另行生成的AI概念图。
讨论密度时,可以先暂时放下行高和间距,想一想使用者在完成一次判断时需要同时看到哪些信息。客户经理确认一个项目是否可以进入下一步,可能需要账户名称、负责人、合同状态和最近更新时间。把这些字段放在稳定的位置,能让视线围绕同一个问题移动,页面也更容易形成主次。
原文配图:Datchs CRM套件主视觉,用于观察概览模块和整体信息密度,非兰亭妙微项目。
另一些内容虽然有价值,却不必在每一行完整展开。例如一段较长的跟进说明,可以先显示简短摘要,进入详情后再读全文;但用于区分相似记录的编号就不适合完全省掉。设计师需要判断省略以后是否还能认对对象,而不是只检查表格边缘有没有对齐。
这一层取舍会影响整张页面的结构。顶部指标卡适合回答概况问题,列表负责具体工作,侧边详情承载展开后的内容。如果几类区域都各自占据很大面积,使用者可能反而看不到足够多的记录。可以用一组真实长度的数据试排,让空间分配围绕任务而定。
一张紧凑的表格,首先要让人看清横向对应关系。文字字段、金额、日期与状态可以根据内容特点采用不同的对齐方式,同时保留一致的列边界。尤其是数值比较,要照顾位数变化和单位的位置;把小数、币种与数量直接混在同一种格式里,会给阅读增加额外判断。
AI概念示意:客户表格与批量选择,展示行列对齐、选择范围及关联详情,不属于Datchs原作。
行内的次级信息也要有节制。客户简称下方可以补一个识别编号,负责人旁边可以带所属团队,但每个单元格都堆三四行说明,纵向扫描就容易变慢。可先保证关键字段在常见情况下清楚,再为特别长的名称提供展开、提示或更宽的详情位置。
缩小间距还会影响操作。纯查看页面与需要频繁勾选、编辑的工作台,不一定适合同一种行高;鼠标使用和触屏使用的条件也不同。原文里的具体尺寸可以作为参考样本,不能直接当所有B端系统的答案。更可靠的判断来自目标设备上对读取、定位与点击的实际检查。
表格一旦加入批量操作,设计问题就从单行扩展到了一组记录。勾选后出现的工具栏,需要清楚说明已选数量,以及动作将作用在哪些对象上。这里尤其要区分选中本页和选中全部筛选结果,两者可能相差很多记录,只改变复选框外观往往不够。取消选择也应容易找到,并让使用者在提交前仍有核对范围的机会。
原文配图:Datchs套件的深浅色界面组合,作为组件层级与信息密度的视觉参考。
可以设想客户经理先筛选待跟进项目,再去第二页补选一些记录。此时改变筛选条件、排序或者翻页,会不会清除原来的选择?如果会,应有清楚反馈;如果保留,已选对象与当前结果的关系也需要可查看。这个规则应当由业务与设计共同决定,不能等开发时临时补上。
批量处理的结果同样要对应到对象。假设其中部分记录因为权限或状态变化无法更新,结果页可以告诉使用者哪些已经完成、哪些仍需处理,以及接下来可以做什么。只显示一个成功提示,会把未完成的部分藏起来;只显示失败,又会让人误以为全部都没有保存。
空列表、筛选无结果和读取失败,虽然都可能让页面暂时没有记录,原因却不同。空列表可以解释如何创建第一条;筛选无结果应该保留条件并提供调整入口;读取失败需要说明是否可以重试。让原因与下一步对应,比给所有情况套同一张空态插画更有帮助。
原文配图:Datchs的桌面与移动端布局展示,观察不同屏幕下的信息取舍。
还有一些变化不容易在展示稿里出现:字段缺失、同名客户、超长名称、过期状态、数值为零以及最近更新还未同步。准备评审数据时,可以把这些情况一起放进页面,观察列宽、状态文案和操作按钮是否仍然稳定。视觉规则能容纳内容差异,表格才更接近可使用的工作台。
与开发讨论时,也可以把每一种变化附着到具体组件和页面上。什么条件显示加载,什么情况保留旧数据,保存成功后哪一行更新,都可以在同一条任务中讲清楚。这样的B端界面设计更便于核对,也能减少设计稿里很完整、实际操作却让人摸不着头绪的落差。
信息密度没有一个脱离场景的最优数值。我们更愿意从能否认对记录、完成判断和继续处理来评价一张表格。把字段、选择范围与边界状态一起想清楚,紧凑的布局才会变成工作上的便利,而不只是展示图里的整齐。