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

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

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

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

表格应用

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

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

相关推荐

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

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

    2018-03-18
  • 终极神器!Sketch 一键转成 PSD 格式!

    曾经有很多人问图翼君Sketch转PSD怎么弄?今天就给大家分享一神器,大招一放So easy!工具下载地址关注本公众号回复“39”支持PSD、XCF、Sketch、Any格式使用方法:1、打开神器,选择Open Frome Computer 打开要转换的Sketch文件2、选择你的Sketch文件,工作台会显示你的文件3、选择右上角File  -  选择Save as PSD, 保存成PSD文件。4、保存后,浏览器会自动下载转好的PS...

    2018-04-09
  • 设计师保持画草图是个不错的习惯

    一名优秀的设计师的经验之谈。 我从不敢放眼将来长远的看过去若干年,也许正是这个原因才让自己对很多事情不那么在意。其实我是个很安心于能让自己安心的事物的人,只是这样的事物随着时间的推移而越来越少;自己所…

    2015-05-19
  • 医生如何离开体制创业、卓越的用户体验如何打造 | 首届妇幼医疗高峰论坛精彩环节分享

    本文编辑:卢维晨 要笑尘“2018首届妇幼医疗高峰论坛”于2018年4月21日在上海嘉里大酒店开幕。本次会议由上海春田医院管理有限公司主办,中国非公立医疗机构协会妇产科专业委员会作为学术支持。来自国际、国内知名的妇儿医疗机构投资者、拥有者、运营管理者、妇产儿科医生、医药企业、医疗器械企业、孕婴童产业、互联网创新企业等诸多行业专家领袖出席了本届论坛。本次大会上,隆重发布了中国首部以妇儿医疗机构为主题的《2018中国妇儿医疗机构白皮书》,本...

    2018-04-22
  • 小白学Axure,这样学更高效,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第6期开启报名!从第1期到现在,1400多位同学学习成长,好评如潮。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)先来看看学习效果全程实操,学完高效制作原型,做出高保真认真学完,原型效率提升,更...

    2018-03-04
  • 关于用户体验你应该知道的8件事

    用户体验(User Experience,以下简称UX)是一个含义很广泛的术语,近两年来我们从越来越多的人们口中听到这个词,但是并不是每个人都真正了解究竟什么是用户体验。人们对于用户体验有很多误解,希望这篇文章可以帮助你们对于用户体验有一个更好的认识。

    2017-05-05
  • 优逸客【交互设计】直播课今晚8:00正式开播!

    提起交互设计,它既没有界面视觉设计绚丽,也没有用户体验设计有趣,看起来枯燥乏味,学起来复杂难懂,但它却是整个产品流程中最核心的部分之一。一个牛X的交互设计师是睥睨天下的,无论薪资还是技术。(以上海地区为例)但在通往牛X的路上……很多人还没开始就放弃了经常会有人说交互设计好像已经趋于饱和,现在从事这个行业没机会了。照这么说,公务员是我见过的饱和度最高的行业了,但每年还是有那么多人争得头破血流要为人民服务。就像金字塔一样,往往最底层的那一部...

    2018-04-19
  • “想要”之前是“需要”,用户体验设计的需求层次长啥样?【UXRen译#155】

    作者: Interaction Design Foundation |  翻译:代代子,校审:Duke   用户更倾向于选择那些能满足自己“需求”,而非迎合自己“欲望”的产品。美国心理学家亚伯拉罕·马斯洛提出的需求层次理论,详细阐述了人类的心理…

    交互专题 2017-08-07
  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22
  • 【素描Sketch】细节之处韵匠心

    ( 本宣传资料仅为要约邀请,部分图片源于网络,如有侵权请联系删除,所载全部内容仅供参考均不构成要约,一切以政府批准文件与开发商签订的《重庆市商品房买卖合同》及其附件约定为准。周边已规划及/或已建成及/或规划中及/或建设中的公共设施(包括但不限于变电站、加油站、明渠、高压线、轨道环线、商业中心、学校、公园、酒店、医院等)及规划用地,均以政府有关部门最终核准及审批文件为准。南岸区融侨半岛融侨城二期C区(营销推广名:金辉耀江府),开发商:重庆...

    2018-03-14