卡片式设计二三事

我现在所使用的chrome浏览器就是google卡片式设计的典范，你现在所使用的浏览器上的选项卡就是最常见的google"Inside Out Design (由内而外式)"的设计思路。

 

在web端的使用（chrome网上商店）：

 

我们现在所使用的手机APP都大量使用卡片式设计：

                        

 

 卡片作为普遍使用的信息传达的承载样式，它具有以下这些特点：

 

1. 当内容都被规划为不同的卡片时, 传统的框架便会被打破, 空间利用的方式会得到极大的拓展. (比方说, 一个列表, 在传统的列表状态下基本上是钉死了只能纵向滚动, 但是如果将列表内容组织成卡片, 就可以很容易的实现横向卷动.)
2. 不同大小/内容的卡片能够被方便的放到一个"卡片组"中, 或者说, 同一种大小, 方向的卡片很自然的会被归结为同一种逻辑类型. (比方说, 对于一个需要分组的集合而言, 合理利用不同类型的卡片比起传统列表项 + 分割线 + 标题的视觉效率要高太多.) 
3. 在不同大小的画布 (屏幕) 上排布内容变得更简单了, 可以很方便的做到视觉风格的统一. (比方说, 在 4" 手机设备上可以横向显示三个小号卡片, 7" 横向平板设备可以横向显示六个, 10" 横向平板上显示八个. 传统的列表项很难做到这点的同时保持列表的规整.)
4. 卡片作为一种拟真元素, 可以被堆叠, 覆盖, 移动和划去. 这样就极大的拓展了一个内容块的视觉深度和可操作性.(比方说, 在 Google Now 里面, 多个城市的天气卡片会被堆叠为一个卡片组, 默认只显示出当前城市的卡片, 其他城市的卡片在其下方露出个城市名称, 每张卡片都可以被滑动消去.)
5. 承上, 卡片是立体的, 有深度, 可以被翻转, 扩展性很强. 翻转之后的卡片可以显示针对卡片的操作或者更多信息, 等等, 而这是和当前卡片紧密相关的操作/信息, 是非常自然而方便的. (虽然说我第一想到的例子是微软的 Live Tiles... 在 Android 上找例子最现成的还是 Google Now 和 Google+, Now Cards 反过来之后是和这张卡片相关的操作, 比如是否需要显示这个信息, Plus Cards 反过来之后是现实这张卡片相关的信息)
6. 依然承上, 卡片是立体的, 所以自带边缘, 可以很容易的制造出"不可视边界"和暗示触摸区域的大小, 比起传统的分割线要灵活很多. (通常情况下, 卡片这一个视觉元素就等于一个触摸区域, 而用户的触摸范围会被引导到这个卡片的视觉边界内)

更多关于卡片式设计：

卡片式设计——移动设计的未来

卡片式设计探讨