截图标注1，当窗口的宽度大于1366时：
截图标注2，当窗口的宽度小于1366时：
对比一下会发现，当窗口的宽度小于1366px时未设置内容框架的宽度，这样设置的主要目的是为了不让内联框架出现横向滚动条。如果在将低于1366px的屏幕分辨率上演示时，会出现内容页面的宽度超出获取到的内联框架宽度的情况，这时在框架页中的内联框架就会显示出横向滚动条。通过这个设置可以保证内联框架始终不会出现横向滚条，只会出现页面的横向条滚动条。当然，如果你不需要在低于1366px的屏幕分辨率进行演示，就可以不需要进行这样的设置。
截图标注3，设置功能区域的绝对位置。
这个设置的作用是获取浏览器窗口的宽度，减去功能区域动态面板的宽度，使功能区域的动态面板始终保持定位在最界面的右侧区域。
2.梳理功能分类和建立站点地图
3.关于功能内容页面的设计
在开始内容页面的设计之前，我们首先需要定义页面的设计尺寸标准。如果以1366px的窗口宽度为例，我们已经在框架页面中设置了一个宽度为200px的左侧菜单，那么演示时内联框架的宽度是1366px-200px=1166px，根据这个宽度我们将内容页面的设计尺寸宽度设为1100px较为合适。如果你的屏幕分辨率较高，内容页面的设计宽度可以稍微设置大一点，但最好不要超过1300px。
定义页面的设计尺寸需要用到参考线，可以通过从标尺区域向内容区域拖动新建纵向或横向的参考线，选中对应的参考线右击可以将它锁它或进行更多的设置。下面的截图中是我使用参考线的效果，两边分别保留了20px的留白区域。
需要强调的是，内容页面中的内容区域是没有办法实现自适应宽度的，我们需要在页面的属性中将排列方式设置为居中排列。当在较高的屏幕分辨率中进行演示时，内容页面中的内容区域会居中显示，页面两边会有留白的效果。
在内容页面的顶部会有当前页面的标题显示，通过[[PageName]]函数可以自动获取到当前页面的标题，不需要单独设置每个内容页面的标题。设置方法是在标题元件中设置载入时事件，设置载入时设置当前元件的文本为[[PageName]]。
以上几点就是关于功能内容页面的一些基本设置，我们可以设置按照上述设置创建一个页面模板。后台系统的页面类型一般主要是两类：一类是数据查询类，主要由筛选区域、数据列表组成；一类是参数设置类，主要由表单字段、数据录入组成。我们可以基于这两类页面类型创建模板，然后通过复制的方式进行复用，这样可以大大提升设计效率。
数据查询类界面
4.关于统计图表的设计
5.使用母版管理常用元素
了解Axure基本功能的朋友应该都知道母版功能，它可以用来管理一些比较通用的界面元素，可以快速拖动到不同的界面中并支持统一修改，善用母版功能让你的设计效率提升不少。下面的截图就是我在设计后台系统中所建立的母版，其中包含了通用的顶部或底部元素、常用的分页插件和编辑器、常用的按纽元素等。
母版的创建有两种方式，第一种是在编辑界面中选中对应的元素右击选择“转换为母版”，第二种是在母版管理面板中点击右上角第一个“添加母版”按纽进行创建。建议在创建的时候对母版进行命名，如果母版过多的话可以创建文件夹进行管理。
6.使用中继器管理列表元素
Axure里的中继器元件是用于实现动态数据的效果的，但是利于它的特征可以用来方便的管理列表元素。如果我们需要一个多行的数据列表，通常的做法是先创建好一行的元素，然后进行复制排列。
如果这个数据列表有20行，我们就需要复制19行然后排列对齐，这个操作是一个很耗时而且麻烦的过程，对于有对齐强迫症的朋友来说更是恶梦。但是通过使用中继器，我们只需要创建好一行的元素，然后将它复制到中继器中，再在中断器中批量增加19行，这样的一个多行的数据排列就创建好了。
中继器的创建方法很简单，从软件的元件面板中拖动到编辑界面中即可。新创建的中继器默认有3行，你可以删除掉里面的元素，然后在里面编辑自己所需要的元素即可。选中中继器元件时在右侧的属性中，我们可以通过中断器的行管理上方的图标快速的新增和删除行数。
在中继器的样式管理中，我们还可以对它的样式、间距、布局方式进行设置。例如，你可以控制每行或每列显示的数量，通过这些设置可以用它来创建类型更丰富的列表方式。
使用中继器生成的列表效果
7.整理常用的交互元素及组件
8.图标的使用技巧和推荐
SVG是一种矢量的图标格式，你可以将下载到的SVG图标直接拖入到Axure的编辑界面中，支持随意缩放而且不会失真。在Axure8.0的3312的以上版本中，新加入了可以将SVG图标转换为形状的实用功能，只需要选中对应的SVG图标右击“转换SVG图片为形状”即可。SVG图标转换为形状后，除了支持随意缩放之外，还可以根据需要修改颜色和外观。如果你还没有使用过这个功能建议赶紧尝试一下，当然你的Axure版本首先需要升级到8.0.0.3312以上。
本人推荐的另一种是FontAwesome字体图标方案，它的原理是使用字体方式实现的图标效果，在Axure中可以通过字体的特性对FontAwesome图标进行更改，包括：大小、颜色、阴影或者其它字体支持的效果。这种字体图标可以运用到很多常用的场景里，例如，用它来实现按纽的交互样式设置，用来取代默认的单选、复选、开关图标。当你在表格或列表中使用到字体图标时，可以非常的方便的像文本一样进行编辑和修改。下面的表格中所到的图片、开关、编辑等图标都是使用了FontAwesome字体图标。
9.不要纠结于细节的交互效果；
本文由@windir原创发布于人人都是产品经理。未经许可，禁止转载。