卡片式设计 大未来 1

作者: fangjun 分类: 网站设计 发布时间: 2017-05-10 18:51

你是否常发现网站(如下图)中有这样的一块又一块的图形设计?这称之为「卡片」,近年来 卡片式设计 在网站上越来越常见。但别搞错了,卡片式设计并非一种流行趋势或花招,事实上,它正是因为非常实用而受到欢迎!

在这篇文章里,你将会了解对于一个网页UI 设计师而言,卡片式设计的意涵是什么、优缺点、最佳实务,以及未来卡片式设计将如何演进,同时推荐一些网路上的资源给大家。

  Photo credit: Site Inspire

  使用卡片式设计的优缺点

就像任何设计的技巧一样,卡片式设计 Card Design 的介面并非是万灵丹。卡片式设计甚至能让设计师们能为此争论不休一整天。

卡片式设计强调视觉化呢?还是著重在互动呢?

是过时还是新潮的概念呢?

到底使用者喜欢这样的设计方式吗?

卡片式设计可说是讨论度非常高的一种设计的技巧。无论是线上商城 Bezar、房屋仲介网 Realtor,甚至是主题式设计社群网站 Dribble,你会发现卡片式设计已被发挥的淋漓尽致。

  Photo credit: https://bezar.com/#_=_

  

  Photo credit: http://www.realtor.com/realestateandhomes-search/Los-Angeles_CA

  

  Photo credit: dribbble.com

  看完这三个简单的范例之后,让我们来认识卡片式设计的优缺点吧!

  卡片式设计 的优点

  1. 响应式特性让卡片的设计有发挥空间

矩形的卡片设计能顺利与行动装置的形状搭配,因此无论哪种装置都能让用户获得一致的体验(让介面更简单、易懂、意使用)。

  2. 超级适合内容具有累积性的网站

特别是当你想要在同一个视窗检视多个资讯,卡片式设计特别能符合这样的需求。 (编按:例如许多新闻媒体网站)

  3. 区块式的文章呈现方式,让使用者更容易浏览与点击

在一个标准的格式之下,卡片能清楚呈现同一层网站层级之下的多样内容,一张卡片只表达一种想法。让使用者在浏览上享有更充分的便利与自由。

  4. 有利于使用者把文章分享到社群网站上

别忘了在卡片式设计网站上使用分享功能,搭配 Hover-to-reveal 功能让分享更迅速!

  5. 风格多元

卡片式设计基本上就是结合扁平、极简的元素。当我们使用窗格式网站设计,卡片可以变化为瀑布流样式或杂志风格,这时候就要看您的使用者喜爱哪种风格了。

使用卡片式设计的缺点

1. 这种设计实在是太常见了

许多网站的设计让人觉得好像是盗版的 FACEBOOK 或 Pinterest,感觉好像在哪里看过。 「Web Design of Human Eye 」一书曾提过,厉害的网站设计能让人觉得网站具有原创性,以及似曾相识感。

2. 需要使用者投入互动

卡片式设计并非只是一种视觉上的效果,而是要让使用者感到使用经验更佳、网站更好用。

3. 视觉上的负担

卡片式设计网站的资讯量通常都非常的多,会对使用者感官产生负荷。这时候,可以考虑用杂志风格来改善这个问题。

4. 有时会造成反效果

成功的卡片式设计需要缜密的心思以及一定的技术水准,否则网站排版时,会产生不必要的空间。每张卡片都需要让图像、标题、次标题达到最佳视觉平衡,否则还不如使用原本的标准格式模板。

  卡片式设计的最佳实务

或许每个网页设计师都会同意-卡片式设计并非如想像中那么简单。制作卡片式设计介面需要有清楚的审美观,且要能让使用者很直观的执行每个动作。也就是说,好的卡片式设计需要兼具美观与易用原则。

  Photo credit: Elite Model Management

  好的卡片式设计是简洁而简单的,也同时能让使用者感到内容丰富。一个成功的卡片式设计网站需要兼具上述两者特性。

卡片式设计不需要遵守一系列规矩。对于一个即将要开始进行卡片式介面设计的人而言,所有该需要知道的就是基本的设计原则就够了。在此,我们可以把卡片式设计拆解成七个基本元素:

  1. 使用「留白」

根据「Zen of White Space in Web UI design」,「留白」才能适当的安置每张卡片。

  2. 一张卡片一则资讯

要把一张卡片想成是一种「Call to action」。那到底要有多少资讯才恰当呢? Pinterest 的资讯分量是可以参考的-包含图片、使用者、分类、钉选、加入最爱等(当然有些功能是可以从拉出的页面点选的)

  3. 选择清晰又鲜明的图片

卡片中的图片通常不大,因此剪裁时更需要注意保留图片要传达的讯息。我们建议图片占整张卡片的比重为50%~75%,把其他部分留给文字及留白。

  4. 简单的排版

虽然设计花俏的标题常引人注目,但是在小小一张卡片中会受到限制。对于一个新手而言,卡片的标题试试中型大小的「无衬线体 sans-serif」、内文则用一般大小吧!

  5. 创造令人惊喜的细节

动画、影片、圆框、独特的颜色…精心设计小细节,就可以让你的网站跟其他设计师不一样!把这些效果想像成香料-只要加一点点,而非过度花俏杂乱,否则会让人觉得你的设计太过求好切而本末倒置啰。

  6. 开放式的格点

设计时记得让每张卡片的间格都一致,并尝试各种大小与断点吧!

  7. 好用,而且要比使用者再多想一步

再度声明,卡片式设计不只是种视觉效果,更要让使用者觉得更直观好用。诚如我们在「Interaction Design of Best Practice」所提及-费兹法则(Fitt’s Law)再适用于这也不过了:创造大量且有留白的超连结吧! (编按:Paul Fitt 为提出人机介面设计的心理学家,所提出的法则广泛应用于使用者介面设计上)

优秀的卡片式设计无非是确切地去实践最根本的设计原则(或许这也是它困难之处)。请记得,每张卡片的介面功能与其设计是同等重要的。

发表评论

电子邮件地址不会被公开。 必填项已用*标注