卡片设计卡,这个名词你可能不熟悉,但卡这个概念你绝对不会陌生。现在,卡片在网页设计中无处不在,而且会越来越流行。事实上,谷歌、推特和脸书都是以这种方式设计的,所以至少粗略地
卡片设计
卡,这个名词你可能不熟悉,但卡这个概念你绝对不会陌生。现在,卡片在网页设计中无处不在,而且会越来越流行。事实上,谷歌、推特和脸书都是以这种方式设计的,所以至少粗略地看一下这些卡片是值得的。不过因为不想在这里说,还是直接深入了解一下吧!
什么是卡?
简单的回答是,卡片是交互信息的载体,通常以长方形呈现。像信用卡或棒球卡一样,网络卡以简洁的形式提供快速和相关的信息。
所有卡片的特点都是互动性。他们不仅提供了信息,还以另一种委婉的方式要求互动。卡片通常包括按钮或发布到社交媒体的方法。
什么不是卡?
因为“卡片设计”这个词还处于初级阶段,所以对于什么是卡片,什么不是卡片,还有很多疑问和疑惑。并非所有人都称之为卡,这一事实增加了它的不确定性。一张卡被称为一个人的名字,一个模块,或一个肖像(仅举几个例子)。
有时候,通过排除它不是什么来定义它会更容易,这样我们就可以反过来知道它是什么了。严格来说,卡片不是一种设计。你不能简单地拿一张纸,在上面画一些矩形,然后把每个矩形都叫做一张卡片。然而,如果你喜欢这样称呼它也没关系,但它不符合本文中假定的定义。相反,一张卡必须是功能性的、独立的、可转动的(用户可以点击查看更多细节)。
现在我们可以看到菲尔博士所说的了。他有一句名言,无论你烤的煎饼有多光滑,它还是有两面的。需要注意的是,卡片有两面。这并不是说卡片应该有翻转动画,而是每张卡片都呈现了信息的概述,并且每张卡片都给了你进一步参与的选择(可点击性)。一张卡片不仅仅是一条信息,它总是能让人做得更多。
按照这个定义,一张卡不能只是好看,还必须是有用的。
为什么要用卡??
卡片可以以不同的方式用于满足特殊的功能。以下是在设计中使用卡片的一些主要原因:
这张卡片能吸引眼球。比起过多的不合理的文字,卡片是更好的选择。
卡有反应。手机浏览器的设计是必须的,卡可以帮助响应式设计。
这张卡片很容易阅读。因为他们的空房间有限,卡上也不能说太多。但这是好事!如果读者想了解更多,他们会点击它。
该卡是可共享的。让读者能够通过社交、移动和电子邮件平台快速轻松地分享内容。
应该怎么用卡?
用卡最重要的一点是和用户互动,让用户自主互动。
有许多类型的互动,关键是你想如何培养与你的网站访问者的关系。为你自己的网站回答这个问题,考虑你自己是一个UI/UX设计师,想想你将如何与你的网站访问者互动,以及他们将如何与你互动。
让我们来看看使用卡的4大网站。每一个都有强大的特性。
脸书
脸书的文章列表区是用卡片设计的。每张卡片都突出了内容,一个喜欢的方式,分享,评论都可以添加。也增加了网站的社会影响力。你可以看看有多少人喜欢,分享或者评论,这些都会影响你网站的口碑。一种简洁而不唐突的方法是提供一个下拉菜单,其中包含隐藏、取消关注和报告垃圾邮件等选项。
特点:显然,脸书是一种激励用户积极参与并愿意与网站保持联系的手段。他们希望你不要想着取消关注或者在你的文章列表区隐藏一些卡片(这样网站会损失一些关注和浏览量)。
你也可以用同样的方式使用卡片——建立卡片来鼓励积极的互动。
谷歌现在
我们早就知道Google是卡片设计最好的网站。一些应用已经在其基础架构中发挥了重要作用,比如Gmail Promotions和谷歌眼镜。Goole现在需要进一步完全采用卡片设计。这个产品是一个虚拟的个人助理。它会提醒你朋友的生日,查询当地的交通和天气,告诉你看什么电视。
特点:大部分卡片都需要行动,比如你需要小睡一会儿,查收邮件,庆祝生日,这样它才能提醒你。在你的卡片底部实现一个互动应用可以提高访客的热情,因为你是在引导他们下一步的行动。
你知道它要来了。Pinterest最突出的特点就是使用了迄今为止最流行的卡片设计之一。大量的模仿者让它越来越受欢迎。Pinterest是一个可视化的收集板,它允许客户收集图片并将其添加到虚拟板上。停留在卡片上让用户可以选择收藏、发送、喜欢或编辑(如果它已经保存在你的收藏面板中)。点按“收藏”以给你更多选择,包括访问此图片的URL。
特点:鼠标停留在卡片上可以给出选项,可以很好的提出交互的要求,不会模糊卡片的图像。
推特
Twitter的卡是一个多媒体微博附在上面。该媒体可以是一张照片、4张照片的集合、一段视频、一段音频等。这些视觉卡片在无尽的文字和标签海洋中格外醒目。
特点:正面和中心,Twitter鼓励回复消息,转发和收集喜欢,但与脸书类似,它隐藏了一些负面的互动,如不回复和阻止。同样,在你的卡片设计中,最好把重点放在你最希望人们做的事情上。
6个卡片设计案例
既然你已经看到了那些顶尖的艺术家是如何在设计中运用卡片的,那就让我们来看看像你我这样的设计师每天是如何在作品中组合卡片的吧。
Roman Shkolny想象用户的邮件接收界面使用卡片,卡片可以将收到的邮件列表可视化。在这种情况下,邮件可以直接堆叠在对话框中。当你悬停在卡片上时,你可以看到彩色标签、回复、前进、删除和更多选项。
Barthelemy Chalvet设计的Move产品对卡片的使用率很高,你可以选择、删除或保存卡片以供以后浏览。弹出式卡片给用户更多的提示。
可口可乐的Ahh.com大胆地使用了大量的卡片,有些是长方形,但大多数是正方形,有些富有动感但又不失格式和规律性。如果你点击每张卡片,它会翻页并给你2个交互请求:加入列表或现在玩。
受欢迎的设计师喜欢访问运球,一个有卡片设计的网站。每张卡片都提供了关于有多少访问者点击了这张卡片,有多少人喜欢它,以及有多少评论被列出的信息。当用户的鼠标悬停在该卡上时,他可以看到一张图片的预览,并同时下载数据。
Silktricky是我最喜欢的卡片设计,因为它很有趣。卡片的互动和观察它们对你的选择的反应让整个设计感觉很直观。
Vox进入了一个他们称之为叠牌的纸牌游戏。与滑动显示类似,卡片叠放提供了关于特定主题的全面信息。每张独一无二的卡片都致力于回答一个话题的一个特定方面。卡是可以共享的,而且由于它们的尺寸可以缩小,卡也很容易消费。
摘要
卡片是让你的设计更全面、人性化、互动性更强的最好方式。它们非常值得了解和使用。
现在你了解了卡片设计,你会把它用在你的设计中吗?