网易首页 > 网易号 > 正文 申请入驻

如何调整UI界面配色方案,来增强产品设计感?

0
分享至


测试调色板
测试你的设计。将调色板应用于设计后,请进行一些可用性测试。颜色可以改变按钮、链接或任何其他类型组件的可用性。例如,灰色按钮有时可能会显示为已禁用,即使它们并非如此。此外,寻找与对比度和色盲相关的易读性和可访问性问题。我们喜欢使用accessible-colors.com 来测试不同文本-背景组合的可访问性。此外,如果您的可用性测试表明您的某些颜色不适用,请返回并再次迭代您的调色板。


UI界面配色方案


调色板的科学合理的运用是在产品UI界面设计创作中的专业工具,用好调色板可以大幅提升设计的工作效率。

我们先来看一下什么是牛顿色轮,色轮的解释,颜色是我们的眼睛感知不同光波长的方式。在1666 年,艾萨克·牛顿爵士确定了三个颜色组,分别为:
主要色:黄色,红色,蓝色
次要色:橙色、紫色、绿色(原色混合)
第三级:黄橙色、红橙色、红紫色等(初级和次级混合)
牛顿将这些颜色放在色轮上以说明它们之间的关系。

英国科学家牛顿在1666年发现,把太阳光经过三棱镜折射,然后投射到白色屏幕上,会显出一条像彩虹一样美丽的色光带谱,从红开始,依次接临的是红、橙、黄、绿、青、蓝、紫七色。
基础色彩理论:
设计之前可以将一组可以很好搭配的的颜色, 放入您构建的调色板里。一些常见的颜色搭配有:
类比:在色轮上彼此相邻的颜色(这种颜色和谐会产生低颜色对比度。)
互补色:色轮上相反的颜色,产生高色彩对比度
分裂互补色:一种颜色从其互补色的任一侧与其他颜色相结合。这种和谐略微柔化了与基本互补色的对比。
三色:色轮上三种等距的颜色(相隔 120 度)
单色:单一色调的色调和阴影
还有更多使用四种颜色的和声类型。但是,您引入的颜色越多,就越难以平衡和加强视觉层次。如果您有丰富的色彩经验,您可以尝试更复杂的和声,但从两种或三种颜色开始。
将颜色应用于UI界面设计
调色板是为特定项目或品牌而选用的一组颜色,每块颜色都是其明确的目的性,整个颜色系列提供了对产品或界面的视觉品牌感。 首先要先创建调色板 ,以下指南可帮助您创建调色板:
根据您的项目品牌色,选择主色调,确定好主色之后,进而选择2至3款的辅助色,通过在色彩明度、饱和度...等之间不断调节,最终确定您的调色板的颜色。举例,您是否曾经很难在方便面的货架上找到想要的那个牌子?那是因为产品外包装有很多颜色,所有的颜色都在争夺你的注意力,同样在UI界面设计中也是如此,记住,少即是多,前提是遵循您品牌的颜色指南。创建调色板时,请始终遵循既定的颜色准则。您的工作不仅会更轻松,因为您会考虑更少的颜色替代品,而且还会创造强大、一致的品牌体验。如果您没有品牌颜色指南,请查看现有设计和产品中使用的颜色,并尝试将它们合并到您的调色板中。
使用您创建的调色板
一旦你有了你的调色板,是时候将它应用到你的设计中,看看它是如何保持的。以下是一些指导方针: 使用 60-30-10 规则。此规则仅意味着应在 60%、30% 和 10% 的设计区域中使用颜色。将 60% 用于主色,30% 用于辅助色,10% 用于强调色。这些比例有助于创造平衡,防止你制造出五颜六色和混乱的混乱。
主色和辅助色应该是相对中性的颜色。为您希望在页面上最突出的内容保留强调色——例如,主要的号召性用语。 应用然后迭代。一旦你使用了 60-30-10用色规则,调整你的颜色,这样你就可以提高美感和突出设计中重要的东西。看看视觉设计原则是如何在你的设计中发挥作用的。


UI界面配色方案

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
财政部:我国政府负债率处于合理区间,风险安全可控

财政部:我国政府负债率处于合理区间,风险安全可控

界面新闻
2025-09-12 15:48:10
张学良大姐张首芳,提菜刀砍张作霖,婚后被丈夫家暴,潦倒而死

张学良大姐张首芳,提菜刀砍张作霖,婚后被丈夫家暴,潦倒而死

蜉蝣说
2025-09-12 15:41:50
卢特尼克:美方即将与台湾地区达成一项“重大协议”

卢特尼克:美方即将与台湾地区达成一项“重大协议”

参考消息
2025-09-12 16:41:06
新华社发起“讨贼檄文”:中国正式宣布,中美没有硝烟的战争开打

新华社发起“讨贼檄文”:中国正式宣布,中美没有硝烟的战争开打

小陆搞笑日常
2025-09-14 00:15:00
1976-1979,巨变前夜

1976-1979,巨变前夜

方待夜半听君语
2025-09-11 07:05:12
于东来不忍了!出手撕下罗永浩仅剩体面,董宇辉也出了口窝囊气

于东来不忍了!出手撕下罗永浩仅剩体面,董宇辉也出了口窝囊气

鸟儿太能吃
2025-09-13 18:57:18
外滩大会!机器人十大龙头背后,谁才是真科技

外滩大会!机器人十大龙头背后,谁才是真科技

娱乐督察中
2025-09-13 14:28:01
北京“变老”加速:500万老人背后,谁在守护这座城的晚年?

北京“变老”加速:500万老人背后,谁在守护这座城的晚年?

奇思妙想生活家
2025-09-13 17:58:58
中央巡视组进驻后,徐昊、管亚光被查

中央巡视组进驻后,徐昊、管亚光被查

鲁中晨报
2025-09-13 22:06:03
欧洲动作片女演员,天赋极高!

欧洲动作片女演员,天赋极高!

贵圈真乱
2025-08-17 09:56:48
图拉姆兄弟对决堪称完美!各为其主皆取得入球,主宰国家德比

图拉姆兄弟对决堪称完美!各为其主皆取得入球,主宰国家德比

雷速体育
2025-09-14 02:28:08
马云预言成真?2026年,手握存款的人,或将面临三大挑战

马云预言成真?2026年,手握存款的人,或将面临三大挑战

趣文说娱
2025-09-12 11:35:30
于朦胧坠楼事件持续发酵!程青松关注的基本都是美男子,私聊太污

于朦胧坠楼事件持续发酵!程青松关注的基本都是美男子,私聊太污

皮蛋儿电影
2025-09-13 21:53:51
女优流川春香移籍挑战剧情片,在家中被儿子同学拿下!

女优流川春香移籍挑战剧情片,在家中被儿子同学拿下!

葫芦哥爱吐槽
2025-09-12 19:55:01
善恶有报,表面是"轮椅舞者"背后是"三姐"的刘岩,终是遭到"反噬"

善恶有报,表面是"轮椅舞者"背后是"三姐"的刘岩,终是遭到"反噬"

春序娱乐
2025-09-04 09:45:43
中美航发差距被拉大?涡扇15的推力、油耗和高速性能均弱于XA100

中美航发差距被拉大?涡扇15的推力、油耗和高速性能均弱于XA100

健身狂人
2025-09-13 11:06:04
曝知名反贼李硕已从美国返回国内,曾在人人网宣布“建国”,如今盛赞中国世界一流

曝知名反贼李硕已从美国返回国内,曾在人人网宣布“建国”,如今盛赞中国世界一流

不掉线电波
2025-09-10 19:38:54
国安球迷再次怒批球员!直言两场输八个还要脸吗?引发外界热议

国安球迷再次怒批球员!直言两场输八个还要脸吗?引发外界热议

懂个球
2025-09-14 01:48:54
中国使馆附近,以色列投下数枚炸弹,内塔尼亚胡这回惹大麻烦!

中国使馆附近,以色列投下数枚炸弹,内塔尼亚胡这回惹大麻烦!

冷眼观察
2025-09-14 01:20:07
央视痛批电动车解限速!可跑不快的25km/h,谁能替骑车人说话?

央视痛批电动车解限速!可跑不快的25km/h,谁能替骑车人说话?

芭比衣橱
2025-09-13 06:00:28
2025-09-14 02:47:00
维好维可UI设计
维好维可UI设计
维好维可- UI / UX交互和界面设计公司
35文章数 0关注度
往期回顾 全部

科技要闻

京东淘宝iPhone17基础版十分钟被抢空

头条要闻

游客自驾撞死6匹马:一匹大马1.2万 车子只有交强险

头条要闻

游客自驾撞死6匹马:一匹大马1.2万 车子只有交强险

体育要闻

27年的等待结束?挪威最快下个月进世界杯

娱乐要闻

杨幂回复祝福区别对待祝绪丹引热议

财经要闻

西贝冤不冤

汽车要闻

欧阳明高:智能化只是中场 2030-2035年能源低碳化才是下半场

态度原创

亲子
家居
健康
房产
公开课

亲子要闻

安琪们的“破衣服”:780万孩子的烧烫伤隐痛与守护之路

家居要闻

原木风格 温馨舒适氛围

内分泌科专家破解身高八大谣言

房产要闻

「世界冠军×人居升阶」白鹅潭CLD封面,实力馥见人生新高度!

公开课

李玫瑾:为什么性格比能力更重要?

无障碍浏览 进入关怀版