創(chuàng)建一個(gè)單一的頁(yè)面,用頁(yè)面輔助線標(biāo)示出屏幕邊緣和頁(yè)面左右兩邊的邊距。
現(xiàn)在我們準(zhǔn)備好設(shè)計(jì)基礎(chǔ)視圖的頁(yè)面了。我們要做的第一件事就是創(chuàng)建一個(gè)簡(jiǎn)單的頭部,在彩色條上輸入自行車(chē)商店的名稱。頭部創(chuàng)建后,右鍵單擊,然后從菜單中選擇“轉(zhuǎn)換為母版”。一旦你命名并保存該頭部,就會(huì)添加到工作區(qū)左欄底部的母版面板中。在Axure RP中,母版可以在一處進(jìn)行設(shè)計(jì),然后復(fù)用到原型中的其他頁(yè)面里。
使用“轉(zhuǎn)換為母版”對(duì)話框時(shí),你可以對(duì)母版進(jìn)行命名,并設(shè)置母版在頁(yè)面上拖放時(shí)的行為。
添加更多的界面元素到頁(yè)面后,你已經(jīng)設(shè)計(jì)好手機(jī)豎屏的基本頁(yè)面?,F(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ì)話框來(lái)創(chuàng)建新視圖(下面截圖中用紅色邊框標(biāo)示)。
點(diǎn)擊按鈕打開(kāi)自適應(yīng)視圖對(duì)話框。
使用自適應(yīng)視圖非常簡(jiǎn)單:
1.單擊對(duì)話框左上角的綠色“+”圖標(biāo)(如下所示)來(lái)添加一個(gè)新視圖。
2.命名該視圖——在這個(gè)案例中是“Phone Landscape(手機(jī)橫屏)”。
3.從兩個(gè)選項(xiàng)中,選擇新視圖的顯示條件:“大于或等于”還是”小于或等于“一個(gè)固定的寬度。
4.最后,填入屏幕寬度的數(shù)值后就可以生成視圖了。
給第一個(gè)子視圖進(jìn)行設(shè)置。
完成后,命名為“Phone Landscape(手機(jī)橫屏)”的視圖會(huì)在屏幕大于或等于321像素時(shí)觸發(fā)顯示。因?yàn)槲覀兪且詉Phone 5作為我們移動(dòng)端設(shè)計(jì)的載體,所以這個(gè)視圖會(huì)在人們傾斜手機(jī)至橫向時(shí)出現(xiàn)。否則,顯示的則是基礎(chǔ)視圖(即使iPhone Retina屏幕的實(shí)際寬度是640像素,基礎(chǔ)視圖還是以縱向顯示)。我們新添的視圖也會(huì)在平板和桌面上顯示,除非我們?cè)黾恿颂囟ǖ囊晥D。
默認(rèn)情況下,任何新視圖都會(huì)繼承之前的內(nèi)容——在這個(gè)案例中,繼承的是基本視圖。當(dāng)我們?yōu)橐粋€(gè)頁(yè)面添加更多的視圖時(shí),我們可以繼承其他任意我們希望作為起始的視圖。
下面的屏幕截圖顯示了我們的兩個(gè)視圖,基本和321。Axure RP根據(jù)你在創(chuàng)建時(shí)所指定的寬度自動(dòng)設(shè)置視圖的名稱。321標(biāo)簽是藍(lán)色的,表示當(dāng)前編輯狀態(tài)。在右側(cè)的紫色輔助線在x軸321像素處,表示截點(diǎ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è)面輔助線標(biāo)示屏幕邊緣。橫屏的輔助線在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輔助線,并把頭部的長(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ì)話框。
而且,正如手機(jī)橫屏視圖一樣,平板豎屏視圖也是完全復(fù)制了上級(jí)視圖的內(nèi)容。在下面的截圖中,我在x軸768像素和y軸1024像素的地方添加了頁(yè)面輔助線,這是非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ī)或平板上訪問(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è)用戶體驗(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)力工具。
source:淘寶UED
收藏 已收藏 {{ postmeta.bookmark }}
點(diǎn)贊 已贊 {{ postmeta.postlike }}
我照著做了,但是放到手機(jī)瀏覽器上好像不能自適應(yīng)。
弱弱問(wèn)問(wèn),貌似按鈕組建好像不能自適應(yīng)
我靠,這么牛!