形式与功能 – 卡片式设计思考

在互联网产品中,除了内容型外,一些功能型的产品信息内容也是相当巨大的,特别是管理控制系统,业务管理、功能操作、数据展示等。在信息量这么大的页面中除了重视内容质量外,形式功能的组织与呈现也是同等重要,对提高用户获取有效信息的效率有着非常大的帮助。

上面所说的形式功能的组织与呈现其实讲的是设计排版上的问题,当然对设计师排版功力也有相当的要求。这种排版优化的方法有很多种,我这里主要围绕卡 片式设计的理论进行深入探讨,相信大家对卡片式设计已非常熟悉,虽然已流行了好多年,但是设计形式并不是随着使用年龄的增长而消失,芝加哥学派路易 斯.H.沙利文提出过:“形式追随功能”就能说明这一点。最近笔者在项目改版中也运用了相关卡片方法,发现效果不错,所以希望借在项目里的思考与尝试,抛 出引子,供大家参考。

卡片式设计的定义

在生活中,我们经常接触到各式各样的类似右图中的卡片,比如扑克牌、名片、机场和地铁的指示牌等等。

1469674470-7809-1-630x399

如上图,大家可以看出,他们普遍具有以下特点:

一清晰直观,二简单易懂,三信息模块化。

比如扑克牌我们可以看出虽然只有一个图案,一组文字,但很清晰传达出这张牌所代表的含义;又比如机场和地铁的指示牌,采用了图标、字体元素,很清晰 直观地引导乘客方向,这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。

1469674473-7597-2-1-630x340

如上图,现在卡片式设计的应用场景非常广泛,最有代表性的是微软Win8、Win Phone 7的metro风格,他们也是采用了大量的卡片式设计,据说这种Metro的设计灵感也来自于机场、地铁指示牌。

另外google +、 google play等很多谷歌产品也同样采用了这种设计,如下图

1469674477-2581-3-630x382

正是因为卡片式设计在微软、谷歌的产品界面的大量运用,很多互联网企业也纷纷采用这种设计,这是应用在PC端的界面,内容部分也都采用了卡片式设计,如下图:

1469674472-1543-4-630x399

下图中的移动端的界面,模块中可点击部分也采用了卡片风格。

1469674476-8334-5-630x360

这是印刷类的杂志界面,如下图杂志里的部分展示信息,也采用了这种卡片式风格。

1469674474-9886-6-630x399

卡片式设计的优点

1.增强点击感

这是诺基亚手机的win phone系统(下图),系统桌面的所有内容都是一个个小方块展示,类似一个块状类的按钮,让人联想到是可以点击的操作入口,

1469674477-1706-7-630x438
而且每一块入口都是有区域大小(下图),从而避免造成误点击。

1469674478-7459-8-630x399

2.排版整齐

如下图,将信息、图像归类整合到一个方块里,清晰直观又避免页面因为信息多而散乱,卡片的排列方式是按列或者行的方式进行对齐展示,视线沿着横向或者纵向浏览能快速找到想要的信息,此外,这种固定大小的卡片方块也有利于栅格化排版。

1469674480-4700-07

比如下图,页面按5个单元进行栅格,利用卡片方块的展示,很轻松地计算并调整它的大小进行栅格布局

1469674483-2964-10-630x399

3.信息模块化

如下图,这是google now的一个界面,将信息、图像按维度分类整合到一个卡片里,能有效地避免信息散乱、同时避免信息分类不明确像这种模块化展示有效地减少用户思考的时间,能快速找到自己所需的信息。

1469674481-1458-11-630x495

4.响应式设计

卡片方块的高度和宽度的大小都是可以调整的,正是因为这种特性很适合用在响应式设计里,卡片在不同的平台展示,由于分辨率不同,卡片能自适应地展示,以上是卡片设计的优点。

1469674481-9634-12-1-630x280

项目实践

去年做了DNSPod的项目改版,尝试新的风格探索。如官网和控制台改版中,为了能让信息更好的整合、更好地发挥不同信息的作用、发挥不同信息的功能,这次DNSPod官网改版中,banner、快捷入口,业务信息以及售卖模块,也运用了卡片式设计的方法。

1469674482-4756-13-630x360

DNSPod管理控制台概览页

1469674484-4077-15-630x399

总结

在信息量大的页面中除了重视内容质量外,形式功能的组织与呈现也是同等重要,对提高用户获取有效信息的效率有着非常大的帮助,这时应用卡片式的设计方式是不错的选择。

作者:leey  原文地址:https://isux.tencent.com/card-design-thinking.html

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/16658/

(0)
TinadminTinadmin
上一篇 2016-07-27 12:35
下一篇 2016-07-29 14:24

相关推荐

  • 设计的物理定律的动力响应

    动效作为当今提升网页感官效果的利器,在各种类型的网页中已经全面开花,如何做到自然流畅让用户感觉舒适的动画效果呢?今天就来跟大家聊一聊动效设计的物理法则,以及它是如何应用的。

    2014-12-27
  • 像一个APP设计者一样去思考

    随着移动互联网发展,移动应用程序视觉设计流行风向推陈出新。 现阶段我需要深入了解新型智能硬件设备,它通常意味着改变我们的思维方式——即使这意味着远离我们之前的网页设计技巧。 我的职业生涯就像许多UI设计者一…

    2015-04-13
  • 如何使用Sketch3创建APP原型

    自从Fireworks逐渐衰落之后, 我一直在找其他好用的app和网站设计工具。后来我发现,只需用Sketch再加上其他一些简单的工具,就能构成一条非常不错的设计生产线。 在这篇文章中,我将谈谈我是如何利用Sketch搭配Flin…

    2015-06-29
  • 产品不能忽视

    在做交互稿或视觉稿的时候,为了让界面尽可能的真实,设计师们会虚拟一些内容放在页面上。但是当看到前端同学产出的demo时,设计师们又总是会觉得为啥和我当初做的页面那么不一样捏?设计师总喜欢把图做的很漂亮,在虚拟页面的内容时,使用漂亮的图片,把内容安排的恰到好处。但是当产出界面demo时,这个页面可能是个空内容的页面,也可能内容很多,导致布局错位。所以在设计界面时,一定不能忽视空状态、内容过多等极限状态。这些状态也许只会在初次使用时遇到,也许只会有很小一部分用户遇到,但是这些都影响着产品的细节品质。

    2014-12-28
  • 中国app产品UI在歪果仁眼里是怎么样子的?-Dan Grover

    小木导读:中美用户习惯的和文化的不同,造成了设计很多的不同。看惯了国内的设计,你了解外国人怎么看待我们的产品吗?接下来就可以带着疑问往下阅读。

    2014-12-30
  • Android电视应用:Amazon Fire TV版TVPlayer设计

    设计和研发、推广一道,是移动应用的成功要诀之一。定义用户操作应用的方式,与应用的功能和高效的盈利模式同等重要。而且,当涉及到为电视这样的新交互模式设计界面,许多在智能手机和平板上有效的模式,都需要重…

    2016-10-18
  • Coolors极简配色推荐

    设计人为本,颜色舒适人眼才不会造成视觉疲劳。 在设计网页的时候难免总会盲目的选择颜色然后加以尝试,难免会造成很多无用功。 对于新手设计师coolors帮了很大的忙。 这是一个超级简单的颜色搭配生成器。 进入的时…

    2015-01-02
  • Sketch从入门到精通-Sketch3 颜色填充

    颜色在做设计中是重要又必不缺少的组成部分,颜色有很多变化,丰富的颜色变化会给你的设计加分,Sketch里边,就对颜色有各种填充的效果,下面具体介绍一下,Sketch里边一共有六种填充效果,虽然你平常只用一两种,…

    2015-07-29
  • 下一个转场,动画见

    好的动画转场能够提升用户体验,今天翻译的文章将说明动画与用户体验的关系,以一些精彩的动画转场案例。以下是译文: 在设计数字产品时,为用户提供无缝体验是广受欢迎的目标。 现代设备和软件已经实现了在屏幕上…

    2015-07-06