摘要：UI色彩设计是展现一款UI产品风格特点的有效手段之一，与固定的Web端界面设计不同，随着技术水平的发展，移动端的媒体界面设计会更加方便，有利于大多数用户使用。一款好的移动媒体UI设计通常会运用合理的配色呈现其产品特色。基于此，本文研究移动媒体UI设计中的色彩搭配，以提升移动媒体UI设计对于用户的吸引力。同时，分析近年来的UI色彩设计趋势，以及不同色彩给人带来的不同视觉感受，旨在打破传统色彩设计方案，引导UI设计师进行创新，合理运用色彩搭配提升移动媒体UI设计水平，为用户带来更多的色彩设计方式，提升用户使用满意度。

关键词：移动媒体;UI设计;色彩搭配

中图分类号：J504 文献标识码：A 文章编号：1004-9436（2021）15-0-02

0 引言

随着网络信息的快速发展，数字媒体行业的影响力逐渐提升，人们的移动媒体使用频率也逐渐上升。在移动媒体高速成长的状态下，用户对移动媒体UI设计的质量与要求也逐步提升，设计师在对移动媒体UI进行色彩设计时会根据用户的行为习惯、性别、爱好、年龄、生活环境、宗教习俗等因素不断进行完善。移动媒体UI设计所呈现的视觉色彩不同，给用户带来的体验感也会有所不同，在移动UI交互设计中合理地进行色彩搭配是提升产品质量、吸引用户的重要手段之一，因此，越来越多的设计师开始重视选用适当的色彩完善移动UI设计。

1 移动媒体UI设计概述

简单来说，UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计[1]。移动媒体UI界面的设计和传统网页界面设计相似，主要分为三类，分别是界面的图形设计、绘制原型图的交互设计、用户体验研究。 好的UI设计不仅能够提升产品的品质，使产品看起来更加高端，还能使操作更加便捷实用。随着网络时代的迅速发展，移动媒体UI设计在近些年逐渐成为主流UI设计之一。

移动媒体UI设计是指移动端媒体的界面设计，通常是指手机、iWatch等可移动设备的界面。相对于固定的网页端UI设计，移动媒体UI设计更加灵活，它的界面展示集中于方寸之间，无论是上下班出行还是在家都可以随时随地使用，这也给移动媒体UI设计带来了更多的展示平台。合适的色彩搭配会让UI设计界面锦上添花甚至能决定产品的质量，因此移动媒体UI设计中的色彩选择成为设计师不可忽略的重要环节。

2 移动媒体UI设计中的色彩设计原则

2.1 协调统一原则

同样的移动媒体UI设计界面风格在不同的配色中会给予用户完全不同的感受。在移动媒体UI设计在与用户进行交互的过程中，色彩能直观地表达产品的个性。因此，在移动媒体UI界面的设计中，为了使整个产品画面和谐，色彩的搭配需要平衡均匀、协调统一。设计师在设计之前需要定好占页面比例最大的主色调，通过主色调确定整个界面的风格，再以主色调为基准搭配辅助颜色突出重点部分，以保证UI界面色调和谐、内容划分清晰，使产品有足够的特色吸引用户。统一的色彩可以简化产品信息。在同一个画面中，使用的色彩尽量不要超过五种，主色调一到两种即可，统一的整体色调可以突出重点并且使界面生动丰富。尽量避免因颜色过多而造成用户视觉上的混乱，UI界面色彩和谐会使用户在浏览时感到轻松愉悦。

2.2 傳递情感原则

色彩可以传递情感，作为一种视觉元素，它可以通过不同的色彩给用户传递不同的情绪感受，潜移默化地影响和改变用户的使用情绪。运用色彩传达情感的特性可快速拉近产品与用户之间的距离。橘色、黄色、粉色等暖色调的颜色适用于母婴、化妆品、室内家具类的移动媒体UI产品界面，紫色、蓝色等偏冷的色调适用于高科技技术、互联网类的移动媒体UI界面，黑、白、灰的色调适用于想要营造高级质感、奢侈品类的UI界面。设计师在选择UI界面的配色时，需要学会利用色彩制造不同的温度感、距离感、质量感等，满足用户的心理需求。

2.3 重点突出原则

一个画面中的色彩元素过多会导致用户在使用过程中产生视觉疲劳。一款好的设计在进行构思时，一般会敲定一款主色调，通常会选取一种恰当的颜色作为整个移动媒体UI界面的主色调，并将同色调运用于产品的细节之中，如按钮、边框、图标等，让整个画面色调统一。需要注意的是，重点色不等同于主色调，它应该区别于主画面中的大部分颜色，利用其他的颜色突出页面中细小零散的重点按键。这也可以让使用者很好地抓住页面中的重点，有助于集中产品的功能，减少用户在使用过程中因画面杂乱而产生不适感。

2.4 趣味生动原则

通常来说，高饱和度的色彩会比低饱和度的颜色更能吸引人的注意力，这是因为绚丽的色彩能够更好地让界面变得活泼生动。当然，这并不是说高饱和度的UI界面色彩就更好，而是色彩变换可以极大地激发用户的使用兴趣，这就需要在设计过程中充分利用色彩灵活多变的特性。在进行色彩的设计时，尽量避免出现色彩过于单调、缺少变化的状况，单调的色彩无法打造合适的产品氛围。选取恰当的色彩面积，将色彩的色相、纯度、明度、光色和肌理等要素进行有序的、规律性的设计，能够让用户感受到UI界面色彩变换的丰富性，让界面更加生动，吸引用户的注意力。

2.5 色彩平衡原则

在移动媒体UI界面中，过于强烈的颜色容易让人觉得眼花缭乱，在设计中做到色彩平衡可以很好地减轻浓烈色彩带来的冲击感。色彩平衡主要是指调和颜色的强弱、轻重和浓淡关系。通常情况下，同一种冷暖的配色方案可以快速高效地实现界面的平衡与协调，而高纯度的互补色或对比色，如红色和绿色、黄色和蓝色、绿色和橙色等，则很容易带来过于强烈的视觉观感，使用户感到不适。色彩平衡的另一种方式为明度的平衡，高明度的颜色会给用户通透明亮的感觉，可以增强界面的层次感和活力，而低明度的色彩则更显高级质感，带给用户低调沉稳的感受[2]。

3 移动媒体UI界面的配色方式

当不同的色彩搭配组合在一起时，色彩的明度、饱和度的不同数值搭配作用使得界面富有层次感，需要注意的是，色彩过于一致也会让界面变得单调。例如，几种浅色组合搭配很难产生对比效果，同样，多种深色搭配在一起也会过于杂乱，难以吸引用户。但当两种搭配方式穿插在一起时，即浅色与深色共同组合在同一界面里，浅色就显得更浅，深色显得更深。明度和色相相应搭配也会产生同样的对比效果。

在实际的网页界面设计过程中，还是要考虑到页面的整体环境和色调组合之间的变化。同样的颜色、明度和饱和度，由于界面背景、装饰的颜色不同，搭配起来可能会让同一个界面千变万化。因此，UI界面的色彩搭配需要通过分析产品的个性和特征制定个性化的设计方案。

3.1 邻近色配色

在色相环中选取邻近的颜色进行搭配组合，与同色系的色彩结合。近邻色搭配会让UI界面更加丰富一些，颜色接近也会让界面的过渡变得更加自然和谐。选取色环中不同的邻近色会让用户拥有不同的感受，如绿色与黄色结合会给用户清新自然的感觉，蓝色和紫色相搭配会增添产品高贵优雅的特性。特别是在一些过高纯度的移动媒体UI界面中，可以选用邻近色填充和点缀按键和标签，不仅不会让色彩突兀，还会让画面更有层次感。在图标等按钮配色完成后，再统一降低色彩的饱和度用于界面模块划分，能使画面颜色和谐统一。

3.2 同色系配色

同色系配色是指移动UI界面的主色和辅助色在同一个色相中。一般来说，这种配色方案所产生的UI界面能给用户一种整体性，让人感受到页面的一致。由于同色系界面设计的整体性较强，移动媒体UI界面较小，色彩的色相差别小，用户很难分辨内容的划分，这时就可以利用颜色的深浅区分不同类型的内容信息。例如，在同一个界面中，主色调选取紫色，淡紫色和深紫色分别为不同板块进行划分，穿插白色作为背景，产品的界面就会非常具有整体性，用户在使用的时候也能感受到产品界面的一致性。

3.3 相似色配色

相似颜色搭配也是一种常见的配色方式，运用在移动媒体UI界面中会让整个界面色调平和，不会有太过强烈的反差。例如，在同一款产品中，以蓝色和绿色为基调，加入青色、湖蓝等与主色调相似的颜色，会给使用者带来平静、和谐的感受。

3.4 互补色配色

虽然在大多数情况下，移动媒体UI设计的界面需要给用户营造一个和谐、有助于浏览的界面。但是在一些购物或者宣传类的UI界面中，还是需要一定的视觉冲击吸引用户的注意力，一般来说有两种常见的方式。一种是通过高饱和度的颜色给用户形成强烈的视觉冲击力;另一种就是通过色环中的互补色，如黄色与蓝色，红色与绿色等，将两种对比色放在同一界面，通过强烈的视觉反差突出购物、宣传类移动媒体界面的重点。

4 移动媒体UI设计中的色彩运用

色彩作为移动媒体UI设计中的重要环节之一，合理地运用它有助于提升产品质量，具体的方式可总结归纳为三个步骤。

4.1 构建移动媒体UI界面的整体架构

通常一个移动媒体UI界面的设计会运用一些几何形状直接传递视觉效果。目前市面上所见到的绝大多数移动媒体UI界面都是由不同的几何色块组装而成的，都是基础的底色加上各类色块图案组合形成图标、按钮等符号，形成一整套的图形符号系统。设计师利用好颜色可以直观地表现出界面背景、导航栏、状态栏、按钮等不同的构成元素之间的区别，并运用颜色展现出设计师对于UI界面的逻辑梳理和整体架构。设计出一款好的移动媒体UI界面，需要设计师对产品定位、用户需求进行深入分析，确定好色彩搭配方案，形成“标准色彩规范”，在完成基础调研后，再对产品的细节，如图标、按钮、线框等进行设计。值得注意的是，“标准色彩规范”中要确定好页面的主色调、辅助色调以及各种修饰细节的色调，这样才能让设计稿和实际效果的色彩保持一致。

4.2 明确视觉层级关系

在UI界面设计中，每一部分的内容都是处于不同层级关系之中的，如美妆类中包含眼妆、唇妆，书籍类包含散文、小说等不同的子集。运用同色系的色彩或不同明度的同一种颜色可以帮助用户快速区分每一个板块不同的层级，或是在灰色调的主界面中选择明度较高的颜色或纯色调与周围的颜色形成对比，从而突出关键部分。

4.3 营造界面整体风格

UI界面虽然是个复杂的视觉图形系统，但是灵活地运用好主色调、辅助色和装饰色，利用这几种色彩做出合理的对比调和，可以让界面呈现出明显的风格倾向。日本知名设计师まりっぺ提出70%、25%、5%的配色比例原则也适用于移动媒体UI设计。

首先，主色调是确定整个UI界面视觉风格最重要的颜色，它的面积几乎占据整个界面的70%。主色调的选择要根据产品本身的特性、用户的需求以及色彩心理学规律来决定，可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。由于色彩在视觉中是有重量的，色彩饱和度越高，色彩给人的感觉就越强烈，而明度越亮，色彩就越发抢眼，因此主色调一般选择饱和度较高而明度较低的色彩在UI界面中作为背景展现出来。

其次，辅助色顾名思义是衬托主色调的色彩，在整个界面的色彩中约占25%。它与主色调相辅相成，合理运用辅助色可以让整个界面达到和谐统一。选择和主色调相同色系的辅助色可以呈现出和谐的视觉效果，选用主色调的邻近色作为辅助色可以增强界面的层次感，选用与主色调相反的对比色可以使主色调更加突出。

最后，作为在整个界面中起点缀作用的装饰色，对其合理运用不仅能起到锦上添花、画龙点睛的作用，还能让整个界面更加灵动。好的装饰色可以增强界面的趣味性和个性化特征，丰富页面的视觉效果。需要注意的是，装饰色要和界面的整体色调有一定的区别，在色相、明度和饱和度上都有一定的差异性。一般来说，在整个界面色彩明度较低的情况下，选用饱和度较高的颜色会突出重点，也可以利用互补色让界面的重点展现出来。

对色彩的明度、饱和度变化进行调整，可以营造出完全不同的移动媒体UI界面风格。例如，男生喜欢的带有科技感和运动感的灰色、深蓝等多为暗色系，女生喜欢的甜美梦幻的粉色、橘色、橙色等多为亮色系。随着科学技术的不断发展，移动媒体UI的使用也成为人们的日常，界面风格定位与品质已经成为用户体验中最重要的部分[3]。

5 结语

本文之所以将移动媒体UI界面的色彩作为界面风格的重点内容进行详细的研究分析，就是想设计出更加贴合用户需求的界面。时代的快速发展使用户的移动媒体使用率快速上升，传统单一的配色效果已不能满足所有用户的需求，针对用户类型进行个性化定制的产品逐渐成为主流。

色彩的合理搭配能够快速提升产品质量，是拉近移动媒体产品与用户之间距离的重要途径之一。本文阐述移动媒体UI设计中的部分搭配色彩方式，以期让界面设计变得更加灵活，对于推動移动媒体UI设计的色彩搭配具有一定的指导意义。

参考文献：

[1] 张军.关于UI界面设计课程设置的构思与创想[J].艺术与设计，2011（07）：99-101.

[2] 修德旭.论UI设计中的心理学应用[J].艺术评鉴，2017（8）：177-178.

[3] 林进仙.色彩搭配在网页媒体上的应用[J].艺术品鉴，2015（08）：121-122.

作者简介：张晨昱（1995—），女，湖北武汉人，硕士，讲师，研究方向：艺术媒体艺术设计。