3.1 备课笔记-网页交互原型工具Axure初识

编号07-01【web产品交互设计开发制作】编号07-01学习任务一、网页交互原型工具Axure初识一、课程说明与要求1.课程说明本阶段课程分为四个部分，第一部分为为何要进行原型设计，进行原型设计的意义；第二部分为什么是交互设计，介绍了交互的原理；第三部分为Axure原型设计应用，介绍了Axure的工作界面，以及交互原型的设计流程，第四部分为如何制定Axure设计体系，讲解了Axure设计原型的步骤，通过学习网页交互原型工具Axure初识，学生可以全面地理解原型交互设计的制作步骤，提高原型设计制作能力。2.工具材料准备说明本课的作业作品实践需要同学们提前准备一些工具和材料，教师提供软件下载链接。工具材料下载链接备注Axure/downloadthanks每台电脑安装二、学情分析与课程导入1.学情分析本课程为原型设计理论介绍课程，原型交互设计需要有一个完整的原型设计流程，需要学生在学习过程中，能通过自己思考在原型交互设计中各个步骤。在学习原型交互设计理论初识时，要不断思考交互设计各个流程环节是否符合交互设计理念，思考如何设计最完善的交互设计原型。2.课程导入在学习本节课之前，想必大家会问会什么要进行交互原型制作，这时因为由于在人与人的沟通中普遍存在问题，一是沟通的时间成本，二是沟通的有效性，而原型的制作成本和演示成本都是比较低，除非比较复杂或者保真度要求比较高的原型，平时在描述一个功能的时候，可能花了很多时间仍不能完全描述清楚，且每个人理解能力上的差异，无法让每个人都完全理解自己的想法，有原型的演示的话，一目了然，用户可以根据自身的判断，再结合演示者的描述，理解起来就不那么费劲了。三、理论知识讲解（一）为何要进行原型设计1.沟通中存在的问题随着原型应用的普及，越来越多的产品会采用原型设计来表述、完善整体需求，这样做自然有其原因，但为何要进行原型设计呢？在回答这个问题前，首先要说一下沟通中普遍存在的问题。那么沟通的成本通常包含两部分，一是沟通的时间成本，一个项目的开发制作团队大致有一下人员分工，因此需要与各自分工的人员进行产品沟通，有这个图片可以看出如果只是靠口述各个需求和方案的话需要大量的时间，且不一定能描述清楚自己想要标的意思，有可能需要反复去描述自己的想法。而导致时间成本的增加。另一个沟通成本是沟通的有效性，比如需要向用户说明设计方案的时候，单纯的口头沟通，肯定没有有实质交付物的沟通来的顺畅，这里的实质交付物可以是文档、草图、原型，而原型则比前两者要好。2.原型在沟通的好处编号07-02编号07-02原型的制作成本和演示成本都是比较低，除非比较复杂或者保真度要求比较高的原型，在描述一个功能的时候，可能花了很多时间仍不能完全描述清楚，且用户理解能力上的差异，必然效果不会好，有原型的演示的话，一目了然，用户可以根据自身的判断，再结合演示者的描述，理解起来就不那么费劲了。3.原型的价值与目的原型的价值就是可以被不断的修改、推翻、打磨、锤炼，直至达成最终的结果，产品可以利用原型来确定最终是否投入开发等人力物力来实现，也即原型的价值就是产品的替身。原型设计的最终目的是为了准确、方便、快捷的表达产品设计人员的产品设计意图，并可以达成与沟通对象的沟通辅助。我们一般都从目的看做某件事的价值，原型设计的目的表明在通常的软件或者系统研发过程当中，原型设计是比较重要的，因为产品设计思想决定产品的后续成败。什么是交互设计【思政融入（交互设计努力去创造和建立的是人与产品及服务之间有意义的关系，以“在充满社会复杂性的物质世界中嵌入信息技术”为中心。交互系统设计的目标可以从“可用性”和“用户体验”两个层面上进行分析，关注以人为本的用户需求。）】1.什么是交互交互：及沟通交流，发生互动关系编号07-03编号07-03人和人之间的交互最经典的一幕可以用孙悟空智斗金角大王、银角大王。金角大王说：孙行者，我叫你一声你敢答应吗？然后，金角大王就叫：孙行者。孙悟空回答：爷爷在此。就这样，孙悟空就被收进去了。这就是一个简单的交互。再比如，我们每天上班，到公司和同事打招呼。你说：“早上好呀”，同事回答“早”。这也是一个常见的交流互动。人和机器之间的交互人和人之间的交互比较好理解，那人和机器之间也存在交互。比如我们使用手机中的语音功能，会提示我们说话，当语音助手识别后，就会执行相应的操作，这就是人和机器之间的交互。智能时代的交互我们和任何机器之间的发生互动关系，都是属于交互。往更广的意义上说，如果失去了交互，地球将不再运转，将毫无生机。现在，智能时代已经到来，我们除了研究人和人、机器、产品、环境、服务、系统等之间的关系，还要研究机器和人、机器、产品、环境、服务、系统之间的关系。当人（或机器）和事物（无论是人、机器、产品、服务、系统、环境等等）发生双向的信息交流和互动，就是一种交互行为。编号07-04编号07-042.什么是设计设计，它源于社会。设计的实质在于发现一个很多人都遇到的问题，然后试着去解决的过程。设计主要表现在“发现问题–解决问题”。而交互设计就是发现和解决人（或机器）和事物（包括人、机器、产品、服务、系统、环境等等）之间的互动关系问题。3.交互设计的工作内容交互设计的工作内容从用户体验要素来说分五个层级：战略层、范围层、结构层、框架层、表现层表示着你的不同能力，引用一张图，比较形象的描绘了交互设计的能力范畴和价值。各个级别的类型交互设计师负责结构层和框架层，高级交互则涵盖范围层，体验顾问则全部涵盖，涵盖范畴越大，价值越大，级别越高。编号07-05编号07-05（三）应用Axure做原型设计……………………【重点】1.什么是原型呢？原型是产品的最初形态，确认用户对产品界面和操作功能可用性的需求，高保真的原型接近于产品的最终形态，但仍只是原型。产品原型简单的说就是产品设计成形之前的一个大体框架，对网站来讲，就是将页面模块、元素进行粗放式的排版和布局，深入一些，还会加入一些交互性的元素，使其更加具体、形象和生动。编号07-06编号07-062.Axure初始Axure与其他原型工具对比优点1.有强大的编辑功能,使得制作素材库会更便捷一点。2.更快的复制粘贴，素材库和原型库会多一些。3.可以项目共享，使得同事间可以同步工作，并保留所有工作历史，并可以随时导出历史版本的项目文档Axure工具分为以下几个部分1为菜单栏和部分样式工具栏；2为工作区域3为页面栏，可以显示当前工作的页面及其他的页面，可以添加，重命名，重新组织页面4为某一个页面的概要视图，从中你可以看到某一个页面所有的元件，母版，动态面板等等，可以对其的顺序进行排序，筛选等等；5元件库。用来装载元件的库，可以从库向画布中拖入元件，也可以从这里加载库，在这里，你可以在不同的库之间进行切换，也可以创建属于自己的库。6母版。这里可以添加，重命名，重新组织母版，可以集中对母版进行管理。（此处的管理对所有页面中被包含的母版均适用）7样式窗格。对元件进行编辑8交互。对元件或页面的交互进行定义9注释。添加或编辑注释。编号07-07编号07-073.完整的交互设计流程交互设计流程分为以下几个步骤定性研究：针对可能使用你的产品的人，可以是问卷、访谈等；方式进行研究【思政融入（定性研究是指通过发掘问题、理解事件现象、分析人类的行为与观点以及回答提问来获取敏锐的洞察力，洞察力是一种有目的、有计划、比较持久的知觉过程，是知觉的高级形式。是个体分辨事物细节的能力）】二、确定人物角色：即产品的典型用户，可以有一种或几种。三、写问题脚本：罗列人物角色在使用产品时可能遇到的问题，可以整理成一个故事便于别人理解；四、写动作脚本：像写故事一样，写人物角色在使用你设计好的产品时，发生的细节。注意，这个时候你的交互方案的概念模型已经基本成型了，这个概念模型是通过解决问题脚本里的问题而得出的；五、画线框图：这个线框图是通过把动作脚本里的概念模型转化成视觉模型得到的；六、制作原型：做出来好像已经可以使用的东西，这我们就有很多原型工具可以利用；七、专家评测：至少两名设计师或对交互设计比较了解的人通过反复测试原型。找到问题后修改线框图并更新原型；八、用户评测：让用户使用原型，可以给他们一些任务去完成。根据用户在使用过程中的问题和建议进行进一步修改。（四）如何制定Axure设计体系确定信息架构信息架构对于一个整体产品而言是非常重要的，犹如现在盖房子时的地基和框架结构，整个结构决定了将来的房型样子，及房子是否稳固。而WEB产品的信息架构则决定了产品未来的功能导航结构，是一个底层框架的作用，因此非常重要。编号07-08编号07-08一般来讲，我们在做需求分析的时候，都会把几个主要的功能点抓出来，这几个功能点就可以浓缩一下形成产品的初步信息架构。比如要做一个合同管理的功能，要求实现合同信息管理，合同履约管理，合同统计报表等功能，这里列出来的功能点就可以拿来做信息架构。再比如我们要做一个会员管理的功能，注册和登录是必不可少的功能点，那么就可以将其列为会员管理下的两个基本信息架构。接着确定页面布局在用Axure做布局设计的时候，可以用默认组件库里面的占位符组件来设计（关于占位符组件的使用，参照这里），先将需要设计的区块用占位符布局，然后标上文字标示，以此来表示这里将来需要设计放置的内容。这个步骤基本决定了一个页面的布局。编号07-09编号07-09完善设计内容：1.定UI风格，对常用的组件进行视觉封装定交互规则，基本操作的走向和反馈等布局和排版规则制定设计规则四、实践技能训练（一）布置训练任务任务1：搜索并思考智能时代下的网页原型中需要哪些交互行为。任务2：从网络中查找Axure原型交互设计案例，分析其设计流程。（二）实战项目案例根据原型设计体系使用Axure简单制作原型。……………【难点】教师重点指导：交互设计流程以及原型设计体系的使用。【学生初次进行设计实践，教师应多引导，帮助学生形成设计体系，指导学生完成原型设计】五、课堂总结今天，我们主要结合网页交互原型工具Axure初识，学习了什么是交互设计、Axure原型交互设计流程以及Axure交互设计体系，想必同学们通过讲解对制作Axure交互设计原型有了一定了解和掌握。希望同学们课后继续对你所接触到的相关原型案例，用专业的眼光，分析Axure交互设计