达内web前端配套课件代码ui设计wfd axure

AP原型制作项目基础与原型制作基础Unit01上午09:00~09:30作业讲解和回顾09:30~10:20项目流程与信息架构设计10:30~11:2011:30~12:20Axure操作基础下午14:00~14:5015:00~15:50制作低保真原型16:00~16:5017:00~17:30总结和答疑项目流程与信息架构设计项目建设基本流程项目流程与信息架构设计项目流程网站建设流程需求整理思路需求的获取需求逻辑分析需求整理基本思路分清主次信息层级设计做好减法项目建设基本流程项目流程项目的总体流程包括有调研阶段、研发阶段、测试阶段、实施阶段等。在研发阶段，项目的流程包括有需求的确认、产品架构的梳理、交互及框架设计、原型的制作、UI设计、前端实现、后台开发等基本节点。项目流程（续1）网站建设流程产品策划制作原型UI设计前端制作功能实现（后端）图形页面整合（前端）测试发布需求整理思路需求的获取所谓“需求分析”，是指对要解决的问题进行详细的分析，弄清楚问题的要求，包括网站需要什么功能，页面上都有哪些模块，各个模块之间的逻辑关系等。可以说，在项目当中的“需求分析”就是确定项目要“做什么”，要达到什么样的效果。可以说需求分析是做项目之前必做的。在项目中，需求分析指的是在建立一个新的或改变一个现存的网站时描写新网站的目的、题材、定义和功能时所要做的所有的工作。需求的获取（续1）需求分析是项目中的一个关键过程。在这个过程中，我们需要确定客户的需要。只有在确定了这些需要后，才能够分析和找到实现需求的实际方案。需求分析阶段的任务是确定网站项目的功能架构。在项目研发的历史中，很长时间里人们一直认为需求分析是整个项目中最简单的一个步骤。但在近十年内，越来越多的人认识到，需求分析是整个过程中最关键的一个环节。假如在需求分析时，产品经理未能正确地认识到客户的需要的话，那么最后的项目实际上不可能达到顾客的要求，或者网站项目会在无休止的修改中拖延时间，无法在规定的时间里完工。需求的获取（续2）获取需求有如下常用的方法：（1）参与用户的日常操作通过亲身参加业务工作来了解业务活动的情况。这种方法可以比较准确地理解用户的需求，但比较耗费时间。这种方式适用于功能性项目的需求获取。（2）开产品会通过与用户、与需求部门开会座谈来了解业务活动情况及用户需求。座谈时，参加者之间可以相互启发。这个在创业公司有时会被称为“头脑风暴”。需求的获取（续3）（3）请专人介绍（4）询问对某些特定的问题，可以找专人询问。（5）设计调查表请用户填写如果调查表设计得合理，这种方法是很有效，也很易于为用户接受的。（6）查阅记录即查阅与原网站项目有关的数据记录，包括网站的原始版本、需求文档、历史浏览记录、用户数据报表等。需求逻辑分析狭义上理解需求分析指需求的分析、定义过程。需求分析就是分析用户的需求是什么。如果投入大量的人力，物力、财力、时间，开发出的项目却无法满足需求，或者没有用户使用，那所有的投入都是徒劳。如果费了很大的精力，开发一个项目，最后却不满足用户的要求，从而要重新开发过，这种返工是让人痛心疾首的（相信大家都有体会）。需求分析之所以重要，就因为它具有决策性、方向性、策略性的作用，它在项目开发的过程中具有举足轻重的地位，大家一定要对需求分析具有足够的重视。在一个大型项目的开发中，它的作用要远远大于程序设计。需求逻辑分析（续1）简言之，需求分析的任务就是解决“做什么"的问题，就是要全面地理解用户的各项要求，并准确地表达所接受的用户需求。需求整理基本思路一、问题识别：是从系统角度来理解项目，确定对所开发项目的综合要求，并提出这些需求的实现条件，以及需求应该达到的标准。这些需求包括：功能需求（做什么）、性能需求（要达到什么指标）、环境需求（如浏览器适配要求、操作系统等）、可靠性需求（不发生故障的概率）、安全保密需求、用户界面需求、资源使用需求(网站运行时所需的服务器资源、数据库大小等)、软件成本消耗与开发进度需求、预先估计以后系统可能达到的目标。需求整理基本思路（续1）二、分析与综合逐步细化所有的功能，找出项目中各元素间的逻辑关系、模块的功能及设计上的限制，分析它们是否满足需求，剔除不合理部分，增加需要部分。最后综合成系统的解决方案，给出要开发的项目的详细逻辑模型（做什么的模型）。三、制订项目需求文档即编制文档，描述需求的文档称为项目需求文档（说明书）。请注意，需求分析阶段的成果是需求文档，向下一阶段提交。信息层级设计分清主次在确定了需求之后，接下来就要进行信息层级的设计。将优先级高的内容优先显示。要区分好优先级，首先应该将功能进行分组，然后按照功能需求对其进行排序。用户在浏览我们的网站时，首先看到的应该是优先级最高的内容，放在视觉的焦点位置，其次才是优先级次之的内容。不能将内容一股脑全部丢给用户，让用户自己去区分优先级。信息层级确定了，网站的架构就基本确定了分清主次（续1）分清主次（续2）（1）一级信息吸引用户假设用户只会在这个页面停留3-5秒，最能够吸引用户继续浏览的是页面的核心卖点，是一级信息，它必须少而精，在设计上要重点展示

（2）二级信息帮助理解有了一级信息的吸引，用户进一步了解内容而可能停留3-5分钟，这时展示二级信息即提炼的精华内容，帮助用户在尽量短时间内理解信息

分清主次（续3）（3）三级信息详细了解前两类信息基本上能帮助用户获取足够的信息，用户如果继续停留更长的时间去详细了解，这类信息量会更多，在设计上视觉层级会靠后，或通过交互方式展示、提供入口跳转

做好减法信息太多，用户反而找不到自己想要的东西做好架构之后，捋一遍，删掉不必要的东西页面只实现最必要的功能，删繁就简Axure操作基础Axure软件基本操作Axure操作基础Axure界面介绍面板介绍绘制简单页面框架图设置页面基本属性元件及应用绘制框架设置样式Axure软件基本操作Axure界面介绍Axure的正确发音是“Ack-Sure”，RP则是”RapidPrototyping”快速原型的缩写，它是一款快速原型设计工具，能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。Axure界面介绍（续1）Axure基本界面Axure界面介绍（续2）1、主菜单工具栏：大部分类似office软件，不做详细解释，鼠标移到按钮上都有对应的提示。2、主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。3、站点地图：所有页面文件都存放在这个位置，可以在这里增加、删除、修改、查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。4、axure元件库：或者叫axure组件库、axure部件库，所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。Axure界面介绍（续3）5、母版管理：这里可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。6、页面属性：这里可以设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件onpageload。7、元件属性：这里可以设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；A、交互事件:元件属性区域闪电样式的小图标代表交互事件；Axure界面介绍（续4）B、元件注释：交互事件左面的图标是用来添加元件注释的，在这里我们能够添加一些元件限定条件的注释，比如：文本框的话，可以添加注释指出输入字符长度不能超过20。C、元件样式：交互事件右侧的图标是用来设置元件样式的，可以在这里更改原件的字体、尺寸、旋转角度等，当然也可以进行多个元件的对齐、组合等设置。8、动态面板：这个是很重要的区域，在这里可以添加、删除动态面板的状态，以及状态的排序，也可以在这里设置动态面板的标签；当绘制原型动态面板被覆盖时，我们可以在这里通过点击选中相应的动态面板，也可以双击状态进入编辑。面板介绍站点地图是项目页面的导航面板,在这里面可以对所有设计的页面进行添加、删除、重命名和组织等。面板介绍（续1）组件面板中包括有线框图组件和流程图组件两种类型，用这些组件可以进行线框图和流程图的相应设计。这里显示的是所有的组件，后面的一部分是流程图组件。系统默认显示的线框图类型的部件。面板介绍（续2）组件面板中包括有线框图组件和流程图组件两种类型，用这些组件可以进行线框图和流程图的相应设计。这里显示的是所有的组件，后面的一部分是流程图组件。系统默认显示的线框图类型的部件。面板介绍（续3）母版面板：母版是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过母版来调用。使用母版的好处是：修改母版时，原型中所有使用该母版的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。母版的面板和站点地图有点类似。可以添加、组织、编辑。面板介绍（续4）母版面板面板介绍（续5）部件属性：部件属性面板组位于操作界面的右侧，可以为我们的部件设置视觉属性、交互属性，并且可以对部件进行管理。设置页面基本属性在“项目”菜单下，选择“部件样式编辑器”，可对部件样式进行设置。设置页面基本属性（续1）在“项目”菜单下，选择“部件样式编辑器”，可对部件样式进行设置。可以设置Axure默认的部件样式，例如链接文字等。也可以设置自定义的部件样式设置页面基本属性（续2）在“项目”菜单下，选择“页面样式编辑器”，可对页面样式进行设置。包括页面背景色、背景图像、默认字体、草图程度、彩色或是灰度等。这里设置页面样式会对项目下的所有页面有效设置页面基本属性（续3）在操作界面的下方也可以设置页面样式，这里设置页面样式操作与项目菜单下的操作方式相同，只是只对当前页面有效。除了可设置页面样式外，还可以设置页面注释、交互动作等基本属性。元件及应用Axure默认的元件库里自带了很多页面中常用的元件。除了默认元件外，我们也可以下载元件资源安装使用。默认元件常用的有矩形、占位符、输入框、形状按钮、按钮等。注：

矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。

绘制简单页面框架图绘制框架按照需求，绘制出页面原型的框架设置样式设置绘制部件的样式制作低保真原型页面原型制作制作低保真原型基本属性设置制作页面原型原型导出添加链接添加简单交互效果预览原型发布原型链接添加页面原型制作基本属性设置为整个项目设置页面基本属性，包括字体、内容的居中对齐等。制作页面原型根据需求，将首页及内页的原型制作完成。链接添加添加链接定义链接可以让一个组件响应一个动作时（如鼠标点击、飘过）链接到其他页面。在Axure里提供了四种链接方式：1、链接到设计中的页面；2、连接到外部网址或文件；3、重新载入当前页面；4、返回上个页面。添加链接（续1）可以将链接添加给文字，操作方式是选中文本，在工具栏中找到添加文本链接的按钮，然后在弹出的对话框中为文本设置链接。添加链接（续2）也可以将链接添加给元件，操作方式是选中元件，在右侧的部件属性中为元件添加交互动作，选择一个事件，然后在弹出的对话框中为元件设置链接。添加简单交互效果在右侧的部件属性面板中也可以为元件添加其他的交互动作，选择一个事件