移动UI 设计有哪些配色技巧

1,025 阅读2分钟

1.同类色搭配 色环上相距0°的色彩为同类色,如蓝与浅蓝,红与粉红等。同类色搭配视觉效果统一、清新、含蓄,如下图 所示。

image.png

2.互补色搭配 色环中相对的两种色彩互为补色,互补色对比强烈,能传达能量、活力、兴奋等意。选择适合APP 风格的色彩,控制补色的明度、纯度和使用比例,可使界面产生明显的对比和视觉冲击,如下图所示。

image.png

3.邻近色搭配 色环上处于90°之间的两种色彩为邻近色,如红与黄,绿与蓝等。采用邻近色搭配效果柔和、文静、和谐,但处理不当也会产生单调、模糊的感觉,此时可通过调节色彩的明度和纯度来增强视觉效果,如下图所示。

image.png

4.同色调搭配 同色调搭配是指明度和纯度相同,色相不同的色彩组合方式。如支付宝界面中的图标,虽然色相不同,但组合在一起不会显得混乱,反而非常和谐,如下图所示。

image.png

5.参考竞品配色方案

竞品是竞争对手的产品,在APP 设计初期,产品经理和设计师会对市面上的竞品进行分析,竞品配色是分析的重要环节,设计师可在该环节初步确定界面的配色方向。如需要做一个快餐类的APP,在设计之初就可以选择竞品进行分析,参考竞品的色彩搭配,如右图所示。

image.png

6.参考iOS 人机界面指南配色方案

在iOS 人机界面指南中,苹果公司给出了8 种颜色,这8 种颜色是通过反复试验挑选出的,无论是单独使用还是组合使用,无论是在亮的背景还是在暗的背景中,它们的效果都非常突出,如下图所示。

image.png

关于纯色 大面积的纯色会使用户产生视觉疲劳,对于需要长时间观看的界面内容,应避免使用大面积纯色。看看手机中的微信界面,从导航栏到图标都没有使用纯色,如右图所示。

image.png

关于灰色

界面中的灰色通常是作为背景用于凸显主体文字,应用时应尽量避免40% ~ 70% 的灰色。从右图中可明显看出,60% 灰色背景上的文字识别度较低。

image.png