<Translation >卡片:UI组件定义

猪小花1号2018-08-30 15:33

作者:李田莉

摘要:卡片是一种UI设计模式,设计师可以在一个类似游戏卡一样的有灵活尺寸的卡片上把相关信息内容进行组合。

近几年,我们看到很多有趣的模块化UI设计模式,它们可以很好的适配多种屏幕和矿口大小。其中一个新的UI组件便是卡片--一个快照一样的展示形式,鼓励用户单击或点击以便产看更多的详情。


定义:一个卡片是一些简短且有关联性信息碎片的容器。在尺寸和形状上类似于一个游戏卡片,而且通常比较像某个概念信息单元的简单展示和入口。

这个有卡片特征的线框实例包含了几种不同类型的信息:图片、标题、简短的总结、时间标记、标签以及为分享操作而设计的次级号召按钮。这个设计方案(带有可选圆角)在视觉上很像游戏卡片;这个卡片有显著的描边,背景与卡片有明显对比,并且用了轻微的投影表达整个卡片是可点击的。这个卡片还包含了两个次级可点击元素(标签 #dayhiks 和 分享按钮),用水平线与其他的内容区区域隔离开(请注意,这条线并不会影响整个卡片的视觉分组)。

卡片通常与扁平化设计2.0关联:它保留了扁平化设计审美的某些方面,但是引入了视觉深入去表达可点击的特性。虽然基本概念是比较老旧的,但是最近几年里,卡片式设计已经得到了软件设计方面界的很多关注,并且很多具有很高知名度的公网站和公司(比如 Google 的Material Design,Twitter 的卡片组件)开始只用这种设计。


卡片有四个关键特性

  1. 卡片用户组合信息

          一个卡片可以将几种不同信息内容分成用户可消化的信息单元--它可以是一篇新闻网站上的文章,一个电商网上的商品,一篇社交应用上的帖子。一个独立的卡片通常会包含一些不同类型的信息媒介,比如图片、标题、摘要、分享图标、或者行为号召按钮,但所有的信息都关联到相同的概念。

  1. 卡片表达总结性信息和更多详情的可链接性

          一个卡片通常比较简短,并且提供了一个链接的入口点以便进一步查看详情,而不是把所有的详细内容都呈现出来。它就像是一个高聚合信息框架,用以吸引用户去点击,从而到达一个承载详细信息的独立页面。

  1. 卡片像物理上的卡片

         卡片在分组内容的周围使用描边,并且卡片内的背景色不同于底层的背景色。这些视觉元素创造了一种很强烈的视觉感,即在描边内部的不同的信息碎片被组合在了一起。

          通常情况下卡片通过轻微的投影表现页面深度,这同时也能表现其可点击的特性。对于大多数的实现方式,单击或者点击卡片的任何一个地方都会链接到一个详情页面(虽然有一些卡片,比如前面提到的那个卡片,也会格外为可用的主要连接添加次级行为号召按钮或者链接入口)。这中较大区域的点击大大提高了触屏设备和基于鼠标设计的设备上的可用性(基于Fitts 定律)。

  1. 卡片兼容灵活的布局

          当布局中使用了多个卡片的时候,他们往往包含不同类型的信息--有些卡片肯呢个包含一些文字总结、标签或者图片,而同页面的其他的卡片可能是完全不同的信息。卡片通过改变高度以适应不同数量和类型的内容,但是多个卡片通常会保持相同的宽度。

Pinterest 的卡片式设计展示了卡片是多么适用于将不同的内容进行分组,每一个卡片都展示了不同类型和数量的信息,因此也占据了不同的垂直空间。卡片包含了富媒体(缩略图)、标题、次级行为号召(赞和分享按钮),并且通过投影表现自身与背景的区别,清晰地组合卡片内元素的同时又能表现其可点击性。如果没有这种视觉风格的卡片,想要将页面内每一类元素清晰地组合在一起,将需要更多元素间的空间,浪费手机屏幕和平板电脑上宝贵且有限的屏幕空间

UI 卡片 vs. 富文本卡片模型

经验丰富的用户体验设计专家可能会意识到卡片的概念(在名称上和概念上)是与20世纪90年代的富文本刚兴起时的呈现相关信息的卡片(扑克牌)模型很像。这个模型旨在将内容分割成固定大小的独立页面,也是垂直滚动的另一种选择:卡片化内容形成的导航就像为了展开漫漫长卷而翻开书页。当 iPad 第一次出现时,各类应用试图控制他们呈现给用户的每一个页面样式,卡片模型再次兴起。你可能很熟悉移动天气应用中的卡片--大多数都会使用卡片去呈现不同城市的天气。

iOS 的天气应用通过富文本扑克卡片的风格来呈现每一个城市的天气预报(而非本文主要内容中 UI 卡片组件)。每一个城市是一个全屏的节点,并且通过向左或者向右滑动查看另一个全屏节点来完成其他城市天气的查看,与看书时翻转书页的体验过程相似。

共同区域原则创造视觉分组

卡片模型充分利用了共同区域原则在认知心理学的一个优势:在一个边界内中的多个内容项更可能被视为是被分在同一个组的。这个原则可以取代强大的亲密性原则(相近的内容项被视为分在同一组),允许相隔甚远的内容项也有明确的视觉分组。共同区域原则让设计师能够自由的使用负空间去创造多个内容项间的显式联系。


上面:亲密性原则使得三角形2和3、4和5有非常强的在视觉成组感,因为他们离彼此非常近,但是与相邻的1和6距离却非常远。设计师必须使用负空间(如不相关元素之间的空白区域)去表达分组。

下面:共同区域原则比胜过就近原则:通过使用描边和背景色的方法(很像卡片组件的使用方式),同样布局的三角形却形成了不一样的分组;非常强的视觉信号表现出1和2、3和4、5和6是分组在一起的,即使有着和上面图片中同样的布局。难以置信,可用性测试展示了对于强分组的需求,每一个卡片都可以有不同的背景色。

什么时候卡片是有用的

  • 相比于搜索的场景,卡片式设计更适用于当域用户浏览信息的时候。

           多卡片布局通常用于替代内容的列表视图。然而,卡片在用户想要搜索信息的时候并没有列表适用,主要原因有如下三个,均涉及到可变尺寸大小:

  1. 卡片布局比较典型的忽略内容排序。(然而,即使这样他们相较于列表还是缺乏强烈的层次表现,多卡片布局依然遵循的是典型的内容层次法则:在上面和左边的内容更易发现且被认为更重要)。

  2. 卡片布局没有列表布局更易于浏览

网易云大礼包:https://www.163yun.com/gift

本文来自网易实践者社区,经作者李田莉授权发布。