Axure原型设计基础项目五页面搭建及跳转学习目标 1.掌握简单页面的搭建方法。2.掌握设置页面跳转的方法。5.1 搭建简单的页面 矩形元件
是最常用的元件之一,其交互样式和交互事件均比较多。选中矩形元件,既可为其添加内容,也可以改变元件的圆角和形状等。文本框元件的样式比
较少,所以常和矩形元件一起使用。可以在元件属性面板中给文本框元件设定特殊的输入格式,用来调用移动设备上不同形式的键盘,可选格式:文
本、密码、E-mail、number、phonenumber、url、搜索、文件、日期、month、time。还可以给文本框添加提
示文字,并编辑提示文字的样式(提示文字会在单击文本框时消失)。5.1.1 登录页面如图5-1所示的登录页面为常见的简单页面。图5-
1 登录页面5.1.2 元件样式的添加1.添加外部阴影选中要添加外部阴影的元件,在菜单栏或元件样式面板单击外部阴影按钮,进行外部阴
影的设置。阴影的显示位置分为3种情况:(1)四周都有阴影。把偏移的x、y值都设为0,如图5-2所示。图5-2 四周都有阴影(2)上
侧、左侧有阴影。把偏移的x、y值都设为负数,如图5-3所示。图5-3 上侧、左侧有阴影(3)下侧、右侧有阴影。把偏移的x、y值都设
为正数,如图5-4所示。图5-4 下侧、右侧有阴影2.圆角的设置选中要设置圆角的元件,在该元件的左上角会出现一个黄色的倒三角形,鼠
标悬停在该图形上,按住鼠标左键左右拖动即可,如图5-5所示;也可以在元件样式面板中的“圆角半径”文本框中直接输入值,如图5-6所示
。图5-5 更改样式 图5-6 输入圆角半径3.圆角颜色的设置可通过菜单栏中的边框、线型、填充按钮设置元件的边框样式以及填充色
,如图5-7所示;也可以在元件样式面板中进行设置,如图5-8所示。图5-7 通过菜单栏设置填充色 图5-8 通过样式面板设置填充色
4.交互样式——鼠标悬停鼠标悬停交互样式常作用于单个元件,只有在预览的时候,才会显示交互效果。5.2 生成与预览 同样一个原型,执
行预览和生成命令后,在浏览器的地址栏里显示的地址是不一样的。按“F8”键或选择“发布”菜单中的“生成HTML文件”命令可打开“生成
HTML”对话框,如图5-9所示。图5-9 文件路径单击“生成” 按钮之后,浏览器地址栏显示的就是我们刚才设置的文件夹路径。按“F
5”键或单击“发布”菜单中的“预览”命令进行预览时,在浏览器中的地址栏将显示以“http://127.0.0.1”开头的网址,“1
27.0.0.1”就是本机的IP地址。以这种方式打开原型的效果就像把HTML文件上传到网站服务器,然后通过输入网址打开,如图5-1
0所示。图5-10 打开效果5.3 页面之间的跳转 5.3.1 单击“登录”按钮跳转到百度首页选中“登录”按钮,添加交互事件。依次
选择“鼠标单击时”-“打开链接”-“当前窗口”-“链接到URL或文件”,在文本框中输入“http://www.baidu.com”
,就能够实现单击“登录”按钮时在浏览器当前窗口打开百度首页的效果,如图5-11所示。5.3 页面之间的跳转 图5-11 添加交互事
件5.3.2 用例编辑窗口及作用用例编辑窗口包含用例名称、添加条件、添加动作、配置动作、组织动作等功能,相应的作用及用例见表5-1
。表5-1 用例编辑窗口多项功能及作用在Axure用例中,动作是由上到下执行的,所以设置好顺序至关重要。就像我们在收衣服的时候必须
先打开窗户,再收衣服,最后关闭窗户,打乱顺序就会出现问题。5.3.4 添加用例在Axure中,一个触发事件可以添加多个用例,一个用
例可以添加多个动作。项目小结 选中矩形元件,即可为其添加内容或设置元件的圆角和形状等。文本框元件常和矩形元件一起使用,可以给文本框
元件设定特殊的输入格式,用来调用移动设备上不同形式的键盘,还可以给文本框添加提示文字。感谢观看 THANKS! |
|
