手机APP界面设计色彩应用研究（运用色彩打造令人难忘的App界面）

Sponsor

前言：

随着智能手机的高度化普及，手机App已经脱离了单一的信息传递的阶段，用户对App的视觉要求越来越高。色彩在App界面设计中非常重要，对App界面设计色彩进行充分的研究，把握其色彩运用规律对App界面设计色彩的发展有着深刻的理论和实际意义。本文章总结国内外UI设计行业的发展现状和趋势，使读者对该行业有一个宏观的了解。

从色彩设计的基础理论、色彩在App界面设计中的应用等方面入手。在研究了几十款国内外的成功App案例，对色彩在App界面设计中的应用和色彩感情进行分析。从而提出色彩在App界面设计中的应用方法，希望给设计师用色方向提供一些理论参考。最后笔者运用发展的眼光，对国内App界面的发展做了简单的总结和期望。

关键词：App设计，界面设计，色彩，应用

目录

1界面设计的概述

1.1 界面设计定义

1.2 色彩对手机App界面设计中的影响

2色彩在手机App界面设计中的应用分析及色彩感受

2.1色彩应用分析

2.2色彩感受

2.2.1 色彩的误区

2.2.2 色彩的情感

3手机App界面设计色彩应用方法

3.1色彩风格搭配应用方法

3.2色彩情感属性应用方法

3.3色彩整体色调应用方法

3.4色彩独特性应用方法

1、界面设计的概论

1.1、界面设计定义

界面设计即UI(User Interface)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。让软件变得有个性有品位还要让软件变得简单自由，并可以体现软件的定位和特点，这才是一个好的UI设计。软件设计可分为两个部分：编码设计与UI设计。UI的本意是用户界面，是英文User和 Interface的缩写。从字面上看是用户与界面2个部分组成，但实际上还包括用户与界面之间的交互关系。

在这个电子产品飞速发展的时代里，界面的设计也越来越受到人们的重视和关注，随之而来UI设计师或者叫UI工程师的行业火热起来，它是以前美工这个行业的升华。手机App的界面设计就像一个产品的卖点一样，一个优秀的界面设计是一款App的必不可少的因素。一个界面设计的成功与否也不是因为某个人而来确定的，是由它的用户的反馈来判断一个界面设计成功与否。

1.2、色彩对手机App界面设计中的影响

自80年代苹果公司重做了图形的设计增强了用户界面的可视性。拓宽易用性UI 向前前进了一大步取得了历史性的飞跃。同时也将色彩的搭配和文字的可阅读性变为界面色彩的重要议题。

从心里学的角度分析，人的第一感觉是视觉，而色彩则是对视觉影响最大的因素。色彩是我们设计的界面给用户的第一视觉因素。不同的色彩在用户眼里会产生不同的色彩语言和产品诉求，例如从色相上说红色：红色让人感到紧张感兴奋、蓝色：让人感到安静、严谨、科学、而黑色：让人感觉压抑、悲伤等。

在人机交互的界面中充斥着非常多的信息，如何把这些信息规整的处理，来实现人机之间更好的界面交互，这是色彩在UI设计中的重要地位之一。用户可以通过颜色信息实现与软件更丰富的交互。从而用色彩来满足受众的心理诉求在 UI设计时，App性质差异，依据用户群的不同，甚至是在软件使用时的交互信息的特异而变换不同色彩。由此可以看出色彩在UI设计中的重要性。从整体的色调到色彩语言，从背景色到每个元素的颜色都为界面的整体性专业性提供了重要的保障同时也是一款App能够成功的保障。

2、色彩在手机App界面设计中的应用分析及色彩感受

2.1、色彩应用分析

自2013年之后随着苹果引领的扁平化风格的兴起，扁平化设计风格席卷了全球设计领域。即苹果之后Windows8的界面也有了新的突破以色块与高度概括的几何图形样式的按钮相结合的视觉效果呈现。之后Google公司的 Android 系统界面也进行了扁平化的风格设计，虽然没有完全扁平化，但是已经抛弃了原有的3D效果的做法。这些新的风格设计简洁明了，使色彩在界面设计中的应用和图标图标的设计都开启了扁平化的趋势。扁平化的风格以迅雷不及掩耳之势在互联网时代蔓延开来，同时这种设计风格对界面设计尤其是手机App界面设计也带来了革命性的巨大影响。色彩也在界面设计中变得不可或缺，尤其是在手机App界面设计中。

目前阶段，主流的App界面设计方面，抄袭相当严重，色彩运用方面相互参考的太多。例如微信和支付宝这两款App应用是我们在生活中长用的两款知名App而且都是两家大公司旗下的，而支付宝的设计风格和整体色调几乎是完全临摹的微信的色调配色。这件事情在设计界引起了很大的一场风波，这就是设计抄袭事件。最终支付宝在自身聊天交友方面付出了惨痛的代价，可谓自己的聊天功能形同虚设。还有花样繁多，琳琅满目的类似案例。如果想在这样相互抄袭竞争激烈的情况中脱颖而出，只有在界面的形象主色调和用户群上下工夫，并要运用独特的营销，独特的风格来展示和推广应用。使应用的风格变成一种特有的，独具一格的，如图1。

图1

色彩拥有的刺激性和强烈带入感，我们可以利用这一特性使用户增强对应用的记忆力。运用色彩来增加UI设计界面的附加价值。利用丰富的色彩搭配来满足用户在色彩选择时的多样性和普遍性。在一些界面设计中利用丰富的视觉体验来增加在用户心中的附加值。

利用色彩的情感语言使App的用户的情感得到宣泄，并起到App在情感上的共鸣。色彩的运用不光在视觉上能给用户带来强烈的刺激和印象，也要能运用色彩的特性让使用者在情感和App形象上产生共鸣。最终就会达到我们的用户群使用我们的应用的目的。个性的色彩运用可以让UI设计界面在方寸之间尽显魅力，使用户可以在短时间内对App产生印象，可以给用户产生情感的共鸣，更可以方便信息的传递实现更好的交互。

2.2、色彩感受

2.2.1、色彩的误区

人们对色彩的直观感受充斥着一些非常独特的效应。有一些很有趣的事情一些画家在自己做画的时候，通常只使用少数的几种颜色。人类会看到一些缺乏颜色，成缺乏颜色就是纯度低和明度低的颜色或者一些中性色。

在一幅画中如果只有白色黑色黄色红色，那么人们的眼睛自动会把黑色和红色混合成一种紫色相近的混色，黄色和黑色会混合成为一种暗绿色的色调，灰色就会变成偏冷调子的冷色系蓝色。当空间不同颜色的点靠得很近，以至于人眼对它们所张的视角小于最小分辨角时，人眼就不能分辨出它们各自的颜色所感觉到的只是它们的混合色。

从物理学的角度来讲这是一种人类肉眼所造成的颜色误区。就是因为这种有趣的误区性，给色彩的使用带来了新的发展历程和不同的色彩心理感受。在美术和设计中所提到的色彩感觉，如色彩的偏向，或偏紫偏蓝，冷暖的变化都或多或少与人们自身的色彩误区和色彩心理感受有一定的关系。

2.2.2、色彩的情感

我们通常会把色彩分为冷色系和暖色系。暖色系是包括红橙黄这三种颜色和他们的混色。他们分别是象征着火焰，果实，还有夕阳的颜色。他们通常还象征着运动，积极，活力和激情。

在这三种颜色中红色和黄色是都属于三原色是通过任何其它颜色不能混合而得到的颜色。这就证明真正的暖色是红色和黄色。我们运用红橙黄在设计中体现出活力快乐，激情的主调来。

在手机App界面设计中红色可以激发人们的购买欲望，所以很多的购物App界面中对红色的运用特别重要。例如京东App在其界面中以红色调为主色调其购物按钮主要都为红色。同时红色又是诱惑性最高的颜色，所以秒杀和抢购一般也会运用红色系的颜色来进行设计，如图2。

图2

冷色系的颜色包括蓝色，绿色，紫色，这些颜色在视觉上相对于暖色系的颜色来说强度要弱。他们是水，夜，自然的代表色，给人的感觉是舒服，放松，有时还会有冷漠的感觉。蓝色是其中唯一的原色，是通过其他任何颜色无法混合而来的，其他的两种颜色都是通过其他色混合而来。一部分冷色是由冷暖色混合而来的他们继承了一些暖色的性质。再设计中冷色系的颜色可以营造出冷静，严谨的气氛。

一些科技公司对冷色系比较偏好一点，正因为冷色系的颜色可以营造出专业专注的严谨的心里感受。例如King Root应用在手机UI设计中。其界面运用了蓝色系的主色风格，体现出产品在Root方面的专业性和专注感。

现今所有的颜色几乎都有自己所表达的情感，和代表的心里感觉。如同红色活力，速度，紧迫感；黄色：青春，乐观，豁达；蓝色：信任，安全，神秘，有底蕴；绿色：生命力，天然，轻松；橙色：积极，进取，活力；粉色：浪漫，女人，可爱；黑色：影响力，前卫，严肃；紫色：高贵，冷艳，诱惑。

每一种颜色的情感不是一成不变的，随着饱和度和明度的变化颜色的情感也会出现不一样的变化，色彩传达出来的感受也会完全不同。色彩之间的搭配不同所传达出来的感受也会发生变化。色彩搭配时同种颜色站的比例不一样也会影响到颜色所表达出来的情感。随着历史的发展一下颜色的情感也会发生变化，地区的不同色彩的情感也存在着差异，如同在中国古代黄的是最高贵的颜色而在西方高贵的颜色则是紫色。

3、手机APP界面设计色彩应用方法

3.1色彩风格搭配应用方法

我们所做的产品是有确定的使用人群的有一定的方向的，整个社会是有不同的人群组成的因为受到的文化程度和生活背景的不同所以产生了很大的差异，在不同的年龄段，不同的性别，不同的地域，不同的国家和民族对色彩的感受是截然不同的。

所以在手机UI设计中要根据自身产品应用的方向行业和使用的人群以及地域和年龄段去确定我们的色彩应用风格和色调。错误的色彩搭配虽然有美感但是手机App界面设计不仅仅是为了美感而去设计的。拥有美感的配色应对不适当的方向也会适得其反。如同你不可能在一款餐饮App中全部运用冷色系的色彩。

在一款PIG医生这款App中主要是经营的在线宠物猪医院和相关产品的商城。其主要配色以暖色调，点缀冷色。色彩丰富甜美符合养宠物猪的使用者的性格，冷色是体现出此App的专业性。暖色系甜美的配色符合一个购物的App的配色风格，如图3。

图3 PIG医生

3.2、色彩情感属性应用方法

在App界面设计中，创造独有的气质和气氛，可通过良好的色彩审美根据其色彩感情做出选择，色彩色调也用以表现复杂多变的人类感情。比如：以不同色调为主的色彩、会有醒目的设计感觉，而且风格非常鲜明，有助于表现激烈、冲动的思想感情。

增强色调对比弱的色彩，可以表达统一和谐的视觉效果，效果成熟，沉稳有助于表现雅性，高贵。提高色彩明度有高明度的色彩为主调，可表现快速，明朗、明快、的意象情感，降低色彩明度以低明度色调为主的色彩，可表现沉重深度、庄严，沉稳的情感基调。营造强烈的视觉感受可以用单一高纯度的色调为主色调，在富于生气与活力的同时在视觉上可产生强烈的刺激，而且还可使设计产生轻松，单纯，艳丽的效果和感受。

而以低纯度色调为主的色彩，是可表达温柔含蓄、和气、朴实的情感基调。色彩越鲜艳，明朗、到位，就越能准切的表达其设计的主题界面的美感和诉主诉求，明确的传达应用的思想态度与情感就能够让使用的同时既得到便捷的信息传递又得到了没得感受还和应用所要表达的情感产生共鸣。再有App界面设计中的色彩要层次丰富不但要自身有美感还有利用色彩来辅助交互更简洁的处理信息的传递，运用色彩来传达情感，使设计的界面附带感情，也使App界面会深入微妙，获得成功。

在蘑菇街App界面设计中，因为蘑菇街是一家专门做女孩子服装等产品的购物App，其标志为梅红色为背景，其移动端的界面设计也以高明度的色调为主界面中的icon点缀高明度的冷色系颜色做平衡，使App够年轻化，表达明朗明快，年轻时尚符合App使用者的年龄段。因为其受众的年龄一般在15岁到30的年轻女性。其配色利用色彩的情感属性表达出了其自身甜美，时尚年轻，明快的感觉符合其使用人群，如图4。

图4蘑菇街

3.3、色彩整体色调应用方法

手机UI设计中界面的整体性是一个App成功的关系因素，在设计之初就要选择好界面乃至整个App的一个或者几个标准色和几个预备的辅助色，通常一个界面上的颜色不能过多，要有层次明确主次，色彩过多主次不分的话会给人以杂乱的感觉。

在App设计中整体的风格要从LOGO贯穿整个界面到每一个icon的配色。这样才能够设计出一系列的风格统一，颜色和谐的界面。

在手机UI设计中有同种色应用：同种色搭配是首先要选择一个基准色彩调整其透明度和饱和度，或者加深或变淡色彩来得到更多的色彩。这样色彩即统一又富有变化。

邻近色搭配，邻近色是色环上相邻的颜色，例如绿色与蓝色，红色与黄色，利用邻近色可以避免界面设计的错乱，易于达到界面统一的效果。对比搭配，这样的搭配最能体现色彩的情感，视觉冲击力也是最强。一般会以一个颜色为主点缀其对色。暖色系的色彩应用，暖色系的色彩应用通常也会搭配冷色系的颜色。冷色系的颜色搭配，一般白色搭配更出效果，主要表达宁静，高冷清凉。

在饿了么App中主色调是湖蓝色，这款应用是一个网上订餐的App以湖蓝色为主色调这种偏中性的色彩表现自身的专业性，还有其用户群多为学生族和上班族，色彩明亮洋溢着青春的年轻，青春的气息，同时点缀了其他暖色系的色彩做icon协调整体的界面色彩平衡从而也把这个界面的色调调和成为一个暖色调的点餐界面。其整体的色调就是以对比的用色方式以一个颜色为主要风格色，点缀其对色，如图5。

图5饿了么

3.4、色彩独特性应用方法

我们在自然界看到的色彩是有限的，美国的一位心理学家曾提出，同一颜色和效果出现的频率太高就会产生腻的感觉。App界面设计色彩要勇于创新，只有不断的创新才能在众多的App中脱颖而出，给用户留下深刻的印象。作为现在因智能手机的普及而繁荣的App应用，一个优秀的独特的界面色彩运用甚至比其自身的某些功能还要重要。作为一个App界面只有不断的融入新的色彩元素推陈出新，更新迭代才能迎合当下使用人群的审美要求。

在这个App界面设计互相抄袭的时期，只有打破常规特立独行的选择配色才能出奇制胜。才会形成自己独特的风格，才能让使用者在应用时更好的记住我们的App，才能给用户留下深刻的印象。打破常规，推陈出新才能事半功倍达到想要的富有艺术感的手机App界面设计。

色彩的积极运用是一个App界面的一个重要前提，好的App必须由好的创意来进行表达，而好的创意一定有一个独特的好的色彩应用方案，不落俗套与众不同。好的独特的配色方案会在App界面美感上吸引受众从而达到想要的结果。

小咖秀App中的配色就是特立独行的典型案例，小咖秀是一款视频拍摄软件，同类型的有秒拍，快手等，这些应用都是用的亮色或者甜美的颜色为自己手机端UI设计的色彩风格，而小咖秀的诞生打破了这一常规，小咖秀整体的设计风格和配色风格是深色接近黑色，而且运用原色做点缀，加以其他洋溢着青春气息的辅助色来进行应用。这种配色风格打破了在他之前的秒拍和快手的色彩风格，利用深色里加一下纯度比较高的颜色，在色彩应用上别具一格，从而取得了成功，如图6。

图6小咖秀

结语

色彩有着无穷的魅力，当下的App界面设计中的色彩运用缺少色彩知识的运用。本篇论文分析了色彩对App界面设计的影响，从色彩风格，情感，整体色调，独特性方面提出了有效的色彩应用方法。并且罗列出了现在一些成功的App界面设计作品。

手机App中的色彩的运用是一款手机App成功的基础。色彩的运用是基于色彩的情感，因为每一种色彩的情感在不同的环境下情感就会不同。不同的地域色彩的情感也是不同的。不同的App应用方向对色彩的需求也是不同的。运用色彩的科学知识是人们进行设计的基础。颜色用无声的语言，表达着不同的感情。灵活运用色彩的无声语言，可以达到独特创意的效果。色彩设计在App界面设计中起着统一界面提升附加值的作用。设计师只有认识到色彩设计的重要性，不断的掌握更多科学知识，了解色彩的无声语言，才能设计出优秀的兼具功能和艺术的手机App界面。

参考文献：

[1] 陈怡如. 基于感性工程学的UI配色设计应用研究[D].安徽大学，2014

[2] 宋绚丽. 门户企业网站的设计与色彩搭配[J].科学传播，2015，（3）.

[3] 雷勇. 色彩搭配在网页设计中的应用研究[J].信息电脑，2014，（11）.

[4] 何浩. 基于色彩心理学的UI设计研究[J].新聚焦，2014，（4）.

[5] 马燕. 冷色调的诱惑-软件UI的色彩情感[D].江西师范大学，2012.

[6] 李天赐. 手机UI的色彩运用技巧[J].大众文艺，2013.

[7] 刘峰瑞. 色彩在品牌形象中的应用与探究[D].沈阳师范大学，2014.

[8] 陈忆茹. 基于感性工程学的UI配色设计应用探究[D].安徽大学，2014.

[9] 王彦. 手机游戏UI设计的一般性原则研究[D].华中师范大学，2014.

[10] 林立潘. 视觉传达设计师与UI设计[J].哲学与人文科学集，2011.

[11] 夏梦. UI设计中的色彩使用[J].大众艺术，2012.

[12] 冯奇辉. UI设计理念变革探索研究[D].东北师范大学，2014.

[13] 曾俊蓉. UI界面设计中的色彩规划[J].艺术设计，2016.

[14] 黄红艳. 基于用户体验的WEB界面色彩设计研究[D].广东工业大学，2012.

[15] 李明巧. 基于视知觉形式动力理论的网页色彩设计研究[D].江南大学，2013.

[16] 向媛丽. 化妆品包装中的色彩应用研究[D].南昌大学，2013.

[17] 国兰. 高校网站界面设计中的色彩应用研究[D].东北林业大学，2012.

致谢

此论文是在商亚敏老师的指导下完成的，商老师认真负责，平易近人，治学严谨。在我写在论文的过程中耐心指导，从最初的选题到最终的完稿，商老师给了我很大的鼓励。

在这里我衷心祝愿老师们全家幸福，身体健康，祝愿我的同学校友前程似锦拥有一个美好的未来。雄关漫道真如铁，而今迈步从头越。人生的又一起点我会迎难而上的相信我们的未来我们的生活会更加美好。

作者：彪形大汉pro 来源：站酷

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。