毕业设计（论文）-基于axure的个人门户类网站交互原型设计

大学毕业设计（论文）开题报告题目基于axure的个人门户类网站交互原型设计学院管理学院专业电子商务姓名班级学号指导教师一．选题依据1.1选题意义本次设计以“基于axure的个人门户类网站交互原型设计”为主题，即是要基于axure打造一个个人门户网站，此网站的交互设计、网站内容、网页风格等应符合个人门户类网站的基本特征。其中重点对网站的交互原型进行设计。目前，对交互设计的研究非常多，主要为了增强用户体验，本设计希望基于原型设计把个人门户类网站优秀的交互设计特征予以整合展现，以寻求对交互设计的更深理解。既可作为其他交互产品设计时的参照，也可启发其他信息系统的交互设计。同时，也希望在设计过程中，自身获得对用户体验的全面把握，以及axure原型设计工具的熟练运用。在整个课题进程中，提升网站交互分析、文笔、审美、用户心理分析、及运用原型设计工具的能力。1.2选题背景1.2.随着互联网的发展，门户网站的兴起，人们的生活发生了划时代的转变。我们生活的方方面面都已更多的依赖于网络。在日常的工作，学习，生活中，每人每天需要接触不同的网站，点击进入数十个门户。据一项数据调查，目前中国青年层每日平均访问网站数达12个之多，其中涉及新闻类、娱乐类、生活类、交友类等不同类型的门户网站。而同一类型的门户网站,用户可能选择多个进入浏览。正如许多用户会同时拥有“土豆”和“优酷”，光临“天涯社区”之后再去“百度贴吧”等等。正因为要频繁光临不同的网站，花费大量时间，于是，一种致力于帮用户解决所有网络生活问题的网站出现了——个人门户。通过个人门户，用户可以根据个人喜好，自由的添加内容，布局页面。用户可以将自己喜欢的网站添加到自己的门户，以后上网浏览信息，再也不需要一个个网站点击进入，甚至在忘记网址的情况下惹得一身烦恼。个人门户网站，就是以个人为中心的上网入口，还可以进一步延伸为个人信息中心。个人门户具备门户的全部特征，同时能够实现个性化定制，实现内容、社区、应用的有机整合。通过个性化的呈现扩展用户利用互联网的能力，节约用户利用互联网的时间成本。互联网的发展，已到了个性化的时代，因此，个人门户将是互联网发展的必然趋势。1.2.2原型设计在交互产品设计中的作用在交互产品设计实践中，设计师更加关注影响用户行为与习惯的各种因素，如何使用户在交互过程中获得良好的体验。为此，设计团队往往需要根据创意概念构建出一系列的装置，以不断验证想法，评估其价值，并为进一步设计深入提供基础与灵感。在交互设计中，一般把这样的帮助我们与未来产品进行交互，从而获得第一手体验，并发掘新思路的装置，称之为“原型”。交互原型设计的主要作用，就是要通过设计—体验—改进（设计）的循环过程，来获得最佳的用户体验，满足用户需求，增强用户粘性。1.3小结通过上述分析可以看出，个人门户将是互联网发展的必然趋势。关注未来的网络，重点离不开个人门户，个人门户网站也必将成为未来的焦点。因此，目前，个人门户类网站层出不穷，甚至打出了web3.0理念的招牌，一批批个性化门户网站纷纷上线，都希望在这段肥地分得一杯羹。但是拥有良好用户体验的网站并不很多，许多网站正挣扎在生死存亡的边缘。针对这一普遍现象，我们来寻求改进。网站的成功与用户体验息息相关，而用户体验便来自于交互设计的结果。可以说交互体验极大的影响着网站的生存与发展。本课题就将以交互设计为重点，致力于通过体验各类个人门户网站，提取其中优秀的交互模式，并予以整合，同时对不足之处进行改进，集合在自己的原型设计中。最终希望作品可为其他个人门户类产品设计提供参照，使网站获得更佳的用户体验，并启发其他信息系统的交互设计。同时，也希望通过设计过程，自身获得对用户体验的全面把握，以及axure原型设计工具的熟练运用。在整个课题进程中，提升策划、审美、用户心理分析、网站交互分析及运用原型设计工具的能力。二．研究内容2.1研究方向本课题主要研究并体验以下几方面内容：个人门户类网站、axure原型设计工具的具体应用、交互设计，原型设计法。重点是在对交互设计概念的理解之上，通过对比分析国内外几家个人门户类网站，提取出他们优秀的设计，并进行其它的改进，再加入自己的创意于本设计，以最终设计出一个更具良好用户体验的个性化门户网站交互原型。2.2拟解决的主要问题本课题意在通过对交互设计理念的理解分析，对比各类个人门户网站的交互原型设计，对个人门户网站的交互原型予以优化。通过对比分析，设计更加完善的交互模式，提升用户体验的满意度。最后完成一个完整的基于axure的网站交互原型及网站规划书。2.3研究目标1、关于交互设计目标：希望通过多家网站的对比研究，先进行交互体验，再集合优秀的交互设计模式于本网站。同时也结合本网站特色，创新出部分交互模式，使之更个性化。2、关于网页设计目标：希望通过对比几个个人门户网站的原型，分析其中的差异后，设计出更符合用户习惯的，更易接受的网页风格，这个网页界面，布局甚至色彩，也必将对交互体验带来好处，原型版式将会更加自由，开阔及个性。3、关于网站内容设计目标：对于网站内容设计，要符合个性化门户的独特之处，在内容上有一定的创新，使整个内容也能跟上步伐，更加个性化。2.4本课题的创新之处1、打造一个优秀交互模式集中的应用平台。本课题将在进行各类网站的交互体验之后，集合各模块的优秀设计，再注入作者的创新来进行交互的研究设计。2、在网页风格设计中将会结合个性化理念所需要的内容，进行全新的改版，将呈现更加宽阔，清洁，自由的页面，以便用户个性化添加自己所需。3、在交互设计中，将会在亲自体验多个网站之后，集合模仿优秀交互设计。同时，进行一定程度的个性化交互创新，以目前的流行趋势为参考，着力使用户感受到一种紧跟时代，更贴近生活的创新性交互体验。三.研究过程3.1研究步骤（研究步骤如图1所示）1、用户对个性化主页的需求调查：通过对用户的需求调查，了解用户对个性化主页的设计内容有哪些要求，以便更好的安排网站的版块设计。2、个性化门户网站特点分析：对个性化门户网站特点进行分析，根据其特点，结合用户需求，进行内容的整体设计。3、相关网站交互模式的体验：继承优秀的HCI-Pattern，找出人机交互设计上存在的不足。选择“雅蛙”“Igoogle”“netvibes”等个性化理念的门户网站或个人门户网站进行重点交互体验。收集优秀的交互设计模式。列出网站的优缺点对照表（见表1）。4、对交互设计流程进行分析设计，画出流程图。对设计的每一环节，都考虑是否有创新点，结合当今潮流进行个性化交互模式设计。5、选择不同职业，年龄，学历的人进行交互体验，并收集意见建议，进行改进优化。6、尽量重复以上的交互体验过程，尽可能的完善网站交互功能。7、收集相关材料，撰写网站规划书。图1研究步骤3.2、研究方法、工具本次设计使用网站原型设计方法，利用axure原型设计工具进行原型和交互设计。选择axure原型设计工具的原因：1、Axure可快速绘制网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应网页。2、Axure内建了许多会经常使用到的widget元件，例如：按钮(Button)、图片(Image)、文字面板(TextPanel)、选择钮(RadioButton)、下拉式菜单(Droplist)。3、Axure快速建立流程图就像建立wireframe一样容易，FlowWidget中有设计流程图时会经常用到的形状，您可以轻松在流程之间加入连接线并设定连接的格式。4、其中大多数的widget可以对一个或多个事件产生动作，包括OnClick、OnMouseOver和OnMouseLeave等。5、Axure可以将wireframe，输出成符合InternetExplorer或Firefox等不同浏览器的HTMLprototype。6、AxureRP可以输出Word的格式的文件，规格文件包含了目录、网页清单、网页和附有注解的Master、Annotation、Interaction和Widget特定的资讯，以及结尾文件，规格的内容与格式也可以依据不同的阅读对象来变更。本课题选择axure这一新兴原型设计工具，同时避开了Word、Visio、Dreamweave等对交互表达不好、不利于演示、操作难度大、需要html知识等劣势。更利于各种交互功能的实现及用户体验。选择axure作为设计工具，希望在工程训练的同时，达到对这一新兴工具的熟练运用。设计成果的表现形式为RP文件的动态交互原型，及对应的电子商务规划设计文档。3.3.交互体验对比表表1：部分网站交互模式优缺点对比表（Igoogle）亮点1亮点2亮点3每个页面可更换不同的主题，更具个性化。添加页签过程，弹出窗口显示灯箱效果。删除标签可二次确认，即删除完毕后有“撤销”按钮，可选择撤销。（Igoogle）缺陷1缺陷2缺陷3页面里每个小版块可编辑的范围很小，甚至无法编辑删除页面中某一版块时无确认键，很容易使用户出错。只能选择网站内的主题，用户被局限在网站推出的内容中。（netivibes）亮点1亮点2亮点3对某一页签或小版块，都可以（通过email、twitter等形式）根据用户兴趣分享给其它人。注册过程，可选择选项“不用在公开资料中显示我的年龄”，这点极好的抓住了用户心理。页面编辑时，可更换背景，同时可更换语言，更加个性化。（netivibes）缺陷1缺陷2缺陷3搜索朋友时没有引导搜索的选项。“私有页面”与“公开页面”需分开创建，若通过加密按钮来实现则省事很多。网站内主题，不能根据不同的页面，不同的模块更换、搭配相关的主题和背景。(雅蛙）亮点1亮点2亮点3个人资料完善里面有“星座”与“故乡”选项，符合当前人们的关注焦点。对某页面进行编辑，可以设定加密访问，用户可以选择公开的页面和私人所有的页面。在“好友管理”里面，独特的推出“好友动态屏蔽”按钮，独具特色。(雅蛙）缺陷1缺陷2缺陷3在“搜索圈子”模块，只有输入圈子名才能搜索，应该进行分类引导在对“我的好友”发信息时，当发送完成，页面跳转至“发信箱”页面，不利于继续发送。添加好友模块，接收对方申请，只能选“同意并添加对方为好友”，用户非常被动。四、研究工作进度：序号时间内容12月16日-2月24日进入毕业设计，准备开题报告22月25日开题答辩32月28日-3月15日修改文献综述、外文翻译43月16日-4月15日期中检查，系统分析和设计54月16日-5月15日交互模型开发65月16日-5月23日撰写论文，论文修改75月15日-5月20日交互模型调式85月21日-5月23日成果验收96月1日-6月3日论文答辩106月3日-6月8日毕业设计总结五、主要参考文献：[1]马丽、张露.交互设计初探.信息科学[J],2007年,第5期:34.[2]徐苏、林振荣.交互设计在电子商务网站中的应用研究[J].科技广场，2004.9:12-14.[3]COOPERAlan.交互设计之路———让高科技回归人性[M].DINGChris等译.北京:电子工业出版社,2006.[4]刘金晓.人机交互界面定制及生成工具的研究与开发[D].北京:华北电力大学,2008.[5]吴继雁,高山.Web发展新模式[J].黑龙江科技信息,2007,11:52.[6]刘增.以用户为中心的网络界面设计研究[D].南京：南京航空航天大学，2007.[7]杨秀蓉.基于互联网交互性的新产品开发及其实证研究[D].长沙：中南大学，2004.[8]吴瑜.人机交互设计界面问题研究[D].武汉：武汉理工大学，2004.[9]欧阳波.用户研究和用户体验设计[J].江苏大学学报（自然科学版）,2006,27卷5A期，55-57.[10]王震亚,刘和山.谈人机交互原理在产品设计中的应用[J].工程图学学报.2009(02)-0126-04.[11][美]JenniferPreece,YvonneRogers,HelenSharp著.交互设计——超越人机交互[M].刘晓晖译.北京:电子工业出版社,2003.6-7.[12]JenniferPreece,YvonneRogers,HelenSharp.InteractionDesign—BeyondHuman-ComputerInteraction[M].JohnWiley&SonsInc.2002.[13]TerryWinograd.Fromcomputingmachinerytoingteractiondesign[J].NewYork:Spring-Verlag,149-162.六、指导教师审核意见：指导教师签字：年月日七、系（教研室）评议意见：系（教研室）主任签字：年月日八、开题小组评审意见：开题小组负责人签字：年月日九、学院领导审核意见：1．通过；2．完善后通过；３．未通过学院领导签字：年月日1、前言随着互联网的发展，门户网站的兴起，人们的生活发生了划时代的转变。我们生活的方方面面都已更多的依赖于网络。于是，一种致力于帮用户解决所有网络生活问题的网站出现了——个人门户。通过个人门户，用户可以根据个人喜好，自由的添加内容，布局页面.个人门户是互联网发展的必然趋势。我们往往用“用户粘性”这一标准来衡量一个网站设计的成败。而个人门户网站，是用户忠诚度最高的一类网站，良好的交互设计必将带来更高的用户粘性。因此，交互设计在个人门户类网站中的重要性不言而喻，个人门户网站应更加注重交互设计。目前，个人门户类网站层出不穷，但拥有良好用户体验的网站并不很多，很多网站正挣扎在生死存亡的边缘。比较著名的个人门户如，netvibes、Igoogle等他们都各具特色，拥有自身的亮点，但网站交互及功能上的少许不足也使得他们没有谁可以在个人门户领域站稳脚跟。许多用户同时拥有多个个人门户，网站忠诚度不高，而无数的后来者也紧追不舍，个人门户领域异军突起，如国内的雅蛙、阔地。在这样的形势之下，达不到更好的用户体验，就注定会被用户遗弃、被其他网站取代。因此，本课题主要从获取良好用户体验方面研究个人门户类网站的交互设计。全文正文分为五大篇章：需求分析、功能模块设计、交互设计、竞品分析、界面设计。围绕着建设用户体验的流程顺序，从战略层（需求分析）、范围层（功能模块设计）、结构层（交互设计）、框架层（界面设计）至下而上对网站原型做出了全面的规划、并重点对交互模式进行了设计。此过程同时结合了对几个个人门户网站的体验，去粗取精、最后整合优秀的交互模式于自己设计之中。2.选题意义（背景）在开始每个课题之前，我们都需要有明确的选题意义，拥有能够被清楚表达的选题理由。本课题围绕以下4方面展开分析，确立了以“基于axure的个人门户类网站交互原型设计”为题的研究方向。2.1个人门户网站介绍随着互联网的发展，门户网站的兴起，人们的生活发生了划时代的转变。我们生活的方方面面都已更多的依赖于网络。在日常的工作，学习，生活中，每人每天需要接触不同的网站，点击进入数十个门户。据一项数据调查，目前中国青年层每日平均访问网站数达12个之多，其中涉及新闻类、娱乐类、生活类、交友类等不同类型的门户网站。而同一类型的门户网站,用户可能选择多个进入浏览。正如许多用户会同时拥有“土豆”和“优酷”，光临“天涯社区”之后再去“百度贴吧”等等。正因为要频繁光临不同的网站，花费大量时间，于是，一种致力于帮用户解决所有网络生活问题的网站出现了——个人门户。通过个人门户，用户可以根据个人喜好，自由的添加内容，布局页面。用户可以将自己喜欢的网站添加到自己的门户，以后上网浏览信息，再也不需要一个个网站点击进入，甚至在忘记网址的情况下惹得一身烦恼。个人门户网站，就是以个人为中心的上网入口，还可以进一步延伸为个人信息中心。个人门户具备门户的全部特征，同时能够实现个性化定制，实现内容、社区、应用的有机整合。通过个性化的呈现扩展用户利用互联网的能力，节约用户利用互联网的时间成本。互联网的发展，已到了个性化的时代，因此，个人门户将是互联网发展的必然趋势。2.2交互原型设计的重要性在交互产品设计实践中，设计师非常关注影响用户行为与习惯的各种因素。如何使用户在交互过程中获得良好的体验，为此，设计团队往往需要根据创意概念构建出一系列的装置，以不断验证想法，评估其价值，并为进一步设计深入提供基础与灵感。在交互设计中，一般把这种帮助我们与未来产品进行交互，从而获得第一手体验，并发掘新思路的装置，称之为“原型”。交互原型设计的主要作用，就是要通过设计—体验—改进（设计）的循环过程，来获得最佳的用户体验，满足用户需求，增强用户粘性。我们往往用“用户粘性”这一标准来衡量一个网站设计的成败。而个人门户网站，是用户忠诚度最高的一类网站，良好的交互设计必将带来更高的用户粘性。因此，交互设计在个人门户类网站中的重要性不言而喻，个人门户网站应更加注重交互设计。2.3原型设计法介绍原型(prototype)即把系统主要功能和接口通过快速开发制作为“样本”，以可视化的形式展现给用户，及时征求用户意见，从而明确无误地确定用户需求。同时，原型也可用于征求内部意见，作为分析和设计的接口之一，可方便于沟通，网站原型也是如此。原型设计法就是通过设计——用户体验——设计的不断循环修改，来达到最终最佳的产品设计。为什么要采用原型法？这里我们要说，原型对一个项目取得成功具有着十分重要的意义。俗话说：隔行如隔山，实际上网站开发者很难保证其制作的网站正好就是用户所需要的，用户也很难一次性把其真实的要求完全提交，开始阶段提出的往往只是对系统的期望，和比较模糊的设想而已。而原型系统为用户提供了一个靶子，看着原型系统，用户往往就能进一步提出他们的真正想法。以更进一步明确他们的功能和交互需求。2.4原型开发工具axure简介Axure是一种原型设计工具，它能够帮助网站设计者，快捷而简便的创建基于网站构架图的带注释的页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。本次设计使用原型设计方法，利用axure原型设计工具，因其具有以下诸多优势：1、Axure可快速绘制网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应网页；2、Axure内建了许多会经常使用到的widget元件，例如：按钮、图片、文字面板、选择钮、下拉式菜单等；3、Axure快速建立流程图就像建立线框图一样容易，FlowWidget中有设计流程图时会经常用到的形状，您可以轻松在流程之间加入连接线并设定连接的格式；4、其中大多数的widget可以对一个或多个事件产生动作，包括OnClick、OnMouseOver和OnMouseLeave等；5、Axure可以将wireframe，输出成符合InternetExplorer或Firefox等不同浏览器的HTMLprototype；6、AxureRP可以输出Word的格式的文件，规格文件包含了目录、网页清单、网页和附有注解的Master、Annotation、Interaction和Widget特定的资讯，以及结尾文件，规格的内容与格式也可以依据不同的阅读对象来变更。本课题选择axure这一新兴原型设计工具，避开了Word、Visio、Dreamweave等对交互表达不好、不利于演示、操作难度大、需要html知识等劣势。它更利于各种交互功能的实现及用户体验。2.5小结通过上述分析可以看出，个人门户将是互联网发展的必然趋势。关注未来的网络，重点离不开个人门户，个人门户网站也必将成为未来的焦点。因此，目前，个人门户类网站层出不穷，甚至打出了web3.0理念的招牌，一批批个性化门户网站纷纷上线，都希望在这段肥地分得一杯羹。但是拥有良好用户体验的网站并不很多，许多网站正挣扎在生死存亡的边缘。针对这一普遍现象，我们来寻求改进。网站的成功与用户体验息息相关，而用户体验便来自于交互设计的结果。可以说交互体验极大的影响着网站的生存与发展。本课题就将以交互设计为重点，致力于通过体验各类个人门户网站，提取其中优秀的交互模式，并予以整合，同时对不足之处进行改进，集合在自己的原型设计中。最终希望作品可为其他个人门户类产品设计提供参照，使网站获得更佳的用户体验，并启发其他信息系统的交互设计。同时，也希望通过设计过程，自身获得对用户体验的全面把握，以及axure原型设计工具的熟练运用。在整个课题进程中，提升策划、审美、用户心理分析、网站交互分析及运用原型设计工具的能力。如前所述，交互原型设计的最大目标便是获得良好的用户体验。“Ajax之父”JesseJamesGarrett把用户体验分解为五大要素：战略层、范围层、结构层、框架层、表现层。用户体验就是在这五个层面上一步步建设起来的。交互设计处于结构层。由此可见，要建立良好的用户体验，交互设计是重要一环。而在开始谨慎的交互设计之前，还要以明确的战略需求和清晰的功能范围为基础。本次设计就将带着获取最佳用户体验的交互设计这一目标，开始进行通向结构层交互设计的一系列分析设计。 3.需求分析成功的交互设计，其基础是一个被明确表达的“战略”，即知道网站开发者与用户双方的期许和目标。只有明确了双方的需求，才能以此为指引，设计出更加适应用户和网站开发者的功能模块及交互行为。3.1网站需求分析 本课题网站并非商业性网站，不具商业目的。此次网站交互原型设计以获取良好的用户体验为目标。希望在集合同类网站优秀交互模式的基础上，改进目前个人门户类网站存在的交互缺陷。使其最终可作为其他个人门户类网站交互设计时的参照，并启发其他信息系统的交互设计。3.2用户需求分析本课题网站属个人门户类网站，个人门户即是个人化的门户网站，其用户人群包括几乎所有网民，涉及各个层次的人。而在未来，当个人门户发展更加成熟普及，将会出现每个网民都拥有自己的门户，真正的实现网络个性化。目前，使用个人门户网的用户大致集中在中青年层，大学生和白领阶层是最主要的用户。而白领阶层中男性女性的需求又颇具差异，需区别对待。本网站的用户群主要定位为这三种。以下以具体实例的方式，对不同用户进行了需求分析。并根据各自特点，着重描述他们对功能和交互模式的不同需求。3.2.1大学生大学生群体是最易接受新事物的一个群体，对于网络的接受度颇高，并不断的有新鲜需求提出。他们接触网络的历史较长，个性化个人门户是追求时尚个性的他们首选的网站。主要以娱乐交友为目的的他们对此类网站拥有他们的独特需求。（1）用户实例姓名：所在城市：网龄（年）：李菁菁杭州5职业每天上网时间上网主要工作大学生不定娱乐、交友图3-1李菁菁（2）用户需求功能需求：=1\*GB3①通过网络联络老朋友，结交新朋友；=2\*GB3②关注各式新闻资讯，特别是娱乐、健身类；=3\*GB3③网页主题可选择任意更换。交互需求：=1\*GB3①应该尽可能帮助用户避免要求他们记住各种信息，例如好友搜索，最好可以通过信息引导；=2\*GB3②要在用户完成某项操作后进行提示，系统给予反馈，使他们知道自己是否达成目标；③网站内随处有信息提示； =4\*GB3④当使用过程出现错误，能明确指出错误原因，并使用户能理解。（3）网站规划对此类用户网站拟实现——功能模块：=1\*GB3①推出“联系人”版块，里面收录“用户好友”，同时可以“搜索好友”；=2\*GB3②网站提供各种推荐的widgets，且归类便于用户搜索添加；=3\*GB3③推出多种网页主题供用户选择添加。交互模式：=1\*GB3①在“联系人”版块进行好友搜索时，利用下拉框分类制作好友各项信息，以引导用户搜索；好友搜索也通过关键字匹配，协助用户记忆；=2\*GB3②在用户操作某项任务过程中，随时显示完成情况。如“下载”过程，显示下载进度，以便用户了解自己完成目标的情况；=3\*GB3③网站内有更多的直接显示，如鼠标触及“联系人”便可显示部分联系人情况，无需点击进入；=4\*GB3④注册过程，利用函数控制输入信息的正确与否，即时校验，明确指出错误。3.2.2女性白领白领们平日工作会多处使用到网络，因此他们经常利用网络进行工作联络，收看新闻资讯等等。他们工作繁忙，更加希望网络使用方便简单。但是白领女性与男性的需求又有不同，他们通常拥有自己的隐私、并希望得到保护。他们对网站也独具美观上的挑剔，喜欢简洁大方的界面。（1）用户实例姓名：所在城市：网龄（年）：林楠上海10职业每天上网时间上网主要工作基层管理人员6工作联络、收看新闻图3-2林楠用户需求功能需求：=1\*GB3①网站可以无限添加页签，且可为网站页面添加个性化标题；=2\*GB3②建议网站能建立私有页面，用以保存用户隐私，公开页面供他人光顾。交互需求：=1\*GB3①网站注册程序不要那么繁琐；=2\*GB3②界面更加简洁，不要经常进行页面跳转。（3）网站规划对此类用户网站拟实现——功能模块：=1\*GB3①网站设置“添加标签页”按钮，在同一张页面中可添加标签且为各标签页设置名称；=2\*GB3②网站将采取分开建立私有页面和公开页面的形式。交互需求：=1\*GB3①网站注册时仅填写最少量信息，注册结束登录后再完善个人资料；=2\*GB3②以下拉或弹出窗口的形式，防止总是跳转页面，信息尽量在一个页面显示。3.2.3男性白领白领们平日工作会多处使用到网络，因此他们经常利用网络进行工作联络，收看新闻资讯等等。他们工作繁忙，更加希望网络使用方便简单。但是白领男性与女性的需求又有不同。他们通常喜欢网络也给予他们更多的自主，他们喜欢探索，他们比女性不能忍耐，希望能第一时间运用网站各项功能，他们不够细心，往往容易出错，因此更需要网站有强大的纠错和弥补犯错失误的功能。（1）用户实例姓名：所在城市：网龄（年）：吴越深圳12职业每天上网时间上网主要工作营销经理4工作联络、收看新闻图3-3吴越（2）用户需求功能需求：=1\*GB3①除网站推荐内容之外，网站提供搜索工具，方便用户自主进行个性化搜索；=2\*GB3②在网页上给好友发信息，有利于网络信息及时分享。交互需求：=1\*GB3①网站添加的部分模块在网页内可直接编辑，使搜看起来更直观；=2\*GB3②网站可以不用注册先行体验部分功能；③应该方便用户取消某个操作，增加有撤销和恢复的功能，防止一失足成千古恨。(3)网站规划对此类用户网站拟实现——功能模块：=1\*GB3①推出“谷歌搜索”栏，以便用户通过搜索自己感兴趣的页面，不局限于网站的推荐；=2\*GB3②推出给好友发信息版块，可选择自己网内好友及时发送信息。交互模式：=1\*GB3①页签内添加的每个小widget可直接编辑；=2\*GB3②用户可以以游客身份体验默认公开页面的部分功能；=3\*GB3③推出“撤销”功能，以弥补用户的再次失误。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首页在首页，网站主要添加以下几方面内容：=1\*GB3①了解一下：“了解一下”提供链接到网站官方博客，以使用户更多的了解网站信息；=2\*GB3②网站介绍版块：以小黑板形式，形象的展示网站主要提供的内容和功能；=3\*GB3③登录：用于注册用户登录；另外添加“记住密码”功能，便于再次访问，“忘记密码”帮助用户找回密码；=4\*GB3④注册：“立即注册”按钮，引导非会员用户进入注册页面；=5\*GB3⑤浏览一下：为游客提供浏览功能，不注册即可体验默认公开页面的部分功能；=6\*GB3⑥功能简介：提供链接到官方博客的功能介绍页面；=7\*GB3⑦最新动态：显示最新的网站动态，如某个widget新上线等信息；=8\*GB3⑧活跃用户：显示网站近期活跃会员，其他用户可点击浏览该用户公开页面，或加其为好友。（2）我的私有页面图4-3我的私有页面我的私有页面提供以下几方面内容：=1\*GB3①添加内容：此版块提供用户给页面添加内容，包括“分类浏览widget”“添加最重要的widget”、“下载最新的widget”三块，可以通过网站推荐，自主搜索等形式添加应用模块到页面；=2\*GB3②资料：即个人的信息中心，包括姓名、性别、公开页面地址等，重点推出用户状态描述，用户可以就自己的心情添加一句话，可供互相浏览；=3\*GB3③近况：包括个人最近的公开或私人活动，以及朋友动态；=4\*GB3④联系人：包括好友、关注者、寻找朋友和邀请好友；=5\*GB3⑤页面设置：此版块包括页面语言、主题及壁纸的更换等；=6\*GB3⑥添加（更改）页面标题版块：可在此处添加、更改页面标题；=7\*GB3⑦google搜索版块：在此处可通过谷歌搜索需要的信息；=8\*GB3⑧页签版块：此版块是此页最重要区域，放置用户添加的各项widget。用户可以分类添加页签，置放各类widget，并为各页签命名。在页签名处可选择“编辑”页签进行编辑页面布局，页签名称和页签图标。(3)我的公开页面图4-4我的公开页面我的公开页面提供以下几方面的内容：=1\*GB3①主页：展示个人基本资料、留言信息、空间概要等基本情况，是集合公开页面所有内容的一个简要介绍；=2\*GB3②文章：在此版块可以写文章，将文章进行分类，并在文章后面推出评论模块，与博客内容类似；=3\*GB3③相册：提供给用户上传管理照片；用户可以在此创建自己的相册，管理照片，并可自动播放影集；=4\*GB3④群组：在此版块，用户可以创建群，加入群，发帖留言；=5\*GB3⑤此外，公开页面仍然保留私有页面创建个性化页签、编辑资料、添加联系人、浏览近况等功能。明确的需求和功能模块，为交互设计打下了方向性基础。但仅根据需求和内容来判断网站中的交互行为，理论上可行，实际上却不尽如人意。仍有无数网站在完善的需求分析和内容设计之后，同样败在交互设计环节。因此，为避免这一现象，获得更加实际的、良好的交互体验，在交互设计之前对同类竞争网站的分析就显得颇为重要。通过竞品体验，取其精华、去其糟粕。在理论与实际的结合之上，才能为最终的交互设计打下坚实的基础。5.竞品分析（同类网站交互体验分析）由需求分析、功能模块设计之后所得出的交互设计，理论上符合了建立良好用户体验和网站原型的程序。但更多交互设计的细节还需在实际的体验中才能完善，毕竟理论是基于一定的主观想象，而实际操作后发现的问题，用户体验后反馈的建议，才是最实际的设计源泉。为此，我选择了几个个人门户类网站进行交互体验，希望在理论分析的基础之上，再吸取实际网站的精华，继承它们的优秀交互模式，并对不足之处在本设计中适当改进。Netvibes（） 5.1.1优点1描述：添加内容时，以下拉框形式弹出“添加内容”模块（如下图），而无需跳转页面。图5-1增加内容前图5-2增加内容后5.1.2优点2描述：可以浮动文字的形式显示信息。如图，当鼠标悬浮于某位置时，可显示更多隐藏内容,以浮动文字的方式显示。图5-3鼠标移入前图5-4鼠标移入后5.1.3描述:“个人状态”部分只可读，不可写入，鼠标点击时不可直接修改。修改：在状态语言处点击可直接修改状态。图5-5原形图5-6修改后5.1.4缺点2描述：在“搜索朋友”板块，没有站内搜索的引导，只能通过邮箱搜索自己的朋友，无法通过搜索引导，来寻找筛选结识新朋友。修改：参照“”，制作一个找朋友的引导搜索，利用下拉菜单细分朋友资料信息。图5-7原形图5-8修改后（样图）5.2Igoogle(/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用户使用流程的交互设计下面将对设计中几处主要的流程型交互模式进行介绍。基本形状示意：开始模块或动作结束判段文档动作产生的方向可能发生的动作登录用户在登录时，如果没有注册则阻止登录，提示用户先注册，注册成功则进入私有页面，注册失败则停留在注册页面；若用户名密码错误，提示重新输入，若输入正确则进入私有页面。交互流程如图6-1：图6-1登录流程图新建页签用户点击“新建页签”，弹出新建页签窗口，若填入页签名称并保存，页签更新，若取消则页签不更新，新建窗口消失，还原为新建前状态。交互流程如图6-2：图6-2新建页签流程图删除页签点击编辑页签按钮，出现编辑窗口，在此窗口可更改页签名、页签图标、页签布局及删除页签。若确认删除则页签更新，更新后可选择撤销，回到撤销前状态；若取消删除则不更新。交互流程如图：6-3图6-3删除页签流程图写文章进入公开页面，选择“写文章”，弹出编辑窗口，完成文章后，可选择发表文章或存为草稿。若发表文章则页面更新至“文章归档”版块，文章数目增加；若“存为草稿”则页面更新至“草稿”版块，文章数目增加。交互流程如图6-4：图6-4撰写文章流程图创建相册进入公开页面选择相册，点击创建相册，将出现创建窗口，此时键入相册名，确定后即创建好相册。然后再往相册中上传相片，最后得到更新后的相册。交互流程如图6-5：图6-5创建相册流程图创建群组进入我的公开页面群组页签，点击创建新群组,随即打开“创建群组”页面，此时键入群组名称，确定后，页面将切回群组页签，此时“群组”版块已更新，刚刚创建的群组名称显示在此版块。交互流程如图6-6：图6-6创建群组流程图发帖用户进入自己的群，在帖子区域，点击“发帖”，弹出编辑框，写好编辑内容后，确认发送帖子，此时页面回转至帖子版块，在帖子版块下的“最新回复”栏将看到刚刚发送的帖子题目，且置顶。交互流程如图6-7：图6-7发帖流程图6.3界面呈现的交互设计在设计网站的交互过程时，我们并不是凭空设想，而是根据一定的依据来选择了某种交互模式。交互模式一般从模式库中提取，所谓交互模式库，就是集合了许多方面最佳做法的交互设计，它包含了前人收集的各种实例，实用性强，是一个交互设计参考的工具箱。每个网站的交互设计都是如此，都需要在对成熟的交互模式进行分析之后，结合网站实际，选择出适应本网站的模式。因此，本网站所使用的交互模式也均是经过分析选择、体验对比而定的。以下将对本课题中重点的交互模式设计进行介绍。1）即时校验问题：用户有时要输入很多信息，但最后提交时，只要有一个信息错误有可能要全部重新填写。解决：在每次用户输入信息后，都自动即时校验用户所输入的信息是否正确，避免用户全部提交后才发现问题，需要全部重写。保持用户的耐性。应用：本网站多处使用了即时校验。如注册页面，用户在使用网站之前需要有一个账户，注册账户往往需要用户填写多个信息，其中用户名，密码等都是需要检验的项目。使用即时校验，在用户输完信息后直接校验信息的可用性和正确性，以保证用户注册成功的概率。设计原因：避免用户由于错误重复繁琐的任务，而失去耐心。设计成果图：图6-8图6-8用户名密码校验设计源代码：表6-1表6-1即时校验footnotelabelinteractionspecification1ｙOnKeyUp:

Case1(Iflengthofvalueofwidgetｙisgreaterthan"10"):

Sety1stateto２

Case2(ElseIfTrue):

Sety1stateto１

Case3(Iftextonwidgetｙequals"tianlina"):

Sety1stateto重复名键入，不超过10位2ｍOnKeyUp:

Case1(Iflengthofvalueofwidgetｍislessthan"6"):

Setm1stateto2

Case2(ElseIfTrue):

Setm1stateto1至少六位3ｑOnKeyUp:

Case1(Iftextonwidgetｑdoesnotequaltextonwidgetｍ):

Setq1stateto2

Case2(ElseIfTrue):

Setq1stateto1密码应该一致4OnClick:

Case1(Iflengthofvalueofwidgetｙislessorequals"10"andlengthofvalueofwidgetｍisgreaterorequals"6"andtextonwidgetｑequalstextonwidgetｍ):

Open注册成功inCurrentWindow

Case2(ElseIfTrue):

Set２statetoState1成功即跳转页面，失败显示“错误”2)可折叠版面问题：用户在查看信息或功能时，只需查看某一部分的信息。例如网站中”最新的widget”列表，用户只需要查看最新关于新闻的widget。解决：制作成点击后可迅速打开或折叠的面板，通过折叠区域分类储藏信息。应用：“添加内容”板块，有三个种类可选择，“分类添加”、“最重要的添加”、“下载添加”。利用可折叠版面，在查看其中一个项目时，隐藏其它的项目。当切换到“分类浏览”版面时，隐藏其余版块。可折叠版面可以使几种内容相互切换，而不需占用空间。折叠区域分类储藏信息，隐藏不必要的信息。不仅可以帮助用户快速找到自己想要的信息，而且可以保持界面的整洁。设计原因：由于分类信息较多，如此设计可以节省网页空间，美观。设计成果图：图6-9图6-9添加内容版块设计源代码：表6-2表6-2“添加内容”可折叠版面的交互设计footnotelabelinteractionspecification1OnClick:

Case1:

Set添加内容1stateto分类

Hide分类panel右边跳转至分类状态2OnClick:

Case1:

Set添加内容1stateto重要跳转至“最重要的``状态3OnClick:

Case1:

Set添加内容1stateto下载

Hide下载等待右侧跳转状态3)自动填充问题：用户在选择某个名称，如人名，地名时，需要输入他们的完整名称。但往往由于信息量过大，用户会时常忘记此类名称。因此在输入的时候可能时常出错，甚至会由于遗忘而带来苦恼。解决：根据用户输入的内容，显示与用户输入的内容相匹配的建议列表。同时根据用户继续输入的内容继续缩小或者扩大建议列表。便可避免用户输入错误，并可以让用户更快更方便的找到所要的名称。应用：在联系人版块，用户可自行输入名称搜索联系人，但由于每个用户都可能存在多个联系人，所以应想法尽可能的减少用户的记忆负担。利用自动填充功能，可以进行关键字匹配，如输入“李”，自动匹配李姓联系人的名字，由此引导和提示用户需要的信息，协助用户记忆。设计原因：便于帮助用户查找信息，帮助其记忆。设计成果图：图6-10图6-10搜索联系人版块设计源代码：表6-3、表6-4、表6-5表6-3自动填充设计1footnotelabelinteractionspecification11OnKeyUp:

Case1(Iftextonwidget1equals"李"):

Set2stateto2

Case2(ElseIftextonwidget1equals"李小"):

Set2stateto3

Case3(ElseIftextonwidget1doesnotequal"李"):

Set2stateto1

OnFocus:

Case1(Iftextonwidget1equals"李"):

Set2stateto2

Case2(ElseIftextonwidget1equals"李小"):

Set2stateto3

OnLostFocus:

Case1:

Set2stateto1键入李、或李小、或非”李“人名，自动填充表6-4自动填充设计2footnotelabelinteraction1m1OnChange:

Case1(Ifselectedoptionofm1equals"李安"):

Settextonwidget1equaltoselectedoptionofm1

Case1(ElseIfselectedoptionofm1equals"李雪"):

Settextonwidget1equaltoselectedoptionofm1

Case1(ElseIfselectedoptionofm1equals"李玉"):

Settextonwidget1equaltoselectedoptionofm1

Case1(ElseIfselectedoptionofm1equals"李小龙"):

Settextonwidget1equaltoselectedoptionofm1

Case1(ElseIfselectedoptionofm1equals"李大鎏"):

Settextonwidget1equaltoselectedoptionofm1

Case1(ElseIfselectedoptionofm1equals"李小琳"):

Settextonwidget1equaltoselectedoptionofm1

Case1(ElseIfselectedoptionofm1equals"李小双"):

Settextonwidget1equaltoselectedoptionofm1表6-5自动填充设计3footnotelabelinteraction1m2OnChange:

Case1(Ifselectedoptionofm2equals"李小琳"):

Settextonwidget1equaltoselectedoptionofm2

Case1(ElseIfselectedoptionofm2equals"李小双"):

Settextonwidget1equaltoselectedoptionofm2

Case1(ElseIfselectedoptionofm2equals"李小龙"):

Settextonwidget1equaltoselectedoptionofm24)光箱问题：用户需要在不切换页面的同时，达到对某个动作指示信息强烈的关注。解决：使用灯箱效果。将目的窗口以外的主页蒙上阴影，让用户的注意力集中在目的窗口的当前任务。同时设置任务标题，提示用户当前任务是做什么的。设置逃逸出口，使用户可以随时放弃任务，回到原来页面。应用：用户在添加页签的时候，将出现灯箱效果，弹出命名页签窗口，此时的页面其余部分均至于阴影之下，也不可点击，只能聚焦到添加窗口。在命名页签窗口可键入页签名，确认即为添加，取消则还原。设计原因：通过灯箱效果，掩盖页面信息，使页面显得不冗杂，更加美观。设计成果图：图6-11图6-11添加页签版块设计源代码：表6-6表6-6灯箱效果的交互设计FootnoteLabelInteractionsSpecification1OnClick:

Case1:

HidePanel2OnClick:

Case1:

SetvalueofvariableOnLoadVariableequaltotextonwidget页面名称andtextonwidget新增tabequalto"[[OnLoadVariable]]"

Set第四个stateto新增,页签stateto其他

Hide灯箱添加一个新页签3OnClick:

Case1:

Hide灯箱隐藏“新建页签”5)“豆腐干”模式问题：如网站聚合图片类应用网站时，需将图片显示在更新条目上。想要给浏览者展示图片、视频或者网页，但由于页面加载时间的原因，不想将完整尺寸的图片、视频或网页成列出来。解决：陈列出较小尺寸的图片、视频或网页。点击查看原来或交大尺寸的图片。应用：在相册版块，可点击小图查看大图。设计原因：使用“豆腐干”，可以使用户快速浏览数量较多的图片，对图片有初步的印象。并选择自己感兴趣的图片，点击查看图片的原始尺寸。设计成果图：图6-12图6-12相册设计源代码：表6-7表6-7“豆腐干”模式的交互设计FootnoteLabelInteractions1OnClick:

Case1:

Set大图statetoState12OnClick:

Case1:

Set大图stateto23OnClick:

Case1:

Set大图stateto34OnClick:

Case1:

Set大图stateto45OnClick:

Case1:

Set大图stateto56）直接编辑问题：用户想要在页面上直接编辑某轻量级的文字，而不需要切换页面。在可读的地方，直接写入，即编辑。解决：让用户不切换页面，也不需要弹出窗口，直接在当前页面需要编辑的地方点击编辑，并保存或者取消。应用：在页面标题处，点击原来标题，即可进行修改，在可点的地方即可编辑。设计原因：标题更改对用户来讲是一次很平常的事情，因此不应该过于程序复杂，直接编辑便于用户的多次更改。设计成果图：图6-13图6-13编辑标题设计源代码：表6-8表6-8直接编辑的交互设计FootnoteLabelInteractions1编辑了OnKeyUp:

Case1:

SetvalueofvariableOnLoadVariableequaltotextonwidget编辑了andtextonwidget标题了equalto"[[OnLoadVariable]]"

OnLostFocus:

Case1:

Set空间标题stateto标题7)页签问题：用户需要在所有信息中找到自己想要的那一种类的信息。解决：横或纵向排布页签，页签下的模块内容随着页签的不同而改变，在不切换页面的前提下分类查看用户所需的信息。当前选定的类别应该区别于其他页签。可以用对比鲜明的颜色，形状，大小或字体。最好是建立必要的对比，尤其是为每个页签命不同的名称。应用：本网站主要的应用便是页签。网站属于个人门户网站，通过页签用户可以方便自由添加版块。用户可以对自己添加的内容进行分类，便于日后分类查看，个人门户将会拥有各种不一样的信息，用户可随时添加或删除页签。设计原因：个人门户网站的用户往往是无规律的添加各式的内容，特别需要页签进行分类导航。而且他们上网总是会进入个人门户去浏览信息，希望一站式解决一切网络生活。因此，他们不希望网页经常跳动影响他们的使用。设计成果图：图6-14图6-14页签设计源代码：表6-9表6-9页签切换操作的交互设计FootnoteLabelInteractionsSpecification1OnClick:

Case1:

Set页签stateto交友可切换2OnClick:

Case1:

Set页签stateto娱乐3新闻标题OnClick:

Case1:

Set页签stateto新闻4OnClick:

Case1:

Settextonwidget页面名称equalto""

Show灯箱点击增加页签评论框问题：用户希望对他所了解的事物从不同方面进行评价。解决：提供评论版块。此评论的结果必须置于低于上一次的评论处，或处于最高处，以显示其为最近评论，要略高于评论框本身。突出了新的意见和滚动页面这一立场，以便它清楚地表明，评论已添加。同时评论不应只显示自己的意见，而且包括时间和日期，这也可被称之为张贴海报。应用：在我的公开页面，自己可以发布文章，供来访者阅读，同时他们可以添加评论。对文章进行评论。在评论框外可以看到最近的几条评论，也可以显示自己发出后的评论状态。设计原因：公开页面的日志是用户最希望与他人分享的信息，目前博客中盛行。所以添加评论框必不可少，而不只是自己可以评论，用户还希望可以查看他们的评论，以及自己发出评论后的状态，因此如此设置。设计成果图：图6-15图6-15评论框设计源代码：表6-10表6-10评论过程交互设计FootnoteLabelInteractions1OnClick:

Case1(Iftextonwidget评论框equals""):

Hide评论

MoveContainer234to(10,70)

Case2(ElseIfTrue):

Set评论框stateto22OnClick:

Case1(Iftextonwidget评论框doesnotequal""):

SetvalueofvariableOnLoadVariableequaltotextonwidget评论框andtextonwidget评论后equalto"[[OnLoadVariable]]"

Set评论框stateto2

Case2(ElseIfTrue):

Hide评论

MoveContainer234to(10,70)有了充实的内容，完整的交互流程之后，便要进一步提炼出内容和交互的重点环节，将他们放置在重点的位置，以加强用户体验，即确定详细的界面外观。界面设计的重要之处就在于，使用户一眼就看到最重要的东西，减少非重点东西的可视性。以下便以此为思路，开始对页面进行界面布局。7.界面设计界面设计也是建设网站原型的关键一环，良好的界面设计对交互体验将产生深远影响。设想一下，如果一个内容完善，交互容易的网站，而你却找不到自己最关心的内容，最急于操作的按钮，你会不会烦躁？离开？不再光顾？答案是肯定的。它告诉我们，一个良好的界面布局也能推动交互体验的结果，因此，我们本着完善网站原型及交互设计的原则，对本网站的界面进行了如下设计。7.1首页设计7.1.1页面描述该页面为用户进入网站接触的第一个页面。无论是会员用户还是游客，他们对网站的第一印象都来自于此张页面。在此页面内，用户可以看到网站的简要介绍；浏览网站的公开页面，先行体验部分功能。同时在此页面进行登录、注册；此页面同时即时更新网站的活动和会员信息，以吸引游客和会员的眼球。7.1.2网页中模块优先级表7-1首页中模块优先级模块名称内容组成重要级别A.网站介绍版块网站介绍很重要B.登录注册版块登录、注册重要C.最新动态版块最新动态、活跃用户重要D.游客浏览版块浏览一下一般E.功能简介版块功能简介一般7.1.3页面布局图7-1“我的首页”布局7.2私有页面设计7.2.1页面描述该页面为会员用户登录后显示页面。会员可以在里面自由添加自己喜欢的各类widget，更改个人资料，添加好友、查看近况等。在私有页面进行私人页面的一切管理，添加删除，布局页面设置等，是一个完全自主的地盘。7.2.2表7-2私有页中模块优先级模块名称内容组成重要级别A.页签版块添加、编辑页签很重要B.标题和自主搜索标题更改、谷歌搜索重要C.各种资料（信息）设置区块添加内容、个人资料、近况、联系人、页面设置重要7.2.3图7-2“我的私有页面”布局7.3公开页面设计7.3.1该页面为会员公开的页面，以及游客浏览的页面，游客可以在此页面上体验部分功能。此页面包括会员自主添加用于公开的各页签，其中默认的几张页签放置用户的基本资料（首页、文章、相册、群组），其余页签用户可自由添加各项widget。此页面仍然保存用户在私有页面的少量基本信息，用于其他用户浏览。7.3.2表7-3公开页中模块优先级模块名称内容组成重要级别A.页签版块包括主页、文章、相册、群组等默认页签，除此还可自主添加页签。很重要B.标题和自主搜索标题更改、谷歌搜索重要C.各种资料（信息）设置区块添加内容、个人资料、页面设置，联系人等重要7.3.3页面布局：图7-3“我的公开页面”布局通过以上各层次的分析设计，已经初步建立了网站雏形，且重点对交互原型进行了设计。本网站通过需求分析，确定了网站内容及交互需求，再对交互过程进行了设计，最后辅之界面设计以完善网站原型。同时，还在对比多个网站的前提下，集合了大量优秀交互模式，去粗取精，最后得出网站原型。8.总结本次网站交互原型设计，具有自身的特色和创新之处。首先，本网站在个人门户中引入了更多互动的功能，把个人门户与博客、群组相结合，使得个人门户拉近了群体间的联系，不再是供个人使用的孤立的门户；其次，网站在交互模式设计上，紧紧抓住用户体验这一关键点。以用户为中心，通过分析设计，再分析再设计的过程，反复更正。尤其运用大量篇幅对其他网站进行了对比研究，使交互设计更加切合用户体验的实际；第三，本网站基本实现了一页式网站的功能，用极少的页面跳转，在少量页面实现了众多基本功能。但是，也看到在本次设计过程中存在一定不足，这也是日后应该加强改进和弥补的地方。主要包括几点：