基于AXURE RP技術(shù)平臺的交互原型設(shè)計(jì)課程研究

張暉 南京藝術(shù)學(xué)院工業(yè)設(shè)計(jì)學(xué)院

隨著移動互聯(lián)網(wǎng)等新興互聯(lián)網(wǎng)產(chǎn)業(yè)的高速發(fā)展，原型交互設(shè)計(jì)成為現(xiàn)下最為熱門的領(lǐng)域，小到一個手機(jī)的APP，大到一個國家的綜合信息平臺，幾乎涵蓋了我們的生活的各個方面。就連象蘋果、百度、谷歌、新浪、聯(lián)想這些互聯(lián)網(wǎng)巨頭每年都要引進(jìn)大量引進(jìn)此類人才。不過，相對于旺盛的人才需求，原型交互設(shè)計(jì)人才的教育和培養(yǎng)卻顯得比較的滯后，這主要是因?yàn)樵驮O(shè)計(jì)工作既要有一定的藝術(shù)修養(yǎng)又要有相應(yīng)的技術(shù)支持，有較高的技術(shù)準(zhǔn)入門檻，所以要解決這個矛盾，引入一款在

原型交互設(shè)計(jì)的培養(yǎng)和教學(xué)中功能強(qiáng)大而又簡單易學(xué)的軟件技術(shù)平臺就變得十分必要了。而Axure RP 這款軟件可以很好的解決這個問題。

1 Axure RP與原型設(shè)計(jì)

Axure RP是美國Axure Software Solution公司的一個專業(yè)的快速原型設(shè)計(jì)工具，是目前比較主流的交互原型設(shè)計(jì)軟件,多用于 APP、網(wǎng)站的前端開發(fā)，能快速創(chuàng)建 APP 或 Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔，還能把APP 頁面的功能模塊、視覺元素、人機(jī)交互的形式和效果完整地展現(xiàn)出來，而且操作簡便、快速，易于上手，設(shè)計(jì)效率極高。還可以支持多人協(xié)作設(shè)計(jì)和版本控制管理 ，讓原型設(shè)計(jì)工變得更加有趣和高效，所以許多公司把Axure RP作為最為重要的原型設(shè)計(jì)和開發(fā)的軟件平臺。

原型設(shè)計(jì)的范圍相當(dāng)廣泛，任何東西都可以被認(rèn)為是原型。從紙面上的圖表到復(fù)雜的電子裝置，從簡陋的紙板模型到精密加工而成的金屬裝置?？傊褪侨魏我环N幫助我們嘗試未知，不斷推進(jìn)以達(dá)到目標(biāo)的事物。而交互原型主要是指開發(fā)產(chǎn)品在面市前的一個整體框架設(shè)計(jì)。開發(fā)的公司根據(jù)市場的調(diào)研了解客戶的需求，再根據(jù)這些需求制定開發(fā)的產(chǎn)品，不過由于開發(fā)產(chǎn)品的成本一般都比較高，所以在投入研發(fā)前，先把產(chǎn)品的效果圖、功能框架做出來，客戶確定后再進(jìn)行下一步的產(chǎn)品研發(fā)，這就是所謂的原型設(shè)計(jì)。

2 教學(xué)中引入Axure RP

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

2.1 Axure RP的學(xué)習(xí)內(nèi)容

目前Axure RP軟件主流是7.0和8.0版本，我們課程中使用的主要是7.0的版本（見圖1），這個版本相對而言普及率比較高，操作的界面和相關(guān)設(shè)計(jì)專業(yè)中常使用的Illustrator、Photoshop等軟件的操作界面非常接近，并且這個系列軟件不僅可以導(dǎo)入各種素材，同時(shí)還可以對各種素材進(jìn)行編輯和繪制，所以學(xué)生比較容易上手。

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

圖1

圖2

（1）主菜單和工具欄

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

（2）站點(diǎn)地圖面板

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

（3）控件面板

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

（4）模塊面板

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

線框圖工作面板

線框圖面板也叫頁面工作區(qū)，是進(jìn)行原型設(shè)計(jì)的主要面板，可以設(shè)計(jì)原型的線框圖、流程圖、自定義部件、模塊等等，并且可以生成比較直接的結(jié)構(gòu)框架圖，效果比較直觀。

（6）部件交互面板

部件交互是原型交互設(shè)計(jì)的主要功能面板，通過設(shè)置相應(yīng)的用例和鏈接產(chǎn)生不同的交互效果，為原型提供各種各樣的交互效果。

部件屬性和樣式面板

通過設(shè)置好的交互用例，可以增加具體頁面的信息內(nèi)容，如導(dǎo)入文字、圖片、鏈接、動態(tài)顯示和隱藏等。

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

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

2.2 Axure RP與原型設(shè)計(jì)

學(xué)習(xí)好了Axure RP 的基本操作后（一般是24個課時(shí)左右），就可以加入具體原型設(shè)計(jì)的內(nèi)容。原型（Prototype）的本意原來的類型或模型設(shè)計(jì)，特指文學(xué)藝術(shù)作品中塑造人物形象所依據(jù)的現(xiàn)實(shí)生活中的人。我們在交互設(shè)計(jì)領(lǐng)域理解的原型主要是指根據(jù)需求，進(jìn)行產(chǎn)品具體化的設(shè)計(jì)形成的樣品，是交互設(shè)計(jì)師的構(gòu)想的最終體現(xiàn)[2]。

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

(1) 原型的結(jié)構(gòu)框架設(shè)計(jì)

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

(2) 界面設(shè)計(jì)

在整體的布局結(jié)構(gòu)搭建完成之后，就可以設(shè)計(jì)具體頁面版面設(shè)計(jì)了。版面主要包括，風(fēng)格定義，頁面的功能布局，母板制作和分頁設(shè)計(jì)。

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

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

（3）交互功能

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

(4) 交互原型發(fā)布

交互原型完成后，Axure RP軟件可以直接發(fā)布成 Web頁的形式，交互原型的工程文件中有多少個頁面，發(fā)布后就會產(chǎn)生多少個 Html 文件，只要注意好對發(fā)布文件的管理，這種發(fā)布的方式非常便捷，同時(shí)因?yàn)槭荋tml 文件，教學(xué)的成果演示也非常方便，只要有相應(yīng)的瀏覽器插件就可以打開。

3 教學(xué)效果

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

4 結(jié)束語

目前，國內(nèi)高校的交互設(shè)計(jì)專業(yè)引入 Axure RP 教學(xué)的大學(xué)課程并不多，所以在很多方面的經(jīng)驗(yàn)也比較有限，筆者也是在教學(xué)當(dāng)中進(jìn)行一些嘗試，總結(jié)了一點(diǎn)經(jīng)驗(yàn)和教訓(xùn)，有一定的局限性，希望在此領(lǐng)域上能有一些新的探索。

[1]華梅立.交互設(shè)計(jì)中的原型構(gòu)建研究[D]:[碩士學(xué)位論文].無錫:江南大學(xué)設(shè),2008

[2]Dan―saffer著《交互設(shè)計(jì)指南》（陳軍亮、陳媛媛、李敏譯）.機(jī)械工業(yè)出版社.2010

[3]傅小貞.移動設(shè)計(jì)[M].北京：電子工業(yè)出版社，2013.呂皓月，楊長韜.網(wǎng)站藍(lán)圖

[4]Axure RP 高保真網(wǎng)頁原型制作[M].北京：清華大學(xué)出版社，2012.