恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
别忽视黑白灰,它们比你想象的更重要(系列文章 01_04)
0.0°
2020-05-08 原创文章 经验/观点 举报 2400 4 4 0

这是我的色彩系列文章第四篇,上一篇文章是讲解“蓝绿紫”三种色彩,本篇是讲解“黑白灰”三种色彩,希望能给大家带来帮助。

目录

一、黑色

(一)黑色的定义

(二)黑色代表的意象

(三)黑色配色实例

(四)UI 设计中的黑色应用

二、白色

(一)白色的定义

(二)白色代表的意象

(三)白色配色实例

(四)UI 设计中的白色应用

三、灰色

(一)灰色的定义

(二)灰色代表的意象

(三)灰色配色实例

(四)UI 设计中的灰色应用

四、尾巴


正文:

本篇文章主要讲解黑白灰三种无彩色系色彩,也是色彩系列中继前两篇(红橙黄、蓝绿紫)之后第三篇讲解单色彩的文章,黑白灰三种色彩似乎总是以配角的形式出现,经常都是有彩色系的陪衬,但他们又好像空气般的存在,似乎不重要,但几乎所有设计又都离不开它们,当它们存在的时候你感受不到他们的存在,但当让你在完成视觉设计时不使用黑白灰,那你可能就无所适从了,下面让我们一起来掰扯掰扯黑白灰三种色彩。

一、黑色

(一)黑色的定义

下面这张图我们都比较熟悉,红绿蓝三种色彩(色光)加起来是白色,而品红黄青三种色彩(颜料)加起来是黑色,也就是我们在色彩系列第一篇文章中所说的加法混合和减法混合。

黑色的定义——没有任何可见光进入视觉范围所产生的色彩就是黑色,在这个定义之下的黑色是纯黑色,而我们常说在现实生活并不存在纯黑色,也就是在现实生活中很少有一个地方是完全没有光的,所以在本篇文章中我们要讨论的黑色更多是广义层面的黑色,也就是我们觉得它是黑色的黑色,这样说似乎很不负责任,但如下图由黑到白的渐变所示,可能谁都难以说清黑色与灰色的边界在哪,但总体上来说我们会有个大致相似的大家都相对认同的黑色区间,而我们要探讨的范围也就在这个区间内。

题外话

1、在这里我们探讨下为什么减法混合能够形成黑色?

我们先把颜料三原色的色彩构成分解一下:

1)青色=反射蓝色,绿色;吸收红色。

2)品红=反射蓝色,红色;吸收绿色。

3)黄色=反射绿色,红色;吸收蓝色。

那么当我们把青色、品红、黄色三种色彩(颜料)都加在一起时会发生什么?如上所示,青品红黄三种色彩(颜料)各吸收一种色光的三原色(红黄蓝),青品红黄这三种色彩(颜料)等比例加在一起就意味着他们把色光的三原色(红黄蓝)都吸收了,也就意味着你反射不出任何可见光了,自然面对就是黑色了。

备注:

人的视觉感光系统由四种感光细胞组成,即感知亮度的杆状细胞和感知颜色的锥状细胞,锥状细胞有三种,我们不妨称之为 R、G、B,每一种感光细胞能感知的光的频率范围是不一样的,对 R 感光细胞来说,它对红色频率电磁波最为敏感,如果此时有一束红色电磁波射入眼睛,那么就会激发 R 感光细胞,而 G 感光细胞、 B 感光细胞分别对应的绿色与蓝色,若电磁波的频率介乎于绿色和蓝色之间,则 G 和 B 两种感光细胞都会被激发,给我们青色的感觉。

(二)黑色代表的意象

依然从自然和人文两个角度出发进行分析。

  • 自然

黑夜:恐惧、神秘

黑洞:力量

  • 人文:

葬礼着装(西方):肃穆

高端系列产品用色:品质感

概念

意象:“意象”这个词分为两部分,主观的“意”和客观的“象”,以“红色”为例,红色是客观的“象”,但人类会把红色与某些情感联系在一起,而这些情感就是客观的“意”。

(三)黑色配色实例

就本文而言,我们不可能像之前两篇文章一样,对黑色按照色调进行划分再选出匹配的意象,但在配色实例这部分我们还是从意象出发,再搭配配色案例进行讲解,除没有色调部分其他一切照旧,下面我们将这些意象分为正向中性负向三个方向,开始我们的掰扯。

1、正向意象

  • 肃穆(释义:严肃而安静,形容气氛庄重。)

为什么黑色能够代表肃穆呢?黑色是明度最低的色彩,某种程度上,黑色也是视觉重量最“重”的色彩,山本耀司说“黑色是一切颜色的尽头”,可能是因为黑色吸收了所有的色光,而黑色本身的色彩情绪相对有彩色系色彩而言也没有那么多的变化,所以显得庄重而又严肃,如下图所示在迈克尔·杰克逊追悼会上人们统一着黑色西装以肃穆的气氛悼念一代巨星。

当然黑色的意象要与相应的内容相结合,单纯把黑色放在那,没有具体“象”的支撑,不同的人看起来传递的意象可能都是不同的,当黑色与特定的“象”结合时,才能更好地表意,如下图所示是安藤忠雄的光之教堂,通过使用清水混凝土、方正的桌凳等元素使得整体上的黑灰色加之象征基督教的“十字”传递出肃穆的感觉,而下图网页设计主体是以一个小孩和鱼在星空中畅游为主题的插画,有彩色的加入也让整个网页活泼了很多,虽然两幅作品都是以黑色为主基调,但二者传递的情绪是却是截然不同的。

  • 品质感(释义:产品给人的一种严谨、专业对待的态度。)

为什么黑色、白色、灰色都能够体现品质感或者说高级感,这里先卖个关子,在灰色部分会有详细解读。

黑色就像一个深沉的中年人,它有岁月的沉淀,却不轻易流露,不张扬的色彩情绪也为黑色增添了严谨、品质感等特质,经常出现在高端数码产品的配色当中,如下图所示的苹果网页设计,以黑色作为主色,通过将光打在 iPhone 7 侧面来凸显温润如玉的手机材质进而展现品质感。

高端智能手机的包装也经常使用黑色材质,如下图所示是 Smartisan T1 的包装设计,整体的黑色调也使得锤子科技的金色 logo 格外夺目,再加上从左上到右下的一道光,更为手机的展示增添了仪式感。

  • 力量(释义:力气,有份量。)

为什么黑色能够传递力量感,多半跟黑色的色彩重量有很大关系,像白色及其视觉重量较低的色彩可能就与力量感无缘了,如下图《墨攻》海报所示,海报整体是黑灰色基调,以黑云作为背景,骑着战马的将士作为主体,外加浓墨重彩的毛笔字体使得整体气势磅礴,力量感十足,除了在色彩上使用黑色以外,黑云、战马、毛笔字体等元素在凸显力量感上起到了至关重要的作用,你可以想象如果将士背后的乌云换成夕阳西下的火烧云,墨攻两个字换成蓝色或者其他色彩,那可能效果就完全不同了。

在使用黑色来传递力量感时,以黑色作为主色承托主角色常常能够很好的从整体上展现力量感,如下图所示是锤子科技 Smartisan OS 6.6.6 系统的网页设计,图一(原图)以黑底作为主色,使用红色(主角色)聚焦人们的目光,同上文《墨攻》海报数字 6 使用的也是刚劲有力的毛笔字,能够很好的传递 Smartisan OS 6.6.6 系统的“革命性”(是否真的具有革命性不是本文探讨的内容),当然我也试着把背景改变了一下,以蓝色作为背景,前后一对比,这种“力量感”、“革命性”似乎就不强了。

概念

主色:在画面上最大面积的颜色就是主色,可以影响整个画面的主题表达。

主角色:画面中优先级最高的部分使用的颜色。

摘自——《梁景红谈色彩设计法则》

2、中性意象

  • 神秘(释义:难以捉摸,高深莫测。)

黑色之所以能够传递神秘感多半是是因为“黑”,也就是没有光,在黑暗的情况下,自然不知道有什么,发生了什么,只能靠猜测,一旦靠猜测也就神秘了起来,如下图所示,女性的面容只露出了部分,剩下的部分就留给了观者想象的空间,也就神秘起来了。

奥迪的汽车海报也是同理,似乎你能看到一部分车身,但又看不到全貌,这种海报从营销上来说,也就制造了话题性。

3、负向意象

  • 恐惧(释义:人们在面临某种危险情境,企图摆脱而又无能为力时所产生的

担惊受怕的一种强烈压抑情绪体验)

恐惧是一种强烈压抑的情绪体验,是让你无法呼吸的感觉,而黑色是所有色彩中明度最低的色彩,也是视觉重量“最重”的色彩,这种重量感是连接黑色与恐惧情绪之间的媒介,且黑色意味着没有光,在黑暗的环境中你不知道周围有什么或者可能出现什么,这二者(视觉重量比较重与黑暗)的结合让黑色传递出了压迫感,如下图所示,两幅同样的图(内容相同)只是调整了一下色彩属性,整体的氛围就有了很大的不同,第一张图片的黑色基调整体比第二张图片在视觉上显得更重,图片较低的对比度及眼球上的高光与四周的昏暗环境之间的对比让恐惧情绪的传递十分到位,第二张图片亮度和对比度较高,让恐惧情绪相对淡化。

(四) UI 设计中的黑色应用

使用黑色作为品牌色的 APP 并不多,主要集中在强调个性的产品上。

  • 时尚购物

NIKE、Adidas

  • 影音视听

VUE Vlog、NOMO

  • 图书阅读

一个(one)、MONO

  • 居家生活

造作

你可以打开你的手机应用商店应用程序排行榜看看,使用黑色作为品牌色的应用程序寥寥无几,而以上使用黑色作为品牌色的应用程序之间的共性是注重设计、强调品质,当然我这里并不是说只有注重品质、强调设计的产品才会使用黑色作为品牌色,只是相对有彩色系色彩而言,黑色确实是个特立独行的颜色,这种特立独行也意味着与大多数人会有产生距离感,可能部分品牌需要这种距离感,但用户群体更广泛的产品更可能以色彩缤纷的形象示人,吸引人们去使用。

二、白色

(一)白色的定义

白色是什么?所有可见光加起来的颜色就是白光,白色(颜料或其他本身不发光的物体)会反射所有可见光,白色是明度最高的色彩,通常人们会认为白色是无色。

(二)白色代表的意象

白色是这样一种颜色,本身很重要,但大家似乎常常又不把它当回事,经常是以辅助色的形式出现,但当白色作为主角出现时也会非常惊艳,像穿着一袭纯白色婚纱的新娘肯定都会让我们印象深刻,那么白色又会传递哪些意象呢?

  • 自然

婚纱、百合:纯洁

能够反射所有可见光:明亮

棉花、羽毛:轻盈

雪:寒意

  • 人文

丧服(我国):悼念  

 (三)白色配色实例

1、正向意象

  • 纯洁(释义:比喻纯粹清白,没有污点,没有私心;)

因为白色在人们心中就是无色,以似乎不承载任何内容的形式出现,所以没有色彩能比白色更好地表现纯洁这个意象,如下图所示在蓝天的映衬下,一袭婚纱能很好地凸显新娘的纯洁无暇,而在花朵中白色的百合也是纯洁的象征。

那么在工业设计当中让我印象深刻的是如下图所示的 Smartisan T1、小米 MIX 2 全陶瓷版(白色)这两款手机,这两款手机除面板、摄像头以外的全白色设计十分惊艳,当然你说它们是不是都传递的是纯洁这个意象,我认为它们都可以传递出纯洁的意象,但这两种纯洁感仍是有差别的,T1 是前后玻璃加金属中框的方正设计,而 MIX 2 在圆角处理上相对温润,握持感也会更友好。

  • 明亮(释义:发亮或发光;光线充足;)

白色能够传递明亮意象的原因是白色不吸收光线只反射光线,相对其他色彩而言被反射的光多了,自然也就明亮了,如下图所示是室内设计的北欧风格所推崇的大白墙,整个屋子确实看起来很明亮,因为我家户型小一些,所以我装修的时候把家里所有的墙也都刷成了白色,目的就是除了让家里空间显得更大一些以外,也会让家居更好搭配,当然白色显得明亮也不全是优点,我们知道白色是膨胀色,如果一个胖子穿白色他就会成为一个明亮的胖子,身材胖一些的人在选择衣服色彩的时候建议不要选纯白。

  • 轻盈(释义:形容人或物(女子、蝴蝶等)动作、姿态轻柔优美漂亮)

白色能够表现轻盈有两部分原因,一是白色是所有色彩中“视觉重量”最轻的色彩,自然相对其他色彩而言显得轻盈;二是我们看到白色常常能够联想到羽毛、棉花之类的很轻的物体,而这种联想也就又赋予了白色轻盈的感觉。

那么在设计当中有哪些例子是利用了白色的轻盈呢?如下图所示的界面设计,我们可以从中感受到什么?明显图一的界面设计使用了大量白色的留白,而图二的界面设计也使用了大量留白,只不过留白部分使用的是紫色,界面二的大面积紫色留白相对界面一白色的留白而言就缺少了轻盈、干净的感觉,我这里倒不是说哪种风格更好,只是说大面积的白色留白在界面设计当中能够达到轻盈的效果。

  • 悼念(释义:对死者哀痛地怀念。)

在我国丧服的颜色都是白色,在上文中我们也谈到在西方人们都是着黑色衣装参加葬礼,在我国选择白色作为丧服肯定有历史的缘由,但我的考虑是无论黑色还是白色,相对我们正常人眼中五彩斑斓的世界都会显得有距离感,这种距离感传递的可能是洁白无瑕,也可能是悲凉,而选择白色作为丧服的颜色也就是选择了传递这种悲凉感。

在4月4日这一天,为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼,我国举行了全国性哀悼活动,在此期间包括淘宝、京东、微博等各知名互联网产品都将产品主界面改为黑白色调以示对逝去同胞的悼念。

(四) UI 设计中的白色应用

当然白色在任何设计当中都不可或缺,但几乎没有哪款应用程序会选择白色作为品牌色,倒不是白色有啥不好,只是如前文所述,白色意味着无色,你可以使用白色作为辅助色或者作为留白使用,但几乎所有的品牌都会有自己的 logo ,当你的 logo 是白色时,相比我们众所周知的微信绿,京东红,支付宝蓝等有彩色系色彩,白色难以在人们心中留下深刻印象,这对于品牌的传播是不利的,所以白色在 UI 设计当中也不例外,更多是以辅助的形象出现。

三、灰色

(一)灰色的定义

灰色是介于黑色和白色之间的色彩,当然这不是量化的定义,但我个人认为对色彩而言,任何量化的定义可能意义都不大,就像你把灰色叫成白色并不会影响色彩的情感传递。

(二)灰色代表的意象

灰色相当于在黑色中多加一些白色,所以相比黑色而言,灰色在意象的传递上,无论是正向意象,还是负向意象,程度可能都会浅一些,也就是说黑色传递的是恐惧感,那么灰色传递的可能也就是压抑感,我们在分析灰色所传递的意象时要和黑色结合起来看,灰色所表达的意象如下:

  • 自然

乌云:压抑

金属:冷淡

  • 人文

清水混凝土:高级

西装:沉稳

 (三)灰色配色实例

1、正向意象

  • 高级(释义:指超过一般的。)

我们知道近期的苹果产品,如下图所示,尤其是高端 Pro 系列的 Mac 与 iPad 产品线,会通过仅使用灰色配色来表示产品地位,而相对低端的 MacBook Air、iPad 等产品的配色相对更丰富一些,如下图所示是安藤忠雄设计的 Koshino 住宅,从这款清水混凝土的灰色建筑中流露出的也是高级感,所以无论苹果产品还是建筑大师作品,都能通过灰色传递高级感,那么为什么包括灰色在内的无彩色系色彩能够比有彩色系色彩更好地传递高级感,我先从之前在微博上看到的一个问题说起,问题的内容是为什么高端手机很少有大电池类型?其实在某种程度上,这两个问题是同一个问题,答案都是——为了克制,或者说物以稀为贵,身处大自然,五彩斑斓很常见,但单纯无彩色系的世界并不常见,使用大电池的胖子手机很常见,也相对容易做到,但为了追求各方面极致,纤细、轻薄的旗舰机并不常见也更难做到,对人们来说顺从天性并不高级,只有克制才更高级,因为能做到克制的人总是少数中的少数,就像我们喜欢科比,是因为他能坚持在凌晨四点起来日复一日的训练,能够忍受跟腱撕裂伤痛完成罚球后才离场,而这些都是克制,也都是我们喜欢他的原因。(似乎跑题了)

  • 沉稳(释义:深沉而稳重。)

灰色为什么能够传递沉稳的意象,原因很简单,就是因为灰色“沉”,但是没有“沉”到像黑色那么深沉,在灰色当中,就沉稳中“沉”字而言,从视觉重量的角度出发,可能深灰色能更好的表现沉稳,依然以苹果为例,如下图所示,左边是 iMac Pro ,右边是 iMac ,一款是浅灰色,一款是深灰色,哪个更显沉稳(沉稳与高级并不矛盾),显然是 iMac Pro,而苹果将这种沉稳感与专业联系起来, iMac Pro 是介于 iMac 与 Mac Pro 之间的更显专业的个人电脑。

2、负向意象

  • 压抑(释义:是一种能够被意识觉察到并困扰着意识感受的心理过程。)

为什么灰色能够传递压抑感,我们先从压抑的定义出发,压抑是人们用来控制某些欲求的方法,这些欲求相对较弱但仍然有力,灰色中的深灰色就有这种效果,它不是像黑色一样完全没有光,但是灰色这种沉闷感也会让你觉得喘不上气,如下图所示我们肯定都体验过这种在瓢泼大雨来临之前乌云密布的场面,用唐代诗人李贺《雁门太守行》中的“黑云压城城欲摧”这句是十分应景,仿佛乌云已经压到了我们头顶,会让人觉得很压抑。

那么设计作品都是怎么表现压抑感的,我们看看如下两个作品,第一幅作品以从黑到浅灰的渐变作为背景,色彩的视觉重量由重到轻,画面中的人物也失落的低下了了头,仿佛承受不住画面上方黑色的重量,再加上昏暗的灯光,组成一幅失落与压抑的画面,第二幅作品以类似毛玻璃质感作为前景,人物将脸贴到毛玻璃上给人近乎窒息的感觉,让空气凝固而又压抑。

  • 冷淡(释义:指很冷;非常冷淡。)

如下图所示,灰色是很多金属的颜色,而金属通常给人的感觉都是冰冷,尤其是对比木质材料与金属材料,当然并不是金属更冷,只是因为金属是更好的热导体,能更快吸走我们身上的热,所以他让我们觉得冷,这种灰色与金属之间的相关性,也让灰色显得更冷一些。

我们常常在室内设计中会看到以黑白灰为主基调的北欧风格设计,如下图所示,这种白色+灰色的基调的室内设计是不是能够让你感觉到一丝寒意。

(四) UI 设计中的灰色应用

  • 影音视听

开眼

  • 系统应用

设置(iOS)

  • 实用工具

cuto

我尝试在各类应用商店中找寻以灰色作为品牌色的应用程序,但确实数量很少,以上三个应用程序中除设置(苹果系统自带应用程序)外,可能开眼和 Cuto 的品牌色都在深灰色与黑色之间。

那么为什么在应用程序中大家好像都不太使用灰色作为品牌色,原因也不复杂,作为商业应用,如果要选择传递的意象,那么灰色更多是传递沉稳、高级感之类的感觉,但灰色作为一个品牌色相对黑色而言更显暧昧,使用灰色强调品质感和设计感,可能会给人一种强调地不那么坚决的印象,任何品牌大概率都不想给他们的用户传递暧昧的印象。

四、尾巴

我们这个世界需要红橙黄绿青蓝紫所展现的五彩斑斓与色彩缤纷,但也同样需要黑白灰让这个世界稍稍安静一些,有彩色与无彩色之间的碰撞才组成了我们这个有趣的世界。

到现在,我们已经讲完了红橙黄蓝绿紫黑白灰九种常用色彩,本人水平有限,如有不妥之处请各位批评指正,下一步我们将在掌握单色的基础上开始讲解多色彩搭配,敬请期待。

Powered by Froala Editor

更新:2020-05-08

收藏

4人已收藏

  • 28

    作品

  • 637

    粉丝

  • 12

    关注

  • 个人作品集_泽泽先生
  • 要找到好工作,简历和作品集得这样设计。
  • 深色模式真的有那么好吗?
  • Requesting Permission

    猜你喜欢

      2020-05-08 原创文章 经验/观点 举报 2400 4 4 0

      别忽视黑白灰,它们比你想象的更重要(系列文章 01_04)

      0.0°

      你确定要举报别忽视黑白灰,它们比你想象的更重要(系列文章 01_04)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2020年05月08日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录