卡片设计
卡片式设计有什么好处?
显示器、手机、名片,一封信、等等,都是独立承载信息的一个个卡片。人们不用把电影院搬走就可以通过电视观看到不同的内容载体,这时候电视充当的是内容载体的入口。而名片盒书信这种卡片感就更强了,你可以把一封信折叠起来,方便携带,等到需要的时候再伸展开来,进行详细阅读。正是人类生活早已充斥着“卡片设计”,所以当我们手中的设备界面有了“卡片式设计”的时候,人们反而觉得使用起来很方便和有熟悉感。
最早应用卡片式设计并不是google的materialdesign也不是苹果的IOSdesign,而是palmwebOS。webOS中,传统意义上的程序概念被弱化,取而代之的是卡片系统。所有的任务均以卡片的形式出现。任何时候点击手势区,都会进入卡片视图。卡片视图中展现出正在运行的任务,这些任务以多窗口的形式呈现。你可以看到正在运行的全部任务,可以通过滑动进行切换,点击后进入任务,这样一种操作方式,是***美妙的。更为重要的是webOS中的多任务的流畅度可以得到很好的***,可以说webOS的多任务是世界上的移动系统多任务平台。
某种程度上来说,卡片式设计是在栅格的基础上更进一步,将整个页面的内容切割为N多个区域,不仅能给人很好的视觉一致性,而且更易于设计上的迭代。这样的设计在处理PC和Mobile多平台页面一致性时有很好的效果,正面的典型例子就是Google+了。但如果你的网站和手机App在整体结构、交互方式上本来差别就非常大的话,使用卡片式设计就无法充分发挥其优势。2、卡片式设计的另一个典型好处是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。最常见的就是图文混排,既要做到视觉上尽量一致,又要平衡文字和图片的强弱,这时卡片设计经常有***。年的豆瓣首页为了平衡日记、相册、图书、电影、活动等不同内容元的混合呈现所使用的设计,本质上也是一种卡片。
卡片式设计的另一个典型好处是可以将不同大小、不同媒介形式的内容单元以统一的方式进行混合呈现。最常见的就是图文混排,既要做到视觉上尽量一致,又要平衡文字和图片的强弱,这时卡片设计经常有***。年的豆瓣首页为了平衡日记、相册、图书、电影、活动等不同内容元的混合呈现所使用的设计,本质上也是一种卡片。
还有一个容易忽视的坑是,卡片式设计对页面空间的消耗非常大,并且将内容元和内容元之间强行割裂,导致一屏呈现的信息量很小。所以当用户的浏览是需要大范围扫视、接收大量相关性的信息然后再过滤筛选时,强行使用卡片式设计会让用户的使用效率降低,带来不必要的麻烦。一个常见的例子是,最推崇卡片式设计的Google,在搜索结果页里也依然没有采用卡片式设计。
广告牌、指示牌等,他们之间有几个共同点:清晰直观、简单易懂、信息模块化。他们虽然只有一个图案、一组文字、但却能够很清晰地体现它所要表达的意思。这种由文字或图案组成的方块样式就是“卡片式设计”。
虽然说卡片式设计已经不是很新型的设计方式,但是这并不影响设计师的使用,而且越来越多的UI设计师把卡片式设计运用到了自己的作品中。说到卡片式设计,也许很多人都不太清楚它的优点有哪些,今天,广州UI设计别样小编主要针对卡片式设计的优点进行深入探讨,希望大家能有所启发。
在呈现上,卡片式设计有以下优点:
增强点击感:比如一款手机系统界面是以一个个小方块来显示的,类似方块型的按钮设计,让人感觉到这是可以点击的,而且方块形状有大有小,不会造成视觉混乱而发生错误点击的情况。
整齐的排版:就是将信息和图像放到了一个板块里,避免了因为信息多而造成视觉混乱的情况,卡片的排列方式,让用户能够在当前界面快速找到自己想要的信息。此外,这种形式也有利于栅格化排版,如下图,页面按5个单元进行栅格化排版,利用方块卡片的展示,很轻松地计算并调整它的大小进行栅格布局。