卡⽚式⽹页设计排版布局案例讲解及技巧分享
卡⽚就是交互信息的承载体，通常以矩形的⽅式呈现。就像信⽤卡或者棒球卡，⽹页卡⽚以⼀个浓缩的形式提供了快速并且相关的信息。所有的卡⽚特点就是交互性。不仅仅是他们提供了信息，⽽且他们⽤另外⼀种委婉的⽅式去要求⼀次互动。卡⽚通常包括按钮或者发布到社交媒体的⽅法。卡⽚是简洁⼩巧的信息盒⼦。在界⾯设计中，要平衡界⾯的审美和可⽤性，卡⽚基本是⼀个通⽤选择。卡⽚这⼀设计概念最先被 Pinterest 和 Facebook 使⽤，接着是Google,Twitter等，⽽如今卡⽚的使⽤已经渗⼊了App移动应⽤及⽹页排版布局设计等各⾏各业。为了让⼤家能跟好的理解和应⽤好卡⽚式设计技巧，我们通过⼀些实战案例讲解。
Pinterest 引⼊卡⽚这⼀概念，基本可以将某主题相关的所有信息纳⼊⼀个信息盒⼦。
如果运⽤恰当的话，卡⽚可以提升 app 的⽤户体验。这篇⽂章介绍了 5 种卡⽚运⽤的最佳实践，并提供相关的实⽤案例。
01
-
遵循「⼀卡⼀概念」原则
卡⽚的所有内容只能和⼀个主题相关。⼀个卡⽚可以包含多种元素，但应该主要体现同类信息或内容。这样⽤户才能更轻松地选择他们所喜爱或愿意分享的内容。
⼀个模块（或卡⽚）「包含」⼀次⽤户交互。
02
网页app-
保证整个卡⽚都可点击
遵循菲兹定律（Fitts’s Law），要让⽤户可以点击或触击卡⽚的任何部分，⽽不只是⽂字链接或图⽚。⽆论在移动端的触击屏幕，还是需要⿏标操作的主桌⾯端，有相对⼤⾯积的触击区都可⼤⼤提⾼卡⽚的可⽤性。
AppSo（号 appsolution）注：
菲兹定律是⼈机交互领域⼀个⾮常重要的法则。其基本观点是，当⼀个⼈⽤⿏标来移动⿏标指针时，屏幕上的⽬标其某些特征会使得点击变得轻松或困难。⽬标离得越远，到达就越费劲；⽬标越⼩，就越难点中。
⼩提⽰：推荐使⽤⼀点阴影来呈现深度，让⼤家知道卡⽚是可点击的。
图⽚来源：nngroup
03
保证卡⽚的视觉享受感
要说什么样的卡⽚才是成功的，那必然是有良好设计和可⽤性的卡⽚了。对卡⽚稍加打磨，加⼊少许美学特征，卡⽚会让⼈感觉熟悉，同时创意⼗⾜。
图⽚来源：Piper Lawson
当开始动⼿设计卡⽚时，你应当特别注意以下⼏个⽅⾯：
//图⽚
基于卡⽚的设计通常主要依靠视觉设计，⽽使⽤⼤量图⽚就是卡⽚设计的⼀⼤亮点。研究发现已证实，图⽚可以提升⽹页或 app 的整体设计。所以，加⼊图⽚也使得基于卡⽚的设计更加引⼈⼊胜。
图⽚来源：Dave Gamache
//阴影和渐变
加⼊阴影和渐变这两种元素，可以有效地让⽤户将你设计的卡⽚与现实⽣活中的对应实物联系在⼀起。
但在设计时，⼀定要仔细思考如何运⽤这两种元素：如果卡⽚四周和⾓落都加上阴影，要再想让⽤户将它与现实⽣活中的对应实物联系在⼀起就有点难了。
带有圆⾓的卡⽚从视觉上看来就像是⼀张扑克牌。图⽚来源：Material Design
//排版
当然，要想吸引⽤户注意⼒，还可以通过排版来实现。卡⽚所有内容都应该简单易懂，不妨试试从最⼤可读性⾓度来设计：
选择简单的字体和易于阅读的配⾊⽅案（⽂本内容在纯⾊背景下，且背景颜⾊和⽂字颜⾊有鲜明对⽐的，这样的⽂本才是最清晰易读的）。
尽量控制字体的种类数量。对于绝⼤多数情况⽽⾔，单⼀的字体⾜矣。
⼩提⽰：卡⽚主内容⽂本，选⽤ sans-serif 字体正常粗细的效果⾮常好。
图⽚来源：maconprinting
04
-
限制卡⽚内容篇幅
卡⽚通常不⼤，其作为⽤户了解更多细节信息的「⼊⼝」，所以它本⾝不需要承载过多细节内容。当你试图在卡⽚⾥添加⼤量内容，导致卡⽚变得过宽或过长，那它就会失去其原有的「拟物」效果。
下图是⼀个采⽤基于卡⽚设计的⽤户界⾯⽰例。注意中间的卡⽚，它的问题主要是因为⼤量内容过多，以⾄于难以阅读。
图⽚来源：Piotr Adam Kwiatkowski
05
-
加⼊动画和动效
动画如果运⽤得好，可以⼤⼤提升⽤户体验。其可以帮助⽤户在基于卡⽚的界⾯中更好地定位，并建⽴不同卡⽚状态之间的视觉关联。
//视觉提⽰
视觉提⽰帮助⽤户更好地了解如何与界⾯进⾏交互。当需要向⽤户展⽰某些具体功能如何操作时，它就显得颇为有⽤了。
展⽰导航功能的提⽰。图⽚来源：Barthelemy Chalvet
//视觉反馈
视觉反馈在界⾯设计中相当重要，因为它能直接和⽤户的⾃然期望相关联。
在现实⽣活中，各种物品通常都会对我们的⾏为作出反应，这也是⼤众习以为常的反馈。⽐如电脑的开关按钮，当你按下开关键时，你可以感受到按钮被按下的⼒量反馈，同时还有声⾳反馈。
在电脑端，你可以通过「悬停效果」来显⽰相关元素的交互⾏为。悬停动画可以增加功能的可发现性，同时，也使⽤户体验更加有趣。
在卡⽚中加⼊悬停动画。图⽚来源：uxpin
使⽤悬停效果还可以激活更多选项。下图中，光标悬停后，⽤户可以进⾏颜⾊标记、回复、转发或删除当前信息。
图⽚来源：Roman Shkolny
//放⼤
放⼤可以呈现从原图到细节视图的过渡：⽤户选中卡⽚就可以直接看到相关详细信息。不过要注意，要确认让⽤户感觉他们仍在相同背景框架下进⾏交互。
动画可以将缩略图和细节视图相关联。图⽚来源：Charles Patterson
⼩结
-
卡⽚是界⾯设计领域创新型新元素。它不仅仅是⼀张卡⽚，它还是创造优质内容和设计最佳⽤户体验最
灵活的布局⽅式之⼀。⼀张卡⽚必须具有功能性、独⽴性，并且有可翻动性。不论你把薄饼烤的多么光滑，它依然有两⾯。查看卡⽚的需要注意的是：卡⽚有两⾯。并不是说卡⽚要有⼀个翻转动画，相反地说每张卡⽚呈现出的⼀个信息的概览，并且每⼀张卡⽚给你进⼀步参与的选择（可点击性）。⼀张卡⽚不仅仅是⼀条信息，它还总是可以让⼈去做更多。卡⽚是让你的设计更加全⾯、⼈性化、更有互动性的最好⽅式。它们⾮常值得你去了解、使⽤。
相关阅读
2018.03.22

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。