当前位置:首页 >  站长 >  网站运营 >  正文

卡片式设计VS列表式设计 究竟谁更胜一筹?

 2017-10-17 15:58  来源: A5企业专栏   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

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

卡片式设计和列表式设计

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

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

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

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

卡片式设计的适用情境:

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

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

适合多种元素的分类

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

列表式设计的适用情境:

适合信息快速查找

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

适合移动小屏幕

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

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

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

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
起飞页建站

相关文章

  • 响应式网站中优化用户体验的7个关键点

    随着移动设备的不断兴起,响应式设计越来越受到大众的喜爱,站长们在搭建网站时也更加倾向于选择响应式网站。不过,大多数站长们都认为既然响应式网站可智能根据设备屏幕大小呈现不同的展示效果,那就不用再对移动端的网站进行手动调整了。其实这种看法是片面的,响应式网站虽然自身具备一定的特质,但有时PC端网站和移动

  • 盘点2017年最受欢迎的10个商城范例:我们从中可以得到哪些启示?

    在电商和线上购物快速发展的今天,拥有一个商城网站很是必要,关于试水独立商城的好处大家可以浏览《有了淘宝京东,为什么还要自建商城网站?》查看。但是,搭建商城网站并不简单,庆幸的是目前市面上涌现了不少建站平台,起飞页自助建站平台就是其中一个,各位商家可以借助起飞页轻松搭建出一个好看、实用的商城网站。不过

    标签:
    起飞页建站
  • 让首页背景动起来是怎样一种感觉?8张图告诉你真相!

    现在越来越多的设计师开始在网页中使用循环视频作为背景,这种现象的出现主要有两个原因。一方面,移动设备性能不断完善,网速越来越快,用户能够且有条件在移动设备上浏览视频背景的网站;另一方面,随着HTML5技术的发展,很多主流浏览器的视频标签都支持循环(Loop)属性,网页上单个或一系列视频短片的循环播放

    标签:
    起飞页建站
  • 缺乏灵感?给你8个值得每天学习的顶尖设计网站

    网站设计是一种艺术,它离不开灵感和创意。但灵感与创意的涌现是需要碰撞、需要时机的,大多数设计师都不可能每时每刻都灵感爆棚。当您缺乏设计灵感时,不妨看一看下面这些网站,它们都收录了丰富的素材,都有许多独立设计师上传的优质作品,没准这些设计就能让你眼前一亮,获得一些想法或启发。赶紧和小飞一起看看这8个值

    标签:
    起飞页建站
  • 目前为止用户体验度最好的表单:浮动标签式的表单

    在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信息方面发挥着不可或缺的作用,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户转化率就越高。这也是为什么许多站长们一直在研究如

热门排行

信息推荐