|
好产品，或许你已见得不少。但好产品背后的探索和思考，恐怕没有太多人知道。 在这个栏目里，你会知道「产品人」如何创作，提供更好的用户体验，并影响成千上万人的生活。 我们精选优质内容，为你提供特别的产品视角。 如果你有好文推荐，或者希望投稿，欢迎联系 [email protected]。 微信号 appsolution 后台回复「早读」可获取文章合辑。 这是灵感早读的第 47篇文章 A 君导读：最近，越来越多 app 开始使用「卡片式设计」，例如我们所熟知的高端职场社区 LinkedIn 领英、Facebook 和探探。 到底这种卡片式设计怎么用，才能给我们良好的体验？AppSo（微信号 appsolution）为你带来了 5 个实践原则和案例。 卡片是简洁小巧的信息盒子。在界面设计中，要平衡界面的审美和可用性，卡片基本是一个通用选择。卡片这一设计概念最先被 Pinterest 和 Facebook 使用，而如今卡片的使用已经渗入了各行各业。
Pinterest 引入卡片这一概念，基本可以将某主题相关的所有信息纳入一个信息盒子。 如果运用恰当的话，卡片可以提升 app 的用户体验。 这篇文章介绍了 5 种卡片运用的最佳实践，并提供相关的实用案例。 1. 遵循「一卡一概念」原则 卡片的所有内容只能和一个主题相关。一个卡片可以包含多种元素，但应该主要体现同类信息或内容。这样用户才能更轻松地选择他们所喜爱或愿意分享的内容。 一个模块（或卡片）「包含」一次用户交互。 2. 保证整个卡片都可点击 遵循菲兹定律（Fitts’s Law）， 要让用户可以点击或触击卡片的任何部分，而不只是文字链接或图片。无论在移动端的触击屏幕，还是需要鼠标操作的主桌面端，有相对大面积的触击区都可大大提高卡片的可用性。
AppSo（微信号 appsolution）注：菲兹定律是人机交互领域一个非常重要的法则。其基本观点是，当一个人用鼠标来移动鼠标指针时，屏幕上的目标其某些特征会使得点击变得轻松或困难。目标离得越远，到达就越费劲；目标越小，就越难点中。 小提示： 推荐使用一点阴影来呈现深度，让大家知道卡片是可点击的。
图片来源：nngroup 3. 保证卡片的视觉享受感 要说什么样的卡片才是成功的，那必然是有 良好设计和可用性的卡片了。对卡片稍加打磨，加入少许美学特征，卡片会让人感觉熟悉，同时创意十足。
图片来源：Piper Lawson 当开始动手设计卡片时，你应当特别注意以下几个方面： 图片 基于卡片的设计通常主要依靠视觉设计，而 使用大量图片就是卡片设计的一大亮点。研究发现已证实，图片可以提升网页或 app 的整体设计。所以，加入图片也使得基于卡片的设计更加引人入胜。
图片来源：Dave Gamache 阴影和渐变 加入阴影和渐变这两种元素，可以有效地让用户将你设计的卡片与现实生活中的对应实物联系在一起。 但在设计时，一定要仔细思考如何运用这两种元素：如果卡片四周和角落都加上阴影，要再想让用户将它与现实生活中的对应实物联系在一起就有点难了。
带有圆角的卡片从视觉上看来就像是一张扑克牌。图片来源：Material Design 排版 当然，要想吸引用户注意力，还可以通过排版来实现。卡片所有内容都应该简单易懂，不妨试试从最大可读性角度来设计： 选择简单的字体和易于阅读的配色方案（文本内容在纯色背景下，且背景颜色和文字颜色有鲜明对比的，这样的文本才是最清晰易读的）。 尽量控制字体的种类数量。对于绝大多数情况而言，单一的字体足矣。 小提示：卡片主内容文本，选用 sans-serif 字体正常粗细的效果非常好。
图片来源：maconprinting 4. 限制卡片内容篇幅 (责任编辑：本港台直播) |
