首先认识axure rp pro 7.0软件的默认界面布局。最上面的是工具栏区域,左侧上方的是网站地图区域(sitemap),左侧中部的是部件区域(widgets),左侧下方的是模板区域(masters),中间上方的是页面区域,中间下方的是页面设置区域,右侧上方是部件属性区域,右侧下方是动态面板区域。
依次点击publish,preview或直接按快捷键f5或直接按工具栏里的预览按钮,就可以在浏览器中对当前项目进行预览。
依次点击publish,preview options ...或者同时按ctrl+f5,可以对预览进行设置。
以上,可以选择使用哪个浏览器,预览是否需要带上sitemap。
点击publish还包括一些设置:
以上,more generators and configurations是用来自定义生成器的。generate html files用来保存所有的html页面以及各项设置。regenerate current page to html用来保存当前的html页面以及各项设置。
如果要修改左侧站点地图中的节点名称,就右键节点,点自己rename来对节点重命名。
新建页面,点击网站地图区域左上方的add page按钮。
添加文件夹,点击网站地图区域左上方的add folder按钮。
调整页面节点在网站地图区域的位置关系,先选中页面节点,再点击左上方的向上或向下箭头。
删除网站地图区域的某个节点,先选中,再点击上方的删除按钮。
点击网站地图区域右上方的搜索按钮,可搜索节点。
双击网站地图区域的节点开始对页面进行编辑。
widgets下的部件可拖动至页面区域。
可以通过左上角的select library下拉框选择不同的部件,还可以搜索部件。
● text field: 输入框
● html button: 按钮
● image:放置图片,双击选择图片源,还可以把导入的图片切成若干个符合页面布局的图片
● droplist:下拉框
● rectangle:矩形部件,可以填充上背景,作为文字链接,还可以变形为不同的形状
● placeholder:当需要在页面上预留一块区域但还没有想清楚到底放什么的时候用
● table:表格
● text area:多行文本框
● list box:多选框
● checkbox:复选框
● radio button:单选框
● button shape:制作像tab一样的按钮,鼠标悬停改变背景色的按钮,等等
● inline frame:iframe,在一个页面中显示另外一个页面
● dynamic panel:可以看作是一个拥有多种状态的超级部件,然后通过事件选择某种状态。比如,创建一个拥有12个状态的动态面板部件,分别对应12个月份,如果某个状态和当前月匹配,就显示某种背景颜色。动态面板默认情况下显示第一个状态。可以理解成一个包含其它部件的部件
● classic menu-vertical:创建多级别垂直菜单
● classic menu-horizontal:创建多级别水平菜单
● tree:树形目录
● flow分组下的部件用来创建流程图
......
还可以加载或下载第三方或官方的部件。
每个部件都有一些共有的属性,包括:名称、坐标、尺寸、字体、字体大小、字体样式、字体对齐、字体颜色、边框颜色、边框粗细、边框样式、填充颜色、置于前、置于后、锁定部件,等等。
masters下放置一些重复使用的模块,比如:导航、网站头部、网站底部、网站logo、经常重复出现的模块。
页面区域就是要被生成html的区域。页面的刻度是单位像素,左上角是页面的原定坐标。右键页面空白区域弹出的菜单中有grid and guides这项,这是有关网格和参考线的,点击grid settings,可以设置网格之间的间距,默认是10个像素,可以设置网格样式。可以设置参考线(guides),在横坐标或中纵坐标区域内点击并拖动就可以创建参考线。而这里的参考线是针对当前页的。
如何创建全局参考线呢?页面右键,grid and guides,create guides,看到如下:
全局参考线的创建基于分栏。在preset属性下包括:宽度960像素分成12列,宽度960像素分成16列,宽度1200像素分成12列,宽度1200像素分成15列;columns组用来设置列,# of columsn 表示一共几列, column width表示列的宽度,gutter width表示列之间的距离,margin左右留白;rows组用来设置行,设置类同columns组。假设创建一个3列、列宽100,列间距20,左右两侧留白10,就按如下设置:
效果如下:
所以,整个布局的宽度=10*2+100*3+20*2=360像素
在页面设置区域中的page notes用来输入一些文字信息,比如描述需求的信息;page interactions中设置一些页面级别的事件;page style中设置页面格式,比如:背景图片、背景颜色、对齐方式、字体、间距,等等。
在有关部件的widget interactions and notes面板中, interations用来设置部件事件,比如焦点事件,比如失去焦点事件;notes用来添加一些备注说明。
在有关部件的widget properties and style面板中,设置部件的各种样式。
当把dynamic panel部件拖动到页面,在widget manager面板中出现一组状态的集合,每个状态就像photoshop中的一个层,可以根据互动需要,让一个层显示,其它层隐藏。还可以通过每个状态后的蓝色小图标来控制状态的可见性。
参考资料:axure rp高保真网页原型制作,from 吕皓月、杨长韬