更多

金豪  
“精品素材”   花瓣

浅析UI设计中的颜色运用 推荐作品

分类: 主页 UI设计网 文章

作品版权:归作者所有,禁止匿名转载;禁止商业使用。

作品人气
1312

居住地 / 职业
2017-3-22 16:33:31

  颜色是ui设计中不可避免要考虑的问题,也是所有设计甚至是生活中的穿衣,室内搭配等等都需要考虑颜色的搭配。颜色并不能提升你设计的质量,但它可以强化你的设计质量。颜色与其它东西一样,适量才会运用得当。如果在你的配色计划中坚持使用马克斯三原色的话,你会得到更好的配色结果。如果你想获得调色板之外更高一级的颜色,那么你可以使用色调和饱和度,它们可以给你提供不同的风格。下面讲一下UI设计中的颜色运用。
  60-30-10法则
  这个配色秘诀是一个省时的技巧,可以帮助你把颜色更好地组织起来。60%+30%+10%的比例可以让你的配色达到平衡。这个公式的秘诀在于它能营造出平衡的感觉,让眼睛很舒服地从一个视觉焦点移动到另一个视觉焦点,并且这个公式用起来很简单。
  60%是你的主色调,30%的二次色,10%是你的强调色
1.png
  墙漆、 家具、饰品
  颜色的意义
  科学家们几个世纪以来对颜色的物理效应进行研究。除了美学以外,颜色还是情绪和联想的创造者。颜色所表达的意义取决于不同的环境和文化。这就是为什么你会看黑白时尚商店,因为它们也希望被优雅而高尚地展现出来。
2.png
  Asos用纯黑白和浓度较低的绿色搭配,它这么设计是有原因的。
  红色:激情、爱、危险
  蓝色:宁静、负责、安全
  黑色:神秘、优雅、邪恶
  白色:纯洁、沉默、清洁
  绿色:崭新、新鲜、自然
  如果你想知道更多,请参照如下颜色文化:
3.jpg
  灰度第一
  我们喜欢在做设计时,第一件事情就是玩颜色和色调,当你感觉到你经花了3个小时在调整原色和配色时,你发现这种行为其实是背叛你的。它实在是有吸引力但是你需要避免这种态度。
  也不要让你自己的注意力集中在间距和元素布局上,从而节省大量时间,这样约束自己产生的效率是非常高的。另一方面,也没必要一直看到让自己烦燥的地步。如果你想让它好看一此,可以多尝试几种风格。
4.png
  这是我发布在追波上的一个作品,运用了单色并且视觉焦点集中在了元素上。
  远离纯灰度和黑色
  我曾学到一个重要的配色技巧是,避免使用不饱合的灰色。在现实生活当中,不存在纯灰,纯黑也一样。
5.png
  这张图上最黑的颜色,不是#000,而是#0A0A10
  记住要在颜色上增加饱合度。这样,潜意识里会看起来更自然让用户更舒服。
6.png
  相信大自然
  最好的配色来自大自然。他们看起来总是很舒适。观察环境来获取配色灵感的最大优势是大自然的调色板是一直变化的。
  我们只要看看周围就可以获得配色灵感了。
  保持对比
  有一些颜色搭配在一起很和谐,可是和别的颜色搭在一起就会起冲突。观察色轮可以明显地发现颜色之间是怎样相互影响的。你应该掌握这种方法,但这也不是必须的。
7.png
  获得灵感
  众所周知追波是UI设计找参考最好的网站。追波提供一种根据颜色查找的工具,当你想根据视觉搜索,看一下其它设计师是怎样运用流行色的时候,可以来这里查看:dribbble.com/colors.
8.png
  从很多灵感来源,像视频、平面设计、室内设计、时尚设计等。不要仅仅局限说当前的调色板,你可以随时保存下那些看起来不错的颜色。
9.png
  我喜欢常常从韩国的流行文化短片偷取颜色,它们看起来很绚丽。
  工具
  工欲善其事,必先利其器。我收集了一些最好的颜色选择工具,2017年可以用来选择实用的调色板。它们会为我节省很多时间。
  Coolors.co
  这是我最喜欢的一款拾色器。你可以轻松地锁定选中的颜色,按空格键生成调色板。Coolors还提供上传图片生成色板的服务。而最酷的是使用这个工具的时候,不仅可以输出,而可以用拾色器让你修改参考点。
10.png
11.png
  Kuler
  这是一款来自Adobe的工具,已经问世很久了,它可以在浏览器中使用。也有桌面版本。如果你使用桌面版本,你可以直接把颜色导入到ps里。
12.png
  Paletton
  这一款工具和KULER类似,不同的是这款工具不限于5种色调。当你有了主要颜色,并且想要更多的色调的时候,这绝对是一款非常赞的工具。
13.png
  Designspiration.net
  想象一下,你已经有了一套配色方案,你想看下这个方案在实际运用中是啥样的,这时候,Designispiration绝对是一款非常赞的工具!你可以吸5种颜色,根据这5种颜色搜索图片,因此它可以满足你的需求。最酷的点在于,不仅可以用这个特殊的调色板搜索图片,而且能真实地运用到设计当中。
14.png
  Shutterstock Lab Spectrum
  你可能会问:如果我想根据我选的颜色搜索图片该 怎么办?,那么,SHUTTERSTOCKE 有一个叫做SPECTRUM的工具,你可以用它来搜索指定色调的图片。你甚至不用保存下来,因为带水印的小预览图已经足以生成一个调色板了。
15.png
  Tineye Multicolr
  如果你想在图片中搜索混合颜色甚至指定数量的颜色,那么TINEYE可以帮助你。这个网站从Flickr获取了一千万知识共享照片,组成了数据库。
16.png
  最后的思考
  颜色是一种比较难把握的概念,尤其是在数字时代。上面提到的技巧可以在工作中帮助你容易地找到合适颜色。想要创建出惊艳的配色方案,最好方法是不断的练习,把他当成你热衷的兴趣,把练习颜色搭配当成你的玩伴去练习!那今天的浅析UI设计中的颜色运用就到这里了。以上由丝路教育http://www.silucg.com?wx整理提供。
17.png

1喜欢
    作者其他作品

/
2017-3-22 16:33:31 发布


感谢支持
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

全部评论(0)
“2016精品素材” 素材 金豪印刷 花瓣网

快速回复 返回顶部 返回列表