新人设计师来收！卡片式设计基础入门指南（附超多案例）

许多人对 APP 中的卡片规划习以为常，但关于卡片规划流行的原因、优点，以及怎么做好卡片规划却或许不甚了解。关于这些问题，彩云之前也写过一篇十分受欢迎的卡片规划经验原创文章《想做好卡片规划，原来要留意这么多细节》，文章中讲了十分多的卡片规划实用技巧。今日这篇国外大佬写的文章，算是从为什么这样做的视点来剖析卡片规划，一起来学习吧。

从 Instagram 和 Facebook 这样的社交媒体应用到亚马逊这样的电商渠道，卡片规划好像是无处不在的，这些大厂广泛应用使得卡片规划很快流行了起来。

作为一个信息容器，卡片能承载包括文本、富媒体、按钮等一切 UI 元素。依据这些内容，卡片规划能够依据不同的设备和屏幕调整其大小，平衡界面视觉和用户体验。

什么是卡片规划？

卡片是一个 UI 组件，包括了某一个内容的信息和操作。卡片能够包括各种元素，但它们都应该属于同一个主题。

卡片款式

这样做的意图是为了防止冗长的文字，并出现更多的内容。即便从规划的视点来看，用户或许不熟悉卡片的概念，但他们立刻就知道怎么运用它们，由于它们与实体卡片是相同的。（彩云注：这个就是用户心理学中隐喻的运用）

为什么它会如此流行？

卡片之所以流行，是由于它们能更好的把控内容。卡片是模块化的，所以不同的内容能够堆叠在一起，而不需求留意它们的差异。

卡片经过强制内容习惯卡片鸿沟和卡片布局上的约束来聚焦内容。规划师喜爱经过卡片混排大量内容，而无需忧虑规划会变得杂乱无章。

卡片能够将内容分解成易于了解的小块，以便用户与之互动。经过给内容一个容器，卡片向用户标明内容是实在和感性的。

卡片 UI 规划流行的原因还有许多：

• 直观：卡片在界面中看起来与实际国际中的卡片相同，它们对用户来说好像很常见。在卡片成为移动和网络应用中的流行元素之前，它们在实际生活中无处不在：手刺、棒球卡、便签。卡片代表了一种有利的视觉类比，它答应咱们的大脑直观地将卡片与其所代表的内容联络起来，就像在实际生活中相同。
• 易于阅览：卡片不占用太多空间，并敦促规划师优先考虑其内容。不同的是，每张卡片都变成了易于阅览的内容。卡片让用户更容易找到他们感兴趣的内容。
• 有招引力且对用户更友好：依据卡片的规划通常十分依赖视觉作用（特别是图片）；就信息架构而言，视觉层次会愈加清晰。运用图片有助于使依据卡片的规划比不在卡片中摆放的相同内容对用户更具招引力。
• 有利于响应式规划：卡片是矩形的，能够滑润地调整大小，以习惯不同屏幕的水平和垂直正面，这意味着用户能够在一切设备上取得统一的体验。
• 便于分享：卡片能够鼓励用户在社交媒体上分享内容，由于它答应用户只分享特定的内容，而不是整个页面。

什么时候应用卡片规划？

这通常是当你有:

• 依据查找的界面: 卡片能经过模块的内容快速显示合适的内容，这使得用户能够深化了解自己的兴趣。依据卡片的规划是一种十分合适出现这类内容的方法。
• 信息阅读：当用户阅读信息时，卡片的兼容性更好。
• 使命办理：当能够将流程中的单个使命作为卡片进行说明时， 能够轻松安排卡片以获取使命列表。使命办理应用在运用卡片式界面为用户创立仪表板方面做得很好，其间每张卡片代表一个单独的使命。
• 类似项目：卡片最合适于异构项意图调集（当并非一切内容都是相同的根本类型时）。
• 可视化剖析: 仪表板通常在同一页上同时显示各种内容样本。在这种情况下，卡片类比能够协助在不同物品之间发明出更明显的差异，其间每张卡片能够习惯不同的人物。

卡片解构

卡片的布局能够不同，以支撑它们包括的内容类别。下面的组件通常能够在多种卡片款式中找到。

1. 富媒体：卡片能够包括缩略图，以显示图片、插图、头像、Logo、图标或图形。
2. 标题：标题文本能够包括相册或文章的名称或标题。
3. 描绘：支撑文本，如文章摘要或简短的描绘。
4. 举动按钮: 卡片能够包括用于操作的按钮。
5. 副标题：副标题文本能够包括具体介绍，如文章的署名或符号的位置。
6. 图标：卡片能够包括操作图标。

规划技巧

有一些小的技巧能够快速进步卡片规划细节。

1. 运用相关主题的图片

图片是卡片规划的主角，你需求一个高级的图片来招引用户对每张卡片的留意。不仅是图像，卡片还能够包括插图、带有淡色背景框的图标或任何其他类型的富媒体，但需求与内容主题相关。

2. 增加视觉层次

卡片内的层次结构有助于引导用户对重要信息的阅览。将首要内容放在卡片的顶部，并运用排版来强化首要内容。运用空白和比照来分隔需求更多视觉分隔的内容区域。（彩云注：视觉层级关于信息表达至关重要！）

3. 约束内容长度

一张卡片应该只包括重要的信息，并提出一个相关的观念，以获取额外的细节，而不是完好的细节自身。当咱们试图在一张卡片中放入太多内容时，卡片或许会变得很冗长，并失掉与卡片类比的实际联络，由于它不再像一张卡片了。

4. 防止嵌入链接

不要包括内联链接，卡片应该自己链接。嵌入文字链接会让用户误操作。

5. 区别操作主次

包括不同操作的卡片应该在视觉上构成比照。在下面的例子中，我经过运用一种较轻的色调而不是首要的按钮风格来下降后续操作的视觉强度。

6. 去掉分割线

关于新手规划师来说，用分割线来区别内容是一种常见的方法，以此界说不同的组。这些边框会造成不必要的视觉搅扰，从而影响内容。

怎么做到视觉上更漂亮？

APP 中的卡片并不是朴实的拟物概念，但通常情况下，运用共同的类比和物理原理能协助用户了解界面并剖析内容中的视觉层次。在卡片的情况下，你能够做几件事:

1. 运用圆角

在形态上与实在国际的卡片进行视觉比照。

圆角更有用，由于它们让咱们的眼睛容易跟从视觉动线，“由于它更合适头部和眼睛的天然运动”。

2. 增加一个轻微的外边框或许投影

增加一条淡淡的描边框或许增加一个淡淡的投影都是很好的做法。阴影在界面中发明了一个层次，这有助于咱们区别 UI 元素。

然而，在规划中增加阴影并不像听起来那么简略。有时候规划师会过火强化投影作用，让本来看起来不错的规划看起来很廉价。防止运用纯黑色的阴影。

3. 留意字体和留白

重要的是要让每一张卡片都能被人看到、阅览和了解。在每个块周围增加大量的空白，让用户有时间处理并进行视觉重置，有精力看完一张卡再到下一张。

选择简略和根本的字体，由于根本的排版最大限度地进步了可读性，并有助于阅读。

一些优秀卡片规划的例子

让咱们看看一些实在项目中的卡片规划事例

1. 信息流中的卡片规划

保持信息流卡片简略是很重要的。它们应该有一个共同的、重复的结构，可是运用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素，以使读卡片的人更容易了解它们。

由 Diseno Constructivo 和 Webpixels 规划

他们杰出特征图片和标题作为最杰出的元素，这能协助用户决定文章或发布的内容是否合适他们。

2. 电商卡片规划

产品卡片是一个很重要的东西，它能够协助你将访问者转化为客户。一张优秀的产品卡片应该能够招引人们的留意，激发人们取得产品的欲望，激励人们购买，并在查找成果中得到高效推广。

由 Webpixels 规划

产品的名称应该放在最显眼的当地，这样参观者就会立刻理解他来对当地了。一个好的配图能告诉顾客胜过千言万语，所以你需求一个高质量的产品配图来规划完美的产品卡片。

假如产品有特价，不仅要在价格栏中注明促销价格，还要注明常规价格，以及客户能够节约多少钱。

3. 个人中心卡片规划

简介卡已经成为一个应用或网站中的功用模板。随着个人品牌变得比以往任何时候都重要，卡片规划在这里也能发挥重要作用。

由 Neelesh Chaudhary 规划

就像每一张卡片相同，配置文件卡片也是一个 UI 组件，它包括了对它所代表的内容至关重要的信息。为了到达你的方针，你要向其他人推销你自己。

保证只包括必要的信息(例如，相片，姓名，工作)，让你的“关于”页面有剩下的细节来完善你的个人资料。

4. 仪表盘卡片规划

仪表板的规划能够有很大的不同。可是一切的仪表盘都是用卡片做的。依据仪表板的类型，每张卡片或许包括概要信息、通知、快速链接或导航规划元素、要害数据、图表和数据表。保证你为每个元素运用了正确类型的卡片。

由 Simmmple 规划

仪表盘卡规划答应用户决定他们想要重视哪些数据。易于了解的 UI，答应用户精确地操控哪些数据需求在仪表板的前端做好。

只包括最相关的信息，为用户运用方便。当你的数据集在一起看更容易了解时，找到在一张卡片上显示它们的方法。可是要小心，不要让用户感到困惑。

5. 日常计划卡片规划

看板使命卡好像是一件十分简略的工作——拿一张便签，写下你需求做什么，然后把它贴在墙上。这些卡片必须包括需求举动的单位数量。它们还或许包括各式各样的其他信息，清楚地传达了必须做什么。

由 Neelesh Chaudhary 规划

卡片上包括的信息包括使命的名称和重要的细节，如使命的类型和谁具有它。看板卡放在状况类别下。最根本的状况类别是“计划要做”、“正在进行中”和“完结”，可是状况或许因项目而异。

卡片结构最适用于增加或删去使命这样的小改变，而不是像你改变总体方针这样的大想法。

总结

有几种方法能够使卡片规划愈加有用。经过开始界说和调查卡片，咱们能够更好地了解跨行业的这种规划形式。这也让咱们能够估测用户期望在这些卡片上采纳什么举动。卡片在提供许多不同品种内容摘要的环境中特别有用，而不是简略地作为内容列表的现代替代品。

欢迎重视作者的微信大众号：「彩云译规划」