设计中的卡片式设计与体验.pdf

设计中的卡片式设计与体验 “设计师的工作 ，并不只是设计实践。在当前环境中 ，为设计一个合适的 所 ，并对设计领域 中心配置 ，对于设计师来说也许是更为重要的工作 ” ————— 原研哉 想想在我们的工作 ，生活 ，学习中又何不是这样呢。回归正文 ： 这篇文章提到卡片式设计与用户体验 ，不管是Web和移动应用的页面设计 ，都不能脱离了真实使用 完全个性化的体验 ，卡片是新的创造性概念。 无论你对这个概念的感觉如何 ，卡片设计都已经是近两年最流行的界面设计的排列样式 什么是卡片 卡片是那些装满包含图像和文本的小矩形 ，作为功能、内容入口点 ，以提供更详细的信息。可以平 衡用户界面的设计美学和良好的可用性 ，最近卡片几乎成了移动端界面设计的一个默认的选择。因 为卡是一种方便的显示不同元素组成的内容的方式。 卡片的体验 在用户界面中使用的卡是一个很好的体验 ，因为他们看起来像现实世界的有形卡。在移动设备上 ， 卡片是一种使用非常广的交互模式 ，因此 ，它更直观的给用户知道这一块卡片里的内容是代表一个 整体 ，一个模块的信息。 卡片是一个很好的工具 ，用于交流快速的故事。棒球卡是一个很好的例子 ，从现实生活中的对象。 你需要了解一个玩家的基本信息包含在一张小卡片的两边。 内容划分 卡片将内容划分成几个部分 ，这样划分可以占用的屏幕空间更少 ，而且更清晰的区分不同的内容。 就想写文章一样 ，你会用段落 ，标点符号来区分表达不同的内容。卡片设计就是一样的意思 ，可以 收集各种信息 ，形成连贯的一块内容。 当Faceboo k、tw it t er、腾讯等巨头们的产品使用卡片式设计web和移动端产品时 ，卡片的设计布局 被大量的产品设计师随波逐流的推到了设计的最前沿。如果你在用Faceboo k你会发现它的卡片设计 不多也不少 ，刚好充分的展现出卡片设计为它的产品设计带来的内容涉及区分的效果 ，虽然说有一 个瀑布流的首页无休止的往下刷信息。但这也是用户在使用过程中最低的成本 ，（这里的成本指的 是用户成本 ） 赏心悦目 设计是一门语言 ，通常一个产品通过设计和内容为用户传达信息 ，而卡片式的视觉效果设计也刚好 能给用户传达了清晰的信息 ，在卡片设计中还会为特定的信息内容加入图形图像 ，还能大大提升网 站或应用的体验效果 ，因为图像有效地吸引用户的视线 ，更加集中明确的引导用户去操作这一功能 。 Dribbble创意社区展示设计师作品的知名网站 ，基于卡片设计真的是最合适呈现这种类型的内容。 如何设计一张卡片 O K上面简单的介绍了一些卡片设计的优点 ，接下来我们谈谈如何设计一张卡片。在恒定的移动端应 用中相同的卡片设计 ，可以根据内容调整期高度 ，但宽度是固定的 ，Faceboo k的瀑布流页面无限 的往下 ，单宽度是不变的 ，内容显示也是一样 ，这可减少用户的视觉成本。当然最大高度限制应该 在一个平台上可用内容信息展示 ，但它可以设置好自动展示扩展。 从设计的角度来看 ，卡片设计应该是跟我们平时看到的名片一样有圆角、直角 ，卡片式设计给用户 看起来像一个内容块 ，而圆角和直角只是一种视觉设计的样式 ，给人不一样的印象设计。 可以说这些元素在你的设计中就像是添加了一点视觉上的香料 ，更好的给用户带来全新 ，不一样的 感受 ，而不会成为一种分心的事。卡的优点正确实施 ，卡片式设计可以提高产品的用户体验方面 ， 由于其功能和形状的特性 ，设计师们也很方便去再添加一个有趣的UI元素 ，直观的使用。 消化的形式 在设计中完美都知道内容是驱动设计去主导 ，而设计样式则是修饰内容的重要部分 ，比如 ：设计是 一个容器 ，里面可以装任何能装得下的物体 ，但这个容器是否合适装下这个物体来展示给其他用户 ，在这设计里用户可以很容易地访问他们感兴趣的内容 ，或功能产品 ，这能使用户能够从产品本身 ，功能需求 ，或者他们想要内容快速浏览他们想要的内容。 响应和移动设计 关于卡片式设计最重要的事情是 ，他们几乎有无限的可能。当然这里说的无限可能是指卡样式设计 作品既适用于台式机和移动设备 ，因为卡提供了更多可消化的内容。他们是很好的响应设计 ，因为 卡作为内容容器 ，容易扩大或下降。这就是为什么它如此容易创建一个一致的卡片样式设计 ，无论 设备 ，都可以适配。 布流设计 在扁平化设计趋势出现时 ，即出现了瀑布流的操作模式 ，顾名思义瀑布流就是可以无限制的往下滑 动来刷新内容 ，不需要切换页面 ，就像Faceboo k、Pint erest 使用卡片式设计 ，然后下滑刷新。以 新内容中最近的事件称现在最前端的一个快速概述。