自從幾年前響應(yīng)式技術(shù)開(kāi)始應(yīng)用時(shí),，創(chuàng)建響應(yīng)式原型就成為了很多人苦惱的事情。響應(yīng)式設(shè)計(jì)用一種非常優(yōu)雅的方式處理為多種設(shè)備類(lèi)型使用HTML和CSS編碼的應(yīng)用,，但是提供給UX專(zhuān)業(yè)人士的原型工具卻沒(méi)有具備同樣品質(zhì)的可以測(cè)試或者驗(yàn)證的功能,。不過(guò)隨著最新Axure RP 7中的適應(yīng)性視圖功能發(fā)布后，這個(gè)情況開(kāi)始改變了,。

Axure RP 7的適應(yīng)性視圖

Axure RP 7的適應(yīng)性視圖讓不借助編碼創(chuàng)建響應(yīng)式原型成為了可能,。你可以利用這個(gè)功能在Axure RP里創(chuàng)建一個(gè)多視圖的頁(yè)面，這個(gè)視圖能在給定屏幕尺寸的設(shè)備里顯示,。

這無(wú)疑是UX專(zhuān)業(yè)人士的福音,，將他們從HTML中解放了出來(lái),。當(dāng)你不得不在設(shè)計(jì)過(guò)程中思考技術(shù)問(wèn)題時(shí)，你很容易就會(huì)忽略設(shè)計(jì)思維,。在某些情況下,，常常是在大部分項(xiàng)目非常早期的時(shí)候，技術(shù)可行性和限制的考量是設(shè)計(jì)過(guò)程的必要部分,。但是在初期的原型階段,，可以自由的去考慮怎樣的界面、信息流和交互能最優(yōu)解決用戶(hù)的問(wèn)題,，也許對(duì)設(shè)計(jì)師更有幫助,，而這些練習(xí)甚至可以暴露你沒(méi)考慮到的技術(shù)限制問(wèn)題。

適應(yīng)性視圖如何運(yùn)作

適應(yīng)性視圖是基于在Axure里首先創(chuàng)建的“基礎(chǔ)視圖”,，由這個(gè)視圖可以拓展出其他視圖,，但不是必須的。在移動(dòng)優(yōu)先的設(shè)計(jì)中,，你的基礎(chǔ)視圖應(yīng)該是智能手機(jī)的豎屏界面,，從這點(diǎn)出發(fā)，你可以創(chuàng)建適應(yīng)更寬屏的視圖,，例如智能手機(jī)的橫屏,、平板和桌面。在使用適應(yīng)性視圖時(shí)我比較傾向用這個(gè)方式,。

你也可以采用桌面優(yōu)先的方式,，從寬屏開(kāi)始設(shè)計(jì)然后自上向下逐漸到手持設(shè)備。這樣的好處就是你知道最大屏的所有元素是否需要在逐漸變小的屏幕里是否需要移除或者重新設(shè)計(jì),。使用哪種方式取決于你的項(xiàng)目和已知或者期望投入的設(shè)備的使用模式,。

移動(dòng)優(yōu)先

我們以一個(gè)虛擬的自行車(chē)購(gòu)物網(wǎng)站作為范例，采用移動(dòng)優(yōu)先的方法來(lái)設(shè)計(jì),。我們會(huì)分別在手機(jī)和平板上設(shè)計(jì)橫屏和豎屏的首頁(yè)視圖,。

第一步先建立只有一個(gè)空白頁(yè)面的Axure文檔，命名為”Bike Shop“,。在手機(jī)視圖里,，我們以iPhone 5的屏幕為準(zhǔn)，其實(shí)還可以應(yīng)用到任何設(shè)備,，不管是哪種屏幕大小或操作系統(tǒng),。我還喜歡添加頁(yè)面輔助線(xiàn)來(lái)標(biāo)記頁(yè)面的邊界和添加內(nèi)邊距。屏幕的輔助線(xiàn)標(biāo)記在x軸320像素處和y軸568像素處,。

我們也在x軸10像素和310像素的地方添加輔助線(xiàn)來(lái)標(biāo)記邊距,，這樣頁(yè)面內(nèi)容就不會(huì)緊貼在屏幕的左右兩邊。對(duì)于iOS的Retina顯示屏,，在這篇文章中所使用的屏幕寬度會(huì)自動(dòng)縮放到更高的分辨率,。較小的尺寸只是讓我們Axure RP的文件體積更小而且在制作原型時(shí)更方便調(diào)整,。

創(chuàng)建一個(gè)單一的頁(yè)面，用頁(yè)面輔助線(xiàn)標(biāo)示出屏幕邊緣和頁(yè)面左右兩邊的邊距,。

現(xiàn)在我們準(zhǔn)備好設(shè)計(jì)基礎(chǔ)視圖的頁(yè)面了,。我們要做的第一件事就是創(chuàng)建一個(gè)簡(jiǎn)單的頭部，在彩色條上輸入自行車(chē)商店的名稱(chēng),。頭部創(chuàng)建后,，右鍵單擊，然后從菜單中選擇“轉(zhuǎn)換為母版”,。一旦你命名并保存該頭部,，就會(huì)添加到工作區(qū)左欄底部的母版面板中。在Axure RP中,，母版可以在一處進(jìn)行設(shè)計(jì)，然后復(fù)用到原型中的其他頁(yè)面里,。

使用“轉(zhuǎn)換為母版”對(duì)話(huà)框時(shí),，你可以對(duì)母版進(jìn)行命名，并設(shè)置母版在頁(yè)面上拖放時(shí)的行為,。

添加更多的界面元素到頁(yè)面后,，你已經(jīng)設(shè)計(jì)好手機(jī)豎屏的基本頁(yè)面。現(xiàn)在我們將利用這個(gè)功能創(chuàng)建不同的視圖,。

我們項(xiàng)目的基本視圖已經(jīng)完成了,。

創(chuàng)建一個(gè)新視圖

通過(guò)點(diǎn)擊Axure RP 頁(yè)面標(biāo)簽左側(cè)的按鈕，打開(kāi)“自適應(yīng)視圖”對(duì)話(huà)框來(lái)創(chuàng)建新視圖（下面截圖中用紅色邊框標(biāo)示）,。

點(diǎn)擊按鈕打開(kāi)自適應(yīng)視圖對(duì)話(huà)框,。

使用自適應(yīng)視圖非常簡(jiǎn)單：

新視圖的內(nèi)容和布局和基本視圖的一樣，但隨著設(shè)計(jì)的進(jìn)行會(huì)有所改變,。

繼承

繼承的概念是了解如何有效使用自適應(yīng)視圖的關(guān)鍵,。這里有一些需要知道的關(guān)鍵概念：

• 一個(gè)新視圖是母本的完整副本，這樣方便我們不用在多個(gè)視圖中重新創(chuàng)建相同的組件,。
• 如果我們要更改基本視圖主標(biāo)題的文本,，這個(gè)改動(dòng)會(huì)同時(shí)在任何直接或者間接的子屏幕中更新。
• 繼承只會(huì)從上一級(jí)視圖到下一級(jí),，而不能逆向,。因此，在子視圖中所做的更改不會(huì)傳遞回上一級(jí)視圖,。
• 自適應(yīng)視圖中的組件會(huì)繼承上級(jí)視圖中該組件的位置,、尺寸和樣式。如果我們?cè)谧右晥D里加大字號(hào),，不會(huì)影響到上級(jí)視圖,。但是，如果我們回到基本視圖進(jìn)行更改,，把主標(biāo)題的字號(hào)調(diào)小,，并不會(huì)影響到子視圖，因?yàn)樽右晥D的新文本已經(jīng)被之前的更改覆蓋了,。

在你為橫屏的設(shè)計(jì)進(jìn)行調(diào)整前,，要先設(shè)置新的頁(yè)面輔助線(xiàn)標(biāo)示屏幕邊緣。橫屏的輔助線(xiàn)在x軸的568像素處和y軸的320像素處,。

自適應(yīng)母版

我們將通過(guò)更新頭部母版來(lái)開(kāi)始手機(jī)橫屏的設(shè)計(jì),。在Axure RP 7里，母版和頁(yè)面一樣,，也是自適應(yīng)的,，會(huì)自動(dòng)繼承基礎(chǔ)視圖的頁(yè)面截點(diǎn),。

在下面的截圖中可以看到，我們?cè)黾恿艘粭l輔助線(xiàn),，并把頭部的長(zhǎng)度擴(kuò)展到568像素,。

不同視圖中的母版都繼承了基本頁(yè)面中的寬度。

現(xiàn)在我們可以更新手機(jī)橫屏視圖的設(shè)計(jì)了,。在下面的截圖中,，我們把在豎屏視圖中位于頁(yè)面底部的一組標(biāo)準(zhǔn)清單列表移到了頁(yè)面主圖的右側(cè)。促銷(xiāo)標(biāo)題字號(hào)更大了,，在它下面的文本也擴(kuò)展到與屏幕同寬,，更多的頁(yè)面內(nèi)容會(huì)出現(xiàn)在屏幕上（這取決于該頁(yè)面是否是全屏瀏覽，還是使用chrome瀏覽器,，或者iPhone的狀態(tài)欄是否有顯示）,。

該頁(yè)面已經(jīng)被重新設(shè)計(jì)過(guò)，以更好地利用手機(jī)橫向屏幕,。

平板視圖

現(xiàn)在手機(jī)上兩個(gè)方向的視圖已經(jīng)完成,，讓我們開(kāi)始設(shè)計(jì)平板視圖。我們會(huì)使用iPad的參數(shù),，但是重審一下，這個(gè)技術(shù)是適用任何屏幕尺寸和操作系統(tǒng)的,。創(chuàng)建平板視圖的方法和手機(jī)橫屏視圖的是一樣的,。

我們會(huì)從平板的豎屏開(kāi)始設(shè)計(jì)，因?yàn)槭窍乱患?jí)寬度的屏幕,。我們?cè)O(shè)置了當(dāng)屏幕超過(guò)569像素時(shí)出現(xiàn)這個(gè)視圖,，這使得手機(jī)橫屏的視圖寬度限制在321像素和568像素之間。正如你在下面截圖中可以看到的,，我們可以選擇讓平板視圖延續(xù)手機(jī)橫屏視圖,。根據(jù)繼承的機(jī)制，在基本視圖或者在手機(jī)橫屏視圖中的任何改動(dòng)都會(huì)同步到平板視圖中,。

創(chuàng)建一個(gè)平板豎屏視圖的設(shè)置對(duì)話(huà)框,。

而且，正如手機(jī)橫屏視圖一樣,，平板豎屏視圖也是完全復(fù)制了上級(jí)視圖的內(nèi)容,。在下面的截圖中，我在x軸768像素和y軸1024像素的地方添加了頁(yè)面輔助線(xiàn),，這是非Retina屏的iPad豎屏尺寸,。頁(yè)面標(biāo)簽上標(biāo)有“569”，表明這個(gè)視圖的尺寸截點(diǎn),。

平板豎屏視圖初始的內(nèi)容與上級(jí)視圖的完全一樣,。

在一個(gè)更大的區(qū)域里設(shè)計(jì),，我們可以完全改變圖層和添加新的內(nèi)容元素。

平板豎屏視圖可以放入更多的內(nèi)容,。

我們最后創(chuàng)建的是平板橫屏視圖,，由于這個(gè)視圖會(huì)在屏幕超過(guò)769像素時(shí)出現(xiàn)，所以在臺(tái)式機(jī)或者筆記本上也會(huì)顯示該視圖,，除非添加其他視圖,。我們會(huì)將這個(gè)視圖繼承平板豎屏的視圖，包括為這個(gè)設(shè)備添加的內(nèi)容,。

這個(gè)視圖會(huì)應(yīng)用在平板橫屏和臺(tái)式機(jī)上,，除非有新的的視圖添加進(jìn)來(lái)。

在最后的視圖里,，我們?cè)谄聊挥覀?cè)有更多的空間去進(jìn)行設(shè)計(jì),。

在平板橫屏視圖里，我們可以在豎屏的基礎(chǔ)上簡(jiǎn)單地添加元素或者完全重新思考設(shè)計(jì),，這個(gè)取決于項(xiàng)目的需求和現(xiàn)有的內(nèi)容,。

這個(gè)也完成后，該項(xiàng)目在手機(jī)和平板的橫豎屏狀態(tài)下都有不同的視圖,。如果你有一個(gè)iPhone或者iPad,，你可以打開(kāi)瀏覽器，導(dǎo)航到我們的范例原型（由AxShare創(chuàng)辦）,，并旋轉(zhuǎn)你的設(shè)備,，來(lái)查看為每個(gè)設(shè)備設(shè)計(jì)的不同視圖。

局限

自適應(yīng)視圖有一定的局限性,。首先,，通過(guò)Axure RP生成的代碼不能用于初始開(kāi)發(fā)，除非你使用生成的網(wǎng)站中的模板或框架來(lái)便攜HTML和CSS,。

由于這個(gè)限制,，自適應(yīng)視圖不能用于前端編碼方案的驗(yàn)證。但這不是Axure RP或者是UX原型設(shè)計(jì)過(guò)程的目的,，所以它沒(méi)有那么多的限制,，只是需要注意一下。

另外一個(gè)限制是會(huì)影響Axure RP共享項(xiàng)目的團(tuán)隊(duì)協(xié)作,。因?yàn)檫@個(gè)項(xiàng)目中的所有視圖都是基于一個(gè)頁(yè)面,，當(dāng)某人在一個(gè)共享項(xiàng)目中編輯一個(gè)頁(yè)面時(shí)，其他設(shè)計(jì)師就不能編輯任何的視圖,。這不同于Axure RP的早期版本,，移動(dòng)端和桌面的原型可以在單獨(dú)的頁(yè)面里創(chuàng)建，也就是說(shuō)，一個(gè)設(shè)計(jì)師可以設(shè)計(jì)桌面上的版本,，而另一個(gè)同時(shí)可以設(shè)計(jì)在智能手機(jī)上的版本,。這只是在不同的人員進(jìn)行手機(jī)和桌面的設(shè)計(jì)，而不是單獨(dú)一人執(zhí)行時(shí)會(huì)有所限制,。

總結(jié)

如果你正在構(gòu)建一個(gè)原型來(lái)演示或者測(cè)試將要在手機(jī)或平板上訪(fǎng)問(wèn)的網(wǎng)站的可用性,，你會(huì)希望這個(gè)原型是響應(yīng)式的。在過(guò)去為了產(chǎn)出這樣的原型,，我們不得不使用HTML和CSS來(lái)控制不同截點(diǎn)的展示,。

現(xiàn)在，Axure RP 7的自適應(yīng)視圖可以讓不編碼的設(shè)計(jì)師在原型制作和測(cè)試響應(yīng)式設(shè)計(jì)時(shí)更方便,。有了這個(gè)新功能,，一個(gè)用戶(hù)體驗(yàn)設(shè)計(jì)師可以在幾小時(shí)內(nèi)創(chuàng)建一個(gè)多設(shè)備的原型。為了在給多設(shè)備設(shè)計(jì)的環(huán)境中走得更遠(yuǎn),，Axure RP的自適應(yīng)視圖是你值得擁有的一個(gè)強(qiáng)力工具,。

—————————————————————–

原文作者：Will Hacker

原文地址：http://uxdesign./2014/02/26/creating-responsive-prototypes-adaptive-views-axure-rp-7/