存档

2013年12月 的存档

卡片式设计——移动设计的未来

2013年12月30日 没有评论

 

卡片式设计——移动设计的未来

 

卡片正在迅速成为移动设备的最佳设计模式

我们正在见证一次网页设计的重构,告别之前冗余的页面和访问地址,迎来由众多个体内容组成的全新的个性化体验。随着移动技术的发展,移动设备的普及,以及史无前例的数据获取方式(通过 API 和 SDK),传统的内容被分拆成个体进行重新聚合,呈现给用户统一的体验。

卡片式设计——移动设计的未来

 

这种内容的聚合方式是根据:

内容消费的主体,以及他 / 她的兴趣、喜好和行为。

  他 / 她的地理位置和环境背景

  他 / 她的朋友的兴趣、喜好和行为

  目标广告生态环境

如果说这个时代的主要媒介是手机和平板等移动设备的话,那这个时代的主要设计模式将注定是卡片式设计。

请看以下案例:

Twitter Card

卡片式设计——移动设计的未来

 

Twitter 在今年 4 月份推出了支持更多媒体类型的Twitter Card。在推出的新 Twitter card 功能中,Twitter 可以让开发者在单个 Tweet 上显示展示型相册、媒体播放器以及与 app 的深层链接等。

Google Now

卡片式设计——移动设计的未来

 

以 Google Now 为代表,Google 全线产品都努力趋向简洁,在其中,“卡片”这一并不新鲜的概念成了 Google 最重视的元素。(推荐阅读:)

Pinterest和Spotify等产品

卡片式设计——移动设计的未来

 

Pinterest(上图左)的内容以卡片呈现,Spotify新推出的 Discover 功能(上图右)也采用了卡片式设计,Facebook 也在向卡片式风格发展,iOS 7 中也采用了大量卡片式设计,如应用切换和 AirDrop。

卡片作为一种媒介

卡片式设计——移动设计的未来

 

卡片式设计正在席卷科技产品界,但其实作为一种内容的宣传媒介,卡片已经存在很长时间。公元 9 世纪的中国曾使用卡片来玩游戏,17 世纪时,伦敦的商人利用卡片来招揽生意,18 世纪时,欧洲贵族家庭的仆人会用卡片向主人介绍即将登门拜访的贵宾,而人们交换名片的传统也已持续数百年。

我们会互赠生日卡片、贺卡,我们的钱包里塞满了信用卡、借记卡和会员卡(当然还有身份证和驾照)。我们会玩各种卡片游戏:三国杀、大富翁等等,80 后不会忘记小时候我们下课去买小浣熊干脆面,仅仅是为了里面附送的三国或者水浒卡…… 各种球星卡也成为了童年美好的回忆。

在计算机技术没广泛普及之前,空管会使用卡片来调度飞机,即使现在,有些仍然是在这么做的。电影拍摄中使用的故事板也是采用了卡片格式,同漫画相似,每一张图(卡片)都代表了一个电影中的场景。相片又何尝不是一张张的卡片呢?每张相片都是一张讲述着独特故事的卡片。另外还有旅途中寄往亲朋的明信片,等等。

卡片在商业领域的运用就更不是新鲜事了,最常见的就是大大小小的优惠券了。我们都干过从产品包装盒或是报刊杂志上剪下角落的优惠券这种事吧?逛街的时候,各种推销人员向你发放优惠券,家里的邮箱中也塞满了扔不完的由许多优惠券组成的传单。

卡片式设计——移动设计的未来

 

卡片易于操作

卡片式设计——移动设计的未来

 

除了其作为信息媒介的光荣传统之外,卡片最重要的一个特征是易于操作。上图是 Samuel Couto 在Dribbble上发表的作品。在现实世界中,卡片可以翻面(呈现更多内容),可以折叠(呈现概述的内容),也可以展开(呈现具体内容),可以将很多卡片堆起来以节省空间,可以将它们分类、分组。

在虚拟卡片的设计中,我们同样可以运用这些特点,同时我们还可以利用动画和移动效果来将其发扬光大。我们可以提示卡片背面的内容,或提示卡片可以展开。我们可以在卡片中嵌入多媒体内容、照片、视频和音乐。这里能发挥的空间很大。

对于移动设备以及各种尺寸的屏幕来说,卡片是完美的设计形式。如下图所示,在手机上,卡片通常以垂直方式展现(如信息流),在平板上,卡片也可以水平方式呈现(当平板横置时,可添加一栏新内容),卡片的高度可根据内容进行调整。

卡片式设计——移动设计的未来

 

卡片是新的创意画布

可以预见的是,产品和交互设计师们将更多地使用卡片式设计风格,营销人员和广告创意人员也不例外。随着社交媒体热度不减,并渗透进我们生活中许多服务领域,占据我们越来越多的时间,伴随而来的将是更大规模的广告投放。而不论是社交媒体平台,还是广告方,内容都将以卡片式设计为主来呈现。看看如今的 Facebook、Twitter、Pinterest、Instagram 和 Line 等,没有一个不投奔卡片式设计阵营的。对我来说,卡片式设计将是设计和创作艺术领域的 Next Big Thing。

分类: 6如何设计 标签:

卡片的设计正像病毒一样席卷Google

2013年12月30日 没有评论

经常使用 Google 产品的朋友应该体验的出,以 Google Now 为代表,Google 全线产品都努力趋向简洁,在其中,“卡片”这一并不新鲜的概念成了 Google 最重视的元素。

不知 Google 是有意还是无意,卡片的设计体现了典型的现代主义风格,白色正方形方框里只有最关键的文字或者图片,无一丝一毫的冗余(编者按:按照我个人观点,其实这更接近于美国的产品设计传统,由芝加哥学派路易斯.H. 沙利文提出的“形式追随功能”。更大范围的说,如今互联网界轰轰烈烈的设计运动,其实可以从更大的设计界找到源头,而且许多设计风格是早已流行多年,被无数设计师和使用者完善过的)。这种设计似乎在暗示我们,或许今后可以用简单的方式呈现更多的信息。

我头一回见到卡片还是在用知识图谱的时候,此次在 Google Now 见到卡片,感觉既亲切又陌生,以天气和导航为例,Google 一改之前被动提供信息的方式,以大量的个人数据为基础,基于算法来预知用户的下一步动作,从而在用户搜索之前就给出答案,不可谓不高明。只是,凡事需要适可而止,在万众期待 Google Glass 能使用更先进的现实增强技术的时候,Google 居然也拿卡片来糊弄大家,真当卡片是万能的啊!更过分的是,Google+ 每页现在已显示三栏卡片,可 Google 还嫌不足,硬是把评论和多余的内容也隐藏了进去,但是这里你可能要问了,那隐藏了怎么看呢,哎,别急,人家 Google 总能发明异想天开的解决方案:你可以点击小卡片,就会弹出大卡片,完整的信息可是在大卡片上的。

如此单纯可爱的卡片,也被 Google 玩出了忒多花样。

现在吹捧Google卡片是不是还为时过早呢?

Android 的用户体验负责人 Matias Duarte 坦诚:“没人说过卡片是我们发明的,我们只是把这种随处可见的设计搬到了移动互联网领域而已,它和实体卡片一样,从始至终都是为了解决一样的设计问题。”

我说:“大量信息连续性推送的问题从移动互联网出现第一天就存在了,当然早于最近几年才流行的触屏设备。”所以不难理解,当谷歌工程师们面对 Google Now 提出的设计挑战时,为什么选择卡片了,它既可以单独开来灵活使用,又可以组成一组来传递那些大量的或者有连续性要求的信息,并且在表达上能呈现出整体一致的效果。

只是,设计师们没有想到的是,卡片反过来影响了他们的设计方案。Duarte 是这样和我说的:“卡片有着天然的局限性,正是这种局限性使得其他部分的设计变得简单许多,想想看,如果一张卡片上放两三张图片,那会显得多乱啊,所以只能放一张图片或信息,这样一来,就不用考虑多图情况下的排版问题了。”

卡片设计像病毒一样席卷Google

Google 卡片一洗之前信息显示的杂乱无章,在某种意义上甚至重新定义了信息显示,首先、它直接排除了多余的信息,尤其是广告;其次、它淘汰了超链接,能让用户专注于信息本身而不是找信息这种事情上。另外值得一提的是,Google 卡片能在各种尺寸的屏幕上实现无差别体验,甚至是在 Glass 上也一样。

不为人所知的是,Google 花在用户体验上的精力要远远比花在数据整合上的多,别看现在有 41 种卡片,数倍于这个的卡片在 Google 内部就被否定了,每一种卡片类型都是经过数个团队的审核才最终问世,我敢肯定没有哪张卡片是通过行政命令加入那 41 种当中的。

Google+ 也加入了使用卡片的行列,Google+ 首席设计师 Fred Gilbert 告诉我,Google+ 使用了超过三十种卡片,他还特意告诉了我一些很细微的不同,但是我仅仅认出了其中几处。

虽然我本人不建议诸位纠缠于细节,但不可否认,正是这些细节确保了不同的内容在一块屏幕上和谐相处,而且放置卡片的“栏”的概念也值得表扬。它从容的适应不同尺寸的屏幕上,同时还保证着用户体验的一致,比如,在笔记本上,Google+ 可以在同一时间显示三栏卡片;而在手机上可以一次显示一栏卡片,而这并不影响卡片的使用效果。

Google卡片真的真的有点拟物化

在整个采访过程种,有个词一直回响在我的脑海里:存在感。Duarte 这样对我说:“你或许会想,所谓的卡片只是屏幕上的几个象素点罢了。但是,或许你已经注意到,我们的设计师给了卡片以‘肉体’。虽然没有特别复杂的效果,却依然能让人感觉,那是真实的。”伟大的设计师们把平面的设计拟物化,让人下意识的以为那是真正的卡片,从而去摸、去翻、去整理。

这次 Google 大会上,第一次登台的 Google Maps 团队也展示了他们的重大变革,他们的地图卡片整合了更多的信息,不仅有餐厅位置和导航,还有来自普通用户和评估公司 Zagat 的评价,有效的解决了多年来 Google Maps 不得不在地图外增加一个列表显示附加信息的窘境。团队中的用户体验设计师 Jonah Jones 对我说:“我们不想把整个地图都盖住,所以左上角的面板可以展开也可以折叠。但是还有个小小的问题,它总是无法让人感觉到它可以被操作,比如说,当面板处于打开状态时,人们通常感觉它是无法折叠的。”这个问题可能来自于卡片的拟物化设计,批评它和赞美它的人同在。

Jones 和他的团队发现,其实可以学习真的卡片那样,把 Google Maps 上的卡片也堆起来,这样用户就能像使用真的卡片那样使用它们了,卡片也不至于喧宾夺主了。

卡片有点像Google的狗皮膏药,哪需要就能贴哪

如今,这个脱胎于便条的白色矩形成了 Google 显示信息的不二选择,大部分 Google 的产品都采用了它,为来很有可能一举占领所有设备的桌面。但是,作为一家并不以产品设计和视觉传达出名的公司,卡片的效果不应该被吹捧到和多平台战略一样的地位。

Google 已然介入我们的生活太深了,它几乎无所不在,卡片的出现更像是一个缓冲器,一边是手眼通天的巨头,一边是一无所知的用户,新奇事物有效转移了人们的视线,巨头可以更从容的进行布置。

分类: 6如何设计 标签:

Web设计的新宠儿:卡片式设计

2013年12月30日 没有评论

 

卡片正在迅速成为移动设备上最好的设计模式。

目前,我们正在目睹一场Web重构革命,抛弃传统的页面和分类模式,朝着个性化体验方向发展,把许多个性化的内容块聚合在一起。随着移动技术的发展以及各种屏幕图形和尺寸的出现,越来越多的人通过API和SDK来访问各种源数据,因此也让内容逐渐被分解成各个独立的组件,好比一张张独立的卡片,最后再把这些卡片进行聚合。让Web抛弃了传统的把许多内容页面链接在一起的做法,从而形成新的卡片式的Web用户体验。

 

内容聚合依据:

  • 内容消费者的兴趣、爱好以及行为;
  • 所基于的位置和环境;
  • 朋友的兴趣、爱好以及行为;
  • 目标广告生态系统。

正在向‘卡片式’靠拢的设计

1.Twitter

 

Twitter最近面向用户推出了Twitter卡片,用户可以在Tweet里附上媒体内容,只需要简单添加几行HTML到网页中即可,如果用户发了一条链接到你的内容,那么这张卡片就会出现在他的所有粉丝中。

现在纽约时报大概要好好考虑他们的故事如何在Twitter卡片上显示了(上图右边)。

2.Google


无论是Google Now、Google+还是Google Maps,Google都在考虑信息的呈现方式,不是只通过搜索来将个性化信息推给移动用户,而是采用卡片呈现的方式。

3.大家都在向卡片式靠拢


Pinterest在Spotify上的的“发现”功能(图右)也是基于卡片式设计的。许多iOS 7上的操作也是基于卡片式的,比如Airdrop上的按钮。

虽然已经有这么产品采用卡片式设计,但这仅仅是个开始。卡片式设计是一个令人难以置信的设计模式,并且它已经存在很多年了。

卡片所传递的丰富信息


卡片作为一种信息传播媒介,它已经存在很多年了。在9世纪,处在帝国时期的中国就已经使用卡片进行游戏了;在17世纪,伦敦人使用贸易卡片来寻找业务;在18世纪,欧洲贵族的跟班使用卡片来介绍即将到来的客人。数百年来,人们一直在使用卡片传递信息。

朋友过生日时,我们会送生日卡、祝福卡等。现在,大多数人的钱包里都有银行卡、信用卡、驾驶证。在我们的童年时期,我们被各种游戏卡所包围着,如Top Trumps、Pokemon、Panini的贴纸相册等等。在计算技术发明之前,航空管制员使用卡片来调度飞机。

卡片是人们进行快速沟通的一个非常好的媒介,事实上,现在许多电影都是使用类似卡片来制作故事流程的,每张卡片代表一个情景,然后通过讲故事的方式制作出来。大家可以联想下翻阅的照片,每张照片背后都隐藏着一些小故事。旅行时,我会寄明信片。

而在商业领域,优惠券是一个典型的例子,在逛商场时,我们会收到许多来自商家发的优惠券/卡。


卡片拥有多种操作方式


除了这些,卡片更重要的地方是可以随意地无限操作,可以阅读Samuel Couto对卡片操作发的一些简单示例。卡片还拥有更多详细的操作,比如可以被翻过来、被折叠、被堆放、被分类、被分组等。

开发人员在根据手机屏幕进行设计时,可以利用这些信息,也可以嵌入图片、视频、音乐等内容。

请记住,无论你从事哪个行业,移动业务在未来都会成为你的核心业务。而卡片式设计可以与移动设备进行完美匹配,根据不同的屏幕尺寸。在移动设备上,卡片不仅可以垂直堆叠,好比手机上的活动流;还可以水平堆叠,可以对其进行固定,也可以设置其高度,具有高度的灵活性。

卡片是全新创意画布


无需多说,卡片已经在产品和交互式设计师那得到广泛使用。同样,作为营销和广告传媒行业也一样,随着社交媒体的不断发展,会继续分裂为许多服务,占用我们的时间也会越来越多,营销资金将不可避免地随之增加。通过这些服务的一致性线程、创造性画布也都将基于卡片设计。像用户在Facebook、Twitter、Pinterest、Instagram、Line等发的内容,其命名都是基于卡片设计的。

卡片将会成为设计和艺术创造不可或缺的一部分,尤其是在移动设备上。

关于卡片式设计的其他内容阅读:

分类: 6如何设计 标签:

为什么 Facebook 是蓝色的

2013年12月30日 没有评论

 

p2163021757

为什么 Facebook 是蓝色的?因为正如今年戛纳电影节金棕榈奖获奖电影《阿黛尔的生活》的另一个译名《蓝色是最温暖的颜色》吗?扎克伯格也像阿黛尔一样,喜欢上了一个蓝发女孩,然后触发现实扭曲力场,将冷色调的蓝色看成最温暖最舒心的颜色吗?

不是的,颜色背后的玄机可不少,每个颜色都有自己的故事,蓝色的故事尤其多。

很多时候,相比于 Logo 的形状,品牌的配色的地位并不见得低。Google、微软和 eBay 的红黄蓝绿已经成为他们标志性配色。可口可乐的红,百事可乐的蓝也是重要的区分点,足见颜色对于认知和营销有着很大的影响。 Leo Widrich 是 Buffer 的联合创始人,对于消费者习惯有着深刻的研究,FastCompany 刊载了他的一篇文章,讲述颜色的故事。

单凭按钮颜色能认出网站吗?

123

单看这几个按钮颜色(都有蓝色),相信一些熟悉互联网的人已经猜出答案来了,因为颜色确实影响着我们的认知,在脑海里留下深刻的印象。

上图的答案分别是 Facebook、Google 和 Flickr。这个测试是由 YouTube 设计师 Marc Hemeon 制作的,更多测试请戳这里

颜色与我们的认知

不可否认的是,不管是网站按钮还是品牌 Logo 配色,都有一种情感影响力在里面。

pic8

诸如橙色代表的信心、友好和愉悦的感受,而绿色代表和平、健康和生机的意思,蓝色则给人信赖可靠公正的感觉。

再深究一下,绿色适合的是类似医药、科学、环保、旅游和政府机构的颜色,而蓝色则适合贸易、科技、法律和公共事业,可以看到 Dell、HP、IBM、Facebook、WordPress、Twitter、Vimeo 和 Intel 等科技界的大品牌都是蓝色的。

不仅和品牌形象相挂钩,颜色也影响着我们的消费习惯。分析公司 KISSmetrics 的一张信息图说明了颜色和消费的某种联系。

3009317-inline-pic9

如上图所示,粉红代表浪漫和女性化,最适合小女生是显而易见的。而黑色低调奢华,较常用于奢侈品。黄色活泼醒目,用于橱窗展示最好不过。

颜色与性别

在之前讨论 iPhone 5s 和 5c 颜色购买倾向的文章里,我们发现,iPhone 5s 的深空灰(黑色)最受男士欢迎,而 iPhone 5c 的粉红色最受女士欢迎,这也是基本没有悬念的推测,调查结果也证明如此。

推而广之,颜色和性别肯定也有着息息相关的联系。

同样是  KISSmetrics 的研究,它指示在网站配色的问题上,要和网站主要吸引人群相对应。不同性别对于颜色的偏好与不喜是有异同的。

3009317-inline-pic103009317-inline-pic11

这项研究指出,女性最喜欢的三色是蓝紫绿,而男性最喜欢的颜色蓝绿黑,棕色和橙色荣获男女最讨厌三色前两强。事实也确是如此,iPhone 5c 的销售数据中,蓝色和绿色的男女差异较小,为大众颜色。Facebook 选取蓝色看来也不无道理。

历史久远的蓝色

蓝色这么招人喜欢,那么超链接的蓝色是否也是因为如此呢?

根据互联网的主要创造者 Tim Berners-Lee 的解释,在非常早期的 Web 浏览器中,网页显示是灰色背景,黑色文本,那时候也只有暗色调可用,而只有暗色调中的蓝色才能显示与黑色文本和灰色背景的强烈对比,因此蓝色被选中成为超链接的颜色。虽然由于时代的限制,蓝色是不得已才上去的,但是经历了时代的变迁,现今大多数超链接仍是蓝色的,也说明了蓝色在误打误撞中可堪大用。

说到这里,题目当中的问题也可以有个答案了,Facebook 为什么是蓝色的?

根据《纽约客》的报道,因为扎克伯格是红绿色盲,蓝色是他看得最明白的颜色。

题图系《蓝色是最温暖的颜色》海报

分类: 6如何设计 标签:

创新工场汪华:移动互联网的5大创业机会

2013年12月29日 没有评论

 干货推荐,由小编根据汪华在今天移动开发者大会上的的讲话整理而成,包括国内移动互联网的变革趋势、在巨头卡位情况下新进入者的创业机会寻求,以及未来最好的5个创业新机遇是什么。

  国内移动互联网真正的变革明年开始

  移动互联网发展到现在,还没有做的同学都在想“现在进入是不是太晚了”,而已经进入的同学都在想自己下一步要做什么。其实我认为国内移动互联网真正的变革还没有开始,经过这么多年的发展,真正的变革可能要到明年才会开始。我们正在站在巨大变革的门口。

  从量的角度来看,移动互联网现在有5亿用户,但移动互联网行业占经济的比重却还很小。甚至是互联网在很多行业都没有触及,即使在做的比较好的领域如电商、旅游等也只有传统行业的10%左右,其实都是很小的数字。

  但是在我看来,移动互联网所产生的作用应该要比互联网还大。因为它更能融入我们的生活。在我的概念中,接下来的五年到十年,移动互联网会控制到国民经济的50%甚至更多。

  再从质的角度来讲,在移动互联网向所有领域蔓延的过程当中,都会影响到这些行业的决策和发展,甚至改变整个行业的生态环境和做事方法。

  而我们现在就站在真正变革的门口,开发者不仅仅是移动的开发者,更会跳到实体经济的各行各业中,成为推动者。

  今天的移动互联网,巨头卡位,新进入者机会在哪?

  纵观今年的移动互联网行业,可以看到,在平台方面,巨头纷纷卡位,每家都在大手笔收购创业公司,争抢流量入口、社交平台和基础设施等。

  这样一来,大家会觉得移动互联网太挤了,不管想要做什么都有人在做。但这样的问题在我看来不是问题,在做互联网时,也有这样的情景,新进入者想要做的,门户网站都在做。但你看最近和上市有关的公司,兰亭集势、58同城、去哪儿、汽车之家等,都是那个时候做的。

  巨头把平台做好了,往好的方向讲,是真正能推动移动互联网创业者向深水区走的。表面来看,平台型公司占据了很多入口,但这也意味着,他们做好了基础设施,教育好了市场,前路打通,反而更适合创业者安安静静做些事情。

  接下来的两三年,新进入者可以看好的几个机会:

  1、垂直社区和垂直工具

  这个领域还可以分为垂直人群和细分需求两个方面,前者比如儿童、老人、同性恋等这样的细分人群。

  做好这些方面,第一个要点要跳到里面去,你要真正了解这些人的需求;

  第二点是要做出真正符合需求的东西;

  第三点是要玩的转现在的移动互联网体系。

  2、O2O的机会

  这种随时随地、高性价比、快速到达的服务,也是移动互联网现在最大的机会。

  具体实施的方向可以分为平台模式和B2C模式。

  平台模式意味着你可以通过软件和平台进行相应的规范,并对接到大的流量平台上去,把个人服务业和消费者直接打通,现在还有很多“小而美”的东西可以做。

  B2C要做的事情会多一些,要自己集中很多东西卖给客户,但获得的毛利也相对会多一些。

  3、企业应用,尤其是中小企业的应用

  到了移动互联网时代,针对企业的应用需要“易操作+低成本+轻销售+云服务” 。首先移动设备和网络现在很便宜,其次这些设备和网络使用起来非常简单,降低了门槛和培训成本,这些都可以将中小企业服务变成一块非常非常大的市场。

  4、软硬件结合

  这个领域已经非常火热了。我的建议是这块要么做“小而美”,要么做“大而巧”,小而美的毛利比较高,大而巧意味着已经有了一个非常成熟的市场,做软硬结合市场,赚钱是硬道理。

  具体实施过程中,要注意这几点:

  1.虽然做软硬件结合,但硬件才是基础,而且非常难做,你的硬件团队要非常强大;

  2.最好不要当铁人,你做好一项就行了,不要试图做好三项,剩下的两项要么就不去追求,要么就调用身边的一切资源;

  3.你的创新还要体现在软件上。像雷军这样的,都是在利用现有已经成熟的硬件技术,在软件上做自己的创新。

  4.最后一点,千万不要被自己忽悠了,就是硬件一定要挣钱。不要以为自己走硬件赔钱,软件和服务赚钱的路子就行,硬件赔起钱来是个无底洞。

  5、移动娱乐:下一代手机游戏和随时随地的精神满足

  要跳到深水区里面,就要面临着互联网和传统行业的相结合,要么是互联网的人去做传统行业,要么是传统行业的人触电互联网。我更看好互联网人把传统行业的事情做成了,不过这里面有个问题就是:以前做互联网的人,经常做的事情太轻了,每天躲在屋子里写代码就行。但要真正加入到互联网的深水区,这么轻是不行的,你要跳进去,跳到那个行业当中,先忘记自己是做互联网的,搞清楚这个盒子怎么回事,再跳出来,看这个盒子是什么样子。

分类: 8门派江湖 标签:

无觅相关文章插件,快速提升流量