創建一個單一的頁面，用頁面輔助線標示出屏幕邊緣和頁面左右兩邊的邊距。
現在我們準備好設計基礎視圖的頁面了。我們要做的第一件事就是創建一個簡單的頭部，在彩色條上輸入自行車商店的名稱。頭部創建后，右鍵單擊，然后從菜單中選擇“轉換為母版”。一旦你命名并保存該頭部，就會添加到工作區左欄底部的母版面板中。在Axure RP中，母版可以在一處進行設計，然后復用到原型中的其他頁面里。
使用“轉換為母版”對話框時，你可以對母版進行命名，并設置母版在頁面上拖放時的行為。
添加更多的界面元素到頁面后，你已經設計好手機豎屏的基本頁面。現在我們將利用這個功能創建不同的視圖。
我們項目的基本視圖已經完成了。
創建一個新視圖
通過點擊Axure RP 頁面標簽左側的按鈕，打開“自適應視圖”對話框來創建新視圖（下面截圖中用紅色邊框標示）。
點擊按鈕打開自適應視圖對話框。
使用自適應視圖非常簡單：
1.單擊對話框左上角的綠色“＋”圖標（如下所示）來添加一個新視圖。
2.命名該視圖——在這個案例中是“Phone Landscape（手機橫屏）”。
3.從兩個選項中，選擇新視圖的顯示條件：“大于或等于”還是”小于或等于“一個固定的寬度。
4.最后，填入屏幕寬度的數值后就可以生成視圖了。
給第一個子視圖進行設置。
完成后，命名為“Phone Landscape（手機橫屏）”的視圖會在屏幕大于或等于321像素時觸發顯示。因為我們是以iPhone 5作為我們移動端設計的載體，所以這個視圖會在人們傾斜手機至橫向時出現。否則，顯示的則是基礎視圖（即使iPhone Retina屏幕的實際寬度是640像素，基礎視圖還是以縱向顯示）。我們新添的視圖也會在平板和桌面上顯示，除非我們增加了特定的視圖。
默認情況下，任何新視圖都會繼承之前的內容——在這個案例中，繼承的是基本視圖。當我們為一個頁面添加更多的視圖時，我們可以繼承其他任意我們希望作為起始的視圖。
下面的屏幕截圖顯示了我們的兩個視圖，基本和321。Axure RP根據你在創建時所指定的寬度自動設置視圖的名稱。321標簽是藍色的，表示當前編輯狀態。在右側的紫色輔助線在x軸321像素處，表示截點。
新視圖的內容和布局和基本視圖的一樣，但隨著設計的進行會有所改變。
繼承
繼承的概念是了解如何有效使用自適應視圖的關鍵。這里有一些需要知道的關鍵概念：
- 一個新視圖是母本的完整副本，這樣方便我們不用在多個視圖中重新創建相同的組件。
- 如果我們要更改基本視圖主標題的文本，這個改動會同時在任何直接或者間接的子屏幕中更新。
- 繼承只會從上一級視圖到下一級，而不能逆向。因此，在子視圖中所做的更改不會傳遞回上一級視圖。
- 自適應視圖中的組件會繼承上級視圖中該組件的位置、尺寸和樣式。如果我們在子視圖里加大字號，不會影響到上級視圖。但是，如果我們回到基本視圖進行更改，把主標題的字號調小，并不會影響到子視圖，因為子視圖的新文本已經被之前的更改覆蓋了。
在你為橫屏的設計進行調整前，要先設置新的頁面輔助線標示屏幕邊緣。橫屏的輔助線在x軸的568像素處和y軸的320像素處。
自適應母版
我們將通過更新頭部母版來開始手機橫屏的設計。在Axure RP 7里，母版和頁面一樣，也是自適應的，會自動繼承基礎視圖的頁面截點。
在下面的截圖中可以看到，我們增加了一條輔助線，并把頭部的長度擴展到568像素。
不同視圖中的母版都繼承了基本頁面中的寬度。
現在我們可以更新手機橫屏視圖的設計了。在下面的截圖中，我們把在豎屏視圖中位于頁面底部的一組標準清單列表移到了頁面主圖的右側。促銷標題字號更大了，在它下面的文本也擴展到與屏幕同寬，更多的頁面內容會出現在屏幕上（這取決于該頁面是否是全屏瀏覽，還是使用chrome瀏覽器，或者iPhone的狀態欄是否有顯示）。
該頁面已經被重新設計過，以更好地利用手機橫向屏幕。
平板視圖
現在手機上兩個方向的視圖已經完成，讓我們開始設計平板視圖。我們會使用iPad的參數，但是重審一下，這個技術是適用任何屏幕尺寸和操作系統的。創建平板視圖的方法和手機橫屏視圖的是一樣的。
我們會從平板的豎屏開始設計，因為是下一級寬度的屏幕。我們設置了當屏幕超過569像素時出現這個視圖，這使得手機橫屏的視圖寬度限制在321像素和568像素之間。正如你在下面截圖中可以看到的，我們可以選擇讓平板視圖延續手機橫屏視圖。根據繼承的機制，在基本視圖或者在手機橫屏視圖中的任何改動都會同步到平板視圖中。
創建一個平板豎屏視圖的設置對話框。
而且，正如手機橫屏視圖一樣，平板豎屏視圖也是完全復制了上級視圖的內容。在下面的截圖中，我在x軸768像素和y軸1024像素的地方添加了頁面輔助線，這是非Retina屏的iPad豎屏尺寸。頁面標簽上標有“569”，表明這個視圖的尺寸截點。
平板豎屏視圖初始的內容與上級視圖的完全一樣。
在一個更大的區域里設計，我們可以完全改變圖層和添加新的內容元素。
平板豎屏視圖可以放入更多的內容。
我們最后創建的是平板橫屏視圖，由于這個視圖會在屏幕超過769像素時出現，所以在臺式機或者筆記本上也會顯示該視圖，除非添加其他視圖。我們會將這個視圖繼承平板豎屏的視圖，包括為這個設備添加的內容。
這個視圖會應用在平板橫屏和臺式機上，除非有新的的視圖添加進來。
在最后的視圖里，我們在屏幕右側有更多的空間去進行設計。
在平板橫屏視圖里，我們可以在豎屏的基礎上簡單地添加元素或者完全重新思考設計，這個取決于項目的需求和現有的內容。
這個也完成后，該項目在手機和平板的橫豎屏狀態下都有不同的視圖。如果你有一個iPhone或者iPad，你可以打開瀏覽器，導航到我們的范例原型（由AxShare創辦），并旋轉你的設備，來查看為每個設備設計的不同視圖。
局限
自適應視圖有一定的局限性。首先，通過Axure RP生成的代碼不能用于初始開發，除非你使用生成的網站中的模板或框架來便攜HTML和CSS。
由于這個限制，自適應視圖不能用于前端編碼方案的驗證。但這不是Axure RP或者是UX原型設計過程的目的，所以它沒有那么多的限制，只是需要注意一下。
另外一個限制是會影響Axure RP共享項目的團隊協作。因為這個項目中的所有視圖都是基于一個頁面，當某人在一個共享項目中編輯一個頁面時，其他設計師就不能編輯任何的視圖。這不同于Axure RP的早期版本，移動端和桌面的原型可以在單獨的頁面里創建，也就是說，一個設計師可以設計桌面上的版本，而另一個同時可以設計在智能手機上的版本。這只是在不同的人員進行手機和桌面的設計，而不是單獨一人執行時會有所限制。
總結
如果你正在構建一個原型來演示或者測試將要在手機或平板上訪問的網站的可用性，你會希望這個原型是響應式的。在過去為了產出這樣的原型，我們不得不使用HTML和CSS來控制不同截點的展示。
現在，Axure RP 7的自適應視圖可以讓不編碼的設計師在原型制作和測試響應式設計時更方便。有了這個新功能，一個用戶體驗設計師可以在幾小時內創建一個多設備的原型。為了在給多設備設計的環境中走得更遠，Axure RP的自適應視圖是你值得擁有的一個強力工具。
source:淘寶UED
起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識
我照著做了，但是放到手機瀏覽器上好像不能自適應。
弱弱問問，貌似按鈕組建好像不能自適應
我靠，這么牛！