基于“用户为中心”的手机界面视觉设计

吴 珊，赖剑峰

（广东理工学院 艺术系，广东 肇庆 526100）

用户界面也称人机界面，是人机交互、操作逻辑和界面表现的整体设计［1］。界面是在人机交互过程中，强调用户体验，并为用户提供具有视觉、色彩和布局可视界面。而手机界面设计是用户与手机系统、应用交互的窗口，为移动社交和购物娱乐等提供第三方终端服务。手机操作系统界面设计，广义是指对手机智能操作系统的整体风格、细节图标、元素的全面把握，实现人机交互方式向三维、多通道方向发展，深入挖掘用户需求，注重用户特征分析，关注用户心理感受，以达到让用户享受人机交流的愉悦体验。当前，手机界面的视觉设计仍然忽略对用户体验结构模型的分析，对界面总体风格的策划思路不明确，缺乏对用户兴趣点的发掘乃至使用情况的数据分析。

一、手机交互界面的设计内容

智能化的生活产品越来越丰富，人们注重自身的参与感和产品体验的满足感，寻求对功能性满足之上的心理满足，人们的智能需求得到极大的激发［2］。手机界面是用户与程序沟通的唯一途径，要能为用户提供方便有效的服务。移动终端第三方软件的界面设计主要包含图标设计、欢迎界面、主界面风格、内部细节框架、交互方式五个方面的内容。人机交互科技的发展，人们对审美、趣味、时尚的不断追求，界面交互种类繁多，形式也越来越多样化。在人机交互世界中，手机交互APP的本质仍然是建立起计算机世界与真实世界的一种隐喻或折射关系，界面图标作为整个交互界面的门面，与用户第一时间直接发生信息识别，具有高度浓缩传达信息的特点，无需依赖回忆系统指令的视觉元素，直接减低记忆负荷，以明示或者隐喻的方式传达含义，提高视觉目标搜索率。

二、市场细化应以用户为中心

在互联网思维时代，大众和小众用户各占一定的市场份额，设计师不得不将用户的利益和需求放在设计的每一环节，遵循“以用户为中心”的理念，衍射整个界面设计的流程。为获取用户对界面使用的需求，项目组采用问卷调查、网络数据分析和用户访谈结合的方式进行研究，总结不同用户群体对其界面的需求，从而指导界面设计中视觉设计的标准和原则。根据用户的需求、用户使用习惯、用户的网络思维、用户情感体验等的调查，从用户个体的文化背景、知识水平、文化喜好等层次，确立不同参考体系下用户结构，分析心理状况和认知过程的变化，最终实现方案［3］。通过对目前常用的 Andriod、IOS以及Windows Phone三大手机操作系统界面设计风格的分析，可知影响用户体验有三个要素：

（一）风格统一的界面

界面风格是用户和系统进行交互平台的视觉设计风格，所有产品信息必须合理安排在主界面。用户在点击界面图标后经过欢迎界面来到主界面，开始进行深入的人机交互。因此，界面的风格是决定用户进一步了解交互产品的服务内容和优势强项的关键因素。当前，以简约主义为设计理念的扁平化设计成为最流行的视觉设计风格，主要以点、线、面等平面元素和色块搭配层级化为人机交互界面的视觉处理，在捕捉用户阅读习惯的前提下追求简约自然，以优化层级为根本原则。人的大脑具有投机取巧的特点，如卡尼萨三角的视觉心理效应，是先捕捉大面积后再关注细节，同时不自主地寻找规律。因此，在每个细化功能的交互界面，应做到风格统一。杂乱无章和过分跳跃的视觉画面会直接破坏用户的良好体验，让用户无法专注寻找需要的信息，并且在使用后难以留下印象。统一风格是可视性高的界面设计手法。

（二）操作便捷的界面

在触屏手机应用简单快捷的时代，界面设计的布局更应符合用户使用触屏手机的手势习惯。在《How Do Users Really Hold Mobile Devices?》中，作者Steven Hoober通过对各种公众场合下用户使用手机的姿势研究指出：“49%的用户通过单手操作，36%一手拿着手机一手操作，另有15%双手操作；在单手操作用户中，有33%的用户用左手拇指来操作。”［4］可见，用户是习惯用拇指滑动和选择界面操作内容的。由于受屏幕长宽限制，界面布局一般采用整齐美观的竖排列表和横排块面，用户通过左右、上下滑动屏幕或点击箭头查看更多内容。图标的指引需要安排用户手指便捷触及的地方进行次级阅读导向，如凡点社交APP的登陆界面整体风格简洁；在用户名和密码输入栏版式位置正是用户拇指自然握屏摆放位置；功能主界面功能分栏化繁为简，避免在频繁操作的多层级、多页面中出错，节省用户使用时的思考时间。

（三）游戏乐趣的界面

游戏化设计已经是当前移动社交和娱乐体验界面的趋势。针对用户在手机移动界面浏览方式的转变，用户体验中强调游戏思维，在日常的界面人机交互中创建游戏，支持、激发娱乐体验。界面设计核心具有方便人们沟通和分享的特质，更强调交互的游戏愉悦感。这种目前流行的 “游戏化”(Gamifi cation)，是暗示设计出来的产品基本上仍然是应用程序，只不过恰好有一些附加的游戏元素［5］。除风格统一的便捷界面以外，在界面设计上适当加入用户切换成玩家角色的操作，如作为社交交互软件主流的微信，很多时候与同类软件显出优势就是在小程序上嵌入游戏设置；此外，在界面中切入动漫小视频也是不错的想法。

三、手机界面分类及风格特点

优秀的手机界面设计可以引导用户视觉，与产品功能相符的色彩科学搭配，并考虑用户场景。手机界面根据功能内容可以划分为社交类、娱乐类、生活服务类、金融类、学习工具类、企业组织类、新闻资讯类、技术分享类等八类。按照年龄和职业划分，手机界面可以分为以下三种：

（一）年轻个性化的界面

针对新一代的消费人群，年轻时尚似乎成了智能手机的新基调，年轻化趋势是推动手机界面设计的强大力量。追求独创个性是年轻人的显著特点，界面个性化会吸引特定用户并指向目标明确，如针对年轻受众群体的音乐交互界面，网易云音乐APP交互界面是较具有个性风格的，进入界面色调柔和，图标设计感强，既融合了音乐符号的造型，还添加了节奏感的线条，与主功能界面相互呼应，颜色鲜活而富有热情，在主推单曲滑动界面中，接入较为吸引年轻人审美情趣的图片。

(二)活泼趣味的界面

第二类拥有较大数量的用户群体就是家庭幼教类。由于电子设备越来越贴近生活，在儿童阅读工具中，幼教类APP为亲子互动和幼儿学习提供方便。这一类幼儿使用的手机交互界面具有颜色鲜艳、图形分割版面的特点，常配搭有活泼可爱的卡通图片，文案用词呆萌，形成有趣而活泼的界面风格，深受用户欢迎。如“凯叔讲故事”界面选择的《象老爹》故事播放时，画面是一家三口的卡通形象融入大自然的情景，卡通动物的表情为整个播放界面增添了不少趣味性。

(三)功能综合细化的界面

无论是电子网络虚拟货币还是网上金融银行，随着互联网移动速度的特殊性，演变成 “水泥+鼠标+拇指”的模式，银行APP的开发成为金融行业一种新的营销手段，营销目的不仅要吸粘实体的优质客户，还需要培养用户的使用习惯，并为深层次的业务发展作铺垫。因此，在金融APP的界面功能中，普遍增加生活应用类等增值服务，以吸引用户群。根据界面需要具有功能综合归整而项目细化的特点，统一的主色调不仅让功能综合细化的界面显得简洁大方，也能让用户找到品牌感的归属，例如美利金融、雍和金融、铜板街、支付宝等主界面，服务类型分类细化到位，且众多数据内容归整得脉络清晰，让用户需求服务功能最大化。

四、用户体验结构三维度的视觉原则

从广义的角度上讲，用户体验可以定义为正在使用某个产品过程中的使用体验舒适度以及全部的过程感受，它包含着世界上的任何产品。通过对用户需求层次划分、确立结构、原型设计和用户分析四个阶段的分析，对用户体验进行探索，将界面设计中用户体验结构模型划分为感官感知、情感体验和认知评价三个维度，从而为“以用户为中心”手机界面视觉设计提供理论依据。用户界面设计的三大原则是：易记性、美观性、情感性。

（一）易记性原则

手机APP图标是用户进入交互界面的大门，门面功夫决定整个界面形象，而图标的易记性是提高用户手机桌面搜索率的关键。这也是尽管iOS6、iOS7、WP10等不同平台智能手机、平板、PC的界面拥有各种形式的图标，但在视觉设计上仍然坚持以造型简洁来表达生动语义的原因。易记性原则主要使用户减少记忆负担，以界面图标简洁和界面版式设计逻辑清晰为表现内容。界面版式设计，首先要求信息排布要清晰直观，添加图形辅助可以增加界面的易读性，让可视性高的图形表达方式代替冗长的文字说明方式，使界面变得简明清晰，常用较柔和的可视化图形呈现，达到一目了然的视觉效果，让界面能够引导用户的视觉流程。其次，在标题和段落处添加导向符号，例如装饰性的数字或图标等视觉辅助元素，在段落间保持层次及阻隔，赋予页面轻重的视觉变化。最后，通过留白去限制各内容块面，划分区间的图文安排，利用黄金分割比例这种自然的分割方式，快速设定文本与段落的间隔，添加留白空间面积比例，去除画面的杂质，给用户干净整洁的印象。

（二）美观性原则

界面交互设计作为一种新媒体形态，必然要突出艺术的可视性本质，将新的艺术思想与理念融汇到作品当中，以此去吸引和影响用户［6］。人们与生俱来追求美好，因此美观性原则是“以用户为中心”的设计理念，美观的界面让用户在交互中进一步培养愉悦的体验，还可以提升产品的品质。界面视觉设计师突出图标中形态特征，主要是处理点、线、面、体、空间的关系，以及利用光影、色彩、肌理等物像的外在表象的视觉原理，让图标给用户传达其形体轮廓、运动质感和画面动感；此外，由于手机屏幕尺寸的限制，在主界面中安排导航阅读的图标，也是根据用户习惯和想法进行的精心设计，以圆角和圆形图标小配件培养用户的亲切感与视觉情绪，或者以形状的大小层级渐变导向阅读，例如用户的信息登录界面、图片整理文件夹、关注热点、商品展示等，采用板块清新的圆角渐变会有更好的效果。

（三）情感性原则

以情感驱动用户使用界面，让冰冷的人机交互赋予情感，拉近人和程序的距离，因此情感性原则体验在于气氛化和故事化，情感的培养可以强调设计品质，增加界面对用户的吸引力。用户界面常常通过其色彩印象来辩别APP的服务特色。在色彩心理研究中，色彩具有情感和体验情绪的功能，深刻影响用户的使用习惯，并体验其心理情感，具有依赖性。交互界面的颜色搭配直接影响用户对产品的认知，促进产品信息传递和产品形象推广。不仅如此，界面的颜色直接渲染着人机交互过程的气氛。界面颜色主要包括界面的主色调和字体颜色。因此，以用户为中心进行色彩搭配有利于良好情感的塑造。由于不同颜色的使用可以带给用户不一样的色彩情绪，可以通过颜色色相调和产生对比，统一中蕴含变化，有意识地调整版面的阅读节奏，强调和引导阅读的视觉流程。在移动端界面中通常需要选取标准色、辅助色。移动端与网页端的排版稍微不同，当界面图片较少时，要适当使用色块提高图表率，标准色制定涉及界面文案、图片、图标、背景等，均反映该界面特定的气氛，引起用户的情感共鸣。在选择上应该保持色调一致，让各元素色相进行合理调和。即确定适当的标准色和辅助色后，在明度和纯度上应统一视觉标准处理，并在冷暖变化中产生层次关系。如果标准色明度偏低，那么辅助色应采用一个高亮的颜色来唤醒页面气氛，起到点睛的作用。此外，串联图片让图片本身讲故事，加强视图化版面，也是激发用户情感的手法。这种设计更多的是将文案用图形或插图展现出来，在数据页面和引导页中最为常见，如在一段文案中加入插图，使用户的情怀感更强。这种设计手法最容易体现产品特质和吸引眼球。图案的易读性高，能在极其短暂的时间内快速给用户传达信息。用图像来讲故事，是打动用户最根本的表现方法，更是最受欢迎的表达方式。

随着手机内核技术的发展，随着从用户出发产生的审美感知和审美经验，掌上界面充满精致美观和时尚个性的图标。手机界面交互设计在激烈的市场竞争中坚持“以用户为中心”为设计原则，很多时候需要视觉设计师应用心理学分析真实用户的使用习惯、行为和想法，从图标的定义和界面的设计需要结合用户的关注点，进行以用户为导向的产品设计。交互视觉遵循易记性、美观性和情感情的原则，做到界面风格自然统一，操作简便而不失游戏乐趣，让冰冷的人机交互体验更具人性化。