AxureRP內(nèi)部培訓(xùn)核心教程學(xué)習(xí)教案

1、會(huì)計(jì)學(xué)1Axure RP內(nèi)部培訓(xùn)核心教程內(nèi)部培訓(xùn)核心教程第一頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第1頁(yè)/共52頁(yè)第二頁(yè)，編輯于星期五：二十點(diǎn) 五十分。n大約66%的軟件開發(fā)失敗或虧損的前三大原因?yàn)椋?缺乏使用者的參與；-需求或規(guī)格不完整；-需求或規(guī)格變更；n將文字性文檔轉(zhuǎn)變?yōu)榛?dòng)性的可視畫面，讓客戶在投入編程之前進(jìn)行需求確認(rèn)。n是一種高效的以用戶為中心的技術(shù)，是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。n全球有1000家的公司在使用Axure RP，淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)纫捕荚谑褂??！皼]有比制作prototype更易取得使用者界面與特殊功能可用性上的

2、一致性了。rototype不只可確認(rèn)需求，它更可贏得顧客的心。” 阿倫M.戴維斯第2頁(yè)/共52頁(yè)第三頁(yè)，編輯于星期五：二十點(diǎn) 五十分。nAxure RP Pro是美國(guó) Axure Software Solution公司的旗艦產(chǎn)品， 是一個(gè)快速的原型工具， 主要是針對(duì)負(fù)責(zé)定義需求、 定義規(guī)格、 設(shè)計(jì)功能、 設(shè)計(jì)界面的專家。nAXURE改變我們的工作方式：-決策層：直觀的理解系統(tǒng)行為，幫助決策-產(chǎn)品經(jīng)理：提高了各崗位間的溝通效率，降低溝通成本，保證項(xiàng)目進(jìn)程-需求人員：更加有效的與用戶溝通，減少誤解，保證需求質(zhì)量-設(shè)計(jì)開發(fā)：更加有效的協(xié)作溝通，降低溝通成本，減少誤解，避免返工-用戶：更加直觀的感受系

3、統(tǒng)，盡早反饋用戶的需求與系統(tǒng)的不足。第3頁(yè)/共52頁(yè)第四頁(yè)，編輯于星期五：二十點(diǎn) 五十分。nAxure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。n無需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。 nAxure 可一體化生成線框圖、HTML 交互原型、規(guī)格說明 Word 文檔； 第4頁(yè)/共52頁(yè)第五頁(yè)，編輯于星期五：二十點(diǎn) 五十分。站點(diǎn)地圖主菜單和工具欄界面控件（界面工具集 ）頁(yè)面注釋與頁(yè)面交互模塊區(qū)域物件注釋互動(dòng)設(shè)計(jì)Axure 的工作環(huán)境 第5頁(yè)/共52頁(yè)第六頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第6頁(yè)/共52頁(yè)第七頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第7頁(yè)/共52頁(yè)第八頁(yè)

4、，編輯于星期五：二十點(diǎn) 五十分。n在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。n明確界面框架后，接下來就可以利用頁(yè)面導(dǎo)航面板來定義所要設(shè)計(jì)的頁(yè)面。 頁(yè)面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁(yè)面，可以添加、刪除及對(duì)頁(yè)面層次進(jìn)行重新組織。 點(diǎn)擊面板工具欄上的“Add Child Page”按鈕可以添加一個(gè)頁(yè)面，點(diǎn)擊 “Delete Page” 按鈕可以刪除一個(gè)頁(yè)面。右鍵單擊選擇“Rename Page”菜單項(xiàng)可對(duì)頁(yè)面進(jìn)行重命名。 第8頁(yè)/共52頁(yè)第九頁(yè)，編輯于星期五：二十點(diǎn) 五十分。n在頁(yè)面導(dǎo)航面板中，通過拖拉頁(yè)面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)

5、頁(yè)面的位置和重新組織頁(yè)面的層次。n打開頁(yè)面進(jìn)行設(shè)計(jì) 在頁(yè)面導(dǎo)航面板中，鼠標(biāo)雙擊頁(yè)面將會(huì)在線框面板中打開頁(yè)面以進(jìn)行線框圖設(shè)計(jì)。第9頁(yè)/共52頁(yè)第十頁(yè)，編輯于星期五：二十點(diǎn) 五十分。添加控件添加控件從組件中拖動(dòng)一個(gè)控件到界面中，就可以添加一個(gè)控制?？丶梢詮囊粋€(gè)界面中拷貝到另外一個(gè)界面中。編輯控件編輯控件鼠標(biāo)雙擊鼠標(biāo)雙擊：雙擊控件，可以對(duì)控件最常用的屬性進(jìn)行編輯工具欄工具欄：點(diǎn)擊工具欄上的按鈕可以編輯控件的文本字體、背景色、邊框等；右鍵菜單右鍵菜單：右擊控件可以選擇編輯控件的一些特定屬性，不同控件屬性也不同。第10頁(yè)/共52頁(yè)第十一頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第11頁(yè)/共52頁(yè)第十二頁(yè)，編輯

6、于星期五：二十點(diǎn) 五十分。n添加添加控件控件 -從控件面板中拖動(dòng)一個(gè)控件到線框圖面板中， 就可以添加一個(gè)控件；-控件可以進(jìn)行拷貝(Ctrl+C)和粘貼(Ctrl+V) 。n操作控件操作控件 -選中控件后，可以拖拉移動(dòng)控件和改變控件的大??；-可通過控件右鍵菜單進(jìn)行組合、排序、對(duì)齊、分配和鎖定控件。n編輯編輯控件風(fēng)格和屬性控件風(fēng)格和屬性 -鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對(duì)控件的最常用屬性進(jìn)行編輯。-工具欄：點(diǎn)擊工具欄上的按鈕，編輯控件的文本字體、背景色、邊框等。-右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。- 第12頁(yè)/共52頁(yè)第十三頁(yè)，編輯于星期五：二十點(diǎn) 五十分

7、。第13頁(yè)/共52頁(yè)第十四頁(yè)，編輯于星期五：二十點(diǎn) 五十分。n注釋注釋（Annotations） 可以為控件添加注釋，以說明控件的功能。 n添加注釋添加注釋 在線框圖中選擇控件，然后在控件注釋和交互面板中編輯字段中的值，即可為控件添加注釋。面板頂部的 Label 字段是為控件添加一個(gè)標(biāo)識(shí)符。 第14頁(yè)/共52頁(yè)第十五頁(yè)，編輯于星期五：二十點(diǎn) 五十分。n自定義字段（Fields） 通過主菜單 Wireframe-Customize Annotation Fields and Views 或點(diǎn)擊面板上 Annotations 頭部的“Custommize Fields and Views” ，彈出

8、的Custommize Fields and Views 對(duì)話框，可以添加、刪除、修改、排序注釋字段。第15頁(yè)/共52頁(yè)第十六頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第16頁(yè)/共52頁(yè)第十七頁(yè)，編輯于星期五：二十點(diǎn) 五十分。管理頁(yè)面?zhèn)渥⒐芾眄?yè)面?zhèn)渥⒘硗?，可以自定義頁(yè)面?zhèn)渥?，為不同的人提供不同的備注，以滿足不同需要。比如可以新增“測(cè)試用例”“操作說明”等不同類別的頁(yè)面?zhèn)渥ⅰ頁(yè)面頁(yè)面?zhèn)渥ⅲ▊渥ⅲ≒age Notes）頁(yè)面?zhèn)渥⒖墒菍?duì)頁(yè)面進(jìn)行描述和說明。添加頁(yè)面?zhèn)渥⑻砑禹?yè)面?zhèn)渥?在線框圖下面的 Page notes 面板中可以添加頁(yè)面?zhèn)渥?nèi)容第17頁(yè)/共52頁(yè)第十八頁(yè)，編輯于星期五：二十點(diǎn) 五十分。n控件

9、交互控件交互 面板面板（Interactions Pane） 用于定義線框圖中控件的行為，包含定義鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行?？梢远x控件的（Events） 、場(chǎng)景（ Cases）和動(dòng)作（Actions）：交互事件：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的 OnClick、OnMouseEnter 和 OnMouseOut；場(chǎng)景：每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿足的條件；動(dòng)作每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。第18頁(yè)/共52頁(yè)第十九頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第19頁(yè)/共52頁(yè)第二十頁(yè)，

10、編輯于星期五：二十點(diǎn) 五十分。通過定義控件的行為，可以在生成的原型中打開鏈接、彈出頁(yè)面、動(dòng)態(tài)顯示和隱藏等。可以定義控件的（Events） 、場(chǎng)景（ Cases）和動(dòng)作（Actions）：交互事件：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的 OnClick、OnMouseEnter 和 OnMouseOut；場(chǎng)景：每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿足的條件；動(dòng)作每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。第20頁(yè)/共52頁(yè)第二十一頁(yè)，編輯于星期五：二十點(diǎn) 五十分。事件、場(chǎng)景和動(dòng)作的關(guān)系第21頁(yè)/共52頁(yè)第二十二頁(yè)，編輯于星期五：二十點(diǎn) 五十分。下列步驟說明如何

11、在按鈕控件上定義一個(gè)鏈接： Step1：拖拉一個(gè)按鈕控件到線框圖中，鼠標(biāo)雙擊“OnClick”事件，出現(xiàn)“Interaction Case Properties”對(duì)話窗，在這個(gè)對(duì)話框中可以選擇要執(zhí)行的動(dòng)作； Step 2：勾選“Open Link in Current Window”動(dòng)作。 Step 3：點(diǎn)擊“Link”，在彈出的 Link Properties 對(duì)話框中可以選擇要鏈接 的頁(yè)面或其它網(wǎng)頁(yè)地址 。第22頁(yè)/共52頁(yè)第二十三頁(yè)，編輯于星期五：二十點(diǎn) 五十分。基礎(chǔ)交互設(shè)計(jì)動(dòng)作除了簡(jiǎn)單的鏈接之外，Axure 還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在觸發(fā)事件的場(chǎng)景中執(zhí)行。第23頁(yè)/共52頁(yè)

12、第二十四頁(yè)，編輯于星期五：二十點(diǎn) 五十分?；A(chǔ)交互設(shè)計(jì)動(dòng)作第24頁(yè)/共52頁(yè)第二十五頁(yè)，編輯于星期五：二十點(diǎn) 五十分。動(dòng)態(tài)面板控件可以讓你的原型中實(shí)現(xiàn)高級(jí)的動(dòng)態(tài)交互功能。第25頁(yè)/共52頁(yè)第二十六頁(yè)，編輯于星期五：二十點(diǎn) 五十分。在對(duì)話框中可以創(chuàng)建、重命名、重新排序、刪除、和編輯動(dòng)態(tài)面板的狀態(tài)第26頁(yè)/共52頁(yè)第二十七頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第27頁(yè)/共52頁(yè)第二十八頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第28頁(yè)/共52頁(yè)第二十九頁(yè)，編輯于星期五：二十點(diǎn) 五十分。設(shè)置tab1、tab2、tab3三個(gè)矩形框的OnClick事件，以tab1為例說明：（1）選擇tab1矩形框，點(diǎn)擊交互中的On

13、Click事件，再選擇“設(shè)置動(dòng)態(tài)面板的狀態(tài)轉(zhuǎn)換”，然后選擇第三步的“Panel state to state”；第29頁(yè)/共52頁(yè)第三十頁(yè)，編輯于星期五：二十點(diǎn) 五十分。（2）選擇第一步中的“設(shè)置 實(shí)例 的狀態(tài)變化”，然后點(diǎn)擊第二部中的tab1第30頁(yè)/共52頁(yè)第三十一頁(yè)，編輯于星期五：二十點(diǎn) 五十分。（3）選擇一個(gè)動(dòng)態(tài)面板tab1，點(diǎn)擊確定完成事件注明：tab2、tab3矩形框事件如同tab1，只是選擇面板狀態(tài)時(shí)選擇對(duì)應(yīng)得狀態(tài)，tab2選擇tab2狀態(tài)、tab3選擇tab3狀態(tài)（4）按照以上步驟，完成tab2、tab3狀態(tài)頁(yè)面操作第31頁(yè)/共52頁(yè)第三十二頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高

14、級(jí)交互設(shè)計(jì)n但如果需要更強(qiáng)大、更高保真度的原型，就需要邏輯條件。n增加條件可以是基于原型中控件上輸入的值，如復(fù)選框的選擇值、文本框中的文本等。n條件也可以是基于變量值。一個(gè)觸發(fā)事件可以包含有多個(gè)場(chǎng)景，根據(jù)條件執(zhí)行流程或互動(dòng)。第32頁(yè)/共52頁(yè)第三十三頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)nStep1：首先要在交互面板中為某個(gè)事件添加一個(gè)場(chǎng)景（case）。在Interaction Case Properties對(duì)話框中的Step 1中點(diǎn)擊Add Condition這個(gè)鏈接。第33頁(yè)/共52頁(yè)第三十四頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)nStep2：這時(shí)會(huì)打開一個(gè)Conditio

15、n Builder對(duì)話框，創(chuàng)建邏輯條件。n在Condition Builder對(duì)話框中，可以添加多個(gè)邏輯條件。n 如果要求所有條件都需要滿足，則在Satisfy下拉列表框中選擇all；如果只要滿足其中一個(gè)條件可選擇為any。第34頁(yè)/共52頁(yè)第三十五頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)nStep3：下一步需要選擇當(dāng)條件滿足時(shí)要執(zhí)行的動(dòng)作。 n點(diǎn)擊確定，完成交互設(shè)計(jì)第35頁(yè)/共52頁(yè)第三十六頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例系統(tǒng)登陸界面這是一個(gè)簡(jiǎn)單的登陸界面，輸入用戶名、密碼后，點(diǎn)擊登陸按鈕進(jìn)行登陸校驗(yàn)： 1. 如果未輸入用戶名或密碼，則提示“請(qǐng)輸入用戶名和密碼”，藍(lán)色

16、字體； 2. 如果用戶名或密碼錯(cuò)誤，則提示“用戶名或密碼錯(cuò)誤”，紅色字體； 3. 如果用戶名和密碼都匹配，則提示“您好，【用戶名】”，黑色字體。 第36頁(yè)/共52頁(yè)第三十七頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例步驟一、繪制線框圖1、 打開Axure軟件，新建一個(gè)RP文件；2、 拖動(dòng)控件面板中的控件到線框圖面板中，繪制登陸界面如下圖：所用到的控件清單如下： 控件名作用文本內(nèi)容標(biāo)識(shí)符其它屬性Rectangle控件底色底色：灰色TextPanel顯示信息提示logInfoTextPanel用戶名用戶名：TextPanel密碼密碼：TextField輸入用戶名userNameTextFie

17、ld輸入密碼passWordButton點(diǎn)擊登錄登陸submitButton第37頁(yè)/共52頁(yè)第三十八頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例步驟二、設(shè)計(jì)控件交互 1、 選中登陸按鈕，在控件交互和注釋面板中鼠標(biāo)雙擊onClick事件； 第38頁(yè)/共52頁(yè)第三十九頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例2、 在彈出的“交互場(chǎng)景屬性”對(duì)話框中，點(diǎn)擊“添加場(chǎng)景”這個(gè)鏈接第39頁(yè)/共52頁(yè)第四十頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例3、 在彈出的“條件創(chuàng)建”對(duì)話框中，添加條件如下： 第40頁(yè)/共52頁(yè)第四十一頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例4、 回到“

18、交互場(chǎng)景屬性”對(duì)話框中，Step 2中選擇動(dòng)作“Set Variable and Widget value equal to Value”，并點(diǎn)擊Step 3中的鏈接； 第41頁(yè)/共52頁(yè)第四十二頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例5、 在彈出的“設(shè)置變量和控件值”對(duì)話框中，設(shè)置如下： 點(diǎn)擊Edit text鏈接，輸入“請(qǐng)輸入用戶名或密碼”，并設(shè)置為藍(lán)色； 第42頁(yè)/共52頁(yè)第四十三頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例6、 確定和關(guān)閉所有對(duì)話框，這時(shí)控件交互和注釋面板如下： 以上我們實(shí)現(xiàn)了第一個(gè)場(chǎng)景：如果未輸入用戶名或密碼，則提示“請(qǐng)輸入用戶名和密碼”，藍(lán)色字體； 第43頁(yè)/共52頁(yè)第四十四頁(yè)，編輯于星期五：二十點(diǎn) 五十分。高級(jí)交互設(shè)計(jì)實(shí)例仿照?qǐng)鼍?的操作，實(shí)現(xiàn)第2、3個(gè)場(chǎng)景，最終控件面板上的場(chǎng)景、條件、動(dòng)作如下： 完成以上操作，即實(shí)現(xiàn)了系統(tǒng)登錄的設(shè)置。第44頁(yè)/共52頁(yè)第四十五頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第45頁(yè)/共52頁(yè)第四十六頁(yè)，編輯于星期五：二十點(diǎn) 五十分。第46頁(yè)/共52頁(yè)第四十七頁(yè)，編輯于星期五：二十點(diǎn) 五十分。nHTML原型的界面可分成三個(gè)區(qū)域