浅谈手机软件开发中的UI界面设计.doc

《浅谈手机软件开发中的UI界面设计.doc》由会员分享，可在线阅读，更多相关《浅谈手机软件开发中的UI界面设计.doc（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、吉林大学珠海学院毕业论文（设计）浅谈手机软件开发中的UI界面设计Brief discussion about the UI design of Mobile Software Development完成日期二零一三年四月吉林大学珠海学院本科毕业论文开题报告浅谈手机软件开发中的UI界面设计摘要目前国内手机软件界面设计参差不齐。有的手机软件只注重功能的实现不注重界面的设计，严重影响了用户的体验，不符合技术发展的规律。所以在接下来的手机软件开发的趋势是：除了功能方面设计以外的其它设计将变得越来越重要。所以为了让设计完美我在实习工作中去研究探索、搜集材料、找导师指导。最终完成了此次的论文设计。本文主要

2、是通过在实习工作中的学习和实践研究得出对手机软件开发中用户界面设计的总结和分析。首先介绍了手机软件开发中的相关概念，目前国内外的手机、UI界面设计发展的状况，接着总结了UI界面设计中的设计原则，接着通过在实习时接触到的项目来展示优秀手机软件UI界面设计的规范并且简单的讲述了它的实现，最后，总结出本论文提出的相关规范。关键字：手机开发；界面设计；用户界面；iPhoneBrief discussion about the UI design of Mobile Software DevelopmentAbstractCurrently, there have many differences in

3、 the design of the UI design of Mobile Software Development in China. Some of the mobile software just is paid attention on how to perform their functions, not focused on the UI design. This condition has a strong impact on the UE (users experience), and it doesnt accord with the rules of the develo

4、pment of the technology. Therefore, the trend of the Mobile Software Development will be like, besides the functions of the phones, its more and more important to pay more attentions on other parts designs. Then I do some research、search some resources、get some guidance from my tutor during my inter

5、nship. Here is the project of my paper.The analyses and the conclusion of the UI design of Mobile Software Development came from my internship experiences, through the study and practice when I worked. At first, it talk about some concepts about Mobile Software Development, the present phones we use

6、 all around the world, the condition of the UI designs development, and sum up the design rules of the UI design. Secondly, in my internship, I can showed the wonderful UI design of Mobile Software through the projects which I took part in, and simply represented how did it come true. Finally, I hav

7、e the related specification of my paper.Key words: Mobile Software Development; UI; UI design; iPhone目录1 绪论11.1 研究背景11.1.1 国内外智能手机市场发展现状11.1.2 国内手机软件开发现状11.1.3 UI 界面设计的现状11.2 UI 界面设计概念11.3 总结22 用户界面设计原则32.1 以用户为中心32.1.1 符合用户常用模式32.1.2 友好的文本输入32.1.3 便于点击42.2 合理的布局42.3 适当的反馈42.3.1 反馈的方式42.4 简洁的表达信息53

8、以Accela Inspector APP 探讨IOS设计规范63.1 Accela Inspector APP的简介63.2 应用图标和启动画面63.2 登陆页面73.3 iPhone 页面的基本构成83.3.1 状态栏93.3.2 导航栏93.3.3 表格视图103.3.4 标签栏133.3.5 动作列表153.3.6 iPhone 页面构成的总结153.4 Accela Inspector APP 的细节设计164总结18参考文献19致谢201 绪论1.1 研究背景1.1.1 国内外智能手机市场发展现状近些年来，国内外智能手机市场高速增长，特别是中国市场。据统计：中国智能手机市场销量已经

9、达到了3183.9万部，首次超过美国，跃居为全球第一大智能手机市场5。1.1.2 国内手机软件开发现状随着国内智能手机的不断普及，和各个平台的开发门槛比较低，手机软件正成为各个软件公司和程序员们争相开发的对象。手机开发程序员不仅仅掌握着一个手机平台的开发技术，并且掌握了多门语言，熟悉多个手机平台的开发技术。这使得手机软件开发的市场竞争越来越激烈。虽然竞争越来越激烈，但是在国外手机软件开发团队日进斗金的事实上，国人也正摸索着如何在这个平台上挣钱。总而言之，国内的手机软件开发的现状是良莠不齐，乱象横生。1.1.3 UI 界面设计的现状由于各个手机平台的开发门槛低，而且手机开发的周期较短，一般一到两

10、周就可以把软件交付上线。所以很多公司和手机软件开发者只注重功能的实现忽略了界面的设计与交互，等到用户的反馈后才不断的打补丁。在这个APP浩如烟海的时代这个做法已经不再能留得住用户。当用户觉得你的APP难用时，用户会果断把你的APP删掉去网上找类似的APP取而代之。所以，要想留住用户，就必须注重UI界面交互设计。上一节提到开发者熟悉多种平台，很多时候当开发者在把APP移到另一个平台实现跨平台时习惯性的会把他比较熟悉的平台上的设计规范带到下一个平台上去。这个就是为什么Android APP上有很多IOS APP 设计身影的原因了。1.2 UI 界面设计概念UI是User Interface的简写。

11、从字面上可以看出它是由用户和界面组成，结构上看先是有User然后才有Interface所以UI界面设计最重要的还是用户。总之，界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色1。1.3 总结由于我的实习工作中主要涉及到了IOS 系统、Android 系统和Windows Phone 系统。尤其对苹果开发的ios系统理解比较深刻，所以在接下来的章节中，将对这些系统的界面设计进行介绍、比较，特别是苹果的ios 系统，我将用在实习时的项目展开来分析。2 用户界面设计原则虽然不同的公司开发出了不同的系统，有不同的设计规范。但是设计原则基本上是一致的。本章节将

12、以我在实习时学到的知识和对用户界面设计的个人见解来讨论手机软件开发中用户界面设计的基本原则。2.1 以用户为中心个人理解：用户界面设计从中文层面上来讲，有用户才有后面的界面和设计。正如俗话所说的“以人为本”。以用户中心为首要原则的APP才能在浩如烟海的APP中脱颖而出，成为用户的至爱。在一次人口信息登记工作的工程中，工作人员用手机软件进行流动人口的信息登记。软件界面丑陋文本框不对齐等问题使得登记人员的工作效果不佳，工作人员也不断的抱怨软件的不人性。可想而知，就算软件的功能都能实现但是没有以人为本的设计那么最终还是会被用户所抛弃。2.1.1 符合用户常用模式用户界面的设计应该是符合用户常用模式的

13、，而不是简单的实现软件。通俗的来说：就是把本来很抽象的东西放到手机的设计上来符合人们在日常生活中的交流和使用方式。软件设计的越符合用户的需求，设计出来的APP 就越优秀。比如说在社交APP中比较流行的签到。人们在玩发布信息的时候会想知道其他人对这个地方的印象、附近有谁经常在这里活动来进行交友。设计师就是抓住了用户的这种心理需求，才使得签到这个功能流行起来。2.1.2 友好的文本输入由于智能手机没有实体键盘的因素，在智能机上输入文字要在虚拟键盘中点击很多时候都会不经意的点错，这个问题一直困扰着设计者们而且没有得到很好的解决方案。所以当你的程序中出现过多的输入的时候，无疑是在消耗用户的时间和精力。

14、在遇到需要输入的控件的时候，尽量给用户提供提示和选择、用户输入后并且提交的文本进行保存等。比如说：在登录界面需要用邮箱登陆的APP中，给予网民习惯用的网易、QQ、新浪等邮箱的后缀提醒。用户登陆成功后对登陆邮箱进行保存或者还可以提醒对密码的保存，下次就可以直接登陆你的APP，省去打开一次APP 就输入一次用户名和密码的麻烦。智能手机在输入文本的弊端一直没有得到很好的解决，虽然现在有语音输入的帮助例如：苹果的siri、讯飞语音等，都在为智能手机端上的输入提供了便利，但是有很多因素的影响使得输入不能全部由语音输入完成，最大的原因莫过于语音输入很多时候不能较准确的辨别。所以智能手机用户不能根本上摆脱虚

15、拟键盘的折磨。而且在用户使用你的APP的时候不可能做到从不输入文本文字，当用户在输入文本时一不小心把输入成果给弄没了，可想而知是多么痛苦的事。如果有保存用户的输入成果，这种悲剧就不会发生了。所以设计APP的时候需要保存用户的输入成果。2.1.3 便于点击当你设计控件时要考虑到用户手指的大小点击范围，苹果公司给设计者的建议是控件大小不要低于44*44像素2。太大的话视觉效果不好。Button可以做的小一点，但做成切片的时候要切的大一点，给用户的手指与屏幕的接触的范围变的大一些。控件与控件之间的距离间隔要适中。间隔太大影响美观，太小容易产生误点击。以简洁，易用使用的形式排列空间和用户交互元素有助于

16、用户花最少的精力来准确的进行触控操作。2.2 合理的布局不同的平台，有不同的布局风格。即使相同的平台上，布局也百花争艳。但是，总得来说布局应当合理。何为合理？合理就是你的布局与你的APP的和谐统一。2.3 适当的反馈当用户在你的APP里操作时，用户不仅仅要得到结果，不需要得知APP给予的操作相应。以及在漫长的操作进行中的实时状态。比如下载时的进度条。反馈是用户和APP交互中重要的一个环节。所以提供良好的方式，能使用户产生愉悦感。而不是给用户带来受罪感。2.3.1 反馈的方式移动互联的核心就是给用户带来移动体验的方便和高效，这是软件开发时设计需要考虑的，用户大多是在碎片时间使用你的产品，所以在设

17、计上尽量让用户在短时间内熟悉产品，特别是某些需要等待的环节的界面设计，如果把一个很枯燥的等待界面呈现在用户的面前，那么用户的体验就降低他就会考虑换其他APP。动画是一种提供反馈比较好的方式，因为可以让用户眼前一亮。2.4 简洁的表达信息当用户界面中的直接信息并且间接提供时，用户能够快速理解。因此，找出最重要的信息，用最简洁的语言描述，并且在最显著的位置展示。这样，用户就不用阅读过多的文字来判断信息对用户的价值。比如在新闻的APP中，用户可以看新闻标题来定义此新闻点不点击进去阅览。 简介的表达信息这一特质在Metro风格中表现的淋漓尽致。3 以Accela Inspector APP 探讨IOS

18、设计规范本章节写的是通过在公司实习时，接触到的IOS系统上开发的手机软件来分析探讨IOS上的UI设计规范。3.1 Accela Inspector APP的简介Inspector 是Accela 政务系统的一部分，而这个APP就是从这个庞大的系统中单独抽出做成一个功能简单的应用，它主要的作用是方便工作人员在户外进行工作检查。用户开发这个软件的目的是把其他设备上的一个模块移到手机上使得工作方便快捷，此APP已经在iTunes上上线。3.2 应用图标和启动画面应用图标是放置在主屏幕上的供用户点击它来启动系统（如图3-1）。因此应用图标就是你APP的入口。要想你的APP做的成功，首先要从应用图标下手

19、。设计图标的时候应该注意吸引人的；能表达出APP的内容的；与众不同的；一般是你的logo设计。此APP采用的是拟物化的设计通过一个安全帽很明朗的给用户说明这个是工作用的。ios规范设计的要求：图片大小为57*57像素、边角为直角的PNG格式图片、不带任何光影和玻璃效果、不使用Alpha透明。苹果公司提出这些要求是因为ios系统会自动在图标上添加视觉效果使图标以其和系统内置的图标保持一致性。Ios系统自动添加的效果有圆角效果、阴影效果和反射光效果。把设置好的图标命名为 ”Icon.png” 放置资源文件中。程序引用就可以再主屏幕上显示了。图3-1 图标在主屏幕的显示启动画面是用户点击完应用图标后

20、弹出的画面呈现出来的内容。一般用动画来显示或者用一张图片来表示也可以是直接跳到登陆界面。这个启动画面是为了提升用户体验而设置的，效果：用于减缓启动时带来的延迟感，给用户带来一种错觉就是这个应用很快速就启动完毕了。把设置好的图片命名为”Default.png” 放置资源文件中。程序引用就可以在APP启动时显示启动画面了。3.2 登陆页面启动页面过后就是登陆页面，登陆界面是用于用户输入账号与密码的页面，页面一般包括logo、登陆框的组合（如图3-2）。此APP以蓝色为主颜色，在登陆框中输入文字符合友好的文本输入的原则。保留用户之前的输入信息，当用户再次登陆时只输入密码即可。为了解决有时不用登陆也可

21、以进行预览的需求，还添加了Preview 的Button事件供用户点击但数据不是服务器上的数据。详细的说下登陆页面的实现。把做好的背景图片命名为”InspectorBackground.png”。New一个UILabel来放置软件的名字。接着做一个登陆组合框里面包括4个UILabel和4个UITextView 包括Agency,User Name,Password和Environment，最后设置了两个Button登陆 Sing In 和 Preview。图3-2 登陆的界面3.3 iPhone 页面的基本构成iPhone 的基本页面一般是由状态栏、导航栏、内容区和标签栏所构成2。如图3-3所

22、示.图 3-3 页面基本构成的界面显示3.3.1 状态栏状态栏的设置规格高和宽 40*640 像素，坐标为（0,0）如图3-4所示。IOS的APP分为三个类型分别是效率型、沉浸式和实用型。除了沉浸式应用默认隐藏以外，其它两个应该都要有状态这一栏。此APP为实用型APP，所以保留了状态栏。iPhone 的状态栏是默认不隐藏的，所以如果不是沉浸式的应用就不用去修改它的属性。图3-4 状态栏标准3.3.2 导航栏状态栏下面的就是导航栏规格高和宽 88*640 像素，坐标为（0,40）如图3-5所示。进入一个窗口后就会显示，它包括2个控件（左右两边各一个，有时只包含一个控件）和一个标题。其中左边为返回

23、上一级的Button它的样式是带小箭头的图标如图3-5左边的Button。Button的字体大小为24个像素，导航标题为 26-40 像素。 建议：不能改变其高度和样式轮廓并且左边的小箭头按钮也不能改变。因为如果改变它的特征用户将不适应你的改变因为所有IOS应用都遵循这个原则。导航栏是通过UIKit 下的UINavigationController 控件来实现的。图中导航栏的实现的核心界面代码。UINavigationController *jList = UINavigationController alloc init; /创建一个导航控件:UIViewController *jobLis

24、t = UIView alloc initWithNibName: (JobList);jList pushViewController:jobList animated:NO; /添加视图jobList.title=”Job List”; /标题UIBarButtonItem *homeBarButtonItem= UIBarButtonItem alloc initWithCustormView : backButton ;self.navigationItem setLeftBarButtonItem:homeBarButtonItem;homeBarButtonItem release

25、;backButton release; /左边导航栏的设置UIBarButtonItem *mapBarButtonItem= UIBarButtonItem alloc initWithCustormView : forwardButton;self.navigationItem *setRightBarButtonItem:MapBarButtonItem;mapBarButtonItem release;forwardButton release; /右边导航栏的设置图3-5 导航栏的设置3.3.3 表格视图状态栏下面就是内容区了，内容区有几张表现形式比如有：表格视图，文本视图和web

26、视图。Accela Inspector APP 主要是应用了表格视图。所以在内容区这个方面我将用表格视图来进行分析。Accela Inspector中应用到的表格视图主要有分组表格和平面表格。分组表格：高度和宽为90*604 第一个表格的坐标为（18,168），字体大小为24像素，表格与表格之间一般要有40个像素的间隔。分组表格一般用于选项列，信息资料的显示，列表的选择等。分组表格还包含了其它的控件元素，如图中有事件触发的按钮和信息的显示。如图3-6所示，Accela Inspector APP 就遵循了此原则，我将对它进行分析。图 3-6 表格视图的展示平面表格也称之为纵向表格，坐标为（0,

27、128），字体大小为24个像素。和分组表格一样平面表格也一般用于选项列，信息资料的显示，列表的选择等。也还包含了其它的控件元素。如图 3-7 中显示。上图中的表格是用UIkit下的UITableViewCell 控件来实现的其中一个表格的实现的核心代码如下：tableshow.text=”Additional Information”;-(UITableViewCellAccessoryDisclosureIndicator)tableView:(UITableView *)table accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexp

28、ath;/UItableView delegate方法图 3-7 平面视图的展示也有很多情况下，是两种表格一起混合使用，如在Accela Inspector APP项目中下图3 -8所示。其实是分组表格中的一种特例，在分组表格中的其它组的表格里有平面表格的表现。图3-8 混合视图的展示3.3.4 标签栏位于内容区下面，屏幕最下面的就是标签栏（卡片栏）了。它的标准如下：整个标签栏的高和宽为98*640，其中阴影块为153*88，图标的大小为 60*60。字体的大小为:14个像素。卡片栏中的卡片默认的情况下是为选中后的卡片添加阴影块以及点亮图标，这个是iPhone自动生成的。标签中的图标设计，直接

29、设计成用户所理解此标签是干什么的图标。如图3-9所以。卡片栏中的卡片一般设置成4-5个，最多不超过5个，如果超过5个可以添加按钮进行处理，如图3-10所示。iPhone 中用UIKit中的UITabBar 来实现标签栏的。图 3-9 标签栏的设置图 3-10 标签的扩充3.3.5 动作列表动作列表的使用情况：当事件有很多种情况供用户处理时，你可以使用动作列表来呈现如同意、不同意、取消。动作列表是有几个Button事件所组成的。每个Button事件处理不同的情况。原则：当有删除等不可恢复的动作触发是按钮的颜色应该与其它按钮加以区别。如图 3-11 所式：图 3-11 动作列表的展示3.3.6 i

30、Phone 页面构成的总结iPhone 的页面构成多种多样，一般就包含以上几种。当然在Accela Inspector APP中还包含了其它页面。但最基础和用的最多的还是以上这些页面。所以就拿这些来进行探讨。3.4 Accela Inspector APP 的细节设计Accela Inspector APP 除了遵循iPhone 的基本设计外。还有一些细节设计是根据用户的实际情况出发所做的。这个软件是给政府的工作人员在户外进行设备等的检测的，有时候可能没有信号，不能将做好的数据上传到服务器。Accela Inspector APP 通过简单的界面细节设计来区分处理过的数据，当处于有信号的环境下

31、就可以自动或手动同步到服务器。如图3-12 中的绿色小标签。图 3-12 特殊标记的展示搜索框的提供。为了方便用户对软件里大量的信息进行查找，软件里都会提供搜索框。而搜索框一般是放在导航区和内容区之间。符合人的心理习惯。如图3-13所示。图 3-13 搜索框的展示上面所提及的两个细节都是从用户的角度进行设计的。充分体现了用户界面设计的原则。4总结本文主要是通过在实习工作中的学习和实践研究得出对手机软件开发中用户界面设计的总结和分析。首先介绍了手机软件开发中的相关概念，目前国内外的手机、UI界面设计发展的状况和目前占据主流的手机系统的简介，接着总结出了UI界面设计中的设计原则，紧接着通过在实习时

32、接触到的项目来展示优秀软件UI界面设计的规范。大致概括各章节所写的内容。第一章写了：目前国内外智能手机市场火爆，三大系统分天下形成三国鼎立之势。但国内手机开发特别是UI界面开发这方面比较杂乱。第二章写了用户界面设计原则。主要原则：1.以用户为中心；2.合理的布局；3.适当的反馈；4简单的表达信息；第三章写了以实际的APP来探讨IOS的设计规范。主要是IOS手机的基本页面构成：状态栏、导航栏、内容区、标签栏。本论文主要是通过在实习工作期间，我在公司里学到的知识和个人理解所写。由于工作经验有限和对手机UI开发的认知尚不够深。所以难免有很多方面理解比较肤浅。而且我只对苹果的IOS系统进行分析和总结对

33、于Android和Windows phone 的理解还不够深刻，在今后的学习生活中将深入了解。论文中的不足或者错误的观点，望老师与同学们给予指点。参考文献1. 百度百科 UI的介绍， 2. iPhone Human Interface Guidelines .苹果官网3. 王志刚王中元朱茵著，iPhone UIKit 详解 M.电子工业出版社, 2012年4. 凤凰新闻网， 5. 东方新闻网 6. (美)Josh Clark著，包季真译，设计优秀的iPhone应用 M.电子工业出版社，2011年10月7. (美) Erica Sadun 著，张彩霞易磊等译，iPhone开发秘籍 M.人民邮电出

34、版社，2010年11月8. (美)Suzanne Ginsburg 著，师蓉樊旺斌译， iPhone应用用户体验设计实战与案例 M.机械工业出版社 2011年6月9. (美)Dave Mark Jeff LaMarche著， 漆振谢巧云孙文磊译， iPhone开发基础教程 M.人民邮电出版社, 2009年4月10. (美) Anderson, J. McRee, J. Wilson, R. EffectiveUI团队著, 陆昌辉李东晖邹剑波译, Effective UI:软件用户体验艺术 M.清华大学出版社 2011年5月致谢在此次的毕业设计中，首先我要感谢我的指导老师给予的指导。同时还要感谢实习的公司和导师。如果没有你们的教育与指导，我将很难完成此次论文设计。最后感谢在论文设计中帮助过我的同学和朋友。由于我的学术水平有限，论文中难免有不足或者错误的观点，望评审老师给予指点。