ui设计吧 关注:283,068贴子:785,190

不讲UI,讲讲设计师的色彩基础,应该是最详细的颜色解读了~

只看楼主收藏回复

我的朋友是一个跨行的新手设计师,如同所有跨行到设计行业的新手一样,她走了太多的弯路。是报班还是进入设计学院,每一个都是重大的决定。
坦率地讲,设计是一个非常庞杂的体系,对于她这样的新手而言,一旦扎进去,再也难以自拔,尤其是自学设计的新手。让我感到难过的是,互联网和商业运作组织或者培训机构对于设计培训的宣传过于商业化,他们避重就轻的宣传让许多新手劳命又伤财。
绝大部分在线课程强调设计软件的使用和培养,这些课程都是付费的。我一再强调学习设计软件不会让你懂得设计,拿我最喜欢的一个例子来讲就是:你买了一堆油画刷并不会让你成为艺术家,设计软件就是这些油画刷,如Photoshop、Illustrator一类。它们是实现设计/艺术的工具,而不是设计/艺术本身。


回复
1楼2018-08-22 10:25
    我并不是在传达设计软件无用论,相反,它们对于设计效率和设计效果的提升是几个世纪以来的艺术家和设计师们难以企及的。
    对于这样的新手,如果自学还有一个严重的问题,那就是学习的体系,他们求助无门,得来的只是广告和商业宣传。他们本应有更好的途径可以入门,但是信息的不对称和资源的非有效利用导致他们成为了玻璃窗外的鸟儿,如果没有人引导,他们会一直在玻璃窗外徘徊。如果没有学习设计的方法论,没有一个学习框架的情况下去自学无疑是自寻死路,这会极大地打击他们的自信心,也会打击设计行业的前途。
    我和设计总监致力于这样的入门框架,帮助这样的新手搭建设计学习框架和体系,此后他们再深入学习可以做到有的放矢。我的一篇文章释出了这样的基本框架,而现在这篇文章就是色彩的基础,你放心,这很简单。


    回复
    2楼2018-08-22 10:26
      从设计的外衣-色彩-讲起
      如果知识的学习由许多概念组成,那么你需要知道这些概念名词,然后熟悉并且理解这些概念。在本文你能学习到的概念有:色相、明度、饱和度、原色、间色、复色。不要被这些概念吓到,它们很简单。这是你进入设计的第一步。
      正如标题所言,本文的重点在于扫清设计的基础学科之一:色彩。你不必成为色彩学专家,但是你一定要理解并运用色彩。
      关于色彩我写了太多文章,你可以翻阅我以前的文章来看。不过由于这个话题太冷门,没有人愿意静下心来学习,新手还有一个自身的问题就是太过急躁,这导致我的文章没有多少人愿意看,因此,我改变策略极力为你呈现快速入门的框架和基础,但是你必须要懂得一个哲学道理:厚积薄发。


      回复
      3楼2018-08-22 10:27
        还有一个问题,关于设计师和艺术家是否需要充分理解电磁波、光能感受器或者人类感知等方面的科学解释和原理。尽管设计师和艺术家们不需要懂得这些科学,也能娴熟地运用色彩,但是,我们要清楚地知道,所有的色彩都是光线(电磁波)的结果,可见光通过与眼球和大脑的综合反应呈现了色彩。了解这些内容有利于你理解,并且打下良好的基础。毕竟,专业的能力要从新人开始构建,我们已经很难说服从事过设计的人相信这一点,但至少可以肯定的是,他们不是优秀的设计师。
        色彩作为设计的外衣,是新人遇到的第一道关卡。许多设计师过了很长时间依然无法设计出易用并且美观的产品,这是基础不牢靠所致。无论你学了多少软件也没有用,模仿多少UI也不会让你走得更长远,你必须理论和实践相结合。


        回复
        4楼2018-08-22 10:27
          Jesse也经常向我询问配色问题,我相信许多新手经常被此问题困扰。基础、基础、基础,还是基础问题。在你学会熟练使用Photoshop之后,摆在你面前的就是配色问题。
          关于色彩科学原理的内容请看往期文章,限于篇幅,我不再此累赘了。


          回复
          5楼2018-08-22 10:27
            【色相】
            我们先来看色相,从字面意思理解:色彩的相貌。是的,色彩也有相貌,它长成了什么样子,就是它的色相。红色就是一种色相,同理蓝色、黄色、橙色、紫色、蓝绿色......
            从光学角度本质地看待色相,那就是波长决定的。每种色彩表现出来的独一无二的感官都是光波独特的波长决定的。如红色是波长约650纳米的电磁波表现出来的色彩。
            值得一提的是,黑白灰没有色相,只有明度。


            回复
            6楼2018-08-22 10:28
              【明度】
              许多新手一开始对明度嗤之以鼻,诚然这是一个很容易理解的概念,但是越到后期他们发现明度越难以描述。但是,请记住:明度最重要。
              我们还必须要将明度和亮度区别开来,一般地,明度是指人的感官,但是亮度却是客观存在的变量。不过有时候大家会把亮度和明度混淆。我的建议是只看明度。
              大多数书籍会告诉你明度是色彩的深浅程度,它的范围从接近白色到接近黑色。这没有问题,你可以这么理解,如果你有一桶红色颜料,那么你往里添加白色颜料的时候,它的明度就在提升,添加黑色颜料的时候明度就在下降。
              但是这是为什么呢?为什么会和白色黑色有关系呢?实际上,要理解这个概念最好还是从电磁波上理解。我在《揭开色彩的面具》一文中详细解释了色彩的原理问题。其中有关于电磁波振幅这一属性的描述。
              如果你能够理解波的基本特性,那么你一定能够理解振幅这个概念,振幅与电磁波的能量相关。当然,如果振幅不变的情况下,电磁波频率越高,照射到物体表面时积累的能量也会更高。
              请想象一下声音的传播,有些人的声音很尖锐,这是因为声带振动频率高,每秒振动次数高的原因;反之,声音很低沉,声带振动频率低。这种频率可以区别一个人的声音特性,好比色相是由波长决定,波长越长,频率越低,道理一样。
              但是,声音的大小,即强度与振幅相关,你可以认为声带振动幅度很大,此时产生的声音响度高,能量大。因此,类比一下,当光波的振幅宽,那么能量就强,产生了更高的明度。需要强调的是,明度还与频率(波长)有关,他们相互作用。
              简单地讲,频率越高,振幅越大,即振幅和波长的比值越大,积累的能量越强,我们的视觉系统受到的刺激越强,大脑反应出强烈的明度。
              明度还会叠加,当两种或者以上的有色光线混合的时候,明度是增强的,你可以简单地理解为他们的明度之和。实际上这和电磁波的干涉有关系,但是最终他们经过干涉之后形成新的波长,这就意味着产生了新的色相,但是新的波的振幅和波长之比大于原先的色光,明度就增强了。请记住:色光混合,明度增强。


              回复
              7楼2018-08-22 10:28
                【饱和度】
                接下来色彩属性的最后一个:饱和度,也叫纯度、彩度、艳度、鲜度......,总之,他们说的都是一件事情。
                理解饱和度很简单,它是指一种色彩成分的多少程度,含的越多,饱和度越高,反之越低。
                我们来做个例子,在红色中添加白色,此时红色成分占比下降,红色和白色的混合光进入眼睛时,相比于不添加白色时,前者比例更高,眼球对红色的感光效果越强,表现更为强烈,称之为饱和度高。
                那么在红色中添加其他色相呢,比如添加蓝色,同样地,红色占比依旧下降,红色的饱和度降低了。也就是说,只要某种色相所占比例下降,那么这种色相对眼球的刺激降低了,它的饱和度就低。
                为了你能够更好地理解饱和度,我们利用对盐水再次做对比。我们往一杯清水中添加盐,一开始盐是溶于水的,随着盐分含量越多,到了一个临界点的时候不再溶于水,你会发现无论你放多少盐进去都无法溶于水,此时我们称盐水饱和了。这个原理等同于色彩的饱和,当你往盐水中添加水或者其他液体(可溶解盐的)都可以打破这种饱和状态,即降低了饱和。
                因此,降低饱和度的方法:使其比例降低,对于红色而言:
                加入更多白色,红色的饱和度越低,白色达到一定程度,不足以引起视觉的感知,最终趋向于白色。
                加入更多黑色,红色的饱和度降低,黑色添加到一定程度,不足以引起视觉感知,最终趋向于黑色。
                加入其他色相,红色饱和度降低,其他色相添加到一定程度,不足以引起视觉感知,最终趋向于其他色相。
                你理解了吗?如果你能够对上述三种属性足够理解,你现在利用Photoshop进行三者的操作完全可以了然于胸,而不至于死记硬背,看效果。
                知晓了原理,才能够实现目的。


                回复
                8楼2018-08-22 10:29


                  回复
                  9楼2018-08-22 10:29
                    该楼层疑似违规已被系统折叠 查看此楼


                    回复
                    10楼2018-08-22 10:30
                      在讲原色之前,我们先弄清楚两个概念:加色和减色。这两个概念我在前面色彩科学当中有详细提到,鉴于你没有看过这些文章,我再次简要说明。
                      人的眼睛看到色彩是由于光进入人眼,经过视觉系统处理,在大脑中呈现的感知结果。
                      人类看见色彩可以分为两种情况,第一,直接看到光源。比如手机、显示屏、电视、电灯等,这些都是光源,它们直接发射色光进入眼球。
                      第二,间接光线。除了上述情况,你看到的其他物体都是由于光线经过物体吸收、反射、折射、投射、漫反射等情况后最终进入视觉系统的结果。不过物体会吸收光线,这就导致反射到眼球中的色光和光源的不一致。


                      回复
                      11楼2018-08-22 10:31
                        尽管如此,最终都是光线进入视觉系统。因此,加色和减色没什么区别。对于光源色而言,色光的叠加和混合都是有效的,视觉系统都能感受,比如红光和蓝光进入视觉系统会感知到两种色光的混合效果。因此,色光是在做加法,我们称之为加色模式。人们将光源色即显示器、手机等这类直接发射色光的体系定义为RGB模式。当日光中的所有色彩都进入视觉系统,表现为白色,当然,RGB的混合也就是白色了。


                        回复
                        12楼2018-08-22 10:37


                          回复
                          13楼2018-08-22 11:08
                            但是,物体反射的光线情况略有不同,红色物体反射红色光线,这是你能看见红色的原因,这意味着红色物体理论情况下吸收了其他色光;同理,蓝色物体反射了蓝色光线,吸收了其他光线。如果将不同的色相的颜料混合,它们会相互吸收彼此应当反射的光线,最终反射的可能是其他色光,这好比为太阳光做了减法,我们称之为减色模式。人们将物质的混合或者颜料的混合产生的色彩模式定义为CMY模式。


                            回复
                            14楼2018-08-22 11:13
                              对于CMY模式而言,我们需要知道,这三种原色混合之后相互吸收光线,导致没有色光反射,呈现出黑色,但是由于颜料分子化学性质导致不可能有这么完美的黑色出现,实际上呈现出的是一团杂乱的类似于黑色的深色,因此,人们为了产生更加理想的黑色,专门制作了黑色颜料而不使用CMY的混合来产生,这种黑色颜料取名Key(关键),因此,你最常见到的就是CMYK(这里的K是黑色)。
                              注:对于减色模式,我们讲的是理想情况。实际上黄色物体不会完美地只反射黄光,实际上它反射了较多的红光和绿光,吸收了蓝光和紫光较多,红光和绿光反射后混合在一起,我们看起来就是黄色的;对于蓝色物体,它反射蓝光、紫光、绿光多一些,二者混合,蓝色物体吸收了黄色的红光,黄色物体吸收了蓝光和紫光,二者相互吸收,最终只留下了绿光,因此,它们之间的混合呈现出绿色。
                              艺术家和设计师们几乎工作在减色模式,除非你要在Photoshop、Illustrator和InDesign软件中指明采用其他理论。
                              对于设计师和艺术家而言,颜料的混合使用频繁,但是如果他们要操作舞台灯光,那么就需要涉及加色模式。


                              回复
                              15楼2018-08-22 11:13