毕业论文范文——交互设计技术的分析_第1页
毕业论文范文——交互设计技术的分析_第2页
毕业论文范文——交互设计技术的分析_第3页
毕业论文范文——交互设计技术的分析_第4页
毕业论文范文——交互设计技术的分析_第5页
免费预览已结束,剩余31页可下载查看

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

浙江科技学院信息与电子工程学院本科毕业设计(论文)摘要随着互联网不断地发展,对人们的生产生活都产生了深远的影响。特别是移动互联网的快速发展,人们越来越依赖移动手机端对生活带来的便捷。人们越来越习惯于用手机购物,查询路线,寻找美食等。其中影响范围最广的就是社交类软件。这类软件的“用户粘度”最高,用户忠诚度最强。良好的交互设计必将带来更高的用户粘性。因此,交互设计在软件中的重要性不言而喻,各类软件应更加注重交互设计。缺乏交互性的产品是没有生命力的。让软件除了美观更具可用性,让用户有更好的体验,是用户更满意,从而提高软件的商业价值,是交互设计的目标。现在大街小巷几乎人手一部触屏手机,而触屏手机本身就是交互性产品,交互的本质就是“响应”,当用户使用产品的时候往往希望可以第一时间得到反馈。而市面上很多设计精美的产品却缺少好的交互体验,这类产品往往会很快被用户淘汰。还有不少软件重技术忽略交互的,这类软件通常有强大的功能能满足用户多方面的需求,但是没有好的交互体验,其实这同样是留不住用户的。论文通过对交互设计技术的分析,结合实际需求,对软件进行原型设计,建模等方式改进软件的界面的交互性。此过程中结合了对几个社区类APP的体验,去糙取精、最后整合优秀的交互方式到自己设计中。论文的成果着重提出产品不应只注重界面精美,更重要的是交互行为。而这一行为始终要以用户为中心,要对用户有深入的理解,及时了解用户需求。关键词:交互设计;界面;社交软件ABSTRACTWith the development of the Internet constantly, both production and living of people produced profound influence. Especially the rapid development of mobile Internet, people are becoming more and more dependent on the mobile end of life is convenient. People are becoming more and more accustomed to using a mobile phone shopping, query route, looking for food, etc. The influence scope is one of the most widely social software. This software has the highest user viscosity, strongest user loyalty. Good interaction design is bound to lead to higher user viscosity. Therefore, interaction design is very important in the field of software, all kinds of software should pay more attention to interaction design. There is no vitality of the lack of interactive products. Streets with nearly a touch screen mobile phone now, and touch screen mobile phone itself is product of interactivity, the nature of the interaction is a response, when users use the product often hope can get feedback in the first place. And many well-designed products on the market is a lack of good interaction experience, this kind of product will often quickly eliminated by the user. There are a lot of software technology to ignore interaction, this software usually has powerful functions can meet the various needs of users, but there is no good interaction experience, actually this is also do not leave the user. Based on the analysis of interaction design technology, combined with the actual demand, to the prototype design of software, modeling methods such as improving the software interface interaction. The process combines the experience of several community type of APP, to take fine, finally integrate outstanding interact in their own design. Results of thesis emphasizes products should not only pay attention to the elegant interface, more important is the interaction behavior. But this behavior is always to the user as the center, to the user has a deep understanding of and understand the user requirements in a timely manner. Keywords: Interaction design; interface; social software目录摘要IABSTRACTII目录III第1章 引言11.1 背景11.2 研究内容及拟解决问题1第2章 工具软件与交互设计发展52.1开发环境和工具52.2 交互设计概念与发展52.2.1 交互设计的概念52.2.2 交互设计的发展6第3章 产品设计过程83.1 同类竞争产品分析83.2 交互设计流程103.2.1确定场景103.2.2 定义功能103.3.3交互界面设计时应注意的点113.3 手绘草图113.4 软件流程图143.5 低保真15第4章 交互设计相关技术174.1软件相关界面174.2 涉及到的部分交互设计技术244.2.1 搜索框244.2.2 图片轮换284.2.3 滑动列表284.2.4登录/注册28第5章 课题总结30致谢31参考文献32IV第1章 引言1.1 背景随着移动互联网时代的到来,这场数字化革命给人类社会带来了很多变化。从当年苹果公司推出Iphone,又在次年推出ipad,这两种可以算革命性的移动数码产品在很大程度上改变了人们过去与互联网沟通方式,真正实现了随时随地的无障碍移动互联。现在,人们对于智能手机的功能要求越来越高,已经演变的无法满足以前单单通话、查找、上网、社交的这些基本功能,人们越来越想可以在这些移动设备上可以做更多的事。近几年来,由于移动互联网服务的发展,以及消费者对手机产品的体验越来越追求完美,使得手机软件界面交互设计显得更加重要。各大企业在推出一个新的APP的时候也越来越多的把交互作为软件是否会受欢迎的一个重要考量。但是很多国内的企业才刚刚明白到人机交互体验的重要性,而很多由于不看重而导致的用户体验问题已经接二连三的出现了,例如交互界面布局混乱繁杂,用户无从下手操作;界面图形与色彩的搭配及其不当,造成用户眼花缭乱找不到需要的目标信息等,随着手机界面交互方面的需求和设计的飞速发展,我们研究怎么样将交互设计的理念应用于手机产品设计中,分析各项交互元素,研究手机产品的界面交互设计方法,就显得尤为重要和迫切。从用户角度来说,交互设计是一种可以让产品好用并且有效的技术,它的目标是为了理解用户的愿望,了解用户在使用产品交互时对方的行为,了解使用者本身的心理和行为,同时,还包括掌握各种有效的交互方式,并对它们进行加强和扩大。交互设计还包含到很多学科,以及和各领域各背景人员的沟通交流。交互设计的目的包括,有用性,易用性和吸引性的设计和改善。交互设计就是要提供丰富,全面,自然的信号,这是针对目前新型交互界面传递重要紧急的信息。通过对产品的界面和各种行为的交互设计,在产品和它的使用者之间建立一种良好的关系,从而有效达到使用者的目的。1.2 研究内容及拟解决问题本课题研究的基本内容是社交类app交互设计。该App采用photoshop和axture作为开发工具。在研究过程中着重与界面的视觉的效果,与用户体验。交互设计以用户为中心的理念会贯穿整个产品。该APP的功能是希望生活在社区中的居民在这个APP上进行社交活动,从而可以结识到本社区的居民。因为生活在同个小区,生活环境相同,自然可以衍生出很多共同语言,进而及时是在网上认识,但在线下见面时也不会尴尬反而更加亲近。在设计师设计界面的时候,更多的考虑用户的心理使用习惯,是设计师的设计符合用户的期望。所以交互设计不同于以往的传统设计,设计师既要考虑现在的设计流行趋势又要满足用户的需求。所以我们的设计模式应该更加多元化。正因为交互设计更多考虑用户,所以我们在设计产品的时候,首先要调查用户对产品交互的需求,尽可能的对一些潜在用户做充足的调查,以此来增加产品的易用性和可用性。二任务分析,从产品和用户这两方面入手,进行系统交互任务分析,之后进行各部分的功能分析,详细绘制数据流程图,并勾画出任务流程图和任务列表。三使用环境分析,判断用户在什么环境下会使用你的软件,设计出最合适那种环境的交互方式,预计交互的复杂程度。四绘制草图,根据以上判断设计初步草图,在绘制草图的时候,考虑屏幕布局与显示设计,在设计界面显示元素的时候应该按照一下不走:1、按系统分析的结果,确定信息输入和输出的要求和内容等。 2、进行屏幕和窗口的层级结构设计。 3、根据用户的特征,确定界面上各交互元素显示的位置和层次。 4、充分考虑提示,出错和帮助等信息。 5、进行多次测试,如果发现什么不合适之处或者出错的地方,进行重新设计和修改。五完成草图后进行原型设计,原型设计是交互设计中最重要的一步,在设计的过程中运用原型被称为原型设计。在整个前期的交互设计流程图之后,就是原型的开发设计阶段,简单来说就是将页面元素、布局模块、人机交互的模式,利用简单的线框语言,将产品在脱离实际生活的状态下可以用一种更加具体跟生动的方式进行表达。产品的原型概括起来可以说是整个产品在面市之前的一个框架设计。原型设计能够帮助设计师更加深入的理解用户需求,并通过设计满足用户功能和体验这两方面的需求。六、交互设计的测试和评估标准,通过完善的评估测试我们可以发现产品交互设计中的不足从而可以进一步改正。我们可以从以下方面来评估交互设计是否优化:1、界面布局结构的清晰度: 没有没必要的层级,目录层级清楚分明,精简;能够快速浏览到界面的主要功能; 所有功能都在界面可以快速找到2 、产品流程的清晰度,表现层级简单,明确,无不必要的分流,其流程清晰度的评估标准有: 主要任务流程明确 ; 使用流程符合用户的操作习惯 ;用户可以随时取消正在进行的操作 ;对用户的所有操作要有明确的消息反馈 ;用户可以快速返回上一级 ;要有好的交互引导和帮助。 3 、正确的使用控件,产品会涉及到很多控件,比如一级标签栏,二级标签栏,对话框,按钮,提示框,警告框等等,这些控件是否使用到位,对于控件使用是否精准有以下这些评估标准: 使用控件的精准性(比如混淆了复选框和单选框) 控件的重复使用(比如两个列表框都用到了table ,就不用设计两个) 控件的状态(比如是否可点,可选状态是否有显示) 4 、准确的信息转达,信息的转达包括文字布局,按钮设计,内容排列,提醒设计等。提示文字需要内容精准,信息传要达的有效,这些都是衡量交互设计的标准。 当人们在初次浏览到社交APP时,可以感受到 APP 界面想要传达给用户的所有丰富情感,进而引起用户的共鸣。在使用过程中同样会产生如好玩,实用,创新的使用感受。在 APP界面的整体情境氛围中,它情感的延伸可以维系对 APP 的长久关注,并形成长久的精神寄托。社交类 APP 的界面设计发展到现在,不再仅仅停留在是功能上的完善,已经逐渐在满足用户的情感需求,摆脱一些陈旧的设计理念,力求从整体上带给用户更加轻松的社交氛围以及更愉悦的用户体验。一些拟解决的问题:1、这个APP面向的用户群是怎样的,这些用户的共同点是什么。这个APP主要是满足怎样的需求的。2、用户在什么情况下下载了这个APP,在使用之前的预期是怎样的,我希望通过它得到什么。3、第一次使用,用户会对这个APP的印象是什么,为什么觉得它好。并且可以梳理一下用例、界面设计规范、体验设计规范等等。第2章 工具软件与交互设计发展2.1开发环境和工具开发环境:WIN7工具:Microsoft Visio 2010:是一款便于IT人士和商务专业人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。Balsamiq Mockups是一种软件工程中快速原型的建立软件,可以做为与用户交互的一个界面草图。Balsamiq Mockups是美国加利福利亚的Balsamiq工作室(2008年3月创建)推出的原型图绘制软件。于2008年6月发行了第一个版本。它的使命是帮助人们更好、更容易的设计软件产品。Axure RP是一个专业的快速设计原型工具。让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。2.2 交互设计概念与发展2.2.1 交互设计的概念对于交互设计Alan Cooper有个经典定义:简单来说,交互设计就是人工作品、环境和系统的一种互动行为,以及传达这种行为的外观因素的设计和定义。其实所谓的交互设计,指的是设计师对产品和产品的使用者之间的互动机制进行的预测、描述、规划、定义、分析和探索的一个过程。其实就是说,设计和定义使用者如何使用同一产品达到他们各自的目标,完成某一项任务的过程。交互设计是指设计人和产品以及服务互动的一种机制 , 它是以用户体验为基础而进行的人机交互设计,要具体衡量使用者的背景、使用经验以及在操作的过程中的各种感受,这样才可以设计出符合用户的最终产品,使得最终用户在使用产品时能感受到愉悦、符合自己的逻辑、并且对他们而言是高效的产品。交互设计的目的是使产品让用户能简单使用。它是一种以目标为导向的设计,所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为,让用户更方便更有效率的去完成自我需求。Jennifer Preece,Helen Sharp,Yvonne Rogers在他们的交互设计一超越人机交互这本书中将交互设计定义为:设计是支持人们正常工作与生活的交互式产产品。Winograd把交互设计描述为“是人类交流和交互空间的设计”。2.2.2 交互设计的发展交互设计作为一门关注交互体验项目的新学科产生于二十世纪八十年代,它由IDEO的一位创始人比尔摩格理吉(BillMoggridge)在1984年一次设计会议上提出,他一开始把它命名为“软面(SoftFace)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(CabbagePatchdoll)”的名字,后来把它更名为“InteractionDesign”,即交互设计。初创期(1929年-1970年),提出基础理念与定义。奠基期(1970年-1979年)从1970年到1973年出版了四本与计算机相关的人机工程学专著。1970年成立了两个HCI研究中心:一个是英国的Loughboough大学的HUSAT研究中心,另一个是美国公司的研究中心。1996年之后交互设计进入了提高期,人机交互的研究重点放到了智能化交互,多模态(多通道)-多媒体交互上面,人机协同交互以及虚拟交互等方面,也就是“以人为中心”的人机交互技术方面。而近十年来国内许多公司在进行产品设计时也开始越来越注重界面交互设计,像中国移动公司,投入了两年多时间创建了一支包括交互设计、图形设计、可用性测试等30多人的队伍。那个时候用户体验这件事还没有兴起,很多公司甚至都还没有交互设计师这样的一个岗位,交互设计师的事情基本上是由产品经理或者视觉设计师在做,但是也就从那个时候开始,交互设计师开始渐渐走上了舞台。本来按这个趋势发展在08年09年就应该进入爆发阶段,但是由于受到了一些外界因素的影响,导致它真正地爆发是在2010年,那个时候用户体验这个概念已经吹有点被言过其实了,但是当然这个是一个新兴行业发展的必然阶段。 这个时期一直持续到了2011年,甚至到2012年的上半年这个形势仍然是比较好的,从2012年下半年左右开始,整体经济增速放缓的影响,慢慢地人们发现这个行业发展的太快产生了泡沫,所以从这个时期开始,整个用户体验行业是在开始降温的,交互设计师已经不再那么抢手。 现阶段行业已经进入慢速发展时期,很多公司都在尽量控制交互设计师的数量,这也是和整体经济发展适应的。第3章 产品设计过程3.1 同类竞争产品分析目前最流行的社交软件当属QQ、微信和微博。一、QQ是一种基于熟人圈子的社交软件。由于移动QQ几乎完美继承了完整版QQ所有的特点,因此可以将其看做是QQ在移动通讯工具上的变体形式。初期QQ曾经尝试基于陌生人社交来进行业务的开拓与壮大:陌生人的条件查询、视频用户查询、QQ群查询等方式都有涉猎,在抢占大量的市场的同时,也为单对单的IM交流工具加入了社交元素。但是随着互联网业务的不断发展,QQ也变得越来越多元化与生活化,其导致结果就是现在它更多是的作为一种基本的沟通与交流工具,使得其逐渐变成了熟人之间的社交方式,从而减弱了陌生人之间的社交。因此,虽然QQ能够满足人们日常生活的使用需求,但无法满足人们日常生活的社交需求。二、微信吸引客户的一个最大的特点应该就是它是免费的。微信完全免费,使用任何功能都不会收取费用,在使用微信时产生的上网流量费是由网络运营商收取的。而且微信对讲不存在距离的限制,即使是你有在国外的朋友,也可以一起使用微信对讲。微信采用的是云技术,如果你只浏览文字、图像、视频、语音信息,而不下载,对流量的使用是远小于飞信,十几M流量就可以发送几千条“微信”,而“微信”好友可以通过QQ号码和手机号码来登录界面的,不受运营商的限制。QQ 毋庸置疑拥有一张全世界互联网公司都羡慕不已的关系网络,微信借助QQ已存在的通讯录网络,可以免去自己在培养用户的同时,再去发展一张用户之间的关系网的成本,而是直接借助这张网去辐射用户。同时,接受QQ消息、QQ邮箱的直接推荐等方式,直接推动了微信的成长速度。手机无疑已经成了一个的大机会。和PC相比,手机已经更像是用户身体的一部分,而不仅仅只是工具,这就意味着手机能够对用户形成更强大的粘性。微信的用户主要集中在安卓系统和IOS系统,都属于智能系统中国城市居民的智能手机普及率已达35%。所以,微信前景广阔。三、中国已经有包括新浪微博、腾讯微博、网易微博、搜狐微博等几家微博,但国内比较具有正式意义的微博最开始是新浪微博,它的功能和知名度都高于其他微博,所以这里重点谈新浪微博。微博作为新媒体营销中的一种重要类型,虽然才刚刚产生不久,可以说是初出茅庐,但是就其发展来看,微博已经开始显露出区别于传统媒体,同时也区别于其他新媒体营销的特点:操作简单、传播快捷、沟通及时、交互性强大、成本低廉、受众广泛、针对性强等。而恰恰正是这些特点使得它对于企业的营销价值也日益显现。它的优点非常明显:其一,微博限制每条内容的字数不得超过140字,这就迫使发布者需要以非常精炼的方式表达自己的观点,这在信息泛滥、工作繁忙、标题党流行的当下非常具吸引力。其二,微博话题广泛,粉丝们有足够的内容可以根据自己的兴趣和偏好来选择。其三,微博具有定向的特点,粉丝可以选择自己喜欢看的博主。其四,微博具有互动性,粉丝们的回帖让发布者知道有人在关注他,注意他的观点。让自己的观点拥有忠实的听众,会使用户心情非常愉悦。其五,微博内容发布简便:可以通过手机网络以发短信、彩信的方式更新,当然也可以通过电脑更新。但是同时微博也有不少缺点。信息冗余,有价值的信息不多。文本碎片化给微博带来了传播的优势,但信息不成系统、短小、无标题往往会造成信息的无组织现象。这令人不得不担忧微博用户今后是否会对这些信息产生厌倦甚至排斥的心理?第二,信息量过大难于管理。由于在微博上发表内容极为简单方便,加上其分享、转发的功能,让每一条消息都能迅速扩散。对于微博运营者来说,如何管理海量信息是一个很大的挑战。除了以往的关键字筛选之外,微博势必需要采用一些新的管理技术。第三,影响力不强,同质化严重。创建微博网站起点相对较低,近几年互联网上出现了越来越多风格、内容、营销手段等都十分相似的微博网站。而且,这些微博网站目前影响力也不大。第四,微博的盈利空间面临着困难。微博在国内外的狂热发展虽吸引了很多商家的关注,被认为有捞一桶金的潜力,但它在客服上移动运营商的暧昧关系(移动运营商付费,而不是向微博网站),使得大部分商家仍在观望。3.2 交互设计流程3.2.1确定场景场景实际上指的是交互所发生应用场景,简单的来讲,就是:什么人在什么情况下、从事什么工作、要达到什么目的。所有的设计都是基于场景的需求。这个场景决定人们比较信任身边的事物,比较在意对方的评论。这个软件是针对生活在同个小区的小区居民设计的,设想情景“小区居民小明回到家觉得很无聊,就打开软件看看小区其他居民今天在干什么,正在看着发现家里的水管漏水了,马上在软件上的物业维修单上填写了问题,不一会就有物业人员来修了。”以此总结1用户的典型使用环境是家里,休闲时间,而不是公交车、走路的时候。所以交互上可以更从容一些。2用户可能经常需要单手操作,因为另一只手需要端茶杯看书等。3因为是社交软件,所以要有论坛发帖的地方。4因为用户是社区居民,是处于熟人和陌生人之间的领域,所以要注意隐私。5需要有个让用户填写维修单的地方。换个场景,“小区居民小红周末在家休息,想吃东西又不想自己做,就想出去吃,又不知道吃什么,吃完饭想去做美容理发,然后去运动健身,于是打开软件找了家离这两个地方都近的餐馆去吃了饭。”这个场景可以得到:1 用户需要自己生活的小区的周边商家信息。2 用户可能会为了找商家而在路上使用软件。3.2.2 定义功能根据场景描述以及需求描述,定义出软件应该实现的功能,如图,此软件主要功能分为四大模块:便民服务、社区论坛、社区资讯和我的社区。此后再加上一些子页面。该流程图形象生动的表现了软件逻辑走向,更清晰的表现了软件的层级关系。 图3-1 功能图3.3.3交互界面设计时应注意的点交互界面设计时应注意的点:1因为用户需要看到论坛大量内容,所以使用瀑布流的方式,手指上下滑动即可展示内容2用户需要查看大图片,所以默认展示缩略图,点击缩略图可以查看大图3用户需要看到社区时事新闻,所以这一块应该放在首页4用户生活在小区,除了物业维修,周边商家信息也要展现 3.3 手绘草图在正式设计软件页面时,先通过草图来理清思路,帮助创意开发图3-2 草图1首页的草图,四个基本功能模块的界面。图3-3 草图2子页面的展现。图3-4 草图3我的社区,以及设置页面的草图设计。3.4 软件流程图在正式设计时需要一个规范的流程图3-5 社区app流程图3.5 低保真低保真原型是在设计初期帮助我们验证想法的粗略表述不同于高保真原型,这种方式只需更少的时间、专业技能和资源。低保真原型的目的是要让用户清楚明白我们的i型昂发。这种方法在于帮助我们倾听而不是说服。它使用户需求与设计师意图以及其它利益相关者的目标之间能够有效沟通并达成一致。图3-6 低保真简单设计图第4章 交互设计相关技术4.1软件相关界面图4-1 整体界面展示如图4-1展示是原型图的整体页面,由这些页面可以大致了解整个软件的结构。下面展示部分图形界面:图4-2 便民服务页面这个界面包含了周边商家、检查维修、社区号码、问题咨询、办事流程、二手市场六个功能模块。底部导航栏的四个板块便民服务、社区论坛、社区资讯以及我的社区可以看出这个App的大致功能。图4-3 周边商家如图4-3这个界面主要展示小区附近一些商家的信息,方便小区居民生活。居民可以通过这个页面通过距离选择来选择自己喜欢的商家,减少很多不必要的麻烦。图4-4 搜索搜索页面用户可以搜索自己想要的信息。图4-5 检查维修检查维修页面是居民和物业联系的重要功能,用户可以在这里写下自己的维修信息及时让物业了解,以方便维修。图4-6 二手市场二手市场分转让和求购两个板块,方便居民交流,而且因为居民都生活在同个小区,他们对物品感兴趣的话可以直接到现场观看评价,可以省掉中间很多手续。图4-7 社区资讯这个页面主要展示一些发生在社区的实时新闻,可以让居民及时了解社区发生的事。图4-8 我的社区个人中心,用户可以查看一些个人消息,修改个人信息等。图4-9 社区论坛这一页面用户可以发帖晒自己的日常生活,加多与邻居的交流沟通,参加一些邻里间的交流活动等。4.2 涉及到的部分交互设计技术4.2.1 搜索框一、搜索提示要出现的效果:1、用Lable对主要的控件作命名:搜索框命名为search-box联想列表命名为search-list,在联想列表显示“请输入关键词”的提示文案。2、当焦点触发时搜索框里提示文案的颜色要由深转淡。3、输入开始时提示文案消失。4、没有输入内容而且鼠标离开时提示文案恢复。对 search-box 设置好初始的文案, 由于 Text Field 控件中的文案在文字替换时不支持代入颜色,所以这里用一个动态面板来存放焦点触发时颜色转变后的文案,给它命名为 search-tip,设为隐藏,并将它叠加到与初始文案重合的位置。然后添加焦点事件:If:search-box 的部件原件为请输入关键词。Case:设置文字值的值为空值,并显示 search-tip。添加键盘事件:If:search-box 的 文字值不为空值。Case:隐藏 search-tip。添加 失去焦点事件:If:search-box 的文字值为空值。Case:隐藏 search-tip,并设置文字值的值为请输入关键词。二、输入联想的效果:1、当输入搜索关键词时模拟显示与当前输入相匹配的关键词列表。2、输入超过 7 个字符时隐藏列表。3、对列表中的关键词添加鼠标移入背景高亮的效果,同时用高亮效果的关键词替换当前输入的内容。用一个动态面板来做一个输入联想的列表,命名为 search-list,设为隐藏,并在 其中添加 10 个文字面板并依次命名为 list-1 list-10 。对 search-box 添加键盘输入事件:If:search-box 的文字值不为空值。Case:显示 search-list,将 焦点上的文字的值赋值给变量 searchbar,并逐个设置将 list-1 list-10 的文字部件 替换为该变量,格式改为类searchbar小米,以模拟实际效果。图4-11If:search-box 的指长度 值 7Case:隐藏 search-list。If:search-box 的文字部件为空值。Case:隐藏 search-list。添加 失去焦点事件:If:search-box 的文字部件 为空值。Case:隐藏 search-list。Else If:search-box 的文字部件不为空值。Case:隐藏 search-list。完整事件:图4-12在 list-1 list-10 下方添加 10 个动态面板来做为高亮的背景,状态设置为隐藏,依次命名为 listbg-1 listbg-10 。对 list-1 list-10 添加鼠标输入 事件:Case:显示 listbg-1 listbg-10,并用当前 list-1 list-10 的文字部件值替换 search-box 的文字部件值。对 list-1 list-10 添加鼠标移出事件:Case:隐藏 listbg-1 listbg-10。三、输入为空的提示效果:1、点击按钮后搜索框闪烁绿色边框。用 Rectangle 控件长宽设置与 search-box 一致,边框改为绿色,背景色调为透明,放置在一个动态面板中 ,命名为 search-none,设为隐藏,并将位置微调至与 search-box 重合。闪烁效果可以利用 展示面板事件的 Animate 属性来实现。为按钮添加 OnClick 事件:If:search-box 的文字部件为空值 or 为请输入关键词Case:显示 search-none,隐藏 search-none,再显示 search-none,再隐藏 search-none,并将每一次的 动画属性淡入淡出时间设为 500 ms。4.2.2 图片轮换1 在组件库中拖出Image组件,右键转换为动态面板,然后添加轮播的三个状态在这三个状态中添加轮播需要的图片。2 然后为ImagesFrame事件添加加载事件。3 为ImagesFrame添加OnPanelSateChange的事件用例,然后添加有限制的条件,用来保障ImagesFrame的状态与添加的小圆点可以相对应。4.2.3 滑动列表1 新建一个动态面板,两个热区。动态面板命名为菜单滑动,两个热区命名为re1和re2。2 在第二个动态面板里再添加一个动态面板,命名为移动(动态面板)长度根据滑屏需要来。3 在移动动态面板中放上你需要的内容 ,置后在移动动态面板上编辑用例 图4-144 滑动的范围由部件范围来确定4.2.4登录/注册1 拖两个文本框出来分别命名为name_login和pwd_login2 新建一个动态面板命名为login_pop,里面包括两个状态,状态1和状态2。3 写逻辑关系用例,当文本框内为空是提示错误消息,当两个都不为空是,登录成功,逻辑关系如下:图4-15第5章 课题总结本次软件交互原型设计,具有自身的特色和创新之处。首先,本软件旨在增强邻里间的交流互动与传统社交软件不同;其次,软件在交互模式设计上,紧紧的抓住了用户体验这一重要关键点。以用户为中心,通过分析设计,再分析再设计的过程,反复更正。尤其运用大量篇幅对其他软件进行了对比研究,使交互设计更加切合用户体验的实际;第三,软件运用了大量现在正流行的交互模式,给用户给流畅的体验。但是,也能清楚了解到在本次设

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论