基于卡片设计的UI界面.docxVIP

基于卡片设计的UI界面 第 PAGE \* Arabic \* MERGEFORMAT 1 页 基于卡片设计的UI界面 By HYPERLINK /author/nickbabich/ \o Posts by Nick Babich Nick Babich from HYPERLINK / Smashing Magazine 网页和移动应用正在向着完全私人定制的用户体验发展着，这些新的体验的建立是基于 将独立的那些内容聚集在一起形成对用户有用的内容集上，也就是所谓的卡片呈现方式 – Card。当前基于卡片的交互模型设计的影响范围很广，几乎所有的电子设备上都能看见卡片设计，从网站站点到配送外卖的App都是卡片式的。那么我们就来跟UI设计师们聊聊这些流行的卡片设计方法。 什么是卡片？ 卡片(Card)是那种图片和文字充满在一个个小的矩形框中，作为一种能通过点击获得到更多详细信息的一个个切入点-entry point. Card这个词是个非常贴切的隐喻， 因为卡片在现实中也是那样的。 在网站和移动应用之前，卡片就已经出现在我们的生活并伴随我们左右了，比如商业名片，银行卡，便签，美容卡等。卡片设计是和真实生活保持一致性的成功例子。 图1: 棒球卡就是一个很好的例子：你想要关于这个棒球明星的信息被印刷在小小卡片的两面。 卡片的优势 卡片设计可以被应用在很多上下文情景中，如能正确灵活的使用的话，将会提升App或web的用户体验。下面就是一些非常好提现了卡片优势的几个例子： 信息分组 使用卡片将信息内容进行有效的分组，用户会非常感激你这么做，因为这样更容易浏览和阅读。卡片能够打破大段文字让人觉得阅读需要大量时间的感觉，卡片让用户能够快速发现并深入到他们感兴趣的那个部分去。卡片将内容分成有意义的几个部分，并收集各种相关联的信息，形成一个连贯的对用户有意义的内容。总之卡片能让设计变更整洁。  容易消化理解 卡片是快速讲述一个故事的良好工具。如同格子漫画。将内容放在卡片中总是能让用户能够更容易理解，同时也能更快访问他们感兴趣的那些内容。用户还可以快速浏览和翻阅这些卡片。 视觉上的愉悦感 卡片的设计好坏非常依赖于视觉效果搭配是否得当。事实上，使用视觉重量较高的图片能体现一种力量。有研究表明，使用图片能够提高网站或App的设计，因为图片能更快吸引用户的眼球，也更容易被用户理解。这就强调了在卡片设计中使用图片会让设计更加吸引人。 有利于屏幕尺寸的变化 卡片最重要的一点就是它们非常容易改变。对于自适应设计来说，卡片式非常好的选择，因为承载内容的这些卡片可以很容易的在网格中放大或缩小或移动位置。这个特性让设计师可以使用卡片在不同设备上创造一致性的审美和体验。 Google在不同屏幕尺寸和移动设备上，卡片的良好表现 为满意而设计 卡片是为了用户有最佳体验而设计，而不仅仅是为了移动应用。电子的卡片和物理卡片的行为是一致的，用户就是喜欢卡片那种简洁又直观的展现信息的方式，翻过来卡片的背面就能看到更多信息，滑动切换另一张卡就能看到下一个卡片信息。卡片能够展现更多吸引人的动作效果。 最佳的卡片设计案例 为了设计出成功的卡片，基于卡片的界面需要既美观整洁，又能引导用户执行相应的操作。 基于卡片的流式布局 基于卡片的流最典型的就是时间轴设计。例如：Facebook使用时间轴设计来展现一个快速全局查看最近的事件的功能。虽然这些新闻或事件是无穷尽的，然而每个卡片确是独立的展现单个事件的。最新的事件永远展示在最上方。卡片在这儿的作用是从无穷的事件流中，分离出单个事件，把它们打包、让它们可以被分享、评论或like等等。从而促进了用户进行社交分享。  Facebook是个非常好的内容驱动的卡片设计 帮助用户探索发现 卡片可以让相关内容自然而然地流露出来，让用户可以深入到他们感兴趣的那一个。看看Behance的网站，这个将大师们的创意设计集合在一起的网站，使用基于卡片的设计来展现这些大师的作品再合适不过了。 Behance使用的布局也是可以自动伸缩的布局方式 Tinder是利用卡片的滑动机制来展现下一个选择的绝佳例子，它已经成为当下最流行的移动应用了。Tinder拥有最简洁的卡片界面 – 你只需要向左滑动那些你不感兴趣的，向右滑动那些你感兴趣的。卡片滑动机制奇怪的地方在于这会让人上瘾。每次滑动其实都是在收集信息 – 系统会基于用户的选择提供更符合用户需求的内容。 Tinder可滑动的卡片 展现任务流程 卡片能够很容易被分类为一系列的任务。Trello是一个任务管理应用，在卡片风格的界面上，为用户创造基于卡片设计的任务列表，每个卡片代表一个单独的任务。 Trello的卡片任务管理 会话 卡片也能很好的展示可操作的按钮等内容。例如在