• UI新手学配色


    来吧,玩PS的你,是不是觉得PS玩的差不多了?
    是的,做IT的,工具不是最重要的,如何实现“梦想(想法)”才是最重要的。而UI设计则更需要“梦想”。
    下面我来给大家来聊聊“色”吧。

    配色的重要性

    在UI设计中,颜色尤为重要。下面我们看看两个图,你自然会明白配色的重要性!
    从上面两张图对比可以知道,在相同的项目、相同的布局中,相同的组件采用不同的配色给人家的感觉都是不一样的。
    至于每种颜色能给人们什么感觉,可以看我的博文 《色彩联觉与各行业的特有颜色》
    妈了个蛋,我裤子都脱了,你竟然给我看这个!!
    嘿嘿,颜色的重要谁不知道啊!
    那么,颜色怎么来的?如何配出参考颜色?如何配色好看?
    来,我这个小司机给你带带路!

    颜色怎么来的

    首先,相信你上过生物课,对,生物课。(请别污!)
    我们之所以能看到多姿多彩的世界,是因为,你没瞎!(扯远了。。)
    回到正题,上过物理的都知道,颜色和光、物体有着关系,每种物体都有它的特有色。比如,一般场景下:血是红的,牛奶是白的,水是透明的...等等。
    那么,颜色之所以能被我们看到,是因为物体的颜色经过光的反射传达到我们的眼睛的,这样,我们就能看到物体的颜色了。
    那么,在UI设计中,颜色并不是直接去把物体的颜色拿过来放到我们的PhotoShop中的,这里要通过手绘/相机把颜色捕捉到,然后放到我们的PhotoShop中去的,等到我们需要用颜色的时候可以用Ps里的‘吸管工具’来取取到它。
    当然,我们老司机是不需要把取色这事弄得那么复杂的,UI设计嘛,不就是把界面做出来就好了,那么如果你能很熟练的在PhotoShop中用色环来取到你自己想要的颜色,相信你就不用按我刚刚说的用拍照的方式来取到你想要的颜色了!

    色环的由来

    说到色环,得说说三原色和n次色。
    三原色是:
    红色 #ff0000,
    绿色 #00ff00,
    蓝色 #0000ff;
    n次色是用三原色的‘相减混色原理’调配出来的。
    其中二次色是:
    二次色:
    青色 #00ffff,
    洋红(品红) #ff00ff,
    黄色 #ffff00;
    这样经过n次之后可以得到一个色环。

    CMYK与RGB

    这里再扯一扯,新手在玩ps经常会遇到的一个问题,就是颜色模式(CMYK模式与RGB/HEX模式)。
    颜色模式说白了,如果你是做印染行业的,或者是做印刷的,你就用‘CMYK’模式好了。
    然而,我们叼咋天的UI用的都是‘RGB/HEX’模式的(这个,做IT的都知道 -.- )!毕竟,这个颜色模式是给屏幕用的!你说叼不叼!嘿嘿。
    颜色模式就是那么简单!

    准确地调出参考色

    对新手来说,临摹是第一步。
    而临摹的时候,一般建议自己对着参考图来把颜色调出来。
    那么怎么调才能调出非常相似的颜色呢?来了,画重点了!
    在PhotoShop中,我们可以通过颜色选择器中的RGB/HBS两个选择模式来帮助我们调出称心如意的颜色!
    我们在HBS的模式下,先在H上找准参考色的色相,再调亮度(B)和饱和度(S),经过几次调整,我们就能得到想要的参考色了。
    第一次玩HBS肯会对H会有点难控制,毕竟这个需要对色环有足够的了解才能调好。个人建议先记住12色环。

    常用配色方法

    所谓配色方法并不是直接让你记住前辈们用过的色环。
    而配色方法是为了控制颜色与颜色之间的对比而去选择对应的颜色。
    而颜色之间的对比是有“公式”的,这个也是对色环理解的一部分。
    那这个公式就是根据色环上的角度来记忆的。
    有:互补色、对比色、类似色。
    在色环上,任意两颜色之间,按他们形成的夹角来区分,我们可以这样记忆:
    类似色:0°<x<30°
    对比色:0°<x<120°
    互补色:180°
    那么我们来看看前辈们在UI界面的配色方案吧,相信你马上就能感受到每种方法会得出怎么样的感觉的配色方案。
    生活不止代码,还有的Bug!
  • 相关阅读:
    C++——多态
    C++——继承
    PAT1002 A+B for Polynomials
    PAT1001-A+B Format
    C++——运算符重载(下)
    图像处理与Python实现(岳亚伟)笔记二——彩色图像处理
    图像处理与Python实现(岳亚伟)笔记一
    827. Making A Large Island
    995. Minimum Number of K Consecutive Bit Flips (2021/2/18每日一题)
    685. Redundant Connection II (LeetCode 刷题笔记)
  • 原文地址:https://www.cnblogs.com/UIdoer/p/6385340.html
Copyright © 2020-2023  润新知