如何开发网站、电子商务或应用程序配色方案

开发网站、电子商务或应用程序配色方案

我们分享了很多关于颜色对品牌重要性的文章。 对于网站、电子商务网站或移动或 Web 应用程序,它同样重要。 颜色对以下方面的影响:

  • 对品牌及其价值的初步印象——例如,奢侈品通常使用黑色,红色暗示兴奋等。
  • 购买决定 – 品牌的信任度可能取决于颜色对比。 柔和的配色方案可能更加女性化和值得信赖,强烈的对比可能更加紧迫和折扣驱动。
  • 可用性和用户体验—— 颜色有心理作用 以及生理影响,使导航用户界面变得更容易或更困难。

颜色有多重要?

  • 85% 的人声称颜色对他们购买的商品有重大影响。
  • 颜色将品牌认知度平均提高 80%。
  • 颜色印象占产品接受或拒绝的 60%。

在确定网站的配色方案时,随附的信息图中详细说明了一些步骤:

  1. 原色 – 选择适合您的产品或服务能量的颜色。
  2. 动作颜色 – 下面的信息图中缺少这一点,但确定主要动作颜色和次要动作颜色非常有帮助。 它教育您的观众根据颜色关注特定的用户界面元素。
  3. A其他颜色 – 选择额外的 互补的颜色 你的原色,理想的颜色是你的原色 流行的.
  4. 背景颜色 – 为您网站的背景选择一种颜色 – 可能没有您的原色那么激进。 还要记住黑暗和光明模式......越来越多的网站在明亮或黑暗模式下采用配色方案。
  5. 字体颜色 – 为将要出现在您网站上的文本选择一种颜色 – 请记住,纯黑色字体很少见,不推荐使用。

以我公司为例 Highbridge 为一家服装制造商开发了一个在线品牌,该制造商希望建立一个直接面向消费者的电子商务网站,让人们可以 网上买衣服. 我们了解我们的目标受众、品牌的价值,并且——因为该品牌主要是数字产品,但也有实体产品——我们专注于在印刷 (CMYK)、织物调色板 (Pantone) 以及数字(RGB 和十六进制)。

通过市场研究测试配色方案

我们的配色方案选择过程非常紧张。

  1. 我们对目标受众进行了一系列原色的营销研究,将我们简化为单一颜色。
  2. 我们对目标受众进行了一系列二级和三级颜色的营销研究,并在其中缩小了一些配色方案。
  3. 我们制作了产品模型(产品包装、颈挂标签和吊牌)以及带有配色方案的电子商务模型,并将这些模型提供给客户和目标受众以获取反馈。
  4. 因为他们的品牌在很大程度上取决于季节性,所以我们还在混合中加入了季节性色彩。 这对于广告和社交媒体共享的特定集合或视觉效果非常有用。
  5. 在确定最终方案之前,我们经历了六次以上的过程。

closet52 配色方案

虽然品牌颜色是浅粉色和深灰色,但我们开发了 动作颜色 成为绿色的阴影。 绿色是一种以动作为导向的颜色,因此它是一个很好的选择,可以将我们的用户的注意力吸引到以动作为导向的元素上。 我们为我们的次要动作加入了绿色的倒数(带有白色背景和文本的绿色边框)。 我们还在悬停动作的动作颜色上测试更深的绿色阴影。

自从我们刚刚推出网站以来,我们就结合了鼠标跟踪和热图来观察我们的访问者被吸引并与之互动最多的元素,以确保我们的配色方案不仅看起来不错……而且表现良好。

颜色、空白和元素特征

开发配色方案应始终通过在整个用户界面中对其进行测试以观察用户交互来完成。 对于上面的站点,我们还合并了非常具体的边距、填充、轮廓、边框半径、图标和字体。

我们为公司提供了完整的品牌指南,以便在内部分发任何营销或产品材料。 品牌一致性对这家公司至关重要,因为他们是新人,目前在行业中没有任何知名度。

这是带有配色方案的电子商务网站

  • Closet52 - 在线购买连衣裙
  • Closet52 系列页面
  • Closet52 产品页面

访问 Closet52

颜色可用性和色盲

不要忘记对网站元素之间的颜色对比度进行可用性测试。 您可以使用 网站可访问性测试工具. 通过我们的配色方案,我们知道我们将在未来解决一些对比度问题,或者我们甚至可能为我们的用户提供一些选择。 有趣的是,我们的目标受众出现颜色问题的可能性非常低。

色盲是无法感知非有色障碍用户可以区分的某些颜色之间的差异。 色盲会影响 百分之五到八的男性 (约 10.5 万)和不到 XNUMX% 的女性。

可用性.gov

WebsiteBuilderExpert 的团队将这张信息图和详细的随附文章放在一起 如何为您的网站选择颜色 这是非常彻底的。

如何为您的网站选择配色方案