火星网校
怎么搭搭搭！UI设计的颜色怎么选？
发布时间：2024-07-01 19:12:02 浏览量：146次
有没有小伙伴跟我一样，每次做页面配色都感到头疼呢？很多时候都是凭感觉在瞎配。最近我研究了一下配色方法，今天就来给大家分享一下UI设计中的配色设计攻略，希望能帮助到你们。
有趣的研究发现——“七秒钟定律”：在挑选商品和服务时，只需要7秒钟就能决定是否感兴趣，而在这短暂的7秒钟内，色彩的作用占了整体的67%。
一个设计作品呈现在用户面前，最先映入眼帘的是产品的视觉表现，而色彩在其中扮演着至关重要的角色。那么在实际项目中，我们如何选择合适的配色呢？
1.掌握色彩基础知识
UI设计中常用的是RGB色彩模式，而在选色时我们通常会使用HSB模式，即色相、饱和度、明度。
正确的选色过程是先确定色相，再在这个色相下选择饱和度和明度。
选取色相时可以使用色相环，每种颜色都会带有自己独特的情感色彩。
2.UI设计中的色彩选择
在众多的UI设计规范中，色彩一般分为：
主色：产品的核心色彩，品牌色
辅色：丰富页面视觉和传达效果的次要颜色
2.1 主色的选择
主色代表着产品的品牌色彩，比如淘宝的橙色、美团的黄色等。
如何确定一个产品的主色呢？可以从产品属性、行业属性和用户人群等方面考虑。
常见的APP主色应用：
1.绿色：主要应用于社交、学习教育、效率办公等领域。
如微信、豆瓣、爱奇艺、QQ音乐等。
为什么这些APP喜欢使用绿色呢？绿色是中性色彩，柔和适合长时间使用，覆盖用户群体广泛。
2.蓝色：多用于工具类产品中，如百度、QQ浏览器、知乎等。
蓝色作为工具类产品的品牌色，冷色调能让用户更加冷静、高效地完成任务。
3.红橙色：主要出现在电商类产品中，如淘宝、拼多多、京东等。
暖色调给人温暖、活跃的氛围，符合用户购物时的心理，刺激购买欲。
2.2 辅助色的选择
辅助色丰富产品的次要颜色与品牌传达，具有更强实用性。
选择辅助色可从以下两个方法出发：
1.色相环配色：颜色与主色色相差异越大，对比越强，一般需要突出的颜色离主色越远，不需要突出的颜色越靠近。
2.根据实际场景选择：如通知使用红色、确认使用绿色或蓝色、收藏使用橙黄色。这些是用户心智中已建立的用色标准，简单、安全。
3.UI设计页面中的色彩应用
3.1 主色占比大，色彩丰富度高
主色作为顶部标题栏或其他重要模块的背景色大面积运用，适合需要加强品牌辨识和吸引注意力的场景，如hello bike。
3.2 主色占比大，色彩丰富度低
在这类设计中，主色占比大，并尽量只使用主题色，适用于内容较为丰富或正式品牌感强的产品，如拉勾、酷狗音乐。
3.3 主色占比小，色彩丰富度高
适合需要突出服务和功能的产品，展示内容模块的空间较大，如大众点评。
3.4 主色占比小，色彩丰富度低
适用于服务比较单一，用户需要更专注内容本身的产品，如新浪微博。
总结
每次配色时，都需要有选择合适配色方案的规划，合理设计，工作会更加轻松愉快。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
8. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
最新文章
