卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些APP中也会看到很多的卡片式设计的案例，卡片式设计也是UI设计中最常用的方式之一。

最近在新项目的设计中也尝试使用了卡片式设计，结合实际项目中的得到了一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望自己通过本次的总结进行知识沉淀，以及跟大家一起探讨下卡片式的设计。

来源于日常

在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡……诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器中承载着内容，并且具有“便携性、信息简洁和相对独立性”。

UI设计中卡片的使用场景

在项目设计之初我分析了一些使用卡片设计的App，并且从中整理总结了几个较为常见的卡片式设计的使用场景。

Feed流

卡片式的feed流设计是一种非常常见的设计，早在前几年Facebook、Google+等产品就使用了这一方式，Feed流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确每一块的内容。

实际案例-淘宝微淘

瀑布流设计

瀑布流的出现让单屏区域内显示了更多的内容，而内容较多的情况下，使用卡片式设计较好的对内容进行了区域划分，让左右上下的内容从整体中具有相对的独立性。

实际案例-Pinterest

左右滑动组合型内容

卡片式设计具有较强的层次感，相比于拉通平铺更能呈现内容可滑动感受，并且块状化的设计让内容具有较高的区域分割感。

实际案例-QQ音乐

Tips提醒

作为非界面固定内容，卡片式设计可以让tips提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。

实际案例-淘票票会员提醒

结合手势的单块可互动内容

若页面中有且只有一个主内容，并且需要用户进行快速筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。

实际案例-探探首页

卡券类设计

卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。

实际案例-京东领券中心

集合型功能入口

集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。

实际案例-淘宝微淘关注账号
 

个人主页顶部内容卡片

个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。

实际案例-美团外卖会员

规则探讨

基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异性其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。

1.卡片的质感打磨

同样的卡片设计，不同的人做出来的感受可能会有差别，而表达卡片质感的主要关键基础点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的APP风格进行设计。

卡片形体

就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些IP人物元素可以更加深入的表达出具体的内容氛围。

投影深度

投影的视觉效果，会直接影响着整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例则可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是1:2或1:3，例如Y轴偏移10px，模糊度则设定为20或30px，这样成比例的数值出来的效果会较为自然，如下图：

卡片颜色对比

卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：1.卡片色与背景色不宜太过接近或使用同一颜色，因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降；2.深色背景上，尽量让卡片与背景色在同一色系或者明度不要差异太大，避免过于突兀。

2.边距的设定

在使用卡片式设计时，经常会纠结边距的设定，宽边还是窄边？多少像素更为合适？经常我会带着这种疑问去设计。 

基于内容的简单规则

卡片式设计作为设计的表现形式，最终是为了承载内容，因此边距的宽窄也需要依赖于实际内容的判断。结合我在项目中的尝试分享以下几点： 

多窄少宽

卡片内容较多是使用窄边距，让卡片具有足够的空间来展现内容，内容较少则可以考虑采用宽边距来打造整体的视觉空间感，如下图app store和淘宝的设计对比。当然这只是一个建议，实际还得具体问题具体分析。

再如一些瀑布流、宫格、横滑模块较多的APP的设计亦是如此，在内容较多的情况下会把边距压缩到最小的合理间距。

内外成比例

以最外边为基础值往里设计，间距以固定比例进行缩减，虽然没有删格来得规范，但也可以让设计变得有迹可循。

基于栅格

栅格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。在设定卡片式的边距时可以适当应用删格系统，让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。

4.卡片的标题设定

标题的设定主要考虑以下几点：1.是在卡片内还是卡片外；2.标题的字号设定多少更合适；3标题是否加粗？

卡片内或外的对比

在项目设计中让我较为纠结的是：标题应该在卡片内还是卡片外？通过了一些案例的尝试之后，我总结了一个规则（需要依据内容的形态而进行设计）：当卡片内容是独立的模块或模块中只有一个大标题时可设定在卡片内；当卡片内容是以组合呈现或者具有延续性内容时设定在卡片外，形成最外层的主标题。

标题的字号设定

标题主要作用为2点：1.简短说明每个模块的内容；2.让用户在长页面浏览中起到引导、定位的作用。通过一些尝试发现：1.当内容较少时，并不需要太大的字号即可起到标题的作用；2.当内容较多时，较小的标题字号则容易被沉入内容中，让用户在浏览的过程中难以发现，而导致信息获取缺失；3.标题应该与正文字号大小差异建议在6-10px，这样可以更好的拉开差异，让标题更具有标题感。

字体是否加粗

常规思维下我们都会对标题进行加粗，我在实际中的经验得到的总结是：需要看手机系统或不同厂商的机型。我在项目之初都对标题进行了加粗，但后续在跟进还原时看到的效果并不理想，特别是Android的机型上，因为我们使用的是系统默认字体，android系统很多字体并未对系统进行优化，而是使用微软雅黑，微软雅黑在android系统上再加粗，就会显得整个系统的外轮廓特别粗糙，最后我们依据不同的机型进行了差异化的选择。

4.圆角的规则

圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。

圆角的规则设定

以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则，而非随意根据“经验”进行设定。

圆角大小差异对比

大小的差异化呈现出不同的视觉感受和风格差异，我们在设计时更多需要考虑我们设计的产品风格或气质是适合大圆角还是小圆角，而非依据一些设计网站上的流行趋势。因此基于不同的风格或者实际内容场景下进行设定才更为合理。

5.宽窄间距对比

卡片式设计相比拉通式设计更需要考虑设计中的透气感。在常规的规则下，对内容边距及四周边距进行调整，让内容之间具有较好的空间呼吸感，从而让设计得到留白的效果。如下图对比案例，在基础删格不变的情况下，每个间距都在原有基础上扩大了12px（接近1.33倍），从而让内容具有较为舒适的宽度进行阅读

优点分析

选择某一种设计方式的重点在于我们了解这种方式的优点，并且可以把这些优点融合到我们的设计当中。在项目设计中，我总结了几点卡片式设计的优点。

优化模块化，提升内容区域感

模块化的设计也是我们日常中会应用到的方法，结合卡片式的设计可以让模块化的规则变得更加简单，增加了模块之间的可复用性和延展性。而当内容较多的情况下，使用卡片式设计可以有效直接的形成区域分隔，从视觉感知上就对内容进行了分隔，提升用户获取信息的效率。

提升内容独立性

在组合型的内容设计上，使用卡片式设计可以让每个小块内容呈现相对独立的展现特性，结合模块化的设计，可以在一大片关联的内容中，做到既统一又相对独立。

增强视觉空间感

卡片式的设计可以提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感。

增强视觉表现力

在设计中我们可以对卡片进行异形设计，用来达到我们想要的风格表现。当然在一个页面内尽量不要太多，尽量使用页面中的首个卡片进行差异化处理，让整体表现出一点不同即可。

增强可点性

卡片式设计产生的空间感，让每个模块更加突出，相比扁平式的处理方式，卡片式从视觉感官上会较为突出，从感官上更具可点击感知。

缺点及建议

任何一种设计方式都会有其利弊，最终选择某一种其实不过就是当下最适合而已，而在尝试中我也总结了几点卡片式设计存在的一些缺点，当然只是个人的思考而已。

横向空间利用率降低

卡片式设计的存在左右边距，因此在有限的屏宽内内容横向区域相比于拉通式设计有所减少，在内容较多的情况下可以适当调小卡片左右边距。

避免过多的层级

从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，其视觉层级相比拉通式更为丰富，因此不建议在卡片上再二次叠加块状式设计，避免造成层级复杂。在项目中也会遇到内容层级需要多层级的表现，从中总结了2种方式：1.利用不拉通分割线；2.利用浅色背景底色。

不适合长文或内容多的表达

若在设计上使用了卡片式的设计风格，但在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感，用户需要更多的专注于文字，这时候无边的体验更适合。

把握好界面的分区，避免过于拥挤的排版

卡片设计具有独特的视觉空间感，但卡片与卡片直接也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现。

最后总结

无论是卡片式或者拉通平铺的方式，其最终的目的都是为了服务于内容，我们在做设计的过程中只是选择适合于呈现我们内容的一种方式。根据具体的内容情况给出合理/合适的设计判断才是我们需要不断提升的关键点，切莫流于形式而忽略了内容设计本身的重要性。

原文地址：IDfor（公众号）

一、卡片是什么？

卡片通常是指那些包含一定图片和文本信息在内的一个长方形，作为指向更多详细信息的一个入口。现如今，在保证界面具有优秀可用性的同时，卡片式的设计甚至成为了平衡界面美学的默认做法。因为卡片很方便的显示出界面中的内容由不同的元素组成的。

1、杰出的隐喻效果

因为看起来如同真实世界中的卡片一样，在界面设计中的卡片具有非常棒的隐喻效果。其实，在移动设备出现之前，卡片已经遍布我们周身——商业名片、棒球卡片、扑克牌等等，它已然成为一个应用及其广泛的实体性质的交互模型。因此，对于用户来讲，他们能更直观地意识到界面设计中的这些卡片如同实体卡片一样都代表一定的信息。

在快速的传递信息时，卡片是一个优秀的工具。拿棒球卡片来讲，你需要了解的棒球运动员的基本信息就包含在一张小卡片的正反两面。

2、良好的内容组织

卡片在占用较少屏幕空间的情况下将信息有组织的划分到不同的区域中。类似于文本段落是对语句的组织结果，卡片聚集多样的信息形成一个连贯的内容体。

Facebook 充分利用卡片式的设计将每个事件的概要信息打包到卡片中。卡片式的布局设计正是在诸如 Facebook 这样的巨头的引领下变得流行开来。

3、视觉上赏心悦目

基于卡片式的设计通常都严重依赖于其视觉效果。而卡片本身又对图片有很强的依赖性。多项研究都已经指出图片确实能够提升网站或应用程序的设计效果和浏览体验，因为图片能够快速有效地吸引用户的注意力。因此，在卡片中如果能突出使用图片，那自然会对用户产生更强的吸引力。

不妨看看 Dribble——一个知名的专注于展示设计师作品的社区网站，不得不说，卡片式的设计确实是呈现这类信息的最合适的方式。

二、如何设计卡片？

在相同的布局下，卡片应该保持宽度不变，但高度可以不同。其最大高度受限于所在平台中可用空间的最大高度，不过这个高度也可临时扩展（比如，扩展显示出评论区）。

卡片可以是固定高度或可变高度

从设计美学的角度来看，卡片应该具有一定的圆角和阴影。因为圆角使得卡片看起来更像是一个内容块，而阴影则能体现出层级深度的效果。

这些元素在不分散用户注意力的前提下为设计增添了一些光彩，它们也使得卡片跟页面间看起来有层次感。

另外，我们也可以利用动画和动态设计。

三、卡片的优点

如果应用得当，卡片可以在一定方面提升应用程序的用户体验。因为它们的功能特性和形状，它们本身成为一种使用上更具直观性的吸引人的界面元素。

1、摘要性的格式易于消化

你应该已经知道现如今是一个内容为王的时代，而卡片几乎可以被用来容纳任何形式的信息，其摘要性的信息属性也易于用户快速消化。 就这一点而言，用户通过卡片可以很容易地访问到他们感兴趣的内容。进而让用户愿意参与到对卡片的浏览和操作中来。

卡片集包含不同类型内容的卡片

2、可面向响应式的设计

关于卡片最重要的事情是它们几乎是可以无限变形的。卡片式的设计在桌面电脑和移动设备都工作良好，因为它以更易于用户消化的方式向其呈现内容。正因为卡片作为一个内容容器，能很容易的放大或缩小，所以对于响应式的设计来说，卡片是一个非常合适的选择。 

最后但同样重要的一点是，卡片在多设备间能创造出一个一致独立的美学效果，这就是为什么它能在不同的设备间如此容易的创建出一致的体验的原因。

3、直观的可操作性

卡片的动作应该是面向手指的。对于移动端的应用程序来说，这是卡片之所以流行起来的一个关键原因。这些卡片跟实体的卡片按照相同的方式起作用，让用户感受到很舒服的体验过程。用户不需要再去思考究竟该如何操作卡片。 他们喜欢卡片的这种简洁性，并能够直观的理解出翻阅一张卡片就是查看更多信息，滑动则是切换不同的卡片。

四、在哪里使用？

1、信息流

卡片出现在一个信息流中时，便能够创建出一系列符合自然时间轴的事件。想想看 Facebook 在新的信息流中是如何使用卡片来描述一个事件概述的。虽然总的信息流是无底限的，但是每一个卡片都是互相独立，且包含了一定的可供操作的内容。

2、用于发现感兴趣的内容

卡片允许相关的内容不言而喻，允许用户发现他们感兴趣的内容。看看 Tinder 的卡片模式：你在向左滑动或向右滑动的时候，其实就是在寻找符合你品味的人。

Pinterest 在信息的动态中使用到大头针（用户找到自己感兴趣的内容可以收藏），吸引用户在不停的浏览中上瘾。

3、对话框

既然卡片就是一个内容容器，那么它们也可以很好的代表动作。一个卡片里面的基本动作就是卡片本身。 想想看 Apple 设备上的 AirDrop ，当你收到一个数据传输请求的时候，一个卡片会弹出来提示你是同意还是拒绝。

不管你选择哪一项，都只有一个动作

4、工作流

卡片很容易将一定范围的任务进行归类。拿 Trello 来举例说明再适合不过，从 Kanban 里面看，所有的管理项都是完全基于卡片的，每一个板子了都填充着卡片，而每个卡片都代表一个单独的任务。 

五、不要使用卡片的地方

1、同种（同类）内容

对于那些没有太多动作的同种（同类）内容而言，相比于卡片式的设计，使用列表（网格）的展现形式是更合适的方法。

左：在这里使用卡片分散了用户快速浏览的注意力

在图片库中使用卡片也是不必要的，此时采用网格这种干净轻量的方式会是更好的选择，如下例中：

2、大的屏幕尺寸

卡片式的信息展现形式可能在小屏幕上会非常不错，在大屏上的话单就其视觉效果来讲，也还是很棒，不过对于用户的阅读理解速度就会带来很糟糕的影响了。比如大屏上的 Pinterest ：

3、重新设计现有的应用程序

如果按着文中这个新的视觉角度来看，那些原本觉得你的应用程序还挺易用的用户可能就不会买你的账了。 你应该尝试从用户那里获得反馈，搞清楚他们想看到的东西。有了反馈后，你可以进行设计修改甚至重新设计，然后看看在用户那里带来的变化。

六、结论

我希望通过本文，你能够理解到为何卡片式的设计会越来越流行开来。而且我相信这一趋势在短期内不会消亡。因为卡片不光浏览起来不费力，它们更是在创建一致的用户体验时最为灵活的布局方式之一。现如今，人们在内容消费面前更注重快速的找到满意的内容，而卡片既然能很好的起到作用，且不受设备影响，难道不是很好的选择吗？

译自：https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb#.2uys07u81

原文链接：jianshu

上面所说的形式功能的组织与呈现其实讲的是设计排版上的问题，当然对设计师排版功力也有相当的要求。这种排版优化的方法有很多种，我这里主要围绕卡片式设计的理论进行深入探讨，相信大家对卡片式设计已非常熟悉，虽然已流行了好多年，但是设计形式并不是随着使用年龄的增长而消失，芝加哥学派路易斯.H.沙利文提出过：“形式追随功能”就能说明这一点。最近笔者在项目改版中也运用了相关卡片方法，发现效果不错，所以希望借在项目里的思考与尝试，抛出引子，供大家参考。

卡片式设计的定义

在生活中，我们经常接触到各式各样的类似右图中的卡片，比如扑克牌、名片、机场和地铁的指示牌等等。

如上图，大家可以看出，他们普遍具有以下特点：

一清晰直观，二简单易懂，三信息模块化。

比如扑克牌我们可以看出虽然只有一个图案，一组文字，但很清晰传达出这张牌所代表的含义；又比如机场和地铁的指示牌，采用了图标、字体元素，很清晰直观地引导乘客方向，这种由文字或图案组成的方块样式叫做“卡片式设计”。这种轻巧、简洁的实物设计也被慢慢应用到虚拟设计当中。

如上图，现在卡片式设计的应用场景非常广泛，最有代表性的是微软Win8、Win Phone 7的metro风格，他们也是采用了大量的卡片式设计，据说这种Metro的设计灵感也来自于机场、地铁指示牌。

另外google +、 google play等很多谷歌产品也同样采用了这种设计，如下图

正是因为卡片式设计在微软、谷歌的产品界面的大量运用，很多互联网企业也纷纷采用这种设计，这是应用在PC端的界面，内容部分也都采用了卡片式设计，如下图：

下图中的移动端的界面，模块中可点击部分也采用了卡片风格。

这是印刷类的杂志界面，如下图杂志里的部分展示信息，也采用了这种卡片式风格。

卡片式设计的优点

1.增强点击感

这是诺基亚手机的win phone系统（下图），系统桌面的所有内容都是一个个小方块展示，类似一个块状类的按钮，让人联想到是可以点击的操作入口，

而且每一块入口都是有区域大小（下图），从而避免造成误点击。

2.排版整齐

如下图，将信息、图像归类整合到一个方块里，清晰直观又避免页面因为信息多而散乱，卡片的排列方式是按列或者行的方式进行对齐展示，视线沿着横向或者纵向浏览能快速找到想要的信息，此外，这种固定大小的卡片方块也有利于栅格化排版。

比如下图，页面按5个单元进行栅格，利用卡片方块的展示，很轻松地计算并调整它的大小进行栅格布局

3.信息模块化

如下图，这是google now的一个界面，将信息、图像按维度分类整合到一个卡片里，能有效地避免信息散乱、同时避免信息分类不明确像这种模块化展示有效地减少用户思考的时间，能快速找到自己所需的信息。

4.响应式设计

卡片方块的高度和宽度的大小都是可以调整的，正是因为这种特性很适合用在响应式设计里，卡片在不同的平台展示，由于分辨率不同，卡片能自适应地展示，以上是卡片设计的优点。

项目实践

去年做了DNSPod的项目改版，尝试新的风格探索。如官网和控制台改版中，为了能让信息更好的整合、更好地发挥不同信息的作用、发挥不同信息的功能，这次DNSPod官网改版中，banner、快捷入口，业务信息以及售卖模块，也运用了卡片式设计的方法。

DNSPod管理控制台概览页

总结

在信息量大的页面中除了重视内容质量外，形式功能的组织与呈现也是同等重要，对提高用户获取有效信息的效率有着非常大的帮助，这时应用卡片式的设计方式是不错的选择。

原文链接：isux

得益于Material Design日益增长的人气，卡片式界面已经随处可见了。这种时尚且注重功能的美学，运用块状的设计元素承载多种多样的信息。如果想要利用这种多才多艺的手法，你的卡片设计必须别具一格。

色彩就是方法之一。优美的色彩选用、令人振奋的色彩搭配、和有趣的结合，能创造重点、提升易用性，并且吸引用户深入你的设计项目。

卡片式设计基础

要运用卡片来设计，有许多要注意，这些卡片会突出不同类型的数据（例如图片、文字、按钮、链接、评论、或视频），这些数据都关联到同一则信息。

这些可点击的区块，被设计成复古校园游戏卡牌的样式，其中一块区域包含了某种视觉信息，还有一小块文字或按钮。卡片风格界面的优点是，用户能很轻易领悟它们的用法，使得它成为大量内容或电商的理想方案。而且，它们易于浏览、适于分享、用途广泛。

图片来源：Urban Ministries of Durham

图片来源：The Clymb

要开始运用卡片设计，可以从学习卡片设计的基础开始，请看UX Pin的《2015-2016的网页设计趋势手册》。

你还得遵循《有效的卡片式设计完全指南》中的这7条最佳用法：

• 留白。运用足够的边界和边距来避免杂乱。
• 一张卡片一件事。卡片能简化你的网站结构。不要让每张卡片过于复杂，破坏了这层基础。
• 合适的图片。卡片中的图总是比较小，要确保图片清晰、裁剪得当，适合相应的场景。
• 简洁的字体。由于文字也很小，简洁的字体最易辨识。选用简洁优美的字体，避免使用装饰性字体。
• 发挥创意。付出额外的努力让它别具一格，使用诸如动画效果、视频、圆角、或新颖的配色。
• 使用开放的栅格。标准的栅格有助于保持间距一致，同时包容各种尺寸和断点。
• 贯彻菲兹定律。正如我们在《交互设计最佳实践》中所描述的，菲兹定律（同样适用于卡片）建议整个卡片都可以点击——而不仅仅是上面的文字或图片。这使得用户操作更轻松。

浅色与深色卡片

首先要面临的抉择，是使用浅色还是深色的配色。两种各有利弊；白色或浅色的配色最普遍，但深色在移动应用上正在变得流行。

图片来源：Dribbble

Dribbble的卡片很容易分辨、排列、和点击，让人了解某个项目的详细信息。它的设计在浅色背景上使用了白色的卡片，每张图片下方有个内容区域显示作品。浅色在桌面端表现尤其优秀，对于眼睛很友好。

图片来源：SB Joinery

SB Joinery则选用了深色的配色——在深色背景上使用反白文字——并在图片上叠加了颜色，让视觉重心停留在文字和幽灵按钮上。弹出菜单同样使用了深色主题。得益于粗字体和高对比度的色彩，深色风格的卡片易读性强，极其实用。

鲜艳的配色

卡片式设计的运用主要受Material Design的影响——好的影响。设计风格强调移动端的可用性，借扁平化设计和极简风格之所长，遵循一套用户日益习惯的美学风格和技巧。

这种风格吸收了鲜艳、高饱和的配色，从蓝色到绿色、红色。虽然不是一定要遵循这些色彩建议，但这是个好主意。加入大胆、明亮的配色，能够创造重点和顺畅的体验。

图片来源：Helbak

如何充分利用饱和色？

• 用在页头、按钮和行动指令元素上。
• 作为一种有含义的背景元素使用——例如不同类型的卡片使用不同颜色。（就像Helbak.的案例）请注意，即使是柔和色和浅色也能美妙地套用这种方式。
• 将色彩用于主要的文字元素，提升可读性。
• 用鲜艳的色彩叠加在图片上，或使用双色渐变的技巧来引导用户浏览卡片。

用于强调的颜色

最后，大胆的颜色选择，是一种强调特定元素的手段。例如，彩色元素能打破视觉单一，促进交互行为。

图片来源：Mayors Challenge 2016

The Mayors Challenge的设计充分运用了material design的概念，却没有做出Google产品的感觉。颜色鲜艳而明亮，同时卡片在某种程度上却非常简单和“不明确”。图标、文字和链接中都有鲜艳色彩，所有这些暗示，都在引导用户在网站上进行操作。

关于卡片式界面设计有一种批判的声音，它使各种元素看起来过于相似了——所以需要挥洒创意、打破陈规。

总结

色彩正是让卡片式设计独具一格的因素。选择所用技巧时，要考虑色彩如何最好地与品牌相结合，并为用户服务。

要产生最佳效果，就要带着特定目的运用色彩，通过设计吸引用户，促使他们采取行动。无论是使用浅色还是深色，或者是鲜艳色彩和流行混搭，色彩都能影响用户对于设计的感知和操作方式。

译文链接:http://colachan.com/post/3491

原文链接：https://studio.uxpin.com/blog/use-color-to-up-the-ante-on-your-ui-cards/

作者信息：
Carrie Cousins
Carrie Cousins has more than 10 years experience in the media industry, including design, editing, and writing for print and online publications. Carrie is also a sports fanatic and spends way too much time planning football and basketball trips and obsessing over stats.