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

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

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

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

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

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

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

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

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

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

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

圖1

圖2

（1）主菜單和工具欄

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

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

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

（3）控件面板

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

（4）模塊面板

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

線(xiàn)框圖工作面板

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

（6）部件交互面板

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

部件屬性和樣式面板

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

（8）頁(yè)面交互和注釋面板

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

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

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

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

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

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

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

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

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

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

（3）交互功能

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

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

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

3 教學(xué)效果

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

4 結(jié)束語(yǔ)

目前，國(guó)內(nèi)高校的交互設(shè)計(jì)專(zhuān)業(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é)位論文].無(wú)錫:江南大學(xué)設(shè),2008

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

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

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