AxureRP9網(wǎng)站與App原型設(shè)計教學(xué)教案—10支付寶App低保真原型設(shè)計

1、第10章支付寶App低保真原型設(shè)計課時內(nèi)容支付寶App低保真原型設(shè)計課時6教學(xué)目標通過支付寶App低保真原型設(shè)計，學(xué)習(xí)元件、母版的使用及海報輪播效果、上下滑動效果的制作教學(xué)重點元件的使用、母版的使用、海報輪播效果、上下滑動效果教學(xué)難點元件的使用、母版的使用、海報輪播效果、上下滑動效果教學(xué)設(shè)計1 .教學(xué)思路：通過一個綜合案例學(xué)習(xí)低保真原型設(shè)計方法。2 .教學(xué)手段：多媒體+計算機3 .教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容10.1 需求描述利用AxureRP9原型工具繪制支付寶App低保真原型，主要設(shè)計幾個方面。(1) 利用Axure的母版功能繪制支付寶App的底部標簽導(dǎo)航。(2) 繪制“支付寶”界面

2、的九宮格導(dǎo)航布局。(3) 制作“支付寶”界面的海報輪播效果。(4) 繪制“余額寶”界面的布局。(5) 制作“余額寶”界面內(nèi)容上下滑動效果。(6) 實現(xiàn)“支付寶”界面與“余額寶”界面切換顯示效果。10.2 設(shè)計思路如何進行支付寶App需的低保真原型制作呢？(1) 在進行頁面布局，需要用到文本標簽兀件、矩形1兀件、占位符兀件、橫線兀件、圖片兀件、動態(tài)面板兀件等兀件。(2) 在設(shè)計底部標簽導(dǎo)航欄時，需要把底部標簽導(dǎo)航欄設(shè)計成母版，這樣設(shè)一次，在頁面里可以直接使用，避免重復(fù)制作和重復(fù)添加交互效果。(3) 海報輪播效果的制作需要進行動態(tài)面板的狀態(tài)自動切換效果設(shè)置，設(shè)置狀態(tài)自動切換就可以實現(xiàn)海報輪播效果。

3、(4) 界囿內(nèi)容的上卜滑動效果和左右滑動效果，需要使用兩個動態(tài)向板兀件，一個是用來外層控制顯示區(qū)域，另一個是用來添加拖動效果，以實現(xiàn)界面內(nèi)容上下滑動效果或者左右滑動效果。10.3 準備工作進行低保真原型設(shè)計，不要使用截圖或者使用過多的彩色，最好使用黑白灰3種顏色。交互設(shè)計師或者產(chǎn)品經(jīng)理在制作完低保真原型后，將原型交給視覺設(shè)計師(UI設(shè)計師或者美工)來進行界面的設(shè)計。視覺設(shè)計師會制作界面圖片，并且切圖，原型里采用什么圖片和色調(diào)應(yīng)該交給視覺設(shè)計師或者UI設(shè)計師來決定。10.4 設(shè)計流程10.4.1 底部標簽導(dǎo)航母版設(shè)計App一般會設(shè)計35個標簽導(dǎo)航菜單，標絕大部分移動App軟件喜歡采用底部標簽導(dǎo)航

4、方式，簽導(dǎo)航菜單將軟件模塊劃分地很清晰，每個菜單承載自己的內(nèi)容，用戶看到菜單名稱，大致可以知道該界面所要表達的內(nèi)容。支付寶App采用標簽導(dǎo)航這種導(dǎo)航方式，分為4個標簽：支付寶、口碑、朋友、我的，這4個標簽在很多頁面都會使用到，把它制作成母版，可以實現(xiàn)一次制作，多次復(fù)用的效果。（1）在母版區(qū)域里新建一個母版“標簽導(dǎo)航”，打開該母版；拖曳一個“矩形1”元件到工作區(qū)域作為手機屏幕背景，將其寬度設(shè)置為320,高度設(shè)置為480,坐標位置設(shè)置為（0,0）,顏色填充為灰色（#F2F2F2）,去除邊框線。手機屏幕背景（2）拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為50,坐標位置設(shè)置為（

5、0,430）,邊框顏色設(shè)置為灰色（#E4E4E4）,作為底部標簽導(dǎo)航背景；拖曳4個“圖片”元件到工作區(qū)域，將其寬度和高度設(shè)置為25。標簽導(dǎo)航圖標(3)拖曳4個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容分別命名為“支付寶”“口碑”“朋友”“我的”，字號設(shè)置為11號字，標簽也分別命名為“支付寶”“口碑”“朋友”“我的”；在頁面區(qū)域上建立4個頁面“支付寶”“口碑”“朋友”“我的”。導(dǎo)航菜單名稱及頁面名稱(4)拖曳一個“熱區(qū)”元件到“支付寶”標簽導(dǎo)航上，為其添加鼠標單擊時觸發(fā)事件：在當前窗口打開相應(yīng)“支付寶”頁面。打開支付寶頁面(5)分別拖曳一個“熱區(qū)”元件到“口碑”“朋友”“我的”標簽上，為其添加鼠標

6、單擊時觸發(fā)事件：在當前窗口打開相應(yīng)頁面。面。打開相應(yīng)頁面(6)將標簽導(dǎo)航母版通過新增頁面的方式引用到“支付寶”“口碑”“朋友”“我的”4個頁母版引用到頁面(7)進入到“支付寶”頁面里，添加頁面載入時觸發(fā)事件，通過富文本的方式設(shè)置“支付寶”文本字體加粗，該標簽導(dǎo)航菜單呈現(xiàn)為選中狀態(tài)，運用同樣的方式為其他3個標簽導(dǎo)航設(shè)置選中狀O任下AW皿謂女爾童專中m如.由充至My的*i."UvnUqiVlMA,4VW0-RA1齒全廣州明;口翎|r=而田赤s心布下力刷鼻患于/人耐iwmw.餐芍稀榜iw寧薪閩*如*eSJSKJI標簽導(dǎo)航選中狀態(tài)設(shè)置(8)按F5鍵發(fā)布原型，單擊不同的標簽導(dǎo)航，相應(yīng)的標簽字體

7、加粗，呈現(xiàn)為選中狀態(tài)。fl?n=發(fā)布原型10.4.2 “支付寶”九宮格導(dǎo)航布局設(shè)計9個導(dǎo)航菜單，通過這樣的導(dǎo)“支付寶”界面主要由3部分組成，界面狀態(tài)欄、界面內(nèi)容以及標簽導(dǎo)航菜單。界面內(nèi)容采用九宮格導(dǎo)航方式，九宮格導(dǎo)航方式是一種宮格導(dǎo)航方式，它并非只有航方式，可以清晰地展現(xiàn)各個業(yè)務(wù)功能導(dǎo)航，便于用戶的查找和使用。（1）進入到“支付寶”頁面，拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為120,顏色填充為灰色（#3A3A3A）;再拖曳4個“圖片”元件到工作區(qū)域，將其寬度和高度都設(shè)置為20,作為賬單、用戶、放大鏡、加號圖標；拖曳一個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容命名為“

8、賬單”，字體顏色設(shè)置為白色（#FFFFFF),如圖10.10所示。狀態(tài)欄設(shè)計（2）拖曳4個“圖片”元件到工作區(qū)域，將其寬度和高度都設(shè)置為簽”元件到工作區(qū)域，將其文本內(nèi)容分別設(shè)置為“掃一掃”“付款”“卡券色設(shè)置為白色（#FFFFFF）,字號設(shè)置為12號字。35,再拖曳四個“文本標”“咻一咻”快捷功能按鈕(3)拖曳一個“動態(tài)面板”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為358,坐標位置設(shè)置為(0,120),動態(tài)面板的名稱設(shè)置為“支付寶屏幕顯示區(qū)”，狀態(tài)名稱設(shè)置為“支付寶屏幕”。支付寶屏幕顯示區(qū)(4)進入到“支付寶屏幕”狀態(tài)里，拖曳一個“矩形1”元件到工作區(qū)域，將其寬度和高度都設(shè)置為80,邊

9、框線的顏色設(shè)置為淺灰色(#E4E4E4),復(fù)制出11個同樣的矩形框。九宮格導(dǎo)航框(5)九宮格導(dǎo)航菜單由兩部分組成：一個是導(dǎo)航菜單圖標，可以使用圖片元件來代替，拖曳一個圖片元件，將其寬度和高度都設(shè)置為30;還有一個是導(dǎo)航菜單名稱，拖曳一個“文本標簽”元件到工作區(qū)域，將其字號設(shè)置為11號字。九宮格導(dǎo)航菜單(6)拽一個“動態(tài)面板”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為70,坐標位置設(shè)置為(0,250),動態(tài)面板的名稱設(shè)置為“海報輪播顯示區(qū)”，3個狀態(tài)分別命名為“海報1”“海報2”“海報3”。海報輪播顯示區(qū)(7)在“海報1”“海報2”兩個狀態(tài)里，分別放置兩個“占位符”元件，將其寬度均設(shè)置為3

10、20.高度均設(shè)置為70.文本內(nèi)容分別設(shè)置為“海報1”“海報2”。海報內(nèi)容(8)復(fù)制制作好的九宮格導(dǎo)航，在其基礎(chǔ)修改，成為如圖所示的下方的九宮格導(dǎo)航。九宮格導(dǎo)航菜單設(shè)計10.4.3 海報輪播效果制作海報輪播效果是用來動態(tài)地顯示商品的廣告信息，如果需要在有限的區(qū)域展示多個商品廣告信息，就可以使用海報輪播效果。(1)進入到“支付寶屏幕顯示區(qū)”狀態(tài)里，選中“海報輪播顯示區(qū)”動態(tài)面板，為其添加載入時觸發(fā)事件，在添加動作面板選擇“設(shè)置面板狀態(tài)”選項，勾選“海報輪播顯示區(qū)”復(fù)選項，在設(shè)置動作面板的狀態(tài)下拉列表中選擇“下一項”，勾選“向后循環(huán)”復(fù)選框，在進入動畫下拉列表中選擇“向左滑動”，在其右側(cè)的數(shù)值框中輸

11、入1000,勾選“循環(huán)間隔”復(fù)選框，在“循環(huán)間隔”后的數(shù)值框中輸入3000。F-匚qwirfRo-MVlnHly幣2星tiffl-riftR»匹Zl!fe3巧廿出吳子1fr*HSVCA4.無耦海報輪播設(shè)置(2)按F8鍵發(fā)布原型，可以看到海報進行自動循環(huán)輪播。發(fā)布原型10.4.4 “余額寶”界面布局設(shè)計在支付寶界面，單擊九宮格導(dǎo)航欄的余額寶導(dǎo)航菜單，會進入到余額寶界面，該界面是用來顯余額寶界面（1）拖曳一個“動態(tài)面板”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為530,將動態(tài)面板的名稱設(shè)置為“余額寶”，將其狀態(tài)命名為“余額寶內(nèi)容”，背景色設(shè)置為灰色（#F2F2F2）。余額寶動態(tài)面板

12、（2）進入到“余額寶內(nèi)容”狀態(tài)里，拖曳一個“矩形1”元件到工作區(qū)域作為狀態(tài)欄背景，將其寬度設(shè)置為320,高度設(shè)置為50,坐標位置設(shè)置為（0,0）,顏色填充為深灰色（#3A3A3A）,;拖曳一個“水平線”元件到工作區(qū)域，將其顏色設(shè)置為白色（#FFFFFF）,添加一個向左的箭頭，作為返回按鈕；拖曳一個“垂直線”元件作為間隔線到工作區(qū)域，將其顏色設(shè)置為白色（#FFFFFF）,高度設(shè)置為17。狀態(tài)欄背景(3)拖曳一個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容設(shè)置為“余額寶”，字號設(shè)置為15號，顏色設(shè)置為白色(#FFFFFF);拖曳兩個“圖片”元件到工作區(qū)域，將其寬度和高度都設(shè)置為25,作為查看轉(zhuǎn)入記錄圖

13、標和設(shè)置的圖標?？旖輬D標(4)拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為50,邊框顏色設(shè)置為淺灰色(#E4E4E4);拖曳兩個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容分別設(shè)置為“轉(zhuǎn)出”“轉(zhuǎn)入”，字號設(shè)置為15號，加粗。轉(zhuǎn)入轉(zhuǎn)出導(dǎo)航（5）拖曳一個“動態(tài)面板”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為429,坐標位置為（0,50）,動態(tài)面板的名稱設(shè)置為“余額寶收益顯示區(qū)”，狀態(tài)名稱設(shè)置為“余額寶收益”；拖曳一個“矩形3”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為40,文本內(nèi)容為“五一假期期間余額寶轉(zhuǎn)入收益和轉(zhuǎn)出到賬時間提醒”。余額寶收益顯示區(qū)（6）進入到“余額寶

14、收益”狀態(tài)里，拖曳一個“動態(tài)面板”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為600,坐標位置為（0,0）,動態(tài)面板的名稱設(shè)置為“余額寶收益內(nèi)容顯示區(qū)”，狀態(tài)名稱設(shè)置為“余額寶收益內(nèi)容”。余額寶收益內(nèi)容顯示區(qū)（7）進入到“余額寶收益內(nèi)容”狀態(tài)里，拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為280,顏色填充為灰色（#666666）;拖曳4個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容分別設(shè)置為“昨日收益（元）”“1000.99”“總金額（元）”“2.45”，字體顏色設(shè)置為白色（#FFFFFF）,將“昨日收益（元）”字號設(shè)置為14號字，將“1000.99”字號設(shè)置為72號字,

15、將“總金額（元）”字號設(shè)置為12號字，將“2.45”字號設(shè)置為24號字。rrfa收益情況(8)拖曳兩個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容分別命名為“萬份收益(元)”“累計收益(元)”；拖曳兩個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容分別命名為“0.7181”“236.32”，將其字號設(shè)置為24號；拖曳一個“垂直線”元件到工作區(qū)域作為間隔線，將其邊框顏色設(shè)置為灰色(#E4E4E4)。Rin0718123632萬份收益(9)拖曳一個“文本標簽”元件到工作區(qū)域，將其文本內(nèi)容命名為“七日年化收益率()”；拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為80,高度設(shè)置為25,文本內(nèi)容命名為“提示收

16、益”，字號設(shè)置為12號字；拖曳一個“占位符”元件到工作區(qū)域，將其寬度設(shè)置為320,高度設(shè)置為180,文本內(nèi)容命名為“收益率走勢圖”。收益率走勢10.4.5 “余額寶”界面上下滑動設(shè)計余額寶界面內(nèi)容很長，一整屏無法顯示所有內(nèi)容，如果想查看完整的界面內(nèi)容，可以通過上下滑動余額寶界面，來查看完整的界面內(nèi)容，下面開始制作余額寶界面上下滑動效果。(1)選中“余額寶收益內(nèi)容顯示區(qū)”動態(tài)面板，為其添加拖動動態(tài)面板時觸發(fā)事件。添加拖動動態(tài)面板時觸發(fā)事件(2)在添加動作面板選擇“移動”選項，勾選“余額寶收益內(nèi)容顯示區(qū)”，在設(shè)置動作面板的移動下拉列表中選擇“跟隨垂直拖動”。RW-：tt>WK.芯ar.Bt=

17、RH打?qū)γ驣“tec3raAlZ心i|j內(nèi)科f端季物生WflJUGS的扇胸用眄flIVHB帽尺寸»rw«w也IMAW垂直拖動(3)再為“余額寶收益內(nèi)容顯示區(qū)”動態(tài)面板添加拖動結(jié)束時觸發(fā)事件。上下滑動有兩種情況,向下滑動時，如果滑動的值大于0,就使“余額寶收益內(nèi)容顯示區(qū)”動態(tài)面板回到原始位置。x*，苗步T1，三寸0n居R丁E啟齒白#"rn*E¥1動態(tài)面板元件滑動y值大于0國川府向雷Mid而工用動態(tài)面板回到初始位置(4)向上滑動時，最外層動態(tài)面板“余額寶收益顯示區(qū)”的高度是429,里層動態(tài)面板“余額寶收益內(nèi)容顯示區(qū)”的高度為600,向上滑動最大距離為170,

18、當滑動距離大于170的時候，同樣使“余額寶收益內(nèi)容顯示區(qū)”動態(tài)面板回到原始位置。動態(tài)面板向上滑動MisantwAHU明wwr豆MM因RRe舊H日跑中RED«4上»4EE蕾/鶴t.晅也加/上土審CM*里一邢工E動態(tài)面板回到初始位置(5)按F8鍵發(fā)布原型，上下拖動余額寶界面，可以實現(xiàn)上下滑動效果。LauriPt-1000.99KRudI24510.4.6萬廿01三0.7181羈出發(fā)布原型蛀入“支付寶”與“余額寶”切換顯示效果在支付寶頁面里，單擊余額寶導(dǎo)航菜單會進入到余額寶界面，在余額寶界面里，單擊返回按鈕可以回到支付寶界面里，這樣可以實現(xiàn)支付寶界面和余額寶界面切換顯示效果。吃貨探店0.7181支付寶與余額寶切換顯示(1)隱藏“余額寶”動態(tài)面板,并且將其置于底層；進入到“支付寶屏幕顯示區(qū)”動態(tài)面板的“支付寶屏幕”狀態(tài)里，拖曳一個“熱區(qū)”元件并放置其在余額寶導(dǎo)航上，為其添加鼠標單擊時觸顯示余額寶動態(tài)面板(2)進入“余額寶”動態(tài)面板的“余額寶內(nèi)容”狀態(tài)里，拖曳一個“熱區(qū)”元件到余額寶返回按鈕上，為其添加鼠標單擊時觸發(fā)事件，使其隱藏“余額寶”動態(tài)面板，并且將“余額寶”動態(tài)面板置于底層。隱藏余額寶動態(tài)面板發(fā)布原型，單擊余額寶導(dǎo)航菜單，會進入到余額寶界面里，單擊返回按鈕，余額寶界面隱藏