手机UI界面的色彩搭配研究

手机UI界面的色彩搭配研究

作者：黄超 谭美玲 柯文燕

来源：《科技创新与应用》2016年第19期

摘 要：随着智能手机的不断普及，手机UI界面设计受到更多的关注，它不仅使软件的操作变得舒适、简单、自由，而且也体现了软件的个性和品位。在手机的UI界面元素中，色彩的搭配是非常重要的因素，合理的色彩搭配可以提高UI设计的实用性和美观性。文章通过对手机UI界面的分析和制作，对色彩在手机UI界面中的作用以及色彩搭配技巧进行了一系列的研究。

关键词：UI；界面设计；界面色彩设计 1 手机UI界面设计中色彩搭配的作用

手机UI界面设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。主要涉及五个方面的问题，分别是：设计风格、图形语言、色彩搭配、视觉层次结构和界面交互式动画设计。好的手机UI界面设计不仅让软件的操作变得舒适简单、自由，充分体现软件特点，还让软件变得有个性有品位。研究表明在被接收的视觉元素中，色彩最能引起用户的注意，对于好的手机UI界面设计，色彩搭配显得尤为重要，具体作用分为： 1.1 塑造界面风格化

不同的手机UI界面针对不同的用户群体，带给用户的视觉感知也不同，而色彩正是展现界面风格的一大要素。如一些购物类软件，要起到促销宣传、激发用户购买欲的作用，普遍采用暖色调，高明度色彩，使界面呈现明快的风格。而一些音乐软件，在界面设计上采用怀旧的风格，以唱片或者老电影的形式展现给用户，从而达到引起用户对往事怀恋的效果，配合歌曲更容易产生感情的共鸣。 1.2 提高功能引导性

界面设计中常用不同的色彩来引导用户浏览界面，了解软件的功能及特点。一方面界面中常用明度较高的色彩搭配在浅色背景上，提示用户可以点击，或继续浏览。另一方面，用户在接触不同明度色彩时，随着色彩明度降低，用户对色彩的注意力也会降低。界面中也常用相同色相，不同明度的色彩来引导用户按顺序浏览界面，高明度色彩用于提示用户点击，或者发生错误，低明度如灰色则用于提示用户不可点击或不能继续。 1.3 增强信息理解力

龙源期刊网 http://www.qikan.com.cn

一些软件信息量较大，如新闻类、学习类。用户在接触大量信息时往往分不清主次，感到复杂混乱。这样的软件界面则常运用色彩的重复、渐变、对比来达到强调、标示、区分的作用，帮助用户更快的掌握信息的主次关系，在浏览界面时感到清晰、有序、合理。 1.4 加强信息记忆性

色彩的具体内涵并非全部来自于色彩本身的属性，它与人类长期积累的生活经验息息相关。研究表明，人们对色彩的感知度要比对文字的感知度强，对色彩的记忆性也更强。日常生活中，常用红色、蓝色区分饮水机的冷热水龙头，用红、黄、绿指挥交通。这都源于人们对色彩的感知和记忆。色彩的这一作用，也可用于界面设计中，一款软件可分为不同的模块，用不同的色彩或者相同色彩的不同明度来表示相应模块，用户可以根据色彩的差异来记忆每个模块的作用，使用户更快的记忆软件的使用方法及功能。 2 手机UI界面设计中色彩搭配的技巧

手机UI界面设计种类繁多，面对的用户也各不相同，但究其根本均为人与手机之间的交互关系，UI界面在设计时遵从的技巧都应当以人为本，给予用户舒适与匹配的原则，具体技巧可从以下两个方面入手。 2.1 颜色与用户关系的搭配技巧

（1）颜色运用与用户年龄之间的关系。各层年龄阶段的手机用户所喜爱手机界面的风格是大不相同的。年轻女孩较青睐轻快、活泼的界面，此类界面中主要以对比色调和搭配，明度高，色彩明亮、醒目，在一定程度上使人心情愉悦。男性用户偏爱明快、简洁的配色，此类界面整体色彩以冷色调为主，给人以深沉、大气的感觉。老年人由于视力降低，在使用手机时则较为喜爱色彩对比分明的界面。

（2）颜色运用与用户情绪之间的关系。用户在接收不同颜色时情绪会受到相应的影响。例如理财类软件，软件界面需要带给用户严谨、理性的感觉，使用户在接触界面时，能够冷静思考，理性分析。因此理财软件多采用深蓝色、棕色、等冷色调色彩，象征着稳健、平和。而一些益智小游戏类软件，界面需要带给用户的是一种轻松、愉快的感觉，使用户在接触界面时能够得到放松、释放压力。这类软件则常采用饱和度较高暖色调，象征色活泼、明朗。 2.2 颜色与界面结构的搭配技巧

（1）引导页与主页中颜色搭配的技巧。引导页与主页的色彩搭配分为两类，一类是多个引导页的搭配，一类是引导页与主页的搭配。引导页一般选用三种搭配方法。第一是使用单色，单色可简化、统一页面，但在使用单色搭配时应避免过于单调，可通过调整色彩的饱和度和透明度使其产生变化，让页面内容更加丰富。第二是使用邻近色，采用邻近色设计可以使页面避免色彩杂乱，易于达到页面的和谐统一。第三是使用对比色，对比色可以突出重点，产生了强烈的视觉效果。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛

龙源期刊网 http://www.qikan.com.cn

的作用。引导页与主页之间的色彩搭配也可分为互补色和同类色两类。互补色搭配可使引导页到主页过程中增加视觉跳跃感，给用户焕然一新的感觉。同类色搭配让引导页与主页之间色彩表达更为和谐，突出主题。

（2）背景与按钮中颜色搭配的技巧。选择背景色彩时，应注意背景不可掩盖主体。背景色可分为两类，一类是无彩色、一类是有彩色。无彩色既黑白灰系列，黑色背景既不影响主体内容，也可给人一种高端、神秘感，适用于娱乐影音类软件。白色或灰色背景，有简化、洁净页面的效果，使用户在使用时更加舒心，一般适用于信息量大、图片较多的软件如购物、微博等。有彩色也是常用的背景色，有彩色背景可吸引用户的注意，也可营造出各种风格，或清新或热烈。但为了不与主题发生冲突，降低色彩刺激感，使用有彩色时应降低色彩的明度和饱和度。

按钮是引导用户使用软件的关键，按钮的使用也有诸多技巧。一方面：按钮的色彩搭配多用对比色。按钮与背景之间常采用对比色搭配，如社交类软件中消息提示采用红色按钮与白色背景形成对比。突出红色显眼、鲜亮的特点，使消息更加醒目，起到了提示作用。按钮与按钮之间的色彩搭配也遵循以上规律。如购物类软件中所在页面的按钮使用明度高的颜色。这一类色彩一般代表“已选择、可点击、可交易”等；未选中的界面按钮则常使用灰色，灰色一般代表“不能点击、不允许、无效、已售空”等。另外一方面：对比色给视觉较强冲击力，受众长时间观看会引起视觉疲劳，这时可通过降低色彩的明度或饱和度来让色彩变得更加和谐，使人眼更加舒适。如学习类软件，常采用降低色彩明度的方法，使按钮在起到提示作用的同时，不会使人感到刺眼，从而达到护眼的目的。 3 结束语

手机UI界面色彩搭配设计不仅仅是设计出交互方便，美观的界面。还要考虑用户心理和行业的区别，以及不同的应用界面是否能通过不同色彩搭配，表达出不同的意向等因素。同时，不同的手机UI界面色彩搭配也能在一定程度上影响手机用户的心情。这就要求UI设计师，有扎实的色彩基础知识，并且能够运用一些设计搭配技巧，找到合适的色彩表达出应用所需要传达的情感，以及用户喜欢的风格，充分发挥不同色彩的优势，来设计出具有更强感染力、更高视觉体验度的个性化产品。 参考文献

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

[2]姜淼.大学生智能手机界面色彩语意的研究与应用[D].哈尔滨理工大学，2015.