axure8.0原型设计实例:多平台自适应视图

2017年4月29日 阅读:493

PC端、ipad端、移动端……不同平台,不同分辨率,不同大小的屏幕,因此导致程序要开发多个版本来适应不同的平台。随着技术的发展,跨平台技术也越来越好了,跨平台语言,跨平台框架,跨平台应用……当然,原型设计也得跟上技术的发展,axure中的自适应视图正是解决多平台的原型设计问题,这里就以维度(http://weidublog.com)的PC版和移动版为例子,教教大家如何使用axure8.0制作多平台自适应视图的原型设计。

第一步:设置自适应视图

1、启动自适应视图;

2、新建自适应视图“PC版”,条件为大于等于,宽为1024,继承于基本视图

3、新建自适应视图“移动版”,条件为小于等于,宽为1024,继承于基本视图

第二步:拖放摆放好相关控件

进入“PC版”视图,一个1000X800内联框架,从不显示滚动条,切换边框可见性,链接到当前项目的PC版页面。

进入“移动版”视图,一个1000X800内联框架,从不显示滚动条,切换边框可见性,链接到当前项目的PC版页面。

第三步:设计PC版页面

拖拉一些矩形、图片、水平线和文本标签设计PC版页面

拖拉一些矩形、图片、水平线和文本标签设计移动版页面

点击预览中,拖动改变浏览器的宽度,就可以看到宽度大于1024的PC版和宽度小于1024的移动版的切换效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之多平台自适应视图
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/29/569/

没有评论

评论已关闭。