产品设计中关于表格设计的一些经验分享

由于长时间主导后台产品的设计服务,表格的大量应用,总结了些许经验,通过半个月的断断续续的整理归纳,希望对你有所帮助,欢迎阅读!

由于长时间主导后台产品的设计服务,表格的大量应用,总结了些许经验,通过半个月的断断续续的整理归纳,希望对你有所帮助,欢迎阅读!

产品设计中关于表格设计的一些经验分享

表格应用

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

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

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

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

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

3.信息上下间的对比

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

表格组成要素

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

产品设计中关于表格设计的一些经验分享

标题:表格信息内容的整体概括;

表头:表格信息的属性分类或基本概括;

单元格:具体信息内容的填充区域。

优秀表格设计技巧

1.行与列

表格的组成,就是行与列的组合,行与列的变化,赋予了表格多样性的特点。
行与列构成了单元格的长与高,不同的长高会有疏密之分,充实与透气之感。
根据目的及信息主体的不同,可通过行与列的显隐变化,来更好的满足信息的传达。
隐藏了纵向的线,更加强调行的特性,使横向信息更加连续通畅,则不强调纵向上下信息之间的对比;

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

2.对齐,高效的信息获取方式
表格内的信息通过对齐,会更加规范易理解,给用户视觉上的统一感,且视线流动顺畅,能够让人快速的捕捉到所要的内容。
文本信息左对齐,因为现代人的阅读方式习惯从左到右,符合正常的心智;
数据信息右对齐,更加方便数字大小的直观对比;
固定内容居中对齐,更好的信息呈现及表格空间的节省;
表头与信息内容对齐方式一致,一致性以达到简化,降低视觉噪音。

产品设计中关于表格设计的一些经验分享

3.减少视觉噪音,有效传达为本
信息内容的有效传达是表格的服务本质,就表格本身而言应该是隐型的,减少用户注意力,在保证整体结构的基础上,尽量减少或削弱所谓的视觉装饰。

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

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

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

产品设计中关于表格设计的一些经验分享

6.空白数据,由“-”填充

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

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

表格的操作交互

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

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

4.固定表头,一目了然
当阅读丰富且繁多的表格时,由于屏幕有限,用户不得不拖动横向或纵向滚动条来阅读信息,固定表头,能过让用户明白当前单元格内信息的属性而不至于不知道该信息的意思,固定表头,也是一种界面友好性的体现。

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

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

产品设计中关于表格设计的一些经验分享

总结

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

本文为作者@Wing Hu原创发布于人人都是产品经理,未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/27510/

(0)
CatherineCatherine
上一篇 2017-05-18 01:45
下一篇 2017-05-18 03:32

相关推荐

  • 如何提高用户体验

    不同复杂的需求需不同的设计例如:一个非常简单的优化,不会涉及太多修改和分析,就不需要过多冗余的内容;一个复杂庞大的需求,需要复杂的分析和展现。设计前,需要对需求的复杂度有认知,明确该采用什么方式来展现设计内容。绿色区域很容易触及、黄色代表需要展开,而红色代表用户需要改变设备手持方式将视觉简化,隐藏一切不必要的操作,注定用户认知成本的增加,不利用各个模块的跳转:突出某些功能的同时,也不必避免其他的内容被感知。不同的方式,可视化的表达,体验...

    2018-03-21
  • 儿童键盘输入交互方式探讨:为熊孩子设计的输入法

    想必针对婴幼儿用户所设计的产品出发点与普通的产品设计出发点一定有所不同,那么在设计幼儿产品时,应该考虑哪些交互细节点呢?文章以一款儿童输入法为例,为我们解读了在儿童产品设计过程中该注意的一些交互细节点。

    2017-04-27
  • 阿里自研UED计件平台技术解析

    从天猫到菜鸟,从双11到造物节,在阿里巴巴,除了来自集团的UED团队外,还有一支700余人的外包团队,一起创造着阿里视觉神话。阿里的UED外包同学们每年会收到来自阿里巴巴集团50多个业务方提出的十余万外包需求。如何协调外包设计师与需求方之间的配合,并且给到外包同学合理结算价格,成为阿里UED外包管理的一大难点。以往,阿里巴巴也会用一些简单的需求分发系统来应对。但由于实际业务场景的复杂性,需求在分配上无法做到合理与精准。加上缺乏评价和追踪...

    2018-02-01
  • 从会计到交互设计,她用社会热点打动皇家艺术学院招生官!

    本科学的是会计研究生申请的却是交互设计零基础、跨专业却能在短短一年时间拿到5所顶尖艺术院校的offerQS世界艺术类大学排名第一的皇艺和享誉世界的英国伦艺都向她抛出了橄榄枝从西单骑摩拜到望京全程3个多小时收集了20多个单车乱堆积地点采访了数十位大爷和小朋友回家腿痛了整整一周只为做一个项目的调研成长的路上总是布满荆棘但坚持就是胜利杜娜/研究生/交互设计皇家艺术学院预科伦敦传媒学院格拉斯哥艺术学院金斯顿大学谢菲尔德哈勒姆大学杜娜offer(...

    2018-04-25
  • 什么是交互设计?

    这是我在知乎上的「什么是交互设计?」的一篇回答,重新梳理了一下逻辑,分享给大家。(长文预警 : 阅读时间 15 分钟)如果我们问,交互设计是什么?从网上各种定义中似乎能很快就能知道答案。交互设计,又称互动设计(Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域。在于定义人造物的行为方式(the “interaction”,即人工制品在特定场景下的反应方式)相关的界面。—— 来自 I...

    2018-02-03
  • 对话式交互设计流程

    上一篇文章介绍了自然对话的基础概念,学习了谷歌对于人类自然对话的研究和理解。本文将通过一个简单的案例来介绍谷歌推荐的对话式交互设计流程,以及本人对该流程与常规的体验设计流程异同之处的对比分析。设计流程1.选择适合的使用场景对话式交互界面的使用场景通常是简单直观的。当考虑任务场景的时候会想到游戏,因为游戏是低风险的。但是游戏界面的设计必须要能够满足用户的期望,以免使用户感到无聊。猜数字的小游戏可以作为对话式界面设计的一个很好的例子,不要求...

    2018-03-31
  • 设计流程、交互设计进阶、空状态设计

    设计作品源于设计师的自我发现、情感和创造,在日常工作中我们加入字体、颜色、空间准则来让在我们感性的表达设计美学基础上更理性的表达设计思维;以上这些是众所周知的基本法则,是设计具备的基本能力;科学的、合理的、为用户设计才是设计师价值的体现。那么如何让我们的设计更理性?在长期跟一条产品线的工作过程中,我们会发现每天做着很多事情,不知道会不会有以下感觉:1.感觉离用户很远;2.感觉对用户数据的增长好像没有什么明显帮助。那么用户增长和设计有什么...

    2018-03-15
  • 国服筹备进度公开 将重点打造用户体验和品牌社会影响力

    4月22日UP2018腾讯新文创生态大会(以下简称UP大会)当晚,腾讯于北京举办了一场《绝地求生》国服生态交流会。本次交流会邀请了来自各大硬件厂商和直播平台的代表与《人民日报》、《解放军报》、中央广播电视总台等十余家主流媒体的嘉宾参加。腾讯游戏副总裁黄凌冬、PUBG公司中国区总经理郑秀英、PUBG开发室室长李昌浩、PUBG公司创意总监Brendan Greene、腾讯互动娱乐合作市场部总经理朱峥嵘、腾讯互动娱乐PGame合作产品中心总经...

    2018-04-25
  • 我花了20个小时研究3个按钮

    真的……我没疯……“Andrew,我们做了几个很厉害的新功能,测试一下吧。”
    “好的,当然。”
    “嘿,你甚至会忍不住写篇文章来介绍的!”
    “呃……”真理:深入挖掘总是对的。真理:努力寻找方法衡量用户的体验真理:在展开真实的访谈之前,非常有必要做一下实验

    2017-05-04
  • 交互设计的5个常见错误

    交互设计从来都不容易。它包括了用户行为的深度分析,和一丝不苟的规划。随着新技术和交互设计模式的出现,事情并不会变容易。 艳丽的图片、顺畅的鼠标悬停效果和意外的动画,不再那么容易引起用户注意了。但难题却…

    2015-11-09