47个Axure基础学习实践

基础1:添加元件到画布

在左侧元件库中,选择要使用的元件,按住鼠标左键不放,拖动到画布适合的位置松开。

添加元件到画布

基础2:添加元件的名称

文本框属性中输入元件的自定义名称,建议采用英文命名。

为什么要添加元件的名称呢?

我们在做交互的时候,可能会碰到多块面板或者是其他的元件。你要针对整个框架做交互动作,但是呢你的框架又由很多小的元件组成的。那么这个时候,我们就需要组合。当它组合起来取一个名称,取名称之后,我的交互效果是针对于组合起来的这样的一个框架面板。这就是取名称的一个目的。

在Axure的官方网站也是说建议我们取名的时候取英文名。正常的情况下,怎么方便怎么来,我们也可以将其命名为中文名或者阿里伯数字。

添加元件的名称

基础3:设置元件位置/尺寸

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

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

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

w:指元件的宽度值。

h:指元件的高度值。

在输入数值调整元件尺寸时,可以在样式中设置,让元件【保持宽高比例】。

设置元件位置/尺寸

基础4:设置元件的默认角度

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

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

设置元件的角度

基础5:设置元件颜色与透明

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

设置元件颜色与透明

基础6:设置形状或圆片的角度

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

设置形状或图片圆角

基础7:设置矩形仅显示部分边框

在Axure 8的版本中,矩形的边框可以在样式中设置显示全部或部分。

取消部分边框 7

基础8:设置线段/箭头/边框样式

线段、箭头和元件边框的样式可以在快捷功能或者元件样式中进行设置。

设置线段/箭头/边框样式

基础9:设置元件文字边框/行距

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

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

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

设置元件文字边框/行距

基础10:设置元件默认隐藏

选择要隐藏的元件,在快捷功能或者元件样式中勾选【隐藏】选项。

设置元件默认隐藏

基础11:设置文本输入为密码

文本框属性中选择文本框的{类型}为【密码】


设置文本框输入为密码

基础12:设置打开选择文件窗口

文本框属性中选择文本框的{类型}为【文件】,即可在浏览器中变成打开选择本地文件的按钮。该按钮样式各浏览器略有不同。

设置打开选择文件窗口

基础13.限制文本框内输入的字符位数

在文本框属性中输入文本框的{最大长度}为指定长度的数字。

限制文本框内输入的字符数

基础14.设置文本框提示文字

在文本框中输入文本框的{提示文字}。提示文字的字体、颜色、对齐方式等样式可以点击{提示样式}进行设置

提示文字设置包含{隐藏提示触发}选项,其中:

输入:指用户开始输入时提示文字才消失。

获取焦点:指光标进入文本框时提示文字即消失,

设置文本框提示文字

基础15.设置文本框回车触发事件

文本框回车触发事件是指在文本框输入状态下按<回车>键,

可以出发某个元件的【鼠标单击时】事件。只需要在文本框属性中{提交按钮}的列表中选择相应的元件即可。

设置文本框回车触发事件

基础16:鼠标移入元件时的提示

在文本框属性中(元件提示)中输入提示内容即可/


鼠标移入元件时的提示

基础17:设置矩形为其他形状

在画布中点击矩形右上方圆点图标即可打开形状列表,设置为其他形状。

设置矩形为其他形状

基础18:设置自定义形状

在形状上点击<鼠标右键>,在菜单中选择【转换为自定义形状】,即可对形状进行编辑。也可通过点击形状右上角的圆点鼠标,在打开的形状列表中选择【转换为自定义形状】

设置自定义边框

基础19:设置形状水平/垂直翻转

在形状的属性中可以对形状进行【水平翻转】和【垂直翻转】的操作

设置形状水平/垂直翻转

基础20:设置列表框的内容

下拉列表框与列表框都可以设置内容--列表项。可以通过【属性】-【列表项】的选项来设置,也可以通过鼠标双击元件进行设置。

设置列表框的内容

基础21:设置元件默认选中/禁用

元件的属性中可以对一些元件的默认状态进行设置,可以设置的状态包括【选中】和【禁用】,默认状态的设置,可以触发属性中设置的交互样式。比如设置某个元件在浏览器中默认为禁用的灰色,就需要勾选【禁用】(复选框)。并设置禁用的交互样式。

设置元件默认选中/禁用1

基础22:设置单选按钮唯一选中

全选所有的单选按钮,在元件属性中{设置单选按钮组名称},即可实现唯一选中的效果。

设置单选按钮唯一选中

基础23:设置元件不同状态的交互样式

点击元件属性中各个交互样式的名称,即可设置元件在不同状态时呈现的样式。这些样式在交互被触发时,就会显示出来。比如设置元件默认状态为禁用,在浏览原型时,页面打开后就会显示元件被禁用的样式。

设置元件不同状态的交互样式

 基础24 :设置图片的文本

设置图片文本需要在图片上点击<鼠标右键>。选择【编辑文本】,方可进行图片上的文字编辑。

设置图片上的文本

基础25:切割/裁剪图片

在图片的元件属性中,设有切割和裁剪的功能图标,点击即可使用相应的功能。元件上点击<鼠标右键>,菜单中也有相应的选项。

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

裁剪:可将图片中的某一部分取出,裁剪分为几种,分别是裁剪、剪切和复制。其中:裁剪只保留被选择的区域;剪切是将选取的布恩从原图中剪切到系统剪切板中;复制是将选取的部分复制到系统剪切板中,复制的方式对原图没有影响。


切割/裁剪图片

基础26.嵌入多媒体文件/页面

基本元件的内联框架可以插入多媒体文件与网页。双击元件或者在属性中点击【框架目标页面】,在弹出的界面中选择【链接到url或文件】,填写{超链接},内容为多媒体文件的地址(网络地址或文件路径)或网页地址。在这个界面中也可以选择嵌入原型中的某个页面。


嵌入多媒体元件页面

基础27. 调整元件的层级

元件的层级可以通过点击快捷功能中的图标或者右键菜单的【顺序】选项进行调整,也可以在页面内容概要中通过拖动进行调整。概要中层级顺序为由上至下,最底部的元件为最底层。


调整元件的层级

基础28.组合/取消组合元件

通过快捷功能图标或右键菜单可以将多个元件组合到一起,达到共同移动/选取/添加交互等操作,组合/取消的快捷键为<Ctrl>键

组合/取消组合元件

基础29.转换元件为图片

形状/文本标签/线段等元件可以通过点击<鼠标右键>,选择将元件【转换为图片】。例如,使用少量特殊字体或者图标字体时,即可将元件转换为图片,避免在未安装字体的设备上浏览原型时不能正常显示。

转换元件为图片

基础30. 载入元件库

除了使用软件自带的默认元件库与流程图元件库,用户还可以加载自定义元件库。加载自定义元件库只需要点击功能图标,在列表中选择【载入元件库】

载入元件库

基础31.切换元件库

在元件库功能面板中,可以通过点击元件库列表,选择不同的元件库进行使用。

切换元件库

基础32.设置页面居中

在页面【样式】设置中选择页面居中的按钮。页面居中是指在浏览器中查看原型时页面内容内容居中显示。

设置页面居中

基础33:设置页面背景(图片/颜色)

在页面【样式】中可以编辑页面的背景颜色以及背景图片。

设置页面背景

基础34:设置页面颜色(草图/黑白)

在页面的【样式】中,可以将当前页面的显示为草图效果,同时可以将页面颜色在彩色与黑白之间转换。

设置页面颜色(草图/黑白)

基础35:添加条件判断

在用例编辑页面中点击添加【条件按钮】进行添加条件

添加条件判断

基础36:设置条件逻辑关系

设置执行一个动作必须同时满足多个条件,或者仅需满足多个条件中的任何一个,需要在添加条件的页面进行设置。

设置条件逻辑关系

基础37:用例条件转换

为多个用例改变条件判断关系时,只需要在相应的用例名称上点击<鼠标右键>,选择【切换为或】


用例条件转换

基础38:设置形状并排显示细边框

在【菜单】-【项目】的选项列表中,选择【项目设置】;在弹出面板中进行{边界对齐}的设置。选择【边框重合】时,两个形状中间的边框为细边框;选择【边框并排】时,两个形状中间的边框为粗边框。

设置形状并排显示细边框

基础39:设置画布中的遮罩阴影

在【菜单】-【视图】-【遮罩】的选项列表中,取消相应的勾选。比如画布中隐藏的元件不显示淡黄色的阴影,则取消【隐藏对象】的勾选。

设置画布中的遮罩阴影基础40:

基础40:显示/隐藏交互与说明编号

在【菜单】-【视图】的选项列表中,取消【显示脚注】的勾选。

显示与隐藏脚注

基础41:显示/隐藏两侧的功能面板

点击快捷功能中的图标即可关闭开启相应的功能面板

显示/隐藏两侧的功能面板


基础42:展开/收起/弹出/停靠/关闭功能面板

如果某个功能面板需要更大的操作空间,可以将其弹出或者收起其他功能面板。当完成操作后再进行还原。面板弹出后可将其关闭。


展开/收起/弹出/停靠/关闭功能面板

基础43:关闭/恢复功能面板

面板可以在弹出状态下点击【x】将其关闭,也可以在【视图】-【功能区】菜单中进行关闭或开启。

如果需要将功能区所有面板恢复默认。可以在【视图】中通过【重置视图】来完成。

关闭/恢复功能面板

基础44:文件备份与恢复

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

文件备份与恢复

基础45:快速预览查看原型

预览原型的快捷键为键。或者,点击快捷功能中的预览图标进行预览。导航菜单【发布】-【预览设置】中进行预览的设置。

快速预览查看原型

基础46:生成HTML查看原型

生成原型的快捷键为键。或者,点击快捷功能中的生成图标,选择【生成HTML文件】进行生成。还可以通过导航菜单【发布】-【生成HTML文件】中进行生成

生成HTML查看原型

基础47:生成部分原型页面

发布原型时,如果不需要将所有页面生成或发布,可以在HTML的设置中打开【页面】设置,取消【生成所有页面】的勾选,则可以设置生成制定的页面。注意,子集页面无法单独发布,勾选子集页面时会自动勾选父级页面。如果需要单独发布子集页面,需要在页面管理面板中奖子集页面的级别调整到一级页面。

生成部分原型页面
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 一、Axure界面介绍 1、页面导航面板(Pages) Axure的页面管理采用类似操作系统的文件夹和页面文件的管...
    落霞__孤鹜阅读 55,554评论 7 46
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,413评论 25 707
  • 效果分析 通过点击右上角的图标切换扫码、账号登录方式; 在扫码登录页面,鼠标移入、移出二维码时,二维码平行移动,并...
    第七周期阅读 13,781评论 0 11
  • 我是日记星球270号星宝宝素梅—素食者王继梅,正在参加日记星球21天蜕变之旅,这是我的第62篇原创日记,坚持每天一...
    素梅1素食者王继梅阅读 236评论 0 1