表格设计全过程:这次给你讲的明明白白

  最近做了几个后台管理系统,表格在其中占据着不可或缺的地位。在此对于表格的设计做一个整理,如有考虑不周之处,欢迎留言,共同学习进步~

  表格:一种可视化的数据交流模式,也是组织整理数据的一种手段,主要承载数据的展示、对比和归纳。

  易读:表格应该是一目了然的,层级分明的。让用户的注意力集中在内容而不是表格的形式。

  高效:表格页应该是可交互的,帮助用户更快来分类获取信息以他们习惯的方式。

  下图展示的为最常见的表格,表格不仅可以包含数据还可以包含可视化元素,比如:图表。对于表格,最基本的元素就是表体,也就是数据部分。

  在表格设计中,一般搜索和筛选会同时出现,但是两者一般很少同时使用来对数据进行定位。搜索更多的是对单一或者包含某个字段的的数据来进行定位,有更高的精确度;

  不同于搜索,筛选更多的是查询一类数据,可以和一些功能相配合使用(导出)。

  根据匹配方式,可以分为:精确搜索和模糊搜索。在大多数情况下,模糊搜索有利于减轻用户记忆负担,但是在同一个输入框搜索具有相似度很高的内容(比如手机号和ID都包含数字)时,建议对于该内容使用精确搜索或者分开两个输入框搜索。

  根据搜索时效性,又可将搜索分为,实时搜索和点击搜索。实时搜索,指的时在用户输入数据时便进行数据的搜索,具有搜索快速,搜索结果实时显示的好处,但是仅适用于小数据搜索;点击搜索,指的是在输入数据后,需要点击按钮才能进行搜索,该搜索方式适用性强。

  根据表现形式,可以将搜索分为,简单搜索和复杂搜索。简单搜索,指的是单一搜索框的形式,视用户对于搜索的需求的强烈度,可以放置输入框在筛选框前或后(注意保持所有页面统一),简单搜索还可以加上标签筛选,来搜索不同的数据类型(图书搜索—作者,书名,编号等);复杂搜索,指的是多个搜索框的形式,一般只展示一个最常用的输入框,其余的输入框隐藏。

  筛选:通过选择特定的选项,来对现有的数据进行筛选,筛选项应该遵循MECE原则。

  数据数量:对于数据筛选没有交叉的情况,同时筛选项少于5项时,我们可以采用展开的形式(单选框,标签的形式,顶部tab等形式)来进行筛选;对于超过5项少于25项的情况,我们可以采用下拉菜单的形式;对于超过25项的内容,我们可以在下拉菜单加上模糊搜索,采用实时搜索。

  数据呈现:一般包含全部或者不限这一项,对于两者的区别就如同all和any的区别。对于数据的呈现,我们可以根据用户的行为设置默认值。

  根据触发方式,可分为:触发筛选,实时筛选。一般情况下,筛选条件存在交叉时使用触发筛选,不存在交叉时使实时筛选。也可以根据筛选条件的数量选择合适的触发方式,比如条件少时用实时筛选,条件多时用触发筛选。

  根据筛选的位置,可以分为:标题筛选,表头筛选。标题筛选指的是,在表格的标题处可以进行相关项的筛选,优点时可以节省空间,缺点是一次只能筛选一项;表头筛选,指的时筛选框单独呈现在表头,形式可以是组合筛选(多个筛选条件)和单个筛选,同时视筛选的对用户的重要程度可以选择是展开还是隐藏显示。

  交互形式:点击菜单呈现下拉框,鼠标移到相应的项会有视觉区分,点击该项选中该项,外部显示选中的项。日期筛选建议使用一次点击选择日期范围,而不是需要点击两次来分别选择,同时禁用无数据的日期。

  常见的功能性按钮有:导出,创建,设置表格结构(定制表单,设置行高…)等(功能性按钮在这里指的是对于表格数据进行增删改查等 )。

  根据人的阅读习惯和人机工程,一般重要的按钮(破坏性按钮除外)放在左边,次要的放在右边,常用的按钮放在左边,不常用的按钮放在右边。

  形式:一般为填充主色彩的按钮形式,有禁用/启用/Hover/Focus/Press五种状态。

  交互:在未选中数据时(有复选框的形式),按钮为禁用状态,若设计为启用状态,可以在点击是出现toast提示;在选中数据时,点击导出数据。

  导出数据:导出的数据可以是部分数据也可以是全部数据,视实际情况而言。对于导出文件的名称一般的处理为:当前页面的名称+当前日期(时间视情况而定)。不导出表单的相关操作,只导出数据。

  形式:一般为填充主色彩的按钮形式,有禁用/启用/Hover/Focus/Press五种状态。

  交互:一般点击创建按钮,会出现包含创建项目数据的弹窗。弹窗一般包含:标题,创建项目表单,取消/创建按钮(创建按钮一般在必填数据未填写时呈现禁用状态)。

  弹窗表单设计注意点:1.选择合适的输入方式  2.显示必要的数据项以及默认的数据(默认的序号等) 3.能创建数据,一般就能删除数据

  使用场景:由于一份数据报表,往往需要满足各种不同的角色在不同情况下的需求,因而在数据内容上,一般采取宁多勿少的原则,即系统提供尽可能详细的数据给用 户,由此就造成了表格数据项过多,难以在一个屏幕内完整展示,导致需要横向拉伸,极大的降低了表格的可读性。

  表现形式:一般有两种形式,一种是将所有的数据项都展示在表格的上方(可以收起/展开);另一种是点击按钮出现弹窗进行选择配置。

  设计注意点:一般默认显示最重要,最常见的几个数据项,用户可以根据自己的需求自定义数据项。

  使用场景:由于用户阅读表单的设备的多样性,一个统一的行高会导致在不同尺寸设备上一屏显示的数据的差异化,影响阅读的效率。

  设计注意点:设置行高为兴奋需求,可以提高用户的用户体验。所以我们可以视表格的具体情况来设计设置行高的形式,可以放置在设置按钮里,也可以在外部按钮较少的情况下展示出来。

  作用:解释当前列数据。所以在数据有明显的差异以及能自我表意的时候,甚至可以去掉表头(邮箱),毕竟表头也占据一定的空间。

  对于全选,有两种情况,一种是全选当前页面的所有数据项,另一种是全选所有数据项。所以为了适应不同的场景需求,复选框可以进一步筛选是全选当前页面所有数据还是所有数据,也可以筛选别的类型的数据(已读、未读、已标记、未标记等)。

  表头筛选和单独筛选相比,只能筛选一列数据,使用实时筛选,但是具有节省空间的作用。筛选不仅可以筛选单选或复选,还可以筛选日期。

  设置查看数据优先级顺序,快速发掘最关注的信。可以使用上下按钮进行排序(只有两种排序),还可以使用下拉菜单进行排序(适用于多种排序)。同时我们可以根据用户的认识来设计排序,比如对于销量,我们可以只显示从高到低的排序(用户并不会对于低销量的商品感兴趣)。对于排序的方式,有按A-Z首字母升序/降序,也有按数值升序/降序。

  对于表头的交互,可以将表头分为固定表头和随数据一起滚动的表头。固定表头,一般标题的数据属性相似或者数据很多或者需要横向滚动表格时,固定表头便于分辨记忆。对于滚动表头,建议若数据之间差异大可以直接去掉表头。

  一行数据一般都是同一主体的不同属性(比如:同一用户的相关信息:ID、姓名、身份证、性别、年龄等。当然行数据也可以是对于列数据的统计。

  交互:鼠标移到一行数据一般有视觉区分(颜色或者是高度-阴影)。已点击阅读的项有视觉区分(颜色弱化或者有标记)。

  UI表现:为了加强行数据的联系,我们可以使用斑马线(颜色差距不宜太大)或者是去除竖分割线的形式,来加强视觉引导,提高阅读效率。

  行高:行高通过数据的密度和一屏显示的行数,来影响用户提取数据的效率。考虑表格的行高时,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑,文字行高可以设定为字号的1.2-1.8倍,文字与分割线间距离可以设定为字号的1-1.5倍。

  行高因为用户习惯和用户设备的不同,无法满足所有用户的需求,所以对于行高我们可以让用户去选择合适的行高。

  一列数据指的是同一属性的数据。根据7±2原理,建议最多展示9条列数据,同时少量的列数据也方便用户浏览。建议将重要的列数据居左放置,表格只显示重要的数据,对于次要的数据可以放入详情页。

  UI表现:为了加强纵向数据的对比,可以使用两种方式,1.纵向斑马线,一般用于列与列之间的数据对比,用处有限;2.有时会使用不同粗细的纵向分割线对信息进行区隔,增加同类信息对比性。

  数据长度固定时,一般显示完整数据,具有固定的列宽,比如手机号可以设置150px;

  数据长度不固定时,首先我们应该了解用户的输入内容的情况,比如用户个性签名,我们设置了200字符,但是经过数据分析,发现大多用户的签名长度少于20,那我们可以设置列宽为20,从而保证大多数数据的完整;

  较少情况下,我们设置的数据不能完整的显示数据,但是数据对于用户有比较的重要。那我们可以让用户手动拖拽调整列宽(不影响别的列宽,可能会出现横向滑动的情况)。

  交互形式:对于一些列数据我们可以加上超链接,比如ID,用户称号等。注意区分别的数据,比如可以使用颜色。

  对于数字,建议使用表格数字而非旧式字体和比例字。数字的单位,一般在表头中显示。

  为了便于用户信息的提取,我们可以设计数值的格式。表格数字不是越精确越好,需要多少有效数字就显示多少,不必太多。所以我们可以设置数字的格式 :

  对于数值,我们应该减少用户的计算,通过对比分析数据,在原有的数值上给出差值,升降变化,总计值平均值等分析性数据结果,方便用户的查阅。

  数字是从右向左读的:这是因为,我们对比数字时,首先看个位,然后十位、百位。多数人也是这么学会算数的——从右边开始,向左移动,在移动中传递数字。

  文字信息是从左向右读:这是符合人们的阅读习惯的,一般人们的阅读方式是从左往右,从上往下。当然不同的区域有不同的阅读习惯,比如阿拉伯就是从右往左的阅读习惯。

  通常,表头应当符合数据的对齐方式。这能保持表格竖直方向整洁,营造一致性和上下文环境。

  对于截断数据的展示,我们可以使用气泡弹窗的形式(查看灵活,操作成本低,但是影响查看其他内容)或者是下拉查看(适合查看较多的内容,不会影响查看其他内容,操作成本高)。

  对于数值为0的数据,我们应显示0,数值格式的处理和其他数值相同(小数点等),方便查看;对于无数据,我们可以使用“-”来显示。

  如果对表格中的数据使用了合适的对齐方式,分隔线就会很多余。使用分隔线的首要好处是可以缩小元素间的空间,但仍可以区分各元素。即便要使用分隔线,也应该把颜色尽量减淡,不能妨碍快速浏览所以建议采用相同颜色的具有一定透明度的分割线,减少视觉噪音。

  水平分隔线的用处是最大的,因为它可显著减轻长表格占用的垂直方向的视觉重心,加快大量数据的对比工作,以及随着时间看清趋势。

  单个数据—可以针对单个数据进行编辑,形式可以是框内编辑(不适合长内容),可以浮层编辑,也可以弹窗编辑(会覆盖信息);

  整行数据—一般操作放置在表格的最后一列,建议超过两个的操作,次要操作弹窗显示(节省水平空间,防止误操作),在鼠标hover状态时显示弹窗;

  在针对数据操作过多时,我们可以在选中该条数据时显示针对数据的操作(Gmail)。

  对于单条数据的编辑修改,如果数据内容固定且只有几项,则可以使用下拉菜单的形式;若数据内容不固定,但是数据长度短,可以在单元格内修改;若数据长度不固定,这可以使用弹窗的形式来进行编辑。

  分页器的功能就是加载数据,该功能还有一种方式可以取代分页器,那就是加载更多。

  但是加载更多只适合小数据量,它具有节省空间,同时能给用户一种沉浸式体验。但是这种模式,对于数据量难以把握,操作不灵活。

  声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电线;邮箱:。本站原创内容未经允许不得转载,或转载时需注明出处:西部数码新闻资讯门户表格设计全过程:这次给你讲的明明白白

  本站接受比特币、P2P、大数据、云计算、互联网+相关优质新闻、爆料投稿,立即投稿>

  本站接受比特币、P2P、大数据、云计算、互联网+相关优质新闻、爆料投稿,立即投稿

  为您提供域名,比特币,P2P,大数据,云计算,虚拟主机,域名交易最新资讯报道

  西部数码旗下新闻资讯频道,为您提提供域名,域名交易,大数据,云计算,虚拟主机,区块链,物联网等领域及时、客观的资讯报道!

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。