欢迎来到安徽智投网络信息技术有限公司官网 www.zhi-tou.cn!

收藏本站 联系我们 关于我们
当前位置: 首页 > 新闻资讯  > WEB技术 > 在UI设计中色彩的运用

在UI设计中色彩的运用

发表日期: 2018/06/27 文章编辑:智投网络 浏览次数:999 标签: TAG1    TAG2    TAG3   

颜色和其他东西一样,使用起来需要适度。在一个界面中颜色过多会让人找不到重点,而太少友让画面太单调。此时配色方案就是为了摆脱设计中对颜色难以取舍的困难而要必须去做的,以其为基准,在你的设计中灵活运用,让颜色使画面饱满而不杂乱。那如何做到颜色在设计中的平衡,如何让颜色成为你设计的一大利器,我们就此来讨论下。

Color does not add a pleasant quality to design — it reinforces it. ——波纳尔(Pierre Bonnard,1867-1947)(颜色不是给设计添加了优点而是强化了它)

在你的默认的调色板满足不了你的需求时,利用色相、饱和度、明度做出对应调整,将会提供一种不同的表现方式。

60–30–10 原则

室内设计原则是一个永恒的装饰技术,从室内装饰的配色中,可以去年轻松完成你设计的配色方案。60%+30%+10%的比例分配指的是画面中颜色的面积占比,从而让画面的色彩平衡。这种平衡让我们的眼睛从一个焦点自然过渡到另一个焦点。坚持这个原则达到平衡也是很容易做到的。

60%是你的主色调,30%是二色,10%是重音色。

色彩意义

科学家们研究了几个世纪以来某些颜色的生理作用。研究显示,颜色的含义可以根据文化和环境而有所不同。除了理论,色彩是情感和联想的创造者,不同的颜色会让人产生不同情感,也会让人产生无限的联想。这就是为什么你会看到黑白时装店。他们想显得优雅和崇高。

红色:激情,爱,危险

蓝色:平静,负责,安全

黑色:神秘,优雅,邪恶

白色:纯净,沉默,清洁

绿色:新生,新鲜,自然

首先考虑单色设计

在项目设计初期,我们通常从挑选颜色设计配色方案开始,但是这个习惯总会让我们在花了3个小时调整基色后发现,挑选的颜色跟我们的设计初衷不符合,都用不了。

相反,如果强迫自己从开始就专注于间距和布局元素,那会节省很多时间。从单色开始设计的界面虽看上去简单,但从另一方面讲,通过控件元素和分区排版的设计,它看起来并不乏味。如果你想让整个作品看起来更好,可以尝试不同的饱和度或者明度来进行调整。

避免使用纯色和黑色 

课堂和工作上学到的最重要的色彩技巧之一就是避免使用纯灰色。在现实生活中,纯粹的灰色几乎从来没有存在过。黑色也一样。

信自然

最好的颜色组合来自大自然。源于大自然的颜色才是最自然的。而且环境总是在变化,这也为我们的设计提供着无穷尽的方案。为了得到设计灵感,我们只需环顾四周。

保持对比

有些颜色想相互融合,而有些颜色会互相冲突。关于它们如何相互作用的规则是可以在色轮上观察到的。在色轮上相对的一对颜色的对比强烈的颜色,色轮上临近的颜色则是相互融合的。相互融合的颜色虽然看上去比较舒适,但是没有对比就没有突出,适当的运用才会有主有辅。

获取灵感

当我们谈论UI参考的时候,Dribbble是最好的地方。它具有通过颜色搜索的工具,如果当你想对其他设计师使用特定颜色进行视觉研究时,然后去这里:dribbble.com/colors

视频,平面设计,室内设计,时尚…也可以是灵感爆发的地方可供收集。只是不要局限于调色板,而要勤于保存下看到的那些有趣的东西,丰富自己的素材库。

配色工具推荐

为了方便起见,我搜集了一些最好的配色工具可供选择,在2017年获取调色板,他们会为您节省大量的时间。

Coolors.co

这个绝对是我最喜欢的取色工具。 您只需锁定所选颜色并按空格即可生成调色板。 Coolors还可让您上传图像并从中调出调色板。最酷的是,他提供不仅仅是一个结果,而是给了一个选择器,可以随着参考点的更改而变换颜色。

Kuler

这款Adobe旗下的配色工具已经和我们在一起了很长时间。它在浏览器和桌面版本中都可用。 如果您使用的是桌面版本,则可以将配色方案导出到Photoshop中。

Paletton

它类似于Kuler,但不同的是,您不仅限于5个色调。 当您拥有原色并希望使用其他色调时,您可以使用这款很棒的工具。

Designspiration.net

试想一下,你有自己的配色的想法,但你要看到几种颜色组合的例子。 Designspiration是一个伟大的工具。 您可以选择最多5种颜色,并搜索符合您的查询的图像。 真的很好,不仅用于找到具有特定调色板的图像,还可以在设计中实现它们。

ShutterstockLab Spectrum

你可能会问:如果我想用我所选择的颜色搜索照片? 那么,Shutterstock有一个叫做Spectrum的工具,你可以用特定的语气搜索照片。 您甚至不需要订阅,因为具有水印的小预览图像将足以生成调色板。

Tineye Multicolr

但是,如果你想搜索照片中的颜色混合,甚至指定每个颜色的数量,那么Tineye会帮助你。 本网站使用了来自Flickr千万张共享图像的数据库。

最后

掌握配色技巧是一件苦差事,特别是在如今的数字时代。 上面提到的技巧将会减轻工作中寻找正确颜色方案的困难度。 学习创造令人惊叹的配色方案,最佳方法是练习,放松心态重视平时积累,这些将对自己有所帮助。

如没特殊注明,文章均为智投网络原创,转载请注明来自 "http://www.zhi-tou.cn/news/view-51.html"
相关新闻

Validform表单验证总结

近期项目里用到了表单的验证,选择了Validform_v5.3.2。先来了解一下一些基本的参数:通用表单验证…

日期: 2018/06/28 浏览次数:10

IIS7 / IIS7.5 URL 重写 HTTP 重定向到 HTTPS

1、购买SSL证书,参考:http://www.cnblogs.com/yipu/p/3722135.html2、IIS7 / IIS 7.5 下绑定 HT…

日期: 2018/06/25 浏览次数:6

氛围独特情绪深沉的深色系网站,设计上有什么讲究?

在设计中,情绪的传达和氛围的营造通常是要看设计项目的目的是什么,而不同的配色和不同的元素组合…

日期: 2018/06/17 浏览次数:19

百度编辑器UEditor不能插入视频的解决方法

xssFilter导致插入视频异常,编辑器在切换源码的过程中过滤掉img的_url属性(用来存储视频url)_src/…

日期: 2018/06/12 浏览次数:18

谷歌新出的这款 Material Theme Editor 神器,让你做设计又快又好!

本篇文章主要是详细介绍 Material Theme Editor 这款工具如何使用,让大家快速熟悉和了解 Google 的…

日期: 2018/06/12 浏览次数:19

谷歌所说的“整体网页设计”到底是什么概念?

Google 所提出的「整体网页设计」最近被越来越多地提起。对于设计师和开发者而言,它所涉及到的内…

日期: 2018/06/02 浏览次数:22

是时候让你的品牌LOGO也动起来了!

很多设计趋势的诞生,和技术本身的发展是分不开的。趋势和趋势之间的互相影响,也会不断催生出新的…

日期: 2018/06/02 浏览次数:18

如何优化操作流程,提升用户体验?

一、什么是操作流程?操作流程指的是用户为了达到某个目标所需要经历的操作和场景转换。举个生活中…

日期: 2018/05/28 浏览次数:23

百度图片搜索收录展现基础要求

一直有站长通过各种渠道向百度站长平台询问百度图片搜索收录排序的问题,为此我们专程采访了图片搜…

日期: 2018/05/28 浏览次数:24

好的搜索体验,就是好的用户体验

一. 前言搜索就像是用户与app或者网站之间的对话:用户通过提问表达信息需求,app或者网站通过展示…

日期: 2018/05/28 浏览次数:15