UX设计人员必备的配色工具

UX设计人员必备的色彩工具

UX设计人员必备的配色工具

颜色是设计师工具包中最强大的工具之一。同时,颜色是一个很难掌握的概念-那里有无限多种可能的颜色组合,很难决定要在您的网站或应用程序上使用哪种颜色。为了使事情变得容易,我创建了一个用于选择调色板的最佳工具列表。我相信他们会为您节省很多时间。在本文中,您将找到可以帮助您的工具:

  1. 寻找灵感
  2. 创建自己的配色方案
  3. 使配色方案可用

1.寻找灵感

性质

您周围已经有了很多灵感。要获得灵感,您只需要环顾四周。印刷设计,室内设计,时尚……有很多启发性的地方可以聚集。最好的色彩组合来自大自然-只需拍下美丽瞬间的照片,然后根据这张照片创建配色方案即可。

最好的色彩组合来自自然。您可以根据镜头创建配色方案。

行为

Behance展示并发现了各行各业的创意专业人士在顶级在线作品集中的最新作品。这也是灵感的绝佳来源。要查找新鲜有趣的创意作品,只需按颜色过滤即可。

盘带颜色

Dribbble是获得用户界面灵感的最佳场所之一。它具有按颜色搜索的工具,因此当您要对其他设计师如何使用特定颜色进行视觉研究时,请访问dribbble.com/colors并选择所需的颜色。

您还可以指定包含颜色的镜头的最小百分比(例如,镜头为蓝色的30%)。

指定包含色彩的镜头的最小百分比

设计灵感

当您对调色板有想法但想要查看这种混合示例时,Designspiration是一个很棒的工具。您最多可以选择5种颜色并搜索与查询匹配的图像。

为您的配色方案选择多达5种颜色

Designspiration将根据您选择的颜色提供相关示例

Tineye Multicolr

Tineye将帮助您搜索照片中的多种颜色,甚至指定每种颜色的数量(色彩比例)。该网站使用了来自Flickr的2000万张Creative Commons图片的数据库。这可能是获得完美色彩组合中免费图像的最快方法。

卡洛斯拉

ColorZilla是可用于Google Chrome和Mozilla Firefox的扩展,其中包括大量与颜色相关的工具,包括颜色选择器,滴管,css渐变生成器和调色板浏览器。

适用于Chrome和Firefox的ColorZilla

Shutterstock Spectrum

有时,查看配色方案是否可行的最佳方法是选择库存图片。所有主要的股票图像服务都提供这种工具,但是Shutterstock Spectrum具有一个特别漂亮的界面,可显示大型预览图像。您甚至不需要订阅,因为带有水印的预览图像足以生成调色板。

2.创建配色方案

物料设计颜色工具

通过Material Design Color Tool,可以创建,共享调色板并将其应用于UI,还可以测量任何颜色组合的可访问性级别。

Coolors.co

散热器是创建彩色方案的强大工具。您只需锁定选定的颜色,然后按空格键即可生成新的调色板。该工具的妙处在于,您不仅限于一个结果-只需修改参考点就可以接收一些配色方案。

使用此工具,还可以上传图像并从中创建调色板。

冷却器使您能够上传图像并从中制成调色板。

Adobe彩色CC

以前称为Kuler的工具已经存在了很长时间。它可以作为Web和桌面版本使用。使用该工具的网络版本,可以使用色轮创建配色方案:

Color CC使您可以创建和保存各种配色方案,每种配色方案均由五种颜色组成。

从现有图像创建配色方案:

从现有图像创建配色方案。

或在“ 浏览 ”部分中浏览来自Kuler社区的数千种颜色组合:

如果使用的是桌面版本,则可以将配色方案直接导出到Photoshop,Illustrator和InDesign中。

帕莱顿

Paletton与Adobe Color CC类似。区别在于您不仅限于5种音调,而且可以播放其他音调。

3.颜色可访问性

视觉问题比我们大多数人所意识到的更为普遍。全世界有2.85亿人有视力障碍。许多人的视力障碍较低或中等。确保有视觉障碍的用户可以访问选定的配色方案是至关重要的。

WebAIM色彩对比检查器

有些颜色彼此搭配得很好,而另一些则会发生冲突。令人惊讶的是,有多少网站和应用未通过AA测试。不要成为其中之一!与文本一起使用时,必须检查UI颜色是否具有颜色对比可访问性。使用WebAIM颜色对比度检查器测试颜色组合。

WebAIM颜色对比度检查器是基于浏览器的工具,可以测试以十六进制值指定的颜色代码。

冷却器

冷却器可以测试色盲情况下的配色方案。您需要做的就是在界面中选择颜色。

选择一组反映您的配色方案的颜色

将模式从“正常”更改为您要测试的模式。

选择一种色盲

您将看到一个色彩不足的人将如何看待您的配色方案。

皮肤异色症患者如何看待配色方案

适用于Chrome的NoCoffee视觉模拟器

NoCoffee Vision Simulator可用于在Chrome浏览器中查看的任何页面上模拟色差和弱视情况。例如,使用“色彩不足”设置“十色盲”,您可以查看灰度的网页。

患有软性盲的人将如何看CNN网站

结论

上面提到的工具将简化寻找正确颜色组合的工作。请记住,学习创建惊人的配色方案的最佳方法是进行大量练习。

0
分享到:
每天更新,全站高品质素材免费下载! 申请VIP会员
没有账号? 忘记密码?