×
关于

核心训练

准备开始页面操作部件库和 Masters建立交互引入动态面板条件、值和变量

从头开始

电子商务网站手机上展示的原型

原型设计基础指南

按钮的交互显示隐藏部件用户自定义 Tooltip导航菜单

Masters 指南

上一页/下一页链接 Master

动态面板指南

图片循环显示制作自定义的下拉菜单折叠控制选项板部件视频与图片的 Lightbox图像的拖拽交互拖拽地图自动旋转标题

高级原型设计指南

账户登录Auto-Tab 字段Terms 和 Conditions下拉列表选择必填字段设置文本下拉列表将文本传递给下一个页面在下一个页面上设置面板

Web 设计指南

嵌入视频和地图

iPhone App 指南

滑动菜单滚动内容屏幕过渡动画Swipping 幻灯片

Repeater 部件指南

Repeater 小部件

自适应视图指南

自适应视图

自适应视图


自适应视图的基础应用

选择自适应图标

首先,打开 DIYAdaptiveTutorial.rp

在这个例子中,我们将创建一个简单的自适应布局,当浏览器的大小比 768px 小时自动更改。

选择自适应图标上面的 0,0 坐标打开自适应视图对话框。

image

添加 Portait Tablet 预置视图

image

在自适应视图对话框中,单击绿色加号创建一个视图。

在预置下拉表框中,选择 Portait Tablet。

点击 OK。

选择 768 视图和 unplace 蓝色矩形

image

在自适应视图选择工具栏中,选择 768 视图,然后 unplace 蓝色矩形。您可以通过按下删除或右键单击 [Unplace from view]。这将从 768 视图中删除小部件,但不是从基础视图(其父图)。

移动和调整的粉红色和绿色的矩形的大小

image

移动粉红色和绿色的矩形将它们堆放在图像的下方。调整矩形使它们的宽度和图像宽度相同。

将绿色矩形变成橙色

image

选择绿色矩形,并改变填充颜色为橙色。切换回基本视图并注意颜色的变化只是影响了 768 视图,因为基础视图的子视图的样式属性是不能影响所有视图的。

在粉红色矩形上添加文本

image

选择粉红色的矩形,并添加文本“Get busy!”。注意文本将被添加到基础视图和 768 视图。不同于样式属性,文本的更改应用于所有的视图。

预览和测试

image

通过点击工具栏上的预览图标预览原型。在自适应视图改变调整你的浏览器大小。

恭喜!你已经建立了你的第一个自适应原型。

在移动设备上正确查看你的自适应视图时,要确保包括视图标签和其他移动设备上查看设置上说明[本教程]( http://www.axure.com/learn/adaptive/tutorial)。


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)