发布时间：2022-9-28 分类： 行业资讯
在B-end产品交互设计的半年中，作者很幸运地接触了B端业务类列表交互设计工作，用于开发和运维人员。为了便于随后在B-end产品设计过程中进行更高效，更高质量的列表交互式设计，作者总结了Web列表设计的常见基本列表模式，并结合实际工作中遇到的列表类型。供你参考。 。
本文介绍的列表设计主要关注列表中元素和操作按钮（内联操作）的显示，不包括列表外的查询，过滤和相关功能。
(一)基础型列表
场景：Web列表中的基本表格样式用于平铺显示与业务相关的各种数据。通常，操作按钮位于表格的最右侧。水平基表的列数据项不应太多。当太多页面很大时，数据项可能导致用户的视觉疲劳，并且水平滚动条可能看起来会降低用户的操作简易性。
(二)网格型列表
场景：网格列表的信息包含更多内容，并且可以在单个网格中显示多行信息。数据项之间的界限是明确的，并且比较网格中的数据是方便的，这适合于需要显示业务数据量的需求场景。操作按钮可以放在列表的右侧，也可以放在单个网格中，具体取决于业务需求和用户需求。
(三)主从型列表
场景：B-end产品的业务场景具有多样化的功能。在实际工作中，我们经常会遇到列表中非单项显示的要求。除了项目之间的共同并行关系之外，还存在从属关系和渐进关系。对于主 - 从或渐进关系列表，我建议主 - 从总数≤ 3，并不适合每个主要项目的默认扩展，因为B-end产品的业务数据量通常较大，默认扩展倍数主要项目对服务器有很大的性能损失。建议每次扩展一个主项目，其他主要项目处于折叠状态。
当主项下的从属表中的行数较大时，可以采用逐步加载方法。例如，默认显示10个数据，当视图更多时，可以连续请求后端数据显示。总之，对于主从列表的显示形式，设计者可以根据实际用户需求和开发的便利性以及最小的性能损失来做出有利的考虑。
(四)综合型列表
场景：综合列表适用于业务数据显示复杂场景。列表数据之间既包含并列关系，又包含从属关系等。
集成列表通常伴随着用户的复杂操作。如上图所示，它包括对不同环境中的键的查看，下载，修改和更多操作，以及移动和删除整个键。可以根据综合表轻松组合，分解和重新安排业务数据。
列表设计思路总结：
通过对工作过程中遇到的列表设计的总结，作者发现列表设计可以基于垂直和水平阶段之间的网格列表进行扩展。基于网格列表，重新组织和分解不同的单元格可以导致各种不同类型的列表，如下图所示。然后，基于派生列表，设计者可以进一步采用微交互设计方法来表示不同数据之间的矩阵，从属，渐进和并行关系。
除了列表设计布局的上述摘要之外，作者还从行内操作的角度总结了两种类型的列表：操作清单列表和操作提示列表。
(一)操作显现型列表
场景：一方面，当列表中的列数据较少时，页面有足够的空间显示所有操作按钮。此时，操作按钮更直观，用户可以一目了然地了解当前列表上的所有操作;一方面，在工作频率方面，高频使用场景中的操作按钮需要是外部的。例如，当用户在查看列表时超过80％的时间编辑操作时，编辑按钮更便于用户点击。满足用户的心理期望。
(二)操作隐现型列表
场景：
一方面当列表中纵列数据较多时，页面缺少足够的空间来显示所有操作按钮。此时，操作按钮可以显示在微弱的显示中。使用“更多”或特定图标来识别更多操作。为方便用户，可以悬停鼠标。显示所有操作按钮;
另一方面就操作使用频率和危险性而言，可以通过操作低频使用场景中的按钮或危险操作按钮来显示隐藏按钮。当用户点击危险按钮时，可能会导致破坏性操作。此时，隐藏按钮可能增加按钮操作的难度并降低用户的错误触摸率。
本文总结
Web端列表设计的摘要可以更容易地适应B端产品的突出特点：
1. 通用性
B-end产品的设计具有多种设计特征。大多数产品的列表设计类似，因此列表设计的可重用性很强。汇总列表设计可以涵盖大多数B端产品。
2. 个性化
B端产品业务相对复杂，业务场景多样化，产品设计趋于个性化。因此，设计人员可以在总结设计列表样式中结合设计的业务特点进行微创新，大大提高设计效率。
此外，在列表设计过程中，作者也有一些见解和建议与您分享：
1. 避免列表item的横向展示信息过长
当水平显示信息太长（包括悬停时显示的信息）多个屏幕时，会出现水平滚动条。对于使用MAC侧的用户，可以方便地在触摸板上水平和垂直滚动，但对于PC端（主要是桌面用户），鼠标需要滑动水平滚动条以查看除一个屏幕以外的信息，并且单项。操作按钮通常位于列表的最右侧，每次单击按钮时，需要首先滚动滚动条，导致屏幕显示信息的操作成本和内存成本增加，并且容易减少了产品的使用。
2. 适当采取表头冻结的方式
B端产品具有大量列表数据。如果用户在滚动条中上下滚动以查看列表，如果标题向上滚动列表，则用户可能迷路并且无法确定当前列表中字段的含义。在使用列表向上滚动的过程中，标题被固定在页面的顶部，使得用户可以实时地理解当前字段的含义，并且可以以微妙的方式增强用户体验。
3. 增强列表设计的美观性
清晰，美观的列表设计基于美学可用性效果提高了产品的可用性（人们认为更美观的设计比被认为不那么美观的设计更直观）。 B端产品的业务逻辑复杂，门槛非常高，这让用户感到无聊。在列表设计中，可以通过字体大小，颜色，厚度，列表背景颜色，状态标志图标，标签等清晰地显示业务内容，这可以提高用户的乐趣并创建良好的用户体验。
作者：张娟龙，网易UEDC有点肉，现在支持交互式设计操作和维护部分产品。
本文来自大家都是产品经理合作媒体@网易UEDC，作者@仉长娟
该地图来自PEXELS，基于CC0协议
