b端表格设计实战指南,b端表格设计指南上篇( 二 )


他能够通过拆分将数据进行切割,但是这样数据的易读性就是有很大的差距,比如在年度收支表格中,需要同时展示每一年份的收入,支出与利润,使用交叉报表能够让用户一眼就是看清数据,而基础的表格却不行 , 交叉表格也算是中国式表格中的一种,能够满足具体业务的需求 。

b端表格设计实战指南,b端表格设计指南上篇

文章插图
3. 树形表格当表格中的数据为包含与被包含的结构时 , 可采取树形表格 。通过逐级大纲的形式来展现数据间的层级关系 , 让整个信息结构变得一目了然,这一表格形式常出现在项目管理共具中 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
4. 图表表格当一个表格里面有多种图标数据进行展示时 , 他就是图表表格 。用户点击某一数据手,直接跳出数据的统计图,方便用户进行对比 , 同时这一功能也可以通过仪表盘这样的功能去解决,也就是说国内常做的数据可视化 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
四、设计拆解
1. 表头设计表格中分为表头单元格和信息列表单元格,表头信息其实是展示数据的概括名称,表头是允许排序,筛选,提示的,其他元素就很少在去添加了,数据的归类名称 , 名称的字段就要让用户更加直观的看懂和理解,要符合用户的饭思维习惯 , 如果需要重点解释的可在旁边添加说明图标进行解释 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
表头的文本是整个表格中很重要的部分 , 所以在文本的字体上要跟表格文本的字重进行区分 。
在确定了文本样式之后,接下来重要的步骤就是确定列表信息的对齐方式,对齐方式对整个表格内容的视觉有很大的影响 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
b端表格设计实战指南,b端表格设计指南上篇

文章插图
很多刚进入B端不久的设计师,都会有一个错误的认知,就是表格中不能使用居中模式,这是一些特殊的场景下是可以使用的,那么什么样的场景可以使用呢,那就是下方属性值内容长度一致,比如多选项,定宽标签,缩略图,进度条等 。
2. 精简表头表头的命名有长有短,就像人的名字一样,有点甚至会超出展示信息的长度,那么就会造成表格过长,信息展示不平衡 , 限制了信息的展示数量 。难么使用体验就很失败,所以就需要对表头进行精简,精简到少一个字不可的程度,要让用户清晰好理解 。
确保在不影响用户理解的情况下 , 把字段名称精简 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
表头的命名有长有短,就像人的名字一样,有点甚至会超出展示信息的长度,那么就会造成表格过长,信息展示不平衡 , 限制了信息的展示数量 。难么使用体验就很失败,所以就需要对表头进行精简,精简到少一个字不可的程度 , 要让用户清晰好理解 。
那么就有小伙伴就要问了,已经精简到最少了,不能再少了,名称还是很长,又要必须展示,才能有效的理解字段含义怎么办呢,那就要设置专有名词代替,并做解释说明,用个小图标引导用户,悬浮展示表头的所有信息 。这样用户可以清晰理解字段含义,又可以在有限的页面空间下获取到更多的数信息 。
b端表格设计实战指南,b端表格设计指南上篇

文章插图
3. 搜索样式表格承载的数据量很大,为了提高用户的使用体验,能够快速的提升查找数据的数据效率,对表格的内容能够快速的搜索,就会大大的提升用户的效率 。搜索有模糊搜索和精准搜索,所对应的场景不同,用户使用的成本也不同 。在不同的场景下来看下搜索的使用方法吧
4. 模糊搜索模糊搜索是什么?指用户在搜索意图不明确或者是查询内容不全的时候,将用户查询的关键词进行模糊的匹配,从而查找出相关的内容 , 在众多的数据中不能够精准的查到用户想要的内容西药用户在关键词中进行筛选 。所以在使用中要根据相关的场景进行使用 。
优点:减少精准搜索的带来的记忆负担,少量的关键词都会被搜索出来 。
缺点:关键词的重复度比较高 , 搜索出来的内容量很大,会把关键词相关的所有内容都会展示出来 。


推荐阅读