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

相关推荐

  • 交互设计牛校排行榜 | 卡内基梅隆

    创艺典国际艺术教育之院校介绍有一位老大哥是高校里的老大哥他在艺术、工业、计算机专业非常强势除此之外它还拥有全美顶尖对顶尖的计算机学院和戏剧学院他就是Carnegie Mellon UniversityCMU卡耐基梅隆大学这些看上去毫不相干但都那么强势的学科结合在一起岂不是成了飞机中的战斗机赛车中的四驱兄弟?卡梅这位老大哥还真这么干了他们开设了一个项目那就是——人机交互交互设计中应用最广泛的学科分支卡内基梅隆的人机交互项目是全球的交互项目...

    2018-04-26
  • Axure RP 8软件安装视频教程

    Axure RP 8下载地址:链接:https://pan.baidu.com/s/1smi2vvf密码:l2oj安装中有问题请咨询私人微信:152374906801、双击打开此文件2、点击next3、选择i  agree然后点击next4、点击bowse更改存储位置建议不要放在C盘然后点击next5、点击next6、点击next7、等待安装8、取消勾选Run Axure RP 8,然后点击Finish9、打开软件的安装目录把复制的la...

    2018-03-04
  • 用户体验设计师、UI 设计师和交互设计师有什么区别?

    首先,不同的公司对不同职位都有自己的理解和定位,名称相似的职位在不同的公司文化中通常职责不尽相同。比如 Google 会要求用户体验设计师有 “专家级的 XHTML,HTML,CSS 和 Javascript 能力” ,而这样的要求在其他公司并不常见。不过通常来说,这三个职位还是各自有一些大概的职责范围的。用户体验设计师用户使用你产品的每一秒钟,都是这 “体验” 的一部分。先不管 “用户体验” 能否被 “设计”,既然你尝试去改变或者影响...

    2018-03-11
  • UED新刊 | 承——中国院方案组二十周年

    📌编辑| F.我觉得记录或者回忆方案组这件事……如果说有意义的话,它不应该仅仅是哥几个的一段往事,而是可能还带有某种其他的价值,可以为我们的同行展现中国建筑发展当中的一个小的片段。——崔    愷《城市·环境·设计》UED108期“承——中国院方案组二十周年”专辑现已发售更多互动福利详见文末扫描文末二维码即可购买新刊导读1997 年,当时还是建设部建筑设计研究院(下称建设部院)的中国建筑设计院(下称中国院),由时任总建筑师和副院长的崔愷...

    2018-02-07
  • Axure小白,快速做出冲顶大会高保真原型,全靠它(附源文件下载)

    Hi,大家好我是Axure实战班萌萌哒的班主任Sara(*^▽^*)这是一篇很有内容的Axure班介绍文章如果你被Axure困扰想快速玩转Axure,做出标准的原型图想写出规范的原型说明,掌握产品交互那么花3-5分钟了解下这个实战班吧,2000多位同学报名学习了,不会错的~先给大家看看我们班liwen同学,做的冲顶大会gif图喔,真的很棒棒耶(*╹▽╹*)(福利资料:添加班主任Sara为好友,可获取“冲顶大会”原型文件。Sara微信见文...

    2018-03-26
  • VUI语音交互设计:三步打造任务导向型对话场景

    语音交互的主要能力在于开放式domain的聊天型功能与任务导向的技能型功能。如果说快捷高效、轻松自然是语音交互的独特优势,那么任务导向型功能就是这些优势的完美落点,一个量好的语音交互产品,自然是技多不压身,能够cover的domain多越好,能够get的技能越强大越好。那么,作为语音产品设计人员,如何以短平快的方式设计一个任务导向型对话场景呢?当然,和传统交互设计工作一样,前期调研是很有必要的。你想设计的这个功能是否能满足产品目标、是否...

    2018-02-15
  • 纽约大学交互设计研究生

    恭喜马同学收到纽约大学(NYU)Interactive Telecommunications 研究生offerOFFER展示:学生作品展示:作品集要求:CREATIVE PORTFOLIOSubmission of a creative portfolio is optional due to the diversity of applicant backgrounds. Portfolio materials need not be ...

    2018-03-09
  • 基于交互体验下的包装视觉传达设计研究

    红河学院美术学院 文俊鸿摘要:包装视觉传达设计中交互体验的表现成为其设计重点,消费者与包装产品设计的关系更加紧密,让消费者在包装设计使用过程中感受到包装设计与消费者的情感交流互动,增强消费者视觉感官交互体验。采取理论研究和案例研究相结合的研究方法,对现代交互设计在包装视觉传达设计应用进行研究,让产品包装与消费者的联系更加紧密,让消费者的心理情感和视觉感官获得更具冲击力的体验,更为有效地实现包装设计与消费者的情感交流互动和传达。关键词:交...

    2018-01-30
  • 【设计】UI设计、UE设计、交互设计分别是什么?

    这些概念在传统行业和传统工业中其实已经发展的很成熟,近几年随着互联网的发展又重新流行起来。UI即User Interface ,字面意思是用户界面,业界一般指的是界面视觉设计UE即User Experience,字面意思是用户体验,这个范围就很广了,不仅仅包含视觉与交互交互设计又称互动设计 ,是人工制品、环境和系统的行为,以及传达这种行为的外形元素的设计与定义。UE范围最大,他研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触...

    2018-05-08
  • Axure RP 8 入门手册 – 第6章(一)

    第6章概要与检视功能第1节概要功能第2节检视功能-页面样式第3节检视功能-页面说明第4节检视功能-页面属性第5节检视功能-元件命名第6节检视功能-元件样式第7节检视功能-元件说明第8节检视功能-元件属性第9节检视功能-元件交互第10节检视功能-组合属性第1节概要功能千语:楼叔,我在做原型的时候,画布里面有很多元件,有的还被别的元件盖住,选起来很不方便,有没有什么好的方法呀?小楼:别急,大妹子!Axure的概要面板中能够很方便的管理元件,...

    2018-04-22