首页科技娱乐体育干货女人设计时尚旅游美食语录健康

如何在UI中使用颜色

2017-04-09 08:55:00来源:20区编辑:转角遇见你

如何在UI中使用颜色

?点击上方“交互设计学堂”关注我们,送电子书


颜色像其他事物一样,要适度的使用。如果你用三原色的配色方案,会得到更好的结果。在项目中运用色彩有很多的平衡,而且你使用的颜色越多,实现平衡就会越复杂。颜色不是在设计中增加愉悦感,而是加强了。如果你需要定义的调色版之外的颜色,试着利用色调和明暗度。这将提供整体一个不同的色调。


60-30-10规则

这个室内设计规则是一个永恒的装饰技巧,你可以很容易的出一个配色方案。60% + 30% + 30%的比例是为了平衡颜色。这个公式创建了一个平衡感,让眼睛可以舒服地从一个焦点移动到下一个焦点。使用起来也是非常简单的。

60%是你的主色调,30%的次要颜色,10%的突出颜色。

墙漆,家具,饰品。


颜色的意义

几个世纪以来科学家们研究几个特定颜色的生理效应。除了美观,颜色是创作者的情感和联想。颜色的意义取决于文化和环境。这就是为什么时尚的店铺是黑色和白色的。他们想要呈现出优雅和高尚。

Asos是用的黑色与白色加绿色的CTA。这是有原因的。

  • 红色:激情、爱、危险

  • 蓝色:冷静、负责任的、安全的

  • 黑色:神秘、优雅、邪恶

  • 白色:纯洁、沉默、洁净

  • 绿色:新的、清新、自然

如果你想要了解更多查看这个列表——颜色文化http://seopressor.com/wp-content/uploads/2015/06/colour-culture1.png)。


灰度优先

早在设计之前我们就喜欢摆弄颜色和色调,但你很快就会意识到你已经花了3个小时在调整原色…虽然这真的很诱人,但你应该学会避免这种态度。

强迫自己关注间距和布局的元素。这会节省你很多时间。这种约束生产效率是非常高的。其次,它看起来需要不无聊。尝试用不同的音调让它好看起来。

这是我在在dribbble上的一个作品。简单的色彩,更加关注元素。


远离纯灰度和黑色

我曾经学到最重要的一个颜色技巧是避免使用没有饱和度的灰色。在现实生活中,纯灰色几乎从不存在。这同样适用于黑色。

最深的颜色不是# 000,而是# 0a0a10

记得给你的颜色加一些饱和度。潜意识里会看起来更自然、熟悉。



相信自然

最好的颜色组合是来自大自然。他们总是看起来自然。关于在自然中寻找设计的解决方案的优势是调色板不断的变化。我们只需要看看周围就能得到启发。


保持对比

有些颜色在一起会很和谐,而和其他颜色配在一起就会冲突。对于如何配色是有一定的规则的,可以观察在色轮上的颜色。

如果你想了解更多关于色彩理论,查看——色彩理论:创建自己的调色板https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/


启发

当我们谈论UI时,dribbble自然是最好的地方。它也有搜索颜色工具,当你想做视觉研究看其他设计师如何运用某种颜色,查看这里:dribbble.com/colorshttps://dribbble.com/colors/)。

视频、平面设计、室内设计、时尚…有会很多令人得到启发的地方。只是不要懒惰,加入你的调色板并保存看起来很有趣的东西。

通常我喜欢从韩国流行的视频中偷颜色。他们是很好看的。


工具

更容易些,我搜集了一些2017年好用的工具可以选择配色的调色板。这会节省你很多时间。


Coolors.co

这是我最喜欢的选择颜色的工具。您可以简单地选择颜色在媒体空间生成调色板。Coolors还允许您上传图片然后吸取它的颜色。更酷的是,并不局限于只有一个结果,你有一个选择器可以修改参考点。


Kuler

这个工具是Adobe公司的,用了很长一段时间。可以在浏览器中使用,也有桌面版本。如果你使用桌面版可以导出一个配色方案到Photoshop。


Paletton

和Kuler相似但不同的是可以得到5个以上的配色。当你有了一个原色,想要更多色调的颜色时这是个很好的工具。


Designspiration.net

想象一下你有一个颜色的想法,但是你想看到这种混合的样子。Designispirationhttp://designspiration.net将是一个很好的工具。你可以选择5种颜色查询和搜索图像。这不仅是一个很好的寻找图像的面板也可以用在现实的设计中。


Shutterstock Lab Spectrum

你可能会问,如果我想寻找自己选择的颜色的照片呢?接下来,Shutterstock

有一种叫做光谱的工具,可以通过特定的色调搜索照片。你甚至不需要订阅,因为预览图像,带水印的图像就可以产生调色板。


Tineye Multicolr

但如果你想搜索混合颜色的照片,甚至指定具体的数量,Tineye可以帮到你。这个网站从Flickr中使用一个一千万数量级到数据库。


总结

颜色是一个棘手的概念,尤其是在数字时代。上面提到的技巧将帮助您在工作中找到合适的颜色。创造出惊人的配色方案最好的方式是经常练习。

原文地址:https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753#.qv340kp79

作者地址:https://blog.prototypr.io/@acreno?source=post_header_lockup

译文地址:http://www.ui.cn/detail/224976.html

译者:厉嗣傲

欢迎投稿:anhejiao@126.com


加老D私人微信18605817040,和老D一起学交互,老D会在朋友圈多发干货文章哦。新手小伙伴可以问老D3个专业问题哦。


交互设计学堂已经开设了新的栏目-行知书院,旨在帮助小伙伴们来高效的学习现在市面上优秀的用户体验书籍比如《交互设计精髓》等等,同时结合老D的工作经验来帮助你们从不同的高度和角度来解读书中的内容。每天一课,积少成多。已有134位小伙伴加入。详细了解行知书院

交互设计学堂(jhsjxt)

 查看原文