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

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

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

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

表格应用

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

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

相关推荐

  • 浅谈微信应用交互设计

    微信应用相信大家都不陌生,比如前段时间风靡朋友圈的神经猫,就创造了三天过亿访问量的神话,开发一款好玩有趣的微信应用,通过微信朋友圈的自发传播,达到品牌和产品的有效推广,是当下很多企业都在尝试的,但事…

    2017-08-02
  • 各国货币简称及符号

      欧元,英镑,澳元,人民币,马来西亚币,印尼,新加坡币,新西兰,越南,韩币,泰铢,菲律宾,日元,美金等等货币的简称与符号,标准符号。 中国 人民币:元 Renminbi Yuan RMB¥ CNY 1CNY=10 jao (角)1 j…

    交互设计WiKi 2015-09-15
  • 一个产品小白如何理解尼尔森交互原则的?

    上完培训课,又开始投入忙碌工作中,由于目前公司是做汽车后市场服务,并且近期在准备新产品开发事宜,因此每天跟产品经理、研发同事少不了一些探讨。与之前有所不同,现在工作过程中,可能会下意识地用Blues老师讲解的一些知识来思考、理解、验证产品。

    2017-06-01
  • 设计一个完美的搜索框:不可忽视的9个要素

    今天的文章我们来聊聊搜索框的设计,如何让用户尽量节省时间,搜到他们想要的内容。

    2017-05-06
  • 如何正确提示用户进行评价应用

    设计文章 / 交互设计 | 2014-10-15 | 来源:woshipm | 发布者: GUImobile 在App里提示用户“给应用打分”的做法已经相当普遍。但正因为它太普遍了,用户一直被各种评价请求骚扰。我并不认为用户会介意给他们喜欢,并且…

    2014-10-15
  • 这样学Axure,效果显著,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,1800多位同学学习成长,这是1800多位同学的经验贴。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)0基础的Axure新手,如何才能更快达到高薪产品经理的Axu...

    2018-03-18
  • 多媒体H5:移动端最简单的动画制作方案

    了解和使用多媒体制作H5已经成为前端工程师的必备技能。

    2017-05-10
  • 车载系统交互设计畅想Part1:仪表数据展示

    智能车载系统的概念变得越来越火热,智能驾驶的理念也越来越普及。现阶段,国内外各大互联网巨头都在联合传统汽车企业一起探索智能汽车的设计研发。可以预见的是,在不久的将来,驾驶员在车内将更加自由,就像智能手机一样,智能汽车将为驾驶员带来前所未有的丰富体验。本文作者Adhithya,通过一系列的访谈调研,探索现阶段驾驶员在驾驶过程中的行为方式,并依此为未来的智能车载系统的交互方式设计提供了科学的思路。“我知道在手动挡车上转速表的作用,但当我换了自动挡后我就很少去看它了“
    ——被采访人1
    ”我并没有真正的去关注过它,对我来说,这部分信息没有什么意义。“
    ——-被采访人2
    ”可能在爬坡的路面上我会看一下转速表了解一下车况,但当我在城市里平坦的路况行驶时,我很少会看它。“
    ——-被采访人3

    2017-05-01
  • web端和移动端产品设计的区别

    移动设备发展非常迅速,移动端产品越来越多。今天小编来扒一扒web端与移动端产品设计有哪些不同。 场景不同,需求不同 首先,两者对应的需求场景不同,这会相应地导致功能点的优先级变动,进而影响到界面控件和信息…

    交互设计 2015-06-15