Axure是产品经理们最常使用的原型绘制工具之一,熟练掌握Axure会让产品经理在产品设计时事半功倍。笔者刚开始学习Axure时,常通过高保真还原一些现有的网页来提高自己的技能。下面将通过一个高保证还原一个真实实例来介绍Auxre的使用方法 ,涉及页面布局、页面交互等常用技巧。如果你刚刚接触Axure,熟练掌握本文的案例和方法,你的Axure使用技能突飞猛进。
案例任务:
使用Axure 7.0高保真还原www.ohsame.com 首页(以下简称same官网) 的布局和交互。
在开始做之前,我们首先观察一下same官网,将需要做的任务分解成为一个个小任务,然后逐一击破。
任务组一:页面布局
我们首先看看可以将页面布局分解成哪些任务:页面内容居中
背景由上中下三个色块组成
产品介绍部分的6个部分布局一致但内容不同
布局一
页面居中是网页布局的一般要求,在Axure中可以通设置“页面样式”居中对齐来达到这一效果:
布局二
网页中较常见的只会使用一种背景颜色,直接在“页面样式”的背景色中设置相应颜色即可。尚若要设置多种背景颜色布局,而且在不同的设备和浏览器上都呈现相同效果,就需要采用科学而不是乖戾的做法。我的方案是:使用上中下三色背景图片来布局。我测量了一下三个背景色块的高度,并使用ps制作了一张宽2px高1410px(蓝色 458px: 白色 916px: 蓝色 36px)的三色png图