您所在的位置:首页 / 知识分享

B端典型表格设计

2020.12.29

739

gl

什么是表格?

表格页是公认为展示数据最为清晰和高效的形式,它的信息密度极高,就像是一个家庭衣柜,里面很多抽屉,我们需要把衣物整洁摆放收纳,提高空间利用率。

表格页由三个部分,如下图所示:

一、数据查看

数据查看可通过四个维度去自检设计是否合理,分别为信息降噪、呼吸适中、高效易读、详情查看。

1、信息降噪-内容

通过对表头内容删减,我们一眼就可以看到表格的重要信息,从而帮助用户能快速进行数据决策。因此,列数控制在7+-2,列表表头展示更为关注的数据,更多信息在详情中展示。

另外,如果不同用户想看到的信息侧重不同,我们还可以做自定义设置项,让用户自己去选择想要看到的表格内容。

用最少字数给表头做精简,精简到少一字不可。

另外,当遇到少一字都不可的长标题,我们可以定义专有名词,并且给一个解释专有名词的icon,便于第一次使用的用户易于理解。

2、 信息降噪-视觉

去掉不必要的分割线和斑马纹,用对齐和间距来区分列和行,可以鼠标滑上去给斑马纹,增强交互体验。

分割线的样式尽量轻盈,不要抢视觉,突出内容。

去掉不必要的装饰和颜色,为了防止视觉负担,少用面性图标,使用颜色保持克制,删除如果不是点击即可删除,可以不用预警色。

不要出现衬线字体,比如宋体,保持字体统一

3、 呼吸适中-单元格

定义单元格高度。字号、行高、上下间距进行规范,这里有一个比较常见的规范,将字号设为N,那文字行高就是

1.5N,上下间距为1.2N,单元格高度=内容高度+上间距+下间距。

4、 呼吸适中-列宽

我们将首列和尾列定义为N1,列与列之间定义为N2,随着页面收缩和拉伸,N1保持不变,N2自适应变宽变窄,这样页面会看起来会更均衡,这样会显得有呼吸感。一般定义一个最小值,当表格宽度大于页面宽度时候,固定首尾列,左右滑动

5、 高效易读-对齐方式

标题和内容一般采用左对齐,更高效的浏览顺序,有长短不一的数字时,右对齐方便比较。操作项一般放在尾列右对齐。

6、高效易读-不做无意义留白

当数据为零时就写上“零”,当没有数据时候就写上“-”。比如开发取不到的后台数据,我们就可以给“-”作为显示,如果得到的数据就是零,我们也要让它显示出来。

7、高效易读-选择合适的翻页器

选择合适的翻页器,利用分页可以缓解服务器的加载压力。无限浏览如果数据过多很容易使页面崩掉,使用功能较为强大的翻页器,每一页默认10行以上,减少翻页次数,增强用户体验,给出默认行数后,可以让用户自定义每页行数,相比跨屏翻页,向下滑动更便利。

8、高效易读-收起低频操作项

超过四项操作项收起来,可以用图标指引下一步操作。关于哪些可以操作项可以折叠起来,可以与产品经理沟通收起低频链接,或者埋点一个月时间查看点击量也可以做出决策。

9、高效易读-默认行数

当单元格内容长度不固定的时候,定义好内容的宽度和行数以及字数,超出显示的字数可以用省略号代替

10、高效易读-行的排序

默认最近创建的在表格中第一行显示,使用户感知最新情况。也可以带排序的表头,让用户自定义排序。

11、详情查看-入口

入口可以在操作里加详情,也可以把发起人做成可以点击样式,跳转详情,并且可以避免视觉干扰,也就是降噪,当鼠标Hover上去时候,发起人才显示出跳转色,提示可点击状态。

12、详情查看-交互方式

第一种是用弹窗的形式。第二种是第一种的延伸,当内容过多时候可以考虑抽屉样式。这些交互的共同有点就是没有脱离原页面。当详情内容较多且需要编辑时候,我们就考虑跳新页面,使用新页面进行承载。(这里有个细节,新开tab页可以打开多个详情页,如果覆盖原页面则只能打开一个详情页,并且不能同时查看原页面和详情页。所以我们要根据具体场景、业务需求去设计)

二、数据过滤

数据过滤由搜索,筛选和标签页构成。

1、搜索

搜索可分为模糊搜索和带标签的搜索。工作中常用的搜索为模糊搜索,优点是只要有相关的内容都会搜索出来,减少了精准搜索带来的记忆负担。缺点是容易把不相关的信息也带出来,例如搜索手机号,把相关编码也匹配了出来。带标签的搜索优点是搜索匹配精准度高。缺点是每次只能对单一条件进行搜索,当用户要搜索的时候都要去切换选择信息,多了一个步骤。另外,在实际工作中,可以通过埋点或者调研,如果搜索框搜索手机号频率较大,我们可以把手机号设置为默认选项。

2、筛选

筛选框可以分为下拉筛选和平铺筛选。下拉筛选的优点是空间利用率高,起到了很好的收纳作用。缺点是无法直观看到所有筛选项。平铺筛选优点是操作效率高,筛选项一目了然,支持输入更多筛选条件,可以自定义输入。缺点是空间利用率低,不适合选项太多的情况。如果用户点击其中一个选项概率最多,我们就可以将点击率高的一项作为默认项,然后选择第一种下拉筛选框。如果用户点击每个选项概率相等,在空间允许情况下我们可以平铺出来。

当筛选项过多时,信息排序应是用户目标优于业务逻辑,即排序应该考虑用户的使用习惯。例如当用户查找订单时候,第一反应都是搜索框输入,而一般通过价格过滤较少的应该放在末尾。

当然,我们还有更多优化空间,当筛选项过多时,我们可以默认折叠低频筛选项。折叠哪些筛选项还是得基于用户习惯,可以通过数据埋点或者用户调研得到用户使用场景。

当通过数据埋点或者用户调研发现绝大多数用户只需要用到搜索项,那么我们就可以只保留搜索框,其他选项全部折叠到高级搜索里面,当点击高级搜索时候出现一个弹窗,既可以保留更多筛选内容,又可以使页面不会看起来很拥挤。

(当弹窗内容选择完毕时候,高级搜索按钮会呈现高亮颜色,未选择更多筛选内容时候则呈现默认态。)

3、标签页

标签页是比较常用的数据过滤方式,切换样式包括基本样式、卡片样式以及胶囊样式。一般和时间、状态的流转有关。

同样我们可以通过数据埋点或者调研,将用户最关注的选项设置为默认选项,减少用户的选择,提高用户体验。例如下图,用户更关注的是销售中的商品,即将到店的客户,以及即将发货的商品,所以我们将这些选项作为默认项。

三、数据操作

数据操作从控制范围可以分为单行操作、批量操作和全局操作。从操作属性可以分为新增数据、编辑数据和删除数据。

当从产品那里拿来一个原型图堆叠很多操作项,我们就可以根据控制范围来区分判断,从而明确摆放位置。单行操作可以放到表格里,批量操作根据亲密性原则放在左上方,这样可以离打勾矩形近一些,如果有利于用户操作,也可以放在左下方。全局操作则可以放单独一行,使得层级更加清晰。

调整后,我们发觉虽然解决了多个操作放一块的行为,但是层级还是不够清晰,我们可以通过割裂板块或者板块颜色不同来调整,使得识别性更强。

后记

B端设计强调的是在好用的基础上让页面变好看,所以更考虑用户体验。所有设计方式不局限与一种,只要操作上是顺手,业务上是合理的,都是优秀的设计。如果一个页面占据半屏都是筛选项,那么我们就得好好反思,因为所有筛选项不可能都是高频操作,接下来就需要去做数据埋点并进行页面优化了。另外,一张只有筛选项和表格的页面,表格数据查看区域建议占整个页面的百分之六十到百分之七十,这个时候浏览起来是比较舒适的。


来源:UI中国;最多三分糖

相关新闻

让人头疼的python 编码问题!!!

2018.10.29

0

中文编码问题是用中文的程序员经常头大的问题,在python下也是如此,那么应该怎么理解和解决python的编码问题呢?

开发APP,OUT了,微信小程序

2016.09.26

6982

张小龙在朋友圈里这样解释道:小程序是一种不需要下载安装即可使用的应用,它实现了应用「触手可及」的梦想,用户扫一扫或搜一下即可打开应用。也体现了「用完即走」的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

前端存储技术

2019.01.18

2645