干货！uxplanet主编分享卡片设计技巧，适配多尺寸设备
大家好啊，许久未聚，今天向各位介绍一篇探讨卡片设计的专业文章，执笔人是uxplanet的总编Nick Babich，他具备深厚的行业背景和丰富的实践经验，能够分享许多切实可行且容易被忽视的设计要点，相信对大家会有不小的启发呢~
原文内容
卡片用于承载内容。如今，这种基础的用户界面元素已构成网络和移动界面设计的核心部分，众多应用程序和网页都在应用卡片式布局。这种布局不仅有助于实现内容与功能的层级划分，还能确保在各种尺寸的设备（包括电视及手机等）上均能实现良好的展示效果。
这篇文章旨在阐述卡片设计的本质，同时为设计师们提供若干切实可行的方法。
1.卡片设计到底是什么?
卡片属于界面元素，用以呈现特定主题的信息及功能。单个卡片可容纳多种构成部分，但这些部分需围绕同一核心展开。同时，卡片常作为总览或引导，向使用者揭示更详尽的内容。
谈到视觉呈现，卡片能够实现多种多样的排布方式，虽然不存在绝对的准则或限制，不过一个常规的卡片样式应当具备以下特点：
图像 缩放到适合容器顶部区域的图像或视频。
标题
简短的摘要
操作(可选) 与卡片相关联的操作。
卡布局示例
2.UI卡片设计原理
一个优秀的卡片设计应该能让用户更容易浏览信息。它是:
简洁明了，不要在牌子上堆砌过多无用内容或步骤，每张牌子仅需具备核心要素和指令。
2.有意义。每张卡片都应该包含帮助用户做出决定的信息。
卡片呈现的明晰程度与其布局方式密切相关，这种布局决定了人们如何感知它。每一张卡片都包含若干内容单元，例如文字和图片等构成要素。这些内容单元需要在卡片上按照明确的层级关系进行排列。
一张卡片应当自成一体，无需借助其他卡片，同时一张卡片不可分割成若干片。
5.变化。卡片可以转换以显示额外的内容。
6.响应。卡片可以调整大小以适应可用的空间。
3.何时使用卡片设计？
卡片形式更利于查看资料，不利于查找信息。因此，在用卡片安排界面时，重点在于使用户迅速理解主要信息，并且对内容产生兴趣。
Pinterest的界面布局使用户能够更便捷地发现信息，进而拓展个人关注点。
比较多个项目时（比如电商页面的商品），卡片式布局就不太合适了。由于卡片展示信息有限，反而增加对比难度，所以面对多个选项，推荐采用列表或网格形式呈现。
4.卡片设计技巧
使用与主题相关的图像
通常情况下，卡片的制作非常看重视觉呈现，无论是图像还是视频，因为视觉成分是使用者接触卡片时最先捕捉到的信息。所以，挑选一张契合主题的图片十分关键，它能够帮助用户迅速理解卡片的用途。不过必须留意的是，图片在不同平台上的尺寸可能会有所调整，因此务必在发布前仔细查看效果。
优先考虑文本信息
卡片是某个特定项目内容的概括，因此不适合用来展示大量文字，而应该给出一个简明的介绍，同时要保证它们能够引导人们去进行更深入的发现。
小技巧：依照《排版学》E. Ruder的指导，文本长度最好处在50到60个字符之间。
简单的排版
通常情况下，卡片里的文字宜选用无衬线字体，这类字体在大型显示设备与小型显示设备上均表现出色，阅读体验较为理想。
Google的Roboto字体
使用阴影来指示卡片容器
界面组件必须明确表达其功能。使用者通常只需瞥一眼就能明白怎样操作某个特定的界面组件。对于卡片式布局，施加微妙的阴影能够辅助使用者判断该卡片是可以点击的。
设计小建议，若要增添一张卡片，务必保证全部卡片共享一致的视觉特征。
清楚地指出交互元素
若界面卡片设有可操作部件，须明确告知用户这些部件。材质设计提倡借助视觉界限划分卡片上的不同部分。例如图中展示的那条一像素宽的分隔线。
或者也可以借助空白区域将它们分开，这符合格式塔接近原则。在每一段落旁边放置空白，能帮助用户更清晰地分辨各个部分。
留白让“接受”和“拒绝”的操作部分与静态内容分开。
Alex Arutuynov的医生预约App
避免在移动设备上使用卡内滚动
卡内信息或许会超出最大显示区域范围，因此遇到这种情况，卡片信息不宜再采用滚动方式浏览，否则界面操作效果容易显得杂乱无章。
使用父子过渡来显示更多信息
前面讲过，卡片属于一种能够切换形态的界面元素，借助翻页之类的动态变化可以呈现更多细节，不过处理动画转换环节时，必须警惕那些过于华丽的过渡方式，诸如连续翻转之类的操作，这类设计会分散用户注意力，很容易导致操作者产生烦躁情绪。
尽量避免使用翻页卡效果，尤其是对于大型卡片设计。
最好依靠一些微妙的效果，比如放大。
Ehsan Rahimi的音乐播放列表应用互动
支持熟悉的手势
在移动界面中运用卡片元素时，应确保其具备可点击和滑动交互功能，同时轻点操作能够切换卡片的当前形态，比如将卡片的浏览模式转为深入查看模式。
Cuberto的 3D汽车演示
滑动可用于在多个卡片中进行导航。
by Saptarshi Prakash
Minh Pham的卡片滑动交互
滑动也可用于删除卡片
Vishnu Prasad的滑动卡片操作
请小编喝杯咖啡吧！