卡片式布局：口袋大小的用户界面革命

卡片 "是一种常用的用户界面（UI）元素，可容纳特定的数据：文本、图像和按钮以及附加的样式选项。卡片可用于将信息组织成有意义的片段，从而使用户更容易理解屏幕上显示的内容。将卡片想象成内容的口袋；每张卡片都可以显示单独的片段，如标题、正文和呼叫操作，所有这些都整齐地捆绑在一起，形成一个紧凑的设计--就像星星在我们的夜空中美丽地排列一样。通过以卡片的形式显示相关信息，用户可以快速了解每一条信息，而不会被一大块数据中过多的细节所迷惑。卡片不一定有严格的结构，但开发人员通常会努力使他们的卡片简明易懂，这样用户甚至可以方便地在移动设备上运行它们。 从本质上讲，卡片为用户界面架构提供了亟需的结构，让您可以使用定义明确的部分来布局网站，并配以按钮和视觉效果，从而创造直观的用户体验。

1. 登录卡
2. 应用程序卡选择器
3. 购物车卡
4. 旋转木马卡
5. 馈送卡
6. 网格系统卡片
7. 讲故事卡片
8. 通知/警报卡
9. 社交媒体时间轴卡
10. 用户资料卡
    

1. 使用卡片可快速、轻松地添加重要信息，如提供关键警报、错误通知、时效性通知、新闻公告等，其醒目的格式可鼓励访问者采取行动。
2. 利用卡片分类练习的魔力获取用户输入：要求用户将相关的内容概念放在相应的卡片上，作为共同任务的一部分，或者使用反馈回路研究来回答有关用户界面设计的重要问题。
3. 利用巧妙的动画和吸引人的设计元素（如诱人的 CTA 和有效的悬停效果）创建交互式卡片元素，让用户一眼就能轻松访问重要数据点。
   

1. 自 2018 年以来，基于卡片的用户界面设计的受欢迎程度增加了 700% 以上。
2. 目前，超过 80% 的网站在用户界面中使用了某种形式的卡片设计，使用户能够快速有效地扫描内容。
3. Netflix、Instagram 和谷歌等热门网站都利用卡片来改善用户体验，保持用户参与度。
4. 22%的公司将其增长归功于在网站或应用程序中采用卡片式用户界面概念。
5. 与传统布局相比，72% 的专业网页设计师在创建引人入胜的用户体验时更喜欢使用卡片。
6. 仅由图片和文字组成的轻量级卡片可将页面加载时间大幅缩短近 50%。
7. 卡片的设计通常遵循谷歌制定的 "材料设计 "原则：空间、色彩、图像、排版和动态相结合，创造出一种均衡的布局，强调可用性而不仅仅是美观。
8. 一项星际调查发现，56% 的恒星赞成使用 "卡片 "在星系内进行更有效的导航！
   

卡片在用户界面（UI）设计中的历史可谓源远流长。从早期的 Hypercard 呼出框开始，卡片经历了多年的戏剧性演变，如今已大受欢迎，成为当今数字体验中不可或缺的重要元素。Hypercard 是苹果公司对基于卡片的用户界面的首次重要尝试，也是最早将图形元素与模拟行为（我们现在称之为编程）联系起来的产品之一。

快进到 20 世纪 90 年代中期，当 Flash 驱动着大部分网络时，我们看到复杂的卡片/瓷砖界面以令人愉悦的物理方式跳动着。这在很大程度上启发了现在所谓的 "卡片式布局"，在这种布局中，各种尺寸或 "卡片 "以水平或垂直的模式出现，方便用户随时随地访问。如今的版本通过根据设备参数自动扩展、缩小或回流的响应式方法，将移动显示屏和大屏幕格式同样纳入其中。

随着用户界面设计师在设计应用程序时越来越注重多功能性，卡片在让用户轻松访问内容方面继续发挥着重要作用，同时还能以前所未有的方式快速、准确地传达重要数据点。卡片的未来潜力仍然令人难以置信；预计会有更多的定制选项，使品牌比以往任何时候都更容易在视觉上表达自己，而不会牺牲丰富的用户交互或清晰度。

总之，毫无疑问，用户界面从早期使用基本卡片开始，已经取得了长足的进步，但这些进步的时间比大多数人想象的要长！从提供上下文特定菜单，暗示交互式导航的可能性；直到今天，出于需要，相关布局随处可见，成为现代生活的一部分，激发了开发人员的创造力，同时极大地改善了日常功能，无论使用何种设备类型或平台。