Date 2026-06-26 20:40:34
编者按:这篇文章写给那些看了一堆色彩理论还是配色不好的同学，@呆呆，L 借助谷歌的Material，教你如何使用它 Design配色板，轻松推广UI 配色达人。
2017年流行色《玩草木绿》！在此了解潘通2017年流行色
很多小伙伴都说自己配色如屎，因为没学过颜色，没画过画，所以每次配色都很小心。
然后在网上搜索各种配色理论，看了冷暖、明暗等术语后开始配色，但还是一坨。...(我也是)
所以有一段时间我特意去了解配色这个东西，发现配色其实并没有那么难，至少没有做平面、广告等设计那么难，UI 视觉界面的配色其实更“简单”(这里说的简单不是配色简单，而是用色简单)。
所以我给大家介绍一个配色利器。
MD 是由 Google 推出的设计语言更适合 UI 视觉界面的配色可以起到更加统一舒适的作用。
MD 显示的颜色比较鲜艳，所以在设备上显示也很有识别性。有时候你看到界面颜色突出，干净简单，一定要遵循 MD 设计的颜色。
它的色彩灵感来自当代建筑，引发了大胆的色彩，与单调乏味的周围环境形成鲜明对比。
包括目前很多优秀的作品，都是按照它的规范设计的。
因为我们今天只谈颜色，如果你对的话 MD 如果其他部分感兴趣，可以上网搜索。 MD 文档。还包括有关文件。 icon、解释如何匹配框架级别、控件等。(建议如果你的英语还可以，最好看原版。)
MD 你可能看不懂给出的官方色谱，所以我做了一套比较清晰的(本来我做的很简单很丑，看了@大植子的色板修改过)。：
这是我在 sketch 里面做的色板，我这次骑自行车 App 这里也借用了设计和颜色，所以颜色看起来会比较舒服。
然而，在使用过程中，我们必须学会限制数量。众所周知，在进行界面设计时，颜色是“越少越好”（简单），因此在众多基本颜色中选择三种颜色值和一种强调颜色进行搭配就足够了。
三种颜色如：
用这三个色值来搭配，可以起到过渡的作用。
举个例子：
看到这个界面，我用了三种颜色，分别用不同的透明度来调度。按钮是地图上显示的一种颜色、两种单词的搭配颜色和颜色。
所以整个界面的基调都在一个范围内，看起来也很统一。
(虽然我做的都是色值设计，但并不代表不能做渐变，原理和上面一样。)
什么是强调颜色？例如，在选择了三个色度值后，如果您想突出按钮，请使用其他颜色的色值作为按钮颜色，以尽可能突出按钮，因此您选择的颜色是强调颜色。
举个例子：
这个按钮的颜色是强调颜色，主要看你怎么搭配。
如果你广泛使用强调颜色，你只需要用透明度来控制不同的位置，而不需要用太多的颜色来强调。
当然，强调颜色是可有可无的。也许当你看到我的界面使用这种颜色时，你会觉得它不匹配。那是因为我的背景颜色都很暖和，所以添加冷色会显得非常突然。这主要取决于您的界面是否多样化，然后根据情况匹配颜色。
我的建议是：在早期阶段，你应该先搭配同一颜色系统的颜色，然后慢慢延伸以进行多色混合和搭配。（这并不意味着单色很容易搭配。事实上，单色更难。这样，建议只是先做好统一，然后做出改变）
很简单，就是界面背景和面板颜色。我选择黑色是因为我做了深色的搭配。但是为什么我的黑色不是纯黑色呢？
其实上面也提到过，因为为了配合我的黄色，我在黑色中加了一点黄色，可以衬托出界面的基调。包括面板，亮黄色，所以看起来比黑色浅，但不会突兀。
这就是主题色的搭配。总的来说还是比较简单的，希望对你有所帮助。
有时当我们看一部作品时，我们会认为它看起来不错，但我们不能说它在哪里好。包括坏作品也是如此。我说不出有什么问题。
这是平时积累和总结的问题。人们常说平时要多看多练，但其实多看多练并不是最重要的。
最重要的是多想想，想想它为什么要这样做，看看官方的设计文档，网上每个人的作品和文章，总结它，变成你自己的知识，否则即使你看到更多，做更多，也不是 Ruan 用的。
欢迎关注作者微信微信官方账号:「呆呆U理」
【优设网 原创文章 投稿邮箱：yuan@uisdc.com】
================优秀设置网=============“优秀设置网uisdc”.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有180万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com