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

如何调整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.

相关推荐
热点推荐
喜讯!德国球探确认:已向德甲球队推荐王钰栋,冬窗有望完成转会

喜讯!德国球探确认:已向德甲球队推荐王钰栋,冬窗有望完成转会

国足风云
2026-01-19 15:10:56
林琳,任福建一国企总经理(附简历)

林琳,任福建一国企总经理(附简历)

人民资讯
2026-01-19 14:18:04
日本“金饭碗”丢了!垄断全球20年,16亿顶尖设备被我国攻克

日本“金饭碗”丢了!垄断全球20年,16亿顶尖设备被我国攻克

芯火相承
2026-01-17 21:39:07
不服就干!冰岛打响反美第一枪,通告全球,断的就是特朗普退路

不服就干!冰岛打响反美第一枪,通告全球,断的就是特朗普退路

奇奇圈
2026-01-19 10:44:41
破防了!原来只要失业,所有人都一样!网友:人都快抑郁了

破防了!原来只要失业,所有人都一样!网友:人都快抑郁了

另子维爱读史
2026-01-16 21:03:12
王静逼聂卫平跟孔祥明离婚,7年后聂卫平嫌儿子太笨,埋怨王静

王静逼聂卫平跟孔祥明离婚,7年后聂卫平嫌儿子太笨,埋怨王静

百态人间
2026-01-16 16:02:25
为何不建议城里老人回农村养老?我的经历,就是给大家最好的警示

为何不建议城里老人回农村养老?我的经历,就是给大家最好的警示

人间百态大全
2026-01-19 06:35:02
中国股市稳定复利的笨方法:持有一只股,保留50%仓位,长期做T

中国股市稳定复利的笨方法:持有一只股,保留50%仓位,长期做T

股经纵横谈
2026-01-18 16:12:10
83年,乔冠华与章含之在家中拍了最后一张合影,乔的笑容有些勉强

83年,乔冠华与章含之在家中拍了最后一张合影,乔的笑容有些勉强

历史甄有趣
2026-01-04 09:30:24
-13℃+大风!北京“冰冻模式”或将再持续100小时——

-13℃+大风!北京“冰冻模式”或将再持续100小时——

BRTV新闻
2026-01-19 15:28:07
甲钴胺立大功!医生研究发现:老人吃甲钴胺,或能缓解5种症状

甲钴胺立大功!医生研究发现:老人吃甲钴胺,或能缓解5种症状

医学原创故事会
2026-01-19 15:42:05
87年我师范毕业分到乡镇,父亲找县长发小吃顿饭,我的人生被改写

87年我师范毕业分到乡镇,父亲找县长发小吃顿饭,我的人生被改写

卡西莫多的故事
2025-12-02 09:38:03
卷走53亿!又一大佬带全家跑路,欠中国银行20亿,投资者血本无归

卷走53亿!又一大佬带全家跑路,欠中国银行20亿,投资者血本无归

以茶带书
2025-12-09 23:33:58
今年春节前,烟草市场突现大变局,价格大跌原因何在?

今年春节前,烟草市场突现大变局,价格大跌原因何在?

复转这些年
2026-01-18 23:54:21
全球财富金字塔 顶端12人资产超底部40多亿人财富总和

全球财富金字塔 顶端12人资产超底部40多亿人财富总和

极目新闻
2026-01-19 16:54:49
商业航天板块里的真龙头

商业航天板块里的真龙头

风风顺
2026-01-19 13:20:55
长期思维者这样投资:每月6000定投红利指数,相信慢即是快

长期思维者这样投资:每月6000定投红利指数,相信慢即是快

真实人物采访
2026-01-18 18:10:03
医保谈判失败,“救命药”退出中国!

医保谈判失败,“救命药”退出中国!

风云药谈
2026-01-17 20:01:23
又揪出来一个巨贪,金额高达9.7亿,首富夫人郝斌跨境逃亡失败了

又揪出来一个巨贪,金额高达9.7亿,首富夫人郝斌跨境逃亡失败了

说历史的老牢
2026-01-19 10:42:02
国际乒联终身主席怒了!樊振东打不打奥运会,应该我们自己说了算

国际乒联终身主席怒了!樊振东打不打奥运会,应该我们自己说了算

淡淡稻花香s
2026-01-19 01:05:31
2026-01-19 20:40:49
维好维可UI设计
维好维可UI设计
维好维可- UI / UX交互和界面设计公司
101文章数 0关注度
往期回顾 全部

科技要闻

这一仗必须赢!马斯克死磕芯片"9个月一更"

头条要闻

特朗普给挪威首相发信息:不再有义务只考虑和平

头条要闻

特朗普给挪威首相发信息:不再有义务只考虑和平

体育要闻

错失英超冠军奖牌,他却在德甲成为传奇

娱乐要闻

吴磊起诉白珊珊诽谤,白珊珊称被盗号

财经要闻

公章争夺 家族反目 双星为何从顶端跌落?

汽车要闻

徐军:冲击百万销量,零跑一直很清醒

态度原创

数码
健康
教育
旅游
时尚

数码要闻

海信发布E8S系列RGB-Mini LED电视:RGB真彩背光,12999元起

血常规3项异常,是身体警报!

教育要闻

孩子说“太累了想休息一天”,你会给老师请假吗?

旅游要闻

四川广元昭化古城:千年文脉在守护与创新中焕发新生|文化中国行·巴风蜀韵

比巴恩风更火的“富家千金风”来了!高级又气质

无障碍浏览 进入关怀版