卡片式设计 - 最佳实例

自译外文 分类: 经验/观点 版权: 原作者: Nick Babich
5207 108 89 0
2016-12-16
30.4
首页推荐

Image title

                    版权:Hanna Jung


卡片是一个小的信息容器。在平衡美学和保证清楚简单的可用性下,它几乎成为了一个默认的选择。最开始是Pinterest和Facebook等在使用,而今天卡片式正在蔓延并影响多个行业。


Image title

            Pinterest对所有相关主题的信息组成一个容器

这种实现方式是很正确的,卡片式可以改善应用程序的用户体验。在这篇文章中,我将描述5种有用的卡片式技术,并提供一些例子。


1.遵循一个规则“一个卡片,一个主题”

卡片内的内容应该与只有一个主题。卡片内可以包含多个元素的设计,但是每个卡片应该只专注于一个的信息或内容。这让用户可以选择他们想要的内容进行阅读或分享。

Image title

                    每一个块(或卡片)只包含一个用户交互


2.让整个卡片都是可点击的

根据Fitts定律,不应仅仅是文字链接或图像,应该允许用户单击卡片的任何部分。更大的接触区可以提高触摸屏和鼠标的可用性。
提示:卡片使用少量的阴影来表示深度这是很好的,是一个视觉可点击的效果。

Image title

  卡片设计以少量的阴影表明整个卡是可点击的。版权:nngroup


3.让卡片视觉上是令人赏心悦目的

怎样让卡片是一个好的设计而且可以有效的工作。通过给卡片增加设计感,使卡片看上去很普通但是有创造性的。

Image title

                    版权:Piper Lawson


当涉及到实际的卡片设计时,你需要关注以下几点:


图片
图片是卡片式设计的重心。研究表明图片可以提升设计感。因此,卡片式设计中使用图片对用户会更有吸引力。

Image title

                    版权:Dave Gamache


阴影和渐变
阴影和渐变可以使用户感觉是符合物理常识的。但需要仔细考虑如何使用阴影和渐变:如果阴影投在了各个角落,那么卡片就不符合一个物理现象了。

Image title

        卡片式设计的圆角视觉上类似于扑克牌。版权:Material Design


排版
你可以使用文本来吸引用户的注意力。所有的卡片式设计应该是易于阅读和理解的。你的设计应该保持最大的可读性:
    选择简单的字体和容易阅读的配色方案(文本最清晰的方案是放置在一个纯色背景上)和足够的对比度。
    限制使用字体的数量。对于大多数卡片式设计中一个字体就足够了。
提示:卡片式内部建议使用无衬线字体与正常的字重。

Image title

                    版权:maconprinting


4.限制卡片的内容
卡片通常是很短的,它只是提供了一个入口点然后可以进入下一页,而不是展示的全部细节。当你试图在一张卡片内放太多的内容时,会使卡片变得太宽或太长,它就失去了原来的作用了,因为它看起来不再是卡片了。
下面的例子你会看到一个用户的界面。注意一下卡片的中心。它存在的问题是:展示了全部的信息,使得用户难以阅读。

Image title

                    版权:Piotr Adam Kwiatkowski


5.利用动画和动效
恰当的使用动画,可以提高用户体验。它可以帮助人们理解每个卡的不同状态之间的关系。


视觉提示
视觉提示帮助用户更好地理解如何进行用户界面交互。当你需要演示如何操作某些功能时可以使用这种动画。

Image title

                    导航功能的提示。版权:Barthelemy Chalvet


视觉反馈
在UI设计中视觉反馈是非常重要的。因为它可以吸引用户使用的欲望。在现实生活中,对象会与我们进行交互,这是人们所期望的。而桌面应用程序或网站可以使用悬停效果,表示与元素进行交互。悬停动画增加了页面的可发现性,同时使用户体验更多的乐趣。

Image title

卡片式设计应用悬停动画。版权:uxpin


隐藏选项也可以使用悬停效果。下面的例子中悬停效果允许用户可以使颜色进行标记,回复、转发或删除信息。

Image title

                    版权:Roman Shkolny


放大
在动画预览和详细视图之间创建一个转换:用户选择一个对象(卡片),并马上看到了一个与选择相关的详细信息。这里的难处是要确保用户感觉给定的上下文是相关联的。

Image title

            动画可以帮助你把缩略图和它的详细视图连接起来。版权:Charles Patterson


总结
卡片式是有创造性的新设计。它不只是仅供一看的,是一种可以创建丰富内容的用户体验的灵活布局模式。
谢谢!



原文地址:https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.1zj8zisqf

作者地址:https://uxplanet.org/@101


厉嗣傲

UI/UX设计师

1398粉丝/63关注

UI中合理的留白用户体验设计中的产品思维

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN