恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计如何用色
0.0°
2017-07-24 好文转载 经验/观点 原作者: 未知 举报 799 2 1 0

设计如何用色


颜色可以表达一切,最好的用色技巧是节制。如果你最大限度的遵从三原色,那么结果一定不会差。色彩的运用一定要在平衡上多下功夫,运用的颜色越多,越难达到平衡。


为什么你的设计水平提高不了?因为你看得书少啊!!100+本精选设计书籍免费送啦!提升学习必备!领取v 信:242283 6284


Image title




颜色在设计中的作用相当于锦上添花。—— Pierre Bonnard


如果你需要色盘以外的颜色,或者加阴影和色泽,都会给作品添加不同的色调。


60-30-10原则


这个其实是一个永恒装修设计原则,但是却能帮你更加容易的生成颜色系统。60%+30%+10%的百分比分配可以保持色彩平衡。这个公式很有效,因为它能营造出一种平衡感,帮助眼睛从一个焦点平缓的移动到另一个焦点。同时,这个也是十分简单易用的公式。



主色相占60%,次要颜色占30%,装饰色占10%。

 

颜色的含义


近几个世纪,科学家都在研究某些颜色带给人的心理影响。除了美学上,颜色也是情绪和关系的创造者。但是颜色的含义会因风俗习惯和环境的变化而变化。这就是为什么你看到很多时尚的电商会用黑色和白色。他们想表现优雅和令人赞叹的。


 


红色:热情、爱和危险
蓝色:冷静、理智和安全
黑色:神秘、优雅和邪恶
白色:纯洁、安静和干净
绿色:新鲜、新生和自然


 

下面是不同地区对颜色的不同理解:


统一灰度值


我们喜欢在设计初期纠结于颜色和色调,然而当你发现你花了3个小时在确定基础色的时候,很快就会让你意识到这样的行为多么愚蠢。虽然很容易陷入这样的情绪,但是你要学会克服这样的情绪。


相比于聚焦在间隔和元素布局上,通过调节颜色会帮你节省很多时间。这种限制是很高产的,不要觉得无聊,通过调整色调,你就能让作品看起来好很多。


下面是一个你可能在dribbble上看过的作品,通过单色和聚焦的元素让整更作品看起干净整洁。


 

远离纯黑和纯灰

你可能听说过这个颜色使用小技巧:不要使用没有饱和度的灰色。在现实世界中纯灰色几乎不存在。同样,纯黑色也不存在。

 

记住,给你的颜色多加一些饱和度。潜意识里用户看这样的颜色更自然更熟悉。

 

相信自然

最棒的颜色搭配来源于自然界。这些组合看上去十分自然,所以最好解决设计问题的方案是环顾四周替换色盘。


环顾四周就会获得灵感。


保持对比

有些颜色跟其他搭配效果很好,但是有些会很冲突。颜色最终是否能很和谐可以从色相环里观察出来。你应该知道这个方法,但是没必要手动做。

 

如果你想了解更多查看色相环的理论,Color Theory For Designers: Creating Your Own Color Palettes


获取灵感

当我们在dribbble上找参考找灵感的时候,还有个更好的地方。dribbble.com/colors

 


视频、印刷品设计、室内设计以及时尚,都有很多可以获得灵感的地方。所以,很简单憋死盯着色盘,遇到看起来有趣的配色就存起来。


 

工具

让事情变得简单,我在例举一些可以用于色板选择的工具。他们会帮你省很多时间。


Coolors.co
事实上,我最喜爱的颜色选取器。你可以简单的锁定选取颜色和点击空白处生成色盘。Coolors.co里你也可以从上传一张图片,在图片里生成色盘。最酷的地方是你不会被限定在一个方案,相反还有个让你选择颜色的吸色器。

 

 

Kuler
Adobe爸爸提供的一色配色工具。在浏览器里可以使用,也可以在桌面端使用。如果你使用桌面端你能将颜色参考导入Photoshop。

 

Paletton
跟Kuler相似,不同点是Paletton不仅限于5种色调。当你具有确定的基础色想找些附加色的时候,这个工具的好用之处就能体现出来了。

 

Designspiration.net
想象下对你的色盘有想法,但是你想看下混合后的效果。Designispiration是个非常好用的工具。你可以吸取5个颜色,搜索满足你需求的图片。不仅仅是吸取图片里的颜色,同时也能将他们用到设计里。


Shutterstock Lab Spectrum
你或许会问,我怎么根据我所选的颜色来搜索图片呢?Shutterstock Lab Spectrum是一个根据制定色调选择图片的工具。你不用订阅,因为带有水印的图片足够生成色盘啦

 

Tineye Multicolr
如果你想要搜索图片里的混合色,甚至辨别这些颜色中的每一颜色,Tineye Multicolr是一个能够帮助你实现这个梦想的人。这个网站收集啦1000万在Flickr的评价。


最终思考
颜色是一个很不容易掌握的概念,尤其是在数字时代。以上的建议能共帮助你找到工作中需要的颜色。创造令人晕眩的颜色搭配方案最好的方法是利用颜色帮你表达,跟颜色好好相处吧。


原文连接

https://blog.prototypr.io/how-to-use-colors-in-ui-design-16406ec06753

更新:2017-07-24

收藏

2人已收藏

分享好设计

接私单交流,v信:2422836284

  • 90

    作品

  • 523

    粉丝

  • 33

    关注

  • APP设计师必知:用户体验十大原则
  • 做设计到30岁,还能做下去吗?
  • 借鉴别人的海报?得先学会这个平面构成分析法!
  • 资深设计师深度解读!网络简洁设计的缘起和未来!

    猜你喜欢

      2017-07-24 好文转载 经验/观点 原作者: 未知 举报 799 2 1 0

      设计如何用色

      0.0°

      你确定要举报设计如何用色

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年07月24日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      2
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录