（翻译）卡片模式（Cards）

问题概述

用户要浏览不同类型和尺寸的内容。

示例

用途

用于显示包含不同类型元素的内容；
用于显示尺寸不同或者支持操作不同的元素，例如带有长度不一标题的照片[1]；
用于显示以下内容：
– 集合，其中包含多种类型的数据，如图像、电影、文本等；
– 不需要直接比较的内容；
– 长度可变的内容，如标题、评论等；
– 互动内容；
用于将需要交互的信息分为多个可视化内容分组，例如接收请求、查看更多内容等[2]；
用于将关于某个主题的散碎信息整合为条理清晰的内容[3]；
本模式更适用于用户浏览信息的场景，而不是检索信息的场景；
本模式最适合展示异构项目内容集合，异构项目指集合中包含不同类型的内容[4]。

解决方案

使用相似形状作为详细信息的入口。卡片中应包含关于主题的一张照片、一段文本以及内容链接。
考虑仅支持在单一方向上滚动卡片集合：横向或纵向。超过最大高度(垂直滚动时)或宽度(水平滚动时)的卡片内容将被截断，卡片内容不支持滚动，但可以展开。一旦展开，卡片尺寸可能会超出视图的最大高度/宽度。
卡片通常包括几种不同类型的数据，如图像、标题、摘要和行为召唤按钮。

操作卡片

卡片的重要事项之一，是能够以几乎无限种方式操作卡片。可以反转卡片显示更多内容，也可以堆叠卡牌以节省空间，还可以折叠卡片以显示摘要（展开卡片以查看详细内容），更可以对卡片进行排序、分组等操作。[5]
可以暗示卡片的背面内容或卡片可以折叠。卡片与物理世界中的卡片的相似性给了用户概念隐喻，让用户轻而易举地将卡片与各种操作联系起来[6]。

说明

浏览功能是用户交互的一大组成部分。用户想要快速浏览大段内容并深入查看他们感兴趣的内容。用户浏览包含大量文本的网站时可能会遇到困难，因为每项内容都显示多余的细节会造成屏幕杂乱无章，并阻碍用户的有效浏览。
本模式适合显示尺寸不同或者支持操作不同的元素。每张卡片都可以视为获取详细信息的入口，因此卡片上不应承载无关信息或操作。卡片集合可删除，可滑动，可排序，可过滤[7]。
本模式能以一种小巧且简单易懂的方式展现大量内容：卡片集合将所有内容分成有意义的部分，每张卡片显示一个摘要并链接到细节内容。单张卡片可以视为一个容器，它显示相关信息的各个部分，用户可以从卡片中获得更多的信息。[8]

为什么使用本模式？

本模式有助于将大段数据划分为更易于浏览的内容[9]。此外，本模式还具有以下优点：

直观。出现在用户界面中的卡片与真实世界中的卡片类似，用户看着比较熟悉。在成为移动App和网页程序的流行元素前，卡片在现实生活中随处可见：名片、棒球卡、便签。本模式提供了视觉隐喻，让用户大脑直观地将卡片与它表达的内容联系起来——就像现实生活中一样；
易于理解。本模式占用空间少，因此促使设计人员侧重卡片的内容和形式。反过来说，每张卡片都是易于理解的内容片段，便于访问和浏览。本模式更利于用户找到他们感兴趣的内容，这又使他们能够以任意想要的方式参与进来；
吸引力强。基于卡片的设计通常严重依赖于视觉材料(尤其是图像)。从信息架构的角度来看，任何素材通常都是次于视觉材料。卡片中使用图像比使用其它素材更吸引用户[10]；
有利于响应式设计。卡片具有几乎无限的可操作性：平滑地调整卡片尺寸，以便匹配不同屏幕的大小(易于缩放)，这意味着用户可以在所有设备上获得一致性体验；
可共享。本模式鼓励用户在社交媒体上共享内容，用户可以轻松地共享特定的卡片内容，不用共享整个页面。

讨论

与别的设计技巧类似，本模式不具有完美可用性，也不是什么灵丹妙药（PS：银弹）[11]。

使用本模式的时机

以下场合特别适合使用本模式：

浏览信息。适合在用户浏览信息时使用本模式，而不是搜索信息时；
相似项目。特别适合异构项集合（集合包含多种基本类型内容）使用。

以下场合可以使用本模式：

一连串事件。Facebook在新闻递送中使用本模式快速概览近期事件。Facebook的新闻递送源源不断，但每张卡片都是独立的事件[12]。此时本模式的重点是解耦：用户可以从事件流中获取单个事件并共享它。；
探索式界面。本模式能自然而然的显示相关信息，让用户可以深入探索感兴趣的内容。看看dribbble网站，这是个展示创意作品的在线创意网站，基于卡片的设计非常适合展现这类内容；
工作流工具。将流程中的单个任务展示为一张卡片。卡片集合可视为一系列任务集合，Trello任务管理程序在这方面做得很不错，它用卡片样式的界面为用户创建控制面板，每张卡片代表一个独立的任务；
仪表板应用程序。通常仪表板会在同一页面同时显示多种类型的内容。此时，卡片隐喻让不同项目间的差别更加明显，每张卡片承载不同的内容。

不应使用本模式的时机

以下场合最好使用其它方案代替本模式：

要展示的内容已经分组为同类项目集合，例如；
– 相似产品列表。卡片会干扰查找特定项目或比较不同的项目[13]。标准列表更适合这种情况，它易浏览，且占用空间少；
– 图片集。卡片会分散用户注意力，不利于内容浏览。标准网格更适合这种情况，它便于用户浏览网格及项目内容。
秩序严格。想让用户严格按顺序浏览内容。本模式通常不强调内容的先后顺序，因为卡片内容中没有明显的信息提示整个页面上的内容应该如何查看。因此，本模式展示的视觉信息很少有层次结构，所有的卡片内容看起来都差不多，这样用户很难（甚至不可能）看出内容的重要程度。

视觉过载问题

基于卡片的设计最常见的缺陷是视觉过载。本模式常用于含有大量信息的网站，这会让用户感觉零乱(特别是在大型视图上)，从而更难看出页面布局[14]。

如何改进卡片的设计和交互

以下建议可以改进卡片设计：

遵循“一张卡片，一个主题”的原则。一张卡片可以包含几种不同的元素，但它们都应属于同一个主题。这让用户能够选择他们想要浏览、共享或交互的内容：
大量使用空白。本模式通常呈现为高度连贯的独立内容，这些内容都属于“迷你设计”的小块，这就是给每张卡片留出空间以便能它们被看到、阅读和了解的必要原因。在每个卡片周围添加大量的空白，当用户在卡片间切换时，为用户留出时间，让他们平静，以便进行视觉复位：[15]
限制内容长度。卡片应当仅显示重要信息，并且提供指向详细内容的入口点，不用在卡片上显示全部信息。设计者试图在卡片中放置太多内容，最终让卡片变得太宽或太长，无法再将它与卡片隐喻联系起来，因为它看起来不再像真实世界中的卡片了：
让卡片赏心悦目且简洁。图像是卡片设计的重中之重：每张卡片都要有张优秀的图片以吸引用户。选用简单基本的字体（如卡片正文选用正常尺寸的sans-serif字体），因为基本排版能够最大限度地提高了可读性，利于浏览：
创建内容层次结构。带层次结构的卡片可以将用户导向最重要的信息。将主要内容放在卡片顶部，并采用排版加以强调。使用分隔符来分隔内容区域，以便获取更清晰的视觉分隔：
让整个卡片都能够点击，而不仅是卡片的特定区域支持点击。更大的点击区域极大地提高了程序在触摸屏设备和基于鼠标地设备上地可用性（费茨法则指出增加点击区域会让用户交互的可能性变得更大）：
使用动画和动作。用视觉反馈和提示帮助用户更好地了解如何与用户界面交互。例如，鼠标悬停在卡片上时可以应用动画效果，提示用户可以点击卡片。

卡片设计及视觉符号

现代数字卡片不是纯粹地仿实概念，而是经常性地从物理世界中借鉴一致性地隐喻和原则，让用户了解用户界面，明白卡片内容中的视觉层次结构[16]。本模式还有两件事可做：

使用圆角让卡片与真实世界中的卡片可起来形状相似：
给卡片添加少许阴影，显示深度，指出整个卡片都可以点击[17]。

原文地址：http://ui-patterns.com/patterns/cards

[1]原文：Use to showcase elements whose size or supported actions vary – like photos with captions of variable length.
[2]原文：Use to visually group digestible portions of information that call for an action; like accepting a request, or accessing more details.这句不知道该怎么翻译合适
[3]原文:Use to gather various pieces of information about a single subject to form one coherent piece of content.
[4]原文：Cards work best for collections of heterogeneous items (when not all the content is of the same basic type)
[5]原文：One of the most important things about cards, is their ability to be manipulated almost infinitely. They can be turned over to reveal more, stacked to save space, folded for a summary – and expanded for more details, sorted, and grouped.
[6]原文：The resemblance of Cards to the physical world makes them a great conceptual metaphor for which we can easily relate all sorts of manipulations.
[7]原文：They are dismissible, swipeable, sortable, and filterable.
[8]原文：Cards allow you to present a heavy dose of content in a small and digestible manner: they divide all available content into meaningful sections, present a summary and link to additional details. A single card is a container that displays various parts of related information, from which users can get even more information.
[9]原文：Cards help chunk data into content that is more easily aids scanned.
[10]原文：The emphasis on using images can help make card-based design more attractive to users than the same content not arranged in cards.
[11]原文：As with any design technique, a card-style interface is not a silver bullet for perfect usability.
[12]原文：Facebook’s news feed is an endless stream, whereas cards are individual.
[13]原文：The use of cards will be interfer with searching for specific items or compare different items.
[14]原文：As cards are often used for sites which contain loads of information, they can end up producing a cluttered feel (especially on a large viewports), making it harder to parse the layout visually.
[15]原文：Cards are often represented by highly coherent individual content that are small blocks of “mini design” of their own. This is why it is essential to give each individual card room to be seen, read and understood. Add plenty of whitespace around each block to provide users time and peace to visually reset as they look from one card to the next.
[16]原文：Modern digital cards aren’t pure skeuomorphic concept, but quite often, using consistent metaphors and principles borrowed from physics help users make sense of interfaces and interpret visual hierarchies in content.
[17]原文：Add a slight drop shadow to show depth and indicate that the entire card is clickable.