Axure 9.0基础教程:元件的正确使用姿势是这样的

一、基本操作

添加元件:从左侧元件库中直接拖拽元件至设计区域,也支持从其他页面复制元件并粘贴进来。

移动元件

直接拖拽元件至任意位置。

使用方向键移动元件位置,每次移动1像素。

Shift+方向键移动元件,每次移动10像素。

Alt+拖拽元件(Mac系统为Option+拖拽元件),快速复制元件并将新元件移动到指定位置。

Shift+Alt+拖拽元件(Mac系统为Shift+Option+拖拽元件),快速复制元件并水平或垂直移动元件至指定位置。

改变元件尺寸

选中元件,拖动元件周围的手柄。

原型、矩形等形状类元件,拖拽手柄时按住Shift键,可以等比例调整元件的宽度和高度。

通过顶部工具栏或右侧样式面板中,直接输入元件的宽度值和高度值,也支持同时选中多个元件,改变这几个元件总的宽度与高度。

旋转元件:选中元件,Windows按住Ctrl键,Mac按住Command键,将鼠标移至手柄周围并上下拖拽鼠标,也可以通过右侧的样式面板直接输入旋转角度。需要注意的是,样式面板的旋转角度为顺时针方向。

元件组合:选中多个元件,右键菜单选择组合(windows快捷键Ctrl+G,Mac快捷键Command+G),也可以直接点击工具栏中的组合按钮。

元件的对齐与分布:选中多个元件,可以通过右键菜单或顶部工具栏针对这些元件进行对齐和分布。对齐方式分为:左侧对齐、水平居中对齐、右侧对齐、顶部对齐、垂直居中对齐、底部对齐。分布方式分为水平分布和垂直分布,至少3个元件才可以设置分布方式。

跳转链接:选中元件,点击右侧交互面板中的单击事件,设置跳转页面,选择页面打开方式(当前窗口/新窗口/弹出窗口/父级窗口)。

元件选择模式:有“相交选中”和“包含选中”两种模式,位于工具栏的左上角。默认为“相交模式”,点击或拖动鼠标选择区域时,接触的所有元件都会被选中。“包含模式”和Visio相似,仅在选取完全包含元件时才能选中。


二、编辑元件样式

工具栏/样式面板编辑:使用设计区域上方的工具栏或者右侧的样式面板可以编辑元件的样式,如填充、边框线、坐标、尺寸、字体、字号、文字颜色等。还可以选择多个元件,并进行对齐、分布、图层顺序调整等操作。

双击编辑:双击元件直接对元件内容或属性进行编辑。比如双击图片元件,可以直接导入图片;双击矩形元件,可以直接编辑文本;双击下拉列表,直接编辑选项。

右键编辑:有些元件属性,需要通过右键菜单显示特有的属性,这些属性与元件类型有关。

元件属性和样式面板:在样式面板中可用找到元件的坐标、尺寸、填充、边线、阴影、边距、字体等通用样式。在右键的属性菜单中可以找到元件特定属性。


三、元件特定属性

图片:固定边角范围,图片拉伸时不影响边角弧度。

单行文本框

类型包含:文本、密码、邮箱、数字、电话、URL地址、搜索、文件、日期、月份和时间。

最大长度:允许输入的最大长度,这里的长度限制对中文、英文和数字都生效。

提示信息:鼠标点击文本框时,提示信息消失。

提示文字样式:设置提示文字内容的样式。

只读:生成原型后,文本框内容不可编辑,仅能查看。

禁用:将元件设置为禁用状态。

隐藏边框:隐藏输入框的边框线。

提交按钮:分配一个按钮,当按下回车键时,按钮执行鼠标单击事件。

多行文本框 :当文本高度超出多行文本框高度时,多行文本框自动出现垂直滚动条。

内联框架

引用页面:支持引用内部页面和外部页面。

隐藏边框:支持隐藏边框线。

滚动条:分为按需滚动、始终滚动和从不滚动。

本地预览:分为无预览、视频预览、地图预览和自定义预览,自定义预览可以从本地导入图片,预览效果仅在Axure画布中有效。

复选框

选中:默认为选中状态,可以切换为未选中。

对齐:默认复选框位于左侧,文字位于右侧,支持互换复选框和文字的位置。

禁用:默认为启用状态,可以设置为禁用状态。

提交按钮:分配一个按钮,当按下回车键时,按钮执行鼠标单击事件。

单选按钮

选中:默认为选中状态,可以切换为未选中。

指定组:将多个单选按钮指定到一个组中,组中的成员同一时间只能有一个处于选中状态。

对齐:默认单选按钮位于左侧,文字位于右侧,支持互换单选按钮和文字的位置。

禁用:默认为启用状态,可以设置为禁用状态。

提交按钮:分配一个按钮,当按下回车键时,按钮执行鼠标单击事件。

下拉列表/列表框

编辑列表项:可以一次添加一项,也可以一次添加多项。

移动项:可以上下移动列表项的位置。

删除项:在编辑窗口中,可以删除任意项。

选中项:默认选中第一项,也可以手动修改选中项。

禁用:默认为启用状态,可以设置为禁用状态。

提交按钮:分配一个按钮,当按下回车键时,按钮执行鼠标单击事件。

菜单

添加菜单项:可以添加同级别菜单项,也可以添加子菜单项;添加同级别菜单项可以选择插入前方或后方。

删除菜单项:选中任意菜单项,可通过右键删除,支持一次性删除多个菜单项。

菜单填充:可以编辑填充像素大小,选择适用范围,适用范围包含:仅当前菜单、当前菜单和全部子菜单。

编辑像素后,我们会看到在菜单外部有一个更大的矩形元件,像素的大小,实际上就是菜单与矩形的边距,颜色可以通过样式面板或工具栏进行设置。

添加节点:可以选择添加节点的位置,支持添加子节点。

移动节点:可以移动节点的位置,调增节点的层级。

删除节点:可一次性删除多个选中节点,删除父节点时,子节点将全部被删除。

编辑图标:Axure提供了三角图标和+-图标,也可以自定义导入本地图标;导入自定义图标时,可以选择适用范围,适应范围包含:当前节点/当前节点和同级节点/当前节点、同级节点和全部子节点。

同一节点,展开和折叠的图标可以不同,根据设计需要可分别导入图标。


四、元件样式面板说明

位置和尺寸

位置:通过X坐标、Y坐标精确设定元件的具体位置。

尺寸:通过设定元件的宽度和高度,确定元件的具体大小。

旋转:输入数值,顺时针旋转任意角度。

不透明度:可以设定元件填充内容、边线、文字的不透明度。

排版

文字:设定字体类型、字的粗细、字体大小、字体颜色。

文本:设定文本行距、字间距,设定文本的对齐方式。

填充:分为颜色填充和图片填充,图片填充时,可以选择图片显示的位置和图片布局方式。图片显示位置包含:左上、左侧、左下、顶部、居中、底部、右上、右侧和右下。图片布局方式包含:不重复、重复、水平重复、垂直重复、填充、适应和拉伸。

边框:可以设置边框线的颜色、粗细、类型;矩形元件可以设置四条边的可见性,直线可以设置箭头样式。

阴影:分为外部阴影和内部阴影,可以设置阴影的颜色、大小、方向及模糊度。

通过X坐标和Y坐标值,不仅可以设置阴影的大小,还可以改变阴影的方向。

圆角:输入半径值,灵活控制圆角大小,还可以设置每个圆角的可见性。

矩形、梯形等四边形的元件,可以将四个直角设置圆角,并且设置每个圆角的可见性,圆形、三角形、五角星等其他形状类的元件不可以设置圆角。

边距:通过输入具体数值,达到控制文本内容与矩形四条边的距离。


五、元件样式管理

样式编辑:在这里可以设置元件的填充、边线、文字、文本布局和视觉五大类样式。

填充:分为颜色填充和图像填充,还可以设置填充位置(上下左右)。

边框线:线条的颜色、粗细、类型、可见性、圆角大小及可见性。

文字:字体、类型、颜色、字号、加粗、斜体、下划线、删除线。

文本布局:分为水平对齐、垂直对齐,设置文本行距和字间距,设置文本基线和文本变形。

视觉:包含阴影、不透明度,包含图像的色调、饱和度、亮度和对比度。

添加和复制样式:可以添加新的元件并设置样式;选中元件,点击复制后,添加新元件并将老元件样式直接复制到了新元件中。

移动位置:在元件样式管理器中,可以上下任意移动元件的位置,一次只能移动一个元件的位置。

删除元件样式:这里仅仅是删除了自定义的元件样式,并没有删除系统元件,元件的默认样式也不会被清除。

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

推荐阅读更多精彩内容