ui网站设计色带（UI设计配色）
本篇文章给大家谈谈ui网站设计色带，以及UI设计配色对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
学UI设计中有啥配色网站推荐？
1.Flat UI Colors
这个网站提供了多种主流 UI 配色方案，有明度和饱和度的对比，点击色块就可以直接复制颜色，非常方便。
2.Colorhunt
这是一个非常简洁，但非常好用的配色网站，你可以自己创造并分享喜欢的色彩搭配，也可以在这里查看大师们常用的配色方案，还可以给喜欢的配色点赞。
3.LOL Colors
这是一个非常简洁，但非常好用的配色网站，设计师可们可以在这里找到很多色彩组合，把鼠标移动到不同颜色的水滴上会提示色彩代码(Hex Code)的颜色值。
4.WebGradients
这个网站收录了非常多的渐变色彩，大概有 180 种，都非常的美观。点击一下就色彩就可以大图预览，喜欢的话可以下载 png 图片，很方便。这些渐变色作为PPT的背景非常合适。
5.Uigradients
以分享美丽渐变色彩为主的分享站，里面接近上百种渐变配色方案，设计师可根据自己风格来选择搭配。
6.adobe color cc
这款是 Adobe 官方出品的配色工具，里面有很多配色的模式，比如单色系，三元色，互补色等，它可以通过不同色彩规则来提供配色参考。
希望对你有帮助～
UI设计中的颜色: (实用) 框架
就UI设计而言，我非常自学，我总是想知道为什么这么多的文章和书籍谈论色彩理论和调色板。根据我的经验，使用“拆分互补调色板”约为0％预测我制作漂亮的设计。
对于那种事我还有另一个词： 没用 。
因此，如果色彩理论不能为UI设计中的色彩提供坚实的基础，那么它是什么呢？
让我对ya'发表意见：颜色 修改 。这是对颜色的调整，而不是从颜色理论帽子中挑选它们。
或者，换句话说：着色界面设计的 基本 技能是能够将一种基色 修改 为 许多不同的变化 。
我知道这听起来有点奇怪。听我说。我将为您提供一个在UI设计中调整颜色的框架。
该框架将：
* 允许您为UI中的任何目的修改 一种主题颜色 （这非常强大，而且，正如我们将看到 的，像facebook这样的应用已经在做什么）
* 帮助您 预测哪些颜色变化看起来 不错
* 使色彩显得 更客观 （“主观”往往是“我还没有想出如何工作的”一个字-这是一个字，你听到 吨 ，当人们谈论的颜色）
我注意到许多外观漂亮的界面有一件事是它们通常在特定的主题颜色上有更暗更轻的变化。
您不认为搜索栏只是半透明的黑色叠加层，是吗？剧透警报：事实并非如此。在该蓝色上没有覆盖黑色的不透明度将为您提供搜索栏的颜色。这是一些其他魔法挑选的变种。
快点，现在看看漂亮的冲浪预测应用程序Swell Grid。
沙BAM。我们刚刚遇到了大量的变化。那里有多少？前往 网站 和你自己算他们。实际上，此页面上的所有内容都是初始蓝色的变体。
或者，这是另一个简单的例子：
甚至元素 状态 也是颜色的变化。这不是最好描述为“3个蓝调的调色板”。这是一个蓝色的变化。
但这引出了一个问题： 你如何实际 修改 颜色以获得良好的变化？
我们会到达那里，但我希望你从头开始理解这些东西。所以这是我们的2个可信赖的原则来解决这个问题：
1、我们将以 现实世界为参考线索 。即使我们的界面是“假的”，我们仍然会像现实世界 一样疯狂地复制，因为经过几十年在现实世界中看到事物，我们只 希望 光和颜色以 某种方式工作 。
2、 我们将使用 HSB颜色系统 。缺点是：它是最直观的颜色系统，具有广泛的用途 （就我的目的而言，Sketch和Photoshop）。如果你不知道什么是色调，饱和度 和亮度，让我们 休息 并在10点回来。
好吧，环顾四周。什么“颜色变化”你无疑会看到你每次浏览房间时的二十几个实例？
阴影。
您可以将阴影视为基色的较暗变化。
现在，让我们跳进素描和让我们的拾色器，并找出 究竟 发生了什么，当一个影子落在我们的珊瑚墙。
就像我提到的那样，我们将在HSB中解决这个问题。
亮度向下移动 - 好的， 这 很明显。但是坚持 - 在我们进行过多概括之前，让我们看看另一个例子。
阴影在古巴的运作方式是否相同？我们即将发现。
好的，现在我们可以比较和对比。注意一个模式？
当颜色存在阴影变化时，您可以预期 亮度 会 下降 并且 饱和度 会 上升 。我们只是在两个例子中看过这个，但 据我所见，这是一个可靠的规则 。
现在的色调有点疯狂-它去 下来 的珊瑚墙的影子，而 向上 的水鸭墙的影子。还有 就是 对于一个解释，但重要的是要少得多，有点比饱和度/亮度更深奥的-所以我们会回来以后色调。
让我们更多地解开这些概念。
如果你回顾我们的Facebook搜索栏示例，你会发现这正是发生了什么。
随着亮度下降，饱和度上升。搜索栏不能覆盖在基础蓝色上的黑色不透明度的原因是因为在HSB中， 添加黑色 相当于 降低亮度 。相反，我们希望 在增加饱和度的同时 降低亮度。黑色不会为我们的颜色添加任何饱和度！
为什么在现实世界中，较暗的颜色与较高的饱和度相关？我没有丝毫想法。但我总能做出一些事情： 这是因为随着光线强度（亮度）超过颜色强度（饱和度），颜色必然会变得更加褪色 - 反之亦然。
这可能是完整的BS，但它 那种 是有道理的，对不对？
现在，作为精明且博学的读者，你是，你可能猜到了相反的变换，它为我们提供了 更暗的变化 会给我们带来 更轻的变化 。
然后你把它钉在了一边。
当然，我们可以更进一步。如果我们继续降低饱和度并提高亮度直到奶牛回家，我们最终会在哪里？
这里：
你能想到的 制作更轻的变化 作为 加入白 。在Sketch等人中有两种非常简单的方法可以 将 颜色 添加 到颜色中：
1、减少元素的不透明度（如果它在白色背景上）
2、在元素顶部添加半透明的白色层
如果您只记得本文中的一件事，请记住：
通过降低亮度和增加饱和度来实现更暗的颜色变化。通过增加亮度和降低饱和度来实现更亮的颜色变化。
有了这个简单的想法，你就可以用一种颜色做出惊人的事情。
事实是，元素之间的颜色变化很多 - 甚至是相同元素的状态 - 只是简单的颜色修改。
这是 Harvest ，我使用和爱的时间跟踪应用程序。
看看标题。悬停状态较轻。选定的状态更暗。
或者查看绿色的New Entry按钮。
悬停状态是更暗的变化 - 更高的饱和度，更低的亮度。
你会 一次又一次地 使用它。
公平地说，并非每个设计都100％遵循此规则。在上面的Harvest标题中，所选状态 只是 较低的亮度（饱和度不变），而悬停状态 只是 较低的饱和度（亮度不变）。但我们已经看过颜色在现实世界中是如何工作的，我们知道为什么这些设计看起来很好是因为它们 接近 这里列出的原则。
说到 接近这里提出的原则 ，我们应该谈谈色调。我也在上面说过，但是需要重复一遍：色调是整个 饱和度和亮度向相反方向移动的 次要因素，你可以在进行颜色调整时完全忽略它。
话虽这么说，这是最简短的解释。
首先，每种颜色都有一种“感知亮度”。这称为 光度 。
即使这个蓝色和这个黄色都是100％的HSB亮度，它 看起来 更亮？
我的意思是，就像在街上问任何人： 哪个更亮？
“嗯。黄色。黄色？”
谢谢，rando。你刚刚发现了光度。
“所以我说对了？”
是的，是的，你是。即使你保持亮度和饱和度不变， 只是改变色调 ，你也会得到 一系列的亮度 或感知的亮度，我们测量的值在0到100之间。
这些是我们30°间隔的色调，均为100％饱和度和100％亮度。
而 这里 是我们的色调复制，投入光度混合模式（在白色背景上-这是至关重要的，如果你沿着素描以下添加），并用所得灰色的亮度覆盖。这使我们可以测量原始颜色的亮度。
在Luminosity混合模式中， 亮灰色 表示 高亮度 ， 深灰色 表示 低亮度 。如果你考虑一下，这是完全合理的。
现在，我已经为你打印了这些数字，但是图表价值一千，对吗？
看，Sherlock，一种模式。
这个特殊的模式从上面回答了我们的问题。还记得我们看到的有时候，对于阴影，色调会 向下移动 ，有时它会 向上 移动吗？为什么这样做？
嗯，首先，请注意此图表有三个最大点和三个最小点。低点是红色，绿色和蓝色。高点是青色，品红色和黄色。
这些特殊颜色会响铃吗？是。RGB和CMY是流行的颜色系统，但 暂时忽略它 ，因为它会让你误入歧途。
重要的一点是：如果您不计算饱和度和亮度，将色调偏向红色（0°），绿色（120°）或蓝色（240°）将 降低 亮度或感知颜色的亮度。并且将色调移向黄色（60°），青色（180°）或品红色（300°）将 增加 颜色的感知亮度。
诀窍是 让色调的移动与饱和度和亮度的移动相匹配 。如果您想要更暗的变化，请将色调移向红色（0°），绿色（120°）或蓝色（240°），取最近者 - 反之亦然（青色，品红色和黄色），以获得更轻的变化。（当然，这假设你也降低了亮度并增加了饱和度）
这就是为什么珊瑚墙上的阴影在色调上 向下 移动- 它在0°时向红色移动，这是最接近21°的最小点。
这就是为什么青色墙上的阴影在色调上 向上 移动的原因- 它在240°时向蓝色方向移动，这是最接近194°的最小点。
心灵吹了吗？
因此，当谈到颜色变化时，问问自己：我是否只需要对我已有的颜色进行更浅或更暗的变化？
（如果你想要一些干净简单的东西，答案是这样的，所以经常 是的 ）
更暗的变化：
* 亮度下降
* 饱和度增加
* 色调（经常）向最低光度（红色，绿色或蓝色）移动
更轻的变化：
* 亮度增加
* 饱和度降低
* 色调（经常）向最大光度移动
这将允许您采用一种色调，但可以根据您的所有UI需求无限修改它，在适当的情况下使用更暗更轻的变体。
我刚刚在这里掀起了一个简单的例子。整个界面由单一颜色构成。说...... 那种深青色的阴影看起来很熟悉 吗？
现在我对所有这些都非常简短。仍有许多主题需要涵盖：
在 梯度 和 数据可视化中， 色调 如何更为重要？
* 当你在素描（等）时，你使用什么技术来制作 更暗的变化 ？
* 你更多地 移动饱和度或亮度 吗？
* 你如何找到与你的配色方案相匹配的 灰色 ？
* 你如何选择看起来很好的 完全不相关的颜色 ？
* 当颜色 发生冲突 时，你如何解决它？
而且，当然，只是，为什么 是 在光度曲线RGB和CMY低/高点？
你问我很高兴。
介绍...学习UI设计
在过去的11个月里，我一直在努力创建 最全面的 在线视频课程，用于学习 界面设计 的 实用技巧 。
我们在这里谈论 一切 ：
* 颜色
* 活版印刷
* 布局
* 处理
* 响应式设计
* 和更多…
该课程包含超过 30个视频 课程中的 16个小时 以上的 视频 。
在几乎每个视频中，你都会 看到我在Sketch中的设计 。这个很重要。我这里没有教授一些理论框架。相反，我向您展示的是我每天用来设计界面的提示，技巧和框架。把它想象成看着我的肩膀，因为我教会了你所知道的一切。
例如，在Spacing视频中（是的 - 这是一个 完全 在空白上的50分钟视频），我从一个简单的基于文本的示例开始，讨论如何处理字母间距，行距，段距，空格标题和正文之间，文本旁边的空间等
三米工作室“大吉大利”小组的每周优质设计文章汉化计划--10篇--《Color in UI Design: A (Practical) Framework》。
Medium英文原文链接:
UI设计的颜色搭配方式！
色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用，一个好的UI色彩提案可以起到：
1）显示界面的整体架构
2）明确视觉层级关系
3）营造界面整体风格，甚至增加转化
UI色彩搭配方案
单色搭配
基于一种颜色，以色调和饱和度区分层次。
单色永远是一个经典且安全的配色方案。
相邻颜色搭配
选择色轮上相邻的颜色。
这种类型的配色方案用于不需要对比度的设计，包括web或banner的背景。
高对比搭配
选择色轮上对立面的颜色混合，提高对比度。
例如：蓝色背景上的橙色按钮非常吸睛。
协调对比搭配
这个方案与上一个方案类似，但是它采用了更多的颜色。
例如：如果选择蓝色，则需要取其对立面中，相邻的2个其他颜色（即黄色和红色）。
这里的对比度不如【高对比方案】那么强烈，但它允许使用多种颜色。
三色搭配
当设计需要更多的颜色时，可以尝试三色方案。
为了画面的平衡，建议使用一种颜色作为主导，另一种作为辅助。
想学习更多UI设计相关知识，从软件开始，附赠教程点击（UI设计）获取
色彩在UI设计中的作用有哪些?
1. 加深品牌印象与品牌感
一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，例如闲鱼、马蜂窝等，主色都采用了黄色，因为黄色具有非常活泼的特性。另外，有一点一定要注意，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用，所以在色彩选择上还是要谨慎。
2. 引导用户视觉来增加易读性
大家应该都有所体会，色彩的运用会将整个页面的层级凸显出来，而不单纯的用中性色来区分层级。所以在界面中，什么样的地方使用色彩是有讲究的。在设计中，通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩，这样做的目的就是提升易读性。
3. 区分信息交互的状态
同样是设计作品，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的「4.7万」和「展开」却不一样，「展开」使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性──点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱。
另外，UI 设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺 app 中播放详情页面，当前版块标签和正在播放剧集的激活状态。
4. 营造氛围传递热度
色彩除了上述所说的不同使用之外，在图片和整体氛围营造中也起了很大的作用，目前很多 2c 的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销版块的瓷片区域都会用品牌色在活动时段内进行氛围打造。
以上就是小编分享的色彩对于UI设计的重要性，对于想要学习UI设计配色的小伙伴们来说，掌握这些内容很重要。最后，希望大家都成为一名优秀的UI设计师。
网站进行UI设计需要注意哪些问题
1，手机分辨率是根据屏幕来做的，所以看下你面对的客户群是用多大的分辨率的手机。至于电脑现在还是以1002左右作为宽度，因为适用度高，但是并非所有都按标准设定。
2，现在都直接电脑绘制了，主要是使用矢量软件，如AI等。PS画位图和扫描的位图都有马赛克和体积大缺点，所以现在很少用了。
3，UI部需要会代码，UE才需要，等你做到经理以上再考虑代码问题，当然业余时间可以学些，这样有竞争力。
4，没有作品也没有关系，只是面试吃亏，学校出来就算你做的很牛天下第一，工作经验还是0，一分钱不值，一般来说要工作3年以后才算经验者，这个时候跳槽或换工作才会有人仔细考虑你的能力问题。至于作品是面试时候保持优势的东西，设计类型应该有重点由目标，你可以搜索一些企划案按这些企划来制作，注意目标和把握方向。别自己发挥自己想画什么就画什么，而是有一定指向性的。
关于ui网站设计色带和UI设计配色的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
