老生常谈的卡片式设计
说明：喜欢翻译国外交互设计体验设计网站优秀文章案例，仅供互相学习探讨，翻译有版权，表述包含译者个人理解，如有错误，请多指正~
原文作者：Nick Babich
原文地址链接：Designing Card-Based User Interfaces
前言
PC网页和移动APP正在从页面过渡到完全的个性化的体验。这种新体验建立在许多独立内容的集合之上。而这些独立内容的展现方式就是卡片式设计。
在这篇文章里，作者会阐述卡片式设计对于UI设计师来说意味着什么，并且来审视一下三种流行的卡片式设计的项目案例。
本文分为四个部分：
•什么是卡片设计
•卡片式设计的优点
•好的卡片式设计案例
•三个需要注意的设计细节
一.什么是卡片设计
原文：“Cards are those little rectangles full of inclusive images and text that serve as
entry points to more detailed information. Before web and mobile apps, cards were
always all around us — business cards, baseball cards, and even sticky notes.Thus, it is more intuitive for us to know that these cards are representing piece of content just like in real life...”
这里废话不多说，简单理解就是包含图片以及文案并且有明显边界的信息区块，它可以是一个完整的信息区块，也可以作为更多具体内容的一个入口。
二.卡片式设计的优点
2-1.便于组织信息
2-2.易于阅读
2-3.视觉美观
2-4.适应不同尺寸的设备
2-5.适合手指操作
2-1.便于组织信息
卡片式设计将信息组织成区块增加可读性：它避免了阅读起来费劲费时的文字墙式的布局，并且让用户更快的找到他们感兴趣的内容并沉浸其中 — 有效组织信息成块，增加浏览识别度
卡片式设计将内容划分成有序的部分，就像段落将一篇文章中的句子划分成不同的组块一样，它可以将许多不同的信息有效的组合成一个连贯的整体 — 将不同内容划分成有序的部分
2-2.易于阅读
卡片是用来给用户传递故事内容的有效方式，把相关内容放进一张卡片上使用户很容易理解，并且用户能通过不同的卡片来快速找到他们感兴趣的内容 — 这里主要涉及到格式塔心理学的接近原则，即卡片具有明显的边界(现在一般用色块+阴影来做区隔)，相关联的信息都位于此边界之内
2-3.视觉美观
卡片式设计通常很依赖视觉元素，实际上很强的视觉元素恰恰是卡片式设计的一种优势。有研究确认图片能够提升网站和app的设计质量，因为图片可以快速有效的吸引用户的注意力。卡片式设计依赖图片的使用这一特性能更好的的吸引用户。
2-4.适应不同尺寸的设备
卡片式最重要的特性就是它几乎可以随意编辑。自从卡片式作为内容承载起可以随意放大或缩小它就是响应式设计中的常用设计方法。卡片式的这种特性使得我们可以只需要设计一种视觉样式就可以放在不同的设备上并且保持体验上的一致性 — 这里主要指由于卡片可以自由编辑(横排或竖排数量，单张卡片大小)因此非常适用于不同尺寸的屏幕
2-5.适合手指操作
卡片很适合手指操作，这样看起来卡片式设计确实是为了app而量身定做。虚拟世界里的卡片其实与实物卡片的操作原理是差不多的。用户喜欢卡片简单易用的特性并且很自然的就能理解把卡片反过来看更多信息和滑走来看下一张的信息 — 这里主要指卡片的操作方式(卡片反过来查看更多信息、滑走查看下一张卡片)便于用户的直观理解，符合用户的操作预期
三.好的卡片式设计案例
3-1.feed流(这里作者使用“stream”这个词，更倾向于表达为以时间为顺序的事件流)
3-2.发现
3-3.计划管理类应用
3-4.操作对话框(弹窗)
3-5.面版
3-6.微软的设计语言
3-1.feed流
卡片可以排成列来构成事件的时间线，例如 Facebook就在新鲜事中用成列卡片来展示让用户总览最近发生的一系列事件。Facebook的新鲜事是一个没有尽头的卡片序列并且每一张卡片(上的内容)都是独立的，这里卡片序列的关键就是非集合式，他们把无尽的信息从信息流中提炼出来然后打包，使得每一条独立的信息都有很强的可读性和分享性。这种行为同样也刺激用户在社交媒体去分享这些内容。
3-2.发现 — 同质信息的大批量展示
卡片可以使相关内容很自然的展示出来，让用户能深入他们所感兴趣的内容。比如
Behance，一个线上的创意社区，卡片式设计恰恰是用来展示这类内容最合适的方法
Tinder是一个利用操作卡片来探索下一个内容的很好的案例以至于这种交互方式让这个app变成最火的手机app之一。Tinder 有一个极其简单的卡片滑动界面 — 向左滑代表不喜欢，向右滑代表喜欢。这种卡片滑动机制具有神奇的魔力，因为每一次的滑动它都能收集到信息 — 卡片可能呈现的内容基于用户之前作出的选择。
— 这里的左右滑动逻辑是基于人类从左往右的一般阅读习惯，即往左滑是为了看到右边更多的美女，而为了看到更多美女的原因就是不喜欢当前的这位，因而往左滑是unlike，往右滑是like
3-3.计划管理类应用
卡片可以有效的组织成一系列的任务，Trello这款任务管理软件就是使用卡片式设计来建立单独的任务面板进行管理的非常好的案例 — 作者在这里并未做太多赘述，个人推断是想表达卡片式设计是一个个独立的信息区块，便于管理
3-4.操作对话框(弹窗)
因为卡片是内容承载器因此尤其适合展示操作行为。想想苹果产品在 airdrop上的服务，当你有一个文件传输的请求进来时，一张提示接受或者拒绝传输的卡片就出现了。如左图显示，苹果设备截图的重心在照片，但是开发者可以放各种东西到卡片上 — 优惠券，歌曲或者网站链接。
3-5.面版
卡片式设计在针对不同内容的布局时非常的精准，你可以通过使用卡片式设计来把一堆信息组织并整理成有逻辑结构的部分，并让所有信息看起来像一个有机的整体。一个从不同渠道筛选过后的信息内容可以很容易被收集并重新布局成互相关联的面板。
3-6.微软的设计语言
2010年，微软公布了其新的设计语言，它的一个核心设计原则就是最好关注app的内容本身 — 通过使用扁平化设计元素和卡片式设计以及排版本身来实现(其设计语义)。一个 Metro
design 卡片不仅仅是一个设计元素，它更是一种提供便捷交互方式的一个关键的功能部分。
四.三个需要注意的设计细节
4-1.信息要简单
4-2.符合响应式设计
4-3.注意排版
4-1.信息要简单
当你想到卡片式设计时，简单一定是其精髓。Carrie Cousins 就说过：“每张卡片只承载一个信息”— 你可以把卡片设计成囊括各种元素，但每张卡片只能包含一个信息或者内容，这可以让用户选择自己想要的内容去阅读或者分享 。
— 作者在这里应该是想表达卡片式设计要突出展示最关键的信息，并且不同质的信息不能放在同一张卡片里面
4-2.符合响应式设计
我们都知道app或者网站在各端保持一致是有多重要，所以当我们在不同尺寸的屏幕进行设计时，我们应该因地制宜地利用卡片的特性调整卡片的内容(尺寸、布局)来快速适应不同尺寸的屏幕。卡片对于响应式的结构有着出色的兼容性 — 卡片布局可以重塑并适应各种屏幕尺寸。
4-3.注意排版
卡片式设计应该简单易读便于理解，设计时应该注意将可读性最大化：
— 选择最简单的字体和容易识别的色彩方案(当文案被放置于纯色背景时应该保证其对比度以使得文案能被阅读)
— 尽量少用不同的字体，对于一个卡片式设计的应用来说一种字体就足够了
结语
相信大部分人都对为何卡片式设计如此流行有了更深的理解了。这种流行趋势在短时间内不会结束，并且卡片将继续成为app设计时必不可少的部分。
卡片式设计之所以这么流行是因为好的设计感和很强的易用性，卡片不仅仅只是好看，它是设计海量内容时最有效和灵活的布局形式。现如今，人们快速查找信息，卡片式设计能很好的满足人们这种需求。
