Axure基础部件大全使用教程

原创 admin  2015-01-01 23:30  阅读 2,438 views 次

1.添加部件到画布(设计视图)
开发原型,我们首先只要把需要的部件拖到画布,并根据需要和设计稿来进行排版即可。
最常用部件:小矩形。小矩形右上方小点是选择要用的外形边框,左上方小点可以改变部件边框的形状。

如下图从左侧拖到右侧三个小矩形

矩形使用说明
2.添加页面跳转链接
选中需要链接的部分,点击右边交互界面的交互 添加链接 选择需要链接的目的页面即可。
3.生成HTML文件(本地)
发布 生成HTML 即可(一般都是很多页面,所以生成时要先建立个文件夹)。生成的本地HTML文件可以本地电脑端打开访问。
4.生成链接(发布到Axshare服务器端)
没账号的直接注册账号,有账号输入账号密码直接发布到Axshare的服务器端,生成个访问链接,可以不加密或者加密发给需要看的人。直接在线访问。

能否生成可以安装到手机的演示版软件?????????暂时未研究。只是用过其他系统生成的演示版的手机端软件。

第二章 站点地图和页面

2.1 在站点地图(sitemap)中添加管理页面(page)
添加页面和文件夹,其升降级,上下位,删除,搜索等管理。
直接选中多页面,直接拖到文件夹里即可进行归档。
2.2显示/隐藏网格;
设计区域 右键 网格和辅助线 勾选 显示网格 即可,隐藏则反之。
2.3显示辅助线;
在刻度上直接拖动即可拖出辅助线,拖动时按着Ctrl(MAC机ESC)键盘 即为全局辅助线
想隐藏辅助下,选中,拖回去即可。
2.4部件在页面中居中显示
预览都是默认靠左的位置显示。
在页面样式区域(Axure底部),可以看到默认是左对齐,选择居中显示即可。(只对浏览器来说)

第三章 部件和模板

3.1添加删除部件;
选中部件库部件拖动过去即可,删除:选中,按delete键或者backspace键即可
3.2编辑部件样式;
形状部件,选中部件,左上方倒三角控制器圆角半径。右上方圆圈可以选择部件的形状。
另外顶部工具栏,右键菜单栏,右边部件属性和样式的样式栏等三个地方都可以设置其样式。
不同部件其编辑方式也不一样,拖入动态面板可以看到起右边部件属性和样式都是灰色的不可用的
要编辑动态面板,我们需要双击,在动态面板状态管理框中进行编辑。
【提示】对部件的属性,特性,局限性等,一定要烂熟于心——明月PM

3.3将一个/多个部件转换为模板;
(1)选中几个部件,右键 转换为模板,起个名字,则左侧模板就多了一个
(2)左侧模板栏,点击新增模板,起个名字,双击,然后编辑。
3.4编辑母版并快速重复使用母版。
一个字:拖

问:模板和母版的区别是什么?

第四章 创建交互

4.1禁用/启用形状部件
整两个文本输入框和一个提交按钮来测试
禁用部件:选中文本框直接右键选中禁用,或者部件属性和样式里勾选禁用。启用则反之
4.2使用用例编辑设置焦点到文本输入框
页面交互 页面载入时 双击 添加用例 获取焦点 右侧配置在哪个文本框

4.3使用页面加载时事件设置焦点到文本输入框
选中提交按钮 交互 鼠标单击时 启用禁用动作 设置 第一个禁用,第二个启用
并且同时第二个获取焦点

第五章 初始动态面板

5.1 创建一个简单的图片轮播【其实一点都不简单】
(1)拖动图片部件 双击插入图片 右键转换为动态面板 双击管理动态面板 选中面板1
复制添加其他面板,双击进入其他面板,替换图片,尺寸修改选择否,则替换完也创建完动态面板,这样最快
还可以从新添加一个一个的动态面板,或者在右下角部件管理里面新建添加等。
(2)弄两个按钮,起两个名字previous,next,选中分别设置鼠标单击时交互
动态面板 设置面板动态 选中动态面板,下方设置,循环 ,淡入淡出效果。

第六章 条件,值,变量 (跨页传递数据)

6.1 条件判断
如何查看全局变量?项目 全局变量 可以看到 OnLoadVariable 我们可以对其改名,也可以使用它,当点击登录按钮的时候,将用户名里面输入文本的数据添加到全局变量中,并打开新页面新页面加载时,将文本框里面的值设置为全局变量即可。

6.2 全局变量赋值
交互 鼠标单击时 变量 设置变量值 选中全局变量 FX 新增局部变量。选择usname(用户名文本输入框)。选择函数或者运算符,选中此局部变量插入。确定后选择 链接 打开链接 选择要打开的页面。

6.3 跨页传递全局变量值
欢迎界面,页面载入时,添加用例,设置文本,name 值 FX 函数或者运算符 选择全局变量
即是将文本里面的值等于全局变量了。

本文地址:https://www.moonpm.com/219.html
关注我们:请关注一下我们的微信:扫描二维码产品设计研究与产品经理交流中心 (鼠标移入红色字)
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
PREVIOUS:已经是最后一篇了

发表评论


表情