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

相关推荐

  • Axure模板库(13)-直播

    最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

    2018-03-04
  • 创新与用户体验---工业设计的双驱动力

    4月18日上午深圳融一凤巢设计发展有限公司创始人兼深圳市工业设计协会副会长仪永杰在PDC设计廊会场与到场展客商分享并探讨了现今智能硬件和消费电子类领域的设计发展趋势。仪永杰认为在消费升级的市场导向下,供方市场慢慢转化为需方市场,消费者不仅满足于产品的存在,更多的是产品在消费者内心中碰撞出情感。以小米科技为例,现今决定设计生命力延伸的是创新意识,是对工业设计创新的重视程度。从设计服务到产品化和供应链都需要整合创新满足用户对产品日益增长的功...

    2018-04-18
  • 一、Axure教程--app启动画面的翻页效果

    1、案例示例:2、参考对象:qq安全中心-启动画面3、案例描述:手指向左右滑动界面时,能够切换显示内容;切换内同时,屏幕下方的圆点标记同步切换;当切换到最后一个页面,单击进入主页的按钮时,启动画面和圆点分页标签隐藏;同时屏幕顶部状态栏改变样式。4、素材准备:见百度圆盘5、采用技术:动态面板、全局变量。6、制作难点:启动页面切换时,使用全局变量记录切换后的面板状态名称;将底部的分页标签面板同步切换到同名称的状态。7、制作过程:https:...

    2018-04-29
  • 医生如何离开体制创业、卓越的用户体验如何打造 | 首届妇幼医疗高峰论坛精彩环节分享

    本文编辑:卢维晨 要笑尘“2018首届妇幼医疗高峰论坛”于2018年4月21日在上海嘉里大酒店开幕。本次会议由上海春田医院管理有限公司主办,中国非公立医疗机构协会妇产科专业委员会作为学术支持。来自国际、国内知名的妇儿医疗机构投资者、拥有者、运营管理者、妇产儿科医生、医药企业、医疗器械企业、孕婴童产业、互联网创新企业等诸多行业专家领袖出席了本届论坛。本次大会上,隆重发布了中国首部以妇儿医疗机构为主题的《2018中国妇儿医疗机构白皮书》,本...

    2018-04-22
  • 一款运动类APP的产品交互设计全过程(两万字干货)

    这次的分享是前不久完成的一次比较完整的交互设计工作,基本上涵盖了前、中、后期的完整流程,包括前期的定位分析、用户调研、业务需求分析、目标用户画像、用户需求分析、关键因素分解、路径分析,完整的交互设计文档,以及后期的可用性测试,希望对需求分析、交互设计或可用性测试感兴趣的朋友们有用。1第一卷 需求分析1概述1.1 产品目标以运动为主题,选定某一种运动形式,完成一款 APP 产品的交互设计,内容集中在统计和分享运动量方面。1.2 关键词分解...

    2018-01-31
  • 小编来告诉你交互设计是什么啦!

    什么是交互设计用户界面有两部分的设计:交互设计和视觉设计。交互设计的产出物是可交互的低保真原型,设计内容包括:信息架构、页面布局、流程跳转。1. 信息架构信息架构,是为了让用户在使用APP、软件、网页的时候,能够快速找到自己需要的信息、资料、功能,并且在使用的过程不会迷路。它有层级、有逻辑顺序、要能反映信息(功能)的重要程度和关系。信息架构的组成部分:组织系统:关注如何组织信息。比如小说,按篇幅,可以分为短篇、中篇、长篇;按年代,可以分...

    2018-04-12
  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01
  • 酱课程丨交互设计第③期 · 原来交互设计师是这样工作的,和你想的一样吗?

    交互课程第三期来啦!查看前两期点击这里——交互设计第①期 · 这个老师只用一张图,就解决了所有设计专业都会遇到的问题!交互设计第②期 · UI/UX傻傻分不清楚?分分钟带你搞懂交互设计下的六大Job Titles!通过前两期课程,同学们了解了双钻图——一套完整的设计流程指导框架、定义了什么是交互设计、它所涉及到的领域以及与交互设计相关的六大Job titles。现在大家对交互设计已经有了一个大致的理解,设计流程框架也是现成的,下面就要进...

    2018-05-04
  • 智能窗帘:场景化智能应用 让用户体验“懒”生活

    科技总是带给我们惊喜。智能家居不再是一个研发层面的概念,在日常生活中已经越来越普及。智能窗帘是智能家居系统中常常被忽视,却又见微知著的家装部分。智能窗帘无需手动,一键掌控家居空间的透光度,智能防紫外线、隔音隔热和保温环保,给用户细致的关怀。智能窗帘的场景化智能应用,让用户体验懒惰带来的享受。冬天清晨,想打开窗帘让阳光温暖房间,却又懒得起身离开暖被窝,使用智能窗帘,应时自动打开,敞开度适宜,光线强弱刚刚好,惬意的在阳光中醒来。炎热夏日,离...

    2018-02-25
  • 你的网站用户体验为什么比竞争对手差

    网站SEO优化用户体验,又是用户体验!总是有一些站长弄不明白他的网站到底哪里做的不好,明明也做了蛮多的网站优化工作,但是与竞争对手的网站相比的时候,优化数据始终差一截。总是有窗口自动弹出不管是广告窗口,还是在线咨询窗口,如果不是用户主动点开,就自动频繁的弹出来,用户关掉一遍两遍,还是弹出来,那么这种设置明显是在撵用户离开你的网站。存在死链或错误链接第一种情况是用户通过搜索目标关键词找到你的网站,想点击进入却发现是无法打开的;第二种情况是...

    2018-02-16