长兴网站建设:如何在UI设计中使用颜色明智地创建一个完美的UI界面?

2019.07.25 mf_web

120

UI设计中的色彩是整个UI界面和品牌个性的灵魂。如何采用明智的配色方案来创建完美的UI界面设计?

每当发现一个看起来漂亮,干净和优雅的界面时,我就保存它。现在我有100多个UI界面的集合。在学习,利用或一次又一次地查看之后,我终于意识到了一些共同点。在第一眼看来,总是那种偷走我心灵的颜色。所以在这里,我想明智地说明如何在UI设计中使用颜色。首先,我写的内容并不能让你成为一个出色的UI设计师,但我保证你会在这里学到一些东西。如果这确实有用,请给我留言。

1.色彩的神奇力量

颜色可以说话,就像语言一样强大。你不能争论我。无论何时遇到网站或产品,回想一下,视觉外观在很大程度上取决于颜色,总会给您留下第一印象。

那么,实际上可以做什么颜色?

1)体现品牌的个性

颜色可以设定品牌或产品的基本色调,情绪,内涵和概念。CCICOLOR进行的一项研究表明,用户只需90秒即可在线估算产品,其初始视图判断的62%至90%是基于colorscheme。

2)实现更好的用户体验

正确选择颜色可以支持更好的信息可读性。此外,它可以大大提高可用性,例如强化呼叫动作,增强导航,激发直观交互,满足审美需求和视觉解决方案。总之,要创造出满足用户需求的清晰和谐的风格。

3)影响购买决策

根据Kissmetrics的说法,产品的视觉外观是影响消费者购买决策的关键因素。此外,QuickSprout的研究表明,所有产品评估中有90%与颜色有关。如今,许多公司将色彩,尤其是UI设计中的色彩,作为其营销策略之一。

2.关于颜色的基本概念

从长远来看,每种颜色都具有独特的意义和内涵。阅读每种语言的含义,请看这里。

颜色的含义

3.明智地使用颜色

1)在正确的使用模式中选择正确的颜色

我们不能说颜色是“看起来很糟糕”,只有你使用它错了,那么它可能看起来很糟糕。想象一下,如果麦当劳使用灰色和黑色而不是黄色和红色,你仍然有饥饿的胃口?女性在聚会上穿黑色礼服和红色唇膏,为什么?

看起来性感迷人,就是这样。

不同的颜色传达不同的含义和感官。明智地使用它意味着点击5“权利”:在正确的时间,以正确的使用模式,与合适的用户选择正确的颜色,并瞄准正确的目标。

如果你想在UI设计中明智地使用颜色,请注意上面的图表,我很认真。除非你想承担一个独特的风险。

 颜色 - 红 - 黄

2)注意蓝色

为什么谈论蓝色?

只需看看您最常用的应用程序或网站,Facebook,Twitter,微软,Safari等。那里有什么?是的,你会看到,它们都是蓝色的。各种蓝色。

根据研究,蓝色是女性和男性都喜欢的头号颜色。蓝色就像无处不在,在自然界,网站,衣服等等。当我输入文字时,我看到Microsoft Word的界面是蓝色的。

蓝色绝对是一种安全的颜色,可以培养用户的信任并被接受,蓝色是UI设计中颜色的典型例子。如果你没有更好的选择,只需使用蓝色。

颜色蓝色

3)背景和元素之间的颜色变化

看看以下界面:

颜色的变化

不管它再次变成蓝色,让我们专注于变化。主题颜色为蓝色,其他元素为较暗的颜色变化和较亮的颜色变化。但总的来说,它们看起来很好,很和谐,并且彼此合作。

怎么做?

只是一个简单的黄金法则:

“通过降低亮度和增加饱和度来实现更暗的颜色变化。通过增加亮度和降低饱和度来实现更明亮的色彩变化。“

这与其他人所说的相呼应,你可以从源头上检查这个出色的观察结果。

4)颜色比例的黄金比例 - 黄金(6:3:1)规则

在进行UI界面设计时,您无法完全摆脱颜色组合。在UI设计中结合颜色很容易,但如何避免混乱和过载?如何摆脱平淡并保持精致?

请记住以下两个原则:

首先是:6:3:1规则

60%+ 30%+ 10%原则是达到颜色平衡的最佳比例。这个标准可以通过培养平衡,整洁,和谐的界面,为用户带来愉悦而完美地发挥作用。此外,它可以让用户的眼睛轻松地从一个点移动到另一个点。

第二种:最多3种原色

此规则符合The Golden(6:3:1)规则。这也是避免混乱并在配色方案中保持平衡的好方法。

颜色比例

5)颜色组合和补充:清洁和眼睛友好

提供和谐的配色方案至关重要?有几个因素需要考虑:

首先是Tints,Shades和Tones

基于“色调”,您可以在色轮上创建许多不断变化的变化。有一个技巧:添加白色然后你可以得到一个提示,黑色为阴影,灰色为一个色调。在这里,我建议使用单一配色方案。

第二,对比

颜色对比度也是UI设计中实用的颜色方法。对比可以唤起用户的各种情绪反应。色轮两侧的颜色可以产生最强烈的对比度,如黑色和白色。强烈的对比可以吸引用户的注意力和紧张感; 浅色对比可以带来舒适感,并通过展现轻松休闲的设计。

小心不要将其堆放,否则会给用户带来麻烦和困惑。

颜色对比

6)黑色,白色和优雅

黑色是所有中性色中最强的,而白色是最常用的背景色。如上所述,这两者是最大程度的色彩对比度。正确采用黑色和白色,可以创建一个看起来优雅的UI界面。这种配色方案主要用于网站。黑色可以给人一种精致的感觉,白色空间可以营造出自由和想象力。

颜色 - 白 - 黑

7)从自然和艺术中获取灵感

自然和艺术是色彩灵感的主要来源。只要到户外,看看天空,你会看到最多样化和自然的蓝色。自然色彩是营造用户友好和自然感的最佳选择。从大自然中提取颜色可以减轻用户的注意力,并为他们带来美丽的神奇力量。艺术是大自然的直接反映,所以只需充分利用它。

彩色的,性质

8)颜色知道性别

就像这样出生,女人不喜欢灰色,橙色和棕色。他们喜欢蓝色,紫色和绿色,而男人则不喜欢橙色,紫色和棕色。男人喜欢蓝色,绿色和黑色。如果你做一个紫色的运动设计,这绝对是一场灾难。请记住,每当你瞄准男性时,选择传达男性的颜色。同样,使用女性颜色来做女士们主要使用的设计。

还有一个,粉红色不是普遍喜爱的女性颜色!

颜色性别

4.工具和模板

工具和任何有用的东西都可以让事情变得更容易。在这里,我选择了一些最好的UI设计工具来选择调色板。在UI设计中采用颜色时,它们可以节省大量时间。

1) Coolors.co

Coolors.co是一款专业的颜色选择器。它允许您锁定所选颜色并按空格键以生成调色板。您还可以上传图像,然后从中制作调色板。Coolors.co还为您提供修改参考点的选择器。

Coolors.co

2)Mockplus

Mockplus是一个做UI界面设计的智能工具。您可以使用漂亮的布局和界面直接导入所有类型的示例项目和模板。最酷的是你可以使用常用的功能页面模板快速构建一些特定的页面,包括主页,登录/上页,设置页面,帮助/关于页面,搜索页面等。此外,颜色选择器内部和各种属性允许您创建理想的UI元素。

 Mockplus

3)Paletton

Paletton是一种很好的颜色选择工具。它有点类似于库勒,但好的是你可以使用超过5种音调。当您选择原色并想要生成额外的色调时,此工具特别有用。

 Paletton

4)检查我的颜色

它是一种工具,用于检查所有DOM元素的前景色和背景色组合,并确定它们是否在有颜色缺陷的人看到时提供足够的对比度。

Checkmycolor

5)Mockplus iDoc

Mockplus iDoc是一款面向设计师和工程师的强大产品设计协作工具。它超越了设计工作流程,帮助团队完成设计。

它通过从Sketch,PS,Adobe XD获取设计并将其导出为可轻松生成代码片段,规格,资源,样式指南,交互式原型等的格式,极大地方便了切换。在Mockplus iDoc上传设计后,它将会自动从设计中提取颜色并将其组织成样式指南。

渐变色 - 应用程序 - 设计 -  IDOC图像

注意:请记住可用性就是一切

明智地在UI设计中使用颜色可以创建华丽的UI界面,但创建华丽的UI界面永远不是最终目的地。实现优秀的用户体验目标,使用户的生活更加快乐是关键。因此,从UI中颜色选择和使用的角度来看,设计师应该始终记住界面应该是高度可用和清晰的。以用户为中心可以做什么和不能做什么应该总是带来重量。

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP