Axure RP 9原型设计实战案例教程（App与Web）教案 第二章 用Axure元件搭积木

《AxureRP9原型设计实战案例教程（APP与Web）》课程教案课题：用Axure元件搭积木教学目的：熟悉AxureRP【元件库】面板，掌握编辑图形元件的方法和各种技巧，而且能够创建自定义元件库。掌握导入图片方法以及如何对图像进行一些简单的编辑。掌握各个表单元件的使用方法以及各自的用途。掌握不同类型的文本框有何特点以及在什么情况下使用这些文本框。列表框和下拉列表框非常相似，也要注意区分。单选按钮必须指定选项组方可起到单选的作用。掌握如何将多个单选按钮指定在相应的选项组中。对于表单而言，还有一些专用的事件，如【文本改变时】、【选项改变时】等，要掌握其用法；还有一些经常在表单上使用的动作，如【获取焦点】、【设置列表选中项】等也要掌握。课型：新授课课时：本章安排2个课时。教学重点：重点：熟练掌握各个表单元件的使用方法以及各自的用途。教学难点：难点：掌握如何将多个单选按钮指定在相应的选项组中。教学过程：教学形式：讲授课，教学组织采用课堂整体讲授和分组演示。教学媒体：采用启发式教学、案例教学等教学方法。教学手段采用多媒体课件、视频等媒体技术。板书设计：本课标题用Axure元件搭积木课次1授课方式理论课□讨论课□习题课□其他□课时安排2学分共2分授课对象普通高等院校学生任课教师教材及参考资料1.《AxureRP9原型设计实战案例教程（APP与Web）》；电子工业出版社。2.本教材配套视频教程及学习检查等资源。3.与本课程相关的其他资源。教学基本内容教学方法及教学手段课程引入"搭积木"是AxureRP9最核心的设计理念，它让原型设计变得像搭积木一样简单直观。通过拖拽预制的UI元件，快速组合成完整的页面，无需从零开始绘制每个元素。参考以下形式：1.衔接导入2.悬念导入3.情景导入4.激疑导入5.演示导入6.实例导入7.其他形式一、绘制线框图所用的元件AxureRP9原型设计软件里默认内置39种线框图元件，分为4类：基本元件有20种，表单类元件有6种，菜单|表格元件有4种，标记元件有9种。1.1基本元件的使用（1）矩形元件和占位符元件、椭圆形元件的使用（2）图片元件的使用（3）按钮元件的使用（4）标题元件的使用（5）文本标签元件和文本段落元件的使用（6）水平线和垂直线元件的使用（7）热区元件的使用1.2标记元件的使用标记元件包括快照元件、水平箭头元件、垂直箭头元件、便签1元件、便签2元件、便签3元件、便签4元件、圆形标记元件和水滴标记元件。二、丰富的图标元件库图标元件库把常用的一些图标放置在图标元件库里，包括通讯录图标、箭头指向图标、电池电量图标等。在绘制原型的时候，可以使用该元件库里的图标，而不需要到其他地方去寻找。三、载入元件库和自定义元件库Axure在元件管理区域默认提供线框图元件库、流程图元件库和图标元件库，但是在制作原型的过程中，这3类元件库并不能完全满足设计原型的需求。如果设计移动应用软件，需要使用Andriod元件库或者iOS元件库；设计其他的软件，可能使用其他的元件库；有时候甚至现成的元件库还是不能满足需求，需要自己来制作元件库，即自定义元件库。3.1载入元件库在Axure元件区域，单击选择元件库，可看到默认的线框图元件库、流程图元件库和图标元件库，部分元件库的名称翻译并不是很完善。3.2自定义元件库在设计原型的时候，如果在现有元件库中没有找到需要的元件，可以自定义元件库。设计一些特别的或者常用的元件，例如增加、删除、修改、搜索、红灯、黄灯、绿灯图标，然后把它们放在自定义元件库里。实战——手机图标和外壳设计用本项目所学的基本图形元件绘制一个带界面图标的手机模型，并且要求把手机及其屏幕上的各个图标分别做成自定义的元件库。这个手机外壳是典型的大黑扁平风格，也是时下比较流行的UI设计风格。要完成本案例效果，最好先创建自定义的元件库，然后分别绘制相应的图标，图标完成后，再返回AxureRP主程序中，利用自定义的元件库完成手机界面元素的拼装。四、原型设计流程4.1需求分析一般情况下，需求分析主要由产品经理或者需求分析师来完成，但是设计师最好也参与到前期需求分析的过程中，这样就可以与产品经理对需求产生一致的理解，达成一致的意见。4.2页面架构设计（1）使用思维导图软件理清逻辑关系（2）流程图表达主要流程任务（3）产品信息架构设计（4）页面布局设计4.3低保真原型设计理解用户的主要需求，完成主要任务流程设计，通过思维导图软件确定产品的大致内容，实现页面架构设计，即页面总体布局、导航菜单以及各个模块的设计后，就可以针对各个页面进行内容设计，也就是低保真原型设计。4.4原型评审低保真原型设计之后，需要进行原型评审，各个部门会针对产品的需求对产品原型进行评审。4.5高保真原型设计原型设计不仅可以制作低保真原型，同时也可以制作高保真原型，即把低保真原型经过视觉设计师制图、切图，然后制作出高保真原型。五、表单元件的使用表单元件是在设计表单时候经常会用到的元件，比如设计登录表单、注册表单等表单，就可以使用表单型元件来设计表单。表单型元件包括文本框元件、文本域元件、下拉列表元件、列表框元件、复选框元件、单选按钮元件。5.1文本框元件和文本域元件文本框元件用于收集表单内容，其形式为单行输入文本框；文本域元件，可以实现多行文本的输入。5.2下拉列表元件和列表框元件下拉列表元件，是经常用到的下拉菜单，它只能显示一个下拉菜单选项；而列表框元件，是可以显示多个下拉菜单选项的元件。如果页面区域有限，可以使用下拉菜单元件；如果页面区域比较大，仅放置一个下拉列表，会空留很多地方，页面整个布局不美观，就可以使用列表框元件。5.3复选框元件和单选按钮元件如果希望允许选择多个选项，这时可以使用复选框元件，如果每次只想选择一个选项，可以使用单选按钮元件。六、菜单|表格元件的使用菜单|表格元件包括树元件、表格元件、水平菜单元件和垂直菜单元件。6.1树元件的使用可以用树元件来设计树结构或其他有层次的结构，例如页面区域的页面结构。新增子节点、调整树的层级关系以及删除子节点等等操作都是通过右键菜单里的选项来设置。6.2表格元件的使用表格元件，用来显示数据的记录，是使用频率比较高的一个元件，它通过右键菜单里的选项来完成操作。6.3水平菜单和垂直菜单元件水平菜单和垂直菜单元件，是用来制作导航菜单的元件，它可以制作横向或纵向的菜单元件，它通过右键菜单里的选项来完成设计操作的。实战——个人简历页面设计找工作的时候，需要投递简历，现在很多的网站都支持在线投递简历，例如前程无忧、智联招聘。各个网站都需要专门的界面接收用户的个人信息录入。下面制作“个人简历表”，来设计简历的个人信息模块。1．教学以学生学习教材的基本内容为主，系统全面地学习税收制度的构成要素的基本内容。2．整个教学过程中，各教学点可根据实际情况，进行拓展知识的讲解。本章小结：本章节核心围绕Axure元件的“搭建与应用”展开，通过基础元件、表单元件、菜单