如何在App设计中正确的配色

~

色彩的数目

在app的界面中，尽量不使用过多的颜色。诚然，简单的颜色搭配很难第一眼就能吸引住用户。但是你的app毕竟不是一锤子买卖，把用户吸引来就完事了。特别现在很多app都是偏工具类的，用户会经常使用app，那么页面中过多的颜色会让用户抓不到重点，影响用户体验。

多伦多大学曾经做过一项调查，发现大部分用户都倾向于一个app页面中只有2—3款颜色。

好吧，我们已经知道了用户只喜欢2到3款颜色。那么我们怎么才能正确的挑出那2到3款颜色呢？色轮可以帮助我们。

十二辐色轮对于我们建立一款app配色方案来说是一个重要的工具，特别是对于菜鸟级别设计师来说。

单色搭配（ Monochromatic ）

单色搭配就是单一色系的搭配，在颜色的深浅、明暗或饱和程度上有所调整来形成明暗的层次关系。

单色搭配在app UI设计中一直都是一个不错的选择，特别是蓝色系和绿色系。

类比色搭配（ Analogous ）

类比色搭配是指选用一款颜色作为主色调，色轮中临近的颜色作为辅色。因为在色轮中相互靠的很久，所以搭配起来不会有很突兀的感觉。

这种配色方案看起来很容易操作，但是实际上主色与辅色的挑选却是很伤脑筋的。主色和辅色在色轮中的距离如果过远，那么整个页面就会显得用力过猛。当然挑选的好则另当别论。

Clear是一款管理行程的app，在这里设计师通过从橘黄色到红色的一个渐变来给用户实现不同任务视觉上的优先级顺序。

Clam是一款音乐播放软件。该软件专门播放一些让人放松的音乐能让你平静，冥想、睡眠、放松、改善情绪！当你失眠时静静Calm能帮你很快的进入梦乡。设计师主要采用了蓝色和绿色来帮助用户放松身心。

补色搭配（ Complement ）

在色轮上直线相对的两种颜色称为互补色。互补色因为互相处于对方的对立面，所以搭配起来会形成强烈的对比效果，进而吸引用户的注意力。

比如，当我们的眼睛看到一大块绿色区域时，一小块红色就会显得特别突出。

自定义配色方案 （ Custom Color Scheme）

创建一套新的配色方案并不是想象之中那么难的。最简单的方法就是挑选一款明亮欢快的颜色(比如企业色)作为主色，然后挑选几款中性色作为辅色。这样一套配色方案就完成了，而且效果也相当不错。

蓝色、白色、深灰、浅灰和黑色就是Dropbox页面里出现的所有颜色。就是这么简单

配色神器——Adobe Color CC

Adobe Color CC是由Adobe公司开发的是一款动态的配色识别工具，通过摄像头的实时拍摄，它会自动识别出当前图像中几个主要的配色组合。如果不想让应用随机挑选，便可以点击屏幕锁定，然后手动调节。

你也可以自己创建新的配色组合保存到library中。此外Adobe Color CC还提供了很多现成的配色方案。

对比度的应用

通常，页面的元素都不是单独出现的。比如你不可能看到一个页面中只有一个按钮，没有任何文字，图标。页面面中的任何一个元素都是整个系统的一个部分，不同的元素共同构成了一个页面。页面中的元素有优先级之分，有的元素更加重要，我们希望用户看到或者诱导用户进行操作。我们可以通过形状，颜色来产生视觉上的一个对比。我们这里主要讨论颜色使用带来的对比。

设计师更倾向于采用低对比的配色方案。因为高对比度的配色可能因为过于显眼而破坏整个页面的风格。低对比度意味着低风险，低对比度配色会使页面更加的好看与和谐。但是好看与和谐并不意味着高可读性。最典型的例子就是当文本和背景色对比度较低的时候，文本就会很难阅读。

特别是在手机端，用户会经常处于户外或者光线较为充足的地方，这时用户会因为炫光根本看不到屏幕内容。

为了确保界面对比度处于一个合理的范围内，我们引入一个新的概念—对比率 (Contrast ratios) 。对比率指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小。

一般来说较大文本(14pt 粗体／18pt 正常 以上)与背景的对比率最少要达到4.5:1。较小文本与背景的对比率要达到3:1以上。

至于对比率的计算，我有一个非常简单的方法。只要进入WebAIM’s Color Contrast Checker ，输入色值就可以计算对比率。

不只是文本，图标和其他一些重要的元素在配色的时候同样可以采用上面的对比率作为参考。

视力障碍用户群体

当你在设计一款app的时候，你有没有考虑到视力障碍的用户群体呢？

当我们谈到色盲的时候，通常会想到红绿色盲。其实色盲是指不能分辨自然光谱中的各种颜色或者某种颜色，红绿色盲是最常见的一种。据统计，全世界范围内，8%的男性和0.5%的女性都患有不同程度的色盲。

因为色盲对颜色的感知具有不确定性，有红绿色盲，蓝黄色盲更有单色色盲。这意味在设计中，我们无法完全规避色盲用户。所以为了更多的考虑色盲用户群体，我们在设计中应该降低颜色的依赖。我们可以使用图案，文字，形状这些元素来构建页面。

Photoshop可以通过模拟色盲来帮助设计师看到在色盲用户的眼中你的界面是什么样子的。

提升自己色彩的使用技巧是一个需要不断努力和积累的过程。你需要了解基础的色彩理论，更需要大量的实践，创新与用户测试。

【配色指南】UI设计中使用明亮色彩的利与弊,你知多少?
答：二、在UI中使用鲜艳颜色的缺点1. 明亮的颜色很难搭配对于那些只依靠直觉和美感来搭配色彩的设计师来说，他们往往会犯很多低级错误。如果想要创作出令人满意的视觉作品，那么关于如何应用和搭配颜色的基本知识是必不可少的。在UI中应用的色彩越鲜艳，就越难搭配。为了让用户感到满意和舒适，设计师试图在UI...

策划006-App界面设计风格
答： APP设计风格从视觉效果上至少给用户传达了两个信息：一是APP的整体基调。二是APP的目标人群。拿微信和QQ例子来说：微信是黑、绿、白三种主要颜色搭配，中规中矩的布局呈现给用户稳重、信赖的感觉，更像是成人的沟通工具。QQ默认皮肤是浅蓝、浅灰、白三种主要颜色搭配，灵活的布局交互呈现给用户...

app设计中色彩的类型有哪些
答：我们在设计APP颜色主要还是屏幕端，那就是RGB 如果是在设计一款APP 如何考虑他的配色 我们可以有以下方法 分析人对颜色的普遍认知/感觉，再结合产品特色来进行色彩的选择；抑或是从现有app采取的颜色来分析其视觉传达和表现效果。当我们实际要采用和确定一种颜色时，思考会涉及到方方面面，不是仅仅通过主观...

微信的设计配色方案有哪些原则
答：信作为一个社交并且是日常使用的软件所以必须做到“看着不会疲劳，界面识别度高，给人安全的感觉”微信的app图标，绿色也十分接近短信的图标，让人容易接受，其吸引力也极其强，而且无论放到什么手机主题下都可以适应！微信的界面，主题色是黑，白，绿。并且使用大量圆角，同时存在渐变高光与阴影。按键适中...

UI设计中的“黑与白”
答：适配无论是设计一个app页面还是网页，我们要记住用户会在不同的设备下使用我们的产品。在高分辨率屏幕下一些很酷炫的效果在低分辨率的屏幕下就会很“脏”，原有的效果无法体现出来。所以设计师应该注意产品在不同屏幕下的适配问题。当然这个在设计的早期构思过程中就应该被考虑到，什么样的版式与配色会很好...

双色调色技巧有哪些方法?请举例说明一下
答：今天给大家分享一个配色技巧——双色调。关于双色调风格，其实在国外的一些设计上经常被运用到，比如海报设计、网站和App，这种具有较强的视觉处理，不但能让原本单调的画面变得更时尚，相比普通色彩的图像，更明确表现出特定的氛围。那么什么是双色调？如何处理才能达到双色调的效果？又如何去运用双色调才更...

三原色与三间色换一副四季主题作品?
答：界面设计中的用色,运用简约设计的风格,文字运用无彩色,重点的按钮等运用有彩色设计。 配色时,只需要着重考虑不同色相的面积对比就可以了。例如:导航栏的面积较大,会用到品牌主题色。 4. 色彩的性格 1)冷色与暖色的运用 在界面设计中,冷色会让用户产生平静、安全、高科技的感受,因此在人工智能和社交类产品的界面...

banner图设计技巧和方法-细说APPBanner设计技巧
答：我们再设计Banner中就需要进行点、线、面相互组合,相互平衡,设计出来的Banner图更加丰富多彩,再加上字体的选择与设计、配色的分析、装饰的应用彰显出Banner与众不同。细说APPBanner设计技巧 确定风格 构图/排版 色彩 1-1.我们首先从第一个方面文字字体处理这个方面细说:文字切割,这种处理方法一般是将字体...

色彩搭配的原理是什么?
答：结果如下：成本管理APP如图，虽然设计还行，但由于色彩的选择，APP可能无法正常使用。 那如何优化呢？ 本文稍后的部分中，将介绍如何仅通过色彩的改变来优化整个APP。配色的价值就来了，设计师需要了解色彩的含义和影响，以传达正确的语气、信息并引导用户做出预期的行为。 每种色彩都会对我们的思维产生影响...

5个角度让你的APP更精致
答：作为UI设计师你只需要比别人多提高1px的细节,你的APP设计就会更精致。 当我们打开一个APP时,从视觉层面分析,影响用户对APP整体感官体验的元素主要有:图片、文字、色彩、图标、留白等。 图片的合理运用、清晰的信息层级、舒适的色彩搭配都将会提高整个APP的美感,从而为整个的产品体验加分。一个成功的产品,视觉层面只是...