基于Flash的手机应用UI设计.docx

基于Flash的手机应用UI设计.docx

《基于Flash的手机应用UI设计.docx》由会员分享，可在线阅读，更多相关《基于Flash的手机应用UI设计.docx（13页珍藏版）》请在冰豆网上搜索。

基于Flash的手机应用UI设计

目录

1.选题的背景及意义1

2.UI概述2

2.1UI的分类2

2.2手机应用UI的设计原则2

3.《猫宠应用》UI的设计分析4

3.1产品定位5

3.2目标客户心理及审美心理分析5

3.3功能设计7

4.《猫宠应用》UI的实现8

4.1技术分析8

4.2制作的难点分析8

4.3手机应用实例《猫宠应用》UI的制作10

4.4制作小技巧11

5.总结与展望12

6.参考文献14

基于Flash的手机应用的UI设计

摘要：

随着智能手机和平板电脑以及其他智能设备的广泛普及，手机应用，主要指基于移动终端开发出的第三方应用程序，用户可以自由地通过线上应用商店下载并安装。

为了让一个手机应用获得更多的下载量并保留下来，这其中有很多的因素，比如充分考虑到用户的需求，流畅的交互体验，操作的简洁性等等都是必不可少的。

其中UI的设计也是一个非常重要的因素，它是用户在体验手机应用时的第一感受和最直观的一种感受。

本文在研究了UI设计设计原则后，运用Flash软件对实例的进行制作旨在设计出一款多功能的手机管理的应用UI。

基于Flash的手机应用UI设计

1.选题的背景及意义

目前我们每个人都身处移动互联网变革的幸运时代，感受手机App给我们生活和工作带来的便利，据调查2013年度75%的用户手机上安装了20个以上的App应用，且最早推出App的商家快速从中获取了巨大的市场利润，使得手机App市场在短时间内迅速膨胀，如全球最大的应用商店AppStore，2013年底在线手机App数量已经超过100万个，累计下载量超过500亿次，至今为止苹果已向开发者支付了超过130亿美元，巨大的市场利润引来了整个产业的疯狂追捧，市场迅速就从蓝海变成了红海，市场竞争激烈。

然而从目前的App应用来看，大量的App应用都是围绕消费者的衣食住行推出的，产品同质化严重。

而从发展趋势来看，智能手机对传统功能手机的替代性将进一步加快，在不久的将来智能手机将完全替代现有的功能手机，消费者将越来越依赖手机App，消费者花费在App上的时间将超过在PC、电视机上面的所花费的时间。

根据Gartner的统计数据预测，2014年手机App下载量将达到1300亿次，将超过过去五年累计的下载量，App改变世界的脚步将更加迅速，将更深刻的改变人们的生活方式。

因此未来App的市场应用前景非常广阔，但是开发者要挖掘用户的深度需求，寻找新的蓝海。

从应用对象角度看，目前个人消费者更深度的需求、企业和行业应用需求、电子政务需求等几方面，还鲜有涉猎，将是未来重要的蓝海市场[1]。

艾媒咨询（iiMediaResearch）数据显示，2013年中国手机游戏用户规模达到3.85亿，同比增长34.6%，预计到2014年手机游戏的用户规模将超过4.5亿。

艾媒咨询（iiMediaResearch）分析认为，中国手机游戏用户规模在2014年的增长速度较2013年有所放缓，但用户数量仍增长将近1亿，用户争夺戓将更加激烈。

而且随着时间推移，移动终端使用人数将急剧增加，对于手机应用的需求量也会越来越大，手机应用的可实现的功能也会越来越多元化、分类也会更加细化。

如游戏娱乐类应用、系统工具类应用、生活购物类应用、交通旅游类应用、电子阅览等。

其次，根据一些大的门户网站上的新闻报道，我们可以知道由于移动终端的自由性、便携性的特点，使移

动终端的使用量将在不久的将来超过传统的桌面设备，成为互联网行业的新巨头，从世界知名公司谷歌、苹果的迅速崛起可见一斑。

但是开发一个不仅有下载量且能被保留在用户手机上的手机应用，需要很多方面的努力，其中UI的设计也是一个重要的环节，其直接给用户使用的第一感受，可以说UI就是手机应用的一个“脸面”。

2.UI概述

UI（英文：

UserInterface）即用户界面，在用户和机器的交动过程中有一个过渡层，就是界面（Interface）。

UI（用户界面）在心理学上可以分为感觉和情感两个部分，从用户的角度来说，UI是一种让用户更容易理解、接受的一种使用产品的方式。

从心理学的角度来说，UI给用户从视觉、触觉、听觉等感官感受，再对用户的情感产生作用，因此一个好的UI设计需要涉及很多的学科，如认知心理学、艺术设计学、人体工程学等学科，只有这样才能更好的完成整个交互过程，达到一个愉悦的交互体验。

2.1UI的分类

在互联网领域里UI可以分为三个部分：

（1）电脑软件UI，这主要是一些软件的登陆、操作界面等设计主要包括软件图标、控件等。

（2）网站UI，基本上就是互联网中各种网站的界面。

（3）手机UI，其中手机UI又可以分为手机系统的用户界面和第三方开发的手机应用界面。

又因手机屏幕较电脑屏幕来说尺寸较小，所以与电脑软件用户界面的设计具有差异性，同时又有相似的地方。

比如：

手机用户界面设计整体来说需要各个页面之间保持整体性、一致性，同时还要有个性化，并符合界面视觉元素的规范。

2.2手机应用UI的设计原则

根据手机的特征需要遵循的设计UI的一些原则

（1）页面布局保持统一性[2]

一样的功能在一样的地方。

一个页面无非由一些基本模块组成，每一种基本模块在UI设计上，不同的页面应保持元素一致，包括布局（字型、字号、行距）、色系（颜色、按钮颜色）、元素（按钮形状、按钮功能、提示文字等），从而尽量减少用户因记错或记不起如何操作而引发错误[3]，如图1所示。

图1页面间的统一性

（2）具有吸引力

一个漂亮的界面，一个精心准备的动画，或一个适时的交互效果都是体验的乐趣。

也许一个微妙的效果都可以贡献出强大的力量，吸引我们的用户的眼球，如图2所示。

图2Yoritsuki应用

（3）信息结构好，屏与屏之间的逻辑关系清晰

由于手机屏幕相对较小，只能展示较少的信息量，这时候，在APP页面建设中，就需要有清晰的信息架构，让用户能一目了然的知道手机应用的各个模块能够自由切换。

（4）应尽量减少文字的输入

移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：

输入定位无法反馈，所以无法形成高效的盲打；虚拟键盘的空间限制，手指的点击经常造成误按。

光是上面这两点就让虚拟键盘在输入上大打折扣，故在设计的过程中，应尽量减少用户的输入，如果有可能可以设置默认值，或者让用户选择目标值。

（5）个性化

人们喜欢增加专属于个人的东西，它们让人感觉更有亲切感及控制感。

提供实用、漂亮、有趣、可自定义，且不妨碍主要任务的的默认设置。

而手机应用界面在遵循上述手机界面的设计原则之外，还需要具有美观、个性化的特点才能在众多的手机应用中脱颖而出，吸引用户并留住客户。

（6）交互效果的趣味性

界面是人与手机产品互动的媒介，好的手机界面不能仅仅满足于舒适的适用感。

在个性化的设计基础上，我们应该更加追求有趣味的、出其不意的愉悦感。

如果说，一款UI界面的设计只是停留在“可使用”的初级阶段，那么它必定是无法吸引眼球的。

而我们要做的则是：

安插令人意料之外的、富有创意的趣味化设计[4]。

3.《猫宠应用》UI的设计分析

图3思维导图

想要打造一个成功的应用，手机应用UI的设计分析非常重要。

通常需要因素还有很多：

产品定位阶段、目标人群的确立、色彩风格的确立，先据此画出如图3的思维导图。

3.1产品定位

从手机应用市场的现状做产品定位。

根据一些报告数据显示，目前被下载安装到手机上的应用主要有一些通讯聊天类应用如QQ、微信，游戏类应用如天天酷跑等天天系列，社交类应用如微博等，安全类应用如腾讯手机管家等，还有诸如美图类应用等等。

一部手机可能安装了十几二十个应用，再加上手机自带的一些应用，就会造成手机的应用列表就会出现几页甚至十几页的分页，这时如果需要从中找出某个应用，用户就需要花费较长的时间来寻找。

特别是当一个手机被用户安装了某个主题之后，要从众多的、相似的应用图标中中快速的找出某个应用更加困难。

如何能让用户更加方便和快捷的找到当前需要的应用呢？

如同一个图书馆一样，借阅者如何能在众多书籍中快速找到所需要的书，就是先将书籍按照一定方法分类，然后借阅者根据所需书籍的类别，确定图书所在的位置。

依据这样的现状，需要一个可以管理手机上的应用的应用。

因而，产品定位是一款日常手机应用管理的应用[5]。

3.2目标客户心理及审美心理分析

当手机应用的定位好之后，需要考虑的是了解目标客户的具体情况。

了解目标客户群青少年的娱乐心理需求及审美心理。

青少年指满13周岁但不满20周岁的（从生理、心智的发展角度上讲）人，也就是少年与青年相重合的阶段，处于儿童时期之后，成人之前。

所谓心理需求，是反映主体自身按其思想意愿情绪正常需要而产生的需求。

处于青春期阶段的青少年在心理需求上的变化是多样且显著的，经过筛选，本文将从娱乐需求这个方面来分析青少年的心理特征。

“娱乐至上”成为青少年的一种娱乐态度，对于青少年而言通过不同的娱乐方式来减轻学习压力也未尝不是一个可行的办法。

对青少年的娱乐方式加以正确的引导，在娱乐中增长知识，促进青少年身心健康发展是一个关键点。

如何有效利用这一点构想出符合其娱乐心理需求的应用呢？

青少年审美心理结构由审美认知（包括审美感知、审美记忆、审美想象、审美思维等）审美情感（也称美感）和审美心理倾向构成青少年审美心理是一个综合的、动态的、复杂的过程，具有个体性、情感性、直觉性、创造性、非功利性和时代性的特征[6]。

根据上述特征，我们可以得知：

在这个网络时代里青少年的审美心理是与实际利益分开的，并与当下的网络社会相适应的。

且青少年喜欢新奇，追赶时髦的心理使现在青少年审美心理更加的追求多元化。

随着中国网民年龄的低龄化，越来越多的学生、青少年加入移动终端消费大军对手机应用的功能需要也越来繁多。

因而要设计出吸引他们的手机应用必须依据他们心理需求、审美心理特征、年龄等因素对症下药，方能见其效。

如何才能根据青少年的这些心理情况构思出一个吸引他们的的应用呢？

设计者需要充分考虑他们的相关特征，构思出一个富有个性化、充满趣味的，集娱乐和学习一体的，兼具日常手机应用管理的一款应用。

（1）手机应用色彩、字体的设定

一旦对手机应用目标消费人群的确立，以及对目标消费人群审美心理的分析后，接下来需要完成的就是对手机应用界面的风格及色彩的确立。

有相关的研究显示这个年龄的人群喜爱颜色的顺序为蓝、红、绿、黄、橙[7]。

因而该手机应用界面的风格以个性化为主，设计出了符合该年龄段人群的色彩偏好。

因而采用了暖色系的粉色和给人高雅、明快感觉的浅灰色等浅色为主要颜色，因灰色与暖色相配时，可以凸显出灰色温和典雅的特征[8]。

故画面整体给观者传达出一种清新、淡雅的感觉。

再配上不同明度、不同饱和度的蓝和色彩比较跳跃的颜色来使整个画面看起来非常的活泼与灵动，符合大多数目标人群的审美偏好。

确定后色彩后就要进行文字设计：

字体采用符合手机显示特征的字体，字号则根据标题、普通文字、图标标题文字等有所区分。

但各个页面只要类别相同，字号字体则一致。

如图4所示。

（2）手机应用中宠物角色设定

根据上述分析目标消费人群的心理及审美心理，确定手机应用的宠物角色为猫。

再依据猫的个性特点将导航栏中的角色图标、动作设定分别为鱼骨、小鱼、小猫玩毛线球等。

为了增强其个性化与趣味性，在导航的图标上有一个互动的过程，并为小猫设置了相应的小动画。

导航栏的图标互动有：

在选中目标前后第一个图标由鱼骨变为一条鱼，第二个图标会由趴在地上的小猫变为跳起状态，第三个图标会从一只小猫“飞”来一只蝴蝶。

如图5所示。

图5导航图标互动的变化

3.3功能设计

根据产品定位，确立目标客户，再根据目标客户的相关特征构思出一个集手机宠物与学习和日常手机应用管理三位一体的以学生及青少年为目标消费人群的一款手机应用。

由此确定手机应用的四个功能模块：

应用分类、模式管理、图形选择、自定义。

应用分类：

用户可以根据自己的需要将手机上的应用进行分类整理，放入到系统提供的三个文件目录下对应目录文件夹下，这样就可以减少手机应用列表的分类。

模式管理：

有三种模式可供选择工作模式、周末模式、旅游模式。

其中工作模式中可以选择平时工作需要用到的常用手机应用如：

微信、金山快盘、hotmail等，另外，还会在用户手机的主界面隐藏一个工作模式侧边栏，用户可以利用侧边栏快速找到所需的软件。

图形选择：

可以根据自己的喜好设置文件目录文件夹的形状，主要有心形、方形、圆形三种方式可供选择。

自定义：

用户在当前模块下可以自定义宠物的名字、头像，还可以点开下级页面完成“每日任务”—可以学习一些英语句子、还可以与自己的宠物玩耍等等[9]，如图6。

图6主要的功能模块图

4.《猫宠应用》UI的实现

4.1技术分析

（1）UI设计的软件简介

AdobeFlash（原称MacromediaFlash，简称Flash），是美国Adobe公司收购所设计的一种二维动画软件。

AdobeFlash用于设计和编辑Flash文档，AdobeFlashPlayer，用于播放Flash文档。

AdobePhotoshop，简称“PS”，是由AdobeSystems开发和发行的图像处理软件。

AdobePhotoshop主要处理以像素所构成的数字图像。

使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

该软件有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

（2）UI设计中需要使用ActionScript3.0语言

ActionScript3.0的老版本（ActionScript1.0和2.0）提供了创建效果丰富的Web应用程序所需的功能和灵活性。

ActionScript3.0现在为基于Web的应用程序提供了更多的可能性。

它进一步增强了这种语言，提供了出色的性能，简化了开发的过程，因此更适合高度复杂的Web应用程序和大数据集。

ActionScript3.0可以为以FlashPlayer为目标的内容和应用程序提供高性能和开发效率。

ActionScript3.0提供了可靠的编程模型，具备面向对象编程的基本知识的开发人员对此模型会感到似曾相识。

ActionScript3.0相对于早期ActionScript版本改进的一些重要功能包括：

一个新增的ActionScript虚拟机，称为AVM2，它使用全新的字节代码指令集，可使性能显著提高。

这使ActionScript3.0代码的执行速度几乎比以前的ActionScript代码快了10倍。

FlashPlayer9中包含AVM2（ActionScript3.0的脚本语言引擎），设计它的目的是提供互联网应用程序开发人员所需的性能和特性。

为了向后兼容现有的内容，FlashPlayer将继续支持AVM1。

ActionScript3.0符合ECMAScriptLanguageSpecification第三版。

它还包含基于ECMAScriptEdition4的功能，比如类、包和名称空间；可选的静态类型；生成器和迭代器；以及非结构化赋值（destructuringassignments）。

随着Web应用程序项目需求的增长，也要求ActionScript引擎有重大的突破[10]。

4.2制作的难点分析

（1）部分关键代码实现。

在所有的页面都组建好之后，把“小猫玩耍”元件复制到主文件中，打开该元件的“动作代码”，给其加上以下代码段，实现跟随鼠标动作。

鼠标拖到对象代码

on（press）{//鼠标按下不放时

this.startDrag（）;//此元件允许拖动

}

on（release，rollOut）{//当鼠标按下或移动出元件时

this.stopDrag（）;//停止对元件的拖动操作

}

n（release）{

startDrag（"_root.mc"，true，0，0，550，400）;

on（press）{

gotoAndPlay（12）;

}

on（press）{

gotoAndstop（12）;

}

on（press）{

gotoAndPlay（"场景2"，1）;

}

（2）切片工作

在将页面导入Flash之前，需要先将页面进行“切片”，特别要注意一些具有交互动画的按钮要导出两张PNG，一张没有阴影效果另一张具有阴影效果。

其次，为了避免导出的按钮图片大小不一给后面动画制作造成麻烦。

图7无阴影效果按钮与有阴影效果的按钮

在不改变切片的大小的情况下可利用图层的显示和隐藏来导出具有阴影效果和没有阴影效果的按钮图片。

如上图7所示。

4.3手机应用实例《猫宠应用》UI的制作

根据前面的分析构思绘制出应用需要的图标、角色等元素，先在纸上画出草图，利用相应的软件绘制出素材。

利用搜索引擎找出需要的素材做好相应的准备工作。

（1）在Flash中将制作完成的素材重组再实现页面链接功能

新建一个Flash文件，将先前切片的背景图片等相关素材导入到库文件中，再将各个按钮元件、小猫动作的一些影片剪辑文件复制到新文件的库中，这样既可以让新文件库文件变小，也可以让在制作的过程没有利用的素材一些素材不再站库文件的存储空间。

在Flash文件中，将各个页面的元素先按静态的设计重新拼合起来，再给按钮文件添加相应的“动作代码”使页面之间实现链接跳转，如图8所示。

图8页面链接图

（2）页面的检查与动作完善

在上述工作完成后，检查页面的排版布局是否符合最初的设计构想，不符合的地方再进行修改。

检查页面中的小猫的动作是否符合运动规律，并进一步完善动作。

（3）整个动画的调试与优化

页面检查无误后，在对动画进行优化。

完成后对动画进行调试，通过测试影片效果、调整和完善动画作品。

（4）方案改进阶段

在产品设计完成后，可以抽取一部分群体进行调研，了解到用户喜欢的是那些？

不喜欢的是哪些？

有什么改进意见等，这样就可以吧产品做得更加的精细，更加符合用户的需求。

4.4制作小技巧

（1）设置网格线，避免出现虚边

为了不让导出图不在1:

1分辨率下也能保持像素清晰，可以通过创建网格线来避免虚边的出现。

利用“编辑＞首选项＞参考线、网格和切片”保证尺寸为偶数。

例如：

设置网格线间隔为64px，子网格为64，如图9。

图9设置网格线数为偶数

（2）保存样式

保存多次使用的样式到样式面板，这样免去每次都复制粘贴的麻烦，提高工作效率，如下图10。

图10保存新样式

（3）切图技巧

在切图时要将每个模块分开来创建文件夹存放切图文件，这样在后期运用图片是就可以在每个模块中快速找到相应的图片。

另外还需要将切片格式设为，“24位索引色位图”该位图模式最多可展示的颜色数量多了1600万；所以“PNG24”能展示的图片颜色会更丰富，图片的清晰度好，图片质量高，如图11。

图11各个模式的切片文件夹

5.总结与展望

（1）制作总结

由于UI设计是近几年才兴起的，所以相关的系统的资料数量比较少。

而网上的一些资料虽然比较多，但都是爱好者和在职人员总结的一些经验没有权威性，而且质量也参差不齐。

因此，在制作过程中遇到了困难，只能借鉴一些人的做法，再结合自己的实际情况进行运用，几乎都是“摸着石头在过河”，所以肯定有一些没有考虑到的方面做不到尽善尽美。

（2）UI风格总结

UI风格设计在手机软件中的用户界面上有非常重要的作用，当用户第一眼看到软件时就是看到UI并会随之给一个“印象分”，自然分数高，用户的使用率就会越高。

所以，要根据用户的年龄段、受教育程度等相关因素做出最符合目标消费人群心理的UI风格。

（3）展望

在手机所占的市场份额越来越大的情况下，未来的UI设计会更加的受到重视，也会有更多的要求与准则可供参考。

此次设计制作的这个UI，虽然只是在Flash中实现了交互效果和动画效果，没有制作出一个可以下载和安装的APP程序（英文：

Application），但是我相信在不久的将来，一定会有此类产品出现在手机应用市场。

在创作过程中，不免会遇到各种各样的困难，由于之前的学习中，对UI设计并没有接触，几乎就是一个“从零开始”的状态，到自己慢慢摸索和不断修改才完成制作。

《基于Flash的手机应用UI设计》创作，不仅积累了UI设计的工作经验，还了解到一个受欢迎的UI设计需要考虑的因素非常多。

6.参考文献

[1]徐雪梅手机App应用前景及发展瓶颈探析[J].信息与电脑2014（4）：

69～70

[2]盛明悦，崔川浅析手机应用程序的界面设计原则[J].电子技术与软件市场：

124

[3]JeffJohnson张一宁译认知与设计理解UI设计准则[M].人民邮电出版社2011（9）：

149～152

[4]田智文手机UI界面设计的人性设计[J].艺术科技2013（10）：

44

[5]狸雅人Photoshop智能手机APP界面设计[M].人民邮电出版社2013

（1）

[6]王玺华浅谈青少年审美心理特征[J].辽宁行政学院学报2008（7）：

230～234

[7]段殳色彩心理学与艺术设计[D].东南大学硕士学位论文2006:

58～60

[8]范文东色彩的搭配原理与技巧[M].人民美术出版社2006（6）：

27

[9]查黄英手机APP校园客户端的设计[J]科技向导2014（23）：

207～267

[10][EB/OL].