張暉 南京藝術(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)人才。目前，比較主流的交互原型設(shè)計(jì)軟件有Axure、Justinmind、Mockups等，這些軟件都可以快速化的進(jìn)行原型設(shè)計(jì)，這幾個(gè)軟件中，AXURE RP的能快速、高效的創(chuàng)建原型，支持多人協(xié)作設(shè)計(jì)和版本控制管理 等一系列的優(yōu)勢(shì)，讓它成為業(yè)內(nèi)人士認(rèn)可度最好的軟件工具。不過(guò)這款軟件目前還沒(méi)有大規(guī)模的引入國(guó)內(nèi)的信息交互的教學(xué)中。本文以此展開(kāi)，探討原型設(shè)計(jì)課程中引入這樣一個(gè)軟件，在實(shí)際使用中的情況，總結(jié)經(jīng)驗(yàn)和教訓(xùn)。

1 原型設(shè)計(jì)課程中引入 Axure RP

原型設(shè)計(jì)的范圍相當(dāng)廣泛，任何東西都可以被認(rèn)為是原型。從紙面上的圖表到復(fù)雜的電子裝置，從簡(jiǎn)陋的紙板模型到精密加工而成的金屬裝置?？傊褪侨魏我环N幫助我們嘗試未知，不斷推進(jìn)以達(dá)到目標(biāo)的事物[1]。而交互原型主要是指開(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ì)。國(guó)內(nèi)目前主要的原型設(shè)計(jì)教育還處在剛剛起步階段，所以引入一款強(qiáng)大而又簡(jiǎn)單易學(xué)的快速化的原型設(shè)計(jì)工具就變得十分必要了。而Axure RP 這款軟件可以很好的解決這個(gè)問(wèn)題。

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

2 Axure RP軟件的特點(diǎn)

（1）Axure RP 操作界面的可視化強(qiáng)，有預(yù)覽選項(xiàng)，在預(yù)覽和生成原型時(shí)可以隨時(shí)觀看生成后的效果，方便設(shè)計(jì)者隨時(shí)進(jìn)行調(diào)整。

（2）該軟件由于采用了圖像化的控件，大大降低了學(xué)習(xí)的難度，尤其是對(duì)初學(xué)者，上手較快，同時(shí)可以利用網(wǎng)上的資源進(jìn)行自學(xué)，讓學(xué)生可以從大量基礎(chǔ)學(xué)習(xí)和繁瑣的代碼編輯解放出來(lái)盡情的施展創(chuàng)意的設(shè)計(jì)。

（3）該軟件兼容性好，小到一個(gè)手機(jī)的APP，大到一個(gè)國(guó)家的綜合信息平臺(tái)，幾乎都可以使用，應(yīng)用的領(lǐng)域十分的廣泛。

（4）學(xué)習(xí)準(zhǔn)入的門(mén)檻較低，初學(xué)者掌握基本控件的操作形成靜態(tài)頁(yè)面即可，學(xué)習(xí)者進(jìn)一步則能運(yùn)用個(gè)別的交互動(dòng)態(tài)以及效果，并使用一些判斷條件等功能，熟練使用者則能理清復(fù)雜網(wǎng)站或系統(tǒng)的流程和整體交互，對(duì)函數(shù)和中繼器等技術(shù)運(yùn)用自如，專(zhuān)注于布局結(jié)構(gòu)的創(chuàng)新和優(yōu)化。

3 課程的設(shè)計(jì)與實(shí)踐

3.1 課程目標(biāo)

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í)。所以在具體的課程目標(biāo)的設(shè)置中，一定要明確不同階段的課程教學(xué)目標(biāo)。

3.2 課程的學(xué)習(xí)內(nèi)容與課程設(shè)置

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

3.2.1 第一階段（大約15課時(shí)）：

第一階段主要以學(xué)習(xí)軟件操作，包括一些常用的命令鍵、組建、函數(shù)、和界面等。由于Axure RP操作界面和一些常使用的軟件如：Illustrator、Photoshop等軟件的操作界面非常象，大部分的命令鍵都是可視化很強(qiáng)的圖標(biāo)，所以學(xué)生學(xué)習(xí)起來(lái)上手比較容易并且這個(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í)的原型界面（線框圖和流程圖）進(jìn)行修改，如頁(yè)面的添加、刪除、重命名和組織頁(yè)面層次等等。

（3）控件面板

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

（4）模塊面板

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

（5）線框圖工作面板

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

（6）部件交互面板

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

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

通過(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)。

原型設(shè)計(jì)可分為低保真原型和高保真原型，低保真是指采用線框圖的方式制作一個(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)、連接線、鍵盤(pán)和各種按鈕等元件，將原型的層次結(jié)構(gòu)搭建出來(lái)，并根據(jù)搭建好的線框結(jié)構(gòu)來(lái)設(shè)計(jì)各個(gè)頁(yè)面的界面效果包括界面布局、交互效果和鏈接等等。有了整體的框架布局（線框圖）就可以展開(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ò)線框圖中的元件完成，如“圖片”、“文本”、“矩形”、“水平線”、“文本框”和“按鈕”等，這樣就可以把原型的各個(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ì)話框中完成，此對(duì)話框中提供了完善的向?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)域上能有一些新的探索。