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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
颜色很重要。选择UI颜色的6点技巧。
0.0°
2017-11-27 自译外文 规范/资料 原作者: 未知 举报 5121 12 13 0

本篇为编译文章,由UIPark特聘编译老师田子玄老师翻译整理,田子玄老师是英文专业的同声传译,自学自修的心理学爱好者,也是专业过硬的UI设计师哦~

  本篇为编译文章,由UIPark特聘编译老师田子玄老师翻译整理,田子玄老师是英文专业的同声传译,自学自修的心理学爱好者,也是专业过硬的UI设计师哦~

  

  §§

  

  (正文)

  

  用户体验设计中有许多步骤都需要深思熟虑,这样才能够设计出符合目标用户需求的界面。每一个步骤,即便是那些看起来并不复杂的步骤,都需要非常注重细节。

  

  这其中既耗时又重要的阶段之一就是色彩的选择。有时候设计师们会花上好几个小时去挑选合适的配色方案。

  

  本文将讲解6个能够帮助设计师在设计中选择强有力的色彩,并且能让这个过程更加简单有效的实用技巧。

  

  color

  

  Tip1. learn 60-30-10 rule.

  

  技巧1:学习60-30-10法则

  

  这个法则,或者也可以说是技巧,源自于室内设计,因此也常常被用于室内装修中。它的原理很简单。就是说如果想要让各个色彩的占比平衡,那么这些色彩就应该以60%–30%–10%的比例进行融合。占比最大的颜色应该是界面的主色调,占比三成的颜色是合成色(二级色),剩下的10%则应该选择可以带来视觉强调的颜色。

  Image title

  这样的比例被认为可以给人的视觉带来愉悦感,因为它能够让人的眼睛逐一地感知到所有的视觉元素。掌握适当的比例后,设计师就可以成功地组合各种颜色,而不用担心自己的UI界面变成色彩斑斓的一团糟。

  

  U

  

  Tip2. Contrast is a friend.

  

  技巧2:对比是我们的好朋友

  

  色彩对比是任何视觉构成的重要组成部分。它给每一个UI元素都赋予了个性,让它们引人注目。如果一个用户界面只有同色系的颜色,那这个界面吸引用户眼球的概率会相对较小。此外,界面中的文本内容也会模糊不清,从而可能使得阅读以及产品的交互无法完成。

  Image title

  设计师应该根据自己需要达到的目的去控制对比的程度。比如说,如果你需要让用户格外地注意到某个特定的UI控件,那么使用两种高对比的颜色,比如蓝色和红色,就是个不错的选择。高对比通常应用在CTA按钮(Call-to-Action Buttons 用户行为引导按钮)的设计上。

Image title


然而,如果将用户界面作为一个整体来看,高对比的色彩选择就不一定在哪里都适用了。如果文本内容和背景颜色的对比过于强烈,会让阅读和浏览变得非常困难。

  

  这也就是为什么我们建议设计师大面积地应用轻柔的对比,只在重点元素上使用强烈对比的色彩。在不同设备上的用户测试也可以帮助设计师们确保自己设计方案的有效性。

  

  U

  

  Tip3. Consider psychology of colors.

  

  技巧3:认真思考色彩心理学

  

  心理学是能够帮助到设计工作的诸多基础研究之一。这其中的一个专门研究颜色对于人类情绪和行为影响的分支就叫做色彩心理学。色彩心理学指出,我们的大脑会在我们完全没有意识到的情况下对不同的色彩做出反应。当人眼接受到某种颜色的时候,大脑会自动给内分泌系统发送信号,然后身体会产生负责不同情感的荷尔蒙,从而让我们有了不同的感受和情绪。

  Image title

  每一种颜色对我们的想法的情绪都有着不同的影响。了解人们对于不同颜色可能产生的不同反应可以帮助设计师们传达正确的信息,并且引导用户做出预期的行为。

  

  红色——同时代表了好的和不好的感受。包括爱,自信,热情和愤怒。

  

  橙色——一种充满活力并且温暖的颜色。带来兴奋的感觉。

  

  黄色——这是一种代表幸福的颜色。阳光、快乐并且温暖。

  

  绿色——大自然的颜色。带来平静和新生的感觉。

  

  蓝色——通常用来展现公司企业的形象。但也夹杂一些距离感和悲伤感。

  

  紫色——常与(西方的)王权富贵相关。也是代表神秘和魔法的颜色。

  

  黑色——与悲剧、死亡相关,象征着秘密。既可以代表传统,也可以代表现代。

  

  白色——意味着纯洁和懵懂,也代表完整和清晰。

  

  除此之外,设计师们也需要记住,视觉感知对于每个人来讲不尽相同。诸如年龄、性别等因素都会对色彩偏好有着非常大的影响。因此,了解目标受众的特性也是至关重要的。

  

  color

  

  Tip4. Don't forget cultural differences.

  

  技巧4:不要忘记文化差异

  

  每一种文化都有自己的传统和信仰。因此,在选择颜色前,你需要确保目标用户能理解你想要表达的意思。事实上,有时候一种颜色可能在不同国家有着完全相反的含义。

  Image title

  例如,白色在欧洲国家代表纯洁,通常在婚礼中使用,却在许多亚洲国家都意味着死亡和悲伤。不正确的色彩使用可能会造成误解,更可能会对产品造成致命的影响。通过学习和了解不同文化对于某些色彩的特殊感知,可以大大降低设计师引发误会的风险。

  

  color

  

  Tip5. Strive to color harmony.

  

  技巧5:尽可能地让色彩和谐

  

  和谐、平衡是UI设计所努力的目标。为了让用户感受到满意和舒适,设计师们非常努力地在保持着用户界面设计的各种平衡性,色彩平衡就是其一。我们需要在设计中组合出对用户感知最具吸引力并且最有效的颜色。和谐的色彩会让网站或APP给人以好的第一印象。

  

  经过了多年的探索,设计师们找出了可以有效使用的基本配色方案。我们来看看都有哪些。

  Image title

  单一色系(Monochromatic)——基于单一色相的不同明度、饱和度的色彩平衡。

  

  相似色系(Analogous)——这一方案适用于色轮上相邻的颜色。

  

  互补色(Complementary)——色轮上相对的两种颜色的结合,可以产生强烈的对比和张力。

  

  分裂补色(Split-Complementary)——跟互补色差不多,但包含了更多种的颜色。举个例子,如果其中一种颜色选择了蓝色,那么还需要选择与其补色(橙色)相邻的两种颜色,也就是黄色和红色。

  

  三色系(Triadic)——由可以在色轮上形成正三角形的三种颜色组成。最好选其中一个颜色为主色,其他两种颜色为辅助色。

  

  矩形色系/双补色(Tetradic/Double-Complementary)——矩形色系应用了色轮上四种两两互为补色的颜色。连接这四种颜色可以形成一个矩形。

  

  color

  

  Tip6. Steal idea from nature.

  

  技巧6:吸取大自然的灵感

  

  大自然是世界上最棒的艺术家和设计师。我们在自然环境中所看到的色彩组合总是近乎于完美。人们喜爱日出日落、秋天的森林和冬天的雪山,就是因为这些美景中充满了自然的色彩组合。

  

  所以,为什么不试着向大自然借鉴一些灵感呢?多出去走一走,或者去搜索一些自然美景的照片,你一定会感受到灵感袭来的。

Image title


一个数字化产品的成功与否很大程度上取决于用户界面设计中的颜色选择。正确的颜色选择能够帮助用户在产品的使用过程中产生舒适良好的体验。设计师可以把用户和需求牢牢地放在心上,这样就能让我们不得不通过缜密的思考来选择出合适的配色方案。一定记得要在色彩选择上做出明智的选择。

更新:2017-11-27

收藏

12人已收藏

UIPark

做你想做 证明自己

  • 41

    作品

  • 110

    粉丝

  • 2

    关注

  • 母亲节·为妈妈设计的字儿~
  • Photoshop入门(黑胶唱片制作参数)
  • Photoshop入门(人物修图)
  • Photoshop入门(字体变形)
相关标签
设计UI设计规范

    猜你喜欢

      2017-11-27 自译外文 规范/资料 原作者: 未知 举报 5121 12 13 0

      颜色很重要。选择UI颜色的6点技巧。

      0.0°

      你确定要举报颜色很重要。选择UI颜色的6点技巧。

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年11月27日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      13
      12
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录