母版面板—移动互联网之路(7)

发表于:2016-11-21 11:47

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:杨阳    来源:51Testing软件测试网原创

分享:
  实例 8
  添加自适应视图
  教学视频:视频 \ 第 2 章 \ 添加自适应视图 .mp4  源文件:源文件 \ 第 2 章 \ 添加自适应视图 .rp
  实例分析:
  自适应视图可以将绘制的原型应用到各种尺寸的界面中,本实例设置了 5 种尺寸,将绘制的内容自适应到 5 种尺寸的界面中,显示不同的效果。
  制作步骤:
  01、执行"文件 > 新建"命令,新建一个项目文件,如图 2-135 所示。分别从元件面板中将矩形元件、占位符元件和按钮元件拖入到页面中,效果如图 2-136 所示。
  02、单击"管理自适应视图"按钮,如图 2-137 所示。弹出"自适应视图"对话框,如图 2-138所示。
  03、单击"添加"按钮,修改"名称"为"手机纵 <=320",其他参数如图 2-139 所示。继续设定视图,完成效果如图 2-140 所示。
 
  提示:通常情况下,会考虑网页、手机纵、手机横、平板纵和平板横 5 种情况,以保证原型在大多数终端可以正常显示。
  04、单击"确定"按钮,在页面编辑区顶部显示不同视图的标签,如图 2-141 所示。分别选择不同的视图标签,调整页面显示效果,如图 2-142 所示。使得内容适应不同尺寸的页面显示。
  
  提示:在修改不同视图尺寸中的对象显示效果时,如果勾选了"影响所有视图"选项,则修改对象时会影响全部的视图效果。
  单击工具栏上的"预览"按钮,拖动浏览器边框改变浏览器视图大小,预览页面在不同页面尺寸下的效果,如图 2-143 所示。
  
本文选自《移动互联网之路—Axure RP8.0网站与APP原型设计从入门到精通》第二章,本站经清华大学出版社和作者的授权。
版权声明:51Testing软件测试网获清华大学出版社和作者授权连载本书部分章节。任何个人或单位未获得明确的书面许可,不得对本文内容复制、转载或进行镜像,否则将追究法律责任。
钢笔工具—移动互联网之路(6)
22/2<12
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号