08第三章2网页交互原型工具Axure的应用规范.pptx

网页交互原型工具Axure的应用规范 知识要点05Axure元件——表带|表格|标记元件01Axure软件界面介绍02Axure使用规范的介绍04Axure元件——基本元件03Axure元件的交互 1.Axure基础：Axure软件界面介绍第一部分 1 界面介绍1、菜单栏2、工作区域3、页面栏4、概要视图5、元件库6、母版7、样式窗格8、交互9、注释 菜单栏介绍复制、剪切及粘贴区域Ctrl X为剪切Ctrl C为复制Ctrl V为粘贴选择模式第一个相交选中第二个包含选中第三个连接在Axure中，可以选中一段交互进行复制粘贴，值得注意的是，选择某个元件，按下复制按钮或快捷键，然后选中另一个元件按下Ctrl Alt V即可将前一个元件的格式及公共交互部分复制并粘贴到后一个元件上插入按钮：绘画矩形圆形线段文本图片其他形状拖动方块可以任意改变元件的形状 菜单栏介绍将选中的元件置于最下层或最上层选中多个元件点击组合将元件打组实现放大和缩小屏快捷键按住Ctrl键，滑动鼠标滚轮8种对齐方式，左对齐居中对齐右对齐顶部对齐居中底部对齐横向均与分布垂直均匀分布 预览和共享预览就是预览原型 预览和共享12缺点是不可展示动态交互?使用axure 直接预览??文件-导出所有页面为图片使用Chrome浏览器预览时添加插件 预览和共享34发布到Axure_shared 上，生成链接?生成原型页面到本地文件夹 自定义界面 自定义界面 黑夜模式01 Axure元件库DefaultFlowIconsAxure自带基础元件库库的切换在元件库的下拉菜单中可以看到所有的元件库，也可以查看加载好的本地图片文件夹（需要导入图片文件夹）。也可以通过Axure Cloud来加载/切换库。 Axure元件库库的添加查看元件库存储位置以及删除库的删除：在下拉菜单中选择好该元件库后，直接单击选项Option按钮（在右上角）然后选择Remove Library移除元件库按钮(图片见上图) Axure元件库创建自己的元件库 Axure元件库元件库中元件的图标与提示 Axure使用规范的介绍第二部分 元件的使用031 元件添加直接单击选择某一个元件将其拖至画布(中间区域)中,也可以通过左上角的插入菜单选择其他形状的部件。 元件的使用元件的移动操作元件的移动：拖住元件并在画布上松开鼠标即可；也可以直接在X和Y中直接输入坐标。 元件的使用同时定位多个元件进行操作按住CTRL使用鼠标单击每个元件可同时选中多个元件，可以看到坐标X?或者Y（W?与?H、即宽和高）不尽相同。提示：X, Y, W, H?这些参数中只有当多个元件的这些值相同时才会展示，否则在选中时不会展示。 元件的使用元件的其他操作旋转。元件的命名元件的组合元件的锁定与隐藏 元件的样式 不透明度排版 元件的样式 填充边框 元件的样式 阴影、圆角、边距 元件的样式 元件样式及样式管理器 元件的样式 更新和创建样式快速更新快速创建 元件的组合元件的组合与取消 元件的组合组合的交互 元件选中状态 页面及其样式1.添加页面：直接在左侧页面样式栏中的右上角点击添加按钮，此时即可以添加一个空白的页面，你也可以在某一个页面上右击，然后添加页面或子页面。2.页面的删除：直接右键单击该页面，选择删除，或者选中某一个页面，然后直接按DELETE键。3.页面的重命名：与WINDOWS电脑文件的重命名一样，可以右键单击，选择重命名?或者缓慢单击该文件名。 页面及其样式页面的样式页面的尺寸 自适应视图 自适应视图视图的颜色通常有这几种：1.蓝绿色：当前在画布上显示的视图。修改将适用于本视图2.黄色：当前显示视图的子视图。在当前修改将会影响此视图3.灰色：当前显示视图的父视图。在当前修改不会影响此视图4.绿色：当前修改会影响所有视图 母版的创建母版的使用情形导航栏网站顶部header（包括LOGO)一些常用的按钮或组合，比如分享至第三方平台的按钮Tab的切换（APP中居多）在原型设计中，部件元件或元件的组合会重复使用，这些元件的组合就可被用来创建母版。）母版的创建方法一： 选中多个元件后，右键单击，选择转换为母版方法二： 从母版栏目中创建 母版的使用母版的页面属性母版的页面交互将会在母版所处的任何一个实例页面被触发（前提是达到触发事件），比如你创建一个页面载入时的事件，那么当一个页面包含该母版时，就会触发此事件。 母版的添加任意位置：此为默认情况，可将母版放至任意坐标上。母版实例的位置锁定到母版中的位置：此实例的位置与原母版中的位置相同。方法1：直接从母版窗格中拖至画布中。同时该母版将会出现红色遮罩（可在视图–遮罩中切换）方法2：在需要的母版上右键选择添加母版到页面中母版的添加 母版的添加脱离母版母版使用情况 母版的引发事件 母版视图视图的继承