《AxureRP9網(wǎng)站與App原型設(shè)計》教學(xué)教案-03用Axure元件庫搭積木

第3章用Axure元件庫搭積木課時內(nèi)容用Axure元件庫搭積木課時6教學(xué)目標(biāo)掌握線框圖、流程圖元件的含義和使用，學(xué)會載入元件庫和自定義元件庫教學(xué)重點線框圖、流程圖元件的含義和使用教學(xué)難點線框圖、流程圖元件的含義和使用教學(xué)設(shè)計1.教學(xué)思路：通過實例引入元件的概念；通過多媒體演示和實機操講解元件庫的使用；通過個人簡歷表實戰(zhàn)進行各類元件的綜合應(yīng)用。2.教學(xué)手段：多媒體+計算機3.教學(xué)資料：教材、多媒體課件教學(xué)內(nèi)容AxureRP9默認內(nèi)置了線框圖元件庫、流程圖元件庫、圖標(biāo)元件庫，除了使用內(nèi)置的元件庫，也可以載入第三方元件庫以及自定義元件庫。用元件“搭積木”3.1繪制線框圖所用的元件AxureRP9原型設(shè)計軟件里默認內(nèi)置39種線框圖元件，分為4類：基本元件有20種，表單類元件有6種，菜單|表格元件有4種，標(biāo)記元件有9種。標(biāo)記元件菜單|表格元件表單元件基本元件標(biāo)記元件菜單|表格元件表單元件基本元件線框圖元件庫3.1.1基本元件的使用基本元件包括矩形1元件、矩形2元件、矩形3元件、橢圓形元件、圖片元件、占位符元件、按鈕元件、主要按鈕元件、鏈接按鈕元件、一級標(biāo)題元件、二級標(biāo)題元件、三級標(biāo)題元件、文本標(biāo)簽元件、文本段落元件、水平線、垂直線元件、熱區(qū)元件、動態(tài)面板元件、內(nèi)部框架元件、中繼器元件。最后3個元件，由于使用比較復(fù)雜，交互效果豐富，使用頻率非常高，后面的章節(jié)將詳細介紹。基本元件1.矩形元件和占位符元件、橢圓形元件的使用矩形元件和占位符元件可以用來做很多工作，在本質(zhì)上這兩種元件沒有太大的區(qū)別，這兩種元件都可以用來制作一個橫向、縱向的菜單，或者制作一個背景圖。這兩種元件的區(qū)別在于占位符元件更強調(diào)占位作用，如果想表達頁面區(qū)域某個位置放什么，可以放一個占位符，清晰明了表達該區(qū)域的含義。橢圓形元件的使用和矩形元件的使用方式一樣，只不過形狀不同。實戰(zhàn)實戰(zhàn)演練（1）“矩形1”元件是白色（#FFFFFF）背景、“矩形2”元件是淺灰色（#F2F2F2），“矩形3”元件是灰色（#E4E4E4）背景，根據(jù)不同背景顏色需求，使用不同矩形元件。拖曳“矩形3”到工作區(qū)域，將其高度設(shè)置為300，“矩形3”元件可以作為背景圖使用。制作灰色背景圖（2）矩形元件可以設(shè)計成各種各樣的形狀，如果想把上圖中的正方形灰色背景，制作成圓形的灰色背景，在正方形背景圖上右鍵單擊，在彈出的快捷菜單中選擇形狀命令，會彈出用矩形可以制作的各種形狀，選中圓形圖標(biāo)，原正方形背景就變?yōu)橐粋€圓形灰色背景。調(diào)整形狀除了圓形，可以根據(jù)自己需要，把矩形元件調(diào)整為其他形狀，比如向上三角形、五角星、水滴、方括號等形狀。（3）利用“矩形1”元件制作導(dǎo)航菜單，拖曳4個“矩形1”元件到工作區(qū)域，將其水平放置，分別雙擊4個元件重命名為“菜單一”“菜單二”“菜單三”“菜單四”。使用Ctrl+A組合鍵，全選4個矩形元件，通過工具欄按鈕設(shè)置每個矩形元件的高度為40，寬度為100。矩形元件制作導(dǎo)航菜單2.圖片元件的使用圖片元件，可以用來進行圖片占位。在設(shè)計軟件原型的時候，往往會包含一些圖片的展示，包括圖標(biāo)或者某個商品圖片，但是還沒有想好應(yīng)該放什么圖片，或者等待UI設(shè)計人員來設(shè)計圖片，這時可以使用圖片元件，來表達在軟件的某個區(qū)域要使用圖片來顯示。實戰(zhàn)實戰(zhàn)演練（1）拖曳“圖片”元件到工作區(qū)域，雙擊圖片，選擇要插入的圖片，如果插入的圖片過大，Axure會彈出提示對話框“圖片太大會導(dǎo)致程序運行緩慢，是否進行優(yōu)化？”，如圖3.8所示。圖像太大提示（2）在對話框中，單擊“是”按鈕，對圖片進行優(yōu)化，降低圖片的畫質(zhì)。否則圖片將以原質(zhì)量顯示。插入圖片（3）調(diào)整圖片的尺寸大小有兩種方式：一種是在圖片上單擊，圖片出現(xiàn)邊框，通過上下左右拖動邊框調(diào)整圖片尺寸；另一種方式是在工具欄的W和H框里設(shè)置圖片的大小，調(diào)整其他元件的尺寸大小也是同樣的方式。調(diào)整圖片尺寸大?。?）Axure提供分割圖像功能，在圖片上右鍵單擊選擇分割圖像命令，可以對選中的圖片進行分割操作，包括十字切割、橫向切割、縱向切割3種切法。分割圖像當(dāng)僅需要圖片的某一區(qū)域或者某一部分的時候，可以使用分割圖像功能，把想要的區(qū)域分割出來。3.按鈕元件的使用按鈕元件分為按鈕元件、主要按鈕元件以及鏈接按鈕元件，根據(jù)需求在不同場合使用不同按鈕元件。按鈕元件4.標(biāo)題元件的使用標(biāo)題元件可以用來作為一段文字的標(biāo)題，也可以用來作為某個區(qū)域的說明文字，一般設(shè)計簡歷的時候，常把個人信息、教育經(jīng)歷、工作經(jīng)驗這類文字加粗起強調(diào)作用，這時就可以使用標(biāo)題元件。Axure提供一級標(biāo)題、二級標(biāo)題、三級標(biāo)題3個元件，一級標(biāo)題元件是32號字、加粗、黑色（#333333）；二級標(biāo)題元件是24號字、加粗、黑色（#333333）；三級標(biāo)題元件是18號字、加粗、黑色（#333333）。一級標(biāo)題、二級標(biāo)題和三級標(biāo)題元件5.文本標(biāo)簽元件和文本段落元件的使用文本標(biāo)簽元件是單行文本元件，文本段落元件是文本域元件，如果只有一行文本選擇文本標(biāo)簽元件，如果有多行文本可以使用文本段落元件。文本標(biāo)簽和文本段落元件6.水平線和垂直線元件的使用水平線和垂直線是兩個很靈活的元件，用它們可以設(shè)置一條水平線或者垂直線.可以利用工具欄快捷按鈕編輯這兩個元件的顏色、線框、線條樣式和箭頭方向。水平線和垂直線元件7.熱區(qū)元件的使用在購物網(wǎng)站上，經(jīng)?？梢钥吹浇M合裝或者套裝的商品，它們是一體圖片，單擊商品圖片顯示的是整體的商品信息，如果只想知道上衣的商品信息，或者褲子的商品信息，可以使用熱區(qū)元件。分別在上衣和褲子上添加熱區(qū)元件，也就是增加兩個單擊的錨點，單擊熱區(qū)元件就可以顯示不同的商品信息。熱區(qū)元件熱區(qū)元件用到的頻率非常高，特別是在做一些移動App的時候。表單型元件的使用微課視頻3.1.2表單元件的使用表單型元件的使用微課視頻表單元件是在設(shè)計表單時候經(jīng)常會用到的元件，比如設(shè)計登錄表單、注冊表單等表單，就可以使用表單型元件來設(shè)計表單。表單型元件包括文本框元件、文本域元件、下拉列表元件、列表框元件、復(fù)選框元件、單選按鈕元件。表單元件1.文本框元件和文本域元件的使用文本框元件用于收集表單內(nèi)容，其形式為單行輸入文本框；文本域元件，可以實現(xiàn)多行文本的輸入。文本框和文本域元件在登錄網(wǎng)站的時候，經(jīng)常會在輸入框里看到“請輸入用戶名、手機號或者郵箱”等提示信息。文本框元件同樣可以填寫提示信息，在文本框輸入內(nèi)容時，提示文字會自然消失。右鍵單擊文本框遠見，在彈出的菜單里可以設(shè)置文本框的輸入類型，可以設(shè)置成文本、密碼、郵箱、數(shù)字等類型。文本框類型在文本框里可以設(shè)置提示文字的樣式，比如提示文字為“請輸入用戶名”，字體顏色為淺灰色（#CCCCCC），可以在檢視區(qū)域選擇交互面板，在提示選項組中設(shè)置文字樣式，在提示屬性里設(shè)置提示文字。提示樣式及提示文字可以設(shè)置文本框元件可以輸入的最大文字數(shù)，同時也可以設(shè)置文本框為只讀或者禁用，可以根據(jù)自己的需要來設(shè)置。文本框?qū)傩栽跈z視面板同樣可以設(shè)置文本域元件的提示文本、只讀屬性和禁用屬性，但是不能設(shè)置文本域內(nèi)的輸入類型以及最大文字數(shù)。文本域元件設(shè)置2.下拉列表元件和列表框元件的使用下拉列表元件，是經(jīng)常用到的下拉菜單，它只能顯示一個下拉菜單選項；而列表框元件，是可以顯示多個下拉菜單選項的元件。如果頁面區(qū)域有限，可以使用下拉菜單元件；如果頁面區(qū)域比較大，僅放置一個下拉列表，會空留很多地方，頁面整個布局不美觀，就可以使用列表框元件。實戰(zhàn)演練下拉實戰(zhàn)演練（1）拖曳一個“下拉列表”元件到工作區(qū)域，雙擊此元件，彈出編輯下拉列表對話框，單擊“添加”按鈕新增一個菜單選項，單擊菜單選項可以對其重新命名，將其命名為“北京”，再新增一個下拉選項，命名為“上?！?。編輯下拉列表對話框（2）單擊“上移”和“下移”按鈕可以調(diào)整下拉菜單選項的順序，單擊“刪除”按鈕可以刪除選項。調(diào)整選項順序和刪除選項（4）單擊“編輯多項”按鈕，彈出編輯多項對話框，每行代表一個下拉菜單選項。添加多個選項對話框（5）如果想把某個選項作為默認顯示的選項，只需要在復(fù)選框前面勾選，默認顯示的就是當(dāng)前勾選的下拉菜單選項。設(shè)置默認選項（6）列表框的操作方式和下拉列表的操作方式一樣，單擊“添加”按鈕同樣可以新增菜單選項，可以向上移動、向下移動、刪除一個、或者多個下拉菜單選項，但是它允許默認允許選中多個選項。列表框設(shè)置默認選項3.復(fù)選框元件和單選按鈕元件的使用如果希望允許選擇多個選項，這時可以使用復(fù)選框元件，如果每次只想選擇一個選項，可以使用單選按鈕元件。復(fù)選框和單選按鈕元件3.1.3菜單|表格元件的使用菜單|表格元件包括樹元件、表格元件、水平菜單元件和垂直菜單元件。菜單|表格元件1.樹元件的使用可以用樹元件來設(shè)計樹結(jié)構(gòu)或其他有層次的結(jié)構(gòu)，例如頁面區(qū)域的頁面結(jié)構(gòu)。新增子節(jié)點、調(diào)整樹的層級關(guān)系以及刪除子節(jié)點等等操作都是通過右鍵菜單里的選項來設(shè)置。樹元件2.表格元件的使用表格元件，用來顯示數(shù)據(jù)的記錄，是使用頻率比較高的一個元件，它通過右鍵菜單里的選項來完成操作。表格元件3.水平菜單和垂直菜單元件的使用水平菜單和垂直菜單元件，是用來制作導(dǎo)航菜單的元件，它可以制作橫向或縱向的菜單元件，它通過右鍵菜單里的選項來完成設(shè)計操作的。水平和垂直菜單元件3.1.4標(biāo)記元件的使用標(biāo)記元件包括快照元件、水平箭頭元件、垂直箭頭元件、便簽1元件、便簽2元件、便簽3元件、便簽4元件、圓形標(biāo)記元件和水滴標(biāo)記元件。標(biāo)記元件快照元件，是把頁面通過快照的方式完整地顯示出來。例如在index頁面，分別添加一級標(biāo)題、二級標(biāo)題、三級標(biāo)題元件；然后在page1頁面里拖曳快照元件并雙擊，引用index頁面；可以看到快照元件里顯示的是index頁面的內(nèi)容，并且可以調(diào)整快照元件顯示的頁面大小?？煺赵郊^元件和垂直箭頭元件經(jīng)常被用作水平或垂直方向上的箭頭；便簽元件經(jīng)常用來給頁面添加便簽說明；圓形標(biāo)記和水滴標(biāo)記常被用作標(biāo)記。3.2繪制流程圖所用的元件AxureRP9原型設(shè)計軟件默認內(nèi)置37種流程圖元件，常用的元件有矩形、菱形、文件、括弧、半圓形、三角形、梯形、圓形、六邊形、平行四邊形、角色、數(shù)據(jù)庫、快照等元件。流程圖元件庫流程圖元件都代表著自己的特點和意義，在使用流程圖元件之前，要知道常用的元件所代表的意思，才能畫出規(guī)范的流程圖。矩形元件：代表要執(zhí)行的處理動作，用作執(zhí)行框。圓角矩形元件：代表流程的開始或者結(jié)束，用作起始框或者結(jié)束框。菱形元件：代表決策或者判斷，用作判別框。文件元件：代表一個文件，用作文件的輸入或者輸出。括弧元件：代表說明一個流程的操作或者特殊行為。平行四邊形元件：代表數(shù)據(jù)的操作，用作數(shù)據(jù)的輸入或者輸出操作。角色元件：代表流程的執(zhí)行角色，角色可以是人也可以是系統(tǒng)。數(shù)據(jù)庫元件：代表系統(tǒng)的數(shù)據(jù)庫?？煺赵河脕盹@示其他頁面內(nèi)容。實戰(zhàn)實戰(zhàn)演練大家在上學(xué)的時候，經(jīng)常會參加一些在線考試，下面使用流程圖元件來繪制考試的過程。在線考試系統(tǒng)流程圖（1）把當(dāng)前工程保存起來，將其命名為“在線考試系統(tǒng)流程圖”，把index頁面重新命名為“在線考試系統(tǒng)流程圖”，刪除其他頁面。選擇流程圖元件庫，拖曳一個“圓角矩形”元件作為流程的開始，將圓角矩形的文本內(nèi)容重新命名為“開始”。選擇流程圖元件庫（2）拖曳一個“角色”元件到工作區(qū)域，代表參加考試的人員。選擇連接模式，將圓角矩形元件和角色元件連接起來，可以給連接線添加向右的箭頭并設(shè)置樣式。然后拖曳一個“矩形”元件到工作區(qū)域，將其文本內(nèi)容重新命名為“訪問網(wǎng)站”，用連接線把角色元件與矩形元件連接起來。訪問網(wǎng)站（3）接著進行登錄網(wǎng)站設(shè)置。拖曳一個“矩形”元件到工作區(qū)域，將其命名為“登錄網(wǎng)站”，登錄時，需要輸入用戶名和密碼，系統(tǒng)會將用戶名和密碼與數(shù)據(jù)庫里的信息比對，來決定用戶是否能登錄到系統(tǒng)里，用連接線把“訪問網(wǎng)站”和“登錄網(wǎng)站”連接起來。登錄網(wǎng)站（4）拖曳一個“數(shù)據(jù)庫”元件到工作區(qū)域，用其來代表數(shù)據(jù)庫。將登錄時輸入的用戶名和密碼與數(shù)據(jù)庫進行比對，比對完成后數(shù)據(jù)庫會返回用戶能否登錄的信息，這是一個雙向的操作，需要一個雙向箭頭。數(shù)據(jù)庫（5）拖曳一個“菱形”元件到工作區(qū)域，用作登錄的驗證。登錄驗證有兩種情況，驗證通過和驗證不通過。如果用戶名和密碼都輸入正確，就可以登錄到系統(tǒng)里進行在線考試，拖曳一個矩形元件，將其文本內(nèi)容重命名為“開始考試”；如果登錄校驗失敗，就需要重新登錄。登錄驗證（6）考試完需要提交試卷。拖曳一個“矩形”元件到工作區(qū)域，將其文本內(nèi)容重命名為“提交試卷”，然后添加一段說明文字，使用“括弧”元件加以說明：“如果考試時間大于120分鐘，系統(tǒng)將自動提交試卷”。提交試卷（7）提交完試卷，系統(tǒng)會進行批改。拖曳一個“平行四邊形”元件到工作區(qū)域，將其作為數(shù)據(jù)的輸入，批改的時候也需要與數(shù)據(jù)庫打交道，因此其與數(shù)據(jù)庫的連接線也是雙向的。批改試卷（8）提交試卷后導(dǎo)出試卷。批改完試卷之后，需要輸出匯總的分數(shù)，同樣拖曳一個“平行四邊形”元件，將其作為數(shù)據(jù)的輸出，把它重命名為“匯總分數(shù)”，匯總分數(shù)后可以導(dǎo)出試卷，使用“文件”元件來代表導(dǎo)出的試卷，最后拖曳一個“圓角矩形”元件到工作區(qū)域，結(jié)束流程。結(jié)束流程（9）按F5鍵發(fā)布原型，通過繪制在線考試系統(tǒng)的流程圖，就可以清晰地表述在線考試系統(tǒng)的操作流程，這樣在繪制線框圖的時候，設(shè)計思路就會很清晰，可以高效、快速地繪制原型。發(fā)布原型3.3豐富的圖標(biāo)元件庫圖標(biāo)元件庫把常用的一些圖標(biāo)放置在圖標(biāo)元件庫里，包括通訊錄圖標(biāo)、箭頭指向圖標(biāo)、電池電量圖標(biāo)等。在繪制原型的時候，可以使用該元件庫里的圖標(biāo)，而不需要到其他地方去尋找。圖標(biāo)元件庫3.4載入元件庫和自定義元件庫Axure在元件管理區(qū)域默認提供線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫，但是在制作原型的過程中，這3類元件庫并不能完全滿足設(shè)計原型的需求。如果設(shè)計移動應(yīng)用軟件，需要使用Andriod元件庫或者iOS元件庫；設(shè)計其他的軟件，可能使用其他的元件庫；有時候甚至現(xiàn)成的元件庫還是不能滿足需求，需要自己來制作元件庫，即自定義元件庫。3.4.1載入元件庫在Axure元件區(qū)域，單擊選擇元件庫，可看到默認的線框圖元件庫、流程圖元件庫和圖標(biāo)元件庫，部分元件庫的名稱翻譯并不是很完善。元件庫如果設(shè)計移動應(yīng)用軟件，要用到Andriod元件庫，就需要添加一個Andriod元件庫到軟件里。實戰(zhàn)實戰(zhàn)演練（1）尋找元件庫有3種方式：第1種是到Axure官網(wǎng)上下載，官網(wǎng)上提供的元件庫都是以“.rplib”為后綴名的；第2種是網(wǎng)上搜索，很多原型論壇或者原型愛好者都會發(fā)布一些元件庫；第3種是可以自己制作元件庫，制作自己想要的、常用的元件。（2）單擊“添加元件庫”按鈕，彈出“文件選擇庫”窗口，找到事先準備好的元件庫，單擊打開，就可以將元件庫載入到軟件里。添加元件庫iOS8UIKit元件庫（3）還有一種載入元件庫的方式是，先關(guān)閉Axure軟件，然后打開Axure的安裝目錄，找到Libraries文件夾，把需要載入的元件庫直接拷貝到Libraries文件夾里，重新打開Axure軟件，可以看到IOS7_icon元件庫被載入到軟件中，如圖3.51、圖3.52所示。元件庫路徑iOS7_icon元件庫3.4.2自定義元件庫在設(shè)計原型的時候，如果在現(xiàn)有元件庫中沒有找到需要的元件，可以自定義元件庫。設(shè)計一些特別的或者常用的元件，例如增加、刪除、修改、搜索、紅燈、黃燈、綠燈圖標(biāo)，然后把它們放在自定義元件庫里。實戰(zhàn)實戰(zhàn)演練（1）選中iOS8UIKit元件庫，選擇“編輯元件庫”命令，進入元件的編輯區(qū)域，在這里可以自定義元件。編輯元件庫元件編輯區(qū)域（2）設(shè)計一個登錄的按鈕。新建“自定義元件庫”文件夾，在文件夾中建立一個名為“登錄”頁面，拖曳一個“矩形1”元件到工作區(qū)域，將其高度設(shè)置為50，圓角半徑設(shè)置為10，填充設(shè)置為綠色，文本內(nèi)容為“登錄”，文字顏色設(shè)置為白色，加粗，字號為20號。自定義登錄按鈕（3）再制作一個“搜索”元件，一般使用放大鏡來代表搜索。拖曳一個“圓形”元件到工作區(qū)域，將其高度和寬度都設(shè)置為30。再拖曳一個“矩形1”元件到工作區(qū)域，將其作為放大鏡的把手，調(diào)整矩形元件的大小，將其旋轉(zhuǎn)45度，并將矩形置于圓形元件的下層。自定義搜索按鈕（4）制作完兩個自定義元件后，關(guān)閉制作元件的頁面，制作好的元件就在自定義元件庫中顯示出來。自定義元件庫自定義元件使用自定義元件庫與其他元件庫一樣，可以繼續(xù)編輯，也可以被卸載，但線框圖元件庫、流程圖元件庫、圖標(biāo)元件庫不可被卸載。3.5實戰(zhàn)——制作“個人簡歷表”找工作的時候，需要投遞簡歷，現(xiàn)在很多的網(wǎng)站都支持在線投遞簡歷，例如前程無憂、智聯(lián)招聘。各個網(wǎng)站都需要專門的界面接收用戶的個人信息錄入。下面制作“個人簡歷表”，來設(shè)計簡歷的個人信息模塊。個人簡歷（1）打開AxureRP9原型設(shè)計工具軟件，將當(dāng)前工程保存為“個人簡歷表單”，將index頁面修改為“個人簡歷”；拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為704，高度設(shè)置為42，顏色填充為灰色（#D7D7D7），文本內(nèi)容命名為“個人簡歷”，32號字，加粗。個人簡歷標(biāo)題（2）拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為704，高度設(shè)置為483，作為邊框；拖曳一個“標(biāo)題2”元件到工作區(qū)域，將其文本內(nèi)容重新命名為“個人信息”，作為個人信息的標(biāo)題；拖曳一個“水平線”元件到工作區(qū)域，將其寬度設(shè)置為704，線條樣式設(shè)置為第4個樣式。個人信息標(biāo)題以及邊框（3）拖曳一個“矩形1”元件到工作區(qū)域，將其寬度設(shè)置為680，高度設(shè)置為416，顏色填充為灰色（#D7D7D7），作為個人信息的背景；拖曳一個“文本標(biāo)簽”元件到工作區(qū)域，將其文本內(nèi)容命名為“姓名”，字號為16號；拖曳一個“文本框”元件到工作區(qū)域，將其寬度設(shè)置為260，高度設(shè)置為25，作為姓名的輸入框。姓名輸入框（4）拖曳一個“標(biāo)簽”元件到工作區(qū)域，將其文本內(nèi)容命名為“性別”，字號為16號；拖曳兩個“單選按鈕”元件到工作區(qū)域，將其分別命名為“男”和“女”，同時選中這兩個單選按鈕，右鍵單擊，在彈出的快捷菜單中選擇“指定單選按鈕的組”命令，在彈出的“選項組”對話框的組名稱文本框中輸入“性別組”組”，這樣每次只能選中一個性別。性別設(shè)置（5）拖曳一個“文本標(biāo)簽”元件到工作區(qū)域，將其文本內(nèi)容命名為“出生日