UI设计中如何用好明亮的颜色?

对平面设计师、UI设计师等从事视觉设计类工作的人来说,合理应用色彩是个不可或缺的关键技能。特别是随着扁平化设计和Material Design设计规范的日益普及,色彩理论知识也扮演着越来越重要的角色。

从娱乐设施到商务App和网站,明亮的色彩和渐变被运用在各种电子产品的界面上。然而对于明亮颜色对用户体验的影响依然存在一些争议。这篇文章就从优势和劣势两个方向出发,论述了明亮色彩在UI设计中的利与弊。

一、明亮色彩的优势

01增强可读性和易读性

在进行配色时,提升内容的可读性和易读性是设计的核心出发点。可读性是指用户获取内容的难易程度,易读性指用户识别特定字体的速度。

明亮色彩形成的鲜明对比,可以让其中的元素变得更突出,增强了可读性与易读性。然而,高强度的色彩对比也不总是好的,如果内容与背景的颜色对别过于强烈,会增强视觉压力,让文字变得难以阅读和浏览。这就是为什么我们建议设计师把内容和背景的对比设计在一个适中的位置,只有在需要强调的内容处使用高强度的对比。

Big City Guide

02明确导航和增强直觉交互

对任何一个数字产品来说,视觉层级是构建清晰导航和直觉交互系统的关键要素。多种UI元素被有机结合在一起,通过颜色等物理属性,构建出让大脑可以清晰辨识的内容。

色彩通过在用户心目中留下的不同印象,构建出了自己独特的色彩层级。红色和橘色属于浓重的颜色,而白色和乳白色则显得轻薄。明亮的色彩更容易被人感知,因此设计师通常把它们用于强调或形成对比。此外,把相同的颜色运用在不同的元素上,你会发现这些元素之间仿佛有了某种联系。例如你可以把购买按钮设计成红色,这样用户在需要下单的时候会更下意识的找到它(因为红色总是跟支出联系在一起)。

 

03增强辨识度

明亮的色彩能引起人类大脑强烈的反应,这也是为什么明亮的色彩组合会更容易被识别和记忆。相比于清淡的色彩搭配,颜色丰富的UI设计更容易被凸显出来。当然,这种设计方式要综合考虑到目标用户的喜好和市场调研的结果。

如果一个公司的logo或者品牌形象中有运用到鲜明的色彩搭配,那么把这个色彩搭配运用到公司的App或者网站设计上是个不错的方法。既可以为公司所有的展示渠道提供统一的视觉解决方案,又能提升品牌辨识度。

Book Swap App

 

04营造情绪和氛围

颜色可以影响人们的心情和行为,营造特定的气氛,传递特定的信息并促使用户做出期望的行动。人们会不知不觉对颜色做出反应。

一项名为色彩心理学的研究指出一旦我们的眼睛接收到一种颜色信号,大脑就会发出指令,让内分泌系统释放出一种可以调节情绪的荷尔蒙。精心配制的颜色可以营造出向用户传递特定信息的特定氛围,让用户不由自主地产生行为。例如,如果一个UI设计师需要设计一款与自然和园艺相关的产品,那么他很有可能会选择绿色或蓝色作为主色。这样用户一眼看过去,就能立即联想到这个产品是属于特定类别的。

Booking Service

 

05打造时尚的外观和风格

明亮的色彩和渐变引领着UI设计的主流趋势。现在你可以在各种各样的数字产品中发现它们的踪迹,即便是严格的商务风格也无法拒绝它们的魅力。

用户界面上明亮的渐变色可以体现出先进的科技感和新奇的创造力。根据潮流趋势而设计的移动App或网站通常看上去非常亮眼醒目,即使是在众多产品的激烈竞争中也可以轻松吸引用户的注意力。

Business Card App

二、明亮色彩的劣势

01难以进行搭配

如果你以为色彩的搭配主要取决于直觉和审美,那么你就大错特错了。如果你想设计出和谐的视觉体验,对于色彩本身以及色彩协同原理的基础知识是必不可少的。

在UI设计中,越是明亮明亮的颜色就越是难以搭配。为了给用户提供愉悦和舒适的使用体验,设计师需要尽可能让界面保持和谐。色彩调和是指设计中的色彩搭配可以最有力、最高效地迎合人们的感知。和谐的色彩搭配组合有助于用户对产品形成良好的第一印象。色彩理论中定义了几种基础的色彩搭配方案,这些方案被证明可以有效提升设计师的工作效率,包括:

1. 单色:在单一色值基础上调整明度和饱和度

2. 临近色:使用在色相环上位置相邻的两种颜色进行搭配

3. 互补色:使用在色相环上位置相反的两种颜色进行搭配,营造强烈的对比

4. 分离互补色:为主色选择2种互补色,互补色为相邻色;例如蓝色为主色,互补色是黄色,同时使用红色作为第2种互补色

5. 三色互补:三种颜色在色相环上间距相等,专家建议只选其中1种颜色作为主色,其他颜色作为辅助色。

6. 四色互补:选择色相环上的四种颜色,其中两两互补。四种颜色所处的位置连接起来可以构成一个矩形。

基础色相环

02难以把控风格

在UI设计中,浓重的色彩既能快速塑造出特定的产品色彩风格,也能轻易破坏之。一个作品里如果出现太多艳丽的颜色,主要的元素可能会被淹没在纷繁的色彩海洋中,无法凸显。这也是为什么我们都建议设计师在进行色彩搭配时选择6-3-1这样的比例。

画面主要部分的颜色至少要占到整体的60%,辅助色占30%,而最终奠定色彩风格的颜色不要超过10%。这样的比例可以让所有的视觉元素都得到合适的展示,为用户提供最预约的视觉体验。

03不一定适合所有用户群体

用户研究是产品设计的关键步骤之一。通过对目标用户的研究和分析,设计师可以了解到用户对产品的期望。不同的年龄、性别和文化背景可能形成不同的用户偏好。例如:在儿童时期,人们可能尤为喜欢黄色,而当长大成人后,对黄色的偏好就逐渐降低了。成年男性和女性普遍喜欢蓝色、绿色等冷色系,而与女性不同的是,男性通常更为偏好黑、白、灰这类无色相的颜色。

明亮的色彩也是如此。即使你在为一个娱乐型App做设计,你也要考虑到某些特定的目标用户。例如中年人通常喜欢清亮的用户界面,他们不太能接受屏幕上出现太明亮的颜色,这些颜色会分散他们的注意力。

 

04在移动端屏幕上反差过于强烈

就像我们前面提到的,明亮的颜色可以制造鲜明的对比,并以此来提升页面的可读性和易读性,同时还可以突出特定的界面元素。然而在移动端,页面空间有限,并且使用场景多种多样,过于强烈的对比可能会产生反作用。

当一个拥有强烈色彩对比的页面,搭配以狭小的屏幕,复杂的环境光和明亮的字体闯入用户的视觉时,会引起用户的不适。因此当设计师在页面中使用明亮色彩时,需要注意控制颜色之间的对比强度,让用户拥有一个良好的阅读体验。

Night in Berlin App

总结

颜色是设计师最有力的武器之一,同时,和其他设计元素一样,它有它自身的优势和局限。在使用颜色进行设计时,你需要进行综合和全面的考量,才能设计出实现设计目标的最佳方案。

 

 

原文地址:https://tubikstudio.com/bright-colors-in-ui-design-strong-weak-sides/

每天更新,
全站高品质素材免费下载!