Axure RP 8 入门手册 – 第6章(一)

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

6         概要与检视功能

1         概要功能

2         检视功能-页面样式

3         检视功能-页面说明

4         检视功能-页面属性

5         检视功能-元件命名

6         检视功能-元件样式

7         检视功能-元件说明

8         检视功能-元件属性

9         检视功能-元件交互

10      检视功能-组合属性

1          概要功能

千语:楼叔,我在做原型的时候,画布里面有很多元件,有的还被别的元件盖住,选起来很不方便,有没有什么好的方法呀?

小楼:别急,大妹子!Axure的概要面板中能够很方便的管理元件,就是页面右下角这里。通过概要功能我们能方便的对元件进行各种操作。

千语:楼叔,能不能不叫我大妹子?

小楼:妹子一定要大!

千语:楼叔,那小楼,就是很小喽?

Axure RP 8.0中界面的右下角是概要面板,这个面板是很常用的,页面中所有的元素都能在这个列表中找到。点击概要面板中的元件,画布中也会同步选中。(图6-1

Axure RP 8 入门手册 – 第6章(一)

(图6-1

    所以,在页面上元件过多互相遮挡的时候,通过概要能方便的选中元件。

另外,概要中还可以为元件命名,点中元件列表中的某项,再次单击该列表项元件名称则变为可编辑状态。(图6-2

 Axure RP 8 入门手册 – 第6章(一)

(图6-2

而直接双击某个列表项,如果是形状类元件则可以直接编辑元件上的文字,如果是图片元件则可以进行默认图片的导入。

概要中,还提供搜索和筛选的功能,可以通过输入元件名称搜索到元件(图6-3),也可以只显示满足筛选条件的元件。(图6-4

 Axure RP 8 入门手册 – 第6章(一)

(图6-3

 Axure RP 8 入门手册 – 第6章(一)

(图6-4

千语:楼叔,概要中这么多元件,有的在上面有的在下面,是按什么规则排序的呢?

小楼:是按层级排序的。就像堆放木板一样,元件也是一层一层叠起来的,在概要中,默认层级越高的元件越靠上显示,顶层的元件排在第一位,底层的元件排在末尾。不过这个顺序也可以在排序与筛选菜单中进行设置。(图6-5

 Axure RP 8 入门手册 – 第6章(一)

(图6-5

千语:那怎么调整元件的层级呢?

小楼:在快捷功能区中有调整层级的按钮啊!(图6-6)不过,在概要中也可以调整。我们可以通过鼠标上下拖动概要列表中的某项来调整它的层级。

 Axure RP 8 入门手册 – 第6章(一)

(图6-6

最后,我再额外说一点,有一些特殊元素,比如动态面板和母版也会显示在这个列表中,这两个特殊元素还能够仅在画布中隐藏,而不影响预览或者生成后页面中的正常显示。点击元件列表项后面的复选框,可以切换该项在编辑区的显示与隐藏。(图6-7

   Axure RP 8 入门手册 – 第6章(一)

(图6-7

2          检视功能-页面样式

千语:楼叔,我做好了一个页面,但是预览的时候,页面整体都在浏览器的左侧,怎么才能居中显示?

小楼:来,小妹妹,蜀黍给你看个好东西!

关于页面的设置,在检视面板中。点击画布的空白处,或者点击概要列表中的页面名称,都能够将检视面板切换到页面的设置。

点击检视面板中的【样式】,打开样式设置界面。(图6-8

 Axure RP 8 入门手册 – 第6章(一)

(图6-8

第一项:选择页面样式方案。

我们可以点击页面样式编辑的按钮,设置多种页面样式的方案,保存在页面样式列表中,然后在页面样式列表中选择使用。

第二项:页面排列。

一共有两个选项,默认为居左显示,可以更改为另一种居中显示。一般在设计Web原型时,我们都会选择居中显示。不过,这两个选项的效果,只有在页面预览或者生成后进行查看时才能看到相应的效果。

第三项:背景颜色。

我们可以像给元件设置填充颜色一样,给整个页面添加背景色。

第四项:背景图片及对齐、重复的设置。

通过点击“导入”按钮导入本地的图像文件后,我们可以进行水平和垂直的对齐设置。如果图像需要重复,还可以进行重复的设置。重复效果里面有两个需要注意的选项就是填充和适应。

填充是指根据图片的原始比例(宽:高)对应浏览器窗口的当前比例,当宽高比变大时,图片宽度与窗口宽度保持一致,而高度按原始比例进行缩放。当宽高比缩小时,图片高度与窗口高度保持一致,而宽度按原始比例进行缩放。比如:图片原始比例16:9,当浏览器尺寸为1200*900时,宽高比变小,这时背景图片尺寸为1600*900。当浏览器尺寸为1200*600.宽高比变大,这时背景图片尺寸为1200*675

适应与填充相反,是指根据图片的原始比例(宽:高)对应浏览器窗口的当前比例,当宽高比变大时,图片高度与窗口高度保持一致,而宽度按原始比例进行缩放。当宽高比缩小时,图片宽度与窗口宽度保持一致,而高度按原始比例进行缩放。比如:图片原始比例16:9,当浏览器尺寸为1200*900时,宽高比变小,这时背景图片尺寸为1200*675。当浏览器尺寸为1200*600.宽高比变大,这时背景图片尺寸为1067*600

案例01QQ注册页面的蓝色渐变背景

QQ注册页面,页面顶部横向铺满屏幕的蓝色渐变背景,使用的就是背景图片水平重复实现的效果。(图6-9

 Axure RP 8 入门手册 – 第6章(一)

(图6-9

具体步骤如下:(图6-10

在概要面板中点击页面名称,将检视面板切换到页面设置;

在检视面板的样式设置界面中,点击【导入】按钮导入本地背景图片;

在下方的列表框中,选择【水平】重复选项。

Axure RP 8 入门手册 – 第6章(一)

(图6-10

第五项:草图效果。

拖动标尺能够让页面上的一些元件变成手绘草图效果,标尺越向右侧拖动草图效果则越明显。

第六项:页面颜色。

能够设置页面的颜色效果。共有两个选项,第一个是彩色效果,第二个是黑白效果。

第七项:字体系列。

能够统一设置页面中的字体系列,比如:宋体或微软雅黑。

第八项:线段宽度。

能够统一增加页面中元件边框以及线段的宽度。

3          检视功能-页面说明

页面设置面板中间一项说明。页面说明可以为当前页面添加注释说明,来便于他人了解页面内容。页面说明直接在下方的文编框中键入内容。

如果需要有多个说明,操作步骤如下:

点击【自定义字段】。

在弹出的窗口中点击【+】按钮,添加新的说明字段名称,点击【确定】按钮后,检视面板中即出现了新增的说明字段,可添加不同的说明内容。(图6-11

 Axure RP 8 入门手册 – 第6章(一)

(图6-11

4          检视功能-页面属性

页面的属性只有给页面添加交互的设置和页面自适应视图启用或关闭的设置。(图6-12

 Axure RP 8 入门手册 – 第6章(一)

(图6-12

特别说明:如何给页面添加交互,实现与页面相关的交互效果,在后文中我们将通过相应的案例进行讲解。

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/36619/

(0)
交互精选交互精选
上一篇 2018-04-22
下一篇 2018-04-22

相关推荐

  • 产品迭代,同样是用户体验的迭代

    作者:Aaron Yan全文共 3542 字 1 图,阅读需要 8 分钟———— / BEGIN / ————我们在使用淘宝、头条、微信这些APP的时候,是不是感觉产品做的越来越好了呢?那么你觉得这种越来越好的变化,是因为APP功能的完善,还是因为操作变得更流畅了?我猜你的答案肯定是:这些APP变得好用是全方位的变好了,不仅仅只是其中一个方面变得比原来更好。我们都知道,APP越来越好用,是因为:我们产品经理和技术团队,在不停地进行产品迭...

    2018-04-01
  • “桥”的创想——中安创谷“创业者之桥”设计全球征集于中科大正式启动

    📌 编辑 | P.S3月15日,中安创谷创业者之桥设计全球征集启动会于中国科学技术大学西区成功举办。标志着全球征集活动正式启动。来自中国科学技术大学、合肥工业大学、安徽大学、安徽建筑大学的师生、本地孵化机构负责人、创业团队、媒体代表等近200人参加了启动会。中安创谷科技园是中国当下以“众创空间、孵化器、加速器、产业基地和基金集群”为主要业态的科技园代表之一,“创业者之桥”作为连接一期、二期园区的重要纽带,对园区的整体性及交通流线起着重要...

    2018-03-17
  • 交互设计|康石石浅谈如何创作一本打动考官的作品集

    近年交互设计大热,但交互设计是否如大家所见所想仅是网页及APP设计,申请交互设计艺术留学的同学们又该如何创作帮助自己跨入名校大门的作品集?今天,康石石为大家带来此文,分享交互设计作品集的创作方法(求职作品集可同理借鉴创作思维)。关于交互设计作品集创作,康石石首先向大家强调几点:1.交互设计不仅仅是网页和APP现代交互设计从某种程度上来说虽然和网页与平面设计的联系从发展的时间上看联系较为接近,然而交互设计并不是一个单纯研究电子产品用户界面...

    2018-02-03
  • 信息港招聘3000多岗位......

    萧山之窗移动生活由此开始....关注2018萧山信息港小镇春季人才招聘200余家企业,3000多个信息经济岗位!3月31日信息港小镇将会举办一场盛大的春季人才招聘会。招聘会时间:2018年3月31日(周六)9:00—16:00招聘会地点:萧山经济技术开发区启迪路198号 信息港小镇B-C连廊除了微医集团、科大讯飞、华网信息、一知智科、网盛数新、华澜微、云集微店、湾区孵化器.....这些信息港小镇内的王牌企业,还有萧山经济技术开发区的部分...

    2018-03-26
  • 来!说一个影响用户体验的网贷“非典型”案例

    点击上方文字“Fintech首席体验官”关注最在乎你体验的公众号这是一个体验至上的时代,无体验,非产品。今天的推送选择了最近在新金融圈,因体验问题而引发的一个“非典型”案例,或许可以作为大家在追求合规过程中的一个警示。先来聊个5毛钱的吧……无论在哪个行业,用户体验都一直被强调。毫不夸张地说,一次用户体验上的失误,给平台带来的伤害几乎是不可估量的。近期,深圳网贷平台人人聚财就遇到了这样的事儿。【背景资料】人人聚财成立于2011年,主营业务...

    2018-03-28
  • 艺术留学新宠—交互设计选"综合类"院校和"艺术类"院校有何差别?

    在当下这个数字智能急速发展的时代,交互设计成为了热门探索领域,同时它也是当下最受欢迎的留学专业之一。相较国外,国内开设交互设计专业的院校较少,即便有,也是和工业设计专业剪不断理还乱。而真正的交互设计包含的范畴更广,这一点从国外不同院校的交互类专业方向上可以看出,其教育框架完全在APP这一分支之上,而表现形式也不局限于媒体、数字、艺术、装置等。对于想要申请国外顶级交互专业院校的同学来说,确定好自己想要探究的专业领域是选校时的重要参考标准。...

    2018-05-07
  • PM的利器——流程图基础

    一、什么是流程图?流程(flow):一系列的逻辑关系(因果关系、时间先后、必要条件、输入输出),在特定的情境下满足特定用户的特定需要的总结。固化、变化。图(chart):形式表现;图形化、可视化;传播性、优化迭代性;二、为什么要画流程图?流程图:角色、流转、规则、顺序、输入、输出;流程图三、流程图有哪些?(1)设计草图:角色、任务、逻辑、输入输出(2)线框图、交互原型图:内容、布局、权重、交互手绘线框图sketch线框图(3)视觉图、U...

    2018-04-08
  • seeds对话未来丨“用户交互设计天才”Kaveh Shirdel

    对话未来丨seeds系列分享会seeds, 由蔚来原创打造,是一个分享有趣观点、新知与灵感的讲堂,它寓意着每一个思想的火花都像一颗种子,被灵感浇灌后,汇成大树。2015年3月seeds诞生,从一个面向蔚来全球员工的内部讲演平台,发展到不断吸引各行各业的主讲人,并且在蔚来App公开直播的产品。到目前为止,seeds 已举办了13场演讲。今年,seeds会走进我们各个城市的蔚来中心,成为常设活动。我们也欢迎各位用户成为seeds的主讲人。人...

    2018-04-29
  • 百度用户体验总监刘超下课,HR内部贴称其“给百度同学造成严重伤害”

    百度用户体验总监刘超因演讲太low被嘘事件又有了进展,就在刚刚,又有网友晒出一张百度内网的帖子,告知员工“公司决定将刘超从百度管理团队除名”等信息,发帖者为“BaiduHR”:截图很快在微信朋友圈流传,但百度公关在相关朋友圈下面没有辟谣。以上帖子,可能是今天(7月3日)早间流传的、刘超在百度内网道歉原帖的最新回复,刘超在百度内网的道歉信如下:刘超在信中称,由于个人重视程度不足、演讲语言和穿衣不恰当的问题,导致在IXDC会议上演讲被嘘,后...

    2018-02-03
  • 实例解析「交互设计七大定律」在设计中的应用(下篇)

    交互设计之父阿兰·库珀说过这样一句话:“除非有更好的选择,否则就遵从标准”;在交互设计领域中,有很多被时间和前人验证过的设计法则,这些法则是从用户的行为逻辑中总结出来的,掌握这些法则能让我们迅速有效的完成自己的设计。上篇内容已经介绍了「交互设计七大定律」的前五个,接下来将把剩下两个定律为大家做个实例分析。六、复杂性守恒定律/泰思勒定律(Tesler’s Law )1、复杂度守恒定律/泰思勒定律(Tesler’s Law )简介:复杂度守...

    2018-03-19