请登录后选择模板风格

×
UI 设计中的鲜艳色彩:优点和缺点 - Powered by Discuz!

简体中文 繁體中文 English 日本語 Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 113|回复: 0

UI 设计中的鲜艳色彩:优点和缺点

[复制链接]

UI 设计中的鲜艳色彩:优点和缺点

[复制链接]

11

主题

0

回帖

79

积分

注册会员

积分
79
性别
保密
最后登录
2023-2-9
shinyue

11

主题

0

回帖

79

积分

注册会员

积分
79
性别
保密
最后登录
2023-2-9
shinyue 2023-1-12 11:11:59 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×

    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">有效应用颜色的技能是每个使用视觉构图的人(包括插画家和UI设计师)的必备技能。随着平面和材料设计方向的日益普及,色彩理论知识变得更加突出。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">鲜艳的色彩和渐变现在出现在不同数字产品的用户界面中:从俏皮和娱乐的产品到商业应用程序和网站。然而,关于鲜艳色彩对用户体验的影响,仍然有很多讨论。</span></p>
    <h1 style="text-align: left; margin-bottom: 10px;">UI 中明亮色彩的好处</h1>
    <h1 style="text-align: left; margin-bottom: 10px;">提高可读性和易读性</h1>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">在我们之前的一篇文章中,我们描述了影响配色方案选择的因素。可读性和易读性是设计师考虑应用颜色的基本因素。提醒一下,可读性</span><span style="color: green;"><span style="color: green;">代表人们阅读副本内容的难易程度,易读性定义了用户区分特定字体中字母的速度。</span></span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">鲜艳的色彩可实现足够的对比度,有助于提高可读性和易读性。由于对比,布局元素变得可区分和明显。但是,高水平的色彩对比度可能并不总是很好。如果复制内容和背景颜色对比度太大,将难以阅读或扫描文本。这就是为什么建议设计师创建温和的对比度,并仅将高对比度的颜色应用于突出显示元素的原因。</span></p>
    <h1 style="text-align: left; margin-bottom: 10px;">锐化导航并增强直观交互</h1>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">视觉层次是任何数字产品清晰导航和直观交互系统的核心要素。UI 组件以这种方式组织,因此大脑可以通过物理差异(包括颜色)来区分对象。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">颜色有自己的层次结构,由对用户思想的影响力来定义。有红色和橙色等大胆的颜色,也有白色和奶油色等弱色。鲜艳的颜色很容易被注意到,因此设计师经常将它们用作突出显示或设置对比度的手段。此外,将一种颜色应用于多个元素,您可以表明它们以某种方式连接。例如,您可以为购买按钮选择红色,以便人们可以在需要时直观地找到它们。</span></p>
    <h1 style="text-align: left; margin-bottom: 10px;">可识别性</h1>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">人类大脑对大胆的颜色反应强烈,这就是为什么明亮的颜色组合很容易被注意到和记住的原因。丰富多彩的UI设计有很大的机会在许多颜色较弱的产品中脱颖而出。选择需要基于目标受众的偏好和市场研究。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">此外,如果一家公司将明亮的公司颜色应用于徽标和品牌项目,则在其网站或移动应用程序上使用这些颜色可能是个好主意。通过这种方式,设计创造了连接公司所有沟通渠道的视觉解决方案的一致性,并提高了品牌知名度。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">在 UI 中应用的颜色越鲜艳,匹配它们就越困难。为了让用户感到愉悦和舒适,设计师试图将平衡与和谐带入用户界面设计中。色彩和谐是关于设计中颜色的排列,对用户的感知最有吸引力和最有效。和谐的颜色组合有助于给网站或应用程序留下良好的第一印象。色彩理论定义了几种基本的配色方案,这些方案已被证明可以有效地工作。让我们看看它们是什么。</span></p><strong style="color: blue;"><span style="color: green;">单色的。</span></strong><span style="color: green;">色彩和谐基于一种具有各种色调和阴影的颜色。</span><strong style="color: blue;"><span style="color: green;">类似。</span></strong><span style="color: green;">该方案应用色轮上彼此相邻的颜色。</span><strong style="color: blue;"><span style="color: green;">互补</span></strong><span style="color: green;">。它是在色轮上彼此前面放置的颜色混合,旨在产生高对比度。</span><strong style="color: blue;"><span style="color: green;">分裂互补</span></strong><span style="color: green;">。此方案的工作方式与前一个方案类似,但采用了更多的颜色。例如,如果您选择蓝色,则需要选择另外两个与其相反的颜色相邻的颜色,即黄色和红色。</span><strong style="color: blue;"><span style="color: green;">三合一</span></strong><span style="color: green;">。它基于三种不同的颜色,这些颜色在色轮上等距。专业人士建议使用一种颜色作为主导,其他颜色作为重点。</span><strong style="color: blue;"><span style="color: green;">四元/双互补</span></strong><span style="color: green;">。四联配色方案采用车轮上的四种颜色,它们是互补对。如果将所选颜色上的点连接起来,它们将形成矩形。</span>
    <h1 style="text-align: left; margin-bottom: 10px;">失去口音</h1>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">粗体颜色可以成为在UI中进行重音的工具,但它们仍然是重音消失的原因。单个视觉构图中的许多鲜艳色彩会带来丢失突出显示元素的风险,因为它们成为彩色混乱的一部分。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">这就是为什么建议设计师应用60%-30%-10%的比例。最大的部分应该去占主导地位的色调,构图的三分之一采用次要颜色,10%去颜色,这有助于制作重点。这样的比例被认为对人眼来说是令人愉悦的,因为它允许逐渐感知所有视觉元素。</span></p>
    <h1 style="text-align: left; margin-bottom: 10px;">鲜艳的颜色并不适合所有用户的组</h1>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">数字产品创建的核心阶段之一是用户研究。定义和分析目标受众 设计师了解他们对网站或应用程序的期望。年龄、性别和文化会影响潜在用户的偏好。例如,孩子们非常喜欢黄色,但随着我们成年,它通常看起来不那么有吸引力了。男性和女性通常更喜欢冷色,例如蓝色,绿色及其色调。与女性不同,男性通常更喜欢非彩色,包括白色、黑色和灰色。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">鲜艳的颜色也是如此。即使您为娱乐应用程序创建设计,您也需要考虑目标受众的具体情况。中年人通常更喜欢浅色用户界面,他们可能不喜欢屏幕上大胆的颜色,这会分散注意力。</span></p>
    <h1 style="text-align: left; margin-bottom: 10px;">鲜艳的色彩在移动屏幕上可能看起来对比度太强</h1>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">正如我们上面所说,明亮的颜色可以产生很大的对比度,有助于突出重要的UI元素,并有助于达到理想的易读性和可读性水平。然而,过多的对比度可能会开一个不好的玩笑,尤其是对于移动界面,因为它们的空间有限,可以在各种情况下使用。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">小屏幕、环境光和明亮的字体使对比图像看起来不愉快。这就是为什么在移动UI设计师中应用明亮的颜色需要注意颜色之间的对比度水平,以便人们在移动屏幕上阅读文本时感到舒适。</span></p>
    <p style="font-size: 18px; line-height: 40px; text-align: left; margin-bottom: 30px;"><span style="color: green;">颜色是大师手中的好工具,像任何其他工具一样,它有其优点和缺点。为了有效地使用它,您需要考虑它的所有方面,以便能够找到适合设计任务和目标的解决方案。</span></p>


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|DiscuzX | 晋ICP备16011496号-5|晋ICP备16011496号-5

GMT+8, 2024-11-21 20:39 , Processed in 0.099072 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复