探探和 LinkedIn 都在用的卡片设计，怎样才给你好的体验？| 灵感早读
A 君导读：最近，越来越多 app 开始使用「卡片式设计」，例如我们所熟知的高端职场社区 LinkedIn 领英和 Facebook。
到底这种卡片式设计怎么用，才能给我们良好的体验？AppSo（微信号 appsolution）为你带来了 5 个实践原则和案例。
卡片是简洁小巧的信息盒子。在界面设计中，要平衡界面的审美和可用性，卡片基本是一个通用选择。卡片这一设计概念最先被 Pinterest 和 Facebook 使用，而如今卡片的使用已经渗入了各行各业。
Pinterest 引入卡片这一概念，基本可以将某主题相关的所有信息纳入一个信息盒子。
如果运用恰当的话，卡片可以提升 app 的用户体验。这篇文章介绍了 5 种卡片运用的最佳实践，并提供相关的实用案例。
1. 遵循「一卡一概念」原则
卡片的所有内容只能和一个主题相关。一个卡片可以包含多种元素，但应该主要体现同类信息或内容。这样用户才能更轻松地选择他们所喜爱或愿意分享的内容。
一个模块（或卡片）「包含」一次用户交互。
2. 保证整个卡片都可点击
遵循菲兹定律（Fitts’s Law），要让用户可以点击或触击卡片的任何部分，而不只是文字链接或图片。无论在移动端的触击屏幕，还是需要鼠标操作的主桌面端，有相对大面积的触击区都可大大提高卡片的可用性。
AppSo（微信号 appsolution）注：
菲兹定律是人机交互领域一个非常重要的法则。其基本观点是，当一个人用鼠标来移动鼠标指针时，屏幕上的目标其某些特征会使得点击变得轻松或困难。目标离得越远，到达就越费劲；目标越小，就越难点中。
小提示：推荐使用一点阴影来呈现深度，让大家知道卡片是可点击的。
图片来源：nngroup
3. 保证卡片的视觉享受感
要说什么样的卡片才是成功的，那必然是有良好设计和可用性的卡片了。对卡片稍加打磨，加入少许美学特征，卡片会让人感觉熟悉，同时创意十足。
图片来源：Piper Lawson
当开始动手设计卡片时，你应当特别注意以下几个方面：
基于卡片的设计通常主要依靠视觉设计，而使用大量图片就是卡片设计的一大亮点。，图片可以提升网页或 app 的整体设计。所以，加入图片也使得基于卡片的设计更加引人入胜。
图片来源：Dave Gamache
阴影和渐变
加入阴影和渐变这两种元素，可以有效地让用户将你设计的卡片与现实生活中的对应实物联系在一起。
但在设计时，一定要仔细思考如何运用这两种元素：如果卡片四周和角落都加上阴影，要再想让用户将它与现实生活中的对应实物联系在一起就有点难了。
带有圆角的卡片从视觉上看来就像是一张扑克牌。图片来源：Material Design
当然，要想吸引用户注意力，还可以通过排版来实现。卡片所有内容都应该简单易懂，不妨试试从最大可读性角度来设计：
选择和易于阅读的配色方案（文本内容在纯色背景下，且背景颜色和文字颜色有鲜明对比的，这样的文本才是最清晰易读的）。
尽量控制字体的种类数量。对于绝大多数情况而言，单一的字体足矣。
小提示：卡片主内容文本，选用 sans-serif 字体正常粗细的效果非常好。
图片来源：maconprinting
4. 限制卡片内容篇幅
卡片通常不大，其作为用户了解更多细节信息的「入口」，所以它本身不需要承载过多细节内容。当你试图在卡片里添加大量内容，导致卡片变得过宽或过长，那它就会失去其原有的「拟物」效果。
下图是一个采用基于卡片设计的用户界面示例。注意中间的卡片，它的问题主要是因为大量内容过多，以至于难以阅读。
图片来源：Piotr Adam Kwiatkowski
5. 加入动画和动效
动画如果运用得好，可以大大提升用户体验。其可以帮助用户在基于卡片的界面中更好地定位，并建立不同卡片状态之间的视觉关联。
视觉提示帮助用户更好地了解如何与界面进行交互。当需要向用户展示某些具体功能如何操作时，它就显得颇为有用了。
展示导航功能的提示。图片来源：Barthelemy Chalvet
视觉反馈在界面设计中相当重要，因为它能直接和用户的自然期望相关联。
在现实生活中，各种物品通常都会对我们的行为作出反应，这也是大众习以为常的反馈。比如电脑的开关按钮，当你按下开关键时，你可以感受到按钮被按下的力量反馈，同时还有声音反馈。
在电脑端，你可以通过「悬停效果」来显示相关元素的交互行为。悬停动画可以增加功能的可发现性，同时，也使用户体验更加有趣。
在卡片中加入悬停动画。图片来源：uxpin
使用悬停效果还可以激活更多选项。下图中，光标悬停后，用户可以进行颜色标记、回复、转发或删除当前信息。
图片来源：Roman Shkolny
放大可以呈现从原图到细节视图的过渡：用户选中卡片就可以直接看到相关详细信息。不过要注意，要确认让用户感觉他们仍在相同背景框架下进行交互。
动画可以将缩略图和细节视图相关联。图片来源：Charles Patterson
卡片是界面设计领域创新型新元素。它不仅仅是一张卡片，它还是创造优质内容和设计最佳用户体验最灵活的布局方式之一。
作者 | Nick Babich
软件工程师，关注UI和UX。
翻译 | Jorri
题图来自 Pexels
原文链接 ，已获原作者授权翻译。
本文由让手机更好用的 AppSo 原创出品，关注微信号 appsolution，回复「学问」告诉你。
有好的产品或者项目希望我们报道，猛戳这里
26文章总数
全新爱范儿 App 现已适配
Android 及 iPhone
使用微信扫码关注爱范儿微信公众号
关注爱范儿微信号，连接热爱，关注这个时代最好的产品。
想让你的手机好用到哭？关注这个号就够了。
关注玩物志微信号，就是让你乱花钱。贺卡版面设好后,因为贺卡纸张比A4厚,所以不敢打印,以免损坏.
我该怎样操作呢?
可以的，在打印机属性里可以选择纸张或者更改纸厚的。
1.有的机子可以打.2.你可以用A4打然后折叠在一个贺卡里,只一个折.其实卖的也是这样做的.
每天爱你多一点，今天爱你特别多。。。元旦和我一起过。。。
用不同颜色的纸~剪成不同的形状~贴起来~或者把你喜欢的图案画在卡纸上，然后用刻刀把图案雕刻出来，就会在卡纸上呈现出立体的纸雕，非常的好看，在制作的过程中你也会体...
可以用废弃的塑料制品做
答: 不知道是不是来事就一直走血能怀
答: 3.交流机依据帧头的信息进需瞰脾，是以说交流机是工作在数据链路层的收集设备（此处所述交流机仅指传统的二层交流设备）
答: 打10060找网通维修
大家还关注
确定举报此问题
举报原因(必选)：
广告或垃圾信息
激进时政或意识形态话题
不雅词句或人身攻击
侵犯他人隐私
其它违法和不良信息
报告，这不是个问题
报告原因(必选)：
这不是个问题
这个问题分类似乎错了
这个不是我熟悉的地区为什么你爱用的 App，都用卡片式设计？
招聘信息：
今天这篇文章，将全面介绍「卡片式设计」，看完之后，你会知道为什么爱用的 app 都喜欢用这样的设计。网页和手机 app 逐渐摈弃了传统单一的页面设计，向完全个性化的用户体验发展。这种发展也是基于大量独立内容模块的流行。其中，卡片就是最新一种独具创新的概念。不管你怎么看待它，卡片短期之内还不会过时。一、什么是卡片卡片是含有图片和文字在内的小矩形模块，它是用户了解更多细节信息的「入口」。要平衡界面的美学和可用性，卡片基本是一个默认选择。因为卡片用起来非常方便，还可以展示包含不同元素的内容。卡片示例。图片来源：Material Design1. 完美的拟物在用户界面加入卡片设计可谓完美的拟物，因为它们看起来就像日常生活中真实存在的卡片。其实早在手机设备出现之前，卡片就已经存在了，比如名片、棒球卡、扑克卡等等。当今，卡片可谓是目前使用较广泛的一种交互模型。因此，对用户而言，其更能凭直觉认识到，这些卡片就代表真实生活中的某物。此外，就小故事推广而言，卡片也是非常棒的选择，棒球卡就是一个典例。你所需要了解的某运动员基本信息都显示在小卡片的正反面。每张卡片都代表一个棒球运动员。图片来源：liveauctiongroup2. 内容架构卡片将内容划分成多个有意义的部分，这样还节省了一定的屏幕空间。类似于「字词句段篇」的组成形式，卡片也是由最小信息单元组成，并汇总形成连贯的整体内容。卡片组成示例。图片来源：Material Design像 Facebook 这类大企业，其采用卡片驱动型的界面用于台式桌面、手机网页及 app 客户端时，卡片布局就被认作设计环节中的核心了。Facebook 充分利用了盒子风格的设计（即卡片----译者注），将信息归类，哪怕是在怎么也滑动不到底端的页面上。3. 视觉享受基于卡片的设计通常主要依靠视觉设计，而使用大量图片就是卡片设计的一大亮点。研究发现已证实，图片可以提升网页或 app 的整体设计，因为图片可以快速有效地吸引用户的注意力。所以，加入图片也使得基于卡片的设计更加引人入胜。比如 Dribble，一个面向设计师等创意类作品的人群，提供作品在线服务，供网友查看的交流类网站。要展示这类内容，基于卡片的设计是再合适不过的选择了。二、如何设计卡片在同一页面布局中，卡片宽度应保持不变，但高度可以相应调整。卡片最大高度限于该平台可用空间的高度，但也可以临时延伸。例如，在显示评论框的时候。卡片高度既可固定，又可调整。图片来源：Intercom从设计角度来看，卡片各角最好是圆角，并且最好稍有一点阴影。圆角使卡片看起来更像一个内容块，阴影则可以反映出深度。圆角和阴影。图片来源：Material Design这些元素在没有分散用户注意力的前提下，能给设计带来一些视觉亮点。另外，还能给人一种卡片像是要从页面中跳出来的感觉。除此之外，还可以加入动画和动效。图片来源：Behance三、卡片的优势设计恰当的话，卡片可以提升 app 的用户体验感。因为其功能性以及外形的原因，它们成了用户界面的一个增值元素，对用户来说，也更能凭直觉交互。1. 易于理解的形式卡片是一个可以装入任何内容的设计盒子。将不同内容置于卡片之中，可以方便用户理解。这样一来，用户可以轻松了解其最关注的内容。这也使用户可以通过各种方式来交互。包含不同内容形式的卡片集。图片来源：Material Design2. 响应式设计以及移动界面设计关于卡片，最重要的是它们基本上极度容易被掌控。不管在台式桌面还是手机客户端，加入卡片设计的效果都非常好，因为内容可以通过更易理解的卡片呈现给用户。就响应式设计而言，它是不错的选择，因为以内容盒子呈现的卡片可以方便地扩展或收缩。最后，加入卡片，在跨平台设备上设计出统一的美感也就不会步步维艰了。这也是为什么通过卡片可以在不同设备上轻松设计出相同的用户体验感。3. 设计时不要忘了「心中的拇指」卡片是为拇指而设计。这句话听起来好像卡片是专为 app 设计的一样。手机 app 设计可作为卡片普及的一个核心部分。数字卡片其实和实体卡一样，它还可以给用户带来舒适的体验。用户也不必太关注于这些到底是怎么做到的。他们就喜欢卡片的简单，并可凭直觉了解相关物理性，比如如何翻转卡片以获取更多信息，或者左右滑动以获取其他卡片信息。设计的时候一定要思考用户会如何使用他的拇指在界面上交互。所以，界面内容的大小一定不要让用户在交互时感到不适。----译者注左右滑动。图片来源：Dribble卡片手势也应该一并考虑并置于卡片集内。在同一页面尽量减少滑动手势的数量，这样就可以减少互相重叠的可能性。比如，可滑动的卡片不应该包含可滑动的滚动图片，这样就能保证在滑动卡片时只出现一次交互。向下滑动。图片来源：Dribble四、何时使用卡片1. 信息流卡片以信息流形式呈现，制造了一条自然的事件时间轴。想想 Facebook 如何通过卡片防止用户快速扫览新闻动态里最新事件，错失重点。Facebook 的信息动态（News Feed）是一条无穷尽的信息流，而卡片则是独立的信息流集合。卡片的作用就在于分散信息流，它们将事件从无穷尽信息流中分离出来，打包后再共享出去。2. 发现卡片可以使相关内容自然地呈现出来，让用户发掘其自身兴趣所在。下图中 Tinder 的卡片，向左或向右滑动，系统就会自动推荐可能入你眼的人。Pinterest 在内容架构方面通过图钉将页面设计成类似 masonry 的动态布局，以吸引用户进一步浏览。注：Masonry 是一个对系统 NSLayoutConstraint 进行封装的第三方自动布局框架，采用链式编程的方式提供给开发者 API。上面两个示例有什么共同之处吗？他们将信息从功能中分离出来，使其与当下情景相关。3. 对话因为卡片是内容盒子，所以把它们用作行为号召再适合不过了。卡片最主要的行为其实就是卡片本身。比如苹果设备上的 AirDrop 功能，当收到数据传输的接收请求时，带有通知的卡片会自动跳出，让用户选择接收或拒绝数据传输。无论是哪个选项，你只需要操作一次。图片来源：Apple4. 工作流程利用卡片，还可以简单地将一堆任务归类。要说很好的案例不得不提 Trello。在 Trello 看板界面可以添加很多卡片，每个卡片都代表独立的一项任务。五、不适用卡片的情景1. 同类内容对于不需要太多用户交互的同类内容，不推荐使用卡片。可快速扫览的列表（或栅格）则是比较合适的选择。左图中，卡片会分散用户注意力，阻碍用户快速扫览。图片来源：Material Design在图片集或相册中，也不推荐使用卡片。展示图片集，栅格本身就是简洁轻便之选。下图是一个示例。左图：图片中加入卡片。右图：直接使用栅格视图。图片来源：Material Design2. 大屏幕基于卡片的信息设计可能在小屏幕上非常适用，但若在大屏幕上，就会感觉像一个无法辨识边界的杂乱组合。从视觉角度来看，看起来还不错。但一些客观指标方面，比如阅读速度或阅读理解方面，就显得十分差劲了。下图是大屏幕上的 Pinterest 页面。3. 再设计现有 app熟悉并认为某个 app 简单易上手的用户，可能会一时不太愿意接受新的视觉逻辑。一定要从用户角度出发，了解其需求。知道他们的需求后，再可以通过设计测试逐渐地再设计现有 app，到时候你就能看到变化了。结束语通过这篇文章，我希望各位读者能明白为什么卡片设计越来越流行。我也相信，卡片设计在短期内还暂时不会被淘汰，毕竟卡片是设计持续用户体验最灵活的布局之一。现如今，用户希望快速地发现有用信息，无论在什么设备上，卡片的反馈总是很好。而且较好的用户体验永远都是「以人为本」。本文来自babich.bi，原文标题为《Using Card-Based Design To Enhance UX》，作者：Nick Babich。
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量6264点击量5827点击量3718点击量3399点击量3255点击量3042点击量2985点击量2932点击量2816
&2016 Chukong Technologies,Inc.
京公网安备89