谈什么是卡片式设计?

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

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

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

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

你应该怎么使用卡片?

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

交互的类型有很多,关键是你想怎么去培养和你的网站游客的关系。针对你自己的网站回答这个问题,把自己作为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 用他们称为的卡片堆积进入了一个卡片游戏。类似于滑动显示,卡片堆积提供了一个关于特别的主题的全方位信息。每一个独特的卡片都致力于回答一个主题特定的一面。卡片是可分享的,因为它们的可缩变的尺寸大小,卡片也是容易消耗的。

总结

卡片是让你的设计更加全面、人性化、更有互动性的最好方式。它们非常值得你去了解、使用。既然你已经了解了卡片式设计,你会在你的设计中使用吗?

本文作者 Jacqueline

人人都是产品经理(woshipm.com )中国最大最活跃的产品经理学习、交流、分享平台


相关文章

  • 工艺技术管理
  • 工艺技术管理 摘自<工艺管理手册> 工艺管理工作的性质: 1)工艺管理工作贯穿于将原材料.半成品转变为成品的包括生产准备.加工.检验.装配.调试直至包装出厂的全过程中,对制造技术要作进行科学的.系统的管理. 2)它是解决.处理生产中人与人这间的生产关系方面的社会科学. 工艺管理工作的内容 ...

  • 数控专业毕业设计
  • Xxxxxxxxx Xxxxxxxx 毕 业 设 计 班 级提交日期 数控车床X 向电机座的加工 学生学号:学生姓名: xxx 导师姓名: xxx 专业名称 答辩日期 xxxx 年 xx 月 摘 要 1 随着我国现代化不断发展,市场经济体系的不断完善,我国工业逐渐向成熟化发展.在整个机械工业中,数控 ...

  • 滑片式空气压缩机设计 - 毕设
  • 毕业设计说明书 题目:滑片.转子.定子等主要部件设计.动力学分析及实体建模姓名:谢 兰 学号: 指导教师: 专 业 年 级: 所在学院和系:机械工程学院 完 成 日 期: 1 6 年5 月2 0日 答 辩 日 期: 1 6 年6 月1日 摘要 现代社会在不断发展与前进,人们对于生活质量的要求在进一步 ...

  • 心理学实验设计模板(改)
  • 专业班级 实验设计 姓 名 - - - - - - - - - - - 装 - - - - - - - - - - -- - -- - -订 - - - - -- - -- - - - - -- - 线 - - -- - -- - - - - 学 号课程名称 指导老师 设计成绩 实验名称 实验类型 ...

  • 片式电感器结构浅议
  • 片式电感器结构浅议 Discuss of Construction on Chip Type Inductors 高适 供稿 摘 要:随着全球电子信息产业的飞速发展,其新产品日新月异地展现在世人面前.包括电感器件在内的电子元件是电 子信息产业发展的基石,其作为电子装备的上游产品,自然被要求超前快速地 ...

  • 四年级英语下册教案
  • Lesson 1 : Welcome Back [知识目标] 1.学习日常问候用语. 2.理解领会对话,学会向别人介绍自己. [技能目标] 熟练的向他人问好并介绍自己. [情感态度价值观] 培通过学生之间互相打招呼,增进学生之间的友谊. [教学方法] 一对一练习法, [教学重难点] 1.学习日常问候 ...

  • 电阻.电容.电感规格.封装.尺寸.功率识别
  • 0402 1/16W 0603 1/10W 0805 1/8W 1206 1/4W 电容电阻外形尺寸与封装的对应关系是: 0402=1.0x0.5 0603=1.6x0.8 0805=2.0x1.2 1206=3.2x1.6 1210=3.2x2.5 1812=4.5x3.2 2225=5.6x6. ...

  • 小学英语音标教学设计
  • 小学英语教学设计 语音教学 升阳中心小学校 彭世彬 教学理念1.教学音标的目的不仅是认识48个音标,更重要的是培养学生运用音标的 拼读来学习英语的能力,最后形成正确的语音.语调.拼读是一个熟能生巧的过程,只有反复多拼,才能达到熟练. 2.字母.音标.单词.句子"四结合".音标教学 ...

  • 独乐乐不如众乐乐
  • 独乐乐,不如众乐乐 --浅谈小学英语课外活动的设计 摘要:开展多姿多彩的课外活动是课堂教学不可缺少的.有效的延伸,是重要的教学辅助手段,更是学生拓展英语课外知识的有效途径.因此,在新课程理念下,教师应精心设计一些学生感兴趣的课外活动,激发学生的学习兴趣,使学生变被动学习为主动学习,变苦学为乐学. 关 ...

© 2024 范文中心 | 联系我们 webmaster# onjobs.com.cn