形式与功能 – 卡片式设计思考 - 腾讯ISUX

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

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

卡片式设计的定义

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

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

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

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

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

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

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

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

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

卡片式设计的优点

1.增强点击感

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

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

2.排版整齐

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

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

3.信息模块化

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

4.响应式设计

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

项目实践

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

DNSPod管理控制台概览页

总结

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

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。 注明出处格式:腾讯ISUX (https://isux.tencent.com/card-design-thinking.html)

原文发布于微信公众号 - 腾讯ISUX(tencent_isux)

原文发表时间:2016-08-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

10个最佳的网站和App开发工具

这个世界充满了创新,开发的激情和决心是实现更高目标的关键因素。在网站开发中,毫无疑问,工具和可用的在线网页和app设计资源,发挥了重要的作用。

1321
来自专栏web前端教室

js、jq的基础看的差不多了,接下来我该干嘛?

(昨天喝多了,断更一天,各位抱歉哈) 这个问题,是我们共进会里一个成员提出的,大四,计算机专业,记得他有些JAVA经历,感觉算是半个后端转前端吧。他学习还是很努...

2436
来自专栏BestSDK

谷歌告诉你,什么样的手机广告最受欢迎

每次打开某些应用都是满屏的广告,会有点不爽?Google也这么觉得。最近,Google列出了一些它们认为会影响用户体验的Android手机广告形式: ·会挡住网...

24010
来自专栏逸鹏说道

从前端菜鸟到大神,看这一篇就够了

结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走...

3799
来自专栏Web 开发

我心中的页面重构

今天第一次堵门口,霸面了一把,不是什么光荣的事。面试临走的时候,面试官要我今晚把作品以及简历发给他看看,并强调只要重构相关的。

920
来自专栏效率达人

推荐6款好用却不为人知的效率软件!

如今科技越来越发达,越来越多的日常辅助软件工具被人们用于办公。软件工具只是为了表达我们诉求的一种方式,所以在不同的工作环境或个人习惯的情况下,每个人使用的方式也...

932
来自专栏Android 开发者

Flutter「发布预览版 2」让 iOS 应用至臻完美

Flutter 是 Google 面向移动端应用推出的一套跨平台开发工具,助力开发者在 iOS 和 Android 两个平台上开发高质量的原生应用界面。为期两日...

3026
来自专栏MixLab科技+设计实验室

技能之AR技术入门

AR真真假假,分不清~ 今天继续技能篇。往期技能文章有兴趣可以查阅: 5个用法,关于Gif。 技能之用iMovie制作预告片 AR跟VR都可以达到真假难辨的目...

32511
来自专栏大数据钻研

从前端菜鸟到大神,看这一篇就够了

结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走...

7175
来自专栏SDNLAB

网络切片在5G中的应用

5G和网络切片 当5G被广泛提及的时候,网络切片是其中讨论最多的技术。像KT、SK Telecom、China Mobile、DT、KDDI、NTT等网络运营商...

3575

扫码关注云+社区