卡片式结构的优点有哪些，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——