【01】Axure8.0工具栏与元件库

认识Axure8.0

由下图所示,Axure8.0主要的7个区域组成:

【1】工具栏区: 对页面进行编辑的一些快捷操作,比如复制粘贴、撤销、页面显示大小、对齐方式、字体等

【2】站点地图区:呈树形结构,可以清晰地看到当前已创建的页面以及页面间的层级关系,也可以添加、删除、重命名页面

【3】元件库区:包括有基本元件、表单元件、菜单和表格、标记元件、Flow、Icons

【4】母版区:默认为空,用于放置公用、复用的元件组

【5】检视区:包含属性设置、说明编辑、样式设置

【6】概要区:显示页面中使用到的所有元件以及相关状态

【7】页面编辑区 :承载元件,可以通过拖动元件设计页面
image

工具栏

1.钢笔、更多

  • 钢笔工具可以自定义形状

  • 更多:边界点、切割、剪裁、连接点、

    边界点用于设置钢笔工具绘制图形的转折点位置

    切割和剪裁作用于图片

    连接点用于调整元件连接点的位置

    格式刷:选中元件》在“更多”找到“格式刷”》选中想要复制的样式进行复制》选中元件点击应用

2.选择

  • 相交选中:选中与选取相交的所有元件
image
  • 含选中:选中在选区内的元件
image

3.连接

选中“连接”之后,点击元件的连接点,拖动到另一元件的连接点,将元件相连,用于实现线框图、流程图

image

4.图层顺序、组合、锁定

图层顺序:通过置于顶层|底层调整图层,或者在概要区域上下拖动进行调整、右击》上|下移一层

  • 组合:应用于两个或两个以上的元件,可以给组合命名

  • 对齐:选中两个及以上元件可以进行对齐操作

  • 分布:应用于两个及以上元件,实现水平和垂直分布

  • 锁定:选中元件锁定之后就不可拖动(比如确定页面背景大小和位置之后,可以进行锁定避免被拖动)

站点地图

  • 调整页面层级关系(新增|删除页面)

  • 选择主页,复制(包括分支)实现分支和页面的复制

元件库

1.选择元件库、加载元件库

  • 可以打开菜单载入元件库(可以在网上下载元件库,也可以自定义)

2.创建元件库、编辑元件库、卸载元件库

  • 菜单》创建元件库》输入元件库名称》新建元件》保存

  • 菜单》编辑元件库》添加元件(类似于添加页面的操作)

3.改变元件大小、位置

  • 改变x、y设置左边距、上边距,改变w、h设置与元件大小

4.填充元件、改变边框样式

  • 选中元件设置填充颜色(可以使用取色器),同样可以添加阴影、设置线段颜色、线宽、线段类型

  • 在取色盘可以点击更多,添加到自定义颜色

5.改变元件形状

  • 点击元件上方的灰色小圆点选择形状,还可以通过更多选择边界点改变形状

  • 点击元件上方灰色小三角可以个改变设置矩形、图片圆角大小

6.元件的交互样式、文本交互与样式

选中元件》右击》交互样式》设置鼠标悬停、鼠标按下、选中、禁用等的样式(例如鼠标移入显示图片,其中不同元件样式可能会不同)

7.占位符、热区

  • 占位符:用于为不确定的元件占位

  • 热区:实现局部可点击(透明可点击区域),例如用于地图上方区域点击

8.内联框架、下拉列表框

  • 内联框架类似于iFrame,从元件库中选中元件,可以引用任何以http开头的URL所展示内容。碘酒内联框架,选择链接到URL或者当前项目页面

  • 在元件库找到表单元件,拖入下拉列表框元件之后,选中双击添加下拉列表项(勾选一个作为默认选项)

image

9.单选按钮、复选框

右击设置为单选按钮组,选中一个作为默认(一定要设置单选按钮组才能实现单选效果)

image

10.动态面板

  • 动态面板实现Tab切换

    将设计好的tab 和内容框选中》右击转换为动态面板》重命名动态面板和状态》复制状态》修改复制状态的样式》在状态1设置tab的点击事件(设置面板状态,选择需要显示状态即可)》同样在状态2设置tab的点击事件

11.中继器

  • 将中继器拖动到页面(重复器,是树级容器,包括了6个中继器动作和5个数据集动作),可以实现导入图片和数据,在交互上可以新增、删除标记行

  • 在检视区找到样式属性,在中继器列表中设置行列以及列名(不能使用中文作为列名),新增列之后,要打开中继器元件复制矩形放到新增列的位置,并给矩形进行命名

  • 在检视中打开用例,设置文本,添加动作为“设置文本",在右侧选中新增的矩形,设置值为fx:插入变量或函数,选择中继器数据集(新增列名)

母版

  • 可以重复使用的区域,比如说页面的导航

  • 类似于页面可以拖动、设置子母版等

  • 右击直接添加到页面或者从页面中移除

检视区域——页面属性、说明、样式

  • 不选中元件时,检视区显示的就是页面属性——页面载入时、窗口尺寸改变时、窗口滚动时

  • 编写的页面说明在HTML左边导航NOTES中显示;还可以在说明中“自定义说明字段”自定义和删除说明标题

  • 可以在样式中设置背景等

检视区域——元件属性、说明、样式

  • 选中元件,监事去显示元件属性,道理同上,只不过针对的对象是元件

  • 选中文本——点击文本链接实现页面跳转

  • 元件的说明:在预览HTML页面时元件右上角有蓝色标记,点击,弹窗显示说明

页面概要区域

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