自適應(yīng)視圖的基礎(chǔ)應(yīng)用

選擇自適應(yīng)圖標(biāo)

首先，打開 DIYAdaptiveTutorial.rp

在這個(gè)例子中，我們將創(chuàng)建一個(gè)簡單的自適應(yīng)布局，當(dāng)瀏覽器的大小比 768px 小時(shí)自動(dòng)更改。

選擇自適應(yīng)圖標(biāo)上面的 0,0 坐標(biāo)打開自適應(yīng)視圖對話框。

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial1.png" alt="image" />

添加 Portait Tablet 預(yù)置視圖

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial2.png" alt="image" />

在自適應(yīng)視圖對話框中，單擊綠色加號創(chuàng)建一個(gè)視圖。

在預(yù)置下拉表框中，選擇 Portait Tablet。

點(diǎn)擊 OK。

選擇 768 視圖和 unplace 藍(lán)色矩形

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial3.png" alt="image" />

在自適應(yīng)視圖選擇工具欄中，選擇 768 視圖，然后 unplace 藍(lán)色矩形。您可以通過按下刪除或右鍵單擊 [Unplace from view]。這將從 768 視圖中刪除小部件，但不是從基礎(chǔ)視圖（其父圖）。

移動(dòng)和調(diào)整的粉紅色和綠色的矩形的大小

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial4.png" alt="image" />

移動(dòng)粉紅色和綠色的矩形將它們堆放在圖像的下方。調(diào)整矩形使它們的寬度和圖像寬度相同。

將綠色矩形變成橙色

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial5.png" alt="image" />

選擇綠色矩形，并改變填充顏色為橙色。切換回基本視圖并注意顏色的變化只是影響了 768 視圖，因?yàn)榛A(chǔ)視圖的子視圖的樣式屬性是不能影響所有視圖的。

在粉紅色矩形上添加文本

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial6.png" alt="image" />

選擇粉紅色的矩形，并添加文本“Get busy!”。注意文本將被添加到基礎(chǔ)視圖和 768 視圖。不同于樣式屬性，文本的更改應(yīng)用于所有的視圖。

預(yù)覽和測試

http://wiki.jikexueyuan.com/project/axure/images/adaptivetutorial7.png" alt="image" />

通過點(diǎn)擊工具欄上的預(yù)覽圖標(biāo)預(yù)覽原型。在自適應(yīng)視圖改變調(diào)整你的瀏覽器大小。

恭喜！你已經(jīng)建立了你的第一個(gè)自適應(yīng)原型。

在移動(dòng)設(shè)備上正確查看你的自適應(yīng)視圖時(shí)，要確保包括視圖標(biāo)簽和其他移動(dòng)設(shè)備上查看設(shè)置上說明[本教程]( http://www.axure.com/learn/adaptive/tutorial)。