卡片式设计用户界面.pdf

卡片式设计用户界面 在本文中 ，我将阐述卡片设计对UI设计师意味着什么 ，评价三个流行 卡片式服务。 网页和手机应用正彻底地从页面转向个性化体验 ，这些新 体验建立在许多单个内容 聚合上 ，而 这些内容目前以卡 形式来呈现。卡片式 交互方式正在广泛传播 ，无论是新闻网站或是外卖应用 ，你都可以看到几乎无处不在 “电子卡片”。 如果你对设计自己 卡片式用户界面感兴趣 ，可以免费下载并体验A do be Experience Design CC 。 卡片是什么 ？ 卡片通常是指那些包含一定图片和文本信息在内 长方形 ，作为查看更多详细信息 一个入口。因 为看起来如同真实世界中 卡片一样 ，在界面设计中 卡片具有非常棒 隐喻效果。 早在互联网和移动设备出现之前 ，卡片就在我们身边无处不在了——商业名片、棒球卡片 ，甚至便 利贴。 因此 ，对于用户来讲 ，我们能更直观地意识到这些卡片就像在现实生活中一样代表着一定 信息。 棒球卡片是现实生活中一个很好 例子 ：你想知道 棒球运动员 基本信息都包含在一张小卡片 正反面。 卡片的优点 卡片式设计可以应用于各种环境 ，正确运用 话它们可以改善A PP 用户体验。 以下是一些例子 ， 说明为什么卡片有益于你 用户界面。 良好的内容组织 卡片在占用较少屏幕空间 情况下将信息有组织 划分到不同 区域中。用户喜欢信息分块 ，因为 它有助于快速浏览 ：它可以让用户避免阅读让他们觉得恐惧和费时 超长段落 ，让用户更快地抓住 其感兴趣 部分。类似于文本段落是对语句 组织结果 ，卡片聚集多样 信息形成一个连贯 内 容体。 卡片上 信息布局整齐简练。 摘要性的格式易于消化 卡片几乎可以被用来容纳任何形式 信息 ，其摘要性 信息属性也易于用户快速消化。用户通过卡 片可以很容易地访问到他们感兴趣 内容。进而让用户愿意参与到对卡片 浏览和操作中来。 用户可以快速浏览、滑动卡片。 视觉上赏心悦目 基于卡片式 设计通常都严重依赖于其视觉效果。而卡片本身又对图片有很强 依赖性。多项研究 都已经指出图片确实能够提升网站或应用程序 设计效果和浏览体验 ，因为图片能够快速有效地吸 引用户 注意力。因此 ，在卡片中如果能突出使用图片 ，那自然会对用户产生更强 吸引力。 卡片以视觉信息取悦用户。 易于 应式的设计 关于卡片最重要 事情是它们几乎是可以无限变形 。卡片式 设计在桌面电脑和移动设备都工作 良好 ，因为它以更易于用户消化 方式向其呈现内容。正因为卡片作为一个内容容器 ，能很容易 放大或缩小 ，所以对于响应式 设计来说 ，卡片是一个非常合适 选择。卡片在多设备间能创造出 一个一致独立 美学效果 ，这就是为什么它能在不同设备间如此容易 创建出一致体验 原因。 卡片非常适合响应式和移动端设计。 为手指而设计 卡片完全适合手指操作 ，看起来似乎也是专为移动端所创造 样式。数字卡片 使用和现实中 卡 片一样 ，为用户提供了舒适 体验。用户无需思考如何操作 ，很容易理解翻转卡片查看更多信息或 滑动查看更多卡片。 卡片几乎是无限可操作 ：他们可以充分利用动画和运动。 （动图 ） 卡片式设计的最佳案例 卡片式设计 精髓在于桌面端和移动设备 交集设计 ，在互动性和可用性之间寻求平衡点。然而成 功 卡片式设计需要具备清爽干净 美学特征 ，并且能让用户直接轻松地交互。 瀑布流 卡片出现在一个瀑布流中时 ，便能够创建出一系列符合自然时间轴 事件。例如Faceboo k在news f eed中呈现最近时间段内容 快速预览。Faceboo k news f eed是以卡片区分内容 无止境 瀑 布流。卡片在这里 关键是分解内容 ，它们将内容分离成无止境 瀑布流 ，并使内容易于分享。这 种交互模式促使用户乐于分享平台 信息。 Faceboo k是卡片式设计易于承载信息 很好案例。 易于发现感兴趣的内容 卡片可以使相关内容自然展示 ，让用户挖掘自己感兴趣 内容 ，设计师无不知晓 设计创意平 台Behance就是这么做 。卡片式设计是最适合艺术创意类平台展示 方式。 Behance采用卡片式布局打造直观 用户界面。 T inder是国外 一款手机交友A PP ，它 卡片模式利用探索发现 机制 ，让用户习惯去探索更多 内容 ，从而使T inder成为最流行 移动端应用之一。T inder 交互模式很简单 ：向左滑动表示不感 兴趣 ，向右滑动表示感兴趣。这