Axure新手养成计划(连载22)

Axure书籍 小楼一夜听春语 11780℃ 0评论

8.    页面设置

前面讲了很多都是和元件有关的,其实关于元件的使用还有很多内容,我们先保留一下,先看看在软件的主界面中还有哪些功能。

苏苏:楼哥,生成的页面怎么居中啊,我生成后都在左半边啊?

苏苏:页面上怎么加背景图啊?放一张图片拉大吗?

小楼:看看中下部位……

在主界面的中下部是页面设置模块,用来给页面设置样式、添加交互、撰写说明。

8.1.  页面样式

首先,我们来看页面样式。

第一项:选择页面样式。

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

128

(图128)

第二项:页面排列。

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

第三项:背景颜色。

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

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

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

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

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

以上是页面设置中左侧的部分功能,下面我们来看右侧还有什么?

第一项:草图效果。

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

第二项:页面颜色。

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

第三项:字体系列。

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

第四项:线段宽度。

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

8.2.  页面说明

页面设置面板中最左侧一项是页面说明。页面说明像元件说明一样,可以为当前页面添加注释说明,来便于他人了解页面内容。页面说明直接在下方的文编框中键入内容。如果需要有多个说明,可以点击【自定义说明字段】,当完成添加后在下拉框中选择不同的字段名称,即可添加不同的说明内容。(图129)

129

(图129)

8.3.  页面交互

页面交互中包含页面的各种触发事件,可以为页面的触发事件添加用例,来执行指定的动作。

比如,在本章6.3.3.6.案例“焦点元件控制”中,如果需要在页面打开时,就可以直接向第一个文本框中输入文字,就可以通过页面的触发事件来实现。我们只需要在【页面加载时】事件中添加一个用例,设置动作为【获取焦点】在文本框“A”上,即可实现需要的效果。(图130)

130

(图130)

注意:页面加载时获取焦点的这个效果,在IE浏览器中会因为安全性限制而失效,所以不要使用IE浏览器查看该效果。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » Axure新手养成计划(连载22)

喜欢 (28)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 楼哥的教程写的非常棒!看着不累!操作虽然是文字,没有动图,但是很清晰!很准确!已经看到24节了!收获很大!谢谢!继续加油!! 😀 😀
    姣姣2016-03-09 18:08 回复
  2. 小楼老师,页面说明设置完成之后,预览或者生成页面后在哪能显示出来说明里边描述的内容呀?
    tiana2016-03-24 22:38 回复