徐州天琥教育，连锁设计培训机构，专注设计培训。课程由导师自主研发，涵盖UI设计、平面设计、室内设计、营销推广、影视等，参与商业中标实训，边学习边赚钱，大品牌值得信赖!天琥教育秉承“把经验传递给有梦想的人”，培养设计实战人才!互联网视觉教育基地!

课程详情

UXD设计来袭，成行业未来新趋势

阿里开始招收UXD全链路设计师，UI设计师的岗位将会被逐步替代。未来，技能更强，

能力更全的UXD全链路设计师将比传统设计师更吃香！

UXD全能设计是对UI设计师能力要求的全面升级，课程学完后，你将拥有出色的用户界面设计(UI)能力，并掌握到交互设计(ID)、

用户体验设计(UX)以及跨媒体设计（COD）的实战经验，成为企业一岗难求的实战设计人才。

一、平面广告阶段

此阶段你将主要深入掌握视觉表现能力：深入学习PS、AI和CDR软件，从基础阶段建立学员的审美高度。

二、品牌视觉阶段

此阶段你将掌握设计验证能力：学会品牌知识体系，围绕“审美+排版构图+配色技巧+

创意合成+物料延展+制作输出”进行大量的操作演练，提升设计实战能力！

三、网页电商阶段

此阶段你将掌握产品分析和运营设计能力：学习网页/电商的规范设计和整体思路，

学会不同风格网站、网页的设计技法，并掌握C4D视觉应用。

四、UI实战阶段

此阶段你将掌握市场研究、产品挖掘、用户体验和商业变现能力，熟悉互联网产品设计全流程，具备各项核心能力。

各位的UI设计师在做设计时，令你们较头痛的是啥？

不知道有没有小伙伴跟我一样在做页面配色时会很痛苦呢，很多时候都是凭感觉去配色。较近研究了一下配色方法，这里分享给大家，希望能帮助到一部分小伙伴。

有个有趣的研究成果——“七秒钟定律”：人们在挑选商品和服务时，只需要7秒钟就可以确定是否感兴趣，而在这短暂的7秒钟内，色彩的作用占到了67%。

一个设计作品呈现在用户面前，较先进入眼帘的就是产品的视觉表现，而色彩在其中起到了很大的作用。那么具体到实际项目中该怎样配色呢?

1.色彩基础知识

相信大家都知道，UI色彩使用的是

RGB模式，但是拾色器主要的选色原理遵循的是

HSB模式，也就是色相(H)、饱和度(S)、明度(B)。

一个正确的选色过程是先确定出色相(H)，然后再在这个色相维度下选出饱和度(S)和明度(B)。

选取色相时就要用到色相环这个熟悉的朋友了，每种颜色都有自己的色彩情绪。

下图是主要颜色的色彩情绪图：

2.UI设计中的色彩选择

在众多的

UI

设计规范中，色彩一般分为：

主色：产品的核心色彩，品牌色

辅色：丰富页面视觉和传达效果的次要颜色

2.1

主色的选择

主色是一个产品的品牌色，比如像淘宝的橙色、美团的黄色等。

怎么确定一个产品的主色呢?可以从以下几点考虑：

1、产品属性

2、行业属性

3、用户人群。

常见的APP主色应用：

1.绿色：主要集中在社交、学习教育、效率办公等领域。

如：微信、豆瓣、爱奇艺、QQ

音乐、网易云课堂、

BOSS

直聘、拉钩招聘。

为什么这些产品喜欢使用绿色呢?

绿色是中性色彩，没有明显的冷暖倾向，相对柔和，适合覆盖用户群体广泛的应用程序，且无论学习办公还是社交软件中的界面都需要长时间阅读，相比红黄等色彩，柔和的绿色更为适合。

2.蓝色：更多集中在工具类产品。

如：百度、QQ浏览器、酷狗音乐、知乎、贝壳找房、钉钉、支付宝

蓝色几乎成了工具类办公类产品的品牌色，为什么呢?

作为工具类产品(含办公类)产品，效率是他们所看重的，而蓝色是冷色系色彩能够让用户更加冷静，的完成任务。

3.红橙色：基本集中在电商类产品中。

如：淘宝、拼多多、京东

为什么电商类产品喜欢用暖色调呢?

暖色调给人温暖、活跃、欢快的气氛，符合用户购物时的状态，能够刺激用户的购买欲。

2.2

辅助色的选择

辅助色是丰富产品的次要颜色，

除了品牌传达外，具有更强的实用性。

选择辅助色时可以有以下2个方法：

1、依据色相环配色：两个颜色在色相环中角度越大，视觉差异越大，对比越强。所以在配色时，越需要被突出的颜色，可以在色环中离主色越远，越不需要被突出的颜色靠的越近。

如携程，APP主色是蓝色，去支付按钮是需要被重点突出的颜色，使用了主色的互补色橙色，

让我们一眼就能看见并产生强烈的点击欲望。

2、根据实际场景选择

比如通知、提醒、取消用红色;确认、同意用绿色、蓝色;收藏、打分、评价用橙黄色。都是已经在用户心智中建立了标准的用色类型，跟着常规方法来做，是没有其它思路的情况下较简单、较安全的辅助色选择方式。

3.UI设计页面中的色彩应用

3.1

主色占比大，色彩丰富度高

主色作为顶部标题栏或其它重要模块中的背景色进行大面积应用，

适合场景：需要加深用户对品牌的认知和辨识度，同时产品中包含大量功能点，需要用丰富的色彩来吸引用户关注，如

hello

bike。

3.2

主色占比大，色彩丰富度低

这类配色主色占比大，尽量使用主题色，很少使用其他颜色。

适合场景：比较适用于图片内容丰富的题材中，或者是相对正式、品牌感强的产品，如拉勾、酷狗音乐。

3.3

主色占比小，色彩丰富度高

适用场景：需要突出自身带有的服务和功能，留出更多的空间在内容模块的展示上，如大众点评。

3.4

主色占比小，色彩丰富度低

适合场景：产品服务相对单一，需要用户更加注重内容本身，

会尽力避免给予用户过多的干扰。如新浪微博。

每次配色时，我们都需要对使用哪种配色方案做出规划，然后再动手执行。设计时做到有理有据，这样后面的工作就会轻松很多了。