B端表格设计的基本交互形式

2021-11-29    ui设计分享达人


蓝蓝推荐:这是一篇很实用的表格基本交互形式文章!
译文:
如果没有将数据可视化和具备编辑数据的功能,数据就毫无用处。未来行业的成功依赖于将数据收集与更好的用户体验结合起来,而数据表格的设计体验则非常重要。

固定表头

-

固定表头让用户随时都知道自己所在列的名称。


水平滚动

-
当展示大型数据列表时,水平滚动是不可避免的。可以 将具有标识性信息的数据展示在第一列中,并固定第一列方便用户对其他数据进行对比。


调整每一列的宽度

-

调整列宽可以让用户看到所有的内容。


设计表格样式

-

表格的样式有:白色和其他颜色相间的斑马线设计,单纯用线分割,自由形式等。

正确的设计行样式可以帮助用户浏览表格数据,对只包含少量数据的表格来说,减少视觉干扰非常重要,这时候就可以采用去掉分割线、斑马行的自由展示模式。但对于有大量数据的表格来说,自由模式容易让用户迷失,这时候用线分割,让用户能区分开每一行就显得尤为重要。而斑马线的设计样式适合包含多列数据的表格,需要水平移动的大量数据表格。 


表格密度展示

-

为列表设计不同的密度,用户可以根据需要自行切换,比较紧密的行距让用户无需滚动就可以浏览更多的数据。



数据可视化

-

让数据可视化,提供表格内容的概括性预览,让用户无需细读每一条数据就能得到想要的信息。



分页展示

-

分页设计方便用户跳转到相应页面,但是也常常被无限滚动加载的方式取代,无限滚动加载指的是随着鼠标不停地往下滚动,页面内容也会随之加载,这种方式适用于发现类的网站,但是对于考虑优先级的产品来说就不太合适了。


悬停展示

-

当用户悬停时显示更多功能可以减少视觉混乱。需要注意的是,它可能会导致可发现性问题,因为用户需要与表交互才能看到更多的功能。


直接编辑

-

直接编辑可以让用户在当前表格内修改数据和内容,而不用额外再跳转其他页面进行操作。


可扩展功能

-

可以扩展的表格设计允许用户在不丢失上下文的情况下浏览更多详细信息。


快速视图

-

与可扩展功能非常相似,快速视图使用户能够在保持上下文的同时查看附加信息。


弹窗

-

弹窗设计同样可以让用户停留在表格视图中,让用户更专注在附加信息和操作上。


多层弹窗

-

多层弹窗功能对于活跃用户来说非常强大,可以同时完成多种操作,或用来比较不同项目的详细信息。


点击详情展示

-

单击链接会将表格转换为左侧为列表项和右侧为其他详细信息的视图。它使用户能够解析大型数据,以及查看单独的项目详情而不会丢失它们的位置。


可排序的列

-

排序允许用户按照字母顺序或数字顺序对列进行重新排列。


基本筛选

-

提供基本的筛选功能来搜索表格里的相关数据。


列筛选

-

这种设计模式允许用户将过滤参数分配给特定的列。


可搜索的列

-

这种设计模式允许用户在每列中搜索特定值。


添加列

-

这种设计模式允许用户根据需求在数据表格中添加列。


可编辑的列

-

可自定义的列功能使用户能够选择他们想要查看的列并进行相应的排序。 这个功能还包括保存预设后再修改的能力。


...


为什么表格设计很重要

数据正在成为全球经济的原材料。对数据的追求推动了行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融,甚至政府都在经历数字化转型。


然而,如果没有可视化数据并对其采取行动的能力,数据就毫无意义。未来十年幸存下来的公司不仅将拥有卓越的数据;他们也将拥有卓越的用户体验。


良好的用户界面设计基于用户的目标和行为。用户界面反过来也会影响行为,从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变了人类的决策方式。所看到的、呈现的位置以及交互的方式,都会影响行动。重要的是我们要做出能够带来更美好世界的设计决策,一个符合这个时代的数据表格设计。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:国外  彩虹BOOK翻译
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务





分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档