Axure使用-详解—24步

一．认识Axure的软件界面Axure的软件界面总的来说，可以分为9大模块1.菜单栏：和大部分的软件界面一样，都是一些常规的文件、编辑、视图……2.工具栏：是页面进行编辑的一些快捷操作，主要有字体设置、大小设置、页面显示大小和Axure本身自带的一些快捷操作等3.站点地图：呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作4.部件区域：组件集中地带：矩形组件、图片组件、动态面板组件……使用方式是直接拖动部件到页面编辑区域5.母版区域：共用，复用6.页面编辑区域：拖动相关的部件进行线框图编辑和交互具体的实施7.页面交互区域：8.部件属性区域：组件的注视、组件的交互、组件的属性编辑9.动态面板区域：设置动态面板的可视与隐藏二．生成网页原型的三种方法方法一：菜单生成法路径：生成——原型——弹出框如图：方法二：工具栏，快速按钮生成法方法三：快捷键生成法：直接按键盘F5，即可生成网页原型弹出框：无论使用上面哪一种方法生成原型，最终都会弹出以下这个弹出框（如图）我们需要做三步动作：1.目标文件夹：即我们要生成的网页原型文件要存放的位置，默认存放在我的文档》我的AXURERP原型文件夹中，如果你不想放在默认的位置，也可以点击进行自定义存放。2.选择浏览器或者不打开，一般选择默认浏览器3.点击“生成”按钮，生成网页原型，生成过后，如果你选择了默认浏览器，软件会直接启动你的浏览器，并打开生成的原型页面，如图：一个简单的登录窗口，就生成了！你也试试吧！三．如何关闭IE浏览器在生成原型时候的安全警告一般情况下，如果你的浏览器是IE的话，在每次生成网页原型的时候都会弹出如下安全警告，如图：暂时性去除方法：单机鼠标右键，选择容许阻止内容彻底的方法：工具——internet选项——弹出窗口——选择高级——把允许活动内容在我的计算机上的文件中运行”，打上对勾点击“应用”即可。四.在chrome中使用axure生成原型的问题五.站点地图区域站点地图呈树状的，以主页为根节点，可以方便我们对网站整体模块和不同栏目、功能划分有一个很清晰的了解，同时也方便我们对网站整体页面进行管理（添加、删除、重命名、调整层级、调整顺序）：选择一个节点，点击这个按钮可以实现在这个节点下面添加子页面：首先选中一个页面，然后点击这个按钮，可以实现页面的删除，也可以单击右键选择删除注：如果当前页面下含有子页面，Axure会自动提示当前页面有子页面，点击提示中的“确认”后会同时删除所有子页面：选中一个页面，点击这个按钮可以向上调整页面的排序：选中一个页面，点击这个按钮可以向下调整页面的排序：选中一个页面，点击这个按钮可以调整页面的层级（降级）：选中一个页面，点击这个按钮可以调整页面的层级（升级）：选中一个页面，点击这个按钮可以进入页面编辑状态：搜索页面，在页面过多的时候可以使用，平时用的少页面重命名：将页面结构生成流程图：组件区域也叫做部件区域，英文为widgets，还有人称之为控件区域，组件是axure事先准备好的网站项目常用的零件，比如一些基本的页面元素Axure默认存在2个组件库，分别为线框图和流程图。同时我们也可以自己去制作一些组件加载进来，或者从网络上下载一些其他网友制作的组件六．认识axure部件库中各个部件的属性在axure中每一个部件都有自己的属性，下面这个表格，我们就首先来了解认识一下！属性名称属性说明属性举例标签用来标示部件的名称，在axure中，部件名称并不是唯一的。也就是说，你可以在页面中同时有2个部件都叫做“用户名”坐标用于确定部件在页面中的位置，页面的坐标以左上角为X0：Y0尺寸部件本身的尺寸，大部分部件都是可以设置尺寸的，比如矩形组件，也些组件事不可以设置尺寸的，如文本组件，他的高度是随着字体的大小而变化字体和office办公软件类似字体大小字体的尺寸大小，和office办公软件类似字体样式黑体、斜体、下划线字体颜色边框颜色部件的边框的颜色边框粗细边框样式填充颜色部件的层次部件在不同的时间拖动到编辑区域，他们所在层次是不一样的，有时候需要调整彼此的层次，以免部件被其他层次部件遮盖锁定部件锁定过后，组件不可以进行编辑，除非解锁字体对齐和office办公软件类似七.图片组件——axure线框图部件库介绍我们在后面的组件使用中，都统一使用“从部件区域拖拽图片组件到页面区域中”1.图片载入2.1.1将图片组件拖拽到页面区域1.2双击图片组件1.3选择合适图片，点击打开1.4载入图片时会询问是进行优化。1.5载入图片时会询问是否自动调整图片大小。2.图片尺寸大小调整3.悬停图片设置以同样的操作方式，我们还可以设置鼠标按下图片、编辑选中图片、编辑禁用图片4.图片切割选择图片，单机右键，选择切割图片根据需要，可以选择十字切割，横向切割，纵向切割在图片切割状态下，按下键盘上的ESC键或者取消按钮，可以退出切割状态以上内容都比较简单，只需要每一个菜单都去尝试一下就可以知道具体怎么去使用了！一定要自己去尝试下！八.文本面板——axure线框图部件库介绍文本部件用于在页面中显示文字，对于文字的格式可以随意的更改，设定不同的字体、尺寸和颜色。特别注意：文本面板的高度无法直接调整，它的高度是随着字体的大小自动变化的在6.5版本中，对文本的排版都有2个位置，可以进行调整，如图所示，设置文本的字体：1.设置文本的字体、颜色、大小2.设置文本的行间距Axure6.5版本新增的属性：调整字体的行间距，当有多行文本的时候，我们可以像在word中一样去设置文本的行间距，这个是新增的功能，以往我们需要调整文本的行间距需要拖动多个文本面板进行布局！3.给文本设置超连接在6.5之前的版本都是有一个单独的超链接组件的，和文本组件最大的区别就是，超链接组件的颜色是蓝色的并且有下划线，6.5版本后把这个组件融入到了工具栏中，不过个人认为这个组件的可用度并不大，因为axure本身提供了交互设置区域。第一步：选择需要添加超链接的文本第二步：单击工具栏的超链接按钮第三步：在弹出的对话框中输入需要连接的地址，单击确定即可九.矩形、占位符组件——axure线框图部件库介绍矩形组件和占位符没有太多的区别，这里我们主要讲解矩形组件的操作和使用，占位符的操作各位可以按照矩形的操作方法进行练习一下。矩形组件是一个矩形，它可以用来做很多的工作，比如页面上需要一块蓝色的背景，就可以用一个填充为蓝色的矩形组件，我们还可以用它来做页面布局，是我们最常用的部件。1.可以用来做页面布局2.可以变化成为其他的形状：三角形、圆形、椭圆等很多的形状3.可以填充颜色：用着背景和层次4.可以用来制作表格5.可以直接输入文字6.可以添加很多的交互首先我们将矩形组件拖动到页面编辑区域1.调整矩形的形状：单击鼠标右键》选择编辑按钮形状》选择形状》选择需要变换的形状具体对应的每一种形状，自己尝试一下。比如我们在做导航的时候，就需要顶部是圆角的矩形。2.练习矩形的颜色填充和渐变如果要出现那种很有质感的填充效果，必须选择线性渐变，并且在数值填充处输入903.屏幕取色器的使用有时候，我们需要获取其他地方的颜色的16进制值，可以借助颜色取色器，通过直接在颜色输入宽输入数值的话会更加精准屏幕取色器下载十.水平线、垂直线——axure线框图部件库介绍1.将水平线、垂直线拖动到axure页面编辑区域，如图：2.水平线、垂直线相关属性设置主要属性有、线条的颜色、粗细、线条的样式、箭头的样式十一.图片热区——axure线框图部件库介绍本文标签：axure,图片热区首先，我们将图片热区组建拖动到axure页面编辑区域1.图片热区为页面图片或者其他部件添加热区，添加交互我们一般在做专题的时候，会遇到一些组合商品，但是又需要单独分别设置连接，如果是2张图片还好办点，可是如果和下图一样是集成在一张图片中的，可能就需要我们借用图片热区组件，给每一束鲜花添加热区，然后再设置交互，在新窗口打开链接地址。我们为上面的图片添加热区，设置点击鲜花图片，单独开新的连接地址2.图片热区作为页面锚点的使用我们经常在有些网站看到一些楼层快速直达的链接按钮,如图:其实,使用axure的页面锚点功能我们也可以制作出类似的效果对于拖动出来的图片热区,我们必须首先给他设置标签,这样在设置交互的时候,我们才知道要滚动到哪一个锚点如果页面没有发生相应的滚动效果，可能是你的页面设置不够长，随便放上个组件，把页面撑长。页面够长了，点击按钮时才能体现出滚动效果。十二.文本框、文本编辑框、按钮——axure线框图部件库介绍1.与文本面板组合设计表单文本框主要是在设计页面表单的时候，用的最多，通过与文本面板的组合使用，下面我们通过文本面板和文本框设计了一个简单的注册表单对于，文本框中的文字，只需要双击即可编辑文字2.注册表单中的密码遮罩设置选中需要设置密码隐藏的文本框，单击鼠标右键》选择编辑文本字段》选择隐藏文本（密码框）即可3.文本框、文本编辑框组合设计留言表单文本编辑框，适合做大面积内容输入的设计，比如一般的编辑器十三.如何安装（装载）axure组件（部件）我们在网络上经常可以下载到很多网友精心设计的axure组件，这些组件给我们节省了很多的时间，方便了我们进行原型设计，可是对于很多刚刚接触axure的朋友就遇到了2个问题：第一：到哪里去下载这些组件1.精选组件：=1（我会不断去搜索常用的组件供大家下载）2.axure官方组件下载：（提示使用谷歌浏览器可以翻译英文）3.webppd精选组件下载：（必须是会员，而且需要虚拟币）第二：如何安装已经下载到本地的组件库1.点击部件中的线框图下拉，选择载入部件库2.选择部件的所在位置，并选中3.载入后的效果，单击选中axure图标16*16，可到对应的组件库中使用和线框图中的组件方法一样，都是直接点击选中然后直接拖拽到页面编辑区域，部分组件也可以进行相应属性的设置十四.动态面板——axure线框图部件库介绍1、什么是Axure的动态面板按照Axure官方网站的解释：动态面板控件（DynamicPanel）可以让你实现高级的交互功能，实现原型的高保真度。动态面板包含有多个状态（states），每个状态可包含一系列控件（你可以把一个状态理解成一个独立的页面）。任何时候都只有一个状态（页面）是可见的，或整个动态面板可以被隐藏。结合交互动作，可以让动态面板的状态进行隐藏、显示和改变。像添加其它控件一样，可以在控件面板中拖放动态面板控件到线框图中。简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态。而动态面板的每一个状态都可以看作是产生的一个新的交互结果。简单的说，动态面板就是展示在页面不跳转的情况下所能实现的交互状态“动态面板组件式axure中功能最强大的部件，是一个化腐朽为神奇的组件。通过这个组件，我们可以实现很多其他原型软件不能实现的动态效果。”《网站蓝图axure》一直想把动态面板的内容，放在最后面才介绍，因为这个组件，在刚开始学习的时候，很难让人去理解。其实如果不考虑复杂的交互行为，这个动态面板不去搭理她，我们也能设计出满足我们需求的线框图，但是想交互更加完美就必须见识一下动态面板的魅力。2、Axure的动态面板可以用来做什么1）tab式页签的切换效果：Axure的官方给出的实例就是这个2）鼠标触发式和点击触发式的下拉菜单效果：这个可以结合Axure的默认组件中的“垂直菜单”、“水平菜单”来实现，常用于导航的原型制作。3）鼠标触发式的浮窗效果：类似“Alt”的效果，常用于浏览提示和触发式广告。4）JS的鼠标点击弹层效果：这个是目前使用被广泛使用的效果之一。5）注册表单中的根据焦点判断提示的效果：当焦点在输入框内的时候提示该表单栏目填写规范，当焦点离开输入框的时候根据填写的结果提示正确或者错误原因，这个需要动用