基于移动App 交互原型设计与实现

四川化工职业技术学院 姜波

在移动App 交互原型设计的过程中，需要对整个App 的交互原型设计方案进行深入分析，要从移动App交互原型设计的具体步骤出发，保证设计工作的规范性和有效性。此外，在App 交互原型设计中，需要加强布局控制工作，提高运行设计水平。在此基础上，需要对相关的设计案例进行综合分析。通过交互原型设计可以直接开展交互以及视觉测试，能够更加直观地观看App产品的最终形态，防止在移动App 设计过程中出现盲目无序的情况影响最终的设计效果。

在对移动App 进行设计时，需要加强交互原型设计，促进产品设计师以及产品经理的有效沟通。一般情况下，在真实App 产品制作之前利用原型开展模型展示，可以使设计人员明确App 的最终设计形态。制作出原型后，团队成员可以通过讨论、测试对整个App 的最终形态进行全面掌握。同时能够了解App 的具体性能，对提高App 产品的设计效率和设计质量有极大帮助。

1 移动App 交互原型设计概述

1.1 移动App 交互原型设计工具

通过交互原型设计App 可以完成原型制作，为之后的设计提供基础。现阶段，很多原型制作工具的应用成本相对较低，操作也比较简单，功能丰富，可以根据App 的设计目标，保证原型制作的全面性。在一些App原型制作工具应用过程中，可以利用自带的流程图功能建立组件库和自定义样式库，满足设计人员的具体需求。为了能够充分发挥交互原型设计的积极作用，在原型设计过程中对Axure RP 原型设计工具的应用比较普遍，该软件的最大特点是专业性相对较强，可以完成一些相对复杂的交互设计工作。但是要注意在对Axure RP 软件进行应用的过程中，设计人员要具有一些编程的逻辑思维，才能够制作出想要的交互演示效果。Axure RP本身是比较成熟的交互原型设计工具，不管是基础功能，还是团队协作功能的专业性都相对较强，界面设置的专业度也比较高。在实际应用过程中，要根据App 软件的具体开发目标开展交互原型设计工作，提高App 设计水平。此外，需要注意在交互原型设计过程中完成配色图，一般会利用Photoshop 根据前期线框图做出相对完整的界面设计方案，一般包括确定配色方案、字体设计方案、图片素材等。还要对各功能控制键进行绘制，完成App图标设计工作，能够在视觉上表现出App 的最终形态。

1.2 移动App 原型设计类型

在移动App 原型设计过程中，其设计类型分为以下几方面：

（1）信息分类原型也被称作信息架构，这是移动App 最初的设计形式。在这一原型设计过程中，需要将构思完成的App 功能列出来，并对不同的功能进行分类，之后根据列举的功能划分成一级一级的树状图，主要包括一级页面、二级页面，按照功能的主次分成不同的层级。例如微信App 一级页面上主要包括微信、通讯录、发现、我，之后的二级页面是一级页面点开后的列表，例如通讯录点开后有新的朋友、群聊等，为二级功能。依次往下，还有第3 层级、第4 层级功能。信息分类原型架构在App 原型设计过程中，需要在正式制作界面原型之前确定好App 的功能结构，并对其进行分类和层级划分。（2）线框设计原型。线框原型主要是利用线条完成界面大致排版设计，并不需要填色，体现出App 的排版即可。在原型设计过程中不需要传达视觉效果，只需要将App 的功能层级和部分交互功能表达清楚。线框原型App 设计主要是在App 产品的设计阶段进行可视化展现，向设计人员传达出产品的信息架构、功能以及交互形式。（3）交互设计原型。在移动App 交互设计原型中主要有两大类：一类是基于页面或者窗口这种全局类的交互；另一类是某个具体的元件，在触发事件发生时的交互。在App 产品绘制基本原型图上为页面中的元件添加交互功能，可以快速实现页面交互的定制。移动App产品原型设计中，常见的页面交互有页面跳转、引导页左右滑动、长页面上下滚动交互、弹出消息框交互效果、侧边栏菜单滑入效果和表单验证与登录交互。（4）视觉设计原型。视觉设计原型属于移动App 原型设计的最终环节，交互原型结合视觉原型具有高保真的特点。在视觉原型设计过程中，需要利用Photoshop 以之前的线框图和设计创意为脊柱制作完整的界面，同时要确定配色方案、字体、图片素材等，还要完成各功能控件绘制和App 图标设计等，需要在视觉上呈现出移动App 的最终形态。

2 移动App 交互原型设计步骤

目前，在开展App 交互原型设计的过程中主要采取的是以下三个步骤：

（1）定保真。在App 原型绘制之前必须明确App 原型绘制目标，这是决定设计人员工作量以及产品上线质量的重要基础。原型需要画到什么程度，主要是以上级部门的要求为基础，根据团队的实际能力以及具体设计要求确定的。以此为基础需要对原型设计标准进行优化。一般情况下，在定保真中，可以利用黑白线框图完成主要交互设计，而配色线框图可以完成全部的交互设计，能够满足App 的设计和开发需求。（2）画页面。这是App 交互原型设计过程中的关键环节。在设计之前要确定页面的尺寸以及位置，为后续设计奠定基础。一般可以利用375×667 完成App 原型页面绘画。这一页面尺寸能够兼容当前所有的屏幕分辨率。在画页面时需要对尺寸进行科学选择，防止尺寸对视觉设计师产生不利影响。在利用Axure RP 确定页面位置时，需要设计人员进行手动设置，否则会导致手机上预览的页面不全。完成尺寸和位置确定后，需要利用原型软件画出页面。目前，在页面绘制过程中不需要完成元素配色，否则会影响视觉设计师的设计效果。在向视觉设计师交付设计方案时，最好以黑白线框图为主。（3）加交互。完成所有页面绘制工作后，需要将页面交付给视觉设计师以及开发人员。一般情况下，需要在黑白线框图上加主要交互，使其成为中保真原型，然后交付给其他人员。交互主要指的是页面之间的跳转处理过程，可以对整个产品的页面关系进行明确展示，并且有利于帮助设计人员和开发人员对整个版本的工作量进行科学评估。除此之外，需要将App 中的上导航、下导航等画出来，才能够使其他人员对页面内的交互体验有更深入的了解。如果提前完成App 软件库设计工作需要快速调用，能够提高与交互原型设计效率。需要注意的是在加交互的过程中，不需要100%的完成所有交互，因为一些交互的复杂度比较高，会导致设计效率降低，可以利用文字逻辑进行表述。

3 移动App 交互原型设计布局

（1）大平行式的布局。这种方式会显示出一部分内容，用户通过上下左右拖动查看相应的内容。这种布局方式的最大优点是能够减少不必要的跳转，大多数导航软件中的查看地图界面都是以大平移式布局为主。（2）宫格式布局方式。这种布局方式比较简单直观，符合大多数用户的使用习惯，也是当前主流的布局形式。目前，宫格式布局形式主要包括六宫格、九宫格。美图秀秀中的界面就是以这种宫格式布局方式为主，但是要注意宫格式布局层级不能过多，否则会给用户混乱无序的感觉。（3）侧滑式布局。这种布局方式也能够减少跳转次数，具有较强的延展性。但是对用户自身的要求相对较高，因为侧滑式布局支持隐藏信息，用户本身要对App 有一定的了解才能够快速找到相关的信息和功能。例如QQ软件中的“我”这一界面属于侧滑式布局。（4）列表式布局。这种布局方式具有较强的信息延展性，但是在信息查找过程中复杂度比较高。一般情况下列表式布局需要与标签式布局进行结合，大多数购物软件的布局都是以列表式布局为主的，可以为用户展示相对较多的商品方便用户选择。（5）标签式布局。标签式布局在设计时要将其放置在底部或者顶部，这样能够减少界面的跳转层级，蕴含的隐藏信息标签也相对较少，但是信息量比较大。（6）混合式布局。混合式布局是当前比较常见的界面布局形式，适应大多数用户的使用习惯和操作习惯。一般情况下会对多种单一的布局形式进行利用。例如宫格式布局和标签式布局混合应用。

这些布局方式都是以线框原型为基础的整体结构布局，在实际设计时还要根据App 的具体情况进行局部功能的交互设计。例如对按钮点击效果、页面切换等进行科学选择，可以在原型绘制过程中利用文字逻辑表述清楚，或者直接利用原型制作软件制作。一般情况下，在对移动App 交互原型设置的过程中，需要加强工具选择。目前，Axure RP 工具的应用比较多，功能比较专业，可以满足布局设计的需求。

4 产品原型设计与Axure RP

在开展移动端App 设计制作过程中，必须要加强与客户的沟通和交流，了解客户的实际需求。之后需要完成市场调研，对产品的场景、功能范围和商业需求进行科学定位。此外，要完成项目评估工作，确定其商业价值、业务逻辑及核心特点和创意，才能够进行移动App 原型设计工作。在具体的设计过程中需要从产品结构设计、细节定义、视觉设计等不同角度出发，保证交互原型设计方案的科学性和全面性。在对原型设计方案进行模拟测试后，才能进行软件代码设计，最后完成产品测试以及产品交互。其中交互原型设计是关键环节，其设计效果直接影响最终产品的使用体验和设计效果。Axure RP 软件作为快速专业的原型设计工具，能够使交互设计在短时间内创建原型应用软件。在具体的设计过程中可以完成App 原型创建，明确流程图、线框图和说明文档等。

在对Axure RP 软件进行应用的过程中，其操作界面相对简单，与专业的图像处理软件Photoshop 和矢量图设计软件的界面布局类似，方便设计人员进行快速操作。例如在具体的设计过程中，可以设计具体操作系统的常用软件图标导入其他常用的UI 元件素材库，主要包括菜单栏、键盘以及不同的按钮等，能够完成主流手机界面图设计工作，可以使设计人员快速了解Axure RP软件的具体操作要求，方便开展后期设计。并且在设计过程中Axure RP 软件自身带有的一些素材能够节省时间，使设计人员投入更多的精力对页面布局和交互效果等进行科学设计。Axure RP 软件自身的元件库比较丰富，在开展界面布局设计时，可以直接利用图标拖曳的方式完成设计工作。但是要注意动态面板元件的使用难度相对较大，在使用过程中要根据App 软件的设计目标和要求完成操作。动态面板本身能够实现不同交互动作，属于多空间、透明、无限大的元件容器。在实际设计过程中必须要对动态面板的状态和状态页编辑方法进行全面掌握，才能够提高交互设计的整体效果。在对动态面板应用时，为了提高动态面板的应用效率，可以对一些案例进行分析，掌握动态面板的具体设计方法和规则，了解相关概念和操作要求后再利用动态面板制作全局导航图。

5 交互设计案例分析

在移动App 交互原型进行设计时，要根据手机界面的实际情况完成色彩搭配和界面构图。在Axure RP 软件应用过程中，可以通过不同软件完成交互原型设计工作。交互原型设计主要是在编辑器中进行的添加动作，包括链接、元件、全局变量与其他动作。每一个动作使用的元件都不同，必须要设计相应的参数，同时加上不同的动画。还可以根据App 的实际情况为动作设置具体的条件，从而实现交互设计效果。例如在登录界面的登录按钮事件进行设计过程中，一般需要输入用户名和密码，且正确后才能够正常登录并跳转到页面。在对登录按钮进行交互设计时，要通过几种情况对交互效果进行判断：（1）未输入用户名和密码，点击登录按钮；（2）输入用户名但未输入密码，点击登录按钮；（3）输入用户名，未输入密码，点击登录按钮；（4）用户名和密码输入后点击登录按钮。需要对不同的设置条件进行全面考虑，确保每一个条件之间的关系正确。这样才能够保证条件关系清晰明确，提高编辑器的编辑设计水平。

6 结语

综上所述，在移动App 交互原型设计工作中，需要在掌握软件原型设计步骤和布局规则的基础上保证移动App 交互原型设计效率和设计效果。在对Axure RP 软件进行应用的过程中，必须要熟练掌握相应的操作要求和规范，提高移动App 交互原型设计水平。在具体的操作过程中，需要对客户的具体需求进行全面了解，同时要加强市场调研，确定App 的功能定位，为之后的App 设计提供有效的数据参考，从而提高App 的综合设计水平。

引用

[1] 周健.浅析《用户体验设计》中App原型设计在教学中的应用[J].福建茶叶,2019,41(9):71.

[2] 王楚音.基于目标导向的大学生校园直播App原型设计研究[D].北京:北京服装学院,2019.

[3] 朱元朋.移动终端界面交互动效设计及视觉反馈研究[D].西安:西安电子科技大学,2015.

[4] 许磊.基于用户体验的敦煌世界地质公园App原型的设计与实现[D].北京:中国地质大学(北京),2020.