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

葛田

摘要：移动UI界面的交互设计是平面设计中人机交互的新体验，本文从移动UI的概念、与传统UI设计的区别入手，讨论了新型UI界面交互设计的要点，UI设计的常见配色方法以及提出使用Axure RP软件来快速地创建原型图。

关键词：移动UI；界面设计；Axure RP

中图分类号：TP37 文献标识码：A

文章编号：1009-3044（2019）09-0207-02

界面UI是使用者与设备互相联系的桥梁。现今广泛得到应用的移动电子设备正是通过其界面UI设计将后台的运行程序与前台界面的进行交互信息传达。而为了给用户带来更好的体验，增加用户的黏性程度，就必须让UI设计具有更好的可用性来满足用户的需求。

1 移动UI设计的特点

移动UI是移动通信与UI设计的结合。近年来随着4G网络在全国的普及，移动网络设备如智能手机，智能手表等逐渐代替了原来的笔记本电脑，平板电脑等等。因为移动设备特有便携性，使其界面的UI设计与传统的界面设计有着不小的区别。

1.1了解移动设备的“体积”

移动设备的体积小是它最大设备制造特点。影响显示端体验的要素有两种：屏幕尺寸和分辨率。目前市场上的移动设备类型层出不穷，仅仅智能手机的终端屏幕尺寸就多达几十种。主流的尺寸从5.9到11.6甚至更大。分辨率也由640*480到2160*1080不等。便携的移动设备极大地方便了用户的网络体验，但尺寸大小也限制了复杂的交互操作。例如大部分移动设备用户不会接受需要频繁使用双手的操作系统和软件。事实上常见的APP设计很少会需要2个以上的触点去操作。那么当设计师不能将所有操作一次性呈现的时候，结构规划就变得更加重要。我们通过左右边栏，上下菜单对元素进行有效的取舍和隐藏。设计师最终的目的不是要让用户刻意地去理解UI交互，而是需要让用户有流畅的使用体验。

1.2移动设备的“界面”

传统的图形用户界面一般都是指WIMPS维普斯界面，它是菜单、指针、视窗等依赖于键盘鼠标输入的界面。像我们熟悉的windows7及以前的系统，二维、三维设计软件，播放器等等界面。现如今我们不再局限于台式电脑，一体机等设备，我们的UI界面已经运用到智能手机，智能手表或其他手持设备。用户也不再局限于鼠标，游戏柄等输入方式，而是大量采用触屏和体感的方式来浏览界面。这是我们所说的后维普斯时代。设计师需要采用更多的技术来实现交互设计，因为在这里用户本身就是输入端和控制端。

2 UI设计最重要的视觉传达：色彩

我们在设计一款APP的UI界面时，最常见的方法是先设计它的图标，确定这款软件的色彩和基本结构。在进行移动端色彩设计的时候，设计师一般会采用RGB模型。色彩通过六位十六进制数来表示，比如玫红色表示为fb0495，湖蓝色表示为00EBC0，赤褐色表示为835c25。UI设计中色彩的设计最具表现力，它可以给客户带来直接心理效应。但需要注意的是不同的文化背景可能其色彩的意思也不尽相同。红色在东亚表现为节日，喜庆，热烈的感情，但在其他地区可能代表着危险，敏感等元素。在趋于扁平化设计的今天，移动UI的色彩搭配方案主要有以下几种搭配方法：

（1）单一色配色：依赖一种颜色作为主色调，通过调整饱和度或色相来得到趋近的颜色系（效果图3）。

（2）采用两种以上颜色方案，搭配补色来突出对比 。补色也称为对比色，是两种在色相环上间隔120°到180°的颜色。如果两种等量的颜色在相互混合后成黑灰色，那么就互为补色。互补色能够增强两方的颜色，通过对比来突出要强调的UI位置。图3是选择单一红色系做互补的效果图。图4是选择色环距离中30°的两种颜色做双补色的效果图。

3 Axure RP模块化设计界面

Axure RP是一款快速产品设计工具，由美国Axure Software Solution公司出品。它集产品线框图、流程图、原型和说明文档设计与一身。这样的效果图比手绘图更加直觀，为我们UI的模块化设计提供了便利。利用Axure我们可以设计移动设备的原型图，并利用软件元件做出基本的交互模拟，如翻页，链接，选择效果。下图为使用Axure设计的iPhone手机APP原型图。

使用Axure 、Photoshop等软件设计的模块化界面使得无论是前台设计师还是后台程序员都可以快速的理解设计结构，确保视觉层级上的连贯性。同时模块化设计可以很方便地重复使用素材，节省我们的工作时间。

移动界面的交互设计除了包含了UI的层次，配色、模块化设计等要素，设计者还应该了解用户如何去感知界面并与界面交互的。界面只有一个，而不同的用户拥有不同的美感，理解用户并会用用户的视角体验可以帮助设计师正确的去传达视觉信息，完善我们的设计。

参考文献：

[1] 陈晓蕾.基于用户体验的交互界面设计研究[D].长春：长春工业大学，2013：9-11.

[2] 高鹏，杨正.论UI设计中的扁平化与拟物化[J].美术教育研究，2014（10）：60.

[3] 廖宏勇.图形界面的隐喻设计[J].同济大学学报：社会科学版，2010（3）：76-82.

[4] 饶卫民，林道贵.略谈智能手机App开发中的UI设计技巧[J].电子测试，2016（13）：41-42.

【通联编辑：唐一东】