谈什么是卡片式设计?

卡片式设计

  卡片,你或许不熟悉这个术语,但是你绝对不会对卡片的概念感觉陌生。现在,卡片在网页设计中是普遍存在的,并且还将越来越流行。事实上,Google,Twitter和Facebook这三大受推崇的网页全是这么设计的,所以至少粗略的看一下卡片是很值得的。但是,因为我们不想在这浅谈,所以让我们直接深入地了解一下吧!

  什么是卡片?

  简单的回答,卡片就是交互信息的承载体,通常以矩形的方式呈现。就像信用卡或者棒球卡,网页卡片以一个浓缩的形式提供了快速并且相关的信息。

  所有的卡片特点就是交互性。不仅仅是他们提供了信息,而且他们用另外一种委婉的方式去要求一次互动。卡片通常包括按钮或者发布到社交媒体的方法。

  什么不是卡片?

  因为术语“卡片式设计”正处于初始阶段,关于什么是卡片、什么不是卡片还有很多的问题与疑惑。而不是所有人都叫它卡片这个事实增加了它的不确定性。一张卡片正如一个人名、一个模块、或者一个肖像(在这就仅仅举例几个)被人所知道。

  或许有时,通过排除它不是什么来定义它更容易些,这样反过来就知道它是什么了。一张卡片严格来说不是一个设计。你不能简单的只是有一张纸,画一些矩形在上面,然后就称每个矩形为一个卡片。但是,如果你乐意这样叫的话是可以的,然而它并不适合这个文章中假定的定义。反而,一张卡片必须具有功能性、独立性,并且有可翻动性(用户可以点击,查看更多详细内容)。

  现在我们可以看看Dr Phil 是怎么说的。他说过很著名的一句话就是:不论你把薄饼烤的多么光滑,它依然有两面。查看卡片的需要注意的是:卡片有两面。并不是说卡片要有一个翻转动画,相反地说每张卡片呈现出的一个信息的概览,并且每一张卡片给你进一步参与的选择(可点击性)。一张卡片不仅仅是一条信息,它还总是可以让人去做更多。

  根据这个定义,一张卡片不能仅仅是好看,它还必须有用。

  为什么你应该使用卡片??

  卡片能够针对令人满意的、特别的功能以不同的方式被使用。下面有一些让你的设计中使用卡片的主要原因:

  卡片能够抓住眼球。相对于过度的无理由的文本,卡片是更好的选择。

  卡片是响应式的。为手机浏览器的设计是必须的,卡片可以很好的帮助响应式设计。

  卡片易读。因为它们有限的空间,卡片不能说得太多。但是这是一件好事!读者如果想要知道更多的话就会点击它。

  卡片是可共享的。卡片使读者能够快速并轻松地通过社交、手机和邮件平台分享出内容。

  你应该怎么使用卡片?

  使用卡片的最主要的一点是与用户互动并且让用户自主互动。

  交互的类型有很多,关键是你想怎么去培养和你的网站游客的关系。针对你自己的网站回答这个问题,把自己作为UI/UX设计师,想想你怎样去和你的网站游客互动,他们又会怎样与你互动。

  让我们看看4大使用卡片的主要网站。每一个都有强大的特点。

  Facebook

  Facebook的文章列表区就是卡片式设计的。每张卡片都突出了内容、、一种喜欢的方式、分享,并且还可以添加评论。它还增加了网站的社会影响力。你能够看到有多少人点赞、分享或者评论,这些都将影响你的网站的信誉。有一种简洁不唐突的方式是提供下拉菜单,其中包含了隐藏、取消关注、举报垃圾邮件等选项。

  特点:很明显,Facebook是一个激励用户去积极参与,并且愿意与网站保持联系。他们更想要你不去思考取消关注或者从你的文章列表区隐藏某些卡片(这样网站会丢失一些关注、浏览量)。

  你能以相同的方式使用卡片——设置卡片去鼓励积极的交互。

  Google Now

  我们早已知道谷歌是卡片式设计的最好的网站。一些APP在它的基本架构中卡片早已起了很大的作用,例如Gmail Promotions和Google Glass。Goole Now还要更进一步、完整地采用卡片式设计。这个产品是一个虚拟个人助手,它会提醒你朋友的生日、查看本地的交通和天气、告诉你看什么电视。

  特点:大多数卡片需要动作,例如:你需要打个小盹儿、看看邮件、庆祝生日,这样它才好去提醒你。在你的卡片底部实施一个交互申请能够提高访问者的积极性,因为你在引导他们进行下一个动作。

  Pinterest

  你知道它正在来临。Pinterest最突出的特点是使用了到现在为止最受欢迎的卡片式设计之一。大量的模仿者正在使它越来越受欢迎。Pinterest是一个视觉化的采集板,它允许客户去采集、添加图片到虚拟的板面上。在一张卡片上逗留给了用户选择去采集、发送、点赞或者编辑(如果它已经保存在你的采集面板)。点击采集可以给你更多的选择,包括访问这张图片的网址。

  特点:鼠标在某张卡片停留就可以给出选项这点可以很好地发出互动请求,并且还不用模糊卡片的图像。

  Twitter

  Twitter的卡片是带有多媒体的微博附着在上面。这个媒体就可能是一张照片、4张照片的集合、一个视频、一段音频等。这些视觉化的卡片在无尽的文本、标签海洋中特别能抓住眼球。

  特点:前面和中心,Twitter鼓励回复消息、转发和收藏点赞,但是类似于Facebook,它隐藏了一些消极的交互,例如不回复和封锁。同样的,在你的卡片设计中,最好主要关注你最想要人们去做什么。

  卡片式设计的6大案例

  既然你已经看了泰斗是如何在他们的设计中使用卡片的,那现在就来看看现在每天,像你我一样的设计师在他们的作品中是如何结合使用卡片的。

  Roman Shkolny想象用户的邮件接收界面使用卡片,这样可以将接收邮件的列表视觉化。在这个案例里,邮件能够直接堆叠在对话框里。鼠标在某张卡片上停留就可以看到颜色标签、进行回复、前进、删除和更多的选项。

  Barthelemy Chalvet 设计的Move Product 高度地使用了卡片,而你可以对卡片进行选择、删除或者保存下来以便以后浏览。弹出式广告的卡片给了用户更多的提示性。

  Coke’s Ahh.com大胆地使用了大量卡片,一些矩形,但大多是正方形的,一些有活力但却不失格式、规律性。如果你点击每一张卡片,它会翻页给你2个互动的请求:添加到列表或者现在播放。

  受欢迎的设计师都喜欢逛Dribble,一个卡片式设计的网站。每张卡片提供了关于多少浏览者点击这张卡片的浏览量,多少人喜欢它,还有有多少评论被列举出来。当用户的鼠标停留在卡片上,就可以看到一张图片的预览,同时也可以下载数据。

  Silktricky 是我最喜欢的卡片式设计,因为它很有趣。卡片的交互、看着它们对你的选择做出的响应,让整个设计感觉很直观。

  Vox用他们称为的卡片堆积进入了一个卡片游戏。类似于滑动显示,卡片堆积提供了一个关于特别的主题的全方位信息。每一个独特的卡片都致力于回答一个主题特定的一面。卡片是可分享的,因为它们的可缩变的尺寸大小,卡片也是容易消耗的。

  总结

  卡片是让你的设计更加全面、人性化、更有互动性的最好方式。它们非常值得你去了解、使用。

  既然你已经了解了卡片式设计,你会在你的设计中使用吗?

谈什么是卡片式设计?,布布扣,bubuko.com

时间: 2025-01-12 08:38:35

谈什么是卡片式设计?的相关文章

卡片式大学综合英语词汇(Windows Phone 8.1 RT app)

闲暇时间写的简易卡片式记单词app.词库是原滋原味的大学综合英语词汇,包含语音,使用卡片式设计.离线词库,随时随地记单词. 商店:http://www.windowsphone.com/zh-cn/store/app/%E5%A4%A7%E5%AD%A6%E7%BB%BC%E5%90%88%E8%8B%B1%E8%AF%AD%E8%AF%8D%E6%B1%87/2beffb97-59dc-4d31-b249-b889c5f4bf85?

如何编码实现卡片式的listView

一直很喜欢使用知乎日报, 也一直很钟情于知乎日报的卡片式设计,不过基于某种原因,一直在项目中没怎么使用到,恰好今天在弄毕设的时候,想到确实可以再自己listView的美化下一些功夫,于是自然就想到了卡片式,便着手研究了下,实现了这种效果.效果图如下: 首先先写好我们的布局,既然是listView,当然就少不了两个基本的布局啦,一个就是大家熟悉的listView(我这里使用的是开源的XlistVIew),另一个就是listView的item布局啦. ListView.xml如下: <Relativ

卡片式电脑介绍

1.Raspberry Pi The Raspberry Pi Foundation是英国一个小型的慈善组织,成立的宗旨在于推广科技,而非以销售技术来营利.该基金会过去从来没真的发表过一款产品,因而选择了两家全球渠道商e络盟和RS Components为其处理首批Raspberry Pi订单. Raspberry Pi 1.Raspberry Pi The Raspberry Pi Foundation是英国一个小型的慈善组织,成立的宗旨在于推广科技,而非以销售技术来营利.该基金会过去从来没真的

报表工具轻松搞定卡片式报表

在我们日常生活或工作中,经常会看到这样一个个小卡片,上面记载着某件商品或者某个人的基本信息.如同名片一般,看起来简单明了.而在数据库中,这些信息实际上是密密麻麻的一条条记录,直接查看非常容易看错,如下图所示: 那么我们怎样才能够将这些信息以卡片形式,一条记录一张卡片的来呈现呢 ?下面,我们一起来看一下怎样利用报表神器-润乾报表,来简单轻松地生成这类报表: 首先(第一步),打开报表设计器,连接好数据源,新建一张空白报表,设置数据集,我们这里是用的SQL语句如下: SELECT 雇员.名字,雇员.雇

圆角边框以及阴影制作卡片式图片 - 学习笔记

圆角边框以及阴影制作卡片式图片 圆角边框 border-radius 卡片使用阴影 box-shadow 利用阴影给图片底部创造一个长方形 内部的元素会直接覆盖整个阴影 HTML 部分 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>卡片式图片&l

【Ratchet】卡片式布局

卡片式布局在手机版的网站中很常见,这一点Ratchet框架中,这一点还做得不错的. 本手机版网页的开放前端框架的搭建,在<[Ratchet]Ratchet2.0.2的下载.配置与Helloworld>(点击打开链接)中已经介绍过了. 比如如下的效果: 其实现代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&g

【AmazeUI】卡片式布局

本文与<[Ratchet]卡片式布局>(点击打开链接)为姊妹篇,在AmazeUI的官网上没有这种布局,但是,我们可以利用其面板组的方式去实现. 先贴上本网页所处的目录结构,同样地,在windows下的Web文件夹趴了几张图片做实验.当然,为了节省用户的流量与节省服务器的容量,实际的操作中不应该使用如此高清的图片. 做出如下的效果: 其现实的代码如下: <!--使用HTML5开发--> <!doctype html> <html class="no-js&

避免窗口切换闪烁——卡片式布局的使用方法

在一个程序中,如果每个模版的切换都需要开启一个新窗口,一来窗口逐渐多了会造成混乱,二来新窗口突然弹出造成的闪烁难免会然用户产生不好的体验. 这时,可以使用卡片式布局来实现在一个窗口内切换不同面板. 1:首先,往窗口拖动一个面板,作为母容器. 2:右键该面板,选择“设置布局”——>“卡片式布局” 3:之后就可以往该母容器添加面板,调整大小.添加组件.设置事件.注意,添加的面板要在导航器中调整等级,必须处于母容器内并且子容器并行等级.并且,卡片在母容器内的序号同其添加的顺序,而且从2开始递增.0,1

再谈登陆窗体的测试用例设计要点

再谈登陆窗体的测试用例设计要点 前面我已写过一篇关于登陆窗体的测试用例的文章,自我感觉总有一些不足之处.这篇文章主要是对上篇文章的补充吧 上篇博客的地址:http://blog.csdn.net/haiyan_cf/article/details/41308949 一.登陆界面图展示: 一.从测试用例设计方法的角度考虑: (1)等价类分析法:分为有效等价类和无效等价类. 有效等价类,输入正确的用户名和密码,验证是否能登陆成功. 无效等价类,输入错误的用户名或密码,登陆时是不是能给出合理的提示信息