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

产品设计 维度

阅读:3

0

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/

稿源:维度 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » axure8.0原型设计实例:多平台自适应视图

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录