AXURE RP快速化原型設計的課程設計與實踐

張暉 南京藝術學院工業設計學院

隨著移動互聯網等新興互聯網產業的高速發展，原型交互設計成為現下最為熱門的領域，小到一個手機的APP，大到一個國家的綜合信息平臺，幾乎涵蓋了我們的生活的各個方面。就連象蘋果、百度、谷歌、新浪、聯想這些互聯網巨頭每年都要引進大量引進此類人才。目前，比較主流的交互原型設計軟件有Axure、Justinmind、Mockups等，這些軟件都可以快速化的進行原型設計，這幾個軟件中，AXURE RP的能快速、高效的創建原型，支持多人協作設計和版本控制管理 等一系列的優勢，讓它成為業內人士認可度最好的軟件工具。不過這款軟件目前還沒有大規模的引入國內的信息交互的教學中。本文以此展開，探討原型設計課程中引入這樣一個軟件，在實際使用中的情況，總結經驗和教訓。

1 原型設計課程中引入 Axure RP

原型設計的范圍相當廣泛，任何東西都可以被認為是原型。從紙面上的圖表到復雜的電子裝置，從簡陋的紙板模型到精密加工而成的金屬裝置。總之，原型是任何一種幫助我們嘗試未知，不斷推進以達到目標的事物[1]。而交互原型主要是指開發產品在面市前的一個整體框架設計。開發的公司根據市場的調研了解客戶的需求，再根據這些需求制定開發的產品，不過由于開發產品的成本一般都比較高，所以在投入研發前，先把產品的效果圖、功能框架做出來，客戶確定后再進行下一步的產品研發，這就是所謂的原型設計。國內目前主要的原型設計教育還處在剛剛起步階段，所以引入一款強大而又簡單易學的快速化的原型設計工具就變得十分必要了。而Axure RP 這款軟件可以很好的解決這個問題。

Axure RP是美國Axure Software Solution公司的一個專業的快速原型設計工具，是目前比較主流的交互原型設計軟件,作為專業的原型設計工具，它能快速、高效的創建原型，同時支持多人協作設計和版本控制管理。多用于 APP、網站的前端開發，能快速創建APP 或 Web網站的線框圖、流程圖、原型和規格說明文檔，還能把APP 頁面的功能模塊、視覺元素、人機交互的形式和效果完整地展現出來，而且操作簡便、快速，易于上手，設計效率極高。

2 Axure RP軟件的特點

（1）Axure RP 操作界面的可視化強，有預覽選項，在預覽和生成原型時可以隨時觀看生成后的效果，方便設計者隨時進行調整。

（2）該軟件由于采用了圖像化的控件，大大降低了學習的難度，尤其是對初學者，上手較快，同時可以利用網上的資源進行自學，讓學生可以從大量基礎學習和繁瑣的代碼編輯解放出來盡情的施展創意的設計。

（3）該軟件兼容性好，小到一個手機的APP，大到一個國家的綜合信息平臺，幾乎都可以使用，應用的領域十分的廣泛。

（4）學習準入的門檻較低，初學者掌握基本控件的操作形成靜態頁面即可，學習者進一步則能運用個別的交互動態以及效果，并使用一些判斷條件等功能，熟練使用者則能理清復雜網站或系統的流程和整體交互，對函數和中繼器等技術運用自如，專注于布局結構的創新和優化。

3 課程的設計與實踐

3.1 課程目標

Axure RP雖然是一款不錯的原型設計開發軟件，不過要引入正式原型設計的課程中還是需要一個過程的，學生不僅要掌握該軟件的基本操作與使用，同時還要有一定的產品原型設計能力，所以具體運用這樣一個軟件平臺是需要有一定的基礎。例如：筆者所在的學校（南京藝術學院工業設計學院）的信息交互設計專業，在教學中具體引入Axure RP之前，是要學習一些前修課程，而且還要具有原型設計的能力，所以具體的使用是放到大四的上半學期。而在具體的教學中，主要的授課內容有兩個方面，一個是軟件的學習，目標是讓學生掌握 Axure 的主要操作方法，及能夠使用 Ax-ure 較快地設計出具備完整架構和效果的 APP 產品原型。二是進行具體的原型設計和開發，也就是實際的練習。所以在具體的課程目標的設置中，一定要明確不同階段的課程教學目標。

3.2 課程的學習內容與課程設置

目前Axure RP軟件主流是7.0和8.0版本，我們課程中使用的主要是7.0的版本（見圖1），這個版本相對而言普及率比較高，不過在具體的教學中還是要按照循序漸進的原則來實施。例如：筆者所在的學校（南京藝術學院工業設計學院）的信息交互設計專業，根據專業的教學大綱，分配到Axure RP課程的學時有40學時，為了最合理的運用課程的時間，我們把課程分為三個階段。

3.2.1 第一階段（大約15課時）：

第一階段主要以學習軟件操作，包括一些常用的命令鍵、組建、函數、和界面等。由于Axure RP操作界面和一些常使用的軟件如：Illustrator、Photoshop等軟件的操作界面非常象，大部分的命令鍵都是可視化很強的圖標，所以學生學習起來上手比較容易并且這個系列軟件不僅可以導入各種素材，同時還可以對各種素材進行編輯和繪制，所以學生比較容易上手。

AxureRP 主要的功能界面包括重新組織界面功能、自適應視圖、新增多個形狀、樣式、事件等，具體界面等（見圖2），主要分為八個部分。

圖1

圖2

（1）.主菜單和工具欄

這個面板主要執行常用操作，象文件的打開、保存、格式化控件、框架圖、原型生成和規格說明書等。

（2）站點地圖面板

站點地圖可以對交互原型設計的各個層級的原型界面（線框圖和流程圖）進行修改，如頁面的添加、刪除、重命名和組織頁面層次等等。

（3）控件面板

控件面板主要有線框圖控件和流程圖控件，可以直接導入各種各樣的控件，這些控件可以是軟件自帶的也可以導入外部的控件素材庫，甚至可以自己制作（*.rplib）文件，創建自己的部件庫。

（4）模塊面板

模塊面板是一個功能特殊面板，可以重復編輯組織模塊分類和層次，可進行模塊的添加、刪除、重命名等操作。

（5）線框圖工作面板

線框圖面板也叫頁面工作區，是進行原型設計的主要面板，可以設計原型的線框圖、流程圖、自定義部件、模塊等等，并且可以生成比較直接的結構框架圖，效果比較直觀。

（6）部件交互面板

部件交互是原型交互設計的主要功能面板，通過設置相應的用例和鏈接產生不同的交互效果，為原型提供各種各樣的交互效果。

（7）部件屬性和樣式面板

通過設置好的交互用例，可以增加具體頁面的信息內容，如導入文字、圖片、鏈接、動態顯示和隱藏等。

（8）頁面交互和注釋面板

可以對原型的頁面進行交互效果的添加和注釋等等。

2.2 Axure RP與原型設計

學習好了Axure RP 的基本操作后（一般是24個課時左右），就可以加入具體原型設計的內容。原型（Prototype）的本意原來的類型或模型設計，特指文學藝術作品中塑造人物形象所依據的現實生活中的人。我們在交互設計領域理解的原型主要是指根據需求，進行產品具體化的設計形成的樣品，是交互設計師的構想的最終體現。

原型設計可分為低保真原型和高保真原型，低保真是指采用線框圖的方式制作一個可以演示的產品Demo（樣品）,不是具體指哪一個功能和頁面，而是整個產品的完整原型。高保真原型是指在低保真原型的基礎之上加入了界面的藝術設計，使其看起來和真實的產品的相似度、還原度達到最貼近的產品完整原型。所以在的教學中我們只要完成低保真原型的內容就可以，在具體的原型設計中主要有以下幾個部分：

(1) 原型的結構框架設計

在原型設計開始之前需要準備好原型開發所需的基礎素材，例如，根據定義好的客戶需求內容先制作好原型的框架結構。利用常用的UI 元素如文本標簽、大括號、連接線、鍵盤和各種按鈕等元件，將原型的層次結構搭建出來，并根據搭建好的線框結構來設計各個頁面的界面效果包括界面布局、交互效果和鏈接等等。有了整體的框架布局（線框圖）就可以展開具體的分項設計了。

(2) 界面設計

在整體的布局結構搭建完成之后，就可以設計具體頁面版面設計了。版面主要包括，風格定義，頁面的功能布局，母板制作和分頁設計。

風格定義可以幫助設計者確定背景顏色、背景圖片、文本、視頻和鏈接等內容的繪制，確定好風格之后需要把原型的功能布局制定完成，這樣就可以制作頁面的母版。母版先設計好基本的底圖（這個部分基本是變），如一些基礎元素的素材它是固定在頁面上的，不會隨著頁面大小的變化而發生偏移或是改變，再確定好邊框，邊框需要慮播放屏幕的尺寸來確定包括的區域，這些設計工作可以使用Axure RP工作區下方的頁面樣式面板來完成。創建母版后，將其應用于頁面中，改動母版中的內容，則所有應用了母版的頁面對應內容也會改變，使用母版功能可提高工作效率。

母版設計好后就可以進行具體的分頁面設計，大部分頁面布局設計，都可以通過線框圖中的元件完成，如“圖片”、“文本”、“矩形”、“水平線”、“文本框”和“按鈕”等，這樣就可以把原型的各個分界面通過各種的互動方式進行鏈接。

(3) 交互功能

當布局框架和所有的頁面設計完成后，各個分界面需要通過交互元件（Axure RP的交互操作對象是元件）進行鏈接，當選中一個元件后，就可在右側的 “元件交互和注釋”面板中設置交互內容。在Axure RP中元件的交互內容是由用例組成，用例的內容也即動作，主要有鏈接、元件、動態面板、變量、中繼器以及雜項。通過新增用例，可為一個對象設置多個動作，動作的觸發事件也可有多種選擇。對于交互過程的設計，可在 “用例編輯器”對話框中完成，此對話框中提供了完善的向導。Axure RP的交互性與繪圖功能相結合，可實現各種模擬效果，如生物繁殖實驗的過程模擬、機械零件的物理模擬、計算機語言的程序模擬等。實現了將實驗室搬到理論課堂，使學生更加直觀的體驗知識形成的過程。

(4) 交互原型發布

交互原型完成后，Axure RP軟件可以直接發布成 Web頁的形式， 交互原型的工程文件中有多少個頁面，發布后就會產生多少個Html 文件，只要注意好對發布文件的管理，這種發布的方式非常便捷，同時因為是Html 文件，教學的成果演示也非常方便，只要有相應的瀏覽器插件就可以打開。

（3）教學效果

將Axure RP引入課程中，對學生的原型設計可以說取得了良好的教學效果。首先，學生掌握了一個專業的軟件工具，提高了學生實際的設計水平和動手能力，改變了學生只能想卻實現不了的窘境，學生的學習積極性得到極大提高，并體現出較以往更活躍的創造力。其次通過課程的學習，把創意和設計部分內容和軟件相結合，改變大學交互設計類課程存在的問題，要么學軟件“重技術而輕設計”，要么學設計“設計卻不懂技術”，實際上，交互原型前期原型設計恰恰是對軟件的功能和用戶體驗起決定性作用的因素。最后，通過教學上引入Axure RP，教師的確也較難找到一種能方便快速地講解 APP 設計、體現交互效果的方法。學生比以往顯得更有熱情，他們可以使用這樣的工具去嘗試新的想法和設計，并反復研究交互果，不用為后臺研發、編寫代碼而煩惱。

4 結束語

目前，國內高校的交互設計專業引入 Axure RP 教學的大學課程并不多，所以在很多方面的經驗也比較有限，筆者也是在教學當中進行一些嘗試，總結了一點經驗和教訓，有一定的局限性，希望在此領域上能有一些新的探索。