文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏
参与翻译: solowolf (15)

网络和移动应用正在从页面转向完全个性化的体验。 这些新的体验是建立在许多单独内容的聚合体上的。 该内容现在呈现的方式是卡的形式。 基于卡的交互模型正在广泛传播,你可以看到几乎无处不在的数字卡 - 从新闻网站到食品交付应用程序.

在本文中,我将解释什么卡对UI设计师意味着什么,并且我将回顾三个流行的基于卡的服务。 如果您对原型设计自己的基于卡的用户界面感兴趣,您可以免费下载并测试Adobe的体验设计CC1(Experience Design CC1),并立即开始使用。

第 1 段(可获 1.4 积分)

什么是卡片?

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

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

棒球卡是现实生活中的一个很好的例子:你需要知道的一个球员的基本信息包含在一张小卡的两面。 (图片来源:oldbaseballcards8)(Large preview9

第 2 段(可获 1.45 积分)

卡片的优势

数字卡片可以应用于多种环境,运用得当,他们可以改善应用程序的用户体验方面。这里有一些例子来说明为什么卡可能有益于您的界面:

组块的内容 

卡将信息组织成内容块,用户欣赏分块内容,因为它有助于scannability10:它有助于避免文本墙,这可能显得令人恐惧或耗时,并且允许用户更快地深入其兴趣。 卡片将内容分成有意义的部分,类似于文本段落将句子分组到不同部分的方式。 他们可以收集各种信息以形成一个连贯的内容。

第 3 段(可获 1.4 积分)

卡片是信息的整齐的小容器。(图片来源: Google12) ( Large preview13)

易消化 

卡片是交流快速故事的一个很好的工具。 将内容放置在卡中使得用户可以消化。 用户可以轻松访问他们感兴趣的内容,这使得用户能够以任何他们想要的方式参与。

赏心悦目 

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

第 4 段(可获 1.35 积分)

Cards can tease users with visual information.

卡片可以通过视觉信息帮助用户梳理信息。(图片来源: Google17) ( Large preview18)

适合不同的屏幕尺寸

卡的最重要的事情是,他们几乎是无限可操纵的。 它们是响应式设计的不错选择,因为卡片作为容易放大或缩小的内容容器。 此功能允许我们跨多个设备创建单一的美感,并建立一致的体验,而不管设备。

卡片适合移动设备和各种屏幕尺寸。(图片来源: Google20) ( Large preview21)

第 5 段(可获 1.11 积分)

为拇指而设计

卡片是为拇指而做的。 卡片是一种似乎只是为应用程序的风格。 数字卡片的行为与物理卡片的行为相同。 用户喜欢卡片的简单性,并且直观地理解转换卡片以获得更多信息或者刷新下一个信息块的物理性质。

 

最佳卡片设计实例 

卡片式设计位于台式机和移动设备的设计的交集,弥合了交互和可用性之间的差距。 但为了成功,基于卡片的界面需要干净美观和直接使用户与某一动作的参与。

第 6 段(可获 1.25 积分)

流 

卡片可以显示在流中,从而创建事件的时间轴。 例如,Facebook使用它们对最近的新闻提要中的事件进行了一个快速的概述。 Facebook的新闻提要是一个无尽的流,而卡是个人的。 这里的卡的重点是分解。 他们把事情无限流,把它们打包,并使它们可共享。 此操作还鼓励用户在社交媒体上分享内容。

Facebook是内容驱动卡设计的一个很好的例子。

卡片允许相关内容自然地显示出来,使用户能够深入了解自己的兴趣。 看看Behance24,一个在线创意社区,展示创造性的工作。 基于卡的设计是呈现这种类型的内容的最合适的方式。

第 7 段(可获 1.61 积分)

Behance使用卡片布局以保持一个直观的用户界面。 ( Large preview26)

Tinder是如何利用发现机制提出下一个选项驱动应用程序成为最流行的移动应用程序之一的一个很好的例子。 Tinder有一个非常简单的卡片刷卡界面 - 如果你不感兴趣就向左滑动,如果感兴趣就向右。 这种卡片刷卡机制令人好奇得上瘾,因为每一次刷卡都在收集信息 - 卡片连接用户,并提供基于做出决定的最佳可能的选择。

第 8 段(可获 1.19 积分)

图片来源:Tinder。( Large preview28)

工作流 

卡片很容易归类为任务列表。Trello29任务管理应用程序做了很大的工作,使用卡片式接口为用户创建指示板,其中每个卡片代表一个单独的任务。

Trello板是一张充满卡片的画布。( Large preview31)

 对话框

由于卡片是内容容器,它们是表示动作的完美选择。 考虑Apple设备上的AirDrop服务。 当您有数据传输的传入请求时,系统会弹出一个卡片,其中会显示通知以接受或拒绝传输。 苹果的截图专注于照片,但开发人员可以把任何东西放入卡片 - 优惠券,歌曲或网络链接。

第 9 段(可获 1.41 积分)

图片来源:Apple。 ( Large preview33)

仪表盘 

组织来自不同来源的内容时,卡片设计提供了极高的精度。 使用卡片,您可以将信息集合组织成逻辑组,把内容聚合起来并显示其特定的上下文。 来自许多不同内容提供商的经过选择的内容可以轻易地聚合在一起并被重新分配为相关信息的“套牌”。

图片来源: Material design35. ( Large preview36)

基于卡片的设计语言 

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

第 10 段(可获 1.59 积分)

微软Windows 8. ( Large preview38)

在更多细节上创建卡片

卡片和简单 

当你想到卡片,简单应该是头脑中要记住的第一件事。 来自Carrie Cousins39的一个很好的建议是“每张卡片一条信息”:卡片可以在设计中包含多个元素,但每个应该只关注一点信息或内容。 这使用户有机会选择他们想要消费或分享的您的内容的部分。

ReaLync在他们的所有列表携带卡片,以显示关于地方的最重要的信息。来源: piperlawson41. ( Large preview42)

第 11 段(可获 1.31 积分)

卡片和响应设计 

我们都知道how important43是让你的应用或网站在所有设备上看起来以及工作时有同样的效果。当我们为不同的屏幕设计时,我们应该充分利用目标环境,使用卡片根据屏幕的大小快速轻易地调整内容。 卡片提供 compatibility with responsive frameworks44 — 卡片网格可以重新构建自己以适应任何断点或屏幕大小。

数字卡片的好处是它可以以各种方式操纵。 例如,在移动设备上,卡片可以垂直堆叠,就像电话上的活动流一样:

第 12 段(可获 1.39 积分)

The Verge4946在移动视窗。( Large preview47)

而对于更大的屏幕他们可以分为网格:

The Verge4946 在桌面屏幕上。 ( Large preview50)

卡片可以是固定的或可变的高度:您可以根据设备类型为您的卡片设置固定宽度和可变高度。

图片来源: Intercom52. ( Large preview53)

卡片和排版

卡片设计的一切应该是为了易于阅读和理解。你应该为实现最好的可读性而设计:

  • 选择simple typefaces54和易于阅读的颜色方案(当放置在与文本有足够对比度的纯色背景上时文本是最清晰的)。
  • 尝试限制字体的数量。 对于大多数卡片项目,单个字体就足够了。
第 13 段(可获 1.55 积分)

图片来源:Material Design。 ( Large preview56)

结论 

对于为什么卡片式设计会如此受欢迎并且流行度在继续增加,大多数人可能有了更好的理解。这种趋势不会很快结束。卡片将被保留并继续成为应用程序设计的重要组成部分。

良好的设计和可用性是卡片流行的原因。卡片不仅仅是一个外观,对于富文本内容的创作来说,它是最灵活的布局格式之一。 今天,人们快速地查找信息,而卡片无论什么样的设备都能很好地为人们服务。

第 14 段(可获 1.21 积分)

本文是Adobe提供的UX设计系列的一部分。 新引入的Experience Design app57是为快速流畅的UX设计过程而设计的,因为它可以让您勾画出想法,创建交互式原型,测试并在一个位置共享。

您可以在Behance58上查看使用Adobe XD创建的更多启发性项目,还可以访问Adobe XD blog59以随时更新和通知您。 Adobe XD经常更新新功能,由于它是公开的测试版,您可以download and test it for free60

第 15 段(可获 1.19 积分)

文章评论