Axure 原型 | 教你使用自適應視圖構建界面

在Axure中，我們可以使用自適應視圖來調整界面的展示。例如PC瀏覽就顯示PC樣式，手機瀏覽就顯示手機的樣式，根據設備的不同分辨率來展示對應的界面。

先預覽下這期有些啥： 【點我預覽】http://t9ymya.axshare.com/auto.html

如上演示中，界面適配了iphone5、iphone6 及 iphone6 plus。它需要使用axure中的自適應視圖功能才能實現。

教程步驟

第1步：找到設置自適應視圖的管理入口

在操作區域頁面的任意【空白位置】單擊鼠標，即可在右側檢視面板》屬性中找到自適應管理入口。

第2步：管理自適應視圖

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

設置【小：200*300】、【中：gt;=300*500】、【大gt;=400*600】并逐一繼承上一個。

設置完畢后，我們返回操作區域查看，界面發生了如下的變化：

界面多了你設置過的自適應視圖的三個Tab，并多了根據設置產生的參考線。

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

完成如上步驟后，我們在chrom瀏覽器中通過拉動屏幕調整分辨率觀察自適應視圖的運作：

我們發現，隨著窗口大小的變化，文本框A自動切換對應的大小。

至此，我們已經初步的學會自適應視圖的基本原理和操作。下面我們再來看看自定義視圖中的其它設置：

2、在基本視圖【最左側視圖】里修改，會同步影響其它視圖【因為其它視圖繼承基本視圖】

3、在其它視圖里修改，會修改該視圖 繼承于它的視圖中的內容【本例中400繼承300】

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

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

繼承關系的設置：

工作中的使用建議

日常工作中，幾乎極少使用自適應視圖。因為Axure功能非常強大，如果你是一個設計師或者要做一些精細的交互稿，它就可以滿足你。而作為產品經理，更重要的是將邏輯和需求講解明白，并且大部分都是明天要，所以是效率優先，自然不能帶多少交互。

工具的掌握都是多學多用，多做demo例子。產品經理還是要以思維邏輯為優先，如何能快速的將需求理清，并整理為案，通過原型快速的將需求傳達出來，才是重點。

當然熟練掌握Axure也是必備技能之一，待你工作效率已經超越別人2-5倍的時候，你就不會滿足靜態稿了。學無止境！

內容下載地址：

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

在線預覽： http://t9ymya.axshare.com/auto.html

作者：陳張良，微信號：chenzhangliang，6年的軟件質量管理及測試崗位，2015年10月轉型做產品，現就職于一家互聯網金融機構任職產品經理！

本文由 @陳張良 原創發布于人人都是產品經理，未經許可，禁止轉載。