毕业论文范文-交互设计技术的分析

1随着互联网不断地发展，对人们的生产生活都产生了深远的影响。特别是移动互联网的快速发展，人们越来越依赖移动手机端对生活带来的便捷。人们越来越习惯于用手机购物，查询路线，寻找美食等。其中影响范围最广的就是社交类软件。这类软件的“用户粘度”最高，用户忠诚度最强。良好的交互设计必将带来更高的用户粘性。因此，交互设计在软件中的重要性不言而喻，各类软件应更加注重交互设计。缺乏交互性的产品是没有生命力的。让软件除了美观更具可用性，让用户有更好的体验，是用户更满意，从而提高软件的商业价值，是交互设计的目标。现在大街小巷几乎人手一部触屏手机，而触屏手机本身就是交互性产品，交互的本质就是“响应”,当用户使用产品的时候往往希望可以第一时间得到反馈。而市面上很多设计精美的产品却缺少好的交互体验，这类产品往往会很快被用户淘汰。还有不少软件重技术忽略交互的，这类软件通常有强大的功能能满足用户多方面的需求，但是没有好的交互体验，其实这同样是留不住用户的。论文通过对交互设计技术的分析，结合实际需求，对软件进行原型设计，建模等方式改进软件的界面的交互性。此过程中结合了对几个社区类APP的体验，去糙取精、最后整合优秀的交互方式到自己设计中。论文的成果着重提出产品不应只注重界面精美，更重要的是交互行为。而这一行为始终要以用户为中心，要对用户有深入的理解，及时了解用户需求。 WiththedevelopmentoftheInternetconstantly,bothproductionanpeopleproducedprofoundinfluence.Especiallytherapiddevelopmeshopping,queryroute,lookingforfood,etc.Theinfluencescopeisshouldpaymoreattentiontointeractiondesiphoneitselfisproductofinteractivity,thenatureoftheinteractionisa"responskindofproductwilloftenqumeetthevariousneedsofusers,buttowndesign.Resultsofth浙江科技学院信息与电子工程学院本科毕业设计(论文)摘要 I Ⅱ Ⅲ 1 11.2研究内容及拟解决问题 1第2章工具软件与交互设计发展 52.1开发环境和工具 52.2交互设计概念与发展 52.2.1交互设计的概念 52.2.2交互设计的发展 6 83.1同类竞争产品分析 83.2交互设计流程 3.2.1确定场景 3.2.2定义功能 3.3.3交互界面设计时应注意的点 3.3手绘草图 3.4软件流程图 3.5低保真 第4章交互设计相关技术 4.1软件相关界面 4.2涉及到的部分交互设计技术 4.2.1搜索框 4.2.2图片轮换 4.2.3滑动列表 28 第5章课题总结 致谢 浙江科技学院信息与电子工程学院本科毕业设计(论文)参考文献…………… 随着移动互联网时代的到来，这场数字化革命给人类社会带来了很多变化。从当年苹果公司推出Iphone,又在次年推出ipad,这两种可以算革命性的移动数码产品在很大程度上改变了人们过去与互联网沟通方式，真正实现了随时随地现在，人们对于智能手机的功能要求越来越高，已经演变的无法满足以前单单通话、查找、上网、社交的这些基本功能，人们越来越想可以在这些移动设备上可以做更多的事。近几年来，由于移动互联网服务的发展，以及消费者对手机产品的体验越来越追求完美，使得手机软件界面交互设计显得更加重要。各大企业在推出一个新的APP的时候也越来越多的把交互作为软件是否会受欢迎的一个重要考量。但是很多国内的企业才刚刚明白到人机交互体验的重要性，而很多由于不看重而导致的用户体验问题已经接二连三的出现了，例如交互界面布局混乱繁杂，用户无从下手操作：界面图形与色彩的搭配及其不当，造成用户眼花缭乱找不到需要的目标信息等，随着手机界面交互方面的需求和设计的飞速发展，我们研究怎么样将交互设计的理念应用于手机产品设计中，分析各项交互元素，研究手机产品的界面交互设计方法，就显得尤为重要和迫切。从用户角度来说，交互设计是一种可以让产品好用并且有效的技术，它的目标是为了理解用户的愿望，了解用户在使用产品交互时对方的行为，了解使用者本身的心理和行为，同时，还包括掌握各种有效的交互方式，并对它们进行加强和扩大。交互设计还包含到很多学科，以及和各领域各背景人员的沟通交流。交互设计的目的包括，有用性，易用性和吸引性的设计和改善。交互设计就是要提供丰富，全面，自然的信号，这是针对目前新型交互界面传递重要紧急的信息。通过对产品的界面和各种行为的交互设计，在产品和它的使用者之间建立一种良好的关系，从而有效达到使用者的目的。2本课题研究的基本内容是社交类app交互设计。该App采用photoshop和axture作为开发工具。在研究过程中着重与界面的视觉的效果，与用户体验。交互设计以用户为中心的理念会贯穿整个产品。该APP的功能是希望生活在社区中的居民在这个APP上进行社交活动，从而可以结识到本社区的居民。因为生活在同个小区，生活环境相同，自然可以衍生出很多共同语言，进而及时是在网上认识，但在线下见面时也不会尴尬反而更加亲近。在设计师设计界面的时候，更多的考虑用户的心理使用习惯，是设计师的设计符合用户的期望。所以交互设计不同于以往的传统设计，设计师既要考虑现在的设计流行趋势又要满足用户的需求。所以我们的设计模式应该更加多元化。正因为交互设计更多考虑用户，所以我们在设计产品的时候，首先要调查用户对产品交互的需求，尽可能的对一些潜在用户做充足的调查，以此来增加产品的易用性和可用性。二任务分析，从产品和用户这两方面入手，进行系统交互任务分析，之后进行各部分的功能分析，详细绘制数据流程图，并勾画出任务流程图和任务列表。三使用环境分析，判断用户在什么环境下会使用你的软件，设计出最合适那种环境的交互方式，预计交互的复杂程度。四绘制草图，根据以上判断设计初步草图，在绘制草图的时候，考虑屏幕布局与显示设计，在设计界面显示元素的时候应该按照一下不走：1、按系统分析的结果，确定信息输入和输出的要求和内容等。2、进行屏幕和窗口的层级结构设计。3、根据用户的特征，确定界面上各交互元素显示的位置和层次。4、充分考虑提示，出错和帮助等信息。5、进行多次测试，如果发现什么不合适之处或者出错的地方，进行重新设计和修改。五完成草图后进行原型设计，原型设计是交互设计中最重要的一步，在设计的过程中运用原型被称为原型设计。在整个前期的交互设计流程图之后，就是原型的开发设计阶段，简单来说就是将页面元素、布局模块、人机交互的模式， 3利用简单的线框语言，将产品在脱离实际生活的状态下可以用一种更加具体跟生动的方式进行表达。产品的原型概括起来可以说是整个产品在面市之前的一个框架设计。原型设计能够帮助设计师更加深入的理解用户需求，并通过设计交互设计中的不足从而可以进一步改正。我们可以从以下方面来评估交互设计2、产品流程的清晰度，表现层级简单，明确，无不必要的分流，其流程;用户可以随时取消正在进行的操作；对用户的所有操作要有明确的消息反馈;用户可以快速返回上一级；要有好的交互引导和帮助。3、正确的使用控件，产品会涉及到很多控件，比如一级标签栏，二级标签栏，对话框，按钮，提示框，警告框等等，这些控件是否使用到位，对于控件使用是否精准有以下这些评估标准：使用控件的精准性(比如混淆了复选框和单选框)控件的重复使用(比如两个列表框都用到了table,就不用设计两个)控件的状态(比如是否可点，可选状态是否有显示)4、准确的信息转达，信息的转达包括文字提醒设计等。提示文字需要内容精准，信息传要达的有效，这些都是衡量交互当人们在初次浏览到社交APP时，可以感受到APP界面想要传达给用户的所有丰富情感，进而引起用户的共鸣。在使用过程中同样会产生如好玩，实用，创新的使用感受。在APP界面的整体情境氛围中，它情感的延伸可以维系到现在，不再仅仅停留在是功能上的完善，已经逐渐摆脱一些陈旧的设计理念，力求从整体上带给用户更加轻松的社交氛围以及更1、这个APP面向的用户群是怎样的，这些用户的共同点是什么。这个APP 4主要是满足怎样的需求的。2、用户在什么情况下下载了这个APP,在使用之前的预期是怎样的，我希望通过它得到什么。3、第一次使用，用户会对这个APP的印象是什么,为什么覺得它好。并且可以梳理一下用例、界面设计规范、体验设计规范等等。5第2章工具软件与交互设计发展2.1开发环境和工具MicrosoftVisio2010:是一款便于IT人士和商务专业人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。BalsamiqMockups是一种软件工程中快速原型的建立软件，可以做为与用户交互的一个界面草图。BalsamiqMockups是美国加利福利亚的Balsamiq工作室(2008年3月创建)推出的原型图绘制软件。于2008年6月发行了第一个版本。它的使命是帮助人们更好、更容易的设计软件产品。AxureRP是一个专业的快速设计原型工具。让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理2.2交互设计概念与发展对于交互设计AlanCooper有个经典定义：简单来说，交互设计就是人工作品、环境和系统的一种互动行为，以及传达这种行为的外观因素的设计和定义。其实所谓的交互设计，指的是设计师对产品和产品的使用者之间的互动机制进行的预测、描述、规划、定义、分析和探索的一个过程。其实就是说，设计和定义使用者如何使用同一产品达到他们各自的目标，完成某一项任务的过程。交互设计是指设计人和产品以及服务互动的一种机制，它是以用户体验为基础而进行的人机交互设计，要具体衡量使用者的背景、使用经验以及在操作的过程中的各种感受，这样才可以设计出符合用户的最终产品，使得最终用户在使用产品时能感受到愉悦、符合自己的逻辑、并且对他们而言是高效的产品。交互设计的目的是使产品让用户能简单使用。 6它是一种以目标为导向的设计，所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成自JenniferPreece,HelenSharp,YvonneRogers在他们的《交互设计一超越人机交互》这本书中将交互设计定义为：设计是支持人们正常工作与生活的交互式产产品。Winograd把交互设计描述为“是人类交流和交互空间的设计”。交互设计作为一门关注交互体验项目的新学科产生于二十世纪八十年代，它由IDEO的一位创始人比尔·摩格理吉(BillMoggridge)在1984年一次设计会议上提出，他一开始把它命名为“软面(SoftFace)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(CabbagePatchdoll)”的名字，后来把它更名为“InteractionDesign”,即交互设计。初创期(1929年-1970年),提出基础理念与定义。奠基期(1970年-1979年)从1970年到1973年出版了四本与计算机相关的人机工程学专著。1970年成立了两个HCI研究中心：一个是英国的Lough另一个是美国公司的研究中心。1996年之后交互设计进入了提高期，人机交互的研究重点放到了智能化交互，多模态(多通道)-多媒体交互上面，人机协同交互以及虚拟交互等方面，而近十年来国内许多公司在进行产品设计时也开始越来越注重界面交互设计，像中国移动公司，投入了两年多时间创建了一支包括交互设计、图形设计、可用性测试等30多人的队伍。那个时候用户体验这件事还没有兴起，很多公司甚至都还没有交互设计师这样的一个岗位，交互设计师的事情基本上是由产品经理或者视觉设计师在做，但是也就从那个时候开始，交互设计师开始渐渐走上了舞台。本来按这个趋势发展在08年~09年就应该进入爆发阶段，但是由于受到了一些外界因素的影响，导致它真正地爆发是在2010年，那个时候用户体验这个概念已经吹有点被言过其实了，但是当然这个是一个新兴行业发展的必然阶段。这个时期一直持续到了2011年，甚至到2012年的上半年这个形势仍然是比较7浙江科技学院信息与电子工程学院本科毕业设计(论文)8第3章产品设计过程二、微信吸引客户的一个最大的特点应该就是它是免费的。微信完全免费，QQ已存在的通讯录网络，可以免去自己在培养用户的同时，再去发展一张用户的智能手机普及率已达35%。所以，微信前景广阔。浙江科技学院信息与电子工程学院本科毕业设计(论文)9迫使发布者需要以非常精炼的方式表达自己的观点，这在信息泛滥、工作繁忙、注他，注意他的观点。让自己的观点拥有忠实的听众，会使用户心情非常愉悦。心理?联网上出现了越来越多风格、内容、营销手段等都十分相似的微博网站。而且，(移动运营商付费，而不是向微博网站),使得大部分商家仍在观望。浙江科技学院信息与电子工程学院本科毕业设计(论文)明回到家觉得很无聊，就打开软件看看小区其他居民今天在干什么,正在看着发去吃，又不知道吃什么,吃完饭想去做美容理发，然后去运动健身，于是打开软浙江科技学院信息与电子工程学院本科毕业设计(论文)主页发帖周边商束2用户需要查看大图片，所以默认展示缩略图，点击缩略图可以查看大图t写元极y四加是建体例通取k图3-2草图1首页的草图，四个基本功能模块的界面。浙江科技学院信息与电子工程学院本科毕业设计(论文)和和边L第碎而u网生的w8-*议能确我的社区，以及设置页面的草图设计。在正式设计时需要一个规范的流程需求分析任务分析视觉改进浙江科技学院信息与电子工程学院本科毕业设计(论文)低保真原型是在设计初期帮助我们验证想法的粗略表述不同于高保真原型，低保真原型的目的是要让用户清楚明白我们的i型昂发。这种方法在于帮助浙江科技学院信息与电子工程学院本科毕业设计(论文)图△△图△△D名学国评论容评论容夏長四A夏>0Ω图3-6低保真简单设计图浙江科技学院信息与电子工程学院本科毕业设计(论文)第4章交互设计相关技术周边商家搜索二手市场发帖的副本办事流程4问题咨询免打扰关于黑名单分享发帖社区资讯我的社区我的发布我的回复消息中心通知登录我的社区未登录浙江科技学院信息与电子工程学院本科毕业设计(论文)图4-2便民服务页面这个界面包含了周边商家、检查维修、社区号码、问题咨询、办事流程、二手市场六个功能模块。底部导航栏的四个板块便民服务、社区论坛、社区资讯以及我的社区可以看出这个App的大致功能。浙江科技学院信息与电子工程学院本科毕业设计(论文)地址2000米支学院东门小米餐厅如图4-3这个界面主要展示小区附近一些商家的信息，方便小区居民生活。居民可以通过这个页面通过距离选择来选择自己喜欢的商家，减少很多不必要的搜素豪大大鸡排搜索页面用户可以搜索自己想要的信息。检查维修物业电话填写维修信息联系方式检查维修页面是居民和物业联系的重要功能，用户可以在这里写下自己的维浙江科技学院信息与电子工程学院本科毕业设计(论文)小区名图4-6二手市场浙江科技学院信息与电子工程学院本科毕业设计(论文)西亮社区有自乙的手加APP了第”等你加入!5个幼儿急救知识回这个页面主要展示一些发生在社区的实时新闻，可以让居民及时了解社区发生的事。图4-8我的社区浙江科技学院信息与电子工程学院本科毕业设计(论文)十十图4-9社区论坛4.2涉及到的部分交互设计技术浙江科技学院信息与电子工程学院本科毕业设计(论文)置。Case:设置文字值的值为空值，并显示search-tip。If:search-box的文字值不为空值。添加失去焦点事件：Case:隐藏search-tip,并设置文字值的值为[请输入关键词]。2、输入超过7个字符时隐藏列表。3、对列表中的关键词添加鼠标移入背景高亮的效果，同时用高亮效果的关键词用一个动态面板来做一个输入联想的列表，命名为search-list,设为隐藏，并在其中添加10个文字面板并依次命名为list-1～list-10。Case:显示search-list,将焦点上的文字的值赋值给变量searchbar,并逐个设置将list-1～list-10的文字部件替换为该变量，格式改为类[[searchbar]]小米×,浙江科技学院信息与电子工程学院本科毕业设计(论文)号设置文字于list-7=“[lsearchbar]小米5”号设置文字于list-9=Tlsearchbar]小米7”设置文字于list-10=“[[searchIf:search-box的指长度值>7Case:隐藏search-liIf:search-box的文字部件为空值。Case:隐藏search-list。添加失去焦点事件：If:search-box的文字部件为空值。Case:隐藏search-list。浙江科技学院信息与电子工程学院本科毕业设计(论文)recover_tp号障微search-lst下方添加10个动态面板来做为高亮的背景，状态设置为对list-1～list-10添加鼠标输入事件：Case:隐藏listbg-1～listbg-10。用Rectangle控件长宽设置与search-box一致，边框改为绿色，背景色调为透明，放置在一个动态面板中,命名为search-none,设为隐藏，并将位置微调至与search-box重合。闪烁效果可以利用展示面板事件的Animate属性来If:search-box的文字部件为空值or为请输Case:显示search-none,隐藏search-none,再显示search-none,再隐藏search-none,并将每一次的动画属性淡入淡出时间设为500ms。浙江科技学院信息与电子工程学院本科毕业设计(论文)1在组件库中拖出Image组件，右键转换为动态面板，然后添加轮播的三个状态在这三个状态中添加轮播需要的图片。3为ImagesFrame添加OnPanelSateChange的事件用例，然后添