Axure入门

3997
    


来源:
Licence:
联系:
分类:
平台:
环境:
大小:
更新:
标签:
联系方式 :
免费下载 ×

下载APP,支持永久资源免费下载

限免产品服务请联系qq:1585269081

下载APP
免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
下载 ×

下载APP,资源永久免费


如果出现不能下载的情况,请联系站长,联系方式在下方。

免费下载 ×

下载论文助手APP,资源永久免费

免费获取

如果你已经登录仍然出现不能下载的情况,请【点击刷新】本页面或者联系站长


  • Axure入门

    • 一、什么是Axure RP?

    • 二、生成一下Html格式的网页原型

    • 三、在不同页面间制作一个超链接

    • 四、单选按钮编组

    • 五、矩形的填充、透明度、渐变

    • 六、边框颜色、粗细、样式、箭头、阴影、内容对齐方式

    • 七、矩形可选择变化的形状、圆角以及旋转角度(含气泡对话框)

    • 八、编辑技巧

    • 九、网格设置、对齐网格、对齐对象、拖出辅助线

    • 十、解决矩形拼在一起有双边框的问题

    • 十一、制作一个标签式的导航效果

    • 十二、项目符号列表、对齐、平均分布

    • 十三、导入图片,可以导入png和gif图片

    • 十四、图像热区的功能

    • 十五、使用内部框架嵌入页面或Flash地址


一、什么是Axure RP?



  Axure RP 是⼀个原型工具,也可以说是⼀个草图工具。就像⼈们盖房⼦之前要有图纸⼀样,在开发网站或客户端⼯具之前也应该有⼀个⽅案草图,以作为开发成什么样的产品的重要依据。Axure RP正是做这个“草图”的设计工具。 
使用Axure生成的代码由于代码冗余一般不直接用于开发,而只是作为演示文档使用。

安装注册码(中文汉化包): 
license:axureuser 
key:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9IKu+kgKh79FL6IyPD6lK7G6+tqEV4LG

Web项目的一般过程: 


二、生成一下Html格式的网页原型

  axure制作的内容在保存时是保存为 .rp 格式的源文件,向别人演示时可以生成以下两种格式的文档。

  1. 生成html 网页原型,(最为常用,可以演示效果)

  2. 生成word 格式文档,(不常用)

  已保存的 .rp 格式的源文件只有安装了axure才可以再打开进行编辑。

步骤: 
I 、随便拖入一些控件,然后按预览按钮来预览效果。 


  温馨提示:预览效果快捷键:PC是 F5,Mac是 Command+Shift+P 。

  见下图,预览效果,左边是一个目录树显示文档的所有页面,右边是页面实际的显示效果。 


II 、按发布按钮或菜单中的“发布”,点击“生成原型文件”,可以生成html的网页原型。 


  见上图还可以点击“生成Word文档”来生成Word格式的文件,实际中并不常用。

  温馨提示:生成html原型快捷键:PC是 F8,Mac是 Command+Shift+O



  往后就是把生成的整个文件夹压缩打包,然后发给他人查看,他人解压文档后,点击其中的 start.html 或index.html 来查看演示效果。而且生成时会生成好多个文件,因此注意要建立一个新的文件夹(文件夹名就是您修改的未命名)。 
  推荐使用Firefox火狐浏览器来打开,IE浏览器会报安全提示,而Chrome浏览器需要安装单独的axure插件,由于现在国内无法访问谷歌服务,所以需要VPN翻墙才能安装。 
  见下图,如果用IE浏览器打开的话,会弹出这样的安全提示,需要点击“允许阻止的内容”。 
因为Axure生成的html文件含有js代码的程序,在本地运行就会显示这样的提示。 


三、在不同页面间制作一个超链接

  如何在一个页面添加到另一个页面的超链接? 
步骤: 
I 、如下图所示,拖入一个按钮,鼠标选中该按钮,然后在如图位置点击“创建链接”,之后选择选择链接到Page 1,之后按 F5 预览查看效果。 


II 、如下图所示,点中“用例”之后,还可以点击上边的“编辑用例”或“删除用例”。 


四、单选按钮编组

  如下图所示,单选按钮是Axure自带的普通组件,直接将其拖入到页面中就可以使用。 


  但是将它们直接拖入到页面中,在预览时他们每一个都是可以变为选中状态的,像下图这样。 


  这不是我们所要的单选效果,它们在一个题目组里应该只有一个可以被选中才对,像下图这样。 


  因此,这一组的单选按钮应该给他们编个组,程序才能识别它们是一个组的,并只允许它们有一个可以被选中,其它的按钮会自动取消选中状态。 
  见下图,拖入几个单选按钮,把一组的按钮选中,然后右键选择“指定单选按钮组”。然后填入一个组名字,中英文均可,这样单选按钮就完成了编组。它们预览时,就会只有一个按钮可以被选中。而对于不同的单选按钮组要填写不同的组名字。 


  温馨提示:单选按钮是否被编了组没有可以查看状态的地方。如果要取消编组是执行上面同样的动态,把它们的组名清空而已。

五、矩形的填充、透明度、渐变

步骤: 
I 、拖入一个矩形元件。 


II 、如下图所示,可以进行矩形的填充,透明度设置,其中有吸管工具和无填充色按钮。 


  如下图所示,可以进行渐变色的设置,空白区域单击可以增加颜色桶,拖住颜色桶至面板之外可以删除多余的颜色桶,另外注意设置渐变角度的位置。 


  注意:这里的透明度是针对每个颜色桶单独设置的,并不是矩形的整体透明度。

六、边框颜色、粗细、样式、箭头、阴影、内容对齐方式

  在Axure界面中相应功能按钮的位置如下图所示,边框颜色的设置与前边填充颜色的设置方式一样。 


  注意:线类的元件才可以设置箭头,选中某条线,之后下拉中设备箭头方向。

七、矩形可选择变化的形状、圆角以及旋转角度(含气泡对话框)

  拖入页面一个矩形,然后见下图,点击矩形右上角的小圆点,可以选择矩形可变化的形状。其中被鼠标指针选中的图形最为常用。 


  如下图所示,左右拖动矩形左上角的小黄三角可以设置圆角的弧度大小。 


  如下图所示,鼠标移到矩形边角,然后按住 Ctrl 键(Mac系统下是按住 Command 键),然后按住鼠标上下拖动,可以旋转图形角度。 


  如下图所示,矩形可变化的形状中有一个气泡对话框的效果,只是默认小三角的位置都是在下边。我们可以通过旋转图形的方式让小三角显示在左边或上边。 


  注意:当旋转了图形不希望其中的文本也被旋转的话,可以照上图设置一下文本的角度值。

八、编辑技巧

  为了提高编辑效率,Axure提供了一系列的快捷操作。如:拖动复制、编组、组内选中、穿透选中、选中模式、编辑区拖移。

  • 拖动复制:选中一个矩形,然后按住 Ctrl 键再拖动该矩形,就可以复制一个同样的矩形出来。或者选中一个矩形,直接按 Ctrl+D 也是复制一个矩形出来。

  • 编组:见下图选中多个图形,按“编组”按钮可以将图形组合在一起,旁边是取消编组按钮。编组快捷键:PC 是Ctrl+G,Mac 是 Command+G。取消编组快捷键:PC 是 Ctrl+Shift+G,Mac 是 Command+Shift+G。 


  • 组内选中:已经被编了组的元件,可以在不解开组的情况下重新选中组内的某个控件。见下图,已经编组的组件,鼠标先移到想要选中的地方。点击一下鼠标,此时选中了整个组,然后不要移动鼠标位置,再点击一下鼠标,此时就可以穿过组,选中组内的这个控件。 


  • 穿透选中:有些重叠在一起的组件,可以穿过上层的控件而选中下层的控件。如下图所示,两个重叠在一起的控件,先在上层控件点击一下鼠标,此时选中的是上层的控件,然后不要移动鼠标位置,再点一下鼠标,可以穿过上层控件而选中到下层的控件。 


  • 选中模式:鼠标拖选的模式选择,左边按钮是相交选中模式,右边按钮是包含选中模式。如下图所示,鼠标拖放的区域与三个矩形都有相交,因此在相交模式时,三个矩形都会被选中。如果此时是包含选中模式,由于鼠标拖放的区域只完全包含住了左边的两个矩形,偏右的中间这个矩形只是有相交并没有完全包含,因此不会被选中。 


  • 编辑区拖移:跟大部分做图软件一样,在编辑区按住键盘空格键,鼠标会变小手状态,拖动鼠标可以快速移动窗口的显示区域,比拖放滚动条来浏览要方便很多。 


九、网格设置、对齐网格、对齐对象、拖出辅助线

  如下图所示,在编辑区右键可以选择“显示网格”,其它一些相关设置也在这里。 


  • 编辑区右键,点击“网格设置”,照下图,把网格间距由默认的10用手输入的方式改为5像素,这样会利用在一些细节位置上的对齐,后面示例会讲到这么设置的技巧所在。 


  • 编辑区右键,确认“对齐网格”是开启状态,见下图,显示对勾表示开启。 


  如下图所示,在对齐网格状态下,控件位置及大小都会正好与网格对齐。这样所有控件在网页中的坐标和大小都会是网格的倍数,方便它们的规范和对齐。 


  • 编辑区右键,确认“对齐对象”是开启状态,见上面本章头图,“对齐对象”前的对勾表示开启。开启状态下,页面中拖放控件时会自动与周围的控件就边界对齐或中线对齐显示辅助线。 


  • 拖出辅助线,鼠标按在标尺上,向编辑区拖放,可以拉出辅助线,方便对齐。左侧标尺上向右拉,顶部标尺上向下拉。辅助线上右键可以锁定或删除。 


十、解决矩形拼在一起有双边框的问题

  Axure7有一个默认设置,会导致两个矩形拼在一起会有双边框的问题。 


  而解决的办法是,打开菜单——项目——项目设置,选择中心边界对齐那个,可以使拼在一起的矩形没有双边框问题。 


  如下图,相邻的两个拼在一起的矩形,已经没有双边框的问题了。 


十一、制作一个标签式的导航效果

  1. 如下图所示,首先拖入一个矩形,然后更改形状为下边开口的形状,并拖动出一定的圆角,然后按住 Ctrl 拖动矩形来复制出两个同样的图形(Mac下按 Alt 键)。 


  2. 然后拖入一条横线,先移到矩形开口的下方(见下图所示);由于“对齐对象”的作用,你只能拖动到距离开口5像素的地方,否则就会拖过。仔细看,此时只是横线的虚边与矩形有接触了,横线的实芯还并没有接触到矩形的开口处。 


  3. 选中横线,然后按住Shift,再按一下“向上”的方向键,此时横线会向上移动一个间隔的距离,刚好移动5个像素,让横线与矩形的下开口有正好的接触,见下图。 


  4. 选中中间的矩形,然后按工具栏上的“置于顶层”按钮,可以将该矩形移到横线的上一层,此时矩形的白开口会重新遮挡住下面的横线。由此,以该矩形的开口状态,来表达出该标签为当前窗口的效果。 


  最终效果就是如下图这样,工具栏上“置于顶层”后面的按钮是置于底层和上移、下移。 


  温馨提示:有些高清屏的电脑,由于分辨率的问题,会造成这个开口的矩形下面也会有一定的线不能完全被开口挡住。你可以把中间的矩形的高度在工具栏上设置大一个像素,或是把中间的矩形向下移动一个像素。

十二、项目符号列表、对齐、平均分布

  本章制作下图这样一个效果,从中学习符号列表、对齐和平均分布的功能使用。 


  1. 如下图所示,拖入一个标签,然后点击工具栏上的“项目符号列表”图标,标签前面就会出现圆点。 


  2. 拖动复制出一些“标题”出来,然后选中它们,先点工具栏上的左对齐,再点纵向平均分布,使它们整齐并分散均匀。而对于一些位置不用再调整的组件可以用工具栏上的锁定按钮锁定它们的位置。 


  3. 最后,放个灰色的矩形在标题文字后面打底即可,得到最终的效果如下图。 


十三、导入图片,可以导入png和gif图片

  如下图所示,双击拖入的图片控件可以打开本地窗口,选择要导入的图片即可。导入的图片支持背景透明的png图片,也支持gif动画图片。 


  我们也可以直接从本地窗口中拖着图片文件到axure窗口后松手,也可以导入图片,像下图这样。 


十四、图像热区的功能

  如下图所示,图像热区在编辑状态下是浅绿色的,但是在生成后它是透明的。 


  图像热区可以加盖在一些组件上面,然后在图像热区上添加交互动作能起到一些特殊的效果。下面有一些示例:

  • 示例一: 
      像下图这样,有一组新闻标题,做演示时这一组标题实际打开的都是同一个演示链接。如果每一个标题都加一次链接就比较麻烦,此时就可以利用“图像热区”控件来做一些技巧。 


      如下图所示,用一个“图像热区”把整个标题区域盖住,然后只需要在图像热区上加一次链接即可。生成后由于图像热区是透明的,因此不影响演示效果,但是这样操作提高了编辑效率。 


  • 示例二: 
      像下图这样,有一个人物信息,其中有头像、姓名、职业,这是三个不同的控件。将来在演示时肯定是鼠标点击在任何一个上面都可以打开该人物的链接,此时同样可以利用图像热区,加盖整个区域,然后在热区上加一个链接。 


  • 示例三 
      像下图这样有一张图片,你只希望图片中的按钮处可以点击,而不是整张图片可以点击。就可以往图片的局部加盖一块图像热区,然后在热区上添加链接。 


  图像热区也可以作为页面锚点使用,可以通过交互动作设置让页面窗口滚动到锚点所在位置。

  1. 我们按照下图绘制一个基本图形,然后拖入图像热区到指定位置,并在名称处给热区命名。 


  2. 选中按钮,点击“新增用例”,准备在按钮上添加交互动作。下图中一个闪电符号表示一个交互动作,可以继续点击左侧的动作选项来添加多个动作,在中间动作上右键可以选择删除或上移、下移。而图中“用例1”表达是一个交互动作序列,它可以由下面一个或多个交互动作来构成。含义是点击页面中的按钮一下,就会按着顺序执行该“用例1”中的交互动作。 


  3. 弹出的是交互动作的设置面板(如下图所示),左侧是可选择的交互动作,中间是已选择的交互动作,右侧是交互动作的功能设置。按照下图指示的顺序,进行相应的设置。动作含义是点击按钮可以让窗口滚动到锚点位置。 


  为了看得出演示效果需要保证页面够长,页面要能够向上滚动才可以。因此按照下图,需要在页面偏下的位置随便放点控件,好让生成的页面足够长。 


十五、使用内部框架嵌入页面或Flash地址

  内部框架可以用来嵌入axure内的本地页面,可以嵌入外部网址页面,还可以嵌入Flash地址。

  • 嵌入本地页面: 
    如下图所示,是内部框架控件。在内部框架上双击,可以指定要嵌入的页面。 


    在Page 1中提前绘制一定的内容,然后在Home页利用内部框架嵌入Page 1的内容。

  温馨提示:内部框架嵌入内容之后,只有在生成后才能看到效果,在编辑状态下并看不到。而且axure可以嵌入本地电脑上的页面,一般不常用,可以选择跳过。



  注意:嵌入的本地文件可以是.html的网页也可以是.swf格式的Flash文件,但是不能是一些直接的视频文件,因为浏览器并不自带直接播放视频文件的功能。

具体步骤:

  1. 把要嵌入的本地电脑上的页面,复制到Axure生成目录的根目录下面。

  2. 然后使用内部框架在嵌入外部URL处,填写入该文件的文件名,比如:demo.html,由于该文件已经被复制到了axure生成目录的同目录下,因此在嵌入的URL这个地方不用再写路径地址,默认就是当前目录,所以填写文件名即可。

  3. 这样在生成预览后,本地嵌入的页面就可以显示出来了。并且文件夹打包发到其它的电脑上演示时,同样可以演示。

  • 嵌入外部网址: 
    如下图所示,在给内部框架指定要嵌入的页面时,可以选择链接到外部URL。嵌入外部网址时注意要输入上"http://"。 


  • 嵌入Flash播放地址: 
    如下图所示,可以到视频网站大致如下位置,获得该视频的Flash地址。 


    然后在内部框架中输入视频的Flash地址,然后预览后就能看到效果。 


  我们可以通过内部框架的右键设置来隐藏边框并选择从不显示横向和纵向滚动条,这样嵌入到页面中的内容看起来就像是原本页面中的内容一样。 



免费下载 ×

下载APP,支持永久资源免费下载

下载APP 免费下载
温馨提示
请用电脑打开本网页,即可以免费获取你想要的了。
扫描加我微信 ×

演示

×
登录 ×


下载 ×
论文助手网
论文助手,最开放的学术期刊平台
				暂无来源信息			 
回复
来来来,吐槽点啥吧

作者联系方式

×

向作者索要->