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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【配色指南】UI设计中使用明亮色彩注意事项
0.0°
2018-05-17 自译外文 经验/观点 原作者: 未知 举报 3263 26 18 0

合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师。


以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师。随着扁平化设计和Material Design 的日益普及,色彩理论知识的重要性也变得愈加明显!

在许多数字化产品的界面中我们都能看到一些明亮的色彩和渐变色,从趣味性和娱乐性APP到商业APP和网站。然而,关于明亮的色彩对用户体验的影响仍有很多争议。本文就UI 中使用亮色的优缺点进行了一些分析和总结。


Image title



一、在UI中使用鲜艳颜色的优点


1. 增加可读性和易读性


在我们之前的一篇文章中,我们介绍了影响配色方案选择的因素。可读性和易读性是设计师考虑色彩应用的基本因素。这里需要注意的是,可读性代表了人们阅读文本内容的容易程度,易读性决定了用户区分特定字体和字母的速度。


鲜艳的色彩可以为界面提供足够高的对比度,也有助于提高可读性和易读性。由于对比的存在,布局元素变得清晰可见。但是,高对比度的色彩可能并不总是能奏效。如果文本内容和背景颜色对比太强,用户则很难阅读或浏览文本。这就是为什么建议设计师创造一个比较温和的对比度,只在突出显示某些元素使用高对比度的颜色。


Image title



2. 优化导航并增强直观的交互


视觉层次结构是所有数字化产品建立清晰导航和直观交互系统的核心要素。UI组件一般以这种结构组织,大脑可以通过产品的物理差异(包括颜色)来区分对象。


如何区分颜色的层次结构?这是受用户的思维决定的。例如红色和橙色被通常被认为是大胆的颜色,而白色和奶油类似的色彩则被认为是柔弱的颜色。明亮的色彩很容易引起用户的注意,所以设计师经常使用它们作为强调或对比的手段。如何合理地应用视觉层次结构?常见的使用方法有:将一种颜色应用于多个元素中,以显示它们之间的某种联系。在UI界面中将购买按钮设置为红色,以便人们可以在需要时直观地找到它们。


Image title



3. 提高品牌的可识别性


人类大脑对大胆的色彩反应十分强烈,因此,明亮的色彩组合更容易引起用户的注意。色彩鲜艳的UI设计,往往能在众多产品中脱颖而出。但需注意,色彩的选择在一定程度上要基于目标受众的偏好和市场调查。


最前沿的中国产品人和设计师


摹客专访


如果一家企业在其Logo、商品、网站中使用统一明亮的色彩,这在一定程度上不失为一个将品牌最大化的好办法。通过这种方式,设计师借助高度一致的可视化提高品牌的可识别性。


Image title



4. 传递情绪和营造氛围


为了传达正确的信息和号召用户做出预期的行动,设计师需要知道颜色是如何影响我们的情绪和行为。我们的大脑对不同的颜色有不同的反应,不过通常我们都忽略了。据“色彩心理学”这项研究表明:当我们的眼睛感知到一种颜色时,大脑会向内分泌系统发出信号,释放负责情绪变化的荷尔蒙。


正确选择颜色有助于营造正确的氛围向用户传递正确的信息,让用户处于正确的情绪中,引导他们采取预期的行动。例如,如果设计师创建与自然或园艺相关产品的用户界面,那么这个界面的主打色很有可能是绿色和蓝色。这样的色彩应用就会给用户营造一种产品或服务相关联的感觉。


Image title



5. 打造时尚的外观和风格


明亮的色彩和渐变色在UI设计中占据着最重要的位置。现在,你可以在不同类型的数字化产品中看到更多是这些时髦的风格,而严肃呆板的商业风格早已不见踪影。


用户界面中明亮的色彩和渐变色彩可带给用户强烈的现代科技感和新鲜感。而且,通常根据最新趋势设计的移动应用程序或网站往往看起来很吸引人,尽管竞争激烈,它们仍能更胜一筹。


Image title



二、在UI中使用鲜艳颜色的缺点


1. 明亮的颜色很难搭配


对于那些只依靠直觉和美感来搭配色彩的设计师来说,他们往往会犯很多低级错误。如果想要创作出令人满意的视觉作品,那么关于如何应用和搭配颜色的基本知识是必不可少的。


在UI中应用的色彩越鲜艳,就越难搭配。为了让用户感到满意和舒适,设计师试图在UI设计中实现一些平衡。色彩的和谐是关于设计中颜色的排列对用户的感知最有吸引力和有效的。和谐的色彩组合有助于网站或应用程序获得良好的第一印象。颜色理论定义了几种基本的配色方案,以供大家参考!


单色,单色配色是基于一种颜色,选择其不同的色调进行色彩组合。

类似色,该配色方案应用于色轮上彼此相邻的颜色。


互补色,它是在色轮上彼此相对放置的颜色组合方案,旨在产生色彩的高对比度。


拆分互补色, 这个配色方案的工作原理类似于互补色,但是不同的是采用了更多的颜色。例如,如果你选择了蓝色,配色则需要组合两个与其相反颜色(橙色)相邻的其他颜色(黄色和红色)。


三元色,它基于色轮上等距的三种不同的颜色。专业人士建议使用一种颜色作为主色调,其他两种色彩用来提亮。


双色互补,这种配色方案采用了两对互补色组合。如果连接这四种颜色在色轮上的位置,就会形成一个矩形。


2. 失去产品的特色


大胆的色彩是在UI中创造个性与风格的工具,但它们也可能是特色消失的原因。在单一视觉构图中使用许多鲜艳的色彩会有失去界面特色的风险,因为它们会导致整个界面色彩过于混乱。


这就是为什么建议设计师应用色彩时使用6:3:1的比例。最大的部分应该是设计中主导色调,占据三分之一的部分是次要颜色,最小的占比部分用于帮助打造特色的颜色。这样的比例可以让用户逐渐感知所有的视觉元素,因此这样的比例被认为是最合适的。


3. 明亮的色彩并不适合所有用户群体


用户研究是数字化产品创建的核心阶段之一。首先,设计师需要定义和分析目标受众,以了解他们对网站或应用程序的期望。其次,年龄,性别和文化等因素都可能影响潜在用户的偏好。例如,孩子们一般都很喜欢黄色;但是当他们变成大人时,黄色看起来便不再那么有吸引力了。另外,男人和女人通常都喜欢冷色调,如蓝色,绿色和其他色调。但与女性不同,男性通常更喜欢无色的颜色,包括白色,黑色和灰色。


应用明亮的色彩也是一样的,需要定义和分析目标受众。即使你为娱乐应用创建UI设计,你也需要考虑目标受众的具体情况。中年人通常更喜欢轻量级的用户界面,他们可能不喜欢屏幕上的大胆色彩,因为那会使他们分心。


4. 明亮的色彩在手机屏幕上可能显得过于突兀


正如上文所说,明亮的色彩可以产生强烈的对比,有助于突出重要的用户界面元素,并提供理想的易读性和可读性。然而,使用过多的色彩对比可能会造成一些低级错误,尤其是在移动界面这样有限的空间上。


在像这样较小的屏幕上,环境光线和明亮的字体会让用户感觉眼睛不舒服。这就是为什么UI设计师在移动设备界面中应用明亮的色彩需要注意谨慎的原因。只有合理设置色彩之间的对比度,才能让用户在手机上阅读文字时感觉舒适。


Image title



色彩无疑是设计师手中的一把双刃剑,它有自己的优点和缺点。如果你能趋利避害有效地利用它,你就能够找到适合于产品设计的色彩应用方案。


原文作者:Alina Arhipova


原文地址:https://tubikstudio.com/bright-colors-in-ui-design-strong-weak-sides/


学习工具,但不受限于某种工具。Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

更新:2018-05-17

收藏

26人已收藏

摹客设计云

设计1+2,摹客就够了!

  • 576

    作品

  • 859

    粉丝

  • 6

    关注

  • 【摹客RP会员日】狂欢来袭!终身版团购低至5折!
  • 摹客RP买一年送一年!这波钜惠只剩最后5天!
  • 摹客RP,个人空间全新上线,享沉浸式设计体验!
  • 产品经理需要了解的前后端技术知识
相关标签
设计经验ui配色

    猜你喜欢

      2018-05-17 自译外文 经验/观点 原作者: 未知 举报 3263 26 18 0

      【配色指南】UI设计中使用明亮色彩注意事项

      0.0°

      你确定要举报【配色指南】UI设计中使用明亮色彩注意事项

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年05月17日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      18
      26
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录