qemmie https://www.qemmie.com/ zh-CN 做喜欢的事 爱想爱的人 行更远的路 Fri, 10 Jan 2020 12:42:00 +0800 Fri, 10 Jan 2020 12:42:00 +0800 优酷宣布进行品牌升级!Logo全新设计 https://www.qemmie.com/archives/65/ https://www.qemmie.com/archives/65/ Fri, 10 Jan 2020 12:42:00 +0800 qemmie 来源:优波设计原文
今年4月份,优酷更换“褪色”新LOGO,这也是优酷自2006年成立以来第6次对品牌LOGO做出改变。此次更新将移除这些渐变色,而直接采用有点“褪色”的红色和蓝色配色方案。

优酷方面介绍,此次品牌升级的核心关键词为“突破、前行、胜利”。全新LOGO去除“圆圈”设计,象征破“圈”前行,以更简洁、开放的形象,面向未来、拥抱未来、创造未来。播放按钮既是一个代表胜利的水平“V”,也是前行箭头。此外,粉红粉蓝配色饱和度更高,寓意优酷在阿里大文娱生态大协同之下,凝心聚力,一往无前。请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

]]>
1 https://www.qemmie.com/archives/65/#comments https://www.qemmie.com/feed/archives/65/
保姆级抠图教程 https://www.qemmie.com/archives/64/ https://www.qemmie.com/archives/64/ Sat, 04 Jan 2020 23:39:50 +0800 qemmie 7e7bbc3a75f94053b0b28e1c499de4f6!400x400.jpeg
image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image

image
01e64b5d104264a801213ec23d32b5.jpg

]]>
0 https://www.qemmie.com/archives/64/#comments https://www.qemmie.com/feed/archives/64/
别以为,色彩的知识你全懂了 https://www.qemmie.com/archives/55/ https://www.qemmie.com/archives/55/ Sat, 31 Aug 2019 23:31:00 +0800 qemmie 目录

一、学习目的及概述

二、基础知识

(一)色彩的基本特征

1、色系

2、色彩三属性

3、色调

4、色彩混合

5、色环及色彩对比

6、色彩模式

(二)色彩的情感表现

1、色彩的心理

(1)色彩的冷暖

(2)色彩的轻重

(3)色彩的空间变化

(4)色彩的软硬

2、色彩的知觉

(1)后像

(2)恒常性

(3)同化与异化现象

三、尾巴

一、学习目的及概述

人脑对于色彩的记忆度要高于形态,可以回想一下我们熟悉的品牌,想到小米,你首先想到的是橙色,想到支付宝,你会联想到蓝色,而想到微信,你自然想到的是绿色,以上品牌的 logo 形态你可能会思考一会儿才能想得起来,但品牌色你会脱口而出,这就说明了色彩对于占领用户心智的重要性以及我们学好色彩的必要性。

在正式开始这篇文章之前,我们需要明白我们学习色彩是在学习什么?先从色彩的定义开始,色彩是人眼对不同频率光线(可见光)的不同感受,色彩既是客观存在的,又是主观感知的,地域、文化的不同,会导致不同群体之间产生色彩的认知差异,而我们学习色彩的过程既要掌握人类对色彩认知的共性,也要掌握不同地域文化对不同群体产生的特异性,把复杂的色彩现象还原为基本要素,组合这些不同的基本要素产生目标效果,这里的目标效果分 两部分:

第一部分:在目标用户的情感与色彩审美(目标用户)之间建立桥梁,让二者无缝衔接。例:我们可能都有切身体会,对于室内装修,父母跟我们之间的审美差异很大,像我的装修风格是以黑白灰为主,但我父母就喜欢色彩更丰富一些,不说审美高低,如果室内设计的目标用户是我父母这辈人,或我们这辈人,选色用色上一定是不一样的,对不同类型的用户要达到不同的目标效果,这才是设计;

第二部分:色彩的选择与信息优先级的匹配,例:我们知道了暖色是前进色,冷色是后退色之后,我们会将优先级更高的元素设置为暖色,而将次要元素设置为冷色或无彩色系,让用户先看到更重要的部分。

如果没有扎实的色彩基础知识,想要让色彩在设计上达到目标效果,只靠感觉会很困难,不啰嗦了,开始正文吧。

二、基础知识

(一)色彩的基本特征

1、色系

(1)无彩色系

顾名思义,无彩色系就是没有彩色,是指黑色、白色或由这两种色彩调和形成的各种深浅不同的灰色组成的色系。(见下图 1-1.1.1)

image

注:在下文讲述的色彩三属性当中,无彩色系色彩只具有明度这一种色彩属性。(对此下文会有详解)

(2)有彩色系

有彩色系是指除无彩色系以外的色彩,即红、橙、黄、绿、青、蓝、紫等。(见下图 1-1.2.1)有彩色系色彩具有色彩的三个基本特征——色相、明度及纯度。(下文会有详解)

image

2、色彩的三属性

我们用眼睛和科学观测方法能够看到和辨别清楚的色彩多达750余万种,但他们(不包括无彩色系色彩)之间都有共同的三个属性:色相、明度及纯度(饱和度),这三个属性是我们在选色用色中主要的考量方式之一,它们的结合可以让我们随时随地的记忆和再现色彩。

(1)色相:指色彩的相貌,反映了色彩与色彩之间的差别所在。

从光学角度来说,由于光之间波长的(波长(wavelength)是指波在一个振动周期内传播的距离。)不同,在人眼中产生的色彩也就不同,即使是同一色相,也会产生成百上千种色彩。(见下图 1-2.1.1)

image

为了区分不同的色彩,我们为色彩定出了名称,而每个名称对应一个特定的色彩印象,红橙黄绿青蓝紫,每一种都有特定的色彩印象。

色相会有倾向性,如下图所示,这是从蓝色到红色的渐变过程,中间区域色彩的色相倾向性是不明确的,这种不明确是我们在选色用色中需要避免的,不明确的色相倾向,意味着不明确的情绪,这种“暧昧”意味着你的色彩“什么都不是”,进而无法占领用户心智。

image

(2)明度:指色彩的明暗程度。在无彩色系中最亮的是白色(#ffffff),最暗的是黑色(#000000),在有彩色系之中,也有明度差异,色彩明度从大到小依次是黄色>绿色>青色>橙色>红色>品红色>蓝色。(见下图 1-2.2.1)

image

明度的高低变化可以理解为在色彩当中加入黑色(降低明度)/白色(提高明度)。

(3)纯度(饱和度):指色彩的纯净程度。该色相的纯色(纯色是指一种不混有其他色彩的色彩)在该色彩倾向之上所占的比例既是纯度,例:浅红色是属于红色色相的色彩,但与大红色相比,浅红色中红色的成分相对较低,即纯度较低。(见下图 1-2.3.1)

image

注解:对纯度的称谓,有艳度、彩度、饱和度等多种叫法,我个人更倾向于纯度这个称谓,因为这个称谓有助于概念的理解,纯度是指色彩够不够纯(纯色所占比例),比较合理,而艳度是指够不够艳?彩度是有彩色的比例够不够多?以上都不够直观,饱和度这个称呼虽然没太大问题,但不如纯度容易理解。

(4)困惑过我的疑问:明度和纯度一方的变化,会怎么影响另外一方?

1)明度变化对纯度的影响

如果我们控制色彩三属性中的色相不变(在 HSB 模式中的色相数值不变),那么纯度越高,明度越低。

明度越高的色彩,意味着加入了白色,也就意味着纯度下降(白色的加入导致原色彩纯色比例下降);明度越低的色彩,则是加入了黑色,纯度同样会下降(黑色的加入导致原色彩纯色比例下降);这就意味着明度与纯度的关系是无论明度上升或者下降纯度都会下降。

2)纯度变化对明度的影响

如果我们控制色彩三属性中的色相不变(在 HSB 中的色相数值不变),那么纯度越高,明度越低。(见下图 1-2.4.1)

image

纯度越高的色彩,意味着加入了更多纯色,也就意味着明度下降(白色的比例下降);纯度越低的色彩,意味着减少了纯色,也就意味着明度会提高(纯色比例下降,导致白色占比增加。)。

3、色调

色调是整体的色彩倾向。在色彩的色相、明度及纯度三属性当中,只要保持 1 至 2 个属性一致,变化其他属性,整体色调就能保持一致,这可以成为我们把控整体风格一致性的重要实现方式。

通过色相的冷暖变化,我们可以营造暖色调、冷色调及中间色调,从而通过冷暖变化来传递情绪。

同理,固定色相,让明度与纯度变化,可以将色调分为如下 10 种(见下图1-3.0.1),而每种色调对应不同的情感属性,我们可以根据情绪来选择相应的色调,从而在整体上调整色彩,为我们选色提供一个切入角度。

image

色彩的选择过程中,有理性也有感性,虽然我们可以确定这 10 种色调,但你很难明确它们的分界线,也就是说很难界定明确的数值,只能提供一个大致的范围,在选色用色时,需要结合我们的审美,进一步去判断。

在如下的分析中,我是将色彩的情感属性分为正负两个层面进行分析,但没有不好的色调,我们需要做的是让正确的色调出现在正确的地方。

分析顺序:纯色调→白色调→明色调→浊色调→灰色调→暗色调→黑色调(即 “S" 型曲线)

(1)纯色调

纯色调是指画面整体色彩组合纯度较高的情况。

正面关键词:积极、活力、健康、浓厚等

解释:某种程度上,色彩的纯度与明度的高低就如同人的精气神,纯度与明度越高的色彩精神头越足,能够传递出更多活力。如下图西红柿和香蕉所示,很多植物在成熟时的色彩都接近于纯色,使得纯色与积极、健康等相关联,也因此纯色调常常出现在儿童产品上,去传递积极、健康的情绪。(儿童本身可能并不喜欢纯色,只是父母喜欢。)

image

如下图所示,以纯度较高的蓝色作为背景,通过高饱和度红色圆形将人们的注意力集中到人物之上,这种红蓝的搭配既是冷暖对比,二者又是对比色,让整个海报显得活力十足。

image

如下图所示,麦当劳的 banner 以纯度较高的红色渐变为背景,西红柿上的水珠,将蔬菜的新鲜表现得恰到好处,刺激着观者的食欲(反正我看了之后就想吃)。

image

负面关键词:粗俗、肤浅、花哨等。

活力太充足也会传递出肤浅的观感,很多时候纯色调展现的粗俗是由于色彩之间关系不和谐,无主次,搭配生硬等多方面原因造成的。如下图所示,这是大家熟悉的花哨典型案例,你们可以分析下,这个配色显得“土”的原因是什么。

image

(2)白色调

白色调不仅仅是指白色,也包括在白色附近的较浅的色彩,白色调是所有色调当中明度最高,纯度最低的色调,像一杯很淡的清茶。

正面关键词:干净、清新、纯洁

白色调是视觉重量最轻的色调,能够让我联想到婚纱、百合的纯洁、轻盈,如果说品牌,我回联想到无印良品,如下图所示,来感受下白色调的轻盈和纯洁。

image

负面关键词:平淡、虚无、距离感

有彩色的减少,会使整体色调偏于平淡,更像一个戒掉情绪的成年人,没有了冲动,这也就让人产生了距离感。如下图所示,从衣着来看,显然左侧模特的纯白婚纱装,暗色背景,严肃表情,与观者之间有很强的距离感,而右侧模特接近于浊色调的红绿色搭配,外加模特本身甜美的微笑,显得亲和力十足。

image

(3)淡色调

淡色调是在明色调的基础上,将明度提高,纯度降低。

正面关键词:柔软、淡雅、温柔甜美等

温柔淡雅来自纯度的降低,明度的增加,淡色调相对纯色调的饱满、力量感,也自然会产生柔软的印象。如下图所示,淡色调会让画面更柔和,给人一种幸福甜美的感觉。

image

负面关键词:消极、个性不足。

明度提高,纯度降低使得色彩的个性主张进一步淡化,当你用淡色调去展现视觉冲击或者力量感时,它显然是不能胜任的,会显示出个性不足的劣势。

如下图所示,两种色调对比,哪一种更能表现小女孩的无助和孤单,答案是很显然的吧。

image

(4)明色调

明色调相对纯色调,色彩明度较高,纯度较低。

正面关键词:明快、清新、干净、朴素、阳光等

明度提高意味着色彩更加清爽明快,相比纯色调而言,整体视觉重量轻了,适用于表达纯洁、干净的情绪,如下图所示,整个海报使用明色调将矿泉水的纯净、干净以及晶莹剔透的感觉表现得很到位,背景的雪山也暗示了水源来自大自然,红色部分(品牌色)立刻吸引了观者眼球,让整幅海报有了落脚点。

image

负面关键词:浮躁、没有深度、软弱。

明色调相比纯色调而言,纯度下降意味着色彩饱满、充沛感下降,使得整体会有“飘起来”的感觉,这种饱满感的减少,也使整体力量感缺失。

如下图所示,页面色彩纯度高低变化使画面信息传递效果受到影响,右侧的色彩纯度更高,情绪表现更到位。

image

(5)浊色调

顾名思义,浊色调是看起来相对浑浊的色调,原因在于明度降低,看起来像加入了灰色,低沉而浑浊。

正面关键词:高级、沉着、稳重、有格调等

明度的降低让色彩显得更加深沉,体现内敛与克制,进而产生高级感,下图是坚果手机的落粟配色(来自日本传统色卡),相对明色调及淡色调,浊色调会显得更加成熟稳重,更有文艺感。

image

负面关键词:保守、迟钝。

因为纯度、明度的降低,会让色彩活力下降,不恰当的选色配色,可能会让整体色调显得“脏”,这点是我们需要注意和避免的。

下图是锤子科技的同款坚果手机的不同配色,左侧是标准版,右侧是文青版,大家可以感受下二者的区别,明显左侧标准版更能彰显活力。

image

(6)淡浊色调

顾名思义,淡浊色调相对浊色调而言,整体更“淡”,明度更高,纯度更低。

正面关键词:优雅、有格调等

顾名思义,相比浊色调而言,淡浊色调更淡,色彩纯度下降了,但依然保持了浊色调的优雅以及格调,只是情感不如浊色调的充沛。下图是造作的床品4件套藕粉色,跟上文坚果手机的落粟配色相比,依然保持着文艺感,但没有那么深沉。

image

负面关键词:活力不足、保守

可能文艺感与活力是相对的,如下图所示,都是造作的床品四件套,活力大小高下立辨。

image

(7)暗色调

暗色调是 9 个色调当中明度最低的色调之一,但即使是最暗的色调,有彩色的加入也让整体有别于黑色调的情绪。

正面关键词:深沉、稳重

相比浊色调,暗色调的情绪更加低沉,仿佛城府很深的一位中年男性,深沉而稳重,就像下图的胡桃木色家具一般。

image

负面关键词:压抑、阴暗

这就是事物两面性很好的展现,当然也不排除某些设计需要营造压抑的氛围,我们“因地制宜”选择色彩就好。如下图所示,暗色调能够传递这种近乎让人窒息的压抑感。

image

我们熟悉的无印良品的品牌色就属于暗色调,你可以看看色调的变化对品牌调性的影响。(见下图1-3.7.3)

image

(8)淡暗色调

淡暗色调是在暗色调的基础上提高明度,自然深沉感(压抑感)也就被削弱了。

正面关键词:深沉、素气

单从上文图中( 图 1-3.0.1)红色的变化来看,红色的淡暗色调色彩接近于棕色,相比浊色调而言,由于纯度的下降,使淡暗色调更显素气。如下图所示,画面整体的基调是淡暗色调,但也恰好与模特白皙的皮肤显现强对比,突出了模特本身(主角)。

image

负面关键词:阴暗、无趣

在色彩中,纯度与明度都不低的色调,自然会有活力,但凡一方(纯度与明度)比较低,就走向了“无趣”。

(9)黑色调

黑色调是明度最低的色调,当然同白色调一样,黑色调也不仅仅包括黑色,但总体是靠近黑色的色彩,主要突出黑色基调。

正面关键词:严肃、庄严、高端

在西方社会的葬礼上,参加葬礼的人都是一袭黑色西装,来表示对死者的尊重及表达沉痛的心情。我们可以观察一些品牌的高端产品通常也只用无彩色系来表达高端感,例:苹果的 MacBook Pro、iMac Pro等。

负面关键词:黑暗、压抑、消沉

同上文中对白色调的分析,黑色调同样是戒掉情绪的人,只是这个人更加的深沉和严肃,如下图所示,我们可以感受到那种沉重感穿过画面到达我们的内心,黑色调的压抑是在暗色调的基础上又增加了一个量级,更能够传递出那种不能呼吸的压抑感。

image

4、三原色及色彩混合

(1)概念

原色:原色是不能由其他色彩组成的基本色,同时它们也是构成其他色彩的基础。

原色分为色光和颜料(色彩)三原色,如下图所示。色光的三原色是红(red)绿(green)蓝(blue),也就是这三种色光不能通过其他色光混合的方式得到,颜料三原色是青(cyan)、品红(magenta)、黄(yellow),同理,这三种颜料也是不能由其他颜料混合得到。

image

色彩混合:顾名思义,色彩混合就是两种或两种以上色彩混合成另外一种色彩的过程。

色彩混合的本质是在人眼视网膜上的同一部位同时射入两种或两种以上的色光刺激,感觉出另一种颜色的现象,无论是下文的加色混合还是减色混合,本质上都是色光射入人眼,区别在于一个是直射(加色混合),一个是反射(减色混合),从这个角度来说,色彩混合探讨的就是光(色光)的混合问题。

加色混合:指两种或两种以上色光之间叠加,色彩明度会增强的情况。

从色光的角度来说,光(色光)和光(色光)的叠加,会导致亮度增强;从色彩的角度来说,观察上文色彩混合原理图会发现,三原色(色光)两两混合都会产生明度更高的色彩。综合以上两点可能是加色混合之所称作加色混合的原因。

注解:亮度与明度是有区别的,亮度是指单位面积光通量的大小,而明度是色彩的明暗程度,也就是明度最高是白,而亮度取决于单位面积通过的光的量。

减色混合:指两种及两种以上颜料等本身不发光的物体(液体)彼此混合,色彩明度会降低的情况。

观察上文色彩混合原理图会发现,三原色(颜料)两两混合会产生明度更低的色彩,这也是减色混合之所以称作减色混合的原因。

注解:

假设颜料混合后表面积没有变化,红蓝绿(RGB)都是纯色,加入比例都是1。

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

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

青色+品红=反射蓝(2);吸收红绿(2+2)=2。

我们可以发现色彩的混合并没有让光通过的单位面积的量增加,但随着色彩变为明度更低的色彩,颜料的混合会越混合明度越低。

通过以上我们会发现本质上我们研究的都是光的问题,对色光来说,因为是直射的关系,你要呈现某种颜色,用红绿蓝三种去组合就可以,而对颜料而言,因为是反射,你要呈现的色彩是被反射的,也就是你得用红绿蓝的互补色—青品红黄才能组合出你要的色彩。

5、色环及色彩对比

如下图可见光光谱及色环所示。可以发现,色环是将可见光谱首尾相连组成圆环,通过色环我们能够了解各色彩之间的关系。

image

image

如下是几种色彩关系,我们先以结论的形式呈现,再去分析原因。

(1)互补色:指的是在色环上 180° 相对的一对色彩。互补色呈现的色彩感觉是最具刺激性的,最张扬的。

image

(2)对比色:指在色环上相隔 120° 至 180° 的色彩,相对而言,对比色在保持了色彩刺激感的同时,又有一定平和的加入,能够体现适度的对立感。

image

(3)邻近色:色环上任意两个连续的色彩都是临近色彩。邻近色营造的是平和的感觉,没有冲突感。

image

以上结论可能大家可能都知道,但为什么会呈现这样的效果?我们来说道说道,其实可以用基因来类比,你跟你父母长得像是因为你的基因是你父母各提供一半组成的,如果你们相同的基因越来越少,那么你们可能会长得越不像,如果把色光中的红绿蓝(因为它们是构成其他色光的基础)这三种色彩含量比作基因,越接近的色彩在彼此中对方的成分越多,当在色环处于相对位置的时候( 180° 相对),彼此之中几乎再无对方的“基因”,因此二者差异最大,以红色与青色这对互补色来举例:蓝色+绿色=青色。如果以 1:1 的比例,青色是蓝绿“基因”各占一半,相当于蓝绿色彩的“孩子”,自然青色无论与蓝色还是绿色搭配都会很和谐。而红色与青色可以说完全没有共同基因,因此是互补色。反之,在色环中越接近,彼此中对方“基因”越多,以色彩组合呈现的时候给人的视觉冲击感越小,类似于红与橙,蓝与青。

6、色彩模式

(1)概念

色彩模式:在数码设备(PC、智能手机等)呈现色彩的算法。

(2)RGB与CMYK色彩模式

RGB 色彩模式指的是以红绿蓝三种色光来组成其他色彩的模式,色彩混合模式属于加色混合。适用于发光体(PC、智能手机),当然这也是我们面向屏幕设计的 UI 设计师常用的色彩模式。

RGB模型可以看做以红、绿、蓝为 x、y、z 轴的三维立体模型,每个轴分为 0-255 表示256级,每种色彩都可以由(x,y,z)坐标构成,(255,255,255)表示白色,(0,0,0)表示黑色。(见下图1-6.2.1 )

image

CMYK色彩模式指的是以青、品红、黄三种颜料组成其他色彩的色彩模式,色彩混合模式属于加色混合,适用于印刷媒介(书籍、海报),是平面设计师常用的色彩模式。

注解:RGB 是 red(红),green(绿),blue(蓝);CMYK 是 cyan(青色),mangeta(品红),yellow(黄色),black(黑色)。

以下是两个关于 CMYK 色彩模式你可能会困惑的问题

(1)为什么CMYK中的“K”是“K”,而不是“B”(black首字母)?

主要原因在于RGB当中已经有“B”了,为避免混淆就用了末尾的字母“K”,当然使用哪个字母没那么重要,重点在于我们对它的理解。

(2)既然CMY可以合成“K”(黑色),为什么还要加入“K”(黑色)?

主要有如下三个原因:

第一,理论上可行,但由于生产技术的限制,目前CMY可以合成的“K”还不够理想,因此加入了黑色油墨来单独呈现黑色部分;

第二,黑色在印刷上使用量较大,CMY合成“K”过于浪费油墨;

第三,考虑到纸张质量,避免多层油墨叠加。

(3)HSB 色彩模式

HSB(即HSV)色彩模式是通过色彩的色相、明度、纯度三属性去呈现色彩的模式。 我们具体来看看"H""S""B"分别代表什么。

1)H(hues)表示色相,在 0~360° 的标准色环上,按照角度值标识,0° 为红色,60° 为黄色,120° 为绿色,180° 为青色,240° 为蓝色,300° 为品红色(见下图1-6.1.2)。从下图(1-6.1.2)我们可以看出三个轴分别代表色相、明度、纯度。

2)S(saturation)表示纯度,用 0%(灰色)~100%(纯色)的百分比来度量。

3)B(brightness)表示明度,通常是从 0(黑)~100%(白)的百分比来度量的,如下图(1-6.1.2)所示,在色立面中明度从上至下逐渐递减,上边线为100%,下边线为0% 。

image

image

HSB 色彩模式是从人类视觉的角度出发,人眼在看色彩时,不会将色彩拆分成 R、G、B 或C、M、Y,而是以色彩三属性来看待色彩,这也就是 HSB 和 RGB 以及 CMYK 模式之间的区别。

(二)色彩的情感表现

1、色彩心理

(1)色彩的冷暖

根据人类来自生产生活中的心理感受,将色彩分为冷色、暖色及中性色彩。

如下图所示,冷色系是指青色、蓝色等,冷色系色彩给人以大海的冰冷感觉。

image

如下图所示,暖色系是指红色、黄色、橙色等,暖色系色彩带给我们的是类似太阳与火的温暖感觉。

image

如下图所示,紫色、绿色及无彩色系属于中性色彩,没有明显的冷暖倾向。

image

色彩冷暖的相对性:我们要知道的是,色彩的冷暖是相对的,在暖色系当中,会有偏冷的暖色系(当然是相对偏暖的暖色系来说),如下图(2-1.1.4)所示,你可以比较一下,哪种红色更冷?在冷色系当中,会有偏暖的冷色系色彩(当然是相对偏冷的冷色系来说),如下图(2-1.1.5)所示,你也可以比较一下,哪种蓝色更暖?

image

image

实际上为了提升我们设计的细节,更好的平衡色彩选择,我们不能仅满足于冷暖平衡,而要更进一步,如下图插画(2-1.1.6)所示,虽然红色和蓝色已经是冷暖搭配了,但作者更进一步,用冷红搭配暖蓝,你可以对比一下图2-1.1.7(经过我调整的,主要是为了说明问题,请原作者见谅。)你可以看看哪种视觉效果更好,显然第一张图更柔和,第二张冲突性更强,更加冷峻,这就是色彩冷暖相对性在设计中的应用,这部分我会在随后的色彩系列文章中进一步深入,敬请期待。

image

image

(2)色彩的轻重

色彩的轻重指从视觉上给人们以心理的重量感受。(不是指物理上的重量。)

如下图所示,同等面积下黑与白和黄与蓝(均为纯色),明显明度高的色彩显得轻,明度低的色彩显得重。

image

纯度对色彩重量的影响不是线性的(不是纯度越高越重,纯度越低越轻),如果纯度对色彩重量的影响是线性的,那么单从纯度来考虑,纯红色与纯蓝色应该一样重,但实际上视觉重量并不一样,纯蓝色更重(明度上的考虑),我们在考虑色彩重量时主要从明度入手。

色彩重量是版式设计中构建平衡需要考虑的,如下图(2-1.2.2)和图(2-1.2.3)的比较,是不是图(2-1.2.3)舒服了很多,图(2-1.2.2)色彩重量的不平衡在版面上带来的是不稳定的感觉。

image

image

通过上图我们也可以知道,在构建色彩重量平衡时,我们需要给“轻”的色彩增加面积,“重”的色彩减小面积,这样才能维持二者视觉重量上的平衡。

在平面设计当中,我们可能会使用下重上轻的方式去构建稳重的页面排版。在室内设计当中,我们可能会选择深色的地板或者瓷砖,避免头重脚轻的情况发生,给人们带来不安定感。(见下图2-1.2.4)

image

(3)色彩的视错觉

物理面积相等的两个圆,会因为色彩的不同而导致视觉面积不同,空间距离感也会不同。

前进色(膨胀色)与后退色(收缩色):暖色系色彩是前进色(膨胀色),冷色系色彩是后退色(收缩色),顾名思义,前进色(膨胀色)相比后退色(收缩色)而言,从视觉上来说更靠近我们(物理距离是一致的),且看起来更大(在原本物理面积一致的情况下)。

这里我们要结合上文的色彩冷暖相对性来看,相对更暖的色彩就是前进色(膨胀色),相对更冷的色彩是后退色(收缩色)。

我们再来说道说道,是什么原因给人们这样的视错觉?这里主要与光线的波长相关,如下图所示,我们会发现暖色系的色彩波长更长,冷色系的波长相对较短(当然属于中性色的紫色的波长最短)波长更长的色彩,它的焦距也更长,波长短的色彩焦距也更短,这就意味着不同波长的光不会聚焦在一个视网膜的同一平面上,长波长的暖色影像更显模糊,而波长较短的冷色影像更清晰。(波长关系见下图2-1.3.1)

1)波长与焦距关系的证明:

f=1/((n-1)*(1/r1-1/r2))(f代表波长,n代表折射率,r1.r2是球面两侧镜面曲率)

我们假设其他变量固定,只考虑折射率与焦距的关系,二者呈反比关系,折射率越小,焦距越长。

λ'=λ/n(λ'表示光在介质中的波长,λ表示光在真空中的波长,n表示介质的折射率。)

回到以上公式,光在介质中波长与折射率的关系也是呈反比的,即折射率越小,波长越长。

以上两个公式我们可以推导出波长与焦距的关系是成正比的,即波长越长,焦距越大。

image

例:我们在看黄色的白炽灯光时,并不会看到一个轮廓很清晰的灯,而总是能看到他周围的模糊,放到色彩上同理,明度高的色彩也会有光渗效应 ,让面积显得更大,这种膨胀感也会让色彩感觉离你更近。

如下图(2-1.3.2)所示,两个面积一样的圆,一个白色一个黑色,你觉得哪个离你更近,哪个更大?以上说明明度也对色彩的视错觉会有影响,但是你可以自己试试,明度对前进(膨胀)与后退(收缩)的影响更多是对无彩色系而言。而波长对有彩色系色彩视错觉的影响(前进(膨胀)与后退(收缩)的)大于明度对其的影响(因黑白灰本身不属于光的范畴,没有波长的概念),可以看看下方例子(2-1.3.3),红色会显得距离更近,更有膨胀感。

image

image

理论联系实际,我们来谈谈应用,像我这样的胖子都清楚,要显瘦就得穿深色的,最好再加上竖条纹,通过视错觉让纵向变长,相对横向自然短了。

在设计中有什么应用呢?最近 iOS 13 出了 Dark Mode,这里会涉及一个问题,在日间模式时,是白纸黑字,在夜间模式是黑纸白字,前者字体“看起来”会比后者小,如果我们将后者的字体稍稍减小,就可以保证前后观感一致。

(这部分我对长波长色彩在视网膜上会更模糊这个结论的得出主要是视觉观感结合查找相关资料,具体证明欠佳,能力有限,你们可以试着证明下这部分。)

(4)色彩的软硬

看看下图,哪个颜色最柔软呢?中间的是最柔软的,我们可以发现什么规律?明度高或者纯度高的色彩都不是最柔软的,在保持色相不变的基础上,色彩的明度和纯度适中看起来是最柔软的。(见下图(2-1.4.1))

image

那么我们再回到色彩柔软的具体应用,我们可以看看如下两种不同风格的插画,柔软的色彩会更适用于温暖、女性化的主题,而硬气的色彩更适合于表现刚强、男性化的主题。(见下图(2-1.4.2))

image

2、色彩的知觉

(1)后像

后像是由视觉生理机制形成的,分为积极后像与消极后像。

积极后像是指光停止刺激后,仍然留有刺激的后像。大家应该都看过走马灯, 走马灯就是利用积极后像, 在旋转的足够快的时候我们能够将各个片段连接起来,当然电影也是这样的,人类能够将 0.02 秒到 0.3 秒之间的图像连接起来,从而构成连续的动画。

消极后像是指某种色彩消失后,在大脑中显现该色彩的补色的现象。例如当我们盯着红色看久了,将视线转移至别处,我们大脑中就会出现绿色。神经中枢的六种膝状外侧细胞存在对偶互补现象(红-绿,黄-蓝,黑-白。)。消极后像是视神经的功能平衡性需求,从而维持我们视感觉的平衡。这部分我们在用色的时候会讲到,并不是说补色不能同时出现,而是可能你的用色方法并不正确,预知后事如何,请关注后续文章。

(2)恒常性

恒常性是指当我们认识了物体的色彩之后,因为光照变化的关系,即使色彩的明度、纯度及色相等属性发生变化,我们仍然认为他是原来的色彩,当然色彩属性的变化也有一个范围,就是说你不能把红的变成绿的,把蓝的变成黄的,不能完全打破在大自然中的印象。比如你不能再画樱桃的时候把果实画成绿的,而把叶子画成红的,这会让人们看着很困惑。(独特的艺术创作除外。)我个人认为。我们还是要尽量在相近的色相内进行变化。

恒常性是很有趣的,很多时候可能我们都没有注意到,如下图下方例子(2-2.2.1)所示,有一些绘画作品,它的色彩选择并不是使用该植物或者是各种物象本身的色彩,而使用其他色彩,但我们并不会感觉到奇怪。

image

(3)同化与异化现象

1)同化现象

两种有共同因素的色彩,其共同因素部分会被同化。

如下图所示,绿色与蓝色放在一起,绿色的蓝色部分会被同化,而更凸显黄色部分。

image

那么同化现象在实际工作中会有什么应用呢?这就是细节层面的设计了,当蓝色与绿色并置时,会有黄色(暖色)倾向,那么我们如果再要搭配一个色彩(非并置)是否搭配一个暖色中的相对冷色会不会比较好。

2)异化现象

色彩的异化现象即视觉在感知两种对比强烈的色彩(例:互补色)时,两种色彩都会向其补色方向发展。

色彩的原有倾向会显得更加明显,可能在这方面我们都有体会,无论是红配绿,还是紫配黄,它们搭配在一起时,颜色之间就会有鲜明的对抗感。

如下图所示,当无彩色与有彩色搭配时,无彩色就会有偏向有彩色的补色倾向,蓝与灰搭配,则灰色会微微带有橙色的倾向。

image

说到异化现象的实际应用时,在我不知道异化现象之前,对我来说有彩色与灰色的搭配是一个难题,因为色彩控制不得当,会让画面显得脏,这种情况下可能让有彩色成为成为配角,灰色成为主角更好。但黑色与白色就不存在这个问题,白色可以说是真正意义上的中性色,当有彩色在白色背景之上时,对有彩色本身的特征不会有任何影响,而在黑色背景上放置有彩色内容,黑色会对有彩色有一个抑制作用,黑白两色与有彩色的搭配不存在“脏”的问题。

三、尾巴

这篇文章是色彩基础知识的第一篇,后续还会对单独的色彩进行理论联系实际的详解,基础知识可能看起来会相对枯燥,但万丈高楼平地起,很多时候你觉得基础知识掌握的不错,但大多情况下,提高空间还很大,多的不说了,希望这篇文章有帮到你,哪怕是一个小知识点,谢谢你的阅读。

]]>
1 https://www.qemmie.com/archives/55/#comments https://www.qemmie.com/feed/archives/55/
设计思维 https://www.qemmie.com/archives/52/ https://www.qemmie.com/archives/52/ Tue, 23 Jul 2019 15:38:00 +0800 qemmie 为什么经常改稿?
每天加班改稿,方案经常被挑战,为什么?很多时候其实不是业务方不喜欢你的设计,而是你的设计稿虽然很漂亮,但是并没有Get到产品所想表达的点。所以会一味的要求你进行修改,直达业务方决策层满意为止。这个时候,往往主动权已经到了业务方手中。
设计是用来用的,不是用来看的
请输入图片描述

目前我们都属于商业设计师,把握商业利益和体验的平衡是设计师最需要理解的一点,往往设计师可能在做需求中,会过于关注视觉表现力及设计流行趋势, 忽略有效的引导用户,减轻用户的认知,突出产品想突出的点,理解完成业务目标。
视觉设计,在整个商业行为中往往只是冰山一角。不去熟悉理解产品业务,没有数据支撑,你的设计作品往往很难具有说服力。

很多大公司对设计师要求,越是高阶设计师,越需要去影响业务,设计洞察,发现问题驱动业务,带来增长,帮业务突破是每个优秀设计师都需要考虑的点。
怎么驱动业务?
设计前, 绝对不是在拿到产品需求后第一时间打开设计工具,快速的绘制出页面。而是在原型图拿到前,就会参与到设计决策中来,通过专业影响力来推动整个流程的发展,我们把它叫做前置设计环节。

为了让大家更好的理解,以我之在斗鱼所做的一个项目举例。项目背景是为了提升直播间的互动氛围,体验升级,提高产品给用户带来的愉悦感。通过主播设定相应的任务,水友赠送礼物让主播完成所设定的要求。是一个全新的直播互动形式,增加用户粘性,提高主播效益。
通过与产品同学、交互同学的沟通整理。大家一致认为,强调突出充能任务的内容,这个才是最重要的,礼物进度为其次。如果特意强调礼物,用户会对整个活动丧失兴趣。

设计目标

●突出主播设定任务,降低用户认知成本

●通过动画互动,提高直播间互动趣味性

●重点区别已完成与未完成任务
请输入图片描述
●优化前台显示效果,引导用户进行决策

通过梳理,明白主要需要凸显的点,这个时候就可以跟产品同学进行沟通,合理的安排排期。比如先定义第一期的内容,通过上线第一期,快速占领市场,再通过第一期的数据,进行分析后续不断优化。

通过前期的分析定位,能很清楚的知道需要设定什么样的风格,才能受到用户的喜爱

做有影响力的设计
产品设计的目的就是以用户为中心,最大程度的满足用户需求,为用户提供更好的服务。这里给大家介绍通过对用户心智模型的研究,来完善对产品的情感设计理论及方法,让设计更好的与用户产生情感共鸣。

心智模型这个词是苏格兰心理学家在上个世纪四十年提出来后,心智模型也叫心智模式,是指深植入我们心中,关于我们自己、别人、组织及周围世界每个层面的假设、形象和故事。深受习惯思维、定势思维、已有认知的局限。也指人们一种习以为常、理所当然的认知。

那么什么是符合用户心智模型的体验呢?简短来说就是,基于用户的心理行为
请输入图片描述
▲ 网易云音乐的播放器。当开始播放的时候,指针往下挪动到唱片,唱片转动。而且唱片中间,加载的正是这首音乐的专辑图。这正是完整的延续了用户心智的过程,与用户所理解的一致,达成共鸣。

总结下来,对匹配用户心智模型分别可以归纳为:

1.找准关键切入点做情感化,让机械的界面与用户达成共鸣。

2.别想着让用户去思考,应当降低用户的学习成本。

3.不要总尝试改变用户认知,最好让用户觉得理所当然。

最后
设计师一个很综合的岗位,想把设计做好,并不是一件容易的事情。我们必须左手艺术,右手科学,希望能通过这篇文章,帮助设计师朋友提升关于理性方面的认知,提高自己的能力。

]]>
0 https://www.qemmie.com/archives/52/#comments https://www.qemmie.com/feed/archives/52/
中国&日本传统色彩 https://www.qemmie.com/archives/51/ https://www.qemmie.com/archives/51/ Fri, 19 Jul 2019 10:34:00 +0800 qemmie 里面涵盖中国传统色彩和日本传统色彩,还有一些设计图书推荐,多看看设计的相关书籍,提高设计修养
https://color.uisdc.com/

]]>
0 https://www.qemmie.com/archives/51/#comments https://www.qemmie.com/feed/archives/51/
绽影像之《遗忘星辰》 https://www.qemmie.com/archives/49/ https://www.qemmie.com/archives/49/ Fri, 19 Jul 2019 10:07:56 +0800 qemmie 请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

]]>
0 https://www.qemmie.com/archives/49/#comments https://www.qemmie.com/feed/archives/49/
界面设计——视觉层面的三维解析 https://www.qemmie.com/archives/48/ https://www.qemmie.com/archives/48/ Wed, 17 Jul 2019 10:21:00 +0800 qemmie Image title

界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计“视觉层面”的理解与认知。

在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。

信息传递是让用户看的明白,快速清晰的获取信息;

视觉美化是让用户看的舒服,让界面足够美观;

创新创意是让用户看的惊喜,看到一些不一样的创意点。

如下图:

Image title

三个维度的目标如何实现呢?我提取了以下三个关键词:

Image title

清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解,大纲如下:

1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大

2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减

3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化

1.清晰 

1.1清晰-降噪-容器整合  

设计目标:清晰

执行原理:信息降噪

执行方法:容器整合

Image title

当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。

作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。

这里我经常使用“容器整合法”来让内容更加清晰、聚焦。

当分散的内容装进一个“容器后”,就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的“容器”。

实际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。

Image title

这里我就采用了”卡片容器“的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:

Image title

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱!

1.2 清晰-聚焦-局部放大  

设计目标:清晰

执行原理:聚焦

执行方法:局部放大

Image title

我们在平时做需求的时候,经常会遇到信息特别多,特别乱的时候,如果此时我们选择什么都想突出,最后的结果一定适得其反,什么都突出部不了,这时候就需要我们选择一些内容来进行局部放大,反而可以让整体信息更加聚焦、清晰。

这种方法经常用在有数字展示的页面当中,比如下面这种页面:

Image title

再比如,下面这个模块信息,如果”3“没有放大,整体的信息会乱到你眼花缭乱,我们看下对比:

Image title

所以,大家在遇到有数字,且信息杂乱的时候,就可以采用局部放大的方式来使整体更加聚焦、清晰。

2.和谐  

2.1 和谐-呼应-颜色呼应 

设计目标:和谐

执行原理:呼应

执行方法:以颜色呼应为例

Image title

很多时候我们会觉得自己做的东西很不和谐,其中一个很重要的原因就是因为页面中没有贯穿的元素,也就是没有呼应,很常用的一个呼应的方法就是颜色呼应。

例如这个画面总看起来不够和谐,你会觉得绿色很突兀,就是因为颜色上没有呼应:

Image title

而一旦你想办法,让绿色“事出有因”,比如取自眼镜的颜色:

Image title

那么,突兀的问题解决了,和谐的目标也就实现了。

而刚才那个人中心的界面:

Image title

我们会发现,图标的颜色也是取自背景色,所以整体看起来才会如此和谐。

除了颜色呼应,还有很多呼应的方式,比如图形、图标风格等等,这里就不再举例了。

2.2 和谐-节奏感-对比变化 

设计目标:和谐

执行原理:节奏感

执行方法:对比变化

Image title

对于音乐,节奏感是非常重要的,如果一段音乐一直是一个频率,那可能也算不上音乐了。

界面也是一样的,节奏感是让页面变得“和谐”很重要的因素之一,如何做到呢?

我们在展示文字列表的时候,你觉得下面两种哪个更舒服些呢?

Image title

我猜你会觉得第二个舒服一些,因为它有变化,有节奏感,所以它和谐、舒适。

我们会发现很多产品首页带有封面图的列表都有很多种排法,例如1带多,1x2,2x2,2x3等等:

Image title

就是为了防止每个模块过于重复,如果每个模块都是每排两张封面,一直下来:

Image title

看起来会非常乏味。

2.3  和谐-饱满-负形缩减 

设计目标:和谐

执行原理:饱满

执行方法:负形缩减

Image title

在做图标或者字体的时候,经常要讲一个原则就是“饱满”,界面上每个“不能拆分的元素”都需要尽量做到饱满,比如图标,再比如下面这个信息组件:

Image title

正文就属于不能拆分的单一原子,大家可能会问,这种信息不就是方方正正的一个信息块吗,怎么会不饱满呢,比如行间距过大:

Image title

再比如,我在优化腾讯动漫信息流的时候,发现正文出现的表情远远大于文字,如下图:

Image title

表情一旦出现,就会造成大量空隙(负形过大),导致整体不够饱满、和谐。

我们可以看下其他产品,表情和文字几乎都是一样的大小,他们都会尽量缩小负形空间(也就是空隙小大):

Image title

在这样的原则之下,优化后的效果如下:

Image title

以上是关于和谐的几点方法。

3.独特 

如果你的界面做到了清晰、和谐,在视觉层面就已经算是及格了,如果还能加上一点小创意,就可以让人眼前一亮。

如何能够做到独特?可以从两方面出发,1是品牌,2是内容本身含义。

3.1独特-品牌延展-吉祥物结合  

设计目标:独特

执行原理:品牌延展

执行方法:IP形象结合

Image title

从品牌出发,可以有很多方向,比如logo,图形,品牌吉祥物等,下面以品牌吉祥物为例:

在做小说阅读器的时候,有一个设置选项是选择文字的背景颜色,选择控件是圆形,而品牌形象也偏圆形,此时就可以将圆形控件与形象相互结合:

Image title

但是选择控件有两种状态,为了更加生动,就让给形象正面面对你的时候作为选择状态,而转过身作为非选择状态,大概效果如下:

Image title

此创意已在腾讯动漫小说落地实现。

3.2 独特-事物本意延展-事物图形化 

设计目标:独特

执行原理:事物本意延展

执行方法:事物图形化

Image title

除了品牌,还可以根据事物本身的意思来延展图形,比如日间夜间模式的切换按钮,男女性别的切换按钮,都可以利用事物本身的含义来延展图形设计:

Image title

此创意已在腾讯动漫个人中心模块落地。

再比如,弹幕的展示方式,就可以联想到电视机,再把电视机图形化,如下图:

Image title

此创意已经在腾讯动漫小说频道页实现。

这里需要注意下,有时候如果图形过于普通,可以配合动效来增加独特性,但一定要注意开发成本。

总结 

界面设计是一个非常复杂的系统,今天单独拿出视觉层面和大家分享了一些具有普适性的原则和方法,全当抛砖引玉,希望能够启发出你的更多灵感,加油!

]]>
0 https://www.qemmie.com/archives/48/#comments https://www.qemmie.com/feed/archives/48/
字体设计基础论点 https://www.qemmie.com/archives/35/ https://www.qemmie.com/archives/35/ Mon, 15 Jul 2019 11:33:00 +0800 qemmie 请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

]]>
0 https://www.qemmie.com/archives/35/#comments https://www.qemmie.com/feed/archives/35/
喜欢的字体设计【1】 https://www.qemmie.com/archives/34/ https://www.qemmie.com/archives/34/ Mon, 15 Jul 2019 10:40:00 +0800 qemmie 请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

请输入图片描述

]]>
0 https://www.qemmie.com/archives/34/#comments https://www.qemmie.com/feed/archives/34/
积极的生活 https://www.qemmie.com/archives/33/ https://www.qemmie.com/archives/33/ Tue, 04 Jun 2019 09:28:00 +0800 qemmie 不要因为计划而计划去做,要知道你为什么这么做,心里记得明明白白的,可能就更容易付诸于行动,多看看设计的东西,提高自己的审美,每天看一看,其实你再看的时候也是很投入,很感兴趣的,所以偶尔就逛逛人家的设计,这样即使不计划学习,也能激发自己的乐趣。每天看看新的设计动态,渐渐的成为一种习惯,这是你的工作,记住,至少现在正在做的工作。

]]>
1 https://www.qemmie.com/archives/33/#comments https://www.qemmie.com/feed/archives/33/