为什么卡片式设计这么火?

图片 9

为什么卡片式设计这么火?

| 0 comments

互联网时代的成功故事里,机遇和运气是增添它们传奇色彩的决定性因素。一个零售企业适逢互联网萌芽,在90年代这个网络拓荒期逐渐膨胀成为响彻北美的互联网巨头,这是亚马逊的故事。而Facebook的开头则更有意思一些,校园创业,友情与背叛,在移动端设备过度阶段引领社交网络变革,成就了另外一个走上互联网时代的年轻富豪。

智加设计一家专注设计的公司,我们秉承服务第一,质量第一的理念。我们双手实现您的想法。设计来智加,助您事业更成功。
智加官方联系方式:010-8270-8680:400-018-8205:www.zcodesign.com:www.zcobrand.com

故事的背后总有各种各样的解读,创业者的过往和人格魅力,特定时代的选择与契机,合作与竞争中的对抗与促进,等等等等。对,它们很重要,撇开那些虚无缥缈的影响因素和传奇话本一样的故事情节,这些互联网产品都有着相同的基因:优秀的用户体验。

  
 从线上商店到社交媒体网站,卡片式设计正迅速成为网站设计的火热趋势之一。由于手机等移动设备用户不断增加,人们越来越倾向于在网站中使用卡片式设计。一方面,卡片式设计可以将不同大小、不同媒介形式的内容以统一的方式进行混合呈现,实现了图文的完美结合,另一方面,卡片式设计可以在PC端和手机等多种不同的设备上保持协调一致的感官效果,提供优质的用户体验。在响应式网站中用好卡片式设计能够有效扩大网站影响力,提高品牌知名度,增加网站流量。所以今天小飞就带大家了解一下什么是卡片式设计,为什么这种设计这么受欢迎以及怎样更好的使用卡片式设计。

撇开此刻正被传颂的许多优秀产品,Facebook和Amazon的产品设计在很长的一段时间里,是被当作范本来进行分析和学习的,这是做不得假,且有迹可循的。

什么是卡片式设计?

什么是用户体验?

     
卡片式设计,顾名思义,就是将网站中的各种信息组织成卡片,每一张卡片有着属于自己的信息。一张卡片可以以不同的形式、颜色呈现,不过一般而言,每张卡片会包含一张图片或一个图标,再加上一些基本信息,比如标题、文本等。在这些信息之中,图片是卡片式设计的重中之重。这是因为人是视觉动物,在卡片式设计中使用图片更能瞬间抓住用户的眼球;一图顶千言,高质的图片更具说服力,往往令精妙的文案也区居第二。卡片式设计的优势就在于以简单的方式实现了信息和内容的高度融合。火爆一时的瀑布流就是卡片式设计的一个分支,国外的Pinterest网站是卡片式设计应用的典型。

你可以在网络上轻松找到它的解释。但是从最简单最直观的角度上来界定用户体验,可以用每一个网站访客的满意度。网站布局是否清晰,网站地图和导航是否直观,用户信息是否安全,操作体验是否流畅无碍,这些都是用户体验是否优秀的指标。

图片 1

然而,除开这些太过简单的界定,用户体验其实有着更加重大的意义,对于网站和开发的方方面面有着更深入的影响。对于网页设计师而言,用户体验并非同用户进行互动之后获取满意度的被动结果,一个成熟的设计团队能够通过精心的计划和研究来构建卓有成效的体验和交互。

为什么卡片式设计这么火?

影响用户体验的元素

1.响应式设计

用户体验相关的理论优先考虑如何通过设计对单个用户认知产生预期的影响,并且控制这种影响,所以,给每个用户都通用的用户体验设计方案实际是并不存在的。但是,如果你仔细观察那些经过顶尖设计团队设计的网站之后,你会发现它们在设计有着许多一致的地方,确保它们更易于开发,更轻松地发布,而这些一致的地方被界定为用户体验的关键领域:易用性、可预性、可接受性和价值。

     
 现在移动端流量超过PC端早已经不是什么新闻了。在现在这个时代,一个网站必须在不同设备上都有良好的呈现,才有可能获得大众的欢迎和喜爱。卡片式设计似乎就是为了这一目的而生的。它对于移动端有着良好的兼容性,使用这种设计我们可以将图片、文本等整合到卡片中,而这些卡片有灵活的高度和宽度,可以根据屏幕的尺寸,快速重组网站的内容元素,在大屏幕上是横直的,在小屏幕显示垂直。总而言之,卡片式是很好的响应式设计,能够同时适用于PC端和移动端。

1) Value 价值

图片 2

为访客可提供使用价值是将点击转化为销售量并留着用户的关键因素。此处所说的价值的核心就是你所提供的产品,和用户所需要服务之间的交集。了解你的网站的价值其实也就是了解你的目标用户的过程:研究给你网站带来流量的用户是什么人,这些流量从何而来,为何而来,这些数据可以更轻松地帮你界定你的网站的价值。

2.排版整齐

图片 3

     
 当我们查看任何带有卡片式设计的网站时,最直观的一个感受就是整齐有序。卡片式设计常常会有一个庞大的栅格系统,以保持每张卡片在尺寸和间隙上的一致性。这种规则的栅格系统往往是基于一定的信息框架的,在做分屏式设计时我们也提到过信息框架的建立有助于网站内容有逻辑的分门别类,卡片式设计也是一样。对设计师来说,卡片能够帮助他们有效组织网站的内容,对网站上的各个元素进行合理布局,而对用户来说,整齐划一的卡片格局也方便他们快速获取自己想要的信息,体验更顺畅。下图是知名的创意作品展示社区Dribble的网站,它很好的应用了卡片式设计,让用户体验更加简单直观。

最后也是最关键的——确保网站对于用户的价值和你预期是一致的!如果你的网站内容丰富,产品描述足够翔实,但是支付系统不够方便,可能会导致用户转向其他支付更加轻松的同类站点——用户会转向设计更符合他们需求、更容易带来价值的地方,毫无疑问这对于你是不利的。

图片 4

2) 易用性

3.简单易读

设计不佳的网站会在竞争之下失去目标用户,换句话来说,就是设计和体验俱佳的网站能够影响目标用户的交互和行为。Facebook
通过清晰而有序的设计让用户产生内容,从而改变了社交媒体的运作模式,为了维持它的可用性,Facebook还提供了许多额外的服务来做支撑。相比于为用户提供一个简单的个人页面,Facebook
更倾向于构建一个一站式的沟通平台,让它成为用户同亲友沟通的必要工具,从而达到挽留用户的目的。

     
 卡片式设计还有一个重要的特征就在于简单易读。因为每一张卡片只是某个功能或内容的入口点,主要展示摘要而不是所有细节。而且卡片的空间都是有限的,一般不会包含太多信息,这要求文本必须简单易读,要能够激发用户的兴趣,吸引用户点击进入浏览。如果你试图在卡片上放太多内容的话,它就会变得又宽又长,这就失去了卡片的意义了。NamesForChange.org这个网站是一个很好的栗子,每一张卡片只放置图片或几行文字,不仅简单易读而且还能够引发用户的互动。

图片 5

图片 6

化妆品品牌让自己的品牌价值和用户的世界观更一致,从而达到维系用户的目的。

4.适合社交媒体

3) 可接受性

     
 提起使用卡片式设计的社交媒体网站,相信大家应该都不会陌生!Facebook,Twitter、腾讯等都采取这种设计方式,它们一般还会在卡片式内容上添加点赞、分享、评论等功能,使用无休止的瀑布流,以达到与用户的互动。而卡片式设计使用户互动更简单,甚至将主动权给了用户,他们可以根据简单易读的摘要确认自己是否想要浏览全文,快速获取自己感兴趣的内容。难怪社交媒体网站这么偏爱卡片式设计。

拙劣的设计可能会影响网站的可接受性和服务的价值,但是它绝对不是最坏的情况。如果网站的浏览器兼容性不好,大量多媒体内容占据带宽但是无法显示,不仅会影响网站的打开体验,而且会影响网站的SEO和排名,用户流失是显而易见的结果。这些足以影响用户访问网站的元素,我们认为它们与网站的可接受性有关系。

图片 7

网页中吸引新用户、维持老用户持续访问的元素,就是我们所讨论的可接受性所涉及到的东西。每一个造成用户打开障碍,让搜索引擎无法准确获取信息的东西,都是网站在可接受性上的缺陷,这也是为什么,越来也多的企业积极地为自家网站提高浏览器兼容性、移动端浏览用户体验——他们不愿意放过每一个呈现给用户且保留用户的机会。

5.容纳各种形式的元素

图片 8

     
卡片式设计很大程度上是灵活的,它能够整合各种形式的内容,图片、文本、动画效果、视频、按钮、链接等。只有你想不到的,没有它包含不了的。而且在网站中使用卡片式设计时,也没有一定的规则。虽然小飞在前面提到栅格系统的整齐有序,即使你不按照横列或竖列进行也没有关系,因为卡片本身就是基于几何美的,就是有规则的,所以充分发挥你的想象力吧,给各项元素来个别出心裁的组合吧。以Futurefabric.co.uk为例,它利用卡片式设计展示了许多不同风格的元素。

Soverin
的网站采用了移动端优先的设计,响应式的设计让网站能够在不同尺寸的屏幕上展现。

图片 9

4) 可预性

6.直观的可操作性

可预性也被称为可欲性,通常指的是一个事物足够优秀或者可靠以至于值得信赖和追随,它也是优秀网站设计的一个重要组成部分。在整个网站的设计中,单个某个元素并不能赋予网站可预性。如果网站设计足够现代,精致的动态效果和优雅的色彩搭配会让用户感受到一致性,用户会感受到这些现代感十足的设计元素之间拥有关联性。时尚的网站会从每个细节诠释它的时尚属性,而安全的网站则通过全面而细致的方案传递给用户安全的体验,这些元素与元素之间的一致关联,造就品牌的明确一致性,也构成了网站的可预性。

     
对于手机等触屏设备的用户来说,网站上的卡片式设计让他们觉得更直观,更有想要点击的欲望。一张卡片传递一个信息,想要了解详情就直接点击浏览,不想深入只需向左、向右滑动,查阅其他的内容。还有的网站需要用户向上或向下进行拖动实现内容的加载。在移动设备上人们更加习惯手势操作,因此卡片式设计在手机等触屏设备上的操作性很高。

相关文章

发表评论

Required fields are marked *.


网站地图xml地图