基于移动端界面UI设计的教学创新探究

李 莹，梁 爽

在UI设计教学领域中，用户体验与认知心理学相关知识是UI设计教学展开的前提知识，交互性、移动性、个性化、安全性和多媒体化的信息服务需求迫使UI设计日益从用户的习惯和心理出发。针对UI设计的时代发展变化，高校的UI设计教学内容、教学模式也应紧随时代变化做出创新，对教学内容与教学步骤进行优化，在调动学生学习积极性的基础之上培养学生的应用能力、分析能力和实践创新能力。

一、UI设计理论概述

UI设计是基于用户体验，利用认知心理学为用户进行产品设计的一门学科。在移动端界面UI设计内容中，交互性、移动性、个性化、安全性和多媒体化的信息服务需求迫使UI 设计日益从用户的习惯和心理出发，以此设计出能够精准地定位客户需求、清晰地表达媒介信息的UI产品。

（一）用户体验相关论述

用户体验即User Experience，美国认知心理学学科创始人、工业设计领袖唐纳德·诺曼（Donald Norman）认为，用户体验主要指代用户对产品的主观使用感受。在设计产品与开发用户需求时，能否满足用户的需求体验、能否让用户在使用产品时产生愉悦感是决定产品设计与开发的关键。其中，决定用户体验的5 个要素，即5 大需求满足状态，来源于马斯洛关于人的5 个需求层次理论。在用户体验要素中，生理（自我）需求、安全需求、社交需求、情感需求、自我实现需求是依次升级的。［1］因此，随之对应的设计理论与设计方法为：生理（自我）需求——个性化定制设计；安全需求——功用设计；交互需求——交互设计；社会需求——品牌战略设计；情感需求——美学设计。［2］

以加瑞特的《用户体验要素》理论为例，作为Adaptive Path 设计公司的创始人之一，他着重解释了相应的设计理论与设计方法对应的设计目标，阐释了用户体验的5 层要素内涵，即：战略层，要明确产品设计的商业目标与用户群范围，定位产品的目标客户人群；功能范围层，要明确产品设计的功能范围与客户需求的升级范围，对用户的需求进行采集、分析、总结，规定用户使用产品的合理功用范围；体验结构层，即为用户设计与产品的联通渠道，给交互设计留出结构空间；框架层，以界面设计、导航设计、信息设计为框架构建用户使用界面模块；表现层，即在考虑用户视觉审美、情感依赖度的基础之上对界面进行视觉设计与内容美化。通俗地说，用户体验的5个设计层次的实现，需要各部门设计人员与工程人员通力合作、互相完善。以此，才能保证在技术、功能、外形、色彩、情感体验、心理因素等方面对产品进行编码设计，设计出人性化的界面产品与服务。

（二）认知心理学相关论述

认知心理学的核心课题是集中研究人获取知识的方式、途径或者渠道，以此为计算机的信息加工方式提供“人机信息的交互依据”。在人脑中，人通过神经元信号传导生物电信号，以形成人脑对外界“五感”信息的集中、分析、判断、处理和存储等。计算机则不同，在计算机内，信息加工系统都是由感受器、效应器、记忆和加工器组成，这些信息元件的物质载体是硅基元素，其一般结构就是符号信息的输入、输出、储存、复制，以建立符号结构的串联系统进行条件性迁移。相比于人脑的信息传递模式易受情绪化、外部周遭的社会和自然环境影响，计算机的电子信号传递更为机械性，这也代表着其传输信号的一大优点——稳固、可靠。所以，研究“人脑的信息接收与反馈机制受情感性、生理性因素的影响”成为认知心理学的主要研究内容。认知心理学研究内容包括人的感觉、直觉、思维想象、意识等，通过关注人类行为基础的心理机制，认知心理学可以帮助UI产品设计与开发人员通过类比、模拟等方式，验证人类认知的程序与逻辑，以此保证产品更方便用户使用、更能让用户产生愉悦情绪。

（三）移动端UI界面设计原则概述

UI 设计有5 大原则，分别是：易用性原则、规范性原则、帮助设施原则、合理性原则、美观与协调性原则。易用性原则可以简单理解为为用户提供操作方便，交互步骤必须简洁，不需过多地使用户重复操作或者承担繁重的脑力记忆；规范性原则是要求移动端APP 的快捷方式、命令方式、按钮位置、界面菜单等功能性、技术性设计必须符合国家出示的技术规范；帮助设施原则是为客户在不明APP 操作原理、应用内容、应用功能时，提供详细的操作文案或搜索选项，方便用户快速上手使用；合理性原则是指UI设计的界面布局要符合用户的视听规律，如设置有效、便捷的点击区域、文字输入区域等；美观与协调性原则主要是指在视觉审美方面，通过规制色彩、色调、色温的统一协调，设置合宜的文字大小比例，调整界面构图的黄金比例规律等，以符合人们的视觉审美需要，并规避用户视觉疲劳。

二、移动界面UI设计课程教学存在的问题

移动界面UI 设计课程是视觉传达专业的必修课程，它主要包含软件程序语言编程与界面视觉特效设计两部分学习内容，具有交叉学科的专业特性。但是移动界面UI设计并不是基于设计师的自我产品理念出发而设计产品，而是为大众设计，是基于服务大众为目的进行的界面设计。目前，多数学习者在设计APP 用户界面时，不能考虑大众用户的需求与用户感受，很多学生往往根据自己的兴趣爱好追求潮流化的界面设计，缺失交互性，缺少对用户体验的考虑，漏洞百出之下缺乏设计的主题内涵，难以转化为实践产品进行实用推广。

三、创新移动界面UI设计教学内容与教学步骤

移动界面UI 设计教学方法应采取渐进式教学法，对教学内容与教学步骤进行分拆，在调动学生学习积极性的基础之上培养学生的应用能力、分析能力和实践创新能力。基于UI 设计的易用性原则、规范性原则、帮助设施原则、合理性原则、美观与协调性原则，移动界面UI 设计教学课程可分为5 个部分：APP 图标设计课程、交互与用户体验设计课程、移动界面的规范化设计课程、APP 原型设计与界面深入理解课程。

APP 图标设计课程，应着重于培养学生的设计思维，提升学生的设计构思能力，向学生阐释多媒体界面设计的含义与原则，讲述图标设计的方法与行业要求；交互与用户体验课程，要对移动界面基本理论知识进行深入阐述，让学生理解交互与用户体验的理论概念，此阶段的教学内容为信息架构与竞品分析，学生需对所设计产品的用户角色、市场前景、交互逻辑有一个清晰的概念认知；移动界面的规范化设计课程，主要从移动端手机的苹果和安卓两大系统出发，帮助学生学习两大系统规范下的通用型设计框架，为学生实操训练讲解设计规范；APP 原型设计与界面深入理解课程，需要学生独立完成APP 课程的整个设计过程，此环节教师要引导学生确定APP 的用户功能与用户需求并制定信息功能框架图，然后从低保真原型开始深入到高保真原型制作，中间穿插控件库的知识，真正做到循序渐进地讲解，让学生更好地掌握教学内容，学以致用。

四、移动界面UI 设计教学中UI 设计的视觉传达要素分析与教学

（一）UI设计的图形符号表现分析与教学

图形符号直观、简明、易懂、方便记忆的特点，可以快速地给人提供行动指导，这也是视觉图形符号大量充斥于各个领域、各个行业中传达信息指令的根源作用。相应地，在UI设计与教学过程中，深度研究图形设计的种类、配列方式、美感构成对于学科发展至关重要。因此，UI 设计的图形符号表现分析与教学，必须对图形的有序排列、图形的合理搭配、图形的合理变化进行细分教学。UI 设计专业学科教师要注意引导学生采用独特的原色信息表现行业特色、国家特色、风物特色等，突出设计师本身的艺术创造性。

（二）UI设计的色彩运用分析与教学

色彩元素在移动端UI 设计产品中是一个举足轻重的组成部分，颜色各异的色彩代表着心理各异的视效感受，色彩具有增加用户记忆和想象、影响用户情绪与心理的重要作用。对于UI设计的色彩运用分析与教学来说，教师应引导学生创作具有视觉冲击力和色彩吸引力的产品，引导他们在UI设计中利用多样的色彩调换方式设计LOGO 色，从而衬托出移动端APP 的产品特点。其次，UI 设计中的色彩运用与分析教学，还应深入研究色彩对用户情绪的影响作用，学校可开设“色彩与情感感受”课程，帮助学生利用色彩的原色配比、纯度、明度、色相、色温、色调、色系等知识熟练应用于UI设计中。

（三）UI设计的文字编排设计分析与教学

文字必须具备高辨识度，这是目前UI设计的行业共识。学科教师要注意分析IOS 系统和安卓系统字体设计特点，引导学生在字体的艺术美观度与识别效度之间进行平衡，以适用于不同屏幕尺寸或年龄用户群的需要，如：对老年用户群，应偏向识别度设计，增大字号，适应老年人远视眼的阅读需求。对于移动端文字排版设计，教师需遵循留白空间充足原则、文字边缘整齐原则、异同文字反差接近原则，以此引导学生在文字的编排与处理上恰当地进行设计。

五、移动端界面UI设计的教学案例

（一）移动端软件产品设计教学流程研究

作为一名设计师，做一款产品，首先要对整个产品的行业状况与发展趋势有一个大致的了解，必须事先调查与分析行业的发展趋势与市场规律，这样才能对自我创设的产品有一个精准的市场需求定位。因此，教师在引导学生对移动端软件产品进行UI设计之时，同样也需要相对应的、完整的、系统的设计流程。

1.竞品分析

竞品分析从本质上讲，是对自己所研究、开发的产品做竞争关系分析，只有经过深入、理性、客观的竞争分析，设计者才能针对市场行情对所开发的产品做出相应的设计调整与设计缺陷规避。总而言之，竞品分析主要从视觉品牌、交互体验、功能与内容、市场4个方面进行分析，第一个目标是对用户流程进行模拟总结，第二个目标是对市场中的竞争产品做数据记录与分析。

2.用户调研

用户调研主要从产品直接用户、潜在用户出发，采用问卷调查、电话采访等方式对用户的需求进行数据汇总，记录、研究用户的各项使用偏好、使用规模、使用意愿等数据，从而帮助设计者拟定相应的产品设计计划，并建立初步的用户画像数据库，然后展开方案设计。

3.用户目标

用户目标主要指针对用户调研环节的数据，对产品的功能方向进行确立，以解决用户使用该产品的主要问题，进而进行软件开发。

4.产品功能

产品功能是指产品对用户的细分功效与总体功能。如，淘宝APP 的购物筛选选项、购物车选项、收藏选项、分期购选项等，用户使用软件时，需要解决什么问题就需对应地设置具体的功能选项。

5.操作流程

设计师在设计产品时，需要对产品界面的操作流程有一个清晰的设计，梳理产品的页面、动画、选项等要素。此环节，合理地设置操作步骤，对于提升用户体验至关重要。

6.原型设计

原型设计是针对产品的设计目标、功能、流程图、原型4 个要素进行细致、深入的评估。在原型设计师与网站开发工程师、PM（产品经理）沟通过程中，原型设计师会将心中对产品的想法通过宣讲方式向投资人、相关设计师、技术人员等进行更详细的产品意图解释。

7.小结

UI设计教学活动内容丰富且有趣，合理有效的移动端软件产品设计教学流程可以逐步提升学生的UI 设计水平。在课程中，竞品分析、用户调研、用户目标三个环节属于调查研究环节，软件设计的技术学习内容相对较少，教师要注重对学生调查、分析能力的培养，此阶段学生扮演的角色相当于产品经理的角色。产品功能与操作流程环节学生学习软件编程、视效设计等方面的技术内容会相对较多，教师要对界面点击方式设计、界面切换方式设计内容进行精细讲解，帮助学生完成预期学习目标。原型设计环节是针对产品的设计目标、功能、流程图、原型4个要素进行细致、深入的评估，教师要将一个完整的项目拆分为多个任务内容，要求学生按照教师要求分步骤构建完整的UI设计界面，这个过程相当于对整个UI设计活动进行复盘，考验的是学生对整个产品设计核心内容的把握程度。

（二）移动端APP的UI设计要点分析

让学生了解UI 设计的要点是移动端界面UI 设计教学的必备课程。移动端UI界面设计首先得满足“一目了然”设计要点，用户只有迅速地被吸引才会继续深入使用，如若设置过多的细节，反而会降低APP 界面的功能识别度。便捷的操作流程可以快速地使用户进入操作流程，能够有效降低用户的软件使用难度，简洁性、常识性、功能性永远是UI界面设计的首要考虑目标。其次，设计需要满足用户的个性化需求、人性化需求与细节化需求。用户不同的使用功能会诞生不同的操作要求，例如在手机问世时，竖屏满足用户的文本阅读习惯与打字、界面勾选等操作习惯，横屏适用于用户视频观看与游戏娱乐，因此用户便有了横屏与竖屏的切换需求，目前针对此需求大多设计师采用了手势滑屏与重力感应两个方法以供用户选择，此即为满足用户的人性化需求。

（三）工具型APP产品UI设计的风格化教学

因地制宜地对产品进行开发设计，需在产品设计前期进行用户调研，理解用户的需求。教师在进行UI设计教学时，要注意引导学生随不同的用户需求设计不同的产品风格以匹配用户的特殊审美趣味。学生在设计多样化风格的界面产品时，应将产品的设计中心放于APP 的功能方面，此环节是否能够解决用户的实际问题是APP 设计的重心。如，为电商网站制作购物APP 的界面时，以“淘宝”为例，这款APP 的首页定制画面以红色为主色调，红色具有引人注目的颜色吸引力，而且喜庆感十足，可以让用户一目了然地观察到关键信息，淘宝APP 的首页搜索框、商品推荐、消息、我的信息等每个模块都清晰明确，没有多余的文字，分类简洁。教师要引导学生理解产品的最终目标需求，引导学生多进行换位思考，亲身体验和感受产品的功能定位，以此增加自我设计产品的竞争力。

六、结语

UI设计是时代发展的产物，教师在进行移动端UI 界面教学时应不断地学习新的设计观念与设计模式，将国外的新颖、潮流设计观念引入我国的UI设计教学中，用多样化的形式展现UI 设计的魅力。以分阶段的循序渐进教学模式帮助学生在竞品分析、用户调研、用户目标、产品功能、操作流程、原型设计等环节独立完成APP 的整个设计过程，以此提升学生在移动端UI界面设计方面的专业水平。