UI布局有许多种方式，而卡片式做为现在较为普遍的一种，也有着它适用和不适合的情景
引言：什么是卡片
说到卡片式设计方案，大伙儿的第一反应可能是下边这种的网页页面。
而从理论上而言，以隔开条切分网页页面的方法还可以算是通栏卡片，自身并没主要表现层上的功效，仅仅在架构层协助客户信息归类。
因而，本次探讨的卡片主要是下列三类：通栏卡片、灰底 卡片、白色背景 卡片 投射。
本次要探讨的情景
最先，卡片仅仅UI艺术手法的一种，类似的办法也有分割线和留白艺术。如下图
另一方面，UI页面又可较含糊地分成二种：以信息为主导的网页页面，和以功能性为主导的网页页面。
在以信息为主导的界面中，卡片通常做为一条信息的承重；而以功能性为主导的界面中，卡片通常是做为全部控制模块的承重。
下列就按这两个情景探讨什么情况下适用卡片，什么情况下不适宜。
一.在以信息为主导网页页面中的卡片式布局
Q1：卡片与分割线，这2种方式如何选择
卡片，尤其是通栏卡片，实际上是根据隔开条来区别不一样具体内容，因而与分割线有较大的相似之处。MD标准中提及，目录类的信息更合适用分割线而不是卡片。如下图
但如果是繁杂一点的情形呢？举例说明，知乎问答里的下列4个不一样的网页页面，有一些采用了分隔线，有一些采用了卡片，实际如何选择？
A1：可以从下面3个领域充分考虑
1.各信息中间的关联系数
例如手机手机联系人网页页面，检索热搜榜网页页面这些，这种网页页面的各信息中间几乎并没有关系，客户必须迅速访问来寻找哪条才算是自身要看。而采用视觉效果上不引人注目的分割线，有利于客户迅速访问。
而例如知乎问答的回答页，各个信息中间较为相近（全是对同一问题的回应），客户必须更仔细的看每条信息的具体内容才可以挑选出自身喜欢的。采用了通栏卡片的方式，可以用更显著的隔开条切断客户往下访问的视野，让使用者更对焦于单独卡片的具体内容。
2.信息的复杂性。
简易的信息代表着一条信息具体内容非常少，也就代表在手机屏幕上，一屏可以表明好几条信息。例如新闻报道类APP，这样的事情下采用分割线才可以具有迅速访问的实际效果。
而假如信息比较复杂，一屏只有表明1-2条，乃至不上一条的信息，那麼即使采用分割线，客户也没法迅速访问。
（PS.信息的复杂性实际上是可以控制的，在于期待客户见到是多少信息）
与此同时，假如一条信息繁杂到必须内部结构应用分割线来区别等级，那麼信息与信息中间也只有采用卡片来区别。
典型性的繁杂信息网页页面例如新浪微博，一方面单屏经常表明下不来一条信息，另一方面信息内必须分割线来区别实际操作和具体内容，因而总体采用了卡片式布局。、
3.信息类型的是多少。
如今的信息流网页页面通常会渗入多种多样信息，例如信息类信息中交叉一下强烈推荐关心的人，交叉一下广告宣传这些。这类情况下，采用通栏卡片，可以提升布局的操作灵活性。
例如知乎问答的关心网页页面：下下图试着将别的控制模块所有除掉，只留一种信息，可以看得出采用分割线就可以。而下左图为知乎问答的款式，由于有各种各样控制模块，因此采用了通栏卡片的布局。
Q2：通栏卡片和非通栏卡片，这2种方式如何选择
A2：非通栏卡片可以让消费者的视野更为对焦在一条信息内。
但本人觉得这二者差距并不大，如下所示两图，均为繁杂的百度搜索。下左图为通栏卡片，下图为非通栏卡片。具体体会，下左图访问更迅速，更合适娴熟客户更快寻找结论。右边访问相对性比较慢，可是能更快的的掌握每一条信息，合适不了解的客户恰当寻找自已愿意的。
Q3：何时挑选应用卡片
A3：偏重呈现一条具体内容的一般采用卡片，偏重访问高效率的不采用卡片。
实际上手机微信的重做是一个很好的事例。新版本微信订阅号网页页面更为突出了一条文章内容，配图图片 详细文章标题让使用者更直接的见到文章，但也让客户必须下降更多张才可以见到别的微信订阅号的具体内容。
二.在以功能性为主导网页页面中的卡片式布局
Q1：卡片的优点是啥
1.自觉性
2.类似性
Q1：网页页面总体是不是要采用卡片式的设计风格？
A1：本人姑且觉得是不是采用卡片式并没很大的却别，也期望能开诚布公。
下面的图是天猫商城用户中心网页页面，下左图老版采用了卡片式设计方案，而新版本采用了大文章标题 分割线的设计风格。从二者的功效比照看来，卡片式让控制模块更单独清楚，总体也较为有统一感。而大文章标题设计风格则是让客户迅速对焦到自已要想的看的控制模块。
Q2：网页页面中欧通栏卡片与别的UI方法的配搭
A2：混搭时，非通栏卡片有着较强的自觉性，从好的一面看，可以突出某一控制模块；从不太好的一面看，用的不合理会促使网页页面不足统一。
例如下面的图。图1为原设计方案，纯采用非通栏卡片，而另二张仅有每日签到采用了非通栏卡片。能够看见，图1在视觉效果上，三个控制模块总体统一，而图2图3的三个控制模块断裂变成两一部分，视野会大量的被每日签到控制模块吸引住，而降低对下边控制模块的关心。
1.关键等级相距较小的控制模块，即使具体内容不同样，也尽可能采用同样方式。
如下图左为盒马生鲜的用户中心页，采用了非通栏卡片和通栏卡片配搭的方式，尽管突出了本人信息，可是视觉效果上不足统一。本人试着如下图右，均调节为非通栏卡片，并不会对本人信息有很多的减弱，反倒让页面总体更为统一。
自然，假如控制模块种类彻底不一样，也不用强制统一为卡片式，例如大众点评网的用户中心页，下边的目录作用并不适宜转换为卡片方式。
2.若网页页面总体采用分割线/空缺/隔开条的设计风格来区别控制模块，那麼可以将装饰艺术强的卡片做为协助插进在其中
如下图为蚂蜂窝的网页页面，由此可见关键的控制模块采用的是大文章标题 空缺来隔开，而“强烈推荐旅游景点”（图中的金鸡湖卡片）和“玩耍热卖榜”采用了卡片的方式。在构架层上，很显著的主要表现出了主从关系，但在主要表现层上，又适度的突出了营销推广具体内容。
——END——
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
