首页 >> 科技 >>列表

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

网络整理 2020-01-13 22:06:14 作者:上世笑眸

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

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

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

一、设计原则

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

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

 二、表格结构

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

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

容器:容器包含表格的所有内容。

搜索/筛选区域:方便用户快速查询定位数据,一般位于表格上方。

功能性按钮:一般位于表格上方,有时也可以位于表格下方。

表头:起到对于数据内容的解释以及可以附加筛选排序等。

表体:包含行和列数据以及一些操作(可选)。

底栏:底栏包含数据量以及总页数和当前页数以及每页数据量和分页,底栏数据也可以放置在表格顶部。

2.1 搜索/筛选区域

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

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

根据搜索和筛选的属性,我们可以根据实际情况设计搜索和筛选的表现形式。

根据MECE,我们可以归纳出以下的场景:

常用搜索少用筛选,若筛选项多,可以选择隐藏筛选性,筛选少可以展示出来;

搜索和筛选都常用,可以将搜索和筛选都展示出来;

常用筛选少用搜索,筛选和搜索同时展示;

筛选和搜索都不常用,展示搜索隐藏筛选。

搜索

构成:标签,输入框,搜索按钮(可选)

输入:通过输入特定的字段,来查询单一的数据,在表格中有导航的作用。

查询范围:可以查询单个数据类型,也可以查询多个数据类型

搜索结果:根据输入的搜索字段,可能存在空状态。对于搜索结果的排序,可以根据数据的匹配度或者生成时间等排序。

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

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

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

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

筛选

构成:菜单项,单选/复选框(可选),搜索框(可选),筛选按钮(可选)

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

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

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

上海联通信息港 - 为网友提供互联网每日热点内容
上海联通信息港是一个自媒体内容聚合分享平台,为网友提供互联网每日新闻和热点内容分享,今日看点新闻头条增长知识!