想让表格清晰又好用?这份排版设计技巧指南帮你搞定
表格的组成元素方面,优秀表格的设计技巧方面,表格的操作交互方面,本文给你一份全面的设计指南。
一、表格应用
表格,作为一种常见的方式,可供来用于把信息组织整理起来,常常会被运用在信息收集(展示环节)、对数据进行分析这一行为里,以及归纳整理等相关的活动当中,在互联网产品应用那个所属范畴之内,是相当适宜于去做的过程:
1. 需要组织和展示大量信息数据
表格的结构具备简洁的特性,其分隔归纳呈现出清晰明确的状态,格外适宜用于对大量信息内容进行组织以及展示,并且在用户浏览信息以及获取信息方面具备易于操作的特点。
2. 当信息数据需要进行多种复杂操作时
需要对信息进行排序、搜索、筛选、分页、自定义选项等操作。
3. 信息上下间的对比
表格进行归纳,表格进行分类,进而让信息之间容易形成对比,从而方便用户能够快速去查询其中存在的差异,以及查询其中存在的变化,还有查询其中存在的关联,以及查询其中存在的区别,。
二、表格组成要素
表格的基本组成:标题+表头+单元格。
三、优秀表格设计技巧
1. 行与列
表格之所成,乃行与列之合也,行与列其变,予表格多样之特质焉。
行构成了单元格的长,列构成了单元格的高,不同的长与高存在着疏密的分别,有着充实以及透气的感觉。
依据目的以及信息主体的有所不同,能够借助行和列的显与隐的变化,进而更为良好地达成信息的传达。
原本隐藏起来的纵向的线,现在变得更加强调行的特性,如此一来,横向信息就更加连续通畅,进而不强调纵向上下信息之间存在的对比了。
显现纵向的线,使上下行之间的信息增加了对比性。
2. 对齐,高效的信息获取方式
将表格内的信息进行对齐,会更能体现规范,从而易于理解,给予用户视觉方面的统一感受,并且让视线的流动变得顺畅,进而能够使人迅速捕捉到所需的内容。
3. 减少视觉噪音,有效传达为本
表格的服务本质在于信息内容能够得到有效传达,就表格自身来讲堪称是隐形的,要减少用户的注意力,在确保整体结构的那个基础之上,尽力致使所谓的视觉装饰减少或者削弱。
4. 精简表头,专业术语给予解释
表头在具备能够概括的情形时,要尽可能做到简练且准确,通常可依据上下文的关系予以减短简化,以此达成节省表格头部的空间以及减轻视觉压力的效果。
同样,对于专业术语或用户不常见的名词应给予一定的帮助说明。
5. 减少计算,为用户多想一步
用当前数据,依据历史上的数据,给出差值、总计这类处理性结果,能直达用户目标也就是获取信息,减少心算麻烦,也减掉线下处理麻烦。一般数据对比常用,通过比较当前数据与历史数据 获取更多直观信息,像股票数据变化,音乐排行榜排名变化等 。
6. 空白数据,由「-」填充
表格里头常常会呈现出空数据或者无数据这般的状况,留白处置会给用户带来一定程度的困惑以及误解,难道是系统没加载出来吗?明智的那个做法,是采用「-」去填充显示 。
7. 视觉层级
通过对背景、放大、颜色等方面进行处理,应用 icon 图标,能够让重要信息得以突出,区分不同功能模块(比如表头与信息内容),活跃表格氛围,还能增加视觉层次感等效果。
四、表格的操作交互
1. 操作
针对表格所进行的操作,大体上而言,可以划分成显性操作以及隐形操作这两种类型,显性操作乃是指,那些操作选项会显示在表格行内,呈现出具备清楚明显易于观察的直观程度, 。
隐蔽性的操作,直至因鼠标挪移停顿或者进行勾选动作之际,才会将操作可选项目予以展示,如此一来,能够使得界面呈现出简洁且明快的样态,进而可以减轻空间上所存在的压力,还能够减少干扰 。
2. 排序,让信息有序起来
能够使那些并非按照顺序排列的信息内容,转变成具有顺序的排列状态,这种排列存在着升序排列以及降序排列这两种方式,而且通常是应用在数据方面、时间方面、数量方面 。
3. 搜索和筛选,查找更方便
去大量的表格信息里头,逐个查找就像大海捞针那般困难啦,然而借着关键字搜索以及条件筛选,能够帮用户迅速地寻到所需的信息内容哦。
4. 固定表头,一目了然
面对丰富的情况之下存在着众多表格,屏幕既然有限,用户被迫去拉动横向或者纵向滚动条以阅读信息,表头固定,能使用户懂得当前所读取的单元格消息具备哪些是属性并非存在不知信息究竟有怎明确表达内容该如何明白的状况,表头固定,是一种展示界面友好性的具体呈现。
5. 分页固定
要是表格采用分页处理方式,那么分页要么处于上部,要么处于下部,要么上下部都存在,这种分页固定的情况,省却了用户非得翻到顶部或者底部去进行操作的那种麻烦 。
6. 全选操作,效率加倍
假设表格呈现分页状态,于特定情形之下实施全选操作时,就得对单页悉数选中以及整张表格全部选中这两种情况予以考量了,然而瀑布流式的加载方式在这方面就无需进行那样的区分了。
7. 操作即反馈
鼠标指针悬停于表格行或者列之际,予以变化提示,于信息列数较多之时尤为关键,可使人捕捉当下所在位置,避免视觉上出现在错行状况,能减轻人的心理压力,还可增添掌控感。
8. 调整列宽度,查看完整数据
对列的宽度实施允许调整的操作,目的在于查看更为完整的缩略数据。针对被截断的数据,在默认状况下,当鼠标进行悬停这一动作时,支持借助tips来显示完整后的数据。
9. 水平滚动,固定首尾列
在呈现大型数据集之际,水平滚动之事难以避免,借助横向滚动去查看其余数据。把首列予以固定,若其中涵盖勾选操作,那么一并固定,以此让用户能够把数据跟对象进行对应 。
若尾列包含列表操作,也将其进行固定,方便用户直接操作。
10. 右侧抽屉,更多详情
单击行链接,右侧弹出抽屉显示其他详细信息。
11. 内联操作
允许用户在表格中直接修改数据,而无需到单独的编辑页面。
12. 根据所需提供相应的自定义和设置
作为服务企业应用的数据表格,其本身信息项目极为众多,并且要满足不同行业、不同角色的需求,默认表格通常会提供通用的字段指标,随后用户能够依据自身所需,添加或者调整系统所提供的其他字段指标,或者进行自定义操作,如此便让表格具备了弹性化的特征,从而满足个性需求。
总结
任何堪称优秀的表格,从本质上来说,皆是朝着用户所需要的那个角度,去开展设计服务之举,还要有效地将信息内容予以传达 。
使得用户能够进行扫描信息,具备分析信息的条件,拥有比较信息的可能,达成过滤信息的状况,实现排序信息的情形,完成操作信息的情况,进而获取洞察的良好的数据表格 。

请小编喝杯咖啡吧!