设计协作,用摹客

更好的产品协作设计平台,设计师的利器,产品经理的帮手,工程师的伙伴

文章分类
设计1+2,摹客就够了!

摹客,支持Sketch/PS/XD/Figma/Axure设计稿交付、自动标注切图、全流程协作。助力产品团队高效工作!

立即开启
【友情推荐】uimaker - 专注于ui设计,为ui设计师提供ui设计相关教程、素材及灵感。

了解更多
入门教程 了解更多
成都君德鑫力达科技发展有限公司

分享到微信朋友圈:

打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。

博客 > 产品设计 > 用户体验设计师的必备颜色工具

用户体验设计师的必备颜色工具

Linda
2017-11-15
120675


颜色是设计工具包中最有利的工具之一。同时,颜色是一个易混概念——无数种颜色均可组合,因而很难决定使用什么颜色在你的网站或应用程序上。为了让事情更容易, 我已创建了一个可选择调色板的最佳工具列表。我想他们会帮你节省大量时间。本文中列举的工具将会帮助您:

1、找到灵感

2、创建自己的配色方案

3、共享配色方案

1、找到灵感

大自然

其实很多灵感早已围绕身边,而你只需要环顾四周即可获得灵感。出版设计,室内设计,时尚等等,大自然中聚集了如此多鼓舞人心的地方。最好的颜色组合也来自于自然——简单拍下美丽的瞬间,并从图片中创造你的配色方案。

最好的颜色组合来自大自然。你可以从照片中创建一个配色方案。

Behance

Behance发现并展示了来自各个行业的创意专业人士的最新组合的在线作品集。这也是灵感的源泉,要找到新鲜有趣的创意作品,只需按颜色过滤即可。

DribbbleColors

Dribbble是用户界面灵感最好的地方之一。它有用于搜索颜色的工具,所以当你想要对其他设计师使用的特定颜色进行视觉研究时,请点击 dribbble.com/colors ,并选择一种满意的颜色即可。

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

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

Designspiration

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

配色方案最多选择5种颜色

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

Tineye Multicolr

Tineye将帮助您在照片中搜索混合颜色,甚至可以指定每个颜色的比例(色彩比例)。本网站使用Flickr提供的2000万张CreativeCommons图片数据库。这可能是完美的色彩组合获得免费图像的最快方式。

Colorzilla

ColorZilla是Google Chrome和Mozilla Firefox的一个扩展,包括一系列与颜色相关的工具,含有颜色选择器,滴眼器,css渐变生成器和调色板浏览器。

ColorZilla适用于Chrome和Firefox

Shutterstock Spectrum

有时看到色彩方案是否有效的最佳方法是通过选择储存图像。所有主要的图像服务都提供这种工具,但Shutterstock Spectrum有一个特别好的大型预览图像界面。你甚至不需要订阅,因为具有水印的预览图像将足以生成调色板。

2.创建配色方案

Material Design Color Tool

材质设计颜色的工具可以创建、共享和应用调色板到用户界面,以及衡量所有颜色组合的可访问性级别。

Coolors.co

Coolors是创建多色方案的强大工具。您可以简单地锁定选定的颜色,然后按住空格键就能生成新的调色板。这个工具很棒的是不会仅局限于一个结果——只需要修改参考点就可以得到一些配色方案。

使用这个工具也可以上传一个图像,并从中制作一个调色板。

Coolors使您能够上传图像并从中制作调色板。

Adobe Color CC

我们熟知的Kuler工具已经陪伴我们很久了。网站和桌面版本均可使用,使用该工具的Web版本,可以使用色轮创建配色方案:

Color CC可让您创建并保存各种配色方案,每种配色方案都由一组五种颜色组成。

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

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

或浏览“探索”Kuler社区的数千种颜色组合:

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

Paletton

Paletton类似于Adobe Color CC。其不同之处在于,您不限于5个色调,还可以使用其他色调演示。

3.颜色共享:

视觉问题比我们大多数人意识到的更为普遍,全世界有2.85亿以上的人有视力障碍,还有更多的人有低或中等的视觉困难,因此确保为视力受损用户提供特定的配色方案至关重要。

WebAIM Color Contrast Checker

一些颜色互相配合,而另一些则会发生冲突,令人诧异的是,很多网站和应用不能通过AA测试,切不可成为他们中的一员!当和文本一起使用时,检查UI颜色以获得颜色对比度的可访问性至关重要,记得使用WebAIM颜色对比检查器来测试颜色组合。

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

Coolors

Coolors可以测试色盲患者的配色方案,你需要做的就是在界面中选择颜色。

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

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

选择一种色盲模式。

一个有色差的人将会看到你的配色方案。

一个红色色盲患者看到的配色方案

NoCoffee Vision Simulatorfor Chrome

NoCoffeeVision Simulator可用于模拟在谷歌浏览器中色盲患者查看到的页面上的颜色视觉缺陷和低视力的状况。例如,使用“颜色不足”设置“红色色觉弱视”,您可以查看灰度网页。

红色色盲患者看到的CNN网站

总结


上面提到的工具将会让你更轻松的找到正确的颜色组合。要牢记,想创建令人耳目一新的配色方案的最佳方法是多多练习。

作者: Nick Babich

地址:https://uxplanet.org/essential-color-tools-for-ux-designers-530036eaf9ae


上一篇
Mockplus三周年设计大赛前30名已入围

Jongde   11/16

设计师看过来:怎样让你的UI作品集脱颖而出?

Vincent   11/14

下一篇
需要帮助?

我是小摹,你的7*12小时产品顾问

立即扫码加入官方微信群

官方热线:19130671449

服务邮箱:service@jongde.com