Axure 7高保真還原Web首頁(yè)布局和交互教程

wust_mcy
20 評(píng)論 51076 瀏覽 728 收藏 11 分鐘
🔗 产品经理的职业发展路径主要有四个方向:专业线、管理线、项目线和自主创业。管理线是指转向管理岗位,带一个团队..

Axure是產(chǎn)品經(jīng)理們最常使用的原型繪制工具之一,熟練掌握Axure會(huì)讓產(chǎn)品經(jīng)理在產(chǎn)品設(shè)計(jì)時(shí)事半功倍。筆者剛開始學(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)) 的布局和交互。

在開始做之前,我們首先觀察一下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á)到這一效果:

Image1-1

布局二

網(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)入這張背景圖。

Image1-2

布局三

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è)所示。

Image1-3

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ù)集如下。

Image1-4

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ù)等于圖片。

Image1-5

(用例編輯界面)

Image1-6

完成這些之后,回到主頁(yè),我們發(fā)現(xiàn)6個(gè)布局塊縱向排列,這并不符合原圖的布局。這就需要再次設(shè)置一下“中繼器格式”。橫向排列,每行3個(gè);然后設(shè)置一下行間距和列間距。

Image1-7

再次回到主頁(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è)打開下載鏈接。

經(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ā)此用例。

Image2-1

交互二

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

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

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

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

第四步,顯示遮罩效果。

Image2-2

交互三

這一步與上一步效果相反,不過(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)。

Image2-3

當(dāng)然,除了這些顯而易見(jiàn)的交互效果。我們還容易發(fā)現(xiàn):

當(dāng)頁(yè)面滾動(dòng)時(shí),下載窗口不動(dòng)??梢园选跋螺d窗口”轉(zhuǎn)變成動(dòng)態(tài)面板,并在右鍵菜單中設(shè)置為“固定到瀏覽器”。

Image2-4

交互四

這一交互與第一個(gè)交互相同,下面列出用例:

Image2-5

總結(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)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 您好,請(qǐng)教下您的原型里,主頁(yè)上方以及下載窗口下方的藍(lán)色區(qū)域是怎么出來(lái)的?既不是圖片也不是矩形等形狀,甚至都沒(méi)法選中,我試了好久都沒(méi)搞明白

    來(lái)自山東 回復(fù)
    1. 主頁(yè)上面的藍(lán)色條在布局2中有說(shuō)明,是用一個(gè)2px寬的三色png圖片做背景圖平鋪來(lái)的。至于你提到的下載窗口下方的藍(lán)色區(qū)域,沒(méi)明白是指什么,可以加上方我的微信私聊我

      來(lái)自廣東 回復(fù)
  2. :mrgreen: 哈哈,親是來(lái)打廣告的么

    來(lái)自廣東 回復(fù)
  3. 你的高保真 比人家原網(wǎng)頁(yè)好看 ?? ?? ??

    來(lái)自江蘇 回復(fù)
    1. 謝謝夸獎(jiǎng)

      來(lái)自廣東 回復(fù)
  4. 好贊!新手學(xué)習(xí)中!中繼器確實(shí)很好用,尤其對(duì)于PC

    來(lái)自浙江 回復(fù)
    1. 的確,中繼器是7.0的新增元件,除了上面介紹的這些還有更強(qiáng)大的功能,可以繼續(xù)學(xué)習(xí)的

      來(lái)自廣東 回復(fù)
  5. ?? 有沒(méi)有視頻教程

    來(lái)自廣東 回復(fù)
    1. 還沒(méi)有呢,有了就回復(fù)你

      來(lái)自廣東 回復(fù)
  6. 您好,我也試著照著你的來(lái)做,但是有一個(gè)地方,不知道為什么不一樣。點(diǎn)擊立即下載彈出的窗口不是在可視化區(qū)域的中間位置,而且點(diǎn)多幾次后窗口不見(jiàn)了,但遮罩效果還在,請(qǐng)問(wèn)是什么原因呢?參數(shù)都是一樣的了。LVAR1表示的是什么?

    來(lái)自廣東 回復(fù)
    1. 遮罩還在表明“下載窗口”處于顯示狀態(tài),但沒(méi)有顯示在屏幕范圍內(nèi)。LVAR1這里代指“下載窗口”動(dòng)態(tài)面板。出現(xiàn)這種情況表明,你沒(méi)有設(shè)置對(duì)LVAR1。

      交互二中用例1 的第三句話代碼部分其實(shí)是在計(jì)算下載窗口移動(dòng)到屏幕正中間時(shí)右上頂點(diǎn)的坐標(biāo)位置。即橫坐標(biāo)不變,縱坐標(biāo)為“窗口中間往上二分之一個(gè)下載窗口高度”。

      你可以下載本文總結(jié)部分提供的樣例看看。 http://pan.baidu.com/s/1kTVMuxD

      來(lái)自廣東 回復(fù)
    2. 我已經(jīng)是照著樣例做的,就是基本都是一樣的,參數(shù)什么都是一樣的。我試著直接在樣例里面刪掉你之前做的案例,然后我自己再寫上去就出現(xiàn)了和我自己做的一樣的問(wèn)題。我明明設(shè)的參數(shù)是完全一模一樣的了,一個(gè)一個(gè)字照著打都出現(xiàn)問(wèn)題的。求幫助 ?? 我剛剛開始學(xué),基本都不是很懂。

      來(lái)自廣東 回復(fù)
    3. 哈哈,那你加我微信(微信上面有)吧,我們明天晚上聊。

      p.s. 人經(jīng)社區(qū)評(píng)論需要支持截圖才行呀

      來(lái)自廣東 回復(fù)
    4. 已經(jīng)加你微信了,記得通過(guò)喔

      來(lái)自廣東 回復(fù)
  7. ? ? ?

    來(lái)自安徽 回復(fù)
    1. ?? david大神

      來(lái)自廣東 回復(fù)
  8. 頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂

    來(lái)自上海 回復(fù)
    1. 哈哈,歡迎

      來(lái)自廣東 回復(fù)
  9. 很用心的作品,good

    來(lái)自廣東 回復(fù)
    1. ?? 謝謝

      來(lái)自廣東 回復(fù)
专题
18609人已学习15篇文章
评论区应该如何设计?本专题的文章提供了评论区设计思路。
专题
90018人已学习13篇文章
不论你是产品经理还是运营,都要具备数据分析基本能力。
专题
68741人已学习25篇文章
作为产品经理的你,需要了解哪些内容,用正确的姿势去拥抱互联网金融市场的变化?
专题
14550人已学习13篇文章
营销自动化是一个可用于自动执行营销任务的工具。本专题的文章分享了如何搭建自动化营销平台。
专题
16694人已学习16篇文章
随着数字化转型的发展,企业逐渐向数字化迈进,帮助企业有效解决经营性问题。本专题的文章分享了如何做企业数字化转型。
专题
13423人已学习13篇文章
如果做小红书运营?本专题的文章分享了小红书流量密码。