赞助商
立即赞助

在这些因素的制约之下,才能选取出科学的配色方案

平面设计3年前 (2021)发布 流光
3.4K 0 0

Tubik Studio :我们的日常活中总面临无尽的选择,的挑战。设的决策也如此,一确的决策会受到很多不同因素的影响,验,知识,事实依据,还别人的建议。行UI设的时候,配色方案的取是需要通过合的决策来判断的,是使深色系的配色较好,还是浅色系的配色合适?

影响配色方案的因素

正如同我们熟知的,配色方案的最终确定受到多方面因素的影响,它仅涉及到户,而且还受到务目标,场条件和当前设计趋势的影响。我们简单顾一在这个问题上必须考虑的基本因素。

可读性和易读性

这两个概念都和本容的感知直接相。可读性指的是人们是否可轻松阅读单词、短语和容的低,而易读性则指的是户否捷快速地识别特定字体中字母的量。

行配色的时候,应该将这些因素纳入到考虑当中,特别涉及到需填充文本的界面的时候。配色方案对于界面中文本的感知效度至关重的影响。白色或者浅色的背景,显示黑色的文本,比起黑色的背景显示白色的文本,看起显著、清晰度也一些。较差的可读性将会直接差的用户体验,用户无法速扫视数据,甚至会视觉产莫其妙的混乱,甚至导致用户错过关键信息。

这是否意味着浅色背景可读性更强呢?并不定。著名UX设计大师 Jacob Nielsen 曾经提到过:“文和背景应该采用高比度色。白色背景上黑色文(正文本)和黑色背景上白色文(负文本),在比度和易读性上几乎是完全样,是后者和日常阅读习惯并不致,这倒配色案会让在阅读速度上更慢。文本比纯黑更浅些,而背景并纯白时候,易读性会相应变更弱些。”如设计师于不配色和体特性上有足够了解和探索,很多配色案都可以具备良好易读性和可读性。

在这些因素的制约之下,才能选取出科学的配色方案

不过,在上世纪80年代系列学研究表明,于大量文本而言,浅色背景是更多用户选择。为了研究广告背后运作制,D.Bauer 和 C.R.Cavonius 在他们文章《Improving the legibility of visual display units through contrast reversal》分享了他们探索结。文特提到,相比于深色背景浅色文本,他们发参与调研的用户白色背景深色文本的阅读确率高出了26%。

为什么会这样?来自 Sensory Perception and Interaction Research Group  Jason Harrison 是这样解释这现象:双眼有散(根据调研大概50%会出现这样状况)用户会更难以感知黑纸白文本内容。在感知屏幕内容时候,如是白底黑,双眼虹膜会有更多部分会选择闭合,晶状体形变相较少。在黑底白情况下,虹膜会有更多部分会选择开合,提高线吸收,晶状体形变会更大,相应结是眼睛更容易模糊失焦。此,如界含大量文本内容,使用浅色背景和深色文本于用户会更加友好。

在这些因素的制约之下,才能选取出科学的配色方案

可访问性

可访问性通常指的 Web 页面或者 APP 能否尽可能多贴合广泛的用户需求,让普通用户障碍的用户都能顺畅使用。因此,「用还不用」取决于用户的需求偏好,不用户的能力。配色方案对于产品的可访问性的影响并不小。选择配色的时候,设师需考虑不同的龄,特殊的需求障碍的用户的需求。这些用户也应当可以决背景布局元素的配色选择。用户调研将会 UX设师提供数据,让配色方案加贴近用户的真实需求。

清晰度

清晰度用界屏幕或者界面的所核细节的清晰程度。UI界面中,导航否简单直观清晰度就直接的关系:用户能否速扫描布局并且找到关键的信息区域交互元素,用户否需花费很多精力能找到他们的信息。如果这方面得到确的测试,信息视觉层级可能设就一团糟。对比度这环节起到了相当重的作用,配色方案的好坏直接影响这部分的效果。确保界面清晰、对比充足,可以通过「模糊效果」对整布局行检验,看看否重的内都易被注意到。

在这些因素的制约之下,才能选取出科学的配色方案

响应

户使任何设备是否都正使页或者 APP 的功,这就涉及到整个设计的响应性了。有的设计在分辨率的显示器看起来非错,在小屏幕上却显得捉襟见肘。这就涉及到配色方案本身的适应性和响应性了,有些配色可在日的使或者某些状况失美感。配色本身会涉及到色彩、形状和容的感知,在最终设计成之前,要尽量多在同的设备上进行测试。

环境

在目标户确定的情况,Web 和移端的使场景实是可预见到的。如在自然光,移端设备上,深色背景很容易产生良好的反光效果,特别是在平和手机上。而相反,在光线好的环境,深色的背景可读性并好。色彩的组合,对和色调在同的环境会产生截然同的效果,这一点值得注意。

在这些因素的制约之下,才能选取出科学的配色方案

配色方案的选取注意事项

考虑到上面的一系列因素,下面我将提供一个简短的步骤清单,帮你为网页和移动端设备挑选合理的方案。

  • 确界面计的目标。确定界面的主要组成和核心的功能点之后,你才可以更加理地选择配色方案。如果 UI 界面是文本驱动型的(博、新闻、阅读器等),浅色背景往往是更理有效的选择。浅色的背景会使得整个屏幕显得宽敞而大气,让用户更专注于其中的内容。另一方面,如果界面是视觉驱动型的,并且是以图片为主的话,使用深色背景搭配亮的色彩,可能是更好的解决方案,因为这会让图片等视觉内容更加突出,并且让整个布局显得更为尚。
  • 分析你的目标受众。通界定和分析目标受众往往能够让设计师更清楚要先做什么做什么。潜在用户,他们想从你的网站或者 APP 中获得什么,样才能为用、有用且有吸引力的界面奠定坚的基础。中年人和老年人更加喜欢浅为主的方案,样的界面对他们而言更加直观,也更加易导航。年轻人更加喜欢原创和时尚的深背。少年和儿更喜欢明亮的背彩和有趣的细节。以目标受众为中心来设计,以让设计决策更加明晰。
  • 研究竞争对手。要记住一件事情,你的产面对的通都是蓝海,而是竞争激烈的红海。配色方案的取将会直接影响到你的产在竞争中看起来是否足够突,会影响户初次使的时候,是否愿意与之互。时间在探索已有的产上,够帮你节省时间和精。
  • 测试。基于用户群体、可用性、吸引力不同因素对配色方案的概方向确之后,每设方案都应该不同的分辨率,不同的屏幕以及不同条件下行当的测试。产品投市场之,之不间断的测试会揭示出配色方案的强弱,如果设方案的效率低下,可能会给用户留下不好的第一印象。

在这些因素的制约之下,才能选取出科学的配色方案

妥协的解决方案

有候,最终的解决方案并没有法完全遵循计划中的方案,妥协往往是不可避免的。

在这些因素的制约之下,才能选取出科学的配色方案

深色界面,白色标签和文本

正如我们在前设计趋势文章所提到,在深色系背景下,使用白色标签和区块来承载文本,这可以确保文本可读性。在设计时候,核心信息文本会搭配个浅色区块背景,和深色背景隔离开来,这处理实用优雅。

在这些因素的制约之下,才能选取出科学的配色方案

将配色的权利交给用户

另外一种方法让用户选择配色方案,我们设 Upper 这应用的时候就这么的,这待办事项应用当中,用户选择配色方案的权利。一方面,这种方式对于用户加友好,并且根据不同的可用性问题以及用户的审偏好,提供性化的方案。另一方面,设师发人员需额外的时间创建多可选的配色方案。

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

弹窗现在越来越成为了个磨人的小妖精。 早年我们受够了太多不明错误弹窗的骚扰,现在又却要承受各种广告弹窗的轰炸。 我...
ui设计
知名的免费图标网站 Iconfinder 要和大家一起对抗新冠病毒,和图标设计师联手推出一系列「防疫免费图标集」(Coronavirus awa...
免费图标
@Daidai丶呆 :今天这篇文章的内容虽然较短,但是意义却非常深刻,值得各位 UI 设计师细品。 该项目旨在遵循以用户为中心的...
App图标
橙子的橙子:记得刚做 UI 那会,根本不知道做完界面还需要适配,就以为把设计图做好就行了,其他的事情跟自己没有半点关系。...
APP 适配
如果要设计产品或开发界面,我们通常会需要风格相同的图标,若无法自行绘制或不希望付费购买也有很多替代方案,本文要推荐的...
图标素材
很多设计师经常说,现在扁平化风格盛行,很难做出亮眼的设计。因此,我把我一直都在关注的杂志风格,做一次分享。关于杂志化 ...
ui设计
「界面中存在的每一个元素,都是有意义的。」这是我进行产品设计时的一贯主张。 小到一个标点符号、一根分割线,大到一个图...
icon图标
和大家分享一下,杨杨在年前做的一套新年主题图标,整个过程成长很大,也希望能给大家一些启发。 其实一套主题图标对于一个...
图标优化