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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
如何在UI中使用颜色
0.0°
2017-03-25 自译外文 经验/观点 原作者: Wojciech Zieliński 举报 8963 393 300 20

实用技巧和工具。

Image title

颜色像其他事物一样,要适度的使用。如果你用三原色的配色方案,会得到更好的结果。在项目中运用色彩有很多的平衡,而且你使用的颜色越多,实现平衡就会越复杂。颜色不是在设计中增加愉悦感,而是加强了。

如果你需要定义的调色版之外的颜色,试着利用色调和明暗度。这将提供整体一个不同的色调。


60-30-10规则

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

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

Image title

墙漆,家具,饰品。


颜色的意义

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

Image title

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

  • 红色:激情、爱、危险
  • 蓝色:冷静、负责任的、安全的
  • 黑色:神秘、优雅、邪恶
  • 白色:纯洁、沉默、洁净
  • 绿色:新的、清新、自然

如果你想要了解更多查看这个列表——颜色文化


灰度优先

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

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

Image title

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


远离纯灰度和黑色

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

Image title

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

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

Image title


Image title


相信自然

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


保持对比

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

Image title

如果你想了解更多关于色彩理论,查看——色彩理论:创建自己的调色板


启发

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

Image title

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

Image title

Image title

Image title

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


工具

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


Coolors.co

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

Image title


Kuler

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

Image title


Paletton

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

Image title


Designspiration.net

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


Shutterstock Lab Spectrum

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

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

Image title


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

更新:2017-03-25

收藏

393人已收藏

  • 75

    作品

  • 2695

    粉丝

  • 65

    关注

  • 11个表单设计小Tips
  • 产品设计的期望与现实
  • 七个设计的基本原则
  • 为什么大团队失败反而小团队取胜

    猜你喜欢

      2017-03-25 自译外文 经验/观点 原作者: Wojciech Zieliński 举报 8963 393 300 20

      如何在UI中使用颜色

      0.0°

      你确定要举报如何在UI中使用颜色

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年03月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      300
      393
      20

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

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

      登录

      手机号

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

      登录
      第三方账号登录