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

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

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

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

表格应用

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

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

相关推荐

  • 走进交互设计——感受生活中的交互设计

    交互设计交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的…

    2017-08-01
  • 产品体验分析之7步走(附PPT下载)

    我最近一直在做新产品的策划,方案一个又一个的被毙掉,方向一次又一次的调整,PPT一遍又一遍的改,交互一稿又一稿的画,所以我还在继续努力中,也深深的感受到产品「从0到1」的不容易。产品经理在日常生活中将发现的问题记录下来后经过分析转化为可落地的产品方案,这个过程很复杂,也很容易出错,原因就是思维的过程是不可控的,也就是没有一个相对的衡量「标准」,导致一个现象是想法人人都有,却不一定人人都对,所以产品策划「从0到1」的整个过程十分考究产品经理的功力。

    2017-05-31
  • 交互设计的本质是什么?

    行为逻辑的认知,让我们在设计数字世界的产品时,把注意力放在用户上、放在用户的动机和行为上,以及发生这些行为的媒介和场景。从这个层面去思考数字世界的产品,也许更贴近交互设计的本质。

    2017-04-29
  • 用户体验五要素

    01战略层什么是用户体验:用户在使用产品过程中建立起来的一种纯主观感受。用户体验的重要性:给用户一个积极、高效的体验,他们会持续使用你的产品,产品满足用户某方面的需求并来盈利,帮助人们提高生活质量,提高工作效率,改善人际关系,等等。五要素:战略层、范围层、结构层、框架层、表现层用户体验要素的作用:要素之间相互作用完成任务,创建一个总体的用户体验设计。适用场景:设计:战略层→范围层→结构层→框架层→表现层用户体验:表现层→框架层→结构层→...

    2018-02-06
  • 深度剖析|直播页面中的聊天区

    本文将从设计角度深度剖析聊天区。

    2017-05-20
  • 学而思网校UED部门招聘

    简介INTRODUCTION学而思网校,纽交所上市公司好未来集团旗下品牌,专为3-18岁孩子提供小初高全学科课外教学。UED负责K12在线教育全业务体验闭环的设计工作,我们的团队活力创新、勇往无前,真诚期待你的加入~UI设计师UI DESIGNERS岗位职责负责网校全平台产品体验设计工作;可以主导设计风格,参与设计规范和流程的制定。岗位要求3-5年视觉设计经验,美术、设计、艺术学等专业,本科及以上学历;有移动客户端设计经验更佳;熟悉用户...

    2018-02-16
  • 交互设计师如何设计复杂信息架构产品

    最近忙于一个技术平台类项目,信息架构非常复杂,所以想写一些关于设计复杂信息架构产品的想法和经验。 我们做产品设计的设计师日常工作粗略分一下,可以分为两类,一类是ToC产品,面向消费者的产品,一类是ToB产品…

    2015-04-06
  • 做你老婆,用户体验真差

    洞见(DJ00123987)——不一样的新闻,不一样的故事,数百万人订阅的微信大号。点击标题下蓝字“洞见”免费关注,我们将为您提供有价值、有意思的延伸阅读。作者:青蓝来源:青蓝(ID: qinglansz)没错,这是一篇真诚的吐槽贴。鉴于各位直男的脑回路和女人差异较大,常常不能正确理解老婆大人的本意,今天我特意以你们最爱的电子产品——手机为例,给你们分析一下老婆们的用户体验。01. 外观差评,后盖鼓起,前屏磨花,说好的金属漆还掉了色。小...

    2018-03-25
  • 交互设计笔记整理

    PC与手机对比使用环境pc:固定位置,干扰少,注意力集中,输入方式强大。手机:任何地方,干扰多,注意力难集中,输入方式单一。交互媒介pc:操作精准快速,桌面大显示内容多,过大屏幕会有视觉盲点。手机:手指操作,精准度低、速度慢。使用特点pc:需处理复杂任务,多任务切换,讲究效率和强互动,没有电池流量问题。手机:适合处理简单任务,多任务切换困难,适合各种姿势使用,电池流量问题严重。web与APP界面对比web是书架,内容繁多,一目了然。更直...

    微信热点 2018-04-07
  • 交互设计 | 除了镜子,原来你还能在这发现真实的自己

    Create Your Difference. by CYD艺术设计作品: WHAT DEFINES YOU?现在,艺术家们已经不再为了审美而艺术,也不再为了艺术而艺术.在他们的创作过程中,它们通过各种形式,对身边的或遥远的一切事物进行讽刺、抗议、质疑或推崇,以此向他人传达比文字更立体的新兴概念或特殊感情。而交互装置——这种特殊的装置艺术,由于有我们人类/观众直接的参与,创作者/艺术家/设计师尝试表达的感情更为直观;更由于人机的互动,他...

    2018-05-05