基于移动UI界面的交互式设计

2020-11-25叶聪

电子技术与软件工程 2020年24期

叶聪

（苏州信息职业技术学院江苏省苏州市 215200）

移动UI 界面已成为人们与移动电子设备互相联系的重要技术媒介，目前，该设计技术正广泛应用于移动电子设备后台与前台信息传达交互模块，进而给人们带来良好的使用体验。因此，应对以移动UI 界面为基础的交互式设计进行探究，从而更好满足用户使用需求。

1 分析移动UI界面相关概述

所谓UI，主要是指用户界面，移动UI 界面指的是移动电子设备用户的操作界面。在UI 设计出现之初，其主要代表着界面样式和外观，但在科学技术水平不断提高、人们对界面需求逐渐上升的背景下，UI 设计逐渐变为人机交互的操作逻辑与界面美观性的有机整合，良好的移动UI 界面不仅能够满足用户对页面操作的需求，还需要为用户提供愉快的操作体验和视觉体验，并从界面上获得更多有用信息。从目前移动UI 界面发展现状来看，移动UI 设计的特点主要有两方面，分别是简约性和导向性。

具体而言，对于移动UI 界面设计的简约性而言，主要是因为移动电子设备的体积较小，影响界面体验的要素主要是移动电子设备屏幕的分辨率和整体尺寸大小。目前，大部分移动电子设备大小均在五寸到十二寸之间，分辨率基本为2160*1080，虽然移动电子设备具有极强的便携性，但也限制了移动UI 界面设计空间，无法对其设计复杂的交互操作。在人们对移动电子设备要求逐渐增多的当下，大部分用户不会选择需要两只手进行操作的系统和软件，为此，一般情况下，移动APP 的触点在两个及两个以下。那么当对移动UI 界面进行设计时，需要对交互结构进行科学规划，以尽量简约的操作和界面给用户便捷的使用体验，例如，左右边栏的设计或是上下菜单的设计就实现了功能按键的隐藏，进而为用户提供更加流畅的操作体验。对于导向性而言，传统图形用户界面使用的是WIMPS 威普斯界面，但该界面对键盘鼠标的依赖性极强，例如Windows 系统等，但对于移动UI 界面而言，操作和输入方式不再局限于鼠标，而是依靠体感和触屏。因此，移动UI 界面的设计需要考虑到用户使用习惯和思维模式，这导致移动UI 界面具有极强的导向性，通过设备界面引导用户操作，体验更加便捷和简洁的用户界面和操作[1]。

2 探讨以移动UI界面为基础交互式设计视觉元素及原则

2.1 以移动UI界面为基础交互式设计视觉元素

对于移动UI 界面而言，作为关键的是界面向用户传达的视觉元素，为此，大部分设计师在以移动UI 界面为基础进行交互式设计过程中，往往会使用RGB 模型，并使用六位十六进制数对色彩进行表示、搭配和设计，从而给用户带来直接心理效应。具体而言，其视觉元素有：

（1）文字视觉元素。对于移动UI 界面而言，文字是重要的基础组成，也是最为常见的视觉原色，一般情况下，文字多被选择为默认字体，这是因为文字元素是用户与移动电子设备进行信息交互的主要方式，在对其进行设计时，主要是使用无装饰文字符号对用户进行引导。同时，简洁的字体能够更快加载CSS 代码，从而提高软件交互体验。

（2）图标视觉元素。在移动UI 界面中，存在多个功能软件，在对软件图标进行设计时，主要以点、线、面视觉符号为主，并将软件名称直观呈现给用户，符合用于使用习惯，满足用户点击、触摸等交互操作需求。

（3）静态图像视觉元素。在移动UI 界面中，静态图像主要包括GIF、JPEG 以及PSD 等格式，为用户提供高压缩的高清图像，在对其进行设计时，主要是对其失真现象进行处理，并使用差值弥补算法对图像细节进行表现，进而为用户提供满意的视觉体验。

（4）动态图像视觉元素。该元素主要包括WMV、PNG 以及AVI 等格式，通过使用不同格式对图像和视频数据进行存储，其压缩量具有不同程度的变化，其中，PNG 等视频模式色彩较为丰富[2]。

2.2 以移动UI界面为基础交互式设计原则

在以移动UI 界面为基础的交互式设计中，需要在将信息准确传给用户的同时，根据用户使用习惯、需求以及审美等方面开展交互式设计，为此，应遵循以下原则：

（1）一致性原则。在开展交互式设计工作时，需要保证界面视觉排列、字体以及图标大小的一致性，给予用户直接的外在观感，降低用户界面交互的学习成本。另外，还应开展标准化设计，将其贯穿于界面元素和产品形象中，从而产生关联系，使用户通过视觉获得感知，提高软件的可用性。

（2）准确性原则。该原则主要体现在交互信息的准确性以及功能代码等方面的准确性，使用户能够在短时间内获取信息、交互使用信息。同时，在设计过程中应降低操作难度，满足不同用户的使用需求。

（3）操作合理性和时间响应原则。由于移动UI 界面需要排布多种视觉元素，所以，应以用户使用习惯为基础对文字、图表进行交互式设计，避免出现误触情况。对于响应时间而言，应在0.5s 内完成功能、软件以及动画的跳转。

（4）了解状态差异化。为使用户在使用过程中能够了解系统运行状态，并便于用户学习和检索，应保证界面能够给予用户使用反馈，从而更好做好信息交互和检索。

（5）注重图形化设计，在遵循便捷、简约原则的基础上，使用图形设计替代基础文字表述，还可以对文字进行补充，从而使用户能够更好的与设备之前进行信息交互，进一步提高用户使用体验，满足其交互使用需求[3]。

3 探究以移动UI界面为基础的交互式设计

3.1 明确目标，结合用户使用习惯

在以移动UI 界面为基础开展交互式设计工作时，需要明确用户目标、结合用户使用习惯和需求，开展针对性设计，从而实现用户与移动电子设备的信息交互。具体而言，在对移动电子设备页面进行交互式设计时，最为重要的就是避免误触情况，在苹果手机的引领下，用户在移动电子设备界面进行操作时往往通过触屏的方式进行，若是界面的交互式设计不合理，极易导致用户误触或是做出错误操作，进而影响用户交互体验。因此，应结合用户使用习惯，并以尽量简约的形式对界面进行设计，在当前全面屏时代，返回一般位于界面左上角，下一步则一般位于界面右上角。在长时间的使用过程中，用户逐渐形成这一使用需求，为此，在以移动UI 界面为基础进行交互式设计时，应结合用户使用习惯，从而给用户提供良好的操作体验。以外卖软件的订单查询功能为例，在对该功能界面进行交互式设计时，美团需要在订单下面点击一次，而饿了么则需要在订单下面点击两次，相对于美团，饿了么的出错率更高。但是，后者的交互式设计能够有效节约整体页面，也被称为“抽屉式菜单”。另外，在对UI 界面进行交互式设计时，还需要对网络环境进行考虑，由于移动电子设备面向的群体更加广泛，群体所处的网络环境不尽相同，进而导致用户使用体验也存在较大差异。因此，对于次要信息应放在后面，优先呈现重要信息，避免界面无法刷新或是等待时间过长，进而满足不同用户的使用需求[4]。

3.2 色彩设计

在以移动UI 界面为基础开展交互式设计时，尤其是在对一款APP 进行UI 界面的设计过程中，最为重要的元素就是色彩。一般情况下，在开展UI 界面设计时，主要相对软件图标进行设计，明确其图标后再对软件结构以及色彩进行设计，主要使用RGB 模型开展色彩设计工作。而且，在对色彩进行表达时，主要使用六位十六进制数，例如，在对湖蓝色进行表示时，其参数为00EBC0，在对玫红色进行表示时，其参数为fb0495。但是，需要注意的是，颜色具有一定的心理暗示，例如绿色代表通过，红色则表示暂停等，为此，在进行色彩设计时，一方面需要利用其心理暗示优化整个交互式设计，另一方面需要注意文化背景差异。在当前全球化的发展机制下，软件的使用是全球性的，不同文化背景下颜色的含义存在差异，因此，在对界面色彩进行设计时可按照以下几种搭配方式进行设计：

第一种，使用单一颜色进行界面配色。该方式主要是指将一种颜色作为界面核心颜色，通过对其进行饱和度或是色相的调整进而得到其他颜色，该搭配方式具有极强的协调性，能够给予用户和谐的使用感受。而且，主色调的选择可以与界面主题相关，使用户通过颜色就能够对界面模块以及软件图标等功能进行分辨。第二种，使用两种以上颜色进行设计，增加补色的使用强化颜色对比。所谓补色，指的是对比色，当两种颜色在色环上之间的间隔在120°-180°之间时，其为对比色，若是两种灯亮颜色在相互混合后能够成为黑灰色，也称为补色。通过在UI 界面交互式设计中使用补色，能够有效通过颜色的对比对UI 位置进行强化。另外，在具体设计中，设计人员应遵循上述原则把握元素和设计之间的关联，以提高用户舒适度为前提对色调使用效果和明暗选择进行考虑，从而使用户能够在较短时间内适应界面的交互式操作习惯，使得界面更加明确、整洁。

3.3 交互式结构设计

由于移动电子设备发展较快，每一代都存在新的性能和创新，当用户第一次接触新型移动电子设备时，给用户留下第一印象的就是第一操作界面，除了产品的实质性功能，该方面是影响用户使用体验的重要因素。因此，在以移动UI 界面为基础进行交互式结构设计时，需要根据不同的使用群体设计不同的交互界面，例如，华为就根据年轻群体开发了华为NOVA 系列，该系列设备的界面更为年轻化，且配色更为生动。因此，在对UI 界面交互式结构进行设计时，可以使用Axure RP 模块化对界面进行设计。所谓Axure RP 是一款产品设计工具，包含了产品线框图、文档以及流程图等多个内容，相较于手绘图，该工具展示的效果图则更加全面、直观。通过Axure RP，设计人员可以在移动电子设备原型图的基础上对架构及模块进行设计，并进行交互模拟，例如翻页、链接或是效果等，从而保证交互式结构适用于移动电子设备，确保视觉层级上的连贯性。

另外，在进行软件图标设计时，应结合产品设计理念以及面向对象群体的特性，例如，淘宝软件图标以及界面的主色调为橙色，京东软件图标及界面的主色调为红色，美团软件图标及其界面的主色调为黄色等。在长期使用下，用户对其颜色较为敏感，为此，在进行结构设计时，应从产品调性、用户需求及习惯等多个方面进行综合考虑，面向整个使用群体，从而保证框架能够满足各个阶段用户的需求。例如，在面向青少年等年轻化群体进行交互式设计时，主要选择生动、有趣的界面框架，并为其提供灵活、多样化的功能服务，若是该软件性质偏向于商业化，则应该设计简洁、明了的界面框架结构。因此，仍应该立足于使用群体，从而设计合适的交互式设计[5]。

3.4 注重用户情感体验

对于交互式设计而言，其服务对象是用户，所以，在以移动UI 界面为基础开展交互式设计工作时，设计人员应以用户心理需求为核心开展工作，提高对用户情感体验的重视程度，从而提高用户体验感。具体而言，在开展交互式设计过程中，设计人员应对UI 界面区域、模块以及色彩进行合理设计，根据不同软件的特性以及使用特点可以融入情感因素或者典故，从而引发用户共鸣，感觉到界面传达的情感，进而认同该产品，获得更好的使用体验。在当前社会经济不断发展的背景下，移动端软件也在不断更新、优化，无论是框架、功能还是色彩，都进入高优化阶段，用户在与软件进行交互式使用时，相较于色彩、功能，更加注重软件的视觉冲击以及诞生历程。因此，为更好的强化设备与用户之间的交互式体验，应对用户需求进行捕捉，对软件及界面不断注入新元素。以网易云音乐为例，二零一五年，人们使用最多的音乐软件是QQ 音乐，但在网易云音乐增加情感要素之后，其下载量和好评度不断上升，这主要是因为在对音乐播放软件进行设计时，以用户产生的情感波动为基础为用户提供诉说情感的窗口，也就是评论区，而一首歌曲具有较大面积的受众，用户与歌曲之间产生的情感共鸣引起了其他听众的情感共鸣，而这些情感共鸣产生的结果作用于网易云音乐这一音乐播放软件，进而获得大量用户的喜爱。另外，网易云音乐将评论区的点击方式优化为手指上滑，同时，保有原本的点击功能，进一步加深了用户的交互体验，为用户提供良好使用服务。因此，在进行交互式设计时，应注重用户的情感需求，立足于实际软件特性增加情感设计，从而提高用户与设备之间的交互性。

3.5 对UI视觉界面功能、审美交互性进行设计

在对UI 视觉界面功能交互性进行设计时，主要选择上下结合方式进行界面布局，或是采取导航栏下、展示页面上的布局方式，从而能够顺利引导用户进行浏览等逻辑操作。同时，在交互界面具体功能实现方面，设计人员应立足于不同软件、网页的行业需求对导航栏、返回、信息提示框等方面进行悬浮型或是方框形的提示信息和窗口，并对多种软件图标以及展示界面进行上下级的任务链接，从而使用户能够在短时间内熟悉界面操作并完成交互指令和功能操作。在对UI 视觉审美交互性进行设计时，主要是对文字、视频以及图标等视觉要素进行设计，并按照上下、垂直、左右以及居中等方式对其进行排班，便于用户检索需求。另外，为使设备与用户能够更好的进行交互，对于窗口以及图标等方面的线条应尽量选择柔和的，同时，根据空间要素不同对功能区域之间的间隔进行设计，满足用户在软件产品操作过程中的心理需求[6]。

以中界面框架为例，在对其进行UI 界面交互式设计时，在保证交互功能的基础上需要保证各个设计和功能的协调性。为此，可以采取上下结合的布局方式对UI 界面进行设计。主要是将导航栏设计在界面最上方，并将关键信息放在导航栏上，从而使用户能够通过触摸、滑动或是点击导航栏进而快速进行信息检索或是浏览，并将网址放在上面，满足用户的功能使用。在界面下方应设计图标按钮，通过点击和触摸能够直接打开软件，满足用户使用的多种需求。除此之外，还可以使用导航栏在下放、展示页面在上方的界面布局。在该布局方式中，主要是将重要信息设计在用户第一眼可以注意到的位置，从而更好的进行信息推送和交互，为此，应将导航栏设计在UI 界面下方。在该布局下，用户只需要进行交互界面的滑动，或是对导航栏进行滑动、点击，就能够完成功能获取或是浏览等操作。以微信UI 信息界面为例，最近使用的小程序图标为放置在最上方，而导航栏被设计在最下方，通过下滑，用户能够直接获得最近使用的小程序应用，满足其快速使用需求。另外，为满足用户的使用需求，便于新用户使用，可以进登陆窗口设计在软件最上层，并使用箭头、文字等元素对用户进行引导，从而完成用户交互操作行为的同时，给予用户良好的使用体验。