中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

Axure是產(chǎn)品經(jīng)理們最常使用的原型繪制工具之一，熟練掌握Axure會(huì)讓產(chǎn)品經(jīng)理在產(chǎn)品設(shè)計(jì)時(shí)事半功倍。筆者剛開(kāi)始學(xué)習(xí)Axure時(shí)，常通過(guò)高保真還原一些現(xiàn)有的網(wǎng)頁(yè)來(lái)提高自己的技能。下面將通過(guò)一個(gè)高保證還原一個(gè)真實(shí)實(shí)例來(lái)介紹Auxre的使用方法 ，涉及頁(yè)面布局、頁(yè)面交互等常用技巧。如果你剛剛接觸Axure，熟練掌握本文的案例和方法，你的Axure使用技能突飛猛進(jìn)。

案例任務(wù)：

使用Axure 7.0高保真還原www.ohsame.com 首頁(yè)(以下簡(jiǎn)稱same官網(wǎng)) 的布局和交互。

在開(kāi)始做之前，我們首先觀察一下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ì)齊來(lái)達(dá)到這一效果：

布局二

網(wǎng)頁(yè)中較常見(jiàn)的只會(huì)使用一種背景顏色，直接在“頁(yè)面樣式”的背景色中設(shè)置相應(yīng)顏色即可。尚若要設(shè)置多種背景顏色布局，而且在不同的設(shè)備和瀏覽器上都呈現(xiàn)相同效果，就需要采用科學(xué)而不是乖戾的做法。我的方案是：使用上中下三色背景圖片來(lái)布局。我測(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è)出來(lái)，然后逐一改掉字體和背景圖片。但是，今天我想說(shuō)的是一種更技巧性的做法：使用中繼器來(lái)布局。

Axure7.0默認(rèn)元件庫(kù)新增了“中繼器(repeater)”這種強(qiáng)大的元件。使用中繼器可以輕松的布局出相同樣式但內(nèi)容不用的頁(yè)面。每一個(gè)中繼器都是由三塊基本元素組成：展示元件組、數(shù)據(jù)集、項(xiàng)目交互邏輯。展示原件組規(guī)定了展示出來(lái)元件的基本布局和樣式；數(shù)據(jù)集規(guī)定了展示的內(nèi)容；項(xiàng)目交互邏輯則將二者聯(lián)系起來(lái)，決定那一條數(shù)據(jù)顯示在哪一個(gè)元件上。理解了中繼器的邏輯，使用起來(lái)就會(huì)很方便了。

3.1 布局中繼器展示元件組

首先從元件庫(kù)中拖出一個(gè)中繼器元件出來(lái)，如圖左側(cè)的“原始狀態(tài)”。雙擊原始狀態(tài)的中繼器進(jìn)入中繼器編輯界面，當(dāng)然原始的這三個(gè)矩形并不是我們想要的元件，于是我毫不留情的刪掉了他們。然后在頁(yè)面上拖入了一個(gè)圖片元件和一個(gè)段落元件，并分別在右側(cè)編輯欄給元件命名。命名可以幫助我們?cè)谔砑佑美龝r(shí)快速找到需要操作的元件，合適的元件名能讓工作有更高效率。經(jīng)過(guò)調(diào)整圖片的大小和段落的樣式，完成狀態(tài)的中繼器展示原件組如圖右側(cè)所示。

3.2 設(shè)置數(shù)據(jù)集

打開(kāi)頁(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 接下來(lái)，需要編輯“中繼器項(xiàng)目交互”，將數(shù)據(jù)集與展示原件組聯(lián)系起來(lái)

就像之前描述過(guò)的一樣，這一塊主要說(shuō)明了哪一數(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è)，布局就很完美了。

處理完布局之后，我們來(lái)觀察一下頁(yè)面交互，還是像上面一樣進(jìn)行任務(wù)分解。

任務(wù)組二——交互設(shè)計(jì)

分解之后，得到如下任務(wù)組：

• 將鼠標(biāo)移入“立刻下載”按鈕，按鈕背景色變深；
• 點(diǎn)擊“立刻下載”按鈕，“下載”對(duì)話框從頁(yè)面顯現(xiàn)出來(lái)并移動(dòng)到頁(yè)面中央，同時(shí)“下載”對(duì)話框之外形成遮幕效果；
• 點(diǎn)擊“下載”對(duì)話框之外的區(qū)域，對(duì)話框向下移動(dòng)然后消失。點(diǎn)擊“下載”對(duì)話框的背景，無(wú)任何效果；
• 將鼠標(biāo)移入“iPhone 下載”和“Android 下載”按鈕，按鈕背景色變深，點(diǎn)擊按鈕在當(dāng)前頁(yè)打開(kāi)下載鏈接。

經(jīng)過(guò)任務(wù)分解之后，我們發(fā)現(xiàn)，這些看似復(fù)雜的交互，其實(shí)是由一塊塊小的交互步驟組成的。經(jīng)過(guò)一些分解然后組合在一起，就可以實(shí)現(xiàn)頁(yè)面的效果。

交互一

鼠標(biāo)移入特定區(qū)域并給出反饋，這是一種很常見(jiàn)的交互效果。給按鈕添加兩個(gè)用例，分別在鼠標(biāo)移入和移出時(shí)觸發(fā)不同的交互用例即可。移入時(shí)還需要判斷“下載”對(duì)話框是否顯示，只有在“下載”對(duì)話框不顯示時(shí)才需要觸發(fā)此用例。

交互二

這是一個(gè)較復(fù)雜連續(xù)的交互動(dòng)作，分成4部分組成：

首先需要將下載窗口歸位，以防止上一次操作中沒(méi)有還原下載窗口，導(dǎo)致第二次操作時(shí)顯示效果不一致。

第二步，將下載窗口顯示出來(lái)；

第三步，將下載窗口上移到頁(yè)面中間位置；這一步與第二步之間的動(dòng)作時(shí)間需要仔細(xì)調(diào)節(jié)，以免兩步之間不連貫。

第四步，顯示遮罩效果。

交互三

這一步與上一步效果相反，不過(guò)觸發(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)然，除了這些顯而易見(jiàn)的交互效果。我們還容易發(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ì)完成了。通過(guò)對(duì)線上存在交互實(shí)例進(jìn)行高保真還原是用來(lái)鍛煉原型工具使用技巧的絕好方法，同樣也可以加深我們對(duì)交互動(dòng)作在代碼實(shí)現(xiàn)邏輯的理解，知道前端設(shè)計(jì)師的不易。

本文所用到的素材及Axure成品

作者：馬成宇（微信號(hào)happymcy），有米科技產(chǎn)品經(jīng)理，曾多次在有米內(nèi)部進(jìn)行Axure培訓(xùn)。

本文由 @馬成宇 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。