清远网站制作：设计基于卡的用户界面

2019.08.13 mf_web

173

网络和移动应用正逐渐从页面转向完全个性化的体验。这些新体验建立在许多单独内容的聚合之上。现在呈现此内容的方式是卡片形式。基于卡的交互模式正在广泛传播，您几乎可以在任何地方看到数字卡 - 从新闻网站到食品交付应用程序。

清远网站制作在本文中，我将解释哪些卡对UI设计者意味着什么，我将回顾三种流行的基于卡的服务。如果你有兴趣在原型自己的基于卡的用户界面，你可以下载并测试Adobe的体验设计CC的自由和马上开始。

卡是什么？

卡片是那些充满包容性图像和文本的小矩形，可作为更详细信息的入口点。“卡片”这个词是一个很好的比喻，因为它们看起来像用户界面中的真实世界有形卡片。

在网络和移动应用程序之前，卡片总是在我们周围 - 名片，棒球卡，甚至粘滞便笺。因此，我们更直观地知道这些卡片就像在现实生活中一样代表一些内容。

棒球卡是现实生活中的一个很好的例子：你需要知道的关于玩家的基本信息包含在一张小牌的两面。（图片来源：oldbaseballcards）

卡的优点

数字卡可以应用于各种环境，正确实现，它们可以改善应用程序的用户体验方面。以下是一些示例，说明为什么卡可以对您的UI有益：

分块内容

卡将信息组织成大块内容，用户欣赏分块内容，因为它有助于扫描：它有助于避免文本墙，这可能看起来令人生畏或耗时，并且允许用户更快地深入了解他们的兴趣。卡片将内容划分为有意义的部分，类似于文本段落将句子分组为不同部分的方式。他们可以收集各种信息，形成一个连贯的内容。

易于消化

卡片是沟通快速故事的绝佳工具。将内容放入卡中使其易于用户使用。用户可以轻松访问他们感兴趣的内容，这使用户能够以他们想要的任何方式参与。

视觉上赏心悦目

基于卡的设计通常严重依赖于视觉效果。实际上，沉重的图像是基于卡片设计的强项。研究证实，图像可以提升网站和应用程序的设计，因为图像可以有效地立即吸引用户的眼球。强调使用图像使得基于卡的设计对用户更具吸引力。

适用于不同的屏幕尺寸

卡片最重要的是它们几乎可以无限制地操纵。它们是响应式设计的不错选择，因为卡片可以作为容易扩展或缩小的内容容器。此功能允许我们在多个设备上创建单一美学，并建立一致的体验，无论设备如何。

专为拇指设计

卡片是用于拇指。卡片似乎只是为应用程序制作的风格。数字卡的行为与物理卡的行为方式相同。用户喜欢简单的卡片，直观地了解翻转卡片的物理信息以获取更多信息，或者刷卡以获取下一部分信息。

最佳卡片设计实例

卡式设计位于桌面和移动设备的交叉设计中，弥合了交互和可用性之间的差距。但是为了获得成功，基于卡的界面需要清晰的美学和直接的用户参与特定动作。

流

卡片可以显示在流中，从而创建事件的时间轴。例如，Facebook使用它们快速概述新闻Feed中的近期事件。Facebook的新闻源是层出不穷的，而卡片则是个人的。这里的要点是分解。他们从无限的流中取出东西，打包它们，并使它们可共享。此操作还鼓励用户在社交媒体上共享内容。

发现

卡片允许相关内容自然地显示自己，使用户可以深入了解他们的兴趣。看看Behance，一个展示创意作品的在线创意社区。基于卡的设计是呈现此类内容的最合适方式。

Tinder是如何利用发现机制呈现下一个选项推动应用程序成为最受欢迎的移动应用程序之一的一个很好的例子。Tinder有一个非常简单的刷卡界面 - 如果你不感兴趣，你可以向右滑动，如果你不喜欢则向右滑动。这种刷卡机制非常令人上瘾，因为每一次刷卡都在收集信息 - 卡片与用户连接，并根据所做出的决定提供最佳选择。

工作流程

卡片很容易分类为任务列表。该Trello任务管理应用程序不会采用卡片式的界面为用户创建一个仪表板，其中每张卡都代表一个独立的任务伟大的工作。

对话

由于卡片是内容容器，因此它们非常适合表示操作。考虑Apple设备上的AirDrop服务。当您收到数据传输请求时，会弹出一张卡片，其中包含接受或拒绝传输的通知。Apple的截图专注于照片，但开发人员可以将任何内容放入卡片 - 优惠券，歌曲或网络链接中。

仪表板

Сard设计在组织来自不同来源的内容时提供了极好的精确度。使用卡片，您可以将信息集合组织到逻辑组中，汇总内容并显示特定于上下文的内容。来自许多不同内容提供商的选择性内容可以容易地收集在一起并重新分配为相关信息的“套牌”。

基于卡的设计语言

2010年，微软推出了Metro设计语言。一个关键的设计原则是更好地关注应用程序的内容，这是通过使用扁平元素实现的，更多地依赖于排版和卡片。地铁设计卡不仅仅是一个设计元素; 它是一个重要的功能部分，提供了一个简单的互动。

更详细地创建卡片

卡和简单

当你考虑卡片时，简单性应该是首要考虑因素。Carrie Cousins的一个很好的建议是“每张卡片的一条信息”：卡片可以在设计中包含多个元素，但每个元素应该只关注一点信息或内容。这使用户有机会选择他们想要使用或共享的内容部分。

ReaLync将卡片带到他们的所有列表中，以显示有关场所的最重要信息。图片来源：piperlawson。

卡片和响应式设计

我们都知道多么重要它是使你的应用程序或网站的外观和在所有设备上同样运行良好。当我们设计不同的屏幕时，我们应该充分利用目标环境和使用卡片，我们可以根据屏幕的大小快速轻松地调整内容。卡片提供与响应式框架的出色兼容性 - 卡片网格可以自我重组以适应任何断点或屏幕大小。数字卡的优点在于它可以通过多种方式进行操作。例如，在移动设备上，卡可以垂直堆叠，就像手机上的活动流一样：