FBI warning
一直在撸力

UI配色如何更和谐?这8个实用技巧告诉你!

今天给大家推荐的干货文章从7个方面阐述了我们在构建配色系统时需要注意的小技巧,非常精炼和实用,希望能给大家带来一些新的思考~

色彩对任何界面(以及排版和空间)来说都是非常重要的部分,它会对数字产品的整体感知产生巨大的影响力。而配色结构也同样重要,如果没有合理地组织颜色,我们将会被各种杂乱的色彩淹没。

那如何才能建立一个统一的颜色系统呢?

以下是在一个新的设计项目中构建配色系统的七个实用技巧:

1.进行界面统计

界面统计是对APP或网站的组件进行分类的过程,它可以帮助我们了解在产品中使用了多少种颜色和元素。

如果我们设计的是网页产品,可以使用CSS Stats这样的工具来查看样式表中有多少种独特的颜色。

如果是在Sketch中统计界面目录,可以使用Sketch-Style-Inventory(https://github.com/getflourish/Sketch-Style-Inventory?ref=uxplanet)插件统计所有的颜色,还能够合并相似的样式。

对于现有产品,我们建议检查每种颜色在代码中的实际使用次数。这样做可以帮助我们了解到颜色在不同的地方的使用情况,以便更好的组织色彩系统。

2.让品牌色彩成为基础

如果我们在为一个知名品牌工作,那么一定会有一个标志性的品牌色彩。

-不要为UI设计修改品牌颜色

在为已经拥有品牌色的产品设计时,最重要的是我们不能在品牌色彩上进行创新,因为这样做会偏离品牌的指导方针。

那应该如何做?

-尝试在设计结构中使用品牌颜色。

我们可以尝试在UI元素中体现品牌颜色,如页眉、页脚、菜单等等。

如果我们的品牌颜色适用于浅色或深色背景,也可以将其用作设计的布局颜色

3.定义基本颜色

在确定基本色彩时,我们最好不要选择极端的颜色,如纯白色(#FFFFFF)或纯黑等。并且根据对配色系统的需求,我们可能需要一系列的浅色调或深色调,如果选择太多的色彩和色调的话,会让设计师在选择颜色时更加困难。

-寻找低对比度的中性颜色

虽然低对比度的中性颜色对于需要读取的元素来说不太友好,但对于输入字段这样的元素来说绝对是最佳搭配。因为输入字段并不需要太突出,所以低对比度的中性颜色可以帮助我们创建一个完美的UI容器。

-限制基本色的数量

理想情况下,我们应该有少数经过认可的基本色(1-3种品牌色)和足够数量的强调色。

4.定义交互的颜色

交互配色是用于交互元素的颜色——按钮、链接和用户可以单击或触摸的其他UI控件。

-限制交互颜色的总数

如果可能的话,尽量只使用一种颜色作为主要的交互颜色,因为这样可以让用户加深对这种颜色的记忆。

与此同时,我们还可以创建交互颜色的浅色和深色版本。颜色的深浅可以帮助我们为UI元素传达不同的状态——例如,按下状态/悬停状态。

-争取一致性

对于用户来说,颜色是非常好的导航工具。在链接和按钮中使用相同的颜色可以帮助用户识别交互元素。

5.定义色彩

有动机的色彩才是有意义的配色。在产品中我们需要为错误、警告和成功等状态设置颜色。

-错误状态的颜色

我们经常会使用红色部分来表示错误状态。但如果我们的品牌颜色碰巧是红色,那么最好避免将其用于错误消息。为什么?因为这样做会让用户把你的品牌颜色和问题联系起来。

-成功状态颜色

绿色通常表示成功状态,如果我们的品牌色是绿色,那么用它来表示成功状态绝对没问题,因为用户会把你的品牌颜色和积极的结果联系起来。

-限制动机色彩的数量

在理想情况下,错误状态和成功状态都只有一种颜色代表。所以我们需要确保这两种颜色都适用于低对比度和高对比度的背景。

-禁用状态颜色

设计师们通常会使用低透明度色彩来代表禁用状态。这里我们应时刻注意颜色具有足够的对比度,以便用户能够阅读。

6.明确的命名约定

如果要将色彩保存在设计系统中,我们一定要为使用的每种颜色给出清晰且易于理解和记忆的名称,以方便设计人员和开发人员能够轻松地引用系统中定义的特定颜色。

与此同时,我们还要尽量避免使用层次性的形容词(如浅蓝、深蓝),而是使用功能名称——根据UI中的位置来描述颜色名称。

7.可访问性

-检查颜色对比

下面是一些检查色彩对比度的工具合集,大家可以根据需要选择。

https://uxpro.cc/toolbox/accessibility/color-accessibility/

8.测试你的调色板

虽然在某些情况下,修改现有颜色不会产生任何问题,但一旦出现错误,就有可能会破坏整个UI,所以我们必须仔细测试用于UI的配色方案。

现在可以使用一些工具(https://uxpro.cc/toolbox/web-design/visual-regression-testing/)来实现此目的,但手动测试可以获得更好的结果。

最后,如果你仍然对构建配色系统感到无从下手,也可以参考下面的实用配色工具合集:

https://uxpro.cc/toolbox/visual-design/colors/

未经允许不得转载:滄老师 » UI配色如何更和谐?这8个实用技巧告诉你!

分享到: 更多 (0)

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活