在Axure中，我們可以使用自適應(yīng)視圖來調(diào)整界面的展示。例如PC瀏覽就顯示PC樣式，手機(jī)瀏覽就顯示手機(jī)的樣式，根據(jù)設(shè)備的不同分辨率來展示對(duì)應(yīng)的界面。

先預(yù)覽下這期有些啥：【點(diǎn)我預(yù)覽】http://t9ymya.axshare.com/auto.html

如上演示中，界面適配了iphone5、iphone6 及 iphone6 plus。它需要使用axure中的自適應(yīng)視圖功能才能實(shí)現(xiàn)。

教程步驟

第1步：找到設(shè)置自適應(yīng)視圖的管理入口

在操作區(qū)域頁面的任意【空白位置】單擊鼠標(biāo)，即可在右側(cè)檢視面板》屬性中找到自適應(yīng)管理入口。

第2步：管理自適應(yīng)視圖

1、啟用自適應(yīng)視圖，并新建小、中、大，三種自適應(yīng)視圖的尺寸

設(shè)置?【?。?00*300】、【中：>=300*500】、【大>=400*600】并逐一繼承上一個(gè)。

設(shè)置完畢后，我們返回操作區(qū)域查看，界面發(fā)生了如下的變化：

界面多了你設(shè)置過的自適應(yīng)視圖的三個(gè)Tab，并多了根據(jù)設(shè)置產(chǎn)生的參考線。

我們在界面【小】中放入一個(gè)文本框，并在各個(gè)Tab中填充到參考線的寬度，做一個(gè)Demo來驗(yàn)證自適應(yīng)視圖是如何運(yùn)作的：

完成如上步驟后，我們在chrom瀏覽器中通過拉動(dòng)屏幕調(diào)整分辨率觀察自適應(yīng)視圖的運(yùn)作：

我們發(fā)現(xiàn)，隨著窗口大小的變化，文本框A自動(dòng)切換對(duì)應(yīng)的大小。

至此，我們已經(jīng)初步的學(xué)會(huì)自適應(yīng)視圖的基本原理和操作。下面我們再來看看自定義視圖中的其它設(shè)置：

2、在基本視圖【最左側(cè)視圖】里修改，會(huì)同步影響其它視圖【因?yàn)槠渌晥D繼承基本視圖】

3、在其它視圖里修改，會(huì)修改該視圖+繼承于它的視圖中的內(nèi)容【本例中400繼承300】

4、如果勾選影響到所有，則所有的視圖都會(huì)同步被修改

我們發(fā)現(xiàn)，只有新增添的屬性是會(huì)同步變化的，如上的演示中，【小】視圖的文本就沒有加粗效果。

繼承關(guān)系的設(shè)置：

工作中的使用建議

日常工作中，幾乎極少使用自適應(yīng)視圖。因?yàn)锳xure功能非常強(qiáng)大，如果你是一個(gè)設(shè)計(jì)師或者要做一些精細(xì)的交互稿，它就可以滿足你。而作為產(chǎn)品經(jīng)理，更重要的是將邏輯和需求講解明白，并且大部分都是明天要，所以是效率優(yōu)先，自然不能帶多少交互。

工具的掌握都是多學(xué)多用，多做demo例子。產(chǎn)品經(jīng)理還是要以思維邏輯為優(yōu)先，如何能快速的將需求理清，并整理為案，通過原型快速的將需求傳達(dá)出來，才是重點(diǎn)。

當(dāng)然熟練掌握Axure也是必備技能之一，待你工作效率已經(jīng)超越別人2-5倍的時(shí)候，你就不會(huì)滿足靜態(tài)稿了。學(xué)無止境！

內(nèi)容下載地址：

作者鏈接：http://pan.baidu.com/s/1pKSiUi3 密碼：htcz

在線預(yù)覽：http://t9ymya.axshare.com/auto.html

本文由 @陳張良 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。