专栏名称: 长弓小子
阿里巴巴高级体验设计师工作经验分享,专注交互体验设计
目录
相关文章推荐
51好读  ›  专栏  ›  长弓小子

组件详解|List 和 Table 组件,有什么区别?

长弓小子  · 公众号  ·  · 2024-10-22 08:37

正文

请到「今天看啥」查看全文


⬆️ 关注 「长弓小子」 看更多大厂 B 端设计干货!

Hi,我是元尧。记 得将我设为星标 ⭐️ ,不错过日后每一条来自大厂的经验分享。

欢迎长按下图二维码加我微信,带你进设计师交流群,与上万设计师一起交流成长!

「👇 添加好友请备注:设计交流」


全文共 1512 字,阅读需要 6 分钟

作为 B 端产品中常见的设计组件,Table 表格和 List 列表组件经常会出现在产品设计中。那么二者的用法有什么区别?是否可以混用?



DIFFERENCES

两者的区别


1 表格( Table)组件的用法

表格(Table)组件通常用于 展示行列数据 ,更强调用户对于信息或功能的 操作和交互 功能。尤其是以下情况:


- 当有大量
结构化的数据 需要展现,或数据之间 存在一定关系

- 当需要对数据进行排序、搜索、分页、自定义操作等 复杂行为


2 列表( List)组件的用法

列表(List)组件通常用于对于信息或功能的 详细展示或说明


- 可承载文字、列表、图片、段落,
形式多样

- 常用于后台数据展示页面,呈现 更加详尽 的信息内容。


因此我们可以初步判断出:当表格的操作较少时、当列表的内容形式比较单一(只有文字时)通常是可以进行互换的。更进一步的决策还需要你结合业务需求来分析和判断。


ADVICES

如何做区分


其实在实际的设计需求中,我们也经常会遇到这种组件功能混淆和难以选择的情况,我在之前的文章中也给大家分析过一些:

组件详解|弹窗、抽屉、折叠面板

组件详解|级联选择、树形选框、穿梭框

组件详解|B 端组件的 Tabs 、面包屑


这类情况还有很多,那么我们到底应该如何区分和使用两个功能相近的组件呢?


1. 先理解组件的基本用法

正所谓 “存在即合理” :组件 A 和组件 B 即使是长得再相像、功能和应用场景再雷同,也依旧是两个组件。它们最初的设计目的和所能够解决的根本问题,一定是有差异的。

所以第一步,我们可以先不带业务视角, 忽略产品场景,回归 组件的本质 ,单纯从组件本身来理解组件的含义和功能。你可以看看几个大厂相对成熟的开源组件库,对于你所能见到的大多数组件都有较为基础、准确的定义。


2. 分析产品需求的通用解决方案

这一步你可以通过不同的竞品、交互体验优秀的产品来理解和分析组件在实际应用中的通用解决方案,这些方案基本上已经经过大量用户的验证和认可了。

这就需要你在平时多看优秀的产品、多留心有特点的交互方式,在分析组件应用场景和使用方式时,脑海中才会更有料,思考才会更准确、更迅速。每个组件的场景应用案例最好能找到 4-5 个,且最好是 有知名度、体验优异的产品

通过对于以上案例的使用和比较,你就可以总结出不同组件在该场景中的 使用差异点 ,这些差异点就可以作为你区分和选择组件的判断依据。


3. 结合业务和用户的实际诉求
不论你对于组件差异点的结论总结得多详细,最终的设计产出依旧需要经过你的业务方、产品方和用户的检验。这一步需要你 站在业务和用户视角 ,思考如下问题:

- 这个业务场景 / 产品功能希望 解决的问题 是什么?
- 用户在这个业务场景 / 产品功能中的 核心诉求 是什么?
- 如何才能帮助用户 更快地 完成 其诉求?
- 产品中还有哪些 类似的 场景 / 功能用到了这类组件,它们是怎么处理的?
- 这样应用组件和整个产品的 交互风格 、页面布局是否吻合?
- 是否要对涉及到该组件的场景 统一 做优化和调整?等等

这些问题的答案,将帮助你做出最终的设计判断和决策。
B 端设计系统和组件设计是值得每一位设计师都深入研究的课题。 如果你想了解更多关于 B 端设计组件 相关的内容,在 公众号后台留言 “组件” 可以看到,这里有很全面、专业、系统的组件知识供你阅读:




识别二维码 👇 👇 👇 添加我的微信。 带你加入 设计师交流群 添加好友请备注:设计交流。




学海无涯,盼你同舟!😊



>  求职|设计笔试题,有哪些答题技巧?

>  经验|组件的更新迭代,要注意这3点!

>  经验 |设计目标,3 个公式帮你写好!



- END -

欢迎长按图片👇👇👇加我微信
带你加入设计师社群

了解更多设计理念和设计方法

期待与你的交集!
「添加好友请备注:设计交流」







请到「今天看啥」查看全文