网易设计师：B端产品常用Web 列表设计模式总结

网易UEDC – 仉长娟 ：从事 B 端品交互设计工作半年时里，有幸接触了开发和运维员 B 端业务类列表交互设计工作。为了便后续在 B 端品设计过程可以更加高效高质量进列表交互设计，结合自己在实工作遇到列表类型结了 web 列表设计的常用基础列表模式，以供大家参考。

本篇文章所介绍列表设计主要在列表内元素和操作按钮（内操作）展示上，暂不括列表查询、筛选以及列表相关功能。

一、基础型列表

场：web 列表中基础的表样式，用业务相关的各项数据的平铺展示，通常操按钮置表最右。横向基础表的纵列数据项不宜，时页面大量的数据项容易造成用户的视疲劳，并且出现横向滚动条从而降低用户操的易用。

二、网格型列表

场景：网格列表的信息承载内多，单一网格内可展示多行信息。数据项之间的界清晰，方便对网格内的数据行对比，用于需展示业务数据的需求场景。操作按钮根据业务需求用户需求可置于列表右侧或单网格内。

三、主从型列表

景：B 端产品业景备多化的点，实际工作中常常会遇列表中非一 item 展示的需求，item 之间除常见的并列关系，还存在从属关系、递进关系等。对于主从或递进关系的列表，笔者建议主从 item 总数 ≤3，且不适宜对每个主 item 进行默认展开的景，因为 B 端产品的业数据量通常较大，默认展开多个主 item 对服器的性能损耗较大。建议每次展开一条主 item，其主 item 呈收起状。

当主 item下的从属表的行数较多时，可采取分加载的方式，例如默认展示10条数据，点击查看多时可以继续请求后端数据行展示。综，对于主从列表的展示形式，设师可根据实际的用户需求发实的便捷性性能损耗的低性方面出发行从优考虑。

四、综合型列表

景：综型列表适用于业数据展示复杂的景。列表数据之间既包含并列关系，包含从属关系等。

综合型列表常常伴随用户复杂的操作，如图所示，既包含对不同环境下 key 的查看、下载、修改以及多的操作，又包含对整条 key 的移动、删除操作。基于综合型表格可方便对业务数据行组合、分解重新布局排列。

五、列表设计思路总结

通过对作过程中遇到的列表设的总结，笔者发列表设均可以依据纵横相间的网格列表基础行扩展。以网格列表基础，对不同的单元格行重组拆解可衍出多种不同类型的列表，如下图所示。然后，以衍列表基础，设师可一采取微交互的计方式来表现不同数据之间的矩阵、从属、递进、并列等关系。

除以上对列表计布局的总结，笔者也从行内操作的角度总结出种类型的列表：操作显现型列表和操作隐现型列表。

1. 操作显现型列表

场景：一方面当列表中纵列数据较时，页面有足够的空间于展现有的操作按钮，此时操作按钮外置更直观，户可一目了然的了解到对当前列表的有操作；另一方面就操作使频率而言，频率使场景的操作按钮需要外置，例如当户在查看列表时80%上时间的都是在进行编辑操作时，编辑按钮外置更易于户点击，符合户的心预期。

2. 操作隐现列表

场景：

• 一方面当列表中纵列数据时，页面缺少够的空间展现所有的操按钮，此时操按钮进行隐现展示，使用「更」或特定 icon 来标识有更操，为方便用户操在鼠标 hover 时展现所有操按钮；
• 另操作使用频率和危险性而言，低频率使用场景下操作按钮或危险性操作按钮可进隐藏展示。用户在击危险按钮时可能会带来破坏性操作，此时按钮进隐藏可增加按钮操作难度从而减少用户误触率。

六、本文总结

对 web 端列表设的总结可以方便应 B 端产品突出特点：

• 通用性：B 端产品计有其通用性的计点，大部产品业的列表计形式类似，因此列表计的复用性较，总结的列表计可覆盖大部 B 端产品业。
• 性化：B 端产品业务相对复杂，业务场景多样化，产品设存性化的倾向。因此，设师可以已总结的设列表样式结合所负责的业务特点行微创新，提高设效率。

另外，在列表计的过程中，笔者还有一些悟建议大家享：

• 避免列表 item 的横向展示信息过长：当横向的展示信息过长（包含 hover 时展示的信息）超过一屏时，会现横向滚条。对于使 MAC 端的户，通过触摸进行横向和竖向滚较为方，但是对于 PC 端（要是台式机）户而言，需要鼠标滑横向滚条查看一屏外的信息，且对于单条 item 的操作按钮置于列表最右侧，每次点击操作按钮需要先滑滚条，导致操作成本和对屏幕展示信息的记忆成本，而产的易性降低。
• 适当采取表头冻结的方式：B 端产品的列表数据量大，用户在通过滚动条上下滚动查列表若表头随列表向上滚动，那用户有可能会迷失，无法判断当前列表中字段的含义。将表头在随列表向上滚动的过程中固定于页面顶部，方便用户实了解当前字段的含义，可在细之提升用户体验。
• 增强列表设的观性：根据审可用性效果（人们认观的设比那些被认不太观的设直观），清晰、观的列表设可提高产品的可用性。B 端产品的业务逻辑复杂，且理解门槛很高，易令用户感到枯燥。列表设中，通过字体小、颜色、粗细，列表背景色，状态标识 icon，tag 清晰展示业务内，可以提高用户愉悦感，营造良好的用户体验。

欢迎关注作者「网易UEDC」的公众号：