2.3　左側面板

2.3.1　站點地圖

站點地圖指用來增加、刪除和組織管理原型的頁面。在原型制作中，一個原型至少會包含一個頁面，如果產品很復雜，涉及多個模塊和多個頁面，可以通過添加“文件夾”和“子頁面”來組織該原型頁面，如圖2-14所示。

圖2-14

2.3.2　元件庫

Axure默認提供的元件庫里包含4類元件，即基本元件、表單元件、菜單和表格、標記元件，如圖2-15所示。

下面，介紹一些常用的元件。

◇基本元件

矩形：分為“有邊框”和“無邊框”兩種。

橢圓形：嚴格來說叫圓形，因為將橢圓形拖動到設計區域時其默認的也是圓形，只是在具體操作時可以調整其寬度和高度罷了。

圖片：在Axure操作中大多數情況下并不是從元件庫里拖動某個元件到設計區域，因為現在很多軟件都帶有截圖功能，將截好的圖片在Axure的設計區域直接粘貼后就可以作為圖片使用了，同時在具體操作中也可以雙擊粘貼進去的圖片，然后打開對應窗口重新選擇圖片。

圖2-15

占位符：在制作原型時，當還不確定界面上對應位置應該放什么時，或者還不想詳細設置，可以用一個占位符來代替。

按鈕：包括3種常用按鈕，即按鈕、主要按鈕和鏈接按鈕。其中主要按鈕的功能是在原型界面上按Enter鍵時，會直接響應這個主要按鈕上的事件。

熱區：是指可以響應事件的一塊區域，在界面上不會顯示。例如，針對一張效果圖里面一個按鈕，可以在按鈕位置放一個熱區，然后添加事件處理。這樣就避免需要把按鈕從效果圖上切下來后再處理的麻煩。

動態面板：一個非常重要的元件（詳細介紹見“第8章動態面板的設置與應用”）。它就像一個容器，并帶有“分層”管理功能，在同一時刻只能顯示其中一個層，且每一層可以容納不同的內容。

◇表單元件

表單元件的界面涉及的內容包括文本框、下拉列表框、列表框、單選按鈕和復選按鈕等，這些內容都比較常見，所以這里也就不再過多贅述。

◇菜單和表格元件

在表現一些二維數據時，可以用“表格”功能來表示，其使用方法類似于Excel（全稱Microsoft Office Excel）表格制作，在制作時可以設置每個單元格的樣式。

◇標記元件

一組用來做標記的，給元件添加說明的工具。在Axure操作中，當默認的系統元件不能滿足我們的原型設計需要時，如在系統元件中沒有Android或iOS系統的元件，可以選擇“創建元件庫”功能，如圖2-16所示。這樣就可以設計自己的元件庫了，可以極大地豐富Axure元件的多樣性。

圖2-16

提示

網絡上尤其是Axure官方社區有很多第三方免費元件庫可供下載，相關資源可詳細查閱本書附錄。

2.3.3　母版庫

母版是用戶自定義的一組元件，將它轉成母版的目的是一次性設計，多次重復使用，避免無謂的勞動付出和工作時間上的浪費。另外，還有一個好處是利用母版可以預先設計好元件的位置，當將母版文件拖動到“設計區域”時，會自動將該位置設定在“鎖定”狀態，如此也就不用重復思考把它放在哪個位置會比較合適了，該方式常用在頁面上公共部分的設計中。

以下面的“導航菜單”為例，將它固定在設計區域距左上角（10，10）的位置，選擇“導航欄”內的指定元件內容，并單擊鼠標右鍵，在彈出的菜單中選擇“轉換為母版”選項，并將“拖放行為”設置為“固定位置”，如圖2-17所示。

雙擊“新母版2”進入編輯狀態，選擇全部元件，然后移動到設計區域（10，10）的位置，關閉母版編輯窗口，并從母版庫里拖動“新母版2”到設計區域，此時可以發現“母版”位于（10，10），并且邊框呈現為“紅色虛線”狀態，這就意味著母版被自動固定在了界面設計區域（10，10）的位置，無法操作，如圖2-18所示。

圖2-17

圖2-18