卡片的设计图 卡片设计介绍

UI布局的形式有很多种卡片作为目前常见的一种也有其适用和不适用的场景。

前言:哪些是卡

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

从广义上来说分隔线划分页面的方式也可以看作是banner card它本身并不起到表现层的作用只是在框架层帮助用户对信息进行分类。

因此本文讨论的卡片主要分为以下三类:横幅卡片、灰色背景+卡片、白色背景+卡片+投影。

这次要讨论的场景

首先卡片只是UI表达的一种类似的方法还有分割线和空格。如下图

另一方面UI界面可以大致分为两种类型:基于信息的页面和基于功能的页面。

在基于信息的页面中卡片通常被用作单个信息的载体；在面向功能的页面中卡片往往作为整个模块的载体。

这里有两个场景来讨论什么时候卡合适什么时候不合适。

一、信息化页面卡片布局

Q1:卡片还是分隔符这两种形式如何选择

卡片尤其是横幅卡片实际上是通过分隔线来区分不同的内容所以和分隔线有很大的相似性。MD提到列表类的信息比卡片更适合用分隔线。如下图

但是如果稍微复杂一点呢？比如知乎中以下四个不同的页面有的用分割线有的用卡片该如何选择？

A1:以下三个方面可以综合考虑

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——