使用颜色来提高你的 UI 卡片品质



部分归功于 Material Design 的日益普及,卡片式界面随处可见。这种时尚而实用的美学使用容器式的设计元素来保存各种信息。如果您想利用这种高度通用的方法,您的卡片需要脱颖而出。

一种方法是使用颜色。出色的颜色选择、令人兴奋的调色板和有趣的组合可用于创建重点、增强可用性并将用户吸引到您的设计项目中。

卡片式设计入门

关于使用卡片进行设计有很多知识需要了解,卡片可以包含与一个链接或一条信息相关的各种数据(如图像、文本、按钮、链接、评论或视频)。

这些可点击的容器旨在反映老式扑克或交易卡的外观,包括一个用于某种视觉效果的区域和一小块文本或一个按钮。卡片式界面的优点是用户倾向于轻松掌握他们的工作方式,使其成为聚合内容或电子商务的理想解决方案。此外,它们易于浏览,并且具有高度的共享性和通用性。

image01

图片来源:达勒姆城市部

image03

照片来源:攀登

要开始使用卡片,请先在 UX Pin 的“ Web Design Book of Trends 2015-2016 ”中学习卡片设计的基础知识。

您还需要遵循“有效卡片式界面设计完整指南”中的这七个最佳实践:

  • 负空间。使用足够的边框和填充以避免混乱。
  • 一张卡片,一个概念。卡片简化了您网站的结构。不要通过使每张卡片过于复杂来破坏这一点。
  • 合适的图像。卡片图像往往很小,请确保使用经过适当裁剪以适合使用位置的清晰图片。
  • 简单的排版。因为文本也往往很小,所以简单的排版是最易读的。选择简洁大方的字体,避免装饰性的字体。
  • 发挥创意。使用动画效果、视频、圆形框架或新配色方案等元素,加倍努力从人群中脱颖而出。
  • 使用开放网格。标准网格有助于保持相同的间距,同时尊重各种尺寸和断点。
  • 实施菲茨定律。正如我们在交互设计最佳实践中所描述的,菲特定律(应用于卡片)建议整个卡片都是可点击的,而不仅仅是文本或图像。这使用户的交互更容易。

光与暗卡

您必须做出的第一个决定是您更喜欢浅色还是深色配色方案。各有利弊;白色或浅色方案是最常见的,但较暗的颜色在移动应用程序中变得越来越流行。

image02

图片来源:运球

Dribbble 的卡片易于查看、排序和单击以了解有关单个项目的更多信息。它的设计在浅色背景下使用白色卡片,每个图像下方都有一个内容区域来展示作品。浅色方案在台式机上效果特别好,而且很容易养眼。

image05

照片来源:SB细木工

SB Joinery 选择了一种更暗的配色方案——在深色背景上使用反向字体——并在图像上使用有色叠加层来强调文本和幻影按钮的视觉效果。弹出菜单也使用这个较暗的主题。由于更大胆的字体和高对比度的颜色,这种深色卡片美学具有可读性和高度可用性。

明亮的配色方案

Material Design 对卡片的使用产生了重大影响——这是有充分理由的。设计风格强调移动可用性,借鉴平面设计和极简主义,遵循用户越来越习惯的美学和技术。

这种风格融合了明亮、饱和的色调,从蓝色到绿色再到红色。虽然您不必遵守这些颜色建议,但这个想法是个好主意。添加大胆、明亮的色彩元素可以强调并促进可用性。

image04

图片来源:赫尔巴克

如何充分利用鲜艳的色彩?

  • 用于标题、按钮和号召性用语元素。
  • 用作增加意义的背景,例如与不同类型卡片相关的颜色。(就像 Helbak 的这个例子一样。)。请注意,即使是柔和或浅色也可以以这种方式精美地工作。
  • 对主要文本元素使用颜色以提高可读性。
  • 用明亮的颜色覆盖图像或使用双色调技术来引导用户浏览卡片。

强调颜色

最后,大胆的颜色选择可以成为强调特定元素的好工具。例如,色彩元素可以打破视觉单调,增加互动。

图片00

图片来源:2016 年市长挑战赛

Mayors Challenge 的设计充分利用了材料概念,但又不像 Google 产品。颜色大胆而明亮,而卡片则有些简单且“未定义”。将它们放在一起是图像、文本和链接中的粗体提示,这些提示可以引导用户在网站上采取行动。

对卡片式设计界面的批评之一是元素可能开始看起来太相似了——所以玩得开心,跳出框框思考。


颜色可以帮助您的卡片式设计在人群中脱颖而出。在您选择使用哪种技术时,请考虑颜色如何最好地赞美您的品牌并为用户服务。

为了获得最大的影响,将颜色用于特定目的,并通过设计吸引用户并激发他们采取行动。无论您选择浅色还是深色,还是明亮的颜色和时尚的组合,颜色都会影响用户对您的设计的感受以及与您的设计互动的方式。


0