得益于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的定义，却没做出谷歌商品的感觉。颜色鲜艳而明亮，同时卡片在某种程度上却很简单和不清楚。图标、文字和链接中都有鲜艳色彩，所有这类暗示，都在引导用户在网站上进行操作。 关于卡片式界面设计有一种批判的声音，它使各种元素看着过于相似了所以需要挥洒创意、打破陈规。总结 色彩正是让卡片式设计独具一格的原因。选择所用方法时，要考虑色彩怎么样最好地与品牌相结合，并为用户服务。 要产生最好成效，就要携带特定目的运用色彩，通过设计吸引用户，促进他们采取行动。无论是用浅色还是深色，或者是鲜艳色彩和时尚混搭，色彩都能影响用户对于设计的感知和操作方法。
