• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > UI配色这件事情,可以指望这6个实用技巧

UI配色这件事情,可以指望这6个实用技巧

作者:Tubik Studio 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI配色,用户体验,经验分享,配色技巧等相关知识,Tubik Studio希望在学习及工作中可以帮助到您

用户体验设计涉及到许多流程,需要足够的深思熟虑才能让整个界面和交互符合目标受众的需求,即使看起来不太复杂,每个环节都需要深入细节仔细推敲才行。

用户界面的构建过程中,最为耗时的事情是色彩的选择。真正能够和整个设计项目贴合、能够覆盖整个设计中所有元素需求的配色,需要在设计中不断的调整和验证。一套强大而有效的配色方案,可能需要好几个小时来回的打磨。所以,今天的文章,我们总结了6个关键的配色技巧,帮助设计师在进行UI设计的时候,选择合适的色彩,使得配色的过程更加轻松高效。

技巧1:掌握60-30-10原则

60-30-10 原则最早是源自于室内设计领域,室内设计师借助这一原则,创造出协调的室内设计配色。这一原则很容易理解,为了达到平衡的配色,几种色彩遵循这60%—30%—10%这样的色彩配比。其中占据60% 的是主色,而30%则是次住色,而占据10%的色彩应当为提亮色。

这一的配色比例被认为是颇为令人愉悦的,在视觉感知上,它提供了一个颇为让人舒适的色彩层次,这样的控制让整个UI的色彩以一种可控的比例呈现出来,而不是将整个设计弄得一团糟。

技巧2:对比是你最好的朋友

色彩的对比几乎是任何视觉构图的关键部分。对比度创造了UI元素的差异,也赋予它们以性格。值得注意的是,UI当中来自同一色系的色彩往往不会呈现出明显的对比度,而可识别度较低的文本更是界面信息传达和交互的障碍。

设计师需要根据设计目标,来合理地控制整个产品的对比度高低。举个例子,如果你需要让用户注意到特定的元素,那么最好使用高对比度的色彩来达到引人瞩目的视觉体验,比如使用高对比度的红色和蓝色。CTA按钮常常就是使用这样的色彩。

但是,将UI视作为整体的话,高对比度的色彩可能并总能奏效。文本内容和背景的对比需要控制在一个合理的度上面,否则就会因为对比过大产生「晕影」的视觉效果,这会影响长时间阅读的阅读体验。这就是为什么会建议设计师采用温和的对比度控制,并且只在特定的元素上使用高对比度。通过在不同的设备上测试,可以让设计师保持配色的可用性和泛用性。

技巧3:参考色彩心理学

正如同我们在前文中所提到的,大量我们所熟知的设计工作流程都是基于心理学原理开展的。色彩心理学是和设计息息相关的一个心理学分支,它主要研究色彩对于人类情绪和行为上的影响。我们大脑对于色彩的反应其实是相当敏感和多样的,但是在日常生活中我们很难直观地、迅速地感受到。当人的眼睛感知到一种色彩的时候,会向大脑内的分泌系统发出信号,并且释放刺激产生对应情绪的激素。

每种色彩对于我们的感知和思维都有独特的影响力,了解这些可能的反应最终可以帮助设计师正确地传递信息,并且引导用户按照设计师的预期来执行。下面是一些颜色的基本的特征和含义:

  • 红色,象征爱情,自信,激情和愤怒,它是充满活力和温暖的色彩,给人带来兴奋的感觉。
  • 黄色,能传递出幸福,阳光,喜悦和温暖的情绪。
  • 绿色,则常常能给人自然、清新、富有生命力的感觉。
  • 蓝色,是目前最受欢迎的颜色之一,企业常常会使用蓝色来传递自信和让人信赖的感觉。
  • 紫色,和皇室、财富关联密切,这也是代表神秘和茉莉的色彩。
  • 黑色,虽然和死亡、悲剧有关,但是也能营造沉稳大气的高级感。
  • 白色,代表纯洁无暇,传达出高雅,纯粹和清晰的感觉。

除此之外,设计师还需要明白一个事情,就是人和人的视觉感受通常是不同的,对于色彩的认知还受到文化背景的影响,性别的因素对于色彩偏好的影响也不小。因此,了解目标用户的特征是很有必要的。

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

正如同前文所说的,文化背景对于色彩有着深刻的影响。不同的文化有着不同的传统文化和信仰特征,甚至同一种颜色在不同的国家有着截然不同的解读方式。白色在欧美国家常常象征着纯洁和高贵,但是在亚洲地区,丧事也常常被称为“白事”,代表着死亡和悲伤。在中国,色彩饱和度高的正色是传承了几千年的视觉文化元素,但是在日本,却以间色和低饱和度的色彩为美。

只有在专业的色彩知识架构下,深入了解受众当地的文化特征,才能更好的降低被误解的风险,创造出优秀的设计。

技巧5:努力让色彩协调起来

协调的UI设计是设计师的目标之一,而这意味着配色一定要和谐而令人感到舒适。通过色彩来营造富有吸引力的协调设计,能够让用户清晰明了地感知到UI中的内容,同时留下良好的第一印象。

随着多年的摸索,在配色方案上前人总结了一些基本的配色方法:

  • 单色配色。单色配色并不是说只有一种颜色,而是基于同一色系来进行配色,不同明暗、饱和度的色彩组合到一起,构成配色方案。
  • 类似色。在色轮上彼此靠近的颜色构成的配色方案。
  • 对比色。色轮上彼此处于相对位置的色彩能够构成鲜明的对比,这些对比色能够构成高对比度的配色方案。
  • 拆分互补色。拆分互补色的配色原理和互补色相似,但是不同的地方在于,这样的配色当中会采用更多的颜色,当你选择蓝色之后,与之搭配的不是对位上的橙色,而是橙色两侧的黄色和红色。
  • 三元色。它是在色轮上挑选互为120度角的三个颜色类进行配色。建议使用其中的一种色彩为主导,另外两种色彩用来提亮。
  • 双互补色。采用两对互补色来作为主要的配色方案。

技巧6:从自然获取配色

大自然是世界上最好的艺术家和设计师,我们在自然环境中看到的色彩组合大多都非常的协调,甚至可以说接近完美。人们所喜欢的日落和黎明,喜欢秋日的落叶和冬天的山野,因为这些色彩组合有着独特的美感。

那么你为何不试图从这些自然风景中获取配色呢?

结语

就目前来看,数字产品的成败与否,与配色方案的选取有着紧密的关联。正确而舒适的配色方案不仅能够让用户感到舒服,而且能够赋予产品以正确的调性,传递情绪,真正创造出深入人心的产品。

【这些文章同样来自Tubik Studio】

  1. 《游戏化设计中,任务和挑战是怎么发挥作用的》
  2. 《游戏化设计的精髓是结合用户历程进行UX设计》
  3. 《帮你理清创意的情绪板,是设计项目前期的利器》
  4. 《超详细解读:UI导航设计不仅仅指的是导航栏》
  5. 《在设计流程中,通过这6种方式来运用信息架构》
  6. 《看似简单的几个动效,在APP中实现过程并不简单》

本文由优设网原创翻译,请尊重版权和译者成果,转摘请附上优设链接,违者必究。谢谢各位编辑同仁配合。

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

您可能想查找下面的文章:

  • 浅色还是深色?教你选择合适的界面配色方案!
  • UI配色这件事情,可以指望这6个实用技巧
  • 讲真,这可能是目前最全的在线配色工具合集了
  • 学会给配色做减法,让你的设计更加高端!
  • 超全面!UI设计中的字体配色方法总结
  • 看似简单的单色配色,需要这些技巧帮你玩转
  • 在配色这件事情上,总会有一些有趣且有用的小技巧
  • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
  • 看过那么多UI 配色指南,这篇可能是最全面的(附大量实例)

相关文章

  • 2017-08-06Web开发时碰到的问题以及心得经验
  • 2018-08-23UCAN2017回顾!当新技术来临时,设计会发生哪些变化?
  • 2018-08-23下个阶段的设计师,为什么光做界面肯定是不行的?
  • 2018-08-238年资深设计师:间距不会调?掌握这一个点,从此不再迷茫!
  • 2018-08-23腾讯工作坊总结!如何构建智能空间的方法与应用?
  • 2018-08-2390%的文案根本不会沟通,4大实用技巧提升文案的沟通力
  • 2018-08-23超实用!通用设计法则解析之「无障碍使用」
  • 2017-08-06Bootstrap3.0学习笔记之按钮与下拉菜单
  • 2017-08-06门户网站改版之用户体验
  • 2018-08-23UI配色这件事情,可以指望这6个实用技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 最新36款高质量免费英文字体分享
    • Facebook设计副总裁:谈谈设计师的职业成功之路
    • 网页flash动画不显示的解决方法
    • 写给设计师的信息架构基础知识指南
    • 【2018UCAN】“YUAN”——设计的自我蜕变与重塑,等你来!
    • 实战经验!从0到1的腾讯微众银行APP项目小结
    • 腾讯实战案例:如何用设计让更多人参与公益活动?
    • 想给用户提供帮助?先掌握这5个层级!
    • 插图式的网站主页设计 网站设计新的趋势
    • 亚马逊语音交互设计规范(一)设计流程

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有