火星网校
界面设计颜色的选择技巧，实用的配色方案
发布时间：2024-03-25 18:52:31 浏览量：155次
我们的日常生活是无尽的选择。在个人和职业生活中，我们必须考虑许多对立面和挑战，解决方案不仅基于建议，而且还基于事实，经验和知识。今天，我们将讨论UI设计师需要频繁选择的项目之一：哪种方案对于界面更好，光线还是黑暗？
影响配色方案选择的因素
可以肯定的是，没有人会为所有目标而努力。该解决方案在很大程度上取决于许多因素，不仅涉及用户方面，还涉及业务目标，市场条件和当前设计趋势。让我们回顾一下在这个问题上必须考虑的基本因素.
可读性和易读性
这些术语都与对文本内容的感知直接相关。可读性定义了人们可以轻松阅读单词，短语和段落。清晰度衡量用户如何快速直观地区分特定字体中的字母。
应该仔细考虑这些特征，特别是对于填充了大量文本的界面。在许多其他因素中，为界面选择的配色方案在文本感知的有效过程中起着至关重要的作用。例如，与在不同背景下感知的物理对象一样，白色或浅色背景上显示的黑色副本似乎大于黑色背景上的白色副本。可读性差导致用户体验不佳：用户无法扫描数据，甚至更多 - 即使数据相关但不可读，用户感觉到与文本纠结的莫名其妙的时态，甚至可能错过关键信息。
这是否意味着具有浅色背景的界面更具可读性？不总是。其中一位着名的用户体验设计大师JacobNielsen提到：“在文字和背景之间使用高对比度的颜色。最佳易读性需要白色背景上的黑色文字（所谓的正面文字）。黑色背景上的白色文字（负面文字）几乎一样好。虽然对比度与正面文本的对比度相同，但倒置的颜色方案会使人稍微放松一些，并会稍微放慢阅读速度。在颜色方案中，易读性受到更多影响，使文字比纯黑色更轻，特别是如果背景比纯白色更暗。
因此，如果设计师在不同背景下研究复制感知的特性并仔细研究字体选择，那么任何配色方案都可能足够可读。
然而，一些追溯到20世纪80年代的科学研究表明，对于大量的文本来说，浅色背景似乎是大多数用户更有效的选择。研究广告运营商如何运作，D. Bauer和CRCavonius在文章“通过对比反转提高视觉显示单元的易读性”（1980）中分享了他们的探索。特别是，他们发现参与者在阅读文本时精确度为26％，并且在浅色背景中使用了深色字符。
为什么会这样？Sensory Perception and Interaction Research Group（英属哥伦比亚大学）的JasonHarrison以下述方式解释了这种现象。散光的人（根据不同的统计数据提供了大约50％的人口）感觉黑色的白色文本比白色的黑色文本更难察觉。其中一部分与光照水平有关。有了明亮的显示屏（白色背景），虹膜会更加闭合，从而减少“变形”镜头的影响。在黑色显示器（黑色背景）下，虹膜会打开以接收更多光线，镜头的变形会在眼睛处产生更加模糊的焦点。因此，基于此，如果界面呈现大量副本并提示长时间阅读体验，则浅色背景可能会感觉更加用户友好。
无障碍
可访问性主要定义为Web或移动界面尽可能接触更多人的能力，并提供其功能，而不受任何歧视。因此，“使用还是不使用”的决定必须基于用户的需求和偏好，而不是其身体能力。色彩方案是影响这方面的最主要因素之一。选择调色板和颜色组合时，设计师需要考虑不同年龄，特殊需求或残疾的用户，这些用户还可以确定背景和布局元素的颜色选择。用户研究 成为向UX设计人员提供有助于更接近目标受众的数据的重要帮助。
明晰
清晰度定义了查看和区分屏幕或页面上所有核心细节的能力。首先，它涉及导航的简单性和直观性：能够扫描布局并找到信息和交互元素的区域，用户不需要付出太多努力来获得他们所需的东西。如果这方面没有得到适当的测试，可能会导致视觉层次较弱，并使屏幕变得一团糟。对比度在这里起着重要的作用，配色方案成为它的基础。为了检查，如果界面清晰并且对比度足够，在模糊模式下查看屏幕或页面时，请不要忘记“模糊效果”的一个很好的旧技巧，并检查是否所有重要内容都容易到达并且明显。
响应
界面的响应性意味着无论用户使用何种设备，用户都可以使用它。Sketch n高分辨率专业显示器看上去很时尚和吸引人，可能会变成小型低分辨率屏幕上的脏污。因此，在设计阶段看起来不错的一些配色方案可能会在其应用的各种日常条件下失去美感。由于配色方案直接影响颜色，形状和复制感知，所以在做出最终决定之前应该在多种设备上进行测试。
环境
Web和移动界面被用在如果目标受众被仔细研究的情况下可能被认为是典型的环境中。例如，关于在自然光线下不断使用，深色背景可以从字面上创造反射效果，特别是在平板电脑和智能手机的典型光面屏幕上。相反，在光线不好的环境下，黑暗的背景可以将光线从屏幕上移开，这对导航和可读性产生不利影响。所以，颜色组合，对比度和色调问题在这里引起了很大的关注。
配色方案选择清单
考虑到上面提到的因素，我们在这里提供一个简短的基本步骤清单，同时为网页或移动界面选择一个通用的配色方案。
1.定义界面的目的。确定了界面实用程序和解决问题能力的核心点后，您可以更加合理地选择颜色方案。如果UI是文本驱动的（博客，新闻平台，电子阅读器等），浅色背景往往是一个有效的选择。光线使得屏幕宽敞而宽敞，纯粹专注于复制将更容易。另一方面，如果界面是视觉化驱动的，并且移动的是图像而不是文本，则背景为黑色或明亮的配色方案可能是一个很好的解决方案，因为图像的颜色感觉更深，并且总体布局变得时尚甚至奢华。
2.分析你的目标受众。目标受众的定义和分析是设计师应该做的首要事情。了解谁是你的潜在用户，他们想从网站或应用中获得什么，为可用，有用和有吸引力的界面奠定了坚实的基础。中年人和老年人倾向于喜欢浅色方案的界面，因为他们发现他们更直观和可导航。年轻人通常会发现性能良好的界面具有更加原始和时尚的黑色背景，因此可以成为目标用户的参与方式。青少年和儿童被吸引到使用明亮背景和有趣细节的界面。颜色的选择显然取决于界面功能和内容的性质。但目标受众的偏好始终是以用户为中心的决策的良好线索。
3.研究竞争。另一方面要记住的是，你的产品不会在蓝色海洋中出现。反之亦然，它将在巨大而充满活力的竞争环境中争取用户的关注。配色方案的选择也成为使应用程序或网站突出的方式，并导致用户方的这种宝贵的第一次互动愿望。花费在探索该部分现有产品上的时间可以节省时间和精力，否则将浪费在重新设计无效解决方案上。
4.测试，测试，测试。上述要点说明了一个关键问题：因为颜色属于直接影响界面的可用性和吸引力的因素，所以每个设计方案都应该在不同的分辨率下，在不同的屏幕上以及不同的条件下进行适当的测试。在产品投放市场之前，测试揭示了配色方案的强弱点，如果设计方案效率低下，就会被讨论并失去令人惊叹的第一印象的机会。
妥协解决方案
不希望遵循严格的配色方案，用户界面设计师有时会发现妥协方案，如下所示。
黑暗的界面，复制白色标签
正如我们在UX设计趋势回顾中所提到的，这种趋势在基于黑暗背景方案的界面中特别流行。它还提供了一个更好的方法来实现适当的可读性，这通常是辩论的问题：将核心数据块的浅背景应用框或空格，设计人员可以解决此问题，并为屏幕或页面增添优雅的对比。其中一种情况是，当它得到有效应用时，是由Tubik团队设计的Watering Tracker应用程序
给用户选择配色方案
另一种方法是让用户选择模式。这就是我们为Upper做的，一个待办事项列表应用程序，它为用户提供了一系列配色方案。一方面，它使产品对用户非常友好，并根据不仅可用性问题而且根据审美偏好进行更加个性化的选择。另一方面，设计师和开发人员需要额外的工作时间来制定所有的方案。
～此文转载，如有侵权，请联系删除
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
