毕业设计（论文）-个人网站交互式设计

大学本科毕业设计1、前言随着互联网的发展，门户网站的兴起，人们的生活发生了划时代的转变。我们生活的方方面面都已更多的依赖于网络。于是，一种致力于帮用户解决所有网络生活问题的网站出现了个人门户。通过个人门户，用户可以根据个人喜好，自由的添加内容，布局页面.个人门户是互联网发展的必然趋势。我们往往用“用户粘性”这一标准来衡量一个网站设计的成败。而个人门户网站，是用户忠诚度最高的一类网站，良好的交互设计必将带来更高的用户粘性。因此，交互设计在个人门户类网站中的重要性不言而喻，个人门户网站应更加注重交互设计。目前，个人门户类网站层出不穷，但拥有良好用户体验的网站并不很多，很多网站正挣扎在生死存亡的边缘。比较著名的个人门户如，netvibes、I google 等他们都各具特色，拥有自身的亮点，但网站交互及功能上的少许不足也使得他们没有谁可以在个人门户领域站稳脚跟。许多用户同时拥有多个个人门户，网站忠诚度不高，而无数的后来者也紧追不舍，个人门户领域异军突起，如国内的雅蛙、阔地。在这样的形势之下，达不到更好的用户体验，就注定会被用户遗弃、被其他网站取代。因此，本课题主要从获取良好用户体验方面研究个人门户类网站的交互设计。全文正文分为五大篇章：需求分析、功能模块设计、交互设计、竞品分析、界面设计。围绕着建设用户体验的流程顺序，从战略层（需求分析）、范围层（功能模块设计）、结构层（交互设计）、框架层（界面设计）至下而上对网站原型做出了全面的规划、并重点对交互模式进行了设计。此过程同时结合了对几个个人门户网站的体验，去粗取精、最后整合优秀的交互模式于自己设计之中。2.选题意义（背景）在开始每个课题之前，我们都需要有明确的选题意义，拥有能够被清楚表达的选题理由。本课题围绕以下4方面展开分析，确立了以“基于axure的个人门户类网站交互原型设计”为题的研究方向。2.1个人门户网站介绍随着互联网的发展，门户网站的兴起，人们的生活发生了划时代的转变。我们生活的方方面面都已更多的依赖于网络。在日常的工作，学习，生活中，每人每天需要接触不同的网站，点击进入数十个门户。据一项数据调查，目前中国青年层每日平均访问网站数达12个之多，其中涉及新闻类、娱乐类、生活类、交友类等不同类型的门户网站。而同一类型的门户网站,用户可能选择多个进入浏览。正如许多用户会同时拥有“土豆”和“优酷”，光临“天涯社区”之后再去“百度贴吧”等等。正因为要频繁光临不同的网站，花费大量时间，于是，一种致力于帮用户解决所有网络生活问题的网站出现了个人门户。通过个人门户，用户可以根据个人喜好，自由的添加内容，布局页面。用户可以将自己喜欢的网站添加到自己的门户，以后上网浏览信息，再也不需要一个个网站点击进入，甚至在忘记网址的情况下惹得一身烦恼。个人门户网站，就是以个人为中心的上网入口，还可以进一步延伸为个人信息中心。个人门户具备门户的全部特征，同时能够实现个性化定制，实现内容、社区、应用的有机整合。通过个性化的呈现扩展用户利用互联网的能力，节约用户利用互联网的时间成本。互联网的发展，已到了个性化的时代，因此，个人门户将是互联网发展的必然趋势。2.2交互原型设计的重要性在交互产品设计实践中，设计师非常关注影响用户行为与习惯的各种因素。如何使用户在交互过程中获得良好的体验，为此，设计团队往往需要根据创意概念构建出一系列的装置，以不断验证想法，评估其价值，并为进一步设计深入提供基础与灵感。在交互设计中， 一般把这种帮助我们与未来产品进行交互，从而获得第一手体验，并发掘新思路的装置，称之为“原型”。交互原型设计的主要作用，就是要通过设计体验改进（设计）的循环过程，来获得最佳的用户体验，满足用户需求，增强用户粘性。我们往往用“用户粘性”这一标准来衡量一个网站设计的成败。而个人门户网站，是用户忠诚度最高的一类网站，良好的交互设计必将带来更高的用户粘性。因此，交互设计在个人门户类网站中的重要性不言而喻，个人门户网站应更加注重交互设计。2.3原型设计法介绍原型(prototype)即把系统主要功能和接口通过快速开发制作为“样本”，以可视化的形式展现给用户，及时征求用户意见，从而明确无误地确定用户需求。同时，原型也可用于征求内部意见，作为分析和设计的接口之一，可方便于沟通，网站原型也是如此。原型设计法就是通过设计用户体验设计的不断循环修改，来达到最终最佳的产品设计。为什么要采用原型法？这里我们要说，原型对一个项目取得成功具有着十分重要的意义。俗话说：隔行如隔山，实际上网站开发者很难保证其制作的网站正好就是用户所需要的，用户也很难一次性把其真实的要求完全提交，开始阶段提出的往往只是对系统的期望，和比较模糊的设想而已。而原型系统为用户提供了一个靶子，看着原型系统，用户往往就能进一步提出他们的真正想法。以更进一步明确他们的功能和交互需求。2.4原型开发工具axure简介Axure是一种原型设计工具，它能够帮助网站设计者，快捷而简便的创建基于网站构架图的带注释的页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。本次设计使用原型设计方法，利用axure原型设计工具，因其具有以下诸多优势：1、Axure可快速绘制网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应网页；2、Axure 内建了许多会经常使用到的widget元件，例如：按钮、图片、文字面板、选择钮、下拉式菜单等；3、Axure快速建立流程图就像建立线框图一样容易，Flow Widget中有设计流程图时会经常用到的形状，您可以轻松在流程之间加入连接线并设定连接的格式；4、其中大多数的widget可以对一个或多个事件产生动作，包括OnClick、OnMouseOver和OnMouseLeave等；5、Axure可以将wireframe，输出成符合InternetExplorer或Firefox等不同浏览器的HTML prototype；6、Axure RP可以输出Word的格式的文件，规格文件包含了目录、网页清单、网页和附有注解的Master、Annotation、Interaction和Widget特定的资讯，以及结尾文件，规格的内容与格式也可以依据不同的阅读对象来变更。本课题选择axure这一新兴原型设计工具，避开了Word、Visio、 Dreamweave等对交互表达不好、不利于演示、操作难度大、需要html知识等劣势。它更利于各种交互功能的实现及用户体验。2.5小结通过上述分析可以看出，个人门户将是互联网发展的必然趋势。关注未来的网络，重点离不开个人门户，个人门户网站也必将成为未来的焦点。因此，目前，个人门户类网站层出不穷，甚至打出了web3.0理念的招牌，一批批个性化门户网站纷纷上线，都希望在这段肥地分得一杯羹。但是拥有良好用户体验的网站并不很多，许多网站正挣扎在生死存亡的边缘。针对这一普遍现象，我们来寻求改进。 网站的成功与用户体验息息相关，而用户体验便来自于交互设计的结果。可以说交互体验极大的影响着网站的生存与发展。本课题就将以交互设计为重点，致力于通过体验各类个人门户网站，提取其中优秀的交互模式，并予以整合，同时对不足之处进行改进，集合在自己的原型设计中。最终希望作品可为其他个人门户类产品设计提供参照，使网站获得更佳的用户体验，并启发其他信息系统的交互设计。同时，也希望通过设计过程，自身获得对用户体验的全面把握，以及axure原型设计工具的熟练运用。在整个课题进程中，提升策划、审美、用户心理分析、网站交互分析及运用原型设计工具的能力。如前所述，交互原型设计的最大目标便是获得良好的用户体验。“Ajax之父”Jesse James Garrett把用户体验分解为五大要素：战略层、范围层、结构层、框架层、表现层。用户体验就是在这五个层面上一步步建设起来的。交互设计处于结构层。由此可见，要建立良好的用户体验，交互设计是重要一环。而在开始谨慎的交互设计之前，还要以明确的战略需求和清晰的功能范围为基础。本次设计就将带着获取最佳用户体验的交互设计这一目标，开始进行通向结构层交互设计的一系列分析设计。3.需求分析成功的交互设计，其基础是一个被明确表达的“战略”，即知道网站开发者与用户双方的期许和目标。只有明确了双方的需求，才能以此为指引，设计出更加适应用户和网站开发者的功能模块及交互行为。3.1网站需求分析本课题网站并非商业性网站，不具商业目的。此次网站交互原型设计以获取良好的用户体验为目标。希望在集合同类网站优秀交互模式的基础上，改进目前个人门户类网站存在的交互缺陷。使其最终可作为其他个人门户类网站交互设计时的参照，并启发其他信息系统的交互设计。3.2用户需求分析本课题网站属个人门户类网站，个人门户即是个人化的门户网站，其用户人群包括几乎所有网民，涉及各个层次的人。而在未来，当个人门户发展更加成熟普及，将会出现每个网民都拥有自己的门户，真正的实现网络个性化。目前，使用个人门户网的用户大致集中在中青年层，大学生和白领阶层是最主要的用户。而白领阶层中男性女性的需求又颇具差异，需区别对待。本网站的用户群主要定位为这三种。以下以具体实例的方式，对不同用户进行了需求分析。并根据各自特点，着重描述他们对功能和交互模式的不同需求。3.2.1大学生大学生群体是最易接受新事物的一个群体，对于网络的接受度颇高，并不断的有新鲜需求提出。他们接触网络的历史较长，个性化个人门户是追求时尚个性的他们首选的网站。主要以娱乐交友为目的的他们对此类网站拥有他们的独特需求。（1）用户实例姓名：所在城市：网龄（年）：李菁菁杭州5职业每天上网时间上网主要工作大学生不定娱乐、交友 图3-1李菁菁（2）用户需求功能需求：通过网络联络老朋友，结交新朋友；关注各式新闻资讯，特别是娱乐、健身类；网页主题可选择任意更换。交互需求：应该尽可能帮助用户避免要求他们记住各种信息，例如好友搜索，最好可以通过信息引导；要在用户完成某项操作后进行提示，系统给予反馈，使他们知道自己是否达成目标；网站内随处有信息提示；当使用过程出现错误，能明确指出错误原因，并使用户能理解。（3）网站规划对此类用户网站拟实现功能模块：推出“联系人”版块，里面收录“用户好友”，同时可以“搜索好友”；网站提供各种推荐的widgets，且归类便于用户搜索添加；推出多种网页主题供用户选择添加。交互模式：在“联系人”版块进行好友搜索时，利用下拉框分类制作好友各项信息，以引导用户搜索；好友搜索也通过关键字匹配，协助用户记忆；在用户操作某项任务过程中，随时显示完成情况。如“下载”过程，显示下载进度，以便用户了解自己完成目标的情况；网站内有更多的直接显示，如鼠标触及“联系人”便可显示部分联系人情况，无需点击进入；注册过程，利用函数控制输入信息的正确与否，即时校验，明确指出错误。3.2.2女性白领白领们平日工作会多处使用到网络，因此他们经常利用网络进行工作联络，收看新闻资讯等等。他们工作繁忙，更加希望网络使用方便简单。但是白领女性与男性的需求又有不同，他们通常拥有自己的隐私、并希望得到保护。他们对网站也独具美观上的挑剔，喜欢简洁大方的界面。（1）用户实例姓名：所在城市：网龄（年）：林楠上海10职业每天上网时间上网主要工作基层管理人员6工作联络、收看新闻 图3-2林楠（2） 用户需求功能需求：网站可以无限添加页签，且可为网站页面添加个性化标题；建议网站能建立私有页面，用以保存用户隐私，公开页面供他人光顾。交互需求：网站注册程序不要那么繁琐；界面更加简洁，不要经常进行页面跳转。（3）网站规划对此类用户网站拟实现功能模块：网站设置“添加标签页”按钮，在同一张页面中可添加标签且为各标签页设置名称；网站将采取分开建立私有页面和公开页面的形式。交互需求：网站注册时仅填写最少量信息，注册结束登录后再完善个人资料；以下拉或弹出窗口的形式，防止总是跳转页面，信息尽量在一个页面显示。3.2.3男性白领白领们平日工作会多处使用到网络，因此他们经常利用网络进行工作联络，收看新闻资讯等等。他们工作繁忙，更加希望网络使用方便简单。但是白领男性与女性的需求又有不同。他们通常喜欢网络也给予他们更多的自主，他们喜欢探索，他们比女性不能忍耐，希望能第一时间运用网站各项功能，他们不够细心，往往容易出错，因此更需要网站有强大的纠错和弥补犯错失误的功能。（1）用户实例姓名：所在城市：网龄（年）：吴越深圳12职业每天上网时间上网主要工作营销经理4工作联络、收看新闻 图3-3吴越（2）用户需求功能需求： 除网站推荐内容之外，网站提供搜索工具，方便用户自主进行个性化搜索； 在网页上给好友发信息，有利于网络信息及时分享。交互需求： 网站添加的部分模块在网页内可直接编辑，使搜看起来更直观； 网站可以不用注册先行体验部分功能； 应该方便用户取消某个操作，增加有撤销和恢复的功能，防止一失足成千古恨。(3)网站规划对此类用户网站拟实现功能模块： 推出“谷歌搜索”栏，以便用户通过搜索自己感兴趣的页面，不局限于网站的推荐； 推出给好友发信息版块，可选择自己网内好友及时发送信息。交互模式： 页签内添加的每个小widget可直接编辑； 用户可以以游客身份体验默认公开页面的部分功能； 推出“撤销”功能，以弥补用户的再次失误。3.3场景设计原型设计法最大的作用就在于通过用户的反复体验，校正网站功能。场景设计，就是在网站雏形确立后，交予用户体验，通过体验发现新问题，进一步完善网站功能，如此循环改善。以下便通过四处场景分析展示不同情形下的用户对网站雏形的初步体验结果，并由此结果来推动网站功能的完善。3.3.1场景一用户A ：游客问题：1) A用户来到首页后，发现不是会员的自己被更多的权限排除在外，感到很郁闷，随即离开。2) A用户不能很快的找到注册向导。3) A用户在注册的时候觉得过程非常麻烦，要填的信息过多，打算放弃注册。解决：1) 在首页添加多处游客可点击的链接，首先使他们有一种亲近的心理状态。包括使用官方博客的链接，公开页面的体验等，都是拉近用户的方式。2) 将注册向导使用大图标，且使颜色鲜艳，便于游客发现注册。3) 注册过程选择最为简单的内容，其余信息留到登录后完善。本网站并不是颇具信息性的网站，更多的是用户自主式的服务，因此，用户不会很有耐心去花费大量时间注册。3.3.2场景二用户B ：新注册的用户问题：1) B用户刚注册为会员，登录私有页面发现没有任何页签或模块，失去了兴趣，同时，此时也找不到方向去马上添加页签。2) B用户刚注册为会员，希望进入页面可以浏览的内容比游客身份更多，但是由于自己未添加版块或好友等，目前能查看的内容仍然与游客身份差不多。3）B用户初次进入私有页面，不清楚自己应该干什么。解决：1）在注册的时候，推出用户喜欢的类别选项，根据用户的选择，在其第一次登录页面时就可呈现出用户所喜欢的内容，以保持用户兴趣。2）在用户第一次进入私有页面时，为其默认一位好友，且推出“所有人”版块，使其可以查看，而不是全部需要自己添加。3) 在用户第一次登录后，应该首先提示他进行资料的完善以保证安全性和便利性。这同时也是一种对用户的引导，资料的完善中，这些资料包括个人心情设置等方面，不会枯燥乏味，能保持用户的兴趣和引导其探索网站。3.3.3场景三用户C:网站的忠实用用户问题：1) C用户几乎每天都登录他的个人门户，且基本只进入该门户。他在添加widget的过程发现，仅仅依赖网站推荐不能满足自己的需求。2) C用户在查看自己近期概况时发现有很多无用的信息，一些无关紧要的细微变动都会出现在近况当中。包括朋友的近况变动也是大量冗杂的信息堆积在版块中，占据位置。3) C用户在使用公开页面时，需要与朋友共享很多个人的照片与视频，数量巨大，在一个页签里面难以容纳。解决：1) 在添加内容区域推出下载widget版块，根据自己的了解输入网址，下载自己需要的widget添加到页面。2) 在近况版块里面，对于每条活动信息，增添删除按钮，使用户可以选择性的删除部分无用的信息，也使页面更加简洁，减少页面的空间占用。3) 将公开页面的默认标签，分类为相册和视频标签。分别储存公开的视频以及相册信息。3.3.4场景四用户D：网站的普通用户问题：1) 用户D在页面浏览时，希望将自己珍藏的优秀的页面与朋友一起分享，但是不知道怎样去分享。2) 用户D在给页面添加内容时，添加版块覆盖了原有页面的部分内容，以至于用户在添加内容时，看不到被添加进去的内容置于页面哪个版块，即添加是否成功。3) 用户D只能偶尔利用少量时间使用网站，但是觉得要进入网站才能查找最新的信息，比较浪费时间，还经常进入网站发现不了什么有用的信息。解决：1) 在页签编辑版块里面，选择分享页签，可以通过邮件，微博客等分享给好友，他们可以通过链接查看你供分享的页签。2) 添加内容版块，以下拉框的形式呈现在页面上，而不是以覆盖窗口的形式。当下拉的同时，页面整体下拉，不至于被弹出版块覆盖，便于用户查看更新的页面。3) 在首页上放置最近活动和活跃会员的介绍。这样可以使用户在未登录时就可了解到最新网站的一些有趣的动态，自己衡量是否有兴趣，是否登录浏览。带着“用户想要什么”“开发者的目的是什么”的明确认识，我们就能清楚如何去满足这些战略目标。当我们把这些需求转变成网站应该给用户提供什么样的内容和功能时，战略便转变成了范围，需求便转变成了功能模块。从设计程序上看，功能模块设计是交互设计的基础，为其提供内容上的支持。从广义的交互设计来看，贴近用户的功能模块设计也是达到良好交互的目的。4.功能模块设计经过需求分析我们得到了网站初步的功能模块，再辅之以场景分析，最终完善了各项功能，于是便对网站各项功能（内容）进行了如下设计。 4.1网站架构图 图4-1 网站架构图网站为个人门户类网站，主要分为“我的首页”、“我的私有页面”、“我的公开页面”三部分。首页主要展示网站基本信息以及提供登录注册功能。私有页面，用户可自由添加各类模块，在这里，集合娱乐，交友，学习等功能一体化。公开页面，主要提供给其他用户浏览。除了可以在公开页面自由添加模块，同时它还具有写博和群组讨论的功能，集合了博客、社区、个性化主页于一体。 4.2功能模块介绍（1）首页图4-2首页 在首页，网站主要添加以下几方面内容： 了解一下：“了解一下”提供链接到网站官方博客，以使用户更多的了解网站信息； 网站介绍版块：以小黑板形式，形象的展示网站主要提供的内容和功能； 登录：用于注册用户登录；另外添加“记住密码”功能，便于再次访问，“忘记密码”帮助用户找回密码； 注册：“立即注册”按钮，引导非会员用户进入注册页面； 浏览一下：为游客提供浏览功能，不注册即可体验默认公开页面的部分功能； 功能简介：提供链接到官方博客的功能介绍页面； 最新动态：显示最新的网站动态，如某个widget新上线等信息； 活跃用户：显示网站近期活跃会员，其他用户可点击浏览该用户公开页面，或加其为好友。（2）我的私有页面图4-3我的私有页面我的私有页面提供以下几方面内容： 添加内容：此版块提供用户给页面添加内容，包括“分类浏览widget”“添加最重要的widget”、“下载最新的widget”三块，可以通过网站推荐，自主搜索等形式添加应用模块到页面； 资料：即个人的信息中心，包括姓名、性别、公开页面地址等，重点推出用户状态描述，用户可以就自己的心情添加一句话，可供互相浏览； 近况：包括个人最近的公开或私人活动，以及朋友动态； 联系人：包括好友、关注者、寻找朋友和邀请好友； 页面设置：此版块包括页面语言、主题及壁纸的更换等； 添加（更改）页面标题版块：可在此处添加、更改页面标题； google搜索版块：在此处可通过谷歌搜索需要的信息； 页签版块：此版块是此页最重要区域，放置用户添加的各项widget。用户可以分类添加页签，置放各类widget，并为各页签命名。在页签名处可选择“编辑”页签进行编辑页面布局，页签名称和页签图标。 (3) 我的公开页面图4-4我的公开页面我的公开页面提供以下几方面的内容： 主页：展示个人基本资料、留言信息、空间概要等基本情况，是集合公开页面所有内容的一个简要介绍； 文章：在此版块可以写文章，将文章进行分类，并在文章后面推出评论模块，与博客内容类似； 相册：提供给用户上传管理照片；用户可以在此创建自己的相册，管理照片，并可自动播放影集； 群组：在此版块，用户可以创建群，加入群，发帖留言； 此外，公开页面仍然保留私有页面创建个性化页签、编辑资料、添加联系人、浏览近况等功能。明确的需求和功能模块，为交互设计打下了方向性基础。但仅根据需求和内容来判断网站中的交互行为，理论上可行，实际上却不尽如人意。仍有无数网站在完善的需求分析和内容设计之后，同样败在交互设计环节。因此，为避免这一现象，获得更加实际的、良好的交互体验，在交互设计之前对同类竞争网站的分析就显得颇为重要。通过竞品体验，取其精华、去其糟粕。在理论与实际的结合之上，才能为最终的交互设计打下坚实的基础。5.竞品分析（同类网站交互体验分析）由需求分析、功能模块设计之后所得出的交互设计，理论上符合了建立良好用户体验和网站原型的程序。但更多交互设计的细节还需在实际的体验中才能完善，毕竟理论是基于一定的主观想象，而实际操作后发现的问题，用户体验后反馈的建议，才是最实际的设计源泉。为此，我选择了几个个人门户类网站进行交互体验，希望在理论分析的基础之上，再吸取实际网站的精华，继承它们的优秀交互模式，并对不足之处在本设计中适当改进。5.1 Netvibes（）5.1.1优点1描述：添加内容时，以下拉框形式弹出“添加内容”模块（如下图），而无需跳转页面。 图5-1增加内容前 图5-2增加内容后5.1.2优点2描述：可以浮动文字的形式显示信息。如图，当鼠标悬浮于某位置时，可显示更多隐藏内容,以浮动文字的方式显示。 图5-3鼠标移入前 图5-4鼠标移入后5.1.3缺点1描述:“个人状态”部分只可读，不可写入，鼠标点击时不可直接修改。修改：在状态语言处点击可直接修改状态。 图5-5原形 图5-6修改后5.1.4缺点2描述：在“搜索朋友”板块，没有站内搜索的引导，只能通过邮箱搜索自己的朋友，无法通过搜索引导，来寻找筛选结识新朋友。修改：参照“”，制作一个找朋友的引导搜索，利用下拉菜单细分朋友资料信息。 图5-7原形 图5-8修改后（样图）5.2 I google(/ig/china)5.2.1优点1描述：添加标签页时，取代旧式浏览器弹出窗口，使用轻巧弹出窗口，且使用灯箱效果。 图5-9 添加标签前 图5-10添加标签后5.2.2优点2描述：各模块可任意拖动。 图5-11未移动前 图5-12拖放过程（样图）5.2.3缺点1描述：标签页名称只能点击，不可直接修改。修改：点击标题，可直接修改名称。 图5-13重命名页签 图5-14点击即可修改（样图）5.2.4缺点2描述：不能直接在网页上配置模块。修改：可直接在网页上配置模块。 图5-15模块原样（无配置按钮） 图5-16直接在网页配置模块5.3雅蛙()5.3.1优点1描述：写信息时，有备选收件人的选择，不用输入收件人名，更加方便用户记忆。 图5-17发信息前 图5-18显示备选收件人5.3.2优点2描述：搜索结果显示在同一页面上，无需跳转页面。 图5-19搜索前 图5-20搜索后5.3.3缺点1描述：“发送信息”的交互过程有瑕疵，发送信息后页面跳转至发件箱，而不是停留在发信息版块，不利于用户继续发送的需求。修改：发完信息后，页面仍停留在发信息版块，以便用户继续给其他人发送信息。 图5-21发信息前 图5-22发信息后5.3.4缺点2描述：注册过程需要填入邮箱，但注册成功并不需要邮箱，这就难免使某些用户利用他人邮箱进行不良行为，给他人带来困扰，影响网站形象。修改：不填写邮箱，或者设置成到邮箱中激活账号图5-23注册过程5.4是我的()：5.4.1优点1描述：将“好友动态”“大家动态”等信息杂糅进同一模块，节省了网页空间，看起来简洁美观。 图5-24点击“好友动态”后 图5-25点击“大家动态”后5.4.2缺点1描述：主页醒目处的文字图片，可读取，不可点击进入。如首页的“内容订阅”“空间展示”等最醒目文字却不能点击进入，严重影响游客的探究心理，这将对游客产生排斥，减少他们在网站停留的时间。修改：在醒目的图片文字处，加入链接内容，引导用户初步体验。图5-26首页“小黑板”明确了需求和功能模块，我们已经清楚最终网站的基本特性。但这些特征如何实现，如何与用户互动，则依赖于交互设计过程。结合对交互的需求分析、功能模块设计，以及竞品体验，本课题设计出一个个人门户网站的交互原型，并对重点继承和改进设计的交互模式进行了详细说明。6.交互设计交互设计是一种如何让产品易用，有效而让人愉悦的技术。因此它的设计应该尽可能使产品易用，使用户愉悦。交互设计要满足各交互流程更加简洁易用，界面呈现更加令人愉悦，从而才可带来和保持较好的交互体验。6.1总论在本次设计过程中，交互设计将分成两部分予以呈现和解释。包括，“用户使用流程的交互设计”和“界面呈现的交互设计”。“用户使用流程的交互设计”是站在产品和体验两个角度，更合理的进行产品设计。即保证完整的业务逻辑和产品利益，又用最小的交互成本让用户完成任务，简单讲，这是一种“动态的、过程性的”交互设计；“界面呈现的交互设计”更多是站在易用性的角度优化人机交互过程，让交互成本再小，易用性更强，简单来说，它则是一种相对“静态的、短暂的”交互设计。这两方面都是我们在进行交互产品设计时必须重点考虑的，因为它都极大的影响着用户体验的过程。以下，分别对两类设计进行详细介绍。6.2用户使用流程的交互设计 下面将对设计中几处主要的流程型交互模式进行介绍。基本形状示意： 开始 模块或动作 结束 判段 文档 动作产生的方向 可能发生的动作1） 登录 用户在登录时，如果没有注册则阻止登录，提示用户先注册，注册成功则进入私有页面，注册失败则停留在注册页面；若用户名密码错误，提示重新输入，若输入正确则进入私有页面。交互流程如图6-1： 图6-1 登录流程图2） 新建页签用户点击“新建页签”，弹出新建页签窗口，若填入页签名称并保存，页签更新，若取消则页签不更新，新建窗口消失，还原为新建前状态。交互流程如图6-2： 图6-2 新建页签流程图3） 删除页签点击编辑页签按钮，出现编辑窗口，在此窗口可更改页签名、页签图标、页签布局及删除页签。若确认删除则页签更新，更新后可选择撤销，回到撤销前状态；若取消删除则不更新。交互流程如图：6-3 图6-3删除页签流程图4） 写文章进入公开页面，选择“写文章”，弹出编辑窗口，完成文章后，可选择发表文章或存为草稿。若发表文章则页面更新至“文章归档”版块，文章数目增加；若“存为草稿”则页面更新至“草稿”版块，文章数目增加。交互流程如图6-4：图6-4撰写文章流程图5） 创建相册进入公开页面选择相册，点击创建相册，将出现创建窗口，此时键入相册名，确定后即创建好相册。然后再往相册中上传相片，最后得到更新后的相册。交互流程如图6-5：图6-5创建相册流程图6） 创建群组进入我的公开页面群组页签，点击创建新群组,随即打开“创建群组”页面，此时键入群组名称，确定后，页面将切回群组页签，此时“群组”版块已更新，刚刚创建的群组名称显示在此版块。交互流程如图6-6：图6-6创建群组流程图7） 发帖用户进入自己的群，在帖子区域，点击“发帖”，弹出编辑框，写好编辑内容后，确认发送帖子，此时页面回转至帖子版块，在帖子版块下的“最新回复”栏将看到刚刚发送的帖子题目，且置顶。交互流程如图6-7：图6-7发帖流程图6.3界面呈现的交互设计在设计网站的交互过程时，我们并不是凭空设想，而是根据一定的依据来选择了某种交互模式。交互模式一般从模式库中提取，所谓交互模式库，就是集合了许多方面最佳做法的交互设计，它包含了前人收集的各种实例，实用性强，是一个交互设计参考的工具箱。每个网站的交互设计都是如此，都需要在对成熟的交互模式进行分析之后，结合网站实际，选择出适应本网站的模式。因此，本网站所使用的交互模式也均是经过分析选择、体验对比而定的。以下将对本课题中重点的交互模式设计进行介绍。1）即时校验问题：用户有时要输入很多信息，但最后提交时，只要有一个信息错误有可能要全部重新填写。解决：在每次用户输入信息后，都自动即时校验用户所输入的信息是否正确，避免用户全部提交后才发现问题，需要全部重写。保持用户的耐性。应用：本网站多处使用了即时校验。如注册页面，用户在使用网站之前需要有一个账户，注册账户往往需要用户填写多个信息，其中用户名，密码等都是需要检验的项目。使用即时校验，在用户输完信息后直接校验信息的可用性和正确性，以保证用户注册成功的概率。设计原因：避免用户由于错误重复繁琐的任务，而失去耐心。设计成果图：图6-8 图6-8用户名密码校验设计源代码：表6-1 表6-1 即时校验footnotelabelinteractionspecification1OnKeyUp: Case 1 (If length of value of widget is greater than 10): Set y1 state to Case 2 (Else If True): Set y1 state to Case 3 (If text on widget equals tianlina): Set y1 state to 重复名键入，不超过10位2OnKeyUp: Case 1 (If length of value of widget is less than 6): Set m1 state to 2 Case 2 (Else If True): Set m1 state to 1至少六位3OnKeyUp: Case 1 (If text on widget does not equal text on widget ): Set q1 state to 2 Case 2 (Else If True): Set q1 state to 1密码应该一致4OnClick: Case 1 (If length of value of widget is less or equals 10 and length of value of widget is greater or equals 6 and text on widget equals text on widget ): Open 注册成功 in Current Window Case 2 (Else If True): Set state to State1成功即跳转页面，失败显示“错误”2)可折叠版面问题：用户在查看信息或功能时，只需查看某一部分的信息。例如网站中”最新的widget”列表，用户只需要查看最新关于新闻的widget。解决：制作成点击后可迅速打开或折叠的面板，通过折叠区域分类储藏信息。 应用：“添加内容”板块，有三个种类可选择，“分类添加”、“最重要的添加”、“下载添加”。利用可折叠版面，在查看其中一个项目时，隐藏其它的项目。当切换到“分类浏览”版面时，隐藏其余版块。可折叠版面可以使几种内容相互切换，而不需占用空间。折叠区域分类储藏信息，隐藏不必要的信息。不仅可以帮助用户快速找到自己想要的信息，而且可以保持界面的整洁。设计原因：由于分类信息较多，如此设计可以节省网页空间，美观。设计成果图：图6-9图6-9添加内容版块设计源代码：表6-2 表6-2“添加内容”可折叠版面的交互设计footnotelabelinteractionspecification1OnClick: Case 1: Set 添加内容1 state to 分类 Hide 分类panel右边跳转至分类状态2OnClick: Case 1: Set 添加内容1 state to 重要跳转至“最重要的状态3OnClick: Case 1: Set 添加内容1 state to 下载 Hide 下载等待右侧跳转状态3)自动填充问题：用户在选择某个名称，如人名，地名时，需要输入他们的完整名称。但往往由于信息量过大，用户会时常忘记此类名称。因此在输入的时候可能时常出错，甚至会由于遗忘而带来苦恼。解决：根据用户输入的内容，显示与用户输入的内容相匹配的建议列表。同时根据用户继续输入的内容继续缩小或者扩大建议列表。便可避免用户输入错误，并可以让用户更快更方便的找到所要的名称。应用：在联系人版块，用户可自行输入名称搜索联系人，但由于每个用户都可能存在多个联系人，所以应想法尽可能的减少用户的记忆负担。利用自动填充功能，可以进行关键字匹配，如输入“李”，自动匹配李姓联系人的名字，由此引导和提示用户需要的信息，协助用户记忆。设计原因：便于帮助用户查找信息，帮助其记忆。设计成果图：图6-10 图6-10搜索联系人版块设计源代码：表6-3、表6-4、表6-5 表6-3自动填充设计1footnotelabelinteractionspecification11OnKeyUp: Case 1 (If text on widget 1 equals 李): Set 2 state to 2 Case 2 (Else If text on widget 1 equals 李小): Set 2 state to 3 Case 3 (Else If text on widget 1 does not equal 李): Set 2 state to 1OnFocus: Case 1 (If text on widget 1 equals 李): Set 2 state to 2 Case 2 (Else If text on widget 1 equals 李小): Set 2 state to 3OnLostFocus: Case 1: Set 2 state to 1键入李、或李小、或非”李“人名，自动填充表6-4自动填充设计2footnotelabelinteraction1m1OnChange: Case 1 (If selected option of m1 equals 李安): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李雪): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李玉): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李小龙): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李大鎏): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李小琳): Set text on widget 1 equal to selected option of m1 Case 1 (Else If selected option of m1 equals 李小双): Set text on widget 1 equal to selected option of m1表6-5自动填充设计3footnotelabelinteraction1m2OnChange: Case 1 (If selected option of m2 equals 李小琳): Set text on widget 1 equal to selected option of m2 Case 1 (Else If selected option of m2 equals 李小双): Set text on widget 1 equal to selected option of m2 Case 1 (Else If selected option of m2 equals 李小龙): Set text on widget 1 equal to selected option of m24)光箱问题：用户需要在不切换页面的同时，达到对某个动作指示信息强烈的关注。解决：使用灯箱效果。将目的窗口以外的主页蒙上阴影，让用户的注意力集中在目的窗口的当前任务。同时设置任务标题，提示用户当前任务是做什么的。设置逃逸出口，使用户可以随时放弃任务，回到原来页面。应用：用户在添加页签的时候，将出现灯箱效果，弹出命名页签窗口，此时的页面其余部分均至于阴影之下，也不可点击，只能聚焦到添加窗口。在命名页签窗口可键入页签名，确认即为添加，取消则还原。设计原因：通过灯箱效果，掩盖页面信息，使页面显得不冗杂，更加美观。设计成果图：图6-11 图6-11添加页签版块设计源代码：表6-6 表6-6灯箱效果的交互设计FootnoteLabelInteractionsSpecification1OnClick: Case 1: Hide Panel2OnClick: Case 1: Set value of variable OnLoadVariable equal to text on widget 页面名称 and text on widget 新增tab equal to OnLoadVariable Set 第四个 state to 新增, 页签 state to 其他 Hide 灯箱添加一个新页签3OnClick: Case 1