在我想用卡片的时候,我找不到理由去说服,为什么要采用卡片的设计。
不想陷于被动,到底用卡片还是通栏列表?
卡片和通栏的主要区别是模块(指整个块,不是指字/图片)的宽度距离屏幕是否有边距,还有阴影/空间等其他不同,我主要讨论什么样的需求更应当采用卡片式设计。
本文里,我会用推荐,不推荐的词语来表示在特定需求下,哪种方式会更加适合。
卡片的劣势,展示同样信息密度的情况下,卡片需要用户更多的滑动操作。
卡片的优势,兼容不同尺寸,丰富的视觉效果,清晰的内容关系
信息摘要,推荐用卡片
Google Material Design 这样定义卡片,“A card is a sheet of material that serves as en entry point to more detailed information.”我们这样去理解微信支付宝smartisan的列表,这些卡片是一个缩略,可以通过卡片查看详情。
不同类型的模块需要明显区分,推荐用卡片
相比于列表用线和大间距来区隔信息,卡片会带来明显的隔离,我认为聊天中的气泡也是卡片的一种形式,都是用一个块把内容框住,多个块在屏幕中组合。
内容单调需要美化,推荐用卡片
卡片带来具有远景的视觉关系,占据更大的空间,可以优化单调页面的视觉效果,如果有视觉上的需求,在满足功能前提下可以使用卡片来优化视觉体验。
用法:用网格来做规整的卡片,和具有变化的卡片。
快速扫视类(如新闻),不推荐使用卡片
在《When Card UI Design Doesn’t Work》文中详细通过用研的方法阐述了网页和移动端设计中采用卡片展示新闻信息的劣势。
在移动屏幕中,显示同样一个屏幕高度的内容,采用卡片式设计所需的高度是列表式设计高度的115%,用户滚动的更多,但是他们看到的内容却变少了。
所以我们可以反推出第一条,就是卡片适用于查看概括的信息,而不是快速浏览大量信息。
具体做卡片的技术规范参照material-cards
Reference
《When Card UI Design Doesn’t Work》,Rob Gill