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

相关推荐

  • 交互理论 | 深度解析尼尔森十大交互设计原则在设计中的用法

    Jakob Nielsen(雅各布·尼尔森)的十大交互设计原则。它们被称为“启发式”,因为它们是广泛的经验法则,而不是特定的可用性指导原则。因此,我们不能把它上升为一种标准,而是应该当做一种经验来学习,然后跟现实中的设计结合来使用。接下来,作者通过一些具体的实例来跟大家深度解析尼尔森十大交互设计原则在设计中的用法~一、Jakob Nielsen(雅各布·尼尔森)简介:Jakob Nielsen(雅各布·尼尔森)是毕业于哥本哈根的丹麦技术...

    2018-01-31
  • 用户体验太差:银行要想超越支付宝、微信,请先把App做好!

    如今的支付市场可以说就是支付宝和微信支付的,他们占据了大部分的市场份额,即便是近年来各大银行也推出了APP服务来满足用户的移动上网需求,以通过此来获得用户的支持,可是大多数的银行App做的并不好,不仅使用难度高,人机交互做的也很差,完全不符合用户的操作习惯,体验度也不好,那么,为何银行如此有钱却做不好App呢?沐阳圈、子macd857近期的操作:3月19日分享的浙江东日四个交易日涨幅46%,3月21日分享的西仪股份三个交易日涨幅33%,...

    2018-04-01
  • 嘿,快点!这些小程序岗位正在被疯抢...

    招聘旺季,很多人都在考虑是不是要换(炒)个(老)新(板)环(鱿)境(鱼)。听说小程序很火,但小程序公司实在太多太杂,万一遇到“小程序教母”可肿么办!我们花了整整两天时间,综合参考企业规模、融资情况及阿拉丁排名指数优选整理出来第一期12家优秀小程序企业招聘岗位,希望能够帮助优秀的人才快速找到优秀的企业。何必东奔西走,这里可能就有!美团点评北京三快科技有限公司美团点评公司是全球领先的一站式生活服务平台,为超过6亿消费者和和超过450万的优质...

    2018-03-12
  • 用户的体验属性

    人的记忆、欢乐、痛苦、友情、亲情和叛逆等,是每个人所共有的。这些不同的属性,反映着人们各种不同的体验属性。当下,我们每天都在说“用户体验”、“以人为中心”,但我们仔细想想便不难发现,几乎所有的产品及服务,都是在围绕着用户便利性这一单一属性的,人有那么多的体验属性,而我们却几乎没有去挖掘,何谈是以用户体验为中心呢?服务创新的一个思路,不是在纵向上,提高便利性或使用性等单一维度的体验属性而是如何在横向上,调动和反应出人的其他不同维度的体验属...

    2018-04-26
  • UI设计、交互、产品、都应该具有这十种思维模式!!

    注:文章由 集创堂联合创始人CEO纯色老师和设计帮联合出品!这篇文章从十个维度深入挖掘交互设计的思维模式,如果你是UI设计师、初级交互设计师、产品经理、那么这篇文章很值得你学习。笔者在和纯色老师探讨交互设计思维时,老师说“不管你是UI、交互、产品,在团队中都不能是孤立单一的技能,要用联系的观点去看设计,不能分裂来看”。老师说的很对,做UI设计到最后是离不开交互知识支撑的,同样交互、产品也应该具备对设计的审美,这样每一个角色再探讨产品时才...

    2018-01-30
  • 用交互体验方式感受人类智慧结晶

    2017年9月26日,中国科技馆“华夏之光”展厅经过为时半年的更新改造后,将面向公众进行试运行,并于10月1日正式重新开放。“华夏之光”展厅位于中国科技馆主展厅一层,设有“中国古代的技术创新”、“中国古代的科学探索”、“华夏科技与世界文明的交流”三大主题分区,围绕不同主题,讲述中华民族在生存发展过程中不断创造与发明、探索与发现、交流与融合的科技故事。此次封厅改造是在原有展览的基础上进行的局部性升级换代。“华夏之光”展厅维持原有展览框架,...

    2018-01-30
  • 02.案例:用户体验与结婚教练 | 打造产品思维30讲

    02.案例:用户体验与结婚教练来自时间前哨00:0017:10用产品经理的视角来看人今天我想讲一个结婚教练的故事。她是我的一个朋友,现在做的工作就是指导30多岁下定决心要结婚的女生,如何能够在一年半之内搞定结婚。她的方法已经帮助了30多个30多岁的女生完成了结婚。这个结婚教练以前是干什么的呢?她以前是一个互联网公司的产品经理。她的这一套结婚的体系内容挺多的,这堂课我想把她最重要的一个环节拿出来分享。这个环节就是如何观察和判断一个人。因为...

    2018-02-14
  • 阿里UED:优秀阿里设计师如何养成

    编者按:一个优秀的专业交互设计师该具备哪9个素质?一个完整的交互设计流程该经历哪12个阶段?今天阿里的交互设计师从零开始一一帮你解答这两个问题,非常适合新人入门哟。一直以来,交互设计师都是一个受到广泛质疑的岗位,很多人不了解交互设计师的价值,更直接的说,我们大多数的交互设计师没有表现出足够的、令人信服的专业度。大约五年前选择了这个职业,一路走来,质疑过、探讨过,也争辩过。和很多交互设计师一样,我也有过盲目自信和茫然失措,历经时间的鞭挞后...

    2018-03-09
  • 性爱机器人为什么这么火?用户体验称比真人舒服

    来源:环球网【9月9日消息】据外媒称,由于受顾客欢迎,整个欧洲大陆的妓院正在大量抢购性爱机器人。欧洲各地的性玩偶公司也纷纷表示正与“感兴趣的投资者”进行谈判,以在全球范围内扩大业务。荷兰:价值23000英镑的性爱机器人被盗!近日,窃贼闯入了荷兰南部布雷达的一家大型性用品商店,将店里所有的性爱机器人都被偷走了。据悉,这些性玩偶价值23,000英镑。对于经营这家失窃的成人用品商店的老板尼尔斯·范德沃特称,这起看似普通的盗窃行为给他的公司造成...

    2018-04-07
  • 读书会第二期:《用户体验要素》(上)

    《用户体验要素》的作者Jesse James Garrett是美国用户体验咨询公司Adaptive Path的创始人之一,2005年他发表了《Ajax:A New Approach to Web Applications》这篇文章,标志着Ajax的诞生,因此他在又被称为“Ajax之父”。《用户体验要素》的中文版第1版比英文版整整晚了6年,英文版在2001年就出了,国内常见的是2010年出版的中文版第2版,书里的概念在互联网设计界广为流传...

    2018-04-12