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

卡片式布局的优点有哪些，html如何实现卡片布局 UI布局有许多种形式，而卡片式作为目前比较常见的一种，也有着它适用和不适用的场景前言：哪些是卡片说到卡片式设计，大家的第一反应可能是下面这样的页面。

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

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

此次要讨论的场景首先，卡片只是UI表现手法的一种，同类的方法还有分隔线和留白。

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

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

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

一.在以信息为主页面中的卡片式布局Q1：卡片与分隔线，这两种形式如何选择卡片，尤其是通栏卡片，其实就是通过分隔条来区分不同内容，因此与分隔线有很大的相似度。

MD规范中提到，列表类的信息更适合用分隔线而不是卡片。

如下图但如果是复杂一点的情况呢？举个例子，知乎里的以下4个不同的页面，有些采用了分割线，有些采用了卡片，具体如何选择？A1：可以从以下3个方面综合考虑1.各信息之间的关联度比如电话联系人页面，搜索热榜页面等等，这些页面的各信息之间几乎没有关联，用户需要快速浏览来找到哪条才是自己想看。

而采用视觉上不显眼的分隔线，有助于用户快速浏览。

而比如知乎的答案页，各条信息之间比较类似（都是对同一问题的回答），用户需要更仔细的看每条信息的内容才能筛选出自己感兴趣的。

采用了通栏卡片的形式，可以用更明显的分隔条打断用户向下浏览的视线，让用户更聚焦于单个卡片的内容。

2.信息的复杂度。

简单的信息意味着单条信息内容很少，也就意味着在屏幕上，一屏可以显示多条信息。

比如新闻类APP，这种情况下采用分隔线才能起到快速浏览的效果。

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

（PS.信息的复杂度其实是可控的，取决于希望用户看到多少信息）同时，如果单条信息复杂到需要内部使用分隔线来区分层级，那么信息与信息之间也只能采用卡片来区分。

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

、3.信息种类的多少。

现在的信息流页面往往会混入多种信息，比如资讯类信息中穿插一下推荐关注的人，穿插一下广告等等。

这种时候，采用通栏卡片，可以提高布局的灵活性。

例如知乎的关注页面：下右图尝试将其他模块全部去掉，只留一种信息，可以看出采用分隔线即可。

而左图为知乎的样式，因为有各种模块，所以采用了通栏卡片的布局。

Q2：通栏卡片与非通栏卡片，这两种形式如何选择A2：非通栏卡片可以让用户的视线更加聚焦在单条信息内。

但个人认为这两者相差不大，如下两图，均为复杂的搜索结果。

左图为通栏卡片，右图为非通栏卡片。

实际感受，左图浏览更快速，更适合熟练用户快速找到结果。

右侧浏览相对较慢，但是能更好的的了解每一条信息，适合不熟悉的用户正确找到自己想要的。

Q3：什么时候选择使用卡片A3：偏向展现单条内容的一般采用卡片，偏向浏览效率的不采用卡片。

其实微信的改版是一个极好的例子。

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

二.在以功能为主页面中的卡片式布局Q1：卡片的特点是什么1.独立性2.同类性Q1：页面整体是否要采用卡片式的风格？A1：个人暂且认为是否采用卡片式并没有太大的却别，也希望能抛砖引玉。

下图是天猫个人中心页面，左图旧版采用了卡片式设计，而新版采用了大标题+分隔线的风格。

从两者的效果对比来看，卡片式让模块更独立清晰，整体也比较有统一感。

而大标题风格则是让用户快速聚焦到自己想要的看的模块。

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

例如下图。

图1为原设计，纯采用非通栏卡片，而另两张只有签到采用了非通栏卡片。

可以看到，图1在视觉上，三个模块整体统一，而图2图3的三个模块割裂成了两部分，视线会更多地被签到模块吸引，而减少对下方模块的关注。

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

如下图左为盒马生鲜的个人中心页，采用了非通栏卡片和通栏卡片混搭的形式，虽然突出了个人信息，但是视觉上不够统一。

个人尝试如下图右，均调整为非通栏卡片，并不会对个人信息有太多的弱化，反而让界面整体更加统一。

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

2.若页面整体采用分隔线/空白/分隔条的风格来区分模块，那么可以将装饰性强的卡片作为辅助插入其中如下图为马蜂窝的页面，可见主要的模块采用的是大标题+空白来分隔，而“推荐景点”（图中的金鸡湖卡片）和“玩乐热销榜”采用了卡片的形式。

在架构层上，很明显的表现出了从属关系，但在表现层上，又适当的突出了营销内容。

——END——