今天给各位分享揭秘后台产品经理:表格设计实战技巧解析的知识,其中也会对进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
表各区域介绍.png
表格主要分为五大区域,分别是: 过滤区:主要负责过滤和搜索。操作区:指对整个表进行的操作。页眉:主要包括标题、排序功能等。 文本:数据显示区域。底栏:主要用于统计数据总数,记录当前位置。下面我对表中的各个区域进行解释。
筛选区
筛选区
过滤区的主要功能是过滤和搜索。当表数据类型超过两种时,就需要过滤功能。正确设计筛选区域可以大大提高用户效率。设计安检区域时,应考虑以下几点。
手动查询还是自动查询?如果常用的查询条件是组合几个条件,那么在这种情况下,通常需要填写所有的条件,然后让用户点击查询按钮。因为如果用户想要查询的某一类个体具有多个属性,那么采用组合条件的查询显然更加合理。如下图
如果过滤操作通常是单个条件的独立查询,并且每个过滤条件是相互独立的,那么一般的设计是填写一个条件后自动查询。如下图
Filter case 2.png 单选按钮还是下拉框?有的过滤条件需要对数据进行汇总,有的只需要看单一条件下的数据。
例如,如果状态包括“已打开、已暂停、已存档”,则除了统计各个状态的数据外,还需要对数据进行汇总。这种情况下,最好制作一个单选按钮框,如下图所示。
筛选案例3
如果不需要汇总数据,可以将其显示在下拉框或Tab中,如下图。这里有一个小技巧。如果过滤值少于5个,一般采用tab显示;如果超过5个,则使用下拉框更好;如果超过10个,那么最好在下拉框中添加搜索功能。
过滤案例4.png 关于常用组合如果用户的过滤条件比较复杂,条件的取值比较固定,可以考虑添加常用组合功能。常见的组合过滤主要帮助用户解决繁琐的输入问题,快速进行查询。下图是一种常用的组合设计。
文字案例5-1.png
用户通过点击常用组合即可自动生成过滤条件并进行查询。如果要添加条件组合,可以通过保存当前搜索条件来实现。当进行复杂条件过滤时,需要添加重置按钮,以便用户一次性清除所有过滤条件。如下图所示。
筛选案例5-2 模糊搜索还是精确搜索这里的模糊搜索是指根据用户输入的字符对数据进行模糊匹配。例如,如果您输入“1234”作为SKU代码,系统需要找出该SKU代码中包含“1234”,例如“K123402、K123403、L123401”等;如果要完全匹配“1234”,那就是精确匹配。
模糊匹配一般用于标题和自定义字符串,以过滤掉相似的结果。因为用户不会那么清楚地记住自定义字符串,所以模糊匹配会更方便。
因此,精确匹配一般用于标准编码和唯一标识的字符串,以过滤出准确的结果。比如产品ID、广告关键词等,因为用户只需要关心精确匹配的结果。
表格操作区
表操作区主要对表进行功能操作,如增、删、改、修改表结构等,如下图。
表格操作区案例1.png
一般来说,功能操作是遵从连续性原则使得整个操作过程流畅且合乎逻辑。例如,“批量操作”位于复选框上方,这样用户勾选后,可以自然地移动到顶部继续操作;此外,重要的操作最好通过颜色来区分,并放置在容易访问的地方。例如,“新活动”是核心功能,因此它以橙色标记并放置在左侧。用户一打开页面,视线很容易落到那里。
表格标题区
表格标题区又称为表头,主要包括字段名称、排序、扩展表格等功能。报头的重要作用之一就是对数据进行解释,因此报头中的信息传输必须清晰、准确。
字段名称header中的字段名称应该符合用户的思维习惯,保证用户的理解。如果需要解释,请在字段名称旁边进行说明。
Header Case 1.jpg 一般来说,当字段不超过10个时,可以在一屏上完整显示;当字段超过10个时,建议使用自定义列功能。如果没有必要,不建议设计左右滚动。列表滚动的功能对用户来说不好,操作不方便。
自定义列设置时,可以根据字段的属性进行分类,方便用户检索信息。
标题大小写2.png排序
排序是一个非常重要的功能。如何从海量数据中筛选出符合要求的数据,排序是必不可少的一步。产品经理可以前期收集用户需求,知道哪些字段需要排序。
表头情况3:固定表头
随着表格行数和列数的增加,用户的即时记忆力会遇到一个阈值。根据72原则,当超过这个范围时,用户需要添加工具来帮助浏览表中的数据。否则,用户一滚动,用户甚至不知道这一列数据代表什么。这时候,固定header就是一个好方法。
header case 4.png
表格正文
表格正文中需要注意的点有很多,包括:对齐,分割,行高,信息完整,行内操作,空白单元格,汇总计算,高亮与提示,信息层级等,下面一一解释。
对齐的数据可以大大提高浏览效率,人们的视觉也会更加流畅、自然。一般来说,文本左对齐是为了符合人类的阅读习惯;数字右对齐以方便大小比较;固定长度的按钮或文本一般可以居中对齐。
文字案例1.png分割正确使用斑马线和鼠标悬停高亮背景可以引导用户浏览数据,避免线条错位和混乱。
斑马线帮助用户区分行之间的数据并避免混淆;鼠标悬停突出显示背景是用户交互过程中的辅助工具,可帮助用户识别数据所在的行。
文本案例2 行高文本的行高也是重要参数之一。如果强调在一屏上显示尽可能多的数据,则行高可以设置得小一些;如果强调行中的信息较多,则行高可以设置得较大。
文字案例3.png信息齐全。由于表格宽度有限,当某些字段的数据比较长时,将无法在表格中完整显示。在这种情况下,需要省略一些信息。用户将鼠标悬停即可查看完整信息。
Text case 4.png 内联操作内联操作与弹出窗口编辑或新打开的选项卡编辑相比非常高效。因此,对于经常修改的数据,建议使用内联编辑。
当需要编辑的内容比较小时,可以直接编辑修改,如下图。
文字案例5-1.png
如果需要同时编辑的内容较多,为了提高效率,可以批量填写然后保存,如下图。
Text Case 5-2.png 空白单元格中最好不要留空白单元格,因为这会让用户困惑是否程序有错误或数据为空。建议产品经理与开发人员协商如何显示空数据。一般来说,这不会引起歧义。空数据用“-”表示,零数据用“0”表示。
当汇总计算表字段较多,需要计算数据时,为了减轻用户的心算负担,表格应帮助用户汇总计算相应的数据。
文字案例6 突出显示和提示突出显示关键信息,提示用户注意,帮助用户快速找到关键点,是提高用户体验的方法之一。
文本案例7 信息层面有些表格数据比较深入,可以进行分析。设计表格时应体现此类数据的信息水平。比如下图中的“成本”,也可以分析为单条数据的“成本”,体现信息化程度。
Text case 8-1.png Text case 8-2.png
底栏
最后,是表格的底部列。底柱也是不可缺少的一部分。它的作用是承载主要是告诉用户数据条数以及当前位置。底栏案例1、合理设置每页显示项数需要产品经理前期研究。我们之前制作了一个表格,显示商店中的所有产品。默认每页显示15条,每页最多显示50条。但后来用户反映,即使每页展示50件商品也太少了,因为他的店铺有上千种商品,如果页面很多,翻页效率太低。后来我们改成每页最多显示200条,解决了他的问题。
揭秘后台产品经理:表格设计实战技巧解析的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于、揭秘后台产品经理:表格设计实战技巧解析的信息别忘了在本站进行查找哦。
【揭秘后台产品经理:表格设计实战技巧解析】相关文章:
用户评论
表设计得好好看,一目了然!
有15位网友表示赞同!
做后台产品经理真不容易,还要精通表格设计!
有18位网友表示赞同!
这篇文章让我感觉自己的表格设计水平还有进步空间啊。
有14位网友表示赞同!
原来表格设计也有这么多的讲究,以后可以参考下。
有6位网友表示赞同!
我平时也经常用表格管理数据,看完这篇文章受益匪浅啊。
有5位网友表示赞同!
后台产品经理真是个宝藏职业啊,需要这么多技能!
有9位网友表示赞同!
数据可视化很重要,希望看到更多关于表格设计的文章分享。
有16位网友表示赞同!
感觉这篇文章写的细致透彻,对表格设计做了详细的说明。
有16位网友表示赞同!
我最近也在学习前端设计,看到这些表格设计真的很有启发!
有17位网友表示赞同!
做后台产品经理确实需要很多专业知识和技能,希望以后有机会深入了解。
有11位网友表示赞同!
表格设计要简洁易懂,这样才能方便用户浏览数据,作者说得对!
有8位网友表示赞同!
学习这篇文章里的方法,我的表格能更漂亮了!
有12位网友表示赞同!
后台产品经理的职责范围真是太广了,让我感觉压力山大!
有20位网友表示赞同!
希望这个文章能帮助更多的人了解后台产品的设计理念!
有19位网友表示赞同!
数据可视化真的很有意思,可以更好地展示数据背后的故事。
有18位网友表示赞同!
表格设计的原则和技巧都很实用,值得收藏。
有12位网友表示赞同!
看了这篇文章后,我对表格设计有了更深入的认识。
有19位网友表示赞同!
学习好这篇关于表格设计的文章,提升自己的产品经理能力!
有7位网友表示赞同!
期待作者分享更多关于数据可视化的精彩内容!
有7位网友表示赞同!