卡片式设计是近几年最常用的页面设计风格,它自带的分割属性让页面布局更加清爽,有层次感,分区内容也更加聚合。但是,分割区也容易造成造成横向/纵向空间浪费,有时也会影响用户沉浸式的浏览体验。
那么,如何用好卡片式设计呢?要根据实际场景和内容形式,不要走入卡片化误区,专门为“卡片式”而“卡片式”。
很多设计师对卡片设计习以为常,却对使用卡片的原因、表现方式少了考量。思考题:列表记录页面卡片化的意义在哪里?
什么是卡片?生活中我们往往代指含有图片和文本信息的平面容器。卡片可以将某些信息归纳在一起、并形成独立的区域,以完整体的形式展示给用户,让归纳组合后的信息能快速突出重点。
很多移动应用的首页的功能,图文信息基本都是卡片式,既做到了视觉上的美观,也达到了平衡文字及图片强弱的效果。抛开卡片,首页应该展示更多的功能,不应该加入过多的二次操作(滑动、点选),需要给用户一览无余的视觉体验。
卡片式还意味着更大的交互热区,无需精准点击,操作上让人感觉更加易用。卡片很容易添加各种交互手势,可以为用户提供更多有趣、便捷的操作和动画效果。
卡片式设计本身就体现了容器与背景的层级,如果在卡片中嵌套多层卡片,容易造成层级杂/乱而增加用户的视觉负担。其实,在卡片中区分多个信息组,利用留白、分割线或撞色背景等元素进行拟物化设计也是很好的。
如下图左,新闻部分已经包裹在屏幕形成的卡片里,而新闻部分与屏幕之间又留出间距,为了视觉效果,浪费了空间。另外,重复的内容让人疲劳,如果页面中反复出现同样的文字、图标等设计元素往往让人麻木。从用户认知角度说,当前智能手机全世界普及率超过70%,基本的设计元素是不需要引导、解释,用户就会理解的。
总的来说,任何表现形式都应该是为了更好的呈现功能及内容,而不是一味地卡片式。