卡片式设计VS列表式设计 谁更适合你的网站

卡片式设计VS列表式设计 谁更适合你的网站

• 来源:A5企业专栏
• 更新日期:2018-11-23

摘要：目前网站中信息整合最常见的方式就是卡片式设计和列表式设计。列表式在UI设计中算是一枚\"元老级\"的大将了，而卡片式设计则是一匹\"黑马\"，近年来异军突起，越来越受到大众的喜爱。两种设计在实现良好的用户体验上各有千秋，卡片式设计实现了图文的完美结合，能给用户呈现良好

　　目前网站中信息整合最常见的方式就是卡片式设计和列表式设计。列表式在UI设计中算是一枚"元老级"的大将了，而卡片式设计则是一匹"黑马"，近年来异军突起，越来越受到大众的喜爱。两种设计在实现良好的用户体验上各有千秋，卡片式设计实现了图文的完美结合，能给用户呈现良好的视觉效果，同时具有直观的可操作性(卡片的移动、翻转等)，而列表式设计结构清晰，在有限的空间中展示更紧凑的内容，有助于用户快速浏览内容，在信息查找获取方面更具优势。不过这两种设计方式给网站带来的正面影响都是基于某种的适用情境的，离开了特定的适用情境，它们反而可能会带来"灾难"。因此，为了给用户提供更好的用户体验，和小飞一起探究探究这两种网站内容组织方式最佳的适用情境吧!

　　卡片式设计和列表式设计

　　为了更好理解卡片式设计和列表式设计的适用情境，我们首先需要了解一下这两种设计方式。

　　卡片式设计 ，相信不用小飞多说了，前面在《解密网站设计潮流：为什么卡片式设计这么火?》已经进行过系统的介绍了。卡片式设计是将网站中的各种信息组织成卡片，一张卡片就是一个信息容器，提供给用户进入某个功能或内容的入口。它具备适合响应式、排版整齐、简单易读、直观可操作等多个优点。尽管卡片式设计是由扁平化设计衍生而来的，是内容扁平化的一种形式，但在不断的发展之中，它已逐渐与扁平化设计区别开来，自成体系，这是因为卡片式设计中开始使用微妙的3D效果比如用阴影效果强调行为引导按钮，以获取用户更多的注意力。如果你一定要将其同扁平化联系起来，那不妨称它为扁平化设计2.0吧!很多社交媒体比如Pinterest、Twitter等都非常偏爱卡片式设计。

　　列表式设计 通常结构比较简单，以纵向列表展示许多类似的信息栏，信息栏中一般是简单的图文组合(标题+小图)或纯文本信息(比如知乎等阅读类产品，见下图)。在这样的界面上，用户可以快速滑动查找自己想要的信息。另外，列表式设计之中还经常设有搜索栏，这样用户可以基于自己的搜索条件进行查找。列表式设计在网站中由来已久，列表也是随处可见：导航列表、选项列表、消息列表等。由于列表垂直排列每一行内容，相对卡片式设计，在同样大的视窗中可以放置更多的内容，可供用户阅读的文章数量更多，不少新闻类和数据类网站更青睐于这种设计。

　　在简要了解卡片式和列表式设计后，相信大家在理解这两种方式的适用情境上也会更容易。下面小飞将分别介绍这两种设计的适用情境。

　　卡片式设计的适用情境：

　　适合信息浏览(而不是信息查找)

　　卡片式设计使用抓人眼球的图片，整齐一致的栅栏格，各种形式的元素，致力于给用户提供良好的视觉效果，从而吸引他们浏览全文。这种卡片式的滚动很有趣味性，能在一定程度上吸引用户，很适合用户浏览信息，但不适合信息查找。这是因为，一方面，卡片式设计更加注重不同卡片之间的排版契合，很少考虑它们之间的先后次序或重要程度。另一方面，卡片式设计也很难满足用户"F"型的浏览习惯(眼球追踪研究表明用户会更容易注意到网页上方和左侧的内容)，在重点突出某项内容或方便用户查找方面比较逊色。相对而言，列表式可以更好的迎合用户这一浏览特点，可对内容作重点突出。不过卡片式设计提供的视觉盛宴是列表式无法匹敌的，不少社交媒体也正是看中了它的这一优点，纷纷在自己网页中适用卡片式设计。

　　适合多种元素的分类

　　在《解密网站设计潮流：为什么卡片式设计这么火?》中，我们也讲到卡片式设计可以轻松容纳多种形式的元素，不管是图片、文本、视频、链接或是按钮等。这是因为卡片的轮廓便于视觉分界线的建立，可以让各种形式的元素保持整齐有序，不显得杂乱无章。如果你的网站上涉及元素的种类比较多，展示的内容很是丰富，卡片式设计是很好的一个选择。

　　列表式设计的适用情境：

　　适合信息快速查找

　　列表从某种程度上来说要比卡片更加直白一点。这一点从它的构成中就可以看出，列表式设计常常使用标题加正文的格式，用户无需点击进入就能尽可能多的了解全文，还可以随意滑动页面找寻自己感兴趣的内容或是在搜索栏输入关键词迅速获得结果页面。而且，列表式设计是以固定的纵向列表的方式展示内容的，一行一项特定的内容，这比卡片式设计中随意组合的卡片更容易查找。另外，在一些网站中，文本的影响力要远胜于图片，很多读者会直接跳过大图，阅读文字，新闻类的网站就是一个范例，吸引人的标题往往更能收获忠实的访客，这时列表式设计就是不二之选了。不过千万要记住，不能让全文内容显示过多，太多的文字只会让用户觉得压力山大，降低用户点击浏览全文的兴趣，从而影响用户的转化率。

　　适合移动小屏幕

　　通常来说，与卡片式相比，列表式设计在服务器中占据的空间更小，这一点应该已经很明显了吧。卡片式设计包含多种元素(大图、视频等)，而列表式设计使用元素种类较少(小图或纯文本)。这决定了列表式设计更加适合小屏幕。当它在手机或平板等小设备上进行显示，网页相应缩小时不会出现排版错乱、图片显示不全或视频无法播放的情况。而且列表式设计的页面加载速度也会更快，满足了用户的浏览需求。

　　卡片式设计在吸引用户注意力，展示众多不同形式的内容上很有效果，但在提供文字信息上不太理想，而列表式设计通过搜索结果页面让用户可以快速找到自己想要的信息，同时更能适应小屏幕上，但却容易让用户觉得乏味无趣。两种方式都有自己的优点和不足，在您自助建站的过程中，结合自身的实际情况，合理分析两种方式的利弊，选择最适合自己的。

　　起飞页自助建站平台提供了众多模板，不管是卡片式设计的，还是列表式设计的，小飞相信在这你肯定能挑选到自己满意的，快来起飞页自助建站平台做一个网站吧!