卡片通常不大，其作为用户了解更多细节信息的「入口」，所以它本身不需要承载过多细节内容。当你试图在卡片里添加大量内容，导致卡片变得过宽或过长，那它就会失去其原有的「拟物」效果。

　　下图是一个采用基于卡片设计的用户界面示例。注意中间的卡片，它的问题主要是因为大量内容过多，以至于难以阅读。

　　图片来源：Piotr Adam Kwiatkowski

　　5. 加入动画和动效

　　动画如果运用得好，可以大大提升用户体验。其可以帮助用户在基于卡片的界面中更好地定位，并建立不同卡片状态之间的视觉关联。

　　视觉提示

　　视觉提示帮助用户更好地了解如何与界面进行交互。当需要向用户展示某些具体功能如何操作时，它就显得颇为有用了。

　　展示导航功能的提示。图片来源：Barthelemy Chalvet

　　视觉反馈

　　视觉反馈在界面设计中相当重要，因为它能直接和用户的自然期望 相关联。

　　在现实生活中，各种物品通常都会对我们的行为作出反应，这也是大众习以为常的反馈。比如电脑的开关按钮，当你按下开关键时，你可以感受到按钮被按下的力量反馈，同时还有声音反馈。

　　在电脑端，你可以通过「悬停效果」来显示相关元素的交互行为。 悬停动画可以增加功能的可发现性，同时，也使用户体验更加有趣。

　　在卡片中加入悬停动画。图片来源：uxpin

　　使用悬停效果还可以激活更多选项。下图中，光标悬停后，用户可以进行颜色标记、回复、转发或删除当前信息。

　　图片来源：Roman Shkolny

　　放大

　　放大可以呈现从原图到细节视图的过渡：用户选中卡片就可以直接看到相关详细信息。不过要注意，要确认让用户感觉他们仍在相同背景框架下进行交互。

　　动画可以将缩略图和细节视图相关联。图片来源：Charles Patterson

　　结束语

　　卡片是界面设计领域创新型新元素。它不仅仅是一张卡片，它还是创造优质内容和设计最佳用户体验最灵活的布局方式之一。

　　谢谢！

　　作者 | Nick Babich

　　软件工程师，关注 UI 和 UX。

　　翻译 | Jorri

　　题图来自 Pexels

　　原文授权译自

　　本文由让手机更好用的 AppSo 原创出品，关注微信号 appsolution，回复「学问」告诉你刷淘宝的 2 种姿势背后，有什么大学问。

　　LinkedIn 设计得挺不错的，推荐大家看看。