赞助商
立即赞助

可能是最详细的表格设计完全手册!

产品经验3年前 (2021)发布 流光
3.7K 0 0

本文从表格的组成元素、优秀表格的设计技巧、表格的操作交互等,给你一份全面的设计指南。

一、表格应用

表格,是一种常见的信息组织整理手段,常用于信息收集(展示)、数据分析、归纳整理等活动中,在互联网产品应用中,非常适合于:

1. 需要组织和展示大量信息数据

表格结构简单,分隔归纳明确,特别适合组织和展示大量的信息内容,且易于用户浏览和获取信息。

2. 当信息数据需要进行多种复杂操作时

需要对信息进行排序、搜索、筛选、分页、自定义选项等操作。

3. 信息上下间的对比

表格的归纳与分类,使信息之间易于对比,便于用户快速查询其中的差异与变化、关联和区别。

二、表格组成要素

表格的基本组成:标题+表头+单元格。

可能是最详细的表格设计完全手册!

  • 标题:表息概括;
  • 表头:表格信息的属性分类或基本概括;
  • 单元格:具体信息内容的填充区域。

三、优秀表格设计技巧

1. 行与列

表格的组成,就是行与列的组合,行与列的变化,赋予了表格多样性的特点。

列构,疏密,充透。

根据目的及信息主体的不同,可通过行与列的显隐变化,来更好的满足信息的传达。

隐藏了纵向的线,更加强调行的特性,使横向信息更加连续通畅,则不强调纵向上下信息之间的对比;

可能是最详细的表格设计完全手册!

显现纵向的线,使上下行之间的信息增加了对比性。

可能是最详细的表格设计完全手册!

2. 对齐,高效的信息获取方式

表格内的信息通过对齐,会更加规范易理解,给用户视觉上的统一感,且视线流动顺畅,能够让人快速的捕捉到所要的内容。

  • 息左齐,阅读习惯从左右,符智;
  • 数据信息右对齐,更加方便数字大小的直观对比;
  • 固定内容居中对齐,更好的信息呈现及表格空间的节省;
  • 表头与信息内容对齐方式一致,一致性以达到简化,降低视觉噪音。

可能是最详细的表格设计完全手册!

3. 减视噪音,效传

息效传表质,表身言应该隐形,减户注,证结构基础,尽减或削弱谓视。

可能是最详细的表格设计完全手册!

4. 精简表头,专业术语给予解释

表头在能够概括的情况下,尽量简练、准确,一般可根据上下文关系来进行减短简化,以达到节省表格头部空间和减轻视觉压力的作用。

可能是最详细的表格设计完全手册!

同样,对于专业术语或用户不常见的名词应给予一定的帮助说明。

可能是最详细的表格设计完全手册!

5. 减少计算,为用户多想一步

根据当前数据,并在历史数据的基础上给出差值、总计等处理性的结果,可以直达用户所需即获取信息的目标,从而减少用户心算或者线下处理的麻烦。一般在数据对比中较常用到,通过当前数据和历史数据进行比较,来获得更多的直观信息,例如股票的数据变化、音乐排行榜排名变化等。

可能是最详细的表格设计完全手册!

6. 空白数据,由「-」填充

表格中经常会出现空数据或无数据的情况,留白处理会给用户造成一定的困惑和误解,是系统没有加载出来吗?明智的做法,是用「-」来填充显示。

可能是最详细的表格设计完全手册!

7. 视觉层级

可通过背景、放大、颜色等处理,icon图标的应用,可使重要信息突出,不同功能模块区分(例如:表头与信息内容)、活跃表格氛围,增加视觉层次感等效果。

可能是最详细的表格设计完全手册!

四、表格的操作交互

1. 操作

对表格操作大体可分为显性操作和隐形操作。显性操作,指操作选项显示在行内,明显直观;

可能是最详细的表格设计完全手册!

隐性操作,当鼠标悬停时或勾选才显示操作选项,使界面简洁明快,可减轻空间压力,减少干扰。

可能是最详细的表格设计完全手册!

可能是最详细的表格设计完全手册!

2. 排序,让信息有序起来

可以让无序信息内容进行有序排列,排序分为升序和降序,一般用在数据、时间、数量上。

可能是最详细的表格设计完全手册!

3. 搜索和筛选,查找更方便

在大量的表格信息中,一一查找犹如大海捞针,但通过关键字搜索和条件筛选能够帮助用户快速的找到所需要的信息内容。

可能是最详细的表格设计完全手册!

4. 固表,目

阅读繁表,由屏幕,户拖或纵滚条阅读息,固表,够户息属至该息思,固表,界。

可能是最详细的表格设计完全手册!

5. 分页固定

若表格是分页处理的,分页会放在上部、下部或上下部均有,分页固定省去了用户需要翻到顶部或底部进行操作的麻烦。

可能是最详细的表格设计完全手册!

6. 全选操作,效率加倍

若表格是分页,在某些情况下全选则需要考虑分为单页全选和整表全选,瀑布流式的加载就不需要做区分了。

可能是最详细的表格设计完全手册!

7. 操作即反馈

当鼠标指针悬停在表格列或行时,给予变化提示,特别在信息列数较多的情况下更为重要,能够让人捕捉到所在的位置,而不至于视觉上的错行,能够降低人的心理压力和增加掌控感。

可能是最详细的表格设计完全手册!

8. 调整列宽度,查看完整数据

允许调整列的宽度来查看更加完整的缩略数据。被截断的数据,默认支持鼠标悬停时 tips 显示完整数据。

可能是最详细的表格设计完全手册!

9. 滚,固首尾列

呈数据,滚避免,滚查它数据。将首列固(若含勾操,则固),户将数据象应。

可能是最详细的表格设计完全手册!

若尾列含列表操,将固,户操。

可能是最详细的表格设计完全手册!

10. 右侧抽屉,更多详情

单击行链接,右侧弹出抽屉显示其他详细信息。

可能是最详细的表格设计完全手册!

11. 内联操作

允许用户在表格中直接修改数据,而无需到单独的编辑页面。

可能是最详细的表格设计完全手册!

12. 根据所需提供相应的自定义和设置

服务于企业应用的数据表格,本身信息项目繁多,且需要满足不同行业不同角色的需求,默认表格一般会提供通用的字段指标,然后用户可根据自身所需添加或调整系统所提供的其它字段指标或进行自定义操作,让表格具有了弹性化的特征,以满足个性需求。

可能是最详细的表格设计完全手册!

总结

任何优秀的表格,本质上都是以用户所需的角度去设计服务,并有效的传达信息内容。

良好的数据表格允许用户对信息进行扫描、分析、比较、过滤、排序和操作,以获取洞察。

欢迎关注作者的微信公众号:「int-PD」

可能是最详细的表格设计完全手册!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

本文从表格的组成元素、优秀表格的设计技巧、表格的操作交互等,给你一份全面的设计指南。 一、表格应用 表格,是一种常见的...
表格
目前我主要深耕于B端设计中,深知B端表格设计与C端有很大的不同,无论是表格的展示形式以及承载内容上都有非常大的差异。而现...
B端产品
互联网下半场,所有的比拼都在产品体验;然而“体验”是一个非常抽象的词,我们怎么把一个抽象的概念拆解成可落地执行的策略,...
两章一分法
网易UEDC – 杨添琴 :设计思维是以传统分析思维方式为蓝本,融合视觉化和社会化思考的创新思维方式。它帮助设计师以用户为中...
全链路设计
在昨天引爆互联网的一个热点想必就是美团 APP 更新了,已经刷爆了朋友圈,相信大家也都看见了。 △ 文中配图均来自美团官方...
改版设计
当我们谈及「用户」和「受众」的时候,提到最多的词大概是「现在的年轻人」,而这个词在很多时候会被置换为「00后」、「05后...
Z世代
服务设计也是我刚刚开始研究的阶段,希望大家一起探讨。 欢迎关注作者的公众号:「大发大大发」,一起探索科学的设计方法! ...
服务设计
最近一直在恶补关于结构化思维的知识,作为一名视觉设计师的我,经常使用发散思维的方式来工作和思考。虽然在工作中常常能冒...
结构化思维