Axure-RP8原型設(shè)計(jì)圖解第1章-Axur課件

信息化高速發(fā)展的今天，從過去有軟件可以使用，到現(xiàn)在定制自己使用的軟件，用戶有了更多實(shí)現(xiàn)自己的想法和需求的方式，但是用戶往往并不能清晰和完整地表達(dá)自己的需求，而產(chǎn)品的設(shè)計(jì)原型恰恰能快速地挖掘出用戶的真實(shí)需求。信息化高速發(fā)展的今天，從過去有軟件可以使用，到現(xiàn)在定制自己使通過制作軟件產(chǎn)品的設(shè)計(jì)原型，向用戶演示并講解產(chǎn)品原型的使用，在演示過程中捕捉用戶的實(shí)際需求；項(xiàng)目組人員根據(jù)設(shè)計(jì)原型進(jìn)行溝通，明確軟件產(chǎn)品的目標(biāo)，可以大大提高項(xiàng)目組成員的工作效率，并降低溝通成本，如圖1.1。圖1.1通過原型設(shè)計(jì)預(yù)先展示產(chǎn)品效果通過制作軟件產(chǎn)品的設(shè)計(jì)原型，向用戶演示并講解產(chǎn)品原型的使用，1.1

什么是軟件原型1.2

AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.1什么是軟件原型軟件原型，可以理解成軟件的Demo，它并不是一個(gè)可以作為最終使用的軟件，而是利用某種物品（如紙、筆）或者某種工具（如Axure）快速地勾勒出的軟件的大致結(jié)構(gòu)，再添加一些交互效果，來模擬軟件的功能操作。原型大致可以分為3類：草圖原型、低保真原型和高保真原型。

123高保真原型是用來演示產(chǎn)品效果的Demo，在視覺上與真實(shí)產(chǎn)品一樣，體驗(yàn)上也幾乎接近真實(shí)產(chǎn)品，如圖1.4所示。

草圖原型低保真原型高保真原型

草圖原型，可以稱為紙面原型，能描述產(chǎn)品的大概需

求，

記錄瞬間靈感，如圖1.2所示。

低保真原型是根據(jù)需求或草圖原型，利用相關(guān)設(shè)計(jì)工具制作的簡單的軟件原型，如圖1.3所示。1.1什么是軟件原型軟件原型，可以理解成軟件的Demo，圖1.2草圖原型圖1.2草圖原型圖1.3低保真原型圖1.3低保真原型圖1.4高保真原型圖1.4高保真原型1.1

什么是軟件原型1.2

AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.2

AxureRP8軟件安裝 AxureRP是一款專業(yè)的快速原型設(shè)計(jì)軟件，是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，RP是RapidPrototyping（快速原型）的縮寫。AxureRP8的軟件圖標(biāo)如圖1.5所示。

圖1.5AxureRP8軟件圖標(biāo)1.2?AxureRP8軟件安裝 AxureRP是一1. 雙擊AxureRP-Pro-Setup.exe文件，打開安裝初始化界面，由于平臺語言的兼容性問題會出現(xiàn)亂碼，但并不影響軟件的安裝及使用，如圖1.6所示。

圖1.6AxureRP8開始安裝1. 雙擊AxureRP-Pro-Setup.exe文件，2. 在“LicenseAgreement”界面中勾選“IAgree”復(fù)選框，同意Axure安裝協(xié)議，單擊“Next”按鈕繼續(xù)安裝，如圖1.7所示。

圖1.7同意安裝協(xié)議2. 在“LicenseAgreement”界面中勾選“3. 在“SelectDestination”界面中選擇安裝存放路徑，可以使用默認(rèn)的安裝路徑，也可自定義安裝路徑，之后單擊“Next”按鈕進(jìn)行下一步，如圖1.8所示。

圖1.8選擇安裝路徑3. 在“SelectDestination”界面中選擇4. 在“ProgramShortcuts”界面中有兩個(gè)單選按鈕，“AllUsers”代表所有用戶都可以使用，

“CurrentUserOnly”代表只有自己可以使用，選擇第一個(gè)單選按鈕，單擊“Next”按鈕繼續(xù)安裝，如圖1.9所示。

圖1.9用戶使用權(quán)限4. 在“ProgramShortcuts”界面中有兩個(gè)5. 一直單擊“Next”按鈕，最后單擊“Finish”按鈕完成安裝，如圖1.10所示。

圖1.10完成安裝5. 一直單擊“Next”按鈕，最后單擊“Finish”1.1

什么是軟件原型1.2?AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.3認(rèn)識Axure軟件界面 Axure軟件界面大致可以分為8個(gè)區(qū)域，分別為菜單欄區(qū)域、工具欄區(qū)域、頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、工作區(qū)域、檢視區(qū)域、頁面概要區(qū)域，如圖1.11所示。

圖1.11軟件界面1.3認(rèn)識Axure軟件界面 Axure軟件界面大致可以分1.3.1菜單欄區(qū)域

菜單欄區(qū)域有文件、編輯、視圖、項(xiàng)目、布局、發(fā)布、團(tuán)隊(duì)、賬戶、幫助9個(gè)菜單項(xiàng)，包含了軟件的一些常規(guī)操作和功能，如圖1.12所示。

“文件”菜單（見圖1.13）：

（1）可以新建工程、打開工程及保存工程，這些操作可以使用快捷鍵或者工具欄快速操作按鈕完成；

圖1.12菜單欄區(qū)域圖1.13文件菜單選項(xiàng)1.3.1菜單欄區(qū)域 菜單欄區(qū)域有文件、編輯、視圖、項(xiàng)目、

（2）可以導(dǎo)入RP文件，新建團(tuán)隊(duì)項(xiàng)目、打開團(tuán)隊(duì)項(xiàng)目；

（3）可以進(jìn)行打印紙張尺寸設(shè)置，打印index頁面，導(dǎo)出index圖片；

（4）可以設(shè)置定時(shí)備份軟件原型，避免制作軟件原型丟失。

“編輯”菜單（見圖1.14）：

可以完成復(fù)制、剪切、粘貼、撤銷、重做等操作，也可以使用快捷鍵來完成這些操作，所以很少會使用這個(gè)菜單。

“視圖”菜單（見圖1.15）：

圖1.14編輯菜單選項(xiàng)圖1.15視圖菜單選項(xiàng) （2）可以導(dǎo)入RP文件，新建團(tuán)隊(duì)項(xiàng)目、打開團(tuán)隊(duì)項(xiàng)目；圖1.

（１）“工具欄”選項(xiàng)（見圖1.16），將工具欄區(qū)域劃分為基本工具欄和樣式工具欄兩類，可以通過勾選的方式控制工具欄區(qū)域內(nèi)容的顯示，同時(shí)提供自定義工具欄功能，工具欄內(nèi)容可以自行定義；

（２）“功能區(qū)”選項(xiàng)（見圖1.17），分為5個(gè)區(qū)域，即頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、檢視區(qū)域、概要區(qū)域，可通過勾選的方式控制這些區(qū)域的顯示與隱藏效果，還提供開關(guān)左側(cè)功能欄和開關(guān)右側(cè)功能欄的功能；

圖1.16工具欄選項(xiàng)圖1.17功能區(qū)選項(xiàng) （１）“工具欄”選項(xiàng)（見圖1.16），將工具欄區(qū)域劃分為基

（３）“遮罩”選項(xiàng)（見圖1.18），通過勾選的方式來控制隱藏對象、母版、動態(tài)面板、中繼器、文本鏈接、熱區(qū)是否添加遮罩效果。

“項(xiàng)目”菜單（見圖1.19）：

（1）可對元件、頁面的樣式進(jìn)行編輯；

（2）具有自定義元件字段說明和頁面字段說明功能；

（3）具有添加全局變量功能。

圖1.18遮罩選項(xiàng)圖1.19項(xiàng)目菜單選項(xiàng) （３）“遮罩”選項(xiàng)（見圖1.18），通過勾選的方式來控制隱“發(fā)布”菜單（見圖1.20）：（1）可以進(jìn)行原型預(yù)覽，對預(yù)覽方式進(jìn)行設(shè)置，選擇打開瀏覽器方式和工具欄設(shè)置；（2）可以將原型發(fā)布到AxShare上面進(jìn)行托管；（3）以生成HTML文件的方式進(jìn)行原型發(fā)布；（4）生成需求規(guī)格說明書的Word文檔；（5）預(yù)覽和生成原型文件。

圖1.20發(fā)布菜單選項(xiàng)“發(fā)布”菜單（見圖1.20）：圖1.20發(fā)布菜單選項(xiàng)“團(tuán)隊(duì)”菜單（見圖1.21）：

可以創(chuàng)建團(tuán)隊(duì)項(xiàng)目和獲取團(tuán)隊(duì)項(xiàng)目，進(jìn)行多人協(xié)作?！百~戶”菜單（見圖1.22）：

可以進(jìn)行賬戶登錄和服務(wù)器代理設(shè)置。

圖1.21團(tuán)隊(duì)菜單選項(xiàng)圖1.22賬戶菜單選項(xiàng)“團(tuán)隊(duì)”菜單（見圖1.21）：圖1.21團(tuán)隊(duì)菜單選項(xiàng)圖1“幫助”菜單（見圖1.23）：（1）通過開始演示動畫選項(xiàng)，學(xué)習(xí)原型工具的使用，提供在線培訓(xùn)教學(xué)功能及進(jìn)入Axure論壇

功能；（2）通過管理授權(quán)完成注冊，獲得軟件使用的授權(quán)；（3）提供軟件檢查更新及提交軟件意見和軟件錯誤功能。

圖1.23幫助菜單選項(xiàng)“幫助”菜單（見圖1.23）：圖1.23幫助菜單選項(xiàng)1.3.2工具欄區(qū)域

工具欄區(qū)域包含有使用頻率最高的快捷工具。

我們在設(shè)計(jì)原型的過程中經(jīng)常會用到這些操作，理解工具欄的功能并掌握它的使用方法，可以提高制作原型的效率。

工具欄區(qū)域分為基本工具欄和樣式工具欄，同時(shí)提供自定義工具欄功能。

下面通過對兩個(gè)矩形元件的操作，熟悉一下工具欄的使用，如圖1.24所示。

圖1.24工具欄區(qū)域1.3.2工具欄區(qū)域 工具欄區(qū)域包含有使用頻率最高的快捷工1.基本工具欄

新建、打開、保存操作

新建、打開、保存快捷工具按鈕如圖1.25所示。

文件：新建一個(gè)工程項(xiàng)目，快捷鍵是Ctrl+N。

打開：打開一個(gè)已有的工程項(xiàng)目（只能打開rp類型的工程），快捷鍵是Ctrl+O。

保存：保存一個(gè)工程項(xiàng)目，快捷鍵是Ctrl+S。

復(fù)制：單擊這個(gè)快捷按鈕，可以復(fù)制選中的元件，它的快捷鍵是Ctrl+C。

剪貼板：可以粘貼復(fù)制的元件。單擊這個(gè)快捷按鈕，可以把復(fù)制的元件粘貼到工作區(qū)域，它的快捷鍵是Ctrl+V。

撤銷：單擊這個(gè)快捷按鈕可以撤銷上一步的操作，快捷鍵是Ctrl+Z。

重做：單擊這個(gè)快捷按鈕可以重做上一步的操作，快捷鍵是Ctrl+Y。

剪切：單擊這個(gè)快捷按鈕可以剪切選中的元件，快捷鍵是Ctrl+X。

圖1.25新建、打開、保存操作1.基本工具欄 新建、打開、保存操作

新建、打開、保存快捷實(shí)戰(zhàn)演練1. 在元件庫區(qū)域，拖曳兩個(gè)矩形元件到工作區(qū)域，并在矩形元件上分別雙擊，進(jìn)行重新命名，一個(gè)矩形命名為“矩形一”，另一個(gè)矩形命名為“矩形二”，單擊保存快捷按鈕或者使用Ctrl+S快捷鍵保存上面的操作，如圖1.26所示。

圖1.26拖曳矩形元件實(shí)戰(zhàn)演練1. 在元件庫區(qū)域，拖曳兩個(gè)矩形元件到工作區(qū)域，并2. 選中“矩形一”元件，利用Ctrl+C快捷鍵復(fù)制出同樣的一個(gè)元件，再利用Ctrl+V快捷鍵粘

貼，也可以利用工具欄上快捷按鈕操作，如圖1.27所示。

圖1.27復(fù)制矩形元件2. 選中“矩形一”元件，利用Ctrl+C快捷鍵復(fù)制出同樣的

選擇、連接、鋼筆、更多、縮放操作

元件的選擇、連接、鋼筆、邊界點(diǎn)、切割、裁剪、連接點(diǎn)、格式刷以及縮放操作的快捷工具按鈕如圖1.28、圖1.29所示。

圖1.28選擇、連接、鋼筆圖1.29更多 選擇、連接、鋼筆、更多、縮放操作

元件的選擇、連接、鋼筆、

選擇：用來選中工作區(qū)域中的元件，包括相交選中和包含選中，相交選中所選擇的區(qū)域只要和元件有接觸、有相交，這個(gè)元件就會呈現(xiàn)為選中狀態(tài)；而包含選中是把元件完全包含進(jìn)來，才會呈現(xiàn)為選中狀態(tài)。

連接：用來連接兩個(gè)元件。這個(gè)操作多用于繪制流程圖。

鋼筆：可以繪制出自定義的形狀。

縮放：設(shè)置工作區(qū)域的縮放比例，可以根據(jù)頁面內(nèi)容進(jìn)行調(diào)整。 選擇：用來選中工作區(qū)域中的元件，包括相交選中和包含選中，相

布局操作

布局操作用來設(shè)置頁面中元件的布局，包括設(shè)置元件頂層、底層、組合、取消組合、對齊、分布操作，其按鈕如圖1.30所示。

圖1.30布局操作按鈕

布局操作

布局操作用來設(shè)置頁面中元件的布局，包括設(shè)置元件頂

頂層、底層：將工作區(qū)域中的元件置于頂層操作和置于底層操作。

組合、取消組合：可以將不同元件設(shè)置為一個(gè)組合，這樣可以把組合的元件一起移動或者進(jìn)行其他操作；同時(shí)也可以將一個(gè)組合拆散為單獨(dú)的元件。

對齊：提供左對齊、左右居中、右對齊、頂部對齊、上下居中、底部對齊方式，如圖1.31所示。

分布：包括水平分布和垂直分布兩種分布方式，如圖1.32所示。

水平分布：單擊這個(gè)按鈕，可以讓選中的按鈕呈現(xiàn)為橫向均勻分布。

垂直分布：單擊這個(gè)按鈕，可以讓選中的按鈕呈現(xiàn)為縱向均勻分布。

頂層、底層：將工作區(qū)域中的元件置于頂層操作和置于底層操作。圖1.31對齊方式圖1.32分布方式圖1.31對齊方式圖1.32分布方式

鎖定、開關(guān)功能欄、發(fā)布、登錄操作

鎖定元件、取消鎖定元件、開關(guān)左側(cè)功能欄、開關(guān)右側(cè)功能欄、預(yù)覽、共享、發(fā)布、登錄操作按鈕，如圖1.33所示。

圖1.33鎖定、發(fā)布操作 鎖定、開關(guān)功能欄、發(fā)布、登錄操作

鎖定元件、取消鎖定元件、

鎖定、取消鎖定：將工作區(qū)域中的元件鎖定，變?yōu)椴豢梢砸苿?，也可以取消鎖定，進(jìn)行移動。

開關(guān)功能欄：包括開關(guān)工作區(qū)域左側(cè)的功能欄和工作區(qū)域右側(cè)的功能欄。

預(yù)覽：以原型預(yù)覽的方式在瀏覽器中顯示，不生成本地原型文件。

共享：通過共享的方式創(chuàng)建團(tuán)隊(duì)項(xiàng)目，發(fā)布到AxShare上面。

發(fā)布：可以通過預(yù)覽的方式發(fā)布，也可以通過生成本地文件的形式發(fā)布。

登錄：提供登錄的快捷按鈕。 鎖定、取消鎖定：將工作區(qū)域中的元件鎖定，變?yōu)椴豢梢砸苿?，?.樣式工具欄

樣式工具欄可用來給文本內(nèi)容或者元件邊框設(shè)置樣式，可以設(shè)置文本內(nèi)容顏色、字號、字體，也可以給元件邊框設(shè)置樣式，如圖1.34所示。

圖1.34樣式工具欄2.樣式工具欄 樣式工具欄可用來給文本內(nèi)容或者元件邊框設(shè)置

：填充背景顏色，同樣單擊下三角可以選擇要填充的顏色。

：設(shè)置外部陰影，勾選陰影復(fù)選框，讓它生效，在這里可以設(shè)置陰影的偏移位置和模糊程度，并且可以設(shè)置陰影的顏色。

：設(shè)置元件邊框的顏色，單擊下三角，彈出框可用來選擇顏色。

：設(shè)置元件線寬，單擊下三角，彈出框可用來選擇邊框的寬度。

：設(shè)置元件的線條樣式，單擊下三角，彈出框可用來選擇線條樣式，實(shí)線或虛線。

：可以設(shè)置水平線元件和垂直線元件的箭頭樣式。

：填充背景顏色，同樣單擊下三角可以選擇要填充的顏色。實(shí)戰(zhàn)演練1. 單擊矩形一元件，將其邊框編輯為紅色、粗線、打點(diǎn)式線條；將矩形二編輯成藍(lán)色背景，紅色外部陰影，如圖1.35所示。

圖1.35編輯矩形一和矩形二

實(shí)戰(zhàn)演練1. 單擊矩形一元件，將其邊框編輯為紅色、粗線、打點(diǎn)2. 將矩形二的文本字體設(shè)置為華文琥珀，字體類型設(shè)置為BoldOblique，字號設(shè)置為28，添加粗體、斜體、下劃線設(shè)置，字體顏色設(shè)置為黃色，水平位置靠左對齊，垂直位置頂部對齊，如圖1.36所示。

圖1.36矩形二字體設(shè)置2. 將矩形二的文本字體設(shè)置為華文琥珀，字體類型設(shè)置為Bol3. 將矩形二元件的x值設(shè)置為360，y值設(shè)置為80；寬度w值設(shè)置為240，h值設(shè)置為100，如圖1.37所示。

圖1.37編輯元件的位置和大小3. 將矩形二元件的x值設(shè)置為360，y值設(shè)置為80；寬度w3.自定義工具欄

工具欄里有很多快捷按鈕，有一些按鈕是經(jīng)常會用到的，有一些按鈕可能很久都不會用到一次，這時(shí)可以自定義工具欄，在自定義工具欄里選擇顯示什么快捷按鈕。

單擊視圖菜單下工具欄選項(xiàng)，選擇自定義工具欄，如圖1.38所示。

圖1.38自定義工具欄3.自定義工具欄 工具欄里有很多快捷按鈕，有一些按鈕是經(jīng)常1.3.3頁面區(qū)域

頁面區(qū)域是用來顯示軟件頁面的，從這里可以了解到軟件的大致結(jié)構(gòu)，有哪些頁面，以及頁面之間的關(guān)系。

頁面區(qū)域采用樹狀結(jié)構(gòu)來顯示頁面，以index頁為樹的根節(jié)點(diǎn)，可以對頁面進(jìn)行增加、移動、刪除等操作來管理軟件原型的頁面，如圖1.39所示。

圖1.39頁面區(qū)域1.3.3頁面區(qū)域 頁面區(qū)域是用來顯示軟件頁面的，從這里可1.3.4元件庫區(qū)域

元件庫區(qū)域包含了制作原型需要的一些基礎(chǔ)元件，AxureRP8中原型設(shè)計(jì)工具默認(rèn)包含線框圖元件庫和流程圖元件庫、圖標(biāo)元件庫。

線框圖元件庫里提供了40種線框圖元件，常用的有圖片、文本標(biāo)簽、矩形、占位符、水平線、垂直線、文本框、下拉列表框、復(fù)選框、單選按鈕、提交按鈕，如圖1.40所示。

圖1.40線框圖元件1.3.4元件庫區(qū)域 元件庫區(qū)域包含了制作原型需要的一些基

流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文件、角色、數(shù)據(jù)庫等，如圖1.41所示。

圖標(biāo)元件庫里提供了各種各樣的圖標(biāo)，比如箭頭、電池、統(tǒng)計(jì)圖標(biāo)等，如圖1.42所示。

圖1.41流程圖元件圖1.42圖標(biāo)元件 流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文1.3.5母版區(qū)域

母版區(qū)域用來設(shè)計(jì)一些共用、復(fù)用的區(qū)域，如圖1.43所示，如網(wǎng)站尾部版權(quán)區(qū)域，可能每個(gè)頁面都會用到版權(quán)信息，也可以設(shè)計(jì)導(dǎo)航菜單，如移動App的底部標(biāo)簽導(dǎo)航，在母版中設(shè)計(jì)一次，在其他頁面可直接引用，達(dá)到共用、復(fù)用的效果。

圖1.43母版區(qū)域1.3.5母版區(qū)域 母版區(qū)域用來設(shè)計(jì)一些共用、復(fù)用的區(qū)域，1.3.6工作區(qū)域

工作區(qū)域是用來繪制原型的畫布。在這個(gè)區(qū)域里完成原型的設(shè)計(jì)，就像畫畫時(shí)在畫布上盡情繪制，如圖1.44所示。

圖1.44工作區(qū)域1.3.6工作區(qū)域 工作區(qū)域是用來繪制原型的畫布。在這個(gè)區(qū)1.3.7檢視區(qū)域

檢視區(qū)域是用來設(shè)計(jì)頁面或者元件的樣式和交互效果的，可以設(shè)置屬性，如添加頁面交互效果，頁面載入時(shí)觸發(fā)事件、窗口尺寸改變時(shí)觸發(fā)事件、窗口滾動時(shí)觸發(fā)事件，以及在更多事件里還提供許多其他的事件，如圖1.45所示。

圖1.45屬性設(shè)置1.3.7檢視區(qū)域 檢視區(qū)域是用來設(shè)計(jì)頁面或者元件的樣式和

在檢視區(qū)域中可以填寫頁面或者元件注釋，自定義注釋的名稱，如圖1.46所示。

還可以設(shè)計(jì)頁面、元件的樣式，比如頁面在瀏覽器中顯示的對齊方式是居中對齊還是居左對齊，頁面的背景色或者背景圖片，還可以設(shè)置草圖的效果，針對元件設(shè)置禁用、選中等屬性，也可以給元件添加樣式，設(shè)置元件的位置和大小、選擇元件的樣式，以及字體、邊框線、圓角半徑、對齊方式等，如圖1.47所示。

在檢視區(qū)域中可以填寫頁面或者元件注釋，自定義注釋的名稱，如圖1.46說明圖1.47樣式圖1.46說明圖1.47樣式1.3.8頁面概要區(qū)域

頁面概要區(qū)域用來管理頁面上使用的元件，可以查看頁面上使用了哪些元件及管理這些元件，比如可以管理動態(tài)面板，增加動態(tài)面板、移動動態(tài)面板及刪除動態(tài)面板等操作，如圖1.48所示。

圖1.48頁面概要區(qū)域1.3.8頁面概要區(qū)域 頁面概要區(qū)域用來管理頁面上使用的元1.1

什么是軟件原型1.2?AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.4原型設(shè)計(jì)流程 1.4.1需求分析

一般情況下，需求分析主要是由產(chǎn)品經(jīng)理或者需求分析師來完成，但是設(shè)計(jì)師最好也參與到前期需求分析的過程中，這樣就可以和產(chǎn)品經(jīng)理對需求有一致的理解，達(dá)成一致的意見。

（1）可以通過用戶調(diào)研的方式獲取用戶的需求，調(diào)研的方式有很多，如調(diào)查報(bào)告、訪談等。

（2）可以進(jìn)行競品分析，分析競品的界面樣式、操作流程、主要任務(wù)流程及用戶的需求，不能把競品的東西直接搬過來使用，有可能不適合，因?yàn)楹诵母偁幜τ锌赡懿煌?，為用戶解決的需求也有可能不同。

（3）通過分析用戶的反饋和產(chǎn)品的數(shù)據(jù)，分析出用戶的需求和痛點(diǎn)，通過產(chǎn)品解決用戶的這些需求。

1.4原型設(shè)計(jì)流程 1.4.1需求分析

一般情況下，需求1.4.2頁面架構(gòu)設(shè)計(jì)

思維導(dǎo)圖軟件理清邏輯關(guān)系獲取到用戶需求之后，開始分析用戶的需求，可以使用思維導(dǎo)圖軟件來理清用戶的需求、產(chǎn)品的各個(gè)功能模塊及其邏輯關(guān)系等，如圖1.49所示。

圖1.49猿題庫App思維導(dǎo)圖1.4.2頁面架構(gòu)設(shè)計(jì) 思維導(dǎo)圖軟件理清邏輯關(guān)系獲取到用戶

流程圖表達(dá)主要流程任務(wù)

分析用戶的需求，分析出用戶使用產(chǎn)品可以完成的主要流程任務(wù)，完成這個(gè)流程任務(wù)每一步用戶是怎么操作的，畫出流程圖，如圖1.50所示。

圖1.50猿題庫App流程圖

流程圖表達(dá)主要流程任務(wù)

分析用戶的需求，分析出用戶使用產(chǎn)品

產(chǎn)品信息架構(gòu)設(shè)計(jì)

通過需求分析，以及對產(chǎn)品的思維導(dǎo)圖設(shè)計(jì)和流程圖設(shè)計(jì)，大致可以規(guī)劃出產(chǎn)品的主要功能點(diǎn)，這些功能點(diǎn)就可以形成產(chǎn)品的初步信息架構(gòu)，這些信息架構(gòu)可以理解成房子的地基和框架，只有把這些確定了，才可能繼續(xù)上層建筑。

比如猿題庫App中的“練習(xí)”“試卷”“發(fā)現(xiàn)”和“我”就是這個(gè)產(chǎn)品的信息架構(gòu)。

在AxureRP8里有一個(gè)頁面區(qū)域可以對這些信息架構(gòu)進(jìn)行管理，頁面結(jié)構(gòu)采用樹形菜單，層級分明，結(jié)構(gòu)清晰，還能自動生成框架結(jié)構(gòu)圖，非常方便，如圖1.51所示。

產(chǎn)品信息架構(gòu)設(shè)計(jì)

通過需求分析，以及對產(chǎn)品的思維導(dǎo)圖設(shè)計(jì)和圖1.51猿題庫App信息架構(gòu)設(shè)計(jì)圖1.51猿題庫App信息架構(gòu)設(shè)計(jì)

頁面布局設(shè)計(jì)

產(chǎn)品信息架構(gòu)確定之后，綜合思維導(dǎo)圖的內(nèi)容和主要流程圖，開始頁面的布局設(shè)計(jì)，要確定以下內(nèi)容。

（1）頁面布局的總體結(jié)構(gòu)，包括一列布局、兩列布局、三列布局，以及幾行布局等。

（2）頁面的導(dǎo)航設(shè)計(jì)。網(wǎng)站的導(dǎo)航是采用水平導(dǎo)航還是垂直導(dǎo)航，或者是其他的一些導(dǎo)航方式，移動App的導(dǎo)航是放置在頂部還是底部，采用幾個(gè)標(biāo)簽導(dǎo)航，像猿題庫App采用的是底部標(biāo)簽導(dǎo)航，在頁面底部放置4個(gè)標(biāo)簽導(dǎo)航，如圖1.52所示。

（3）根據(jù)思維導(dǎo)圖和流程圖規(guī)劃出來的內(nèi)容，細(xì)分到具體頁面結(jié)構(gòu)來進(jìn)行設(shè)計(jì)，需要對每一個(gè)內(nèi)容塊的展示位置進(jìn)行布局，比如猿題庫App的練習(xí)模塊展示各個(gè)科目的導(dǎo)航設(shè)計(jì)，如圖1.53所示。對頁面內(nèi)容結(jié)構(gòu)的設(shè)計(jì)取決于設(shè)計(jì)人員對內(nèi)容編排的把握，不同的布局會產(chǎn)生不同的效果，可以參照已有成熟產(chǎn)品的內(nèi)容布局。

頁面布局設(shè)計(jì)

產(chǎn)品信息架構(gòu)確定之后，綜合思維導(dǎo)圖的內(nèi)容和主圖1.52猿題庫App標(biāo)簽導(dǎo)航

圖1.53猿題庫App布局圖1.52猿題庫App標(biāo)簽導(dǎo)航

圖1.53猿題庫App1.4.3低保真原型設(shè)計(jì)

通過思維導(dǎo)圖軟件確定產(chǎn)品的大致內(nèi)容，通過頁面架構(gòu)設(shè)計(jì)確定頁面總體布局、導(dǎo)航菜單及各個(gè)模塊后，就可以針對各個(gè)頁面進(jìn)行內(nèi)容設(shè)計(jì)，也就是低保真原型設(shè)計(jì)，可通過Axure原型設(shè)計(jì)工具遵循產(chǎn)品的總體結(jié)構(gòu)進(jìn)行，如圖1.54所示。

圖1.54猿題庫App低保真原型設(shè)計(jì)1.4.3低保真原型設(shè)計(jì) 通過思維導(dǎo)圖軟件確定產(chǎn)品的大致內(nèi)1.4.4原型評審

完成低保真原型設(shè)計(jì)之后，需要進(jìn)行原型評審。原型評審，對于設(shè)計(jì)人員來說可以是一場噩夢，每個(gè)評審人都有不同的偏好和側(cè)重點(diǎn)，開發(fā)人員可能更關(guān)注于容易實(shí)現(xiàn)，運(yùn)營人員希望有足夠的區(qū)域進(jìn)行推廣，視覺設(shè)計(jì)師注重美觀，產(chǎn)品經(jīng)理希望早點(diǎn)上線，這就需要設(shè)計(jì)人員在原型設(shè)計(jì)時(shí)考慮全面，設(shè)計(jì)方案要有說服力。

1.4.4原型評審 完成低保真原型設(shè)計(jì)之后，需要進(jìn)行原型評1.4.5高保真原型設(shè)計(jì)

高保真原型可以用于給上級匯報(bào)或者概念性產(chǎn)品。

將低保真原型經(jīng)過視覺設(shè)計(jì)師的制圖、切圖，即可制作出高保真原型，如圖1.55所示。

圖1.55猿題庫App高保真原型設(shè)計(jì)

1.4.5高保真原型設(shè)計(jì) 高保真原型可以用于給上級匯報(bào)或者1.1

什么是軟件原型1.2?AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.5小結(jié)

本章主要介紹了什么是軟件原型及AxureRP8的軟件界面，應(yīng)當(dāng)做到以下幾點(diǎn)。

（1）了解什么是軟件原型及軟件原型的分類，理解它們的優(yōu)缺點(diǎn)及各自的適用場合。

（2）學(xué)會AxureRP8軟件的安裝。

（3）認(rèn)識Axure的軟件界面，了解軟件界面上的8個(gè)區(qū)域及它們含義和功能。

（4）理解原型設(shè)計(jì)流程，并能進(jìn)行需求分析、頁面架構(gòu)設(shè)計(jì)、低保真原型設(shè)計(jì)、原型評審及高保真原型設(shè)計(jì)。

1.5小結(jié) 本章主要介紹了什么是軟件原型及AxureRP信息化高速發(fā)展的今天，從過去有軟件可以使用，到現(xiàn)在定制自己使用的軟件，用戶有了更多實(shí)現(xiàn)自己的想法和需求的方式，但是用戶往往并不能清晰和完整地表達(dá)自己的需求，而產(chǎn)品的設(shè)計(jì)原型恰恰能快速地挖掘出用戶的真實(shí)需求。信息化高速發(fā)展的今天，從過去有軟件可以使用，到現(xiàn)在定制自己使通過制作軟件產(chǎn)品的設(shè)計(jì)原型，向用戶演示并講解產(chǎn)品原型的使用，在演示過程中捕捉用戶的實(shí)際需求；項(xiàng)目組人員根據(jù)設(shè)計(jì)原型進(jìn)行溝通，明確軟件產(chǎn)品的目標(biāo)，可以大大提高項(xiàng)目組成員的工作效率，并降低溝通成本，如圖1.1。圖1.1通過原型設(shè)計(jì)預(yù)先展示產(chǎn)品效果通過制作軟件產(chǎn)品的設(shè)計(jì)原型，向用戶演示并講解產(chǎn)品原型的使用，1.1

什么是軟件原型1.2

AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.1什么是軟件原型軟件原型，可以理解成軟件的Demo，它并不是一個(gè)可以作為最終使用的軟件，而是利用某種物品（如紙、筆）或者某種工具（如Axure）快速地勾勒出的軟件的大致結(jié)構(gòu)，再添加一些交互效果，來模擬軟件的功能操作。原型大致可以分為3類：草圖原型、低保真原型和高保真原型。

123高保真原型是用來演示產(chǎn)品效果的Demo，在視覺上與真實(shí)產(chǎn)品一樣，體驗(yàn)上也幾乎接近真實(shí)產(chǎn)品，如圖1.4所示。

草圖原型低保真原型高保真原型

草圖原型，可以稱為紙面原型，能描述產(chǎn)品的大概需

求，

記錄瞬間靈感，如圖1.2所示。

低保真原型是根據(jù)需求或草圖原型，利用相關(guān)設(shè)計(jì)工具制作的簡單的軟件原型，如圖1.3所示。1.1什么是軟件原型軟件原型，可以理解成軟件的Demo，圖1.2草圖原型圖1.2草圖原型圖1.3低保真原型圖1.3低保真原型圖1.4高保真原型圖1.4高保真原型1.1

什么是軟件原型1.2

AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.2

AxureRP8軟件安裝 AxureRP是一款專業(yè)的快速原型設(shè)計(jì)軟件，是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，RP是RapidPrototyping（快速原型）的縮寫。AxureRP8的軟件圖標(biāo)如圖1.5所示。

圖1.5AxureRP8軟件圖標(biāo)1.2?AxureRP8軟件安裝 AxureRP是一1. 雙擊AxureRP-Pro-Setup.exe文件，打開安裝初始化界面，由于平臺語言的兼容性問題會出現(xiàn)亂碼，但并不影響軟件的安裝及使用，如圖1.6所示。

圖1.6AxureRP8開始安裝1. 雙擊AxureRP-Pro-Setup.exe文件，2. 在“LicenseAgreement”界面中勾選“IAgree”復(fù)選框，同意Axure安裝協(xié)議，單擊“Next”按鈕繼續(xù)安裝，如圖1.7所示。

圖1.7同意安裝協(xié)議2. 在“LicenseAgreement”界面中勾選“3. 在“SelectDestination”界面中選擇安裝存放路徑，可以使用默認(rèn)的安裝路徑，也可自定義安裝路徑，之后單擊“Next”按鈕進(jìn)行下一步，如圖1.8所示。

圖1.8選擇安裝路徑3. 在“SelectDestination”界面中選擇4. 在“ProgramShortcuts”界面中有兩個(gè)單選按鈕，“AllUsers”代表所有用戶都可以使用，

“CurrentUserOnly”代表只有自己可以使用，選擇第一個(gè)單選按鈕，單擊“Next”按鈕繼續(xù)安裝，如圖1.9所示。

圖1.9用戶使用權(quán)限4. 在“ProgramShortcuts”界面中有兩個(gè)5. 一直單擊“Next”按鈕，最后單擊“Finish”按鈕完成安裝，如圖1.10所示。

圖1.10完成安裝5. 一直單擊“Next”按鈕，最后單擊“Finish”1.1

什么是軟件原型1.2?AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.3認(rèn)識Axure軟件界面 Axure軟件界面大致可以分為8個(gè)區(qū)域，分別為菜單欄區(qū)域、工具欄區(qū)域、頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、工作區(qū)域、檢視區(qū)域、頁面概要區(qū)域，如圖1.11所示。

圖1.11軟件界面1.3認(rèn)識Axure軟件界面 Axure軟件界面大致可以分1.3.1菜單欄區(qū)域

菜單欄區(qū)域有文件、編輯、視圖、項(xiàng)目、布局、發(fā)布、團(tuán)隊(duì)、賬戶、幫助9個(gè)菜單項(xiàng)，包含了軟件的一些常規(guī)操作和功能，如圖1.12所示。

“文件”菜單（見圖1.13）：

（1）可以新建工程、打開工程及保存工程，這些操作可以使用快捷鍵或者工具欄快速操作按鈕完成；

圖1.12菜單欄區(qū)域圖1.13文件菜單選項(xiàng)1.3.1菜單欄區(qū)域 菜單欄區(qū)域有文件、編輯、視圖、項(xiàng)目、

（2）可以導(dǎo)入RP文件，新建團(tuán)隊(duì)項(xiàng)目、打開團(tuán)隊(duì)項(xiàng)目；

（3）可以進(jìn)行打印紙張尺寸設(shè)置，打印index頁面，導(dǎo)出index圖片；

（4）可以設(shè)置定時(shí)備份軟件原型，避免制作軟件原型丟失。

“編輯”菜單（見圖1.14）：

可以完成復(fù)制、剪切、粘貼、撤銷、重做等操作，也可以使用快捷鍵來完成這些操作，所以很少會使用這個(gè)菜單。

“視圖”菜單（見圖1.15）：

圖1.14編輯菜單選項(xiàng)圖1.15視圖菜單選項(xiàng) （2）可以導(dǎo)入RP文件，新建團(tuán)隊(duì)項(xiàng)目、打開團(tuán)隊(duì)項(xiàng)目；圖1.

（１）“工具欄”選項(xiàng)（見圖1.16），將工具欄區(qū)域劃分為基本工具欄和樣式工具欄兩類，可以通過勾選的方式控制工具欄區(qū)域內(nèi)容的顯示，同時(shí)提供自定義工具欄功能，工具欄內(nèi)容可以自行定義；

（２）“功能區(qū)”選項(xiàng)（見圖1.17），分為5個(gè)區(qū)域，即頁面區(qū)域、元件庫區(qū)域、母版區(qū)域、檢視區(qū)域、概要區(qū)域，可通過勾選的方式控制這些區(qū)域的顯示與隱藏效果，還提供開關(guān)左側(cè)功能欄和開關(guān)右側(cè)功能欄的功能；

圖1.16工具欄選項(xiàng)圖1.17功能區(qū)選項(xiàng) （１）“工具欄”選項(xiàng)（見圖1.16），將工具欄區(qū)域劃分為基

（３）“遮罩”選項(xiàng)（見圖1.18），通過勾選的方式來控制隱藏對象、母版、動態(tài)面板、中繼器、文本鏈接、熱區(qū)是否添加遮罩效果。

“項(xiàng)目”菜單（見圖1.19）：

（1）可對元件、頁面的樣式進(jìn)行編輯；

（2）具有自定義元件字段說明和頁面字段說明功能；

（3）具有添加全局變量功能。

圖1.18遮罩選項(xiàng)圖1.19項(xiàng)目菜單選項(xiàng) （３）“遮罩”選項(xiàng)（見圖1.18），通過勾選的方式來控制隱“發(fā)布”菜單（見圖1.20）：（1）可以進(jìn)行原型預(yù)覽，對預(yù)覽方式進(jìn)行設(shè)置，選擇打開瀏覽器方式和工具欄設(shè)置；（2）可以將原型發(fā)布到AxShare上面進(jìn)行托管；（3）以生成HTML文件的方式進(jìn)行原型發(fā)布；（4）生成需求規(guī)格說明書的Word文檔；（5）預(yù)覽和生成原型文件。

圖1.20發(fā)布菜單選項(xiàng)“發(fā)布”菜單（見圖1.20）：圖1.20發(fā)布菜單選項(xiàng)“團(tuán)隊(duì)”菜單（見圖1.21）：

可以創(chuàng)建團(tuán)隊(duì)項(xiàng)目和獲取團(tuán)隊(duì)項(xiàng)目，進(jìn)行多人協(xié)作。“賬戶”菜單（見圖1.22）：

可以進(jìn)行賬戶登錄和服務(wù)器代理設(shè)置。

圖1.21團(tuán)隊(duì)菜單選項(xiàng)圖1.22賬戶菜單選項(xiàng)“團(tuán)隊(duì)”菜單（見圖1.21）：圖1.21團(tuán)隊(duì)菜單選項(xiàng)圖1“幫助”菜單（見圖1.23）：（1）通過開始演示動畫選項(xiàng)，學(xué)習(xí)原型工具的使用，提供在線培訓(xùn)教學(xué)功能及進(jìn)入Axure論壇

功能；（2）通過管理授權(quán)完成注冊，獲得軟件使用的授權(quán)；（3）提供軟件檢查更新及提交軟件意見和軟件錯誤功能。

圖1.23幫助菜單選項(xiàng)“幫助”菜單（見圖1.23）：圖1.23幫助菜單選項(xiàng)1.3.2工具欄區(qū)域

工具欄區(qū)域包含有使用頻率最高的快捷工具。

我們在設(shè)計(jì)原型的過程中經(jīng)常會用到這些操作，理解工具欄的功能并掌握它的使用方法，可以提高制作原型的效率。

工具欄區(qū)域分為基本工具欄和樣式工具欄，同時(shí)提供自定義工具欄功能。

下面通過對兩個(gè)矩形元件的操作，熟悉一下工具欄的使用，如圖1.24所示。

圖1.24工具欄區(qū)域1.3.2工具欄區(qū)域 工具欄區(qū)域包含有使用頻率最高的快捷工1.基本工具欄

新建、打開、保存操作

新建、打開、保存快捷工具按鈕如圖1.25所示。

文件：新建一個(gè)工程項(xiàng)目，快捷鍵是Ctrl+N。

打開：打開一個(gè)已有的工程項(xiàng)目（只能打開rp類型的工程），快捷鍵是Ctrl+O。

保存：保存一個(gè)工程項(xiàng)目，快捷鍵是Ctrl+S。

復(fù)制：單擊這個(gè)快捷按鈕，可以復(fù)制選中的元件，它的快捷鍵是Ctrl+C。

剪貼板：可以粘貼復(fù)制的元件。單擊這個(gè)快捷按鈕，可以把復(fù)制的元件粘貼到工作區(qū)域，它的快捷鍵是Ctrl+V。

撤銷：單擊這個(gè)快捷按鈕可以撤銷上一步的操作，快捷鍵是Ctrl+Z。

重做：單擊這個(gè)快捷按鈕可以重做上一步的操作，快捷鍵是Ctrl+Y。

剪切：單擊這個(gè)快捷按鈕可以剪切選中的元件，快捷鍵是Ctrl+X。

圖1.25新建、打開、保存操作1.基本工具欄 新建、打開、保存操作

新建、打開、保存快捷實(shí)戰(zhàn)演練1. 在元件庫區(qū)域，拖曳兩個(gè)矩形元件到工作區(qū)域，并在矩形元件上分別雙擊，進(jìn)行重新命名，一個(gè)矩形命名為“矩形一”，另一個(gè)矩形命名為“矩形二”，單擊保存快捷按鈕或者使用Ctrl+S快捷鍵保存上面的操作，如圖1.26所示。

圖1.26拖曳矩形元件實(shí)戰(zhàn)演練1. 在元件庫區(qū)域，拖曳兩個(gè)矩形元件到工作區(qū)域，并2. 選中“矩形一”元件，利用Ctrl+C快捷鍵復(fù)制出同樣的一個(gè)元件，再利用Ctrl+V快捷鍵粘

貼，也可以利用工具欄上快捷按鈕操作，如圖1.27所示。

圖1.27復(fù)制矩形元件2. 選中“矩形一”元件，利用Ctrl+C快捷鍵復(fù)制出同樣的

選擇、連接、鋼筆、更多、縮放操作

元件的選擇、連接、鋼筆、邊界點(diǎn)、切割、裁剪、連接點(diǎn)、格式刷以及縮放操作的快捷工具按鈕如圖1.28、圖1.29所示。

圖1.28選擇、連接、鋼筆圖1.29更多 選擇、連接、鋼筆、更多、縮放操作

元件的選擇、連接、鋼筆、

選擇：用來選中工作區(qū)域中的元件，包括相交選中和包含選中，相交選中所選擇的區(qū)域只要和元件有接觸、有相交，這個(gè)元件就會呈現(xiàn)為選中狀態(tài)；而包含選中是把元件完全包含進(jìn)來，才會呈現(xiàn)為選中狀態(tài)。

連接：用來連接兩個(gè)元件。這個(gè)操作多用于繪制流程圖。

鋼筆：可以繪制出自定義的形狀。

縮放：設(shè)置工作區(qū)域的縮放比例，可以根據(jù)頁面內(nèi)容進(jìn)行調(diào)整。 選擇：用來選中工作區(qū)域中的元件，包括相交選中和包含選中，相

布局操作

布局操作用來設(shè)置頁面中元件的布局，包括設(shè)置元件頂層、底層、組合、取消組合、對齊、分布操作，其按鈕如圖1.30所示。

圖1.30布局操作按鈕

布局操作

布局操作用來設(shè)置頁面中元件的布局，包括設(shè)置元件頂

頂層、底層：將工作區(qū)域中的元件置于頂層操作和置于底層操作。

組合、取消組合：可以將不同元件設(shè)置為一個(gè)組合，這樣可以把組合的元件一起移動或者進(jìn)行其他操作；同時(shí)也可以將一個(gè)組合拆散為單獨(dú)的元件。

對齊：提供左對齊、左右居中、右對齊、頂部對齊、上下居中、底部對齊方式，如圖1.31所示。

分布：包括水平分布和垂直分布兩種分布方式，如圖1.32所示。

水平分布：單擊這個(gè)按鈕，可以讓選中的按鈕呈現(xiàn)為橫向均勻分布。

垂直分布：單擊這個(gè)按鈕，可以讓選中的按鈕呈現(xiàn)為縱向均勻分布。

頂層、底層：將工作區(qū)域中的元件置于頂層操作和置于底層操作。圖1.31對齊方式圖1.32分布方式圖1.31對齊方式圖1.32分布方式

鎖定、開關(guān)功能欄、發(fā)布、登錄操作

鎖定元件、取消鎖定元件、開關(guān)左側(cè)功能欄、開關(guān)右側(cè)功能欄、預(yù)覽、共享、發(fā)布、登錄操作按鈕，如圖1.33所示。

圖1.33鎖定、發(fā)布操作 鎖定、開關(guān)功能欄、發(fā)布、登錄操作

鎖定元件、取消鎖定元件、

鎖定、取消鎖定：將工作區(qū)域中的元件鎖定，變?yōu)椴豢梢砸苿樱部梢匀∠i定，進(jìn)行移動。

開關(guān)功能欄：包括開關(guān)工作區(qū)域左側(cè)的功能欄和工作區(qū)域右側(cè)的功能欄。

預(yù)覽：以原型預(yù)覽的方式在瀏覽器中顯示，不生成本地原型文件。

共享：通過共享的方式創(chuàng)建團(tuán)隊(duì)項(xiàng)目，發(fā)布到AxShare上面。

發(fā)布：可以通過預(yù)覽的方式發(fā)布，也可以通過生成本地文件的形式發(fā)布。

登錄：提供登錄的快捷按鈕。 鎖定、取消鎖定：將工作區(qū)域中的元件鎖定，變?yōu)椴豢梢砸苿?，?.樣式工具欄

樣式工具欄可用來給文本內(nèi)容或者元件邊框設(shè)置樣式，可以設(shè)置文本內(nèi)容顏色、字號、字體，也可以給元件邊框設(shè)置樣式，如圖1.34所示。

圖1.34樣式工具欄2.樣式工具欄 樣式工具欄可用來給文本內(nèi)容或者元件邊框設(shè)置

：填充背景顏色，同樣單擊下三角可以選擇要填充的顏色。

：設(shè)置外部陰影，勾選陰影復(fù)選框，讓它生效，在這里可以設(shè)置陰影的偏移位置和模糊程度，并且可以設(shè)置陰影的顏色。

：設(shè)置元件邊框的顏色，單擊下三角，彈出框可用來選擇顏色。

：設(shè)置元件線寬，單擊下三角，彈出框可用來選擇邊框的寬度。

：設(shè)置元件的線條樣式，單擊下三角，彈出框可用來選擇線條樣式，實(shí)線或虛線。

：可以設(shè)置水平線元件和垂直線元件的箭頭樣式。

：填充背景顏色，同樣單擊下三角可以選擇要填充的顏色。實(shí)戰(zhàn)演練1. 單擊矩形一元件，將其邊框編輯為紅色、粗線、打點(diǎn)式線條；將矩形二編輯成藍(lán)色背景，紅色外部陰影，如圖1.35所示。

圖1.35編輯矩形一和矩形二

實(shí)戰(zhàn)演練1. 單擊矩形一元件，將其邊框編輯為紅色、粗線、打點(diǎn)2. 將矩形二的文本字體設(shè)置為華文琥珀，字體類型設(shè)置為BoldOblique，字號設(shè)置為28，添加粗體、斜體、下劃線設(shè)置，字體顏色設(shè)置為黃色，水平位置靠左對齊，垂直位置頂部對齊，如圖1.36所示。

圖1.36矩形二字體設(shè)置2. 將矩形二的文本字體設(shè)置為華文琥珀，字體類型設(shè)置為Bol3. 將矩形二元件的x值設(shè)置為360，y值設(shè)置為80；寬度w值設(shè)置為240，h值設(shè)置為100，如圖1.37所示。

圖1.37編輯元件的位置和大小3. 將矩形二元件的x值設(shè)置為360，y值設(shè)置為80；寬度w3.自定義工具欄

工具欄里有很多快捷按鈕，有一些按鈕是經(jīng)常會用到的，有一些按鈕可能很久都不會用到一次，這時(shí)可以自定義工具欄，在自定義工具欄里選擇顯示什么快捷按鈕。

單擊視圖菜單下工具欄選項(xiàng)，選擇自定義工具欄，如圖1.38所示。

圖1.38自定義工具欄3.自定義工具欄 工具欄里有很多快捷按鈕，有一些按鈕是經(jīng)常1.3.3頁面區(qū)域

頁面區(qū)域是用來顯示軟件頁面的，從這里可以了解到軟件的大致結(jié)構(gòu)，有哪些頁面，以及頁面之間的關(guān)系。

頁面區(qū)域采用樹狀結(jié)構(gòu)來顯示頁面，以index頁為樹的根節(jié)點(diǎn)，可以對頁面進(jìn)行增加、移動、刪除等操作來管理軟件原型的頁面，如圖1.39所示。

圖1.39頁面區(qū)域1.3.3頁面區(qū)域 頁面區(qū)域是用來顯示軟件頁面的，從這里可1.3.4元件庫區(qū)域

元件庫區(qū)域包含了制作原型需要的一些基礎(chǔ)元件，AxureRP8中原型設(shè)計(jì)工具默認(rèn)包含線框圖元件庫和流程圖元件庫、圖標(biāo)元件庫。

線框圖元件庫里提供了40種線框圖元件，常用的有圖片、文本標(biāo)簽、矩形、占位符、水平線、垂直線、文本框、下拉列表框、復(fù)選框、單選按鈕、提交按鈕，如圖1.40所示。

圖1.40線框圖元件1.3.4元件庫區(qū)域 元件庫區(qū)域包含了制作原型需要的一些基

流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文件、角色、數(shù)據(jù)庫等，如圖1.41所示。

圖標(biāo)元件庫里提供了各種各樣的圖標(biāo)，比如箭頭、電池、統(tǒng)計(jì)圖標(biāo)等，如圖1.42所示。

圖1.41流程圖元件圖1.42圖標(biāo)元件 流程圖元件庫里提供了13種流程圖元件，有各種圖形、圖片、文1.3.5母版區(qū)域

母版區(qū)域用來設(shè)計(jì)一些共用、復(fù)用的區(qū)域，如圖1.43所示，如網(wǎng)站尾部版權(quán)區(qū)域，可能每個(gè)頁面都會用到版權(quán)信息，也可以設(shè)計(jì)導(dǎo)航菜單，如移動App的底部標(biāo)簽導(dǎo)航，在母版中設(shè)計(jì)一次，在其他頁面可直接引用，達(dá)到共用、復(fù)用的效果。

圖1.43母版區(qū)域1.3.5母版區(qū)域 母版區(qū)域用來設(shè)計(jì)一些共用、復(fù)用的區(qū)域，1.3.6工作區(qū)域

工作區(qū)域是用來繪制原型的畫布。在這個(gè)區(qū)域里完成原型的設(shè)計(jì)，就像畫畫時(shí)在畫布上盡情繪制，如圖1.44所示。

圖1.44工作區(qū)域1.3.6工作區(qū)域 工作區(qū)域是用來繪制原型的畫布。在這個(gè)區(qū)1.3.7檢視區(qū)域

檢視區(qū)域是用來設(shè)計(jì)頁面或者元件的樣式和交互效果的，可以設(shè)置屬性，如添加頁面交互效果，頁面載入時(shí)觸發(fā)事件、窗口尺寸改變時(shí)觸發(fā)事件、窗口滾動時(shí)觸發(fā)事件，以及在更多事件里還提供許多其他的事件，如圖1.45所示。

圖1.45屬性設(shè)置1.3.7檢視區(qū)域 檢視區(qū)域是用來設(shè)計(jì)頁面或者元件的樣式和

在檢視區(qū)域中可以填寫頁面或者元件注釋，自定義注釋的名稱，如圖1.46所示。

還可以設(shè)計(jì)頁面、元件的樣式，比如頁面在瀏覽器中顯示的對齊方式是居中對齊還是居左對齊，頁面的背景色或者背景圖片，還可以設(shè)置草圖的效果，針對元件設(shè)置禁用、選中等屬性，也可以給元件添加樣式，設(shè)置元件的位置和大小、選擇元件的樣式，以及字體、邊框線、圓角半徑、對齊方式等，如圖1.47所示。

在檢視區(qū)域中可以填寫頁面或者元件注釋，自定義注釋的名稱，如圖1.46說明圖1.47樣式圖1.46說明圖1.47樣式1.3.8頁面概要區(qū)域

頁面概要區(qū)域用來管理頁面上使用的元件，可以查看頁面上使用了哪些元件及管理這些元件，比如可以管理動態(tài)面板，增加動態(tài)面板、移動動態(tài)面板及刪除動態(tài)面板等操作，如圖1.48所示。

圖1.48頁面概要區(qū)域1.3.8頁面概要區(qū)域 頁面概要區(qū)域用來管理頁面上使用的元1.1

什么是軟件原型1.2?AxureRP8軟件安裝1.3

認(rèn)識Axure軟件界面1.4

原型設(shè)計(jì)流程1.5

小結(jié)1.1?什么是軟件原型1.2?AxureRP8軟件1.4原型設(shè)計(jì)流程 1.4.1需求分析

一般情況下，需求分析主要是由產(chǎn)品經(jīng)理或者需求分析師來完成，但是設(shè)計(jì)師最好也參與到前期需求分析的過程中，這樣就可以和產(chǎn)品經(jīng)理對需求有一致的理解，達(dá)成一致的意見。

（1）可以通過用戶調(diào)研的方式獲取用戶的需求，調(diào)研的方式有很多，如調(diào)查報(bào)告、訪談等。

（2）可以進(jìn)行競品分析，分析競品的界面樣式、操作流程、主要任務(wù)流程及用戶的需求，不能把競品的東西直接搬過來使用，有