卡片式设计
卡片,你或许不熟悉这个术语,但是你绝对不会对卡片的概念感觉陌生。现在,卡片在网页设计中是普遍存在的,并且还将越来越流行。事实上,Google,Twitter和Facebook这三大受推崇的网页全是这么设计的,所以至少粗略的看一下卡片是很值得的。但是,因为我们不想在这浅谈,所以让我们直接深入地了解一下吧!
什么是卡片?
简单的回答,卡片就是交互信息的承载体,通常以矩形的方式呈现。就像信用卡或者棒球卡,网页卡片以一个浓缩的形式提供了快速并且相关的信息。
所有的卡片特点就是交互性。不仅仅是他们提供了信息,而且他们用另外一种委婉的方式去要求一次互动。卡片通常包括按钮或者发布到社交媒体的方法。
什么不是卡片?
因为术语“卡片式设计”正处于初始阶段,关于什么是卡片、什么不是卡片还有很多的问题与疑惑。而不是所有人都叫它卡片这个事实增加了它的不确定性。一张卡片正如一个人名、一个模块、或者一个肖像(在这就仅仅举例几个)被人所知道。
或许有时,通过排除它不是什么来定义它更容易些,这样反过来就知道它是什么了。一张卡片严格来说不是一个设计。你不能简单的只是有一张纸,画一些矩形在上面,然后就称每个矩形为一个卡片。但是,如果你乐意这样叫的话是可以的,然而它并不适合这个文章中假定的定义。反而,一张卡片必须具有功能性、独立性,并且有可翻动性(用户可以点击,查看更多详细内容)。
现在我们可以看看Dr Phil 是怎么说的。他说过很著名的一句话就是:不论你把薄饼烤的多么光滑,它依然有两面。查看卡片的需要注意的是:卡片有两面。并不是说卡片要有一个翻转动画,相反地说每张卡片呈现出的一个信息的概览,并且每一张卡片给你进一步参与的选择(可点击性)。一张卡片不仅仅是一条信息,它还总是可以让人去做更多。
根据这个定义,一张卡片不能仅仅是好看,它还必须有用。
为什么你应该使用卡片??
卡片能够针对令人满意的、特别的功能以不同的方式被使用。下面有一些让你的设计中使用卡片的主要原因:
卡片能够抓住眼球。相对于过度的无理由的文本,卡片是更好的选择。
卡片是响应式的。为手机浏览器的设计是必须的,卡片可以很好的帮助响应式设计。
卡片易读。因为它们有限的空间,卡片不能说得太多。但是这是一件好事!读者如果想要知道更多的话就会点击它。
卡是可共享的。卡片使读者能够快速并轻松地通过社交、手机和邮件平台分享出内容。
你应该怎么使用卡片?
交互的类型有很多,关键是你想怎么去培养和你的网站游客的关系。针对你自己的网站回答这个问题,把自己作为UI/UX设计师,想想你怎样去和你的网站游客互动,他们又会怎样与你互动。
让我们看看4大使用卡片的主要网站。每一个都有强大的特点。
Facebook的文章列表区就是卡片式设计的。每张卡片都突出了内容、、一种喜欢的方式、分享,并且还可以添加评论。它还增加了网站的社会影响力。你能够看到有多少人点赞、分享或者评论,这些都将影响你的网站的信誉。有一种简洁不唐突的方式是提供下拉菜单,其中包含了隐藏、取消关注、举报垃圾邮件等选项。
特点:很明显,Facebook是一个激励用户去积极参与,并且愿意与网站保持联系。他们更想要你不去思考取消关注或者从你的文章列表区隐藏某些卡片(这样网站会丢失一些关注、浏览量)。