Axure是產(chǎn)品經(jīng)理們最常使用的原型繪制工具之一，熟練掌握Axure會(huì)讓產(chǎn)品經(jīng)理在產(chǎn)品設(shè)計(jì)時(shí)事半功倍。筆者剛開始學(xué)習(xí)Axure時(shí)，常通過高保真還原一些現(xiàn)有的網(wǎng)頁(yè)來提高自己的技能。下面將通過一個(gè)高保證還原一個(gè)真實(shí)實(shí)例來介紹Auxre的使用方法 ，涉及頁(yè)面布局、頁(yè)面交互等常用技巧。如果你剛剛接觸Axure，熟練掌握本文的案例和方法，你的Axure使用技能突飛猛進(jìn)。
案例任務(wù)：
使用Axure 7.0高保真還原www.ohsame.com 首頁(yè)(以下簡(jiǎn)稱same官網(wǎng)) 的布局和交互。
在開始做之前，我們首先觀察一下same官網(wǎng)，將需要做的任務(wù)分解成為一個(gè)個(gè)小任務(wù)，然后逐一擊破。
任務(wù)組一：頁(yè)面布局
我們首先看看可以將頁(yè)面布局分解成哪些任務(wù)：
- 頁(yè)面內(nèi)容居中
- 背景由上中下三個(gè)色塊組成
- 產(chǎn)品介紹部分的6個(gè)部分布局一致但內(nèi)容不同
布局一
頁(yè)面居中是網(wǎng)頁(yè)布局的一般要求，在Axure中可以通設(shè)置“頁(yè)面樣式”居中對(duì)齊來達(dá)到這一效果：
布局二
網(wǎng)頁(yè)中較常見的只會(huì)使用一種背景顏色，直接在“頁(yè)面樣式”的背景色中設(shè)置相應(yīng)顏色即可。尚若要設(shè)置多種背景顏色布局，而且在不同的設(shè)備和瀏覽器上都呈現(xiàn)相同效果，就需要采用科學(xué)而不是乖戾的做法。我的方案是：使用上中下三色背景圖片來布局。我測(cè)量了一下三個(gè)背景色塊的高度，并使用ps制作了一張寬2px高1410px（藍(lán)色 458px: 白色 916px: 藍(lán)色 36px）的三色png圖片。然后在“頁(yè)面樣式”的背景圖中導(dǎo)入這張背景圖。
布局三
6塊部分內(nèi)容一致但布局不同，既不能使用動(dòng)態(tài)面板也不能使用母版去處理。最不講技巧性地做法當(dāng)然是使用“復(fù)制-粘貼”方式復(fù)制六個(gè)出來，然后逐一改掉字體和背景圖片。但是，今天我想說的是一種更技巧性的做法：使用中繼器來布局。
Axure7.0默認(rèn)元件庫(kù)新增了“中繼器(repeater)”這種強(qiáng)大的元件。使用中繼器可以輕松的布局出相同樣式但內(nèi)容不用的頁(yè)面。每一個(gè)中繼器都是由三塊基本元素組成：展示元件組、數(shù)據(jù)集、項(xiàng)目交互邏輯。展示原件組規(guī)定了展示出來元件的基本布局和樣式；數(shù)據(jù)集規(guī)定了展示的內(nèi)容；項(xiàng)目交互邏輯則將二者聯(lián)系起來，決定那一條數(shù)據(jù)顯示在哪一個(gè)元件上。理解了中繼器的邏輯，使用起來就會(huì)很方便了。
3.1 布局中繼器展示元件組
首先從元件庫(kù)中拖出一個(gè)中繼器元件出來，如圖左側(cè)的“原始狀態(tài)”。雙擊原始狀態(tài)的中繼器進(jìn)入中繼器編輯界面，當(dāng)然原始的這三個(gè)矩形并不是我們想要的元件，于是我毫不留情的刪掉了他們。然后在頁(yè)面上拖入了一個(gè)圖片元件和一個(gè)段落元件，并分別在右側(cè)編輯欄給元件命名。命名可以幫助我們?cè)谔砑佑美龝r(shí)快速找到需要操作的元件，合適的元件名能讓工作有更高效率。經(jīng)過調(diào)整圖片的大小和段落的樣式，完成狀態(tài)的中繼器展示原件組如圖右側(cè)所示。
3.2 設(shè)置數(shù)據(jù)集
打開頁(yè)面下方的編輯欄，選擇最左邊的“中繼器數(shù)據(jù)集”。數(shù)據(jù)集的每一行記錄對(duì)應(yīng)的一條相關(guān)的數(shù)據(jù)。我們需要布局6個(gè)產(chǎn)品介紹內(nèi)容，就需要添加6條數(shù)據(jù)記錄。將鼠標(biāo)放在數(shù)據(jù)集上，單擊鼠標(biāo)右鍵可以導(dǎo)入圖片。創(chuàng)建完之后數(shù)據(jù)集如下。
3.3 接下來，需要編輯“中繼器項(xiàng)目交互”，將數(shù)據(jù)集與展示原件組聯(lián)系起來
就像之前描述過的一樣，這一塊主要說明了哪一數(shù)據(jù)集應(yīng)該被賦值給哪一個(gè)元件。雙擊“用例”可以進(jìn)入用例編輯頁(yè)面，使數(shù)據(jù)集的第一列數(shù)據(jù)等于文本，第二列數(shù)據(jù)等于圖片。
（用例編輯界面）
完成這些之后，回到主頁(yè)，我們發(fā)現(xiàn)6個(gè)布局塊縱向排列，這并不符合原圖的布局。這就需要再次設(shè)置一下“中繼器格式”。橫向排列，每行3個(gè)；然后設(shè)置一下行間距和列間距。
再次回到主頁(yè)，布局就很完美了。
處理完布局之后，我們來觀察一下頁(yè)面交互，還是像上面一樣進(jìn)行任務(wù)分解。
任務(wù)組二——交互設(shè)計(jì)
分解之后，得到如下任務(wù)組：
- 將鼠標(biāo)移入“立刻下載”按鈕，按鈕背景色變深；
- 點(diǎn)擊“立刻下載”按鈕，“下載”對(duì)話框從頁(yè)面顯現(xiàn)出來并移動(dòng)到頁(yè)面中央，同時(shí)“下載”對(duì)話框之外形成遮幕效果；
- 點(diǎn)擊“下載”對(duì)話框之外的區(qū)域，對(duì)話框向下移動(dòng)然后消失。點(diǎn)擊“下載”對(duì)話框的背景，無任何效果；
- 將鼠標(biāo)移入“iPhone 下載”和“Android 下載”按鈕，按鈕背景色變深，點(diǎn)擊按鈕在當(dāng)前頁(yè)打開下載鏈接。
經(jīng)過任務(wù)分解之后，我們發(fā)現(xiàn)，這些看似復(fù)雜的交互，其實(shí)是由一塊塊小的交互步驟組成的。經(jīng)過一些分解然后組合在一起，就可以實(shí)現(xiàn)頁(yè)面的效果。
交互一
鼠標(biāo)移入特定區(qū)域并給出反饋，這是一種很常見的交互效果。給按鈕添加兩個(gè)用例，分別在鼠標(biāo)移入和移出時(shí)觸發(fā)不同的交互用例即可。移入時(shí)還需要判斷“下載”對(duì)話框是否顯示，只有在“下載”對(duì)話框不顯示時(shí)才需要觸發(fā)此用例。
交互二
這是一個(gè)較復(fù)雜連續(xù)的交互動(dòng)作，分成4部分組成：
首先需要將下載窗口歸位，以防止上一次操作中沒有還原下載窗口，導(dǎo)致第二次操作時(shí)顯示效果不一致。
第二步，將下載窗口顯示出來；
第三步，將下載窗口上移到頁(yè)面中間位置；這一步與第二步之間的動(dòng)作時(shí)間需要仔細(xì)調(diào)節(jié)，以免兩步之間不連貫。
第四步，顯示遮罩效果。
交互三
這一步與上一步效果相反，不過觸發(fā)的區(qū)域是“下載”對(duì)話框之外的頁(yè)面，而不是“下載”按鈕？梢栽诘撞烤庉嫏谔砑右粋(gè)“頁(yè)面單擊鼠標(biāo)時(shí)”觸發(fā)的用例：
首先，判斷“下載窗口”是否顯示并且鼠標(biāo)點(diǎn)擊的是下載窗口之外的區(qū)域；
第二步，將“下載窗口”下移；
第三步，向下滑動(dòng)“下載窗口”并隱藏。第二步和第三步同樣需要調(diào)節(jié)好動(dòng)作時(shí)間，使動(dòng)作連貫協(xié)調(diào)。
當(dāng)然，除了這些顯而易見的交互效果。我們還容易發(fā)現(xiàn)：
當(dāng)頁(yè)面滾動(dòng)時(shí)，下載窗口不動(dòng)？梢园选跋螺d窗口”轉(zhuǎn)變成動(dòng)態(tài)面板，并在右鍵菜單中設(shè)置為“固定到瀏覽器”。
交互四
這一交互與第一個(gè)交互相同，下面列出用例：
總結(jié)
到此，整個(gè)頁(yè)面就設(shè)計(jì)完成了。通過對(duì)線上存在交互實(shí)例進(jìn)行高保真還原是用來鍛煉原型工具使用技巧的絕好方法，同樣也可以加深我們對(duì)交互動(dòng)作在代碼實(shí)現(xiàn)邏輯的理解，知道前端設(shè)計(jì)師的不易。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。