1、浙江科技学院信息与电子工程学院本科毕业设计（论文）I摘要随着互联网不断地发展，对人们的生产生活都产生了深远的影响。特别是移动互联网的快速发展，人们越来越依赖移动手机端对生活带来的便捷。人们越来越习惯于用手机购物，查询路线，寻找美食等。其中影响范围最广的就是社交类软件。这类软件的“用户粘度”最高，用户忠诚度最强。良好的交互设计必将带来更高的用户粘性。因此，交互设计在软件中的重要性不言而喻，各类软件应更加注重交互设计。缺乏交互性的产品是没有生命力的。让软件除了美观更具可用性，让用户有更好的体验，是用户更满意，从而提高软件的商业价值，是交互设计的目标。现在大街小巷几乎人手一部触屏手机，而触屏手机本身
2、就是交互性产品，交互的本质就是“响应” ，当用户使用产品的时候往往希望可以第一时间得到反馈。而市面上很多设计精美的产品却缺少好的交互体验，这类产品往往会很快被用户淘汰。还有不少软件重技术忽略交互的，这类软件通常有强大的功能能满足用户多方面的需求，但是没有好的交互体验，其实这同样是留不住用户的。论文通过对交互设计技术的分析，结合实际需求，对软件进行原型设计，建模等方式改进软件的界面的交互性。此过程中结合了对几个社区类APP的体验，去糙取精、最后整合优秀的交互方式到自己设计中。论文的成果着重提出产品不应只注重界面精美，更重要的是交互行为。而这一行为始终要以用户为中心，要对用户有深入的理解，及时了解
3、用户需求。关键词：交互设计；界面；社交软件浙江科技学院信息与电子工程学院本科毕业设计（论文）IIABSTRACTWith 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 con
4、venient. 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
5、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 m
6、obile 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 el
7、iminated 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
8、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. Res
9、ults 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: Int
10、eraction design; interface; social software浙江科技学院信息与电子工程学院本科毕业设计（论文）III目录摘要 .IABSTRACT .II目录 .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 交互界面设计
11、时应注意的点 .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浙江科技学院信息与电子工程学院本科毕业设计（论文）IV参考文献 .32浙江科技学院信息与电子工程学院本科毕业设计（论文）1第 1 章 引言1.1 背景随着移动互联网时代的到来，这场数字化革命给人类社会带来了很多变化。从当年苹果公司推出Iphone ，又
12、在次年推出ipad ，这两种可以算革命性的移动数码产品在很大程度上改变了人们过去与互联网沟通方式，真正实现了随时随地的无障碍移动互联。现在，人们对于智能手机的功能要求越来越高，已经演变的无法满足以前单单通话、查找、上网、社交的这些基本功能，人们越来越想可以在这些移动设备上可以做更多的事。近几年来，由于移动互联网服务的发展，以及消费者对手机产品的体验越来越追求完美，使得手机软件界面交互设计显得更加重要。各大企业在推出一个新的APP的时候也越来越多的把交互作为软件是否会受欢迎的一个重要考量。但是很多国内的企业才刚刚明白到人机交互体验的重要性，而很多由于不看重而导致的用户体验问题已经接二连三的出现了
13、，例如交互界面布局混乱繁杂，用户无从下手操作；界面图形与色彩的搭配及其不当，造成用户眼花缭乱找不到需要的目标信息等，随着手机界面交互方面的需求和设计的飞速发展，我们研究怎么样将交互设计的理念应用于手机产品设计中，分析各项交互元素，研究手机产品的界面交互设计方法，就显得尤为重要和迫切。从用户角度来说，交互设计是一种可以让产品好用并且有效的技术，它的目标是为了理解用户的愿望，了解用户在使用产品交互时对方的行为，了解使用者本身的心理和行为，同时，还包括掌握各种有效的交互方式，并对它们进行加强和扩大。交互设计还包含到很多学科，以及和各领域各背景人员的沟通交流。交互设计的目的包括，有用性，易用性和吸引性
14、的设计和改善。交互设计就是要提供丰富，全面，自然的信号，这是针对目前新型交互界面传递重要紧急的信息。通过对产品的界面和各种行为的交互设计，在产品和它的使用者之间建立一种良好的关系，从而有效达到使用者的目的。浙江科技学院信息与电子工程学院本科毕业设计（论文）21.2 研究内容及拟解决问题本课题研究的基本内容是社交类app交互设计。该App采用photoshop和axture作为开发工具。在研究过程中着重与界面的视觉的效果，与用户体验。交互设计以用户为中心的理念会贯穿整个产品。该APP的功能是希望生活在社区中的居民在这个APP上进行社交活动，从而可以结识到本社区的居民。因为生活在同个小区，生活环境
15、相同，自然可以衍生出很多共同语言，进而及时是在网上认识，但在线下见面时也不会尴尬反而更加亲近。在设计师设计界面的时候，更多的考虑用户的心理使用习惯，是设计师的设计符合用户的期望。所以交互设计不同于以往的传统设计，设计师既要考虑现在的设计流行趋势又要满足用户的需求。所以我们的设计模式应该更加多元化。正因为交互设计更多考虑用户，所以我们在设计产品的时候，首先要调查用户对产品交互的需求，尽可能的对一些潜在用户做充足的调查，以此来增加产品的易用性和可用性。二任务分析，从产品和用户这两方面入手，进行系统交互任务分析，之后进行各部分的功能分析，详细绘制数据流程图，并勾画出任务流程图和任务列表。三使用环境分
16、析，判断用户在什么环境下会使用你的软件，设计出最合适那种环境的交互方式，预计交互的复杂程度。四绘制草图，根据以上判断设计初步草图，在绘制草图的时候，考虑屏幕布局与显示设计，在设计界面显示元素的时候应该按照一下不走：1、按系统分析的结果，确定信息输入和输出的要求和内容等。 2、进行屏幕和窗口的层级结构设计。 3、根据用户的特征，确定界面上各交互元素显示的位置和层次。 4、充分考虑提示，出错和帮助等信息。 5、进行多次测试，如果发现什么不合适之处或者出错的地方，进行重新设计和修改。五完成草图后进行原型设计，原型设计是交互设计中最重要的一步，在设计的过程中运用原型被称为原型设计。在整个前期的交互设计
17、流程图之后,就是原型的开发设计阶段,简单来说就是将页面元素、布局模块、人机交互的模式，浙江科技学院信息与电子工程学院本科毕业设计（论文）3利用简单的线框语言，将产品在脱离实际生活的状态下可以用一种更加具体跟生动的方式进行表达。产品的原型概括起来可以说是整个产品在面市之前的一个框架设计。原型设计能够帮助设计师更加深入的理解用户需求，并通过设计满足用户功能和体验这两方面的需求。六、交互设计的测试和评估标准，通过完善的评估测试我们可以发现产品交互设计中的不足从而可以进一步改正。我们可以从以下方面来评估交互设计是否优化：1、界面布局结构的清晰度： 没有没必要的层级，目录层级清楚分明，精简；能够快速浏览
18、到界面的主要功能； 所有功能都在界面可以快速找到2 、产品流程的清晰度，表现层级简单，明确，无不必要的分流，其流程清晰度的评估标准有： 主要任务流程明确 ； 使用流程符合用户的操作习惯 ；用户可以随时取消正在进行的操作 ；对用户的所有操作要有明确的消息反馈 ；用户可以快速返回上一级 ；要有好的交互引导和帮助。 3 、正确的使用控件，产品会涉及到很多控件，比如一级标签栏，二级标签栏，对话框，按钮，提示框，警告框等等，这些控件是否使用到位，对于控件使用是否精准有以下这些评估标准： 使用控件的精准性（比如混淆了复选框和单选框） 控件的重复使用（比如两个列表框都用到了table ，就不用设计两个） 控
19、件的状态（比如是否可点，可选状态是否有显示） 4 、准确的信息转达，信息的转达包括文字布局，按钮设计，内容排列，提醒设计等。提示文字需要内容精准，信息传要达的有效，这些都是衡量交互设计的标准。 当人们在初次浏览到社交APP时，可以感受到 APP 界面想要传达给用户的所有丰富情感，进而引起用户的共鸣。在使用过程中同样会产生如好玩，实用，创新的使用感受。在 APP界面的整体情境氛围中，它情感的延伸可以维系对 APP 的长久关注，并形成长久的精神寄托。社交类 APP 的界面设计发展到现在，不再仅仅停留在是功能上的完善，已经逐渐在满足用户的情感需求，摆脱一些陈旧的设计理念，力求从整体上带给用户更加轻松
20、的社交氛围以及更愉悦的用户体验。一些拟解决的问题：1、这个APP面向的用户群是怎样的，这些用户的共同点是什么。这个APP浙江科技学院信息与电子工程学院本科毕业设计（论文）4主要是满足怎样的需求的。2、用户在什么情况下下载了这个APP，在使用之前的预期是怎样的，我希望通过它得到什么。3、第一次使用，用户会对这个APP的印象是什么，为什么觉得它好。并且可以梳理一下用例、界面设计规范、体验设计规范等等。浙江科技学院信息与电子工程学院本科毕业设计（论文）5第 2 章 工具软件与交互设计发展2.1 开发环境和工具开发环境：WIN7工具：Microsoft Visio 2010:是一款便于IT人士和商务专
21、业人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。Balsamiq Mockups是一种软件工程中快速原型的建立软件，可以做为与用户交互的一个界面草图。Balsamiq Mockups是美国加利福利亚的 Balsamiq工作室（2008年3月创建）推出的原型图绘制软件。于2008年6月发行了第一个版本。它的使命是帮助人们更好、更容易的设计软件产品。Axure RP是一个专业的快速设计原型工具。让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web 网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控
22、制管理 。2.2 交互设计概念与发展2.2.1 交互设计的概念对于交互设计Alan Cooper有个经典定义：简单来说，交互设计就是人工作品、环境和系统的一种互动行为，以及传达这种行为的外观因素的设计和定义。其实所谓的交互设计，指的是设计师对产品和产品的使用者之间的互动机制进行的预测、描述、规划、定义、分析和探索的一个过程。其实就是说，设计和定义使用者如何使用同一产品达到他们各自的目标，完成某一项任务的过程。交互设计是指设计人和产品以及服务互动的一种机制 , 它是以用户体验为基础而进行的人机交互设计，要具体衡量使用者的背景、使用经验以及在操作的过程中的各种感受，这样才可以设计出符合用户的最终产
23、品，使得最终用户在使用产品时能感受到愉悦、符合自己的逻辑、并且对他们而言是高效的产品。交互设计的目的是使产品让用户能简单使用。浙江科技学院信息与电子工程学院本科毕业设计（论文）6它是一种以目标为导向的设计，所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成自我需求。Jennifer Preece，Helen Sharp，Yvonne Rogers在他们的交互设计一超越人机交互这本书中将交互设计定义为：设计是支持人们正常工作与生活的交互式产产品。Winograd 把交互设计描述为“是人类交流和交互空间的设计” 。2.2.2 交互设计的发展交互设
24、计作为一门关注交互体验项目的新学科产生于二十世纪八十年代，它由IDEO的一位创始人比尔摩格理吉（Bill Moggridge ）在1984年一次设计会议上提出，他一开始把它命名为“软面（Soft Face） ”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll） ”的名字，后来把它更名为“Interaction Design” ，即交互设计。初创期（1929年-1970年） ，提出基础理念与定义。奠基期（1970年-1979年） 从1970年到1973年出版了四本与计算机相关的人机工程学专著。 1970年成立了两个HCI研究中心：一个是英国的Loughb
25、oough大学的HUSAT研究中心，另一个是美国公司的研究中心。1996年之后交互设计进入了提高期， 人机交互的研究重点放到了智能化交互，多模态（多通道）-多媒体交互上面，人机协同交互以及虚拟交互等方面，也就是“以人为中心 ”的人机交互技术方面。而近十年来国内许多公司在进行产品设计时也开始越来越注重界面交互设计，像中国移动公司，投入了两年多时间创建了一支包括交互设计、图形设计、可用性测试等30多人的队伍。那个时候用户体验这件事还没有兴起，很多公司甚至都还没有交互设计师这样的一个岗位，交互设计师的事情基本上是由产品经理或者视觉设计师在做，但是也就从那个时候开始，交互设计师开始渐渐走上了舞台。本来按这个趋势发展在08年09 年就应该进入爆发阶段，但是由于受到了一些外界因素的影响，导致它真正地爆发是在2010年，那个时候用户体验这个概念已经吹有点被言过其实了，但是当然这个是一个新兴行业发展的必然阶段。这个时期一直持续到了2011年，甚至到2012年的上半年这个形势仍然是比较
