卡片式布局的优点有哪些，html如何实现卡片布局

UI布局有许多种形式，而卡片式作为目前比较常见的一种，也有着它适用和不适用的场景

前言：哪些是卡片

说到卡片式设计，大家的第一反应可能是下面这样的页面。

卡片式布局的优点有哪些，html如何实现卡片布局

而从广义上来说，以分隔条分割页面的方式也可以算作通栏卡片，本身并没有表现层上的作用，只是在框架层帮助用户信息分类。

因此，此次讨论的卡片主要是以下三类：通栏卡片、灰底+卡片、白底+卡片+投影。

卡片式布局的优点有哪些，html如何实现卡片布局

此次要讨论的场景

首先，卡片只是UI表现手法的一种，同类的方法还有分隔线和留白。如下图

卡片式布局的优点有哪些，html如何实现卡片布局

另一方面，UI界面又可较笼统地分为两种：以信息为主的页面，和以功能为主的页面。

卡片式布局的优点有哪些，html如何实现卡片布局

在以信息为主的页面中，卡片往往作为单条信息的承载；而以功能为主的页面中，卡片往往是作为整个模块的承载。

以下就按这两个场景讨论哪些时候适用卡片，哪些时候不适合。

一.在以信息为主页面中的卡片式布局

Q1：卡片与分隔线，这两种形式如何选择

卡片，尤其是通栏卡片，其实就是通过分隔条来区分不同内容，因此与分隔线有很大的相似度。MD规范中提到，列表类的信息更适合用分隔线而不是卡片。如下图

卡片式布局的优点有哪些，html如何实现卡片布局

但如果是复杂一点的情况呢？举个例子，知乎里的以下4个不同的页面，有些采用了分割线，有些采用了卡片，具体如何选择？

卡片式布局的优点有哪些，html如何实现卡片布局

A1：可以从以下3个方面综合考虑

1.各信息之间的关联度

比如电话联系人页面，搜索热榜页面等等，这些页面的各信息之间几乎没有关联，用户需要快速浏览来找到哪条才是自己想看。而采用视觉上不显眼的分隔线，有助于用户快速浏览。

而比如知乎的答案页，各条信息之间比较类似（都是对同一问题的回答），用户需要更仔细的看每条信息的内容才能筛选出自己感兴趣的。采用了通栏卡片的形式，可以用更明显的分隔条打断用户向下浏览的视线，让用户更聚焦于单个卡片的内容。

2.信息的复杂度。

简单的信息意味着单条信息内容很少，也就意味着在屏幕上，一屏可以显示多条信息。比如新闻类APP，这种情况下采用分隔线才能起到快速浏览的效果。

而如果信息比较复杂，一屏只能显示1-2条，甚至不到一条的信息，那么即使采用分隔线，用户也无法快速浏览。

（PS.信息的复杂度其实是可控的，取决于希望用户看到多少信息）

同时，如果单条信息复杂到需要内部使用分隔线来区分层级，那么信息与信息之间也只能采用卡片来区分。

卡片式布局的优点有哪些，html如何实现卡片布局

典型的复杂信息页面比如微博，一方面单屏常常显示不下一条信息，另一方面信息内需要分隔线来区分操作和内容，因此整体采用了卡片式布局。、

3.信息种类的多少。

现在的信息流页面往往会混入多种信息，比如资讯类信息中穿插一下推荐关注的人，穿插一下广告等等。这种时候，采用通栏卡片，可以提高布局的灵活性。

例如知乎的关注页面：下右图尝试将其他模块全部去掉，只留一种信息，可以看出采用分隔线即可。而左图为知乎的样式，因为有各种模块，所以采用了通栏卡片的布局。

卡片式布局的优点有哪些，html如何实现卡片布局

Q2：通栏卡片与非通栏卡片，这两种形式如何选择

A2：非通栏卡片可以让用户的视线更加聚焦在单条信息内。

但个人认为这两者相差不大，如下两图，均为复杂的搜索结果。左图为通栏卡片，右图为非通栏卡片。实际感受，左图浏览更快速，更适合熟练用户快速找到结果。右侧浏览相对较慢，但是能更好的的了解每一条信息，适合不熟悉的用户正确找到自己想要的。

卡片式布局的优点有哪些，html如何实现卡片布局

Q3：什么时候选择使用卡片

A3：偏向展现单条内容的一般采用卡片，偏向浏览效率的不采用卡片。

其实微信的改版是一个极好的例子。新版订阅号页面更加突出了单条文章，配图+完整标题让用户更直观的看到文章内容，但也让用户需要下滑更多页才能看到其他订阅号的内容。

卡片式布局的优点有哪些，html如何实现卡片布局

二.在以功能为主页面中的卡片式布局

Q1：卡片的特点是什么

1.独立性

2.同类性

Q1：页面整体是否要采用卡片式的风格？

A1：个人暂且认为是否采用卡片式并没有太大的却别，也希望能抛砖引玉。

下图是天猫个人中心页面，左图旧版采用了卡片式设计，而新版采用了大标题+分隔线的风格。从两者的效果对比来看，卡片式让模块更独立清晰，整体也比较有统一感。而大标题风格则是让用户快速聚焦到自己想要的看的模块。

卡片式布局的优点有哪些，html如何实现卡片布局

Q2：页面中非通栏卡片与其他UI方式的混搭

A2：混搭时，非通栏卡片有着极强的独立性，从好的一面看，可以突出某个模块；从不好的一面看，用的不当会使得页面不够统一。

例如下图。图1为原设计，纯采用非通栏卡片，而另两张只有签到采用了非通栏卡片。可以看到，图1在视觉上，三个模块整体统一，而图2图3的三个模块割裂成了两部分，视线会更多地被签到模块吸引，而减少对下方模块的关注。

卡片式布局的优点有哪些，html如何实现卡片布局

1.重要级别相差不大的模块，即使内容不相同，也尽量采用相同形式。

如下图左为盒马生鲜的个人中心页，采用了非通栏卡片和通栏卡片混搭的形式，虽然突出了个人信息，但是视觉上不够统一。个人尝试如下图右，均调整为非通栏卡片，并不会对个人信息有太多的弱化，反而让界面整体更加统一。

卡片式布局的优点有哪些，html如何实现卡片布局

当然，如果模块类型完全不同，也不用强行统一为卡片式，例如大众点评的个人中心页，底下的列表功能并不适合转化为卡片形式。

卡片式布局的优点有哪些，html如何实现卡片布局

2.若页面整体采用分隔线/空白/分隔条的风格来区分模块，那么可以将装饰性强的卡片作为辅助插入其中

如下图为马蜂窝的页面，可见主要的模块采用的是大标题+空白来分隔，而“推荐景点”（图中的金鸡湖卡片）和“玩乐热销榜”采用了卡片的形式。在架构层上，很明显的表现出了从属关系，但在表现层上，又适当的突出了营销内容。

卡片式布局的优点有哪些，html如何实现卡片布局

——END——

原创文章，作者：admin，如若转载，请注明出处：https://www.qq65hfghe5.com/tg/89882.html

卡片式布局的优点有哪些，html如何实现卡片布局

相关推荐