解密网站设计潮流：为什么卡片式设计这么火？

 

什么是卡片式设计?

 

卡片式设计，顾名思义，就是将网站中的各种信息组织成卡片，每一张卡片有着属于自己的信息。一张卡片可以以不同的形式、颜色呈现，不过一般而言，每张卡片会包含一张图片或一个图标，再加上一些基本信息，比如标题、文本等。在这些信息之中，图片是卡片式设计的重中之重。这是因为人是视觉动物，在卡片式设计中使用图片更能瞬间抓住用户的眼球;一图顶千言，高质的图片更具说服力，往往令精妙的文案也区居第二。卡片式设计的优势就在于以简单的方式实现了信息和内容的高度融合。火爆一时的瀑布流就是卡片式设计的一个分支，国外的Pinterest网站是卡片式设计应用的典型。

 

 

为什么卡片式设计这么火?

 

1.响应式设计

 

现在移动端流量超过PC端早已经不是什么新闻了。在现在这个时代，一个网站必须在不同设备上都有良好的呈现，才有可能获得大众的欢迎和喜爱。卡片式设计似乎就是为了这一目的而生的。它对于移动端有着良好的兼容性，使用这种设计我们可以将图片、文本等整合到卡片中，而这些卡片有灵活的高度和宽度，可以根据屏幕的尺寸，快速重组网站的内容元素，在大屏幕上是横直的，在小屏幕显示垂直。总而言之，卡片式是很好的响应式设计，能够同时适用于PC端和移动端。

 

 

2.排版整齐

 

当我们查看任何带有卡片式设计的网站时，最直观的一个感受就是整齐有序。卡片式设计常常会有一个庞大的栅格系统，以保持每张卡片在尺寸和间隙上的一致性。这种规则的栅格系统往往是基于一定的信息框架的，在做分屏式设计时我们也提到过信息框架的建立有助于网站内容有逻辑的分门别类，卡片式设计也是一样。对设计师来说，卡片能够帮助他们有效组织网站的内容，对网站上的各个元素进行合理布局，而对用户来说，整齐划一的卡片格局也方便他们快速获取自己想要的信息，体验更顺畅。下图是知名的创意作品展示社区Dribble的网站，它很好的应用了卡片式设计，让用户体验更加简单直观。

 

3.简单易读

 

卡片式设计还有一个重要的特征就在于简单易读。因为每一张卡片只是某个功能或内容的入口点，主要展示摘要而不是所有细节。而且卡片的空间都是有限的，一般不会包含太多信息，这要求文本必须简单易读，要能够激发用户的兴趣，吸引用户点击进入浏览。如果你试图在卡片上放太多内容的话，它就会变得又宽又长，这就失去了卡片的意义了。NamesForChange.org这个网站是一个很好的栗子，每一张卡片只放置图片或几行文字，不仅简单易读而且还能够引发用户的互动。

 

4.适合社交媒体

 

提起使用卡片式设计的社交媒体网站，相信大家应该都不会陌生!Facebook，Twitter、腾讯等都采取这种设计方式，它们一般还会在卡片式内容上添加点赞、分享、评论等功能，使用无休止的瀑布流，以达到与用户的互动。而卡片式设计使用户互动更简单，甚至将主动权给了用户，他们可以根据简单易读的摘要确认自己是否想要浏览全文，快速获取自己感兴趣的内容。难怪社交媒体网站这么偏爱卡片式设计。

 

5.容纳各种形式的元素

 

卡片式设计很大程度上是灵活的，它能够整合各种形式的内容，图片、文本、动画效果、视频、按钮、链接等。只有你想不到的，没有它包含不了的。而且在网站中使用卡片式设计时，也没有一定的规则。虽然小飞在前面提到栅格系统的整齐有序，即使你不按照横列或竖列进行也没有关系，因为卡片本身就是基于几何美的，就是有规则的，所以充分发挥你的想象力吧，给各项元素来个别出心裁的组合吧。以Futurefabric.co.uk为例，它利用卡片式设计展示了许多不同风格的元素。

 

6.直观的可操作性

 

对于手机等触屏设备的用户来说，网站上的卡片式设计让他们觉得更直观，更有想要点击的欲望。一张卡片传递一个信息，想要了解详情就直接点击浏览，不想深入只需向左、向右滑动，查阅其他的内容。还有的网站需要用户向上或向下进行拖动实现内容的加载。在移动设备上人们更加习惯手势操作，因此卡片式设计在手机等触屏设备上的操作性很高。

 

 

怎样更好发挥卡片式设计的作用?

 

看完上面的栗子，我们已经知道卡片式设计的很多好处。是不是已经心动了?但是要想在自己的网站中用好卡片式设计，我们还需要注意以下几点。

 

结合正负空间

 

在卡片式设计中，我们首先要避免网站的杂乱无章。就像我们前面谈到的，卡片可以容纳各种形式的元素，尤其是在PC端上显示时(全部显示出来)，各种形式的元素可能会让用户感觉网站混乱、拥挤。所以，我们需要利用正负空间让整体布局赏心悦目。简单来说，负空间就是指文字、图案本身所占用空间之外的空间，比如字间距和元素周围的空白，而正空间是相对于负空间而言的，结合正负空间就是重点把握图案、文字、背景组合的好坏，既要突出网站核心信息又要保证视觉感官的一致。丹麦的Helbak ceramics在这一点上就做的很好，适当的留白同有趣的图案相得益彰，整个网站给人舒适、柔和的感觉。

 

 

注意每个细节

 

卡片式设计就是为了保持网站的简洁明了，这意味着卡片上的每个细节都很重要，不管是图片、文本、链接还是按钮。一颗老鼠屎会坏了一锅汤，一个不恰当的元素会影响一张卡片的效果，进而破坏网站的整体布局。Silk Tricky实现了文本和图片的平衡，既能有效吸引用户又足够美观大方。它还使用了"浏览"图标，给访客提供引导。

 

加点"香料"

 

虽然卡片式设计很重要的一个特征就是排版整齐，这并不意味着每张卡片都是一成不变、毫无生气的。我们可以在卡片上添加一些元素，比如吸引人的动画、独特的配色或是大胆的字体，给每张卡片以截然不同的风格，让网站个性化十足。White Frontier就是个性化网站的典型。

 

 

使用网格

 

如果你没有太多时间或精力给自己的网站添加个性化元素或排版，那就使用网格吧。在卡片式设计中，这是最容易、最简单的一项准则。很多人都采用这一方法，因为它可以保证卡片上各项元素的整齐一致，让网站更具统一美，而且不论屏幕尺寸的大小它能完美的适应。

 

 

用户优先

 

不管我们想要将网站做成哪种风格，时尚潮流也好，平淡朴素也罢，最重要的坚持用户优先。我们只有结合网站行业特性，考虑目标用户的喜爱偏好，才能做出让他们眼前一亮的网站。与此同时，注重网站的可读性，将最重要的信息准确无误的传递给用户，将他们的注意力吸引到行为引导按钮上。Theclymb.com就选择使用了干净整洁的布局，卡片易于理解，导航元素也很清晰，方便用户体验。

 

 

在内容为皇的网站世界里，信息的组织和呈现形式也很重要。在这点上卡片式设计是很好的选择，用户可以通过它快速获取有效信息。不过，并不是所有的网站都适合卡片式设计，比如对于一些新闻或数据类的网站来说，列表式的设计方式可能更加紧凑，更能够满足用户的基本需求。所以在网站中使用卡片式设计还是应该"对症下药"，三思而后行"。