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

作者&投稿:伯牙吾台冒 (若有异议请与网页底部的电邮联系)
~

色彩的数目

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

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

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

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

单色搭配(Monochromatic)

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

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

类比色搭配(Analogous)

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

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

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

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

补色搭配(Complement)

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

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

自定义配色方案(CustomColorScheme)

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

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

配色神器——AdobeColorCC

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

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

对比度的应用

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

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

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

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

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

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

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

视力障碍用户群体

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

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

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

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

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



app设计中的色彩搭配【设计师必学】
答:主色是指在配色中处于主导地位的色彩,给用户的第一眼印象,通常是产品的品牌色.在App设计中,主色一般占有色相色彩的60%的比例.这里指的是60%的界面都使用到的主色比例,而不是使用面积(因为通常一个界面中使用面积最大的是背景色).还有就是背景色多为浅灰色或白色,它们都属于无色相色彩,因此不涉及...

APP的配色应该如何设计
答:设计师根据目标控制对比度.例如,如果需要用户特别注意特定的用户界面元素,最好使用蓝色和红色这两种对比度较高的颜色.CTA按钮设计通常采用高对比度配色.但是从UI的整体构成来看,高对比度的色彩对比未必总能奏效.如果复制的内容和背景之间的颜色对比太强,就很难阅读或扫描文本.这就是为什么设计师被建议创造...

APP界面色彩运用原则与规范!(三)
答:③明度对比。合理的明度对比可以缓解视觉疲劳,使用户在操作中格外舒适。敏感度的对比会给用户展现设计的情感在里面。④纯度对比。虽然饱和色比暗淡色更能吸引注意力,当色彩与周围对比强烈时,即使是暗淡的颜色也能吸引注意力。小面积饱和、明亮的色彩比大面积柔和的色彩更能吸引注意力。⑤主次对比。主体色...

APP界面常用的五种颜色搭配
答:比如之前追波网设计漂亮的APP界面设计:4、中性色配色法则 用一些中性的色彩为基调搭配,弱化干扰。这种方法在移动端是最常见的方法。由黑色、白色及由黑白调和的各种深浅不同的灰色系列,称为无彩色系,也称为中性色。中性色不属于冷色调也不属于暖色调。黑白灰是常用到的三大中性色。5、渐变色与纯色配...

如何在App设计中正确的配色
答:这种类型的配色方案用于不需要对比度的设计,包括web或banner的背景。高对比搭配 选择色轮上对立面的颜色混合,提高对比度。例如:蓝色背景上的橙色按钮非常吸睛。协调对比搭配 这个方案与上一个方案类似,但是它采用了更多的颜色。例如:如果选择蓝色,则需要取其对立面中,相邻的2个其他颜色(即黄色和红色...

如何在App设计中正确的配色
答:单色搭配在app UI设计中一直都是一个不错的选择,特别是蓝色系和绿色系。类比色搭配( Analogous )类比色搭配是指选用一款颜色作为主色调,色轮中临近的颜色作为辅色。因为在色轮中相互靠的很久,所以搭配起来不会有很突兀的感觉。这种配色方案看起来很容易操作,但是实际上主色与辅色的挑选却是很伤脑筋...

策略性配色法则 | 如何通过配色提升设计品质?
答:如何分析设计中的配色问题?如何通过系统的方法,提升配色能力?配色并没有所谓的固定方程式,生搬硬套配色理论并不能真正解决问题。本文带你从配色的策略性角度出发,深入分析配色的正确打开方式,让你从本质上解决不同场景的配色问题,并通过配色提升整体的设计品质。    一、明确配色目标1.色彩规律≠配色规律 我们...

六种配色方法让你的设计方案666
答:要创造相似的和谐,你需要使用在色轮上相邻位置的颜色。这种配色方案被用于不需要对比度的设计中,包括网页或banner的背景。● 方法三:互补色 互补配色方案是将色轮上对应位置的颜色进行混合。这种方案和相似色和单色相反,因为它旨在产生高对比度。例如,在蓝色背景上使用橙色按钮在任何界面中都很难被错过...

UI设计中常用的色彩搭配技巧有哪些?
答:再经过深入的知识或者艺术的搜索和准备,就可以换来惊人的效果。1、大胆的尝试 如今,设计师在颜色搭配和选择的时候有很多辅助软件。其中很多软件可以提供大量的现成颜色组合可以选择,还可以查找很多别的设计师的例子。设计师就可以在不断的尝试中找到不同的搭配。然而,设计师要跳出这些已有的搭配和组合,...

如何学习平面设计的色彩搭配?
答:二、色彩搭配网站1、Color Hunt-配色:设计、网页配色工具网站。2、uiGradients:渐变色分享网站,里面有很多美丽的方案选择哦!3、Coolors.co:超快速配色方案生成器,创建完美的调色板或从数千种美丽的配色方案中汲取灵感。4、Material UI Colors:帮助设计师们快速定位颜色组合。5、flatuicolorpicker:UI...