Axure工具简介

工具简介主要介绍axure的基本元件使用,熟悉该软件的各个功能区。1.添加元件到画布在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:2. 添加元件名称在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:3.设置元件位置/尺寸元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中...



工具简介


主要介绍axure的基本元件使用,熟悉该软件的各个功能区。

1.添加元件到画布


    在打开axure软件之后,添加元件到画布,在左侧元件库中选择要使用的元件,按住鼠标左键不放,拖到画布适合的位置后松开鼠标,如下图所示:


Axure工具简介


2. 添加元件名称


在检视面板的元件名称文本框输入元件的自定义名称,这样方便后面制作原型的过程中,设置元件属性等时便于查找元件,如下图所示:


Axure工具简介


3.设置元件位置/尺寸


元件的尺寸与位置可以通过鼠标拖拽,也可以在快捷功能或元件样式中进行输入调整。

x:指元件在画布中的x轴坐标值。

y:指元件在画布中的y轴坐标值。

w:指元件的宽度值。

h:值元件的高度值。


在输入数值调整元件尺寸时,可以在样式中设置,让元件保持宽度比例,如下图所示:


Axure工具简介


4.设置元件默认角度


方式一:选择需要改变角度的元件,按住<ctrl>键的同时,用鼠标拖动元件的节点到合适的角度。

方式二:在元件样式中进行角度的设置,元件的角度与元件文字的角度可以分开设置,如下图所示:


Axure工具简介


5.设置元件颜色与透明


选择要改变颜色的元件,但击快捷功能区中的背景颜色设置按钮,选取相应的颜色,或者在元件样式中进行设置,如下图所示:


Axure工具简介


6.设置形状或图片圆角


可以通过拖动元件左上方的圆点进行调整,也可以在元件样式中设置圆角半径来实现,如下图所示:


Axure工具简介


7.设置矩形边框粗细,颜色,实/虚线


矩形的边框可以在样式中设置显示全部或者部分及颜色实线/虚线,如下图所示:


Axure工具简介



8.设置线段/箭头


线段,箭头的样式可以在快捷功能或者元件样式中进行设置,如下图所示:


Axure工具简介


9.设置元件文字边距/行距


在元件样式中可以设置元件文字的行间距与填充。

行间距:指文字段落行与行之间的空隙。

填充:指文字与形状边缘之间填充的空隙。

如下图所示:


Axure工具简介

10.设置元件默认隐藏

选择要隐藏的元件,在快捷功能或者元件样式中勾选隐藏选项,如下图所示:


Axure工具简介



11.设置文本框输入为密码

文本框的属性中选择文本框的类型为密码,如下图所示:

Axure工具简介


12.限制文本框输入字符位数

在文本框属性中输入文本框的最大长度为指定长度的数字,如下图所示:

Axure工具简介

13.设置文本框提示文字

在文本框属性中输入提示文字,提示文字的字体,颜色,对齐方式等样式可以单击提示样式进行设置。

提示文字设置主要在用户开始输入时,提示文字消失,或者鼠标进入文本框时提示文字消失,如下图所示:

Axure工具简介


14.设置文本框回车触发事件

文本框回车触发事件是指在文本框输入状态下按回车键,可以触发某个元件的鼠标点击事件,只需在文本框属性中提交按钮的列表中选择相应的元件即可,如下图所示:

Axure工具简介


15.添加判断条件

在case编辑界面中单击添加条件按钮进行添加条件,如下图所示:

Axure工具简介


16.设置条件逻辑关系

设置一个执行动作必须同时满足多个条件,或者仅需满足多个条件中的任意一个,需要在添加条件界面进行设置,如下图所示:

Axure工具简介


17.case条件转换

为多个条件判断关系时,只需要在相应的case名称上单击鼠标右键,选择切换if或else if,如下图所示:

Axure工具简介


18.载入元件库

如果要使用自己的元件库,用户可以自己进行本地载入,在元件库点击载入元件库即可,如图所示:

Axure工具简介


19.切换元件库

在元件库功能面板中,可以通过点击元件库列表,选择不同元件库进行使用,如下图所示:

Axure工具简介


20.设置页面居中

在页面样式设置中选择页面居中的按钮,页面居中是指在浏览器中查看原型时页面内容居中显示,如下图所示:

Axure工具简介


21.设置页面样式

可以设置页面背景颜色,背景图片,草图,黑白,如下图所示:

Axure工具简介


22.全局变量设置

全局变量是一个数据容器,就像一个U盘,可以把需要的资料存入,随身携带,在需要的时候读取出来使用,全局变量的设置在项目——全局变量中,如下图所示:

Axure工具简介


23.局部变量设置

局部变量在编辑值/文本的界面中进行创建,通过在插入变量或函数列表中选取使用。

局部变量能够在创建时获取多种类型的数据,如下图所示:

Axure工具简介


Axure工具简介


24.公式的格式及类型

设置格式为[[公式内容]],公式内容可以进行计算,例如:[[3*18]],获取结果为:54;公式运算结果自动与公式外的内容连接在一起,形成一个字符串,例如:[[3*18]]名同学,获取的54名同学。变量和函数需要写在一个公式里面[[]],才能正确获取变量值或者函数运算结果,如下图所示:

Axure工具简介


25.文件备份与恢复

开启软件自动备份功能,可以有效地帮助我们降低因误操作,软件崩溃,断电等异常时,未保存或者损坏文件的风险,文件的备份与恢复在文件菜单中进行相关操作,如下图所示:

Axure工具简介


26.设置自适应视图

自适应视图是指编辑多种分辨率的原型,设备中查看时,系统会根据自身分辨率,自动与分辨率相适合的原型进行匹配,并显示出来,自适应视图在项目,自适应视图中进行设置,如下图所示:

Axure工具简介


27.设置元件的不同交互样式

单击元件属性中各个交互样式的名称,即可设置元件在不同状态时呈现的样式,这些样式在交互触发时,就会显示出来,如下图所示:

Axure工具简介

28.切割/裁剪图片

在图片的元件属性中,设有切割和裁剪功能的图标,也可以使用快捷键Ctrl+6切割,Ctrl+7裁剪.

切割:将图片进行水平与垂直的切割,将图片分开。

裁剪,将图片中的某一部分取出来。

如下图所示:

Axure工具简介


29.嵌入多媒体文件/页面

基本元件中的内嵌框架可以插入多媒体文件与网页,双击元件或者在属性中点击框架目标页面,在弹出界面进行设置URL地址或文件,如下图所示:

Axure工具简介


30.快速预览原型

预览原型的快捷键为F5,或者单击快捷功能中的预览图标进行预览,导航菜单,发布-预览选项中进行预览的设置,如下图所示:

Axure工具简介

31.生成HTML查看原型

生成原型的快捷键为F8,或者单击快捷功能中的生成图标,选择生成HTML元件进行生成,还可以通过导航菜单,发布-生成HTML文件,中进行生成,如下图所示:

Axure工具简介

生成的HTML需要存放在文件夹中,如下图所示:

Axure工具简介

32.生成HTML部分页面

可以只生成原型中的部分界面,如下图所示:

Axure工具简介

33.标志

标志设置,可以为原型添加图片标识或者文字标题,原型发布后会显示在工具栏的页面面板中,如下图所示:

Axure工具简介

34.发布到AxShare

发布到AxShare时指将做好的原型发布到Axure官方提供的空间中,通过自动生成的网址进行访问,快捷键为F6,发布需要先注册账号,注册地址为:https://share.axure.com,如下图所示:

Axure工具简介

点击发布到AxShare后,弹出如下设置界面:

Axure工具简介

点击发布后,成功发布会自动生成一个网站,如下图所示:

Axure工具简介

35.Web字体设置

当原型使用一些特殊字体时,在没有安装该字体的设备上将无法正常显示,Web字体可以较好地解决这个问题,Web字体使用包含两种方式。

方式一,连接css文件,设置简单,需要网络以及在校css文件支持。

方式二:@font—face,支持本地字体与在线字体,设置有点复杂。

Axure工具简介

选择@font-face

Axure工具简介

36.总结

通过对本章的了解,初学者都可以设计基本的原型界面以及发布原型了。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35949/

(0)
交互精选交互精选
上一篇 2018-03-18
下一篇 2018-03-18

相关推荐

  • 看世界之Google对话式交互设计规范

    目录序言1.对话式用户界面及其重要性2.建立友好用户界面的关键-理解对话如何进行设计实践3.设计原则与方法论4.设计走查5.设计检查表6.用户界面工具包最佳实践7.像你的用户一样...有合作精神(待翻译)8.解锁口语的力量(待翻译)9.通过确认逐渐给用户信心(待翻译)10.对话中是没有错误的(待翻译)1.对话式用户界面及其重要性我们已经进入全新并且充满希望的计算机时代,机器学习和人工智能的进步使得对话式界面和自然语言处理得以兴起,通过技...

    2018-02-24
  • 交互设计的进阶三重境

    ✨交互设计师的迷茫作为交互设计师,工作几年之后,如果还处在 “从产品接需求输出线框图” 的循环中,或许就会产生一些迷茫:自己的价值和竞争力在哪里?如何突破,进一步提升自己的能力与话语权?迷茫,是因为无法定位自己,寻不得方向,找不到出路。所以,当我们提问该如何提升时,不妨先想一想,【用户体验设计】这座高塔,究竟是个什么模样,而自己又在什么位置。此文中,我根据自己的一些工作经历和理解,将交互设计师的能力成长分出三个阶段:功能完善者、产品推动...

    2018-02-26
  • 异常逻辑梳理与数据处理

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放Dschinghis KhanDschinghis Khan - Siegerehrung作者:Glen公众号:更冷吃到老玩到老的故事冰山:异常逻辑梳理也许你用了九牛二虎之力,终于把产品的主流程梳理清楚了,但是你看到的只是产品冰山海面上的那10%,剩下的90%是海面下各种情况的异常逻辑。➀ 10%的冰山和90%的冰山任何一个产品功能逻辑,都分为主逻辑和异常逻辑。产品经理们当然要花...

    2018-04-08
  • 用户体验 | 远大车用肺保一键清新,自由呼吸

    随着人们生活水平的不断提高,家用汽车已经成为大家的出门代步工具,开车上下班、旅游、走亲访友,基本上每天在车内都会呆上几个小时。汽车看似密闭的空气,但是由于交通的拥堵,车内空气不流通,空气质量越来越差,就会出现头晕、胸闷、咳嗽等症状,从这之后我也一直在关注着车载空气净化器设备。之前购买过一款车载净化器,但是效果不大,就一直在车内处于吃灰状态,今天我要和大家说的这款远大车用肺保FC3。是一款采用H13级别超大面积的PTFE超级过滤器,可以9...

    2018-02-02
  • 这样学Axure,效果显著,还能提升产品交互,更容易拿高薪

    众所周知,Axure是产品经理必备的工作软件。BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别让Axure阻碍你的高薪产品路!别等面试时,才发现自己掌握不够。“起点学院&腾讯课堂”联合打造6周Axure实战班,第7期开启报名!从第1期到现在,1800多位同学学习成长,这是1800多位同学的经验贴。花3-5分钟了解,很快Axure对于你,就不再是问题。(真诚地说)0基础的Axure新手,如何才能更快达到高薪产品经理的Axu...

    2018-03-18
  • About Axure

    About Axure 8.0Axure:产品人必备必会的软件,快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。1.Axures的安装官方下载地址:https://www.axure.com/download汉化包地址:http://www.iaxure.com/menupage/download.html国内下载地址:https://pan....

    2018-05-08
  • 干货!Sketch49交互原型新功能大解析

    2月28日发布了Sketch49新版本的消息,笔者打开了官网看到了最新的版本更新视频,确实还是挺激动的。觉得Sketch按照这样的发展趋势,马上就能“统一六国”了,哈哈。一起来看看Sketch49的版本更新了哪些新功能吧!(先看介绍,使用教程在后面哦!)亮点一:交互原型功能画板(Artboards)和热区(Hotspot)链接实现页面间的跳转,实现动态交互原型(类似交互软件Marvel中的热区链接 )Sketch49版本中的交互原型预览...

    2018-03-07
  • 从用户体验的视角聊首款《CSR赛车(CSR Racing)》

    原文作者:Om Tandon我最近一直在玩《CSR赛车(CSR Racing)》和《CSR赛车:经典(CSR Classics)》,在近期的游戏中我发现,Natural Motion在该系列的核心玩法、货币体系、社交机制和盈利模式中都引入了许多新的花样和用户体验功能,这些新元素的加入为游戏的某些方面带来了更好、更流畅的玩家体验。CSR-Racing-iPhone(from theiospost.com)CSR系列专为手游玩家设计,会话时...

    2018-03-26
  • 小优姐姐,大家都在说的交互设计,它日常工作内容究竟是啥?

    封面设计:vivien bertin每次亲朋好友来问我,做什么工作的啊?自豪的回答:交互设计然后然后就没有然后了。。。朋友每次看完俺的文章都会说很好啊还会给我打赏但是最后的最后会补充一句没看懂,太高深以及最近被一波接地气的央视海报刷屏大家纷纷表示看到了希望先来两张海报让大家感受一下连一向以严肃正经形象示人的央视好像被触发了某个开关变得越来越不正经亲切可爱咱们交互设计师是不是也要走下神坛来说说交互设计师每天那点事9:00查看邮件确认是否有...

    2018-01-31
  • 用户体验设计师是做什么的

    用户体验设计师的责任UX设计师如何每天工作?这个问题的答案,正如许多问题一样,是:这要看情况而定。用户体验设计师的职责从公司到公司,甚至同一公司不同项目各不相同。尽管角色各不相同,但有一些职能是期望用户体验设计师去做的,这与他们所工作的公司无关。下面为总结的用户体验设计师的6个主要职责:1.产品研究产品研究(包括用户和市场研究)是每个用户体验设计师的用户体验设计项目的出发点。它为伟大的设计提供了基础,因为它允许设计师避免假设和做出信息驱...

    2018-03-03