表格|好的表格信息展示都有这三个特征( 三 )


有需求时用户主动触发再展示。
比如,百度搜索推广平台的推广管理页面提供了全局筛选,所以表头筛选对于用户而言是相对低频的操作,我们选择隐藏表头筛选的图标,当用户鼠标HOVER表头单元格时再展示。
表格|好的表格信息展示都有这三个特征
文章插图
对于表格行内的操作我们也应当进行优先级排序,为用户专门设置操作列展示高频核心的操作,其它相对低频的次要操作可隐藏在相关数据单元格中,用户有诉求时hover对应单元格即可快速发起操作。
表格|好的表格信息展示都有这三个特征
文章插图
2)隐藏辅助信息
表格中的有些数据指标是综合纬度的,当用户关注点定位于该指标时,需要通过细分数据来理解、分析。
指标的细分纬度信息虽能起到辅助用户更好理解数据指标的作用。
但如果全部拿出来在表格列展示,会让表格变得臃肿不易读。
此时可以考虑采取一定设计手段去隐藏这些信息,把触发展示的自由度交给用户,也更符合用户逐级查看的场景。
例如,百度搜索推广平台中关键词列表中,质量度指标是由多条数据共同决定的,我们采用了将细分指标聚合在气泡卡片中,当用户HOVER质量度得分数据时展示出来。
表格|好的表格信息展示都有这三个特征
文章插图
再比如,有父子层级关系的数据,可以通过父子折叠表格将子信息默认隐藏,用户根据需要,去展开查看详细的子信息。
表格|好的表格信息展示都有这三个特征
文章插图
2. 设定折行与截断规则B 端业务的数据信息复杂多样,信息内容的长度高度是多样不可控的。
很多内容会超出我们限定的最大列宽,最大列高,我们应当给出折行与截断原则去约束内容的展示,而非总是为具体情况而做特殊设计,破坏体验的一致性。
截断折行原则设定时要细分,不能简单粗暴的一刀切。
比如一行截断这种,如日期、时间等固定格式内容,拖动列宽后文字应折行而非截断展示,避免影响用户误读。
再比如很多业务实体标题字段是格式化的,即标题前面部分可能都是一致的,这时候如果简单的截断,用户就需要逐一Hover才能找到定位到要找的数据。
因而折行与截断原则,我们建议是给出三种:单行截断、双行截断以及自适应截断,根据具体业务情景选择。
四、总结我们今天集中讨论了应该如何考虑表格信息展示,并总结了如何做好表格信息展示,即遵守【 疏密适度】、【高效扫视】、【精简克制】三原则,并结合业务特点以及目标用户场景,设计高效易读的表格。
最后,感谢你花费宝贵时间阅读这篇文章,希望可以给你带来一些启发。
我们非常期待我们的思考和一些小经验能够帮助你去设计满足你的业务场景的表格,也可以通过这些方法和步骤,创造属于你们团队自己的设计资产。
作者:百度MEUX,百度移动生态用户体验设计中心,负责百度移动生态体系的用户/商业产品的全链路体验设计。
本文由@百度MEUX 原创发布于人人都是产品经理,未经许可,禁止转载。
表格|好的表格信息展示都有这三个特征】题图来自Unsplash,基于CC0协议