周 健

（武漢職業(yè)技術(shù)學(xué)院計(jì)算機(jī)技術(shù)與軟件工程學(xué)院，湖北武漢 430074）

引言：

現(xiàn)在,在我們?nèi)粘Ｉ畹姆椒矫婷?，都離不開手機(jī)APP的應(yīng)用，APP就是在智能手機(jī)操作系統(tǒng)下（IOS、Android和WindowsPhone等）使用的第三方應(yīng)用程序。APP種類紛繁復(fù)雜，有可以發(fā)送視頻、圖片、文本和語音信息，與好友一起玩游戲，分享自己的生活到朋友圈的社交類的微信，讓你感受耳目一新的移動(dòng)方式的通訊應(yīng)用；有出行必不可少的地圖導(dǎo)航類APP，高德地圖最大的優(yōu)點(diǎn)就是精確，而百度地圖功能做的十分完善，依靠自身公司的大數(shù)據(jù)庫，對(duì)于找一些周邊的商家，飯店，酒店什么的，百度的標(biāo)注的可能更多一些；還有翻譯類APP，將厚重的紙質(zhì)詞典安裝到手機(jī)上并裝入口袋，隨時(shí)隨地，想翻就翻，支持多語種互譯，語音翻譯，拍照翻譯，離線翻譯等等；還有分享美食信息的大眾點(diǎn)評(píng)，網(wǎng)上購物的淘寶，自娛自樂地酷狗音樂，各種休閑娛樂的小游戲，更有許多企業(yè)因?yàn)楣芾砗图夹g(shù)查詢的需求，會(huì)專門定制一些適合企業(yè)使用的APP。

因此，如何設(shè)計(jì)一款界面美觀，操作簡單，層次清晰的APP已經(jīng)成為產(chǎn)品經(jīng)理、UI設(shè)計(jì)師和軟件工程師等前端開發(fā)關(guān)注的重點(diǎn)。同時(shí)《用戶體驗(yàn)設(shè)計(jì)》課程也逐漸引入各大高校的課堂，成為日后投身IT前端開發(fā)和軟件設(shè)計(jì)行業(yè)的必修課。

1 什么是用戶體驗(yàn)設(shè)計(jì)

所有的設(shè)計(jì)都來源于生活的需求，生活中有很多好的體驗(yàn)和不好的體驗(yàn)，隨著現(xiàn)代科技的發(fā)展，知識(shí)社會(huì)的到來，創(chuàng)新形態(tài)的改變，設(shè)計(jì)也正由專業(yè)設(shè)計(jì)師的工作向更更廣泛的用戶參與演變，以用戶為中心，用戶參與的創(chuàng)新設(shè)計(jì)日益受到關(guān)注。在當(dāng)前信息時(shí)代，人們的日常生活和工作，時(shí)時(shí)刻刻都離不開手機(jī)和電腦的使用，針對(duì)各種應(yīng)用的軟件和APP層出不窮，用戶體驗(yàn)設(shè)計(jì)主要是針對(duì)PC端和移動(dòng)端應(yīng)用軟件的研發(fā)和流程設(shè)計(jì)。

如何成為一個(gè)好的用戶體驗(yàn)設(shè)計(jì)師？用戶體驗(yàn)設(shè)計(jì)包含兩個(gè)方面：界面設(shè)計(jì)和交互設(shè)計(jì)。界面設(shè)計(jì)主要在于體現(xiàn)品牌特色，包括色彩，色調(diào)，視覺風(fēng)格，整體感官等；交互設(shè)計(jì)包含功能設(shè)計(jì)，流程設(shè)計(jì)，界面布局，交互邏輯，信息反饋等。交互設(shè)計(jì)又稱互動(dòng)設(shè)計(jì)，是定義設(shè)定人造系統(tǒng)行為的設(shè)計(jì)領(lǐng)域，是一門以用戶為中心，關(guān)注交互體驗(yàn)的學(xué)科。

2 產(chǎn)品原型與AXURE

PC端web網(wǎng)站設(shè)計(jì)和移動(dòng)端APP設(shè)計(jì)制作流程通常有4個(gè)步驟，首先是經(jīng)過與客戶溝通，了解客戶的需求，經(jīng)過市場(chǎng)調(diào)研后，定義產(chǎn)品的場(chǎng)景、功能范圍和商業(yè)需求，并對(duì)項(xiàng)目進(jìn)行評(píng)估，確定它的商業(yè)價(jià)值、業(yè)務(wù)邏輯，核心特點(diǎn)及創(chuàng)意控制，然后經(jīng)過交互原型設(shè)計(jì)，包括產(chǎn)品結(jié)構(gòu)設(shè)計(jì)、產(chǎn)品細(xì)節(jié)定義、視覺表現(xiàn)設(shè)計(jì)等，接下來做軟件代碼設(shè)計(jì)，最后進(jìn)行產(chǎn)品測(cè)試和產(chǎn)品交付。其中原型設(shè)計(jì)是非常關(guān)鍵的一步，直接決定了最終產(chǎn)品的使用感受和效果，客戶的想法和理念在原型中得到體現(xiàn)。AXURERP是一個(gè)專業(yè)的快速原型設(shè)計(jì)工具，讓交互設(shè)計(jì)師能夠快速創(chuàng)建原型的應(yīng)用軟件，可以創(chuàng)建APP或web網(wǎng)站的原型、流程圖、線框圖和規(guī)格說明文檔，作為專業(yè)的原型設(shè)計(jì)工具，它比一般的創(chuàng)建靜態(tài)原型的工具要快速、高效。

3 AXURE在課程教學(xué)中的應(yīng)用

本文是以《用戶體驗(yàn)設(shè)計(jì)》課程中使用AXURERP8設(shè)計(jì)APP原型為例，目標(biāo)是讓學(xué)生掌握AXURE的主要操作方法,并能夠設(shè)計(jì)詳細(xì)的功能交互流程和交互效果的APP產(chǎn)品原型，授課學(xué)生是本院計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)前端方向的大三年級(jí)學(xué)生，有一定的軟件開發(fā)能力和平面設(shè)計(jì)經(jīng)驗(yàn)基礎(chǔ)。

3.1 AXURE的主要操作方法

課程選擇的是AXURERP8版本，AXURE軟件的操作界面簡單明了，與圖像處理軟件Photoshop和矢量圖設(shè)計(jì)軟件Illustrator的界面布局類似，學(xué)生本身有一定的軟件設(shè)計(jì)基礎(chǔ)，因此對(duì)AXURE的適應(yīng)能力很強(qiáng)。在AXURE中，學(xué)生首先制作了基于IOS操作系統(tǒng)和Android操作系統(tǒng)中常用的元件圖標(biāo)，并導(dǎo)入了其他常用的UI元件素材庫（菜單欄、鍵盤和各種按鈕）和市面上主流的手機(jī)機(jī)身圖（IPHONE、華為等）。這樣既讓學(xué)生熟悉了AXUER的基本操作，又便于后期設(shè)計(jì)時(shí)，學(xué)生不用將時(shí)間消耗在設(shè)計(jì)手機(jī)小部件等細(xì)節(jié)上，學(xué)生可以專心研究界面布局和交互效果方面的設(shè)計(jì)。

AXURE軟件自帶豐富的元件庫，在APP的界面布局設(shè)計(jì)時(shí)，可以通過鼠標(biāo)拖拽的方式直接使用，其中“動(dòng)態(tài)面板”元件的使用是重點(diǎn)也是難點(diǎn)，動(dòng)態(tài)面板是一個(gè)能實(shí)現(xiàn)多種交互動(dòng)作、多空間的、透明的、無限大的元件容器。在課程中教師詳細(xì)講解動(dòng)態(tài)面板狀態(tài)及狀態(tài)頁的編輯，動(dòng)態(tài)面板的交互設(shè)計(jì)也比其他元件的交互效果設(shè)計(jì)更豐富，在課程中講授中，通過對(duì)輪播圖案例分析、全局導(dǎo)航案例分析，讓學(xué)生更加理解動(dòng)態(tài)面板的概念并掌握其使用方法，同時(shí)要求學(xué)生運(yùn)用動(dòng)態(tài)面板使用多種方法制作輪播圖和全局導(dǎo)航效果，使之熟練掌握。

3.2 APP交互設(shè)計(jì)案例分析

對(duì)手機(jī)界面的設(shè)計(jì)風(fēng)格，色彩搭配和界面的構(gòu)圖，講授完之后，重點(diǎn)給學(xué)生介紹交互效果的設(shè)計(jì)，在AXURE中，選擇不同的元件，交互事例設(shè)計(jì)的內(nèi)容是不同的。交互事例設(shè)計(jì)主要是在用例編輯器中完成，添加的動(dòng)作可分為5類：鏈接，元件，全局變量，中繼器和其他的動(dòng)作添加。每一個(gè)動(dòng)作選擇不同的元件，設(shè)置相應(yīng)的參數(shù)，并加上不同的動(dòng)畫，并且還可以給動(dòng)作設(shè)置相應(yīng)的條件，達(dá)到我們所需要的交互效果。

下面以登錄界面的登錄按鈕事件設(shè)計(jì)為例，分析交互設(shè)計(jì)：

在常見的登錄界面中，只有用戶名和密碼正確輸入后，才能正常登錄，并跳轉(zhuǎn)到相應(yīng)的頁面，那么登錄按鈕的交互用例就會(huì)有四種情況判斷：（1）用戶名和密碼都沒有輸入，點(diǎn)擊登錄按鈕，（2）用戶名已輸入，密碼沒有輸入時(shí)，點(diǎn)擊登錄按鈕，（3）當(dāng)用戶名沒輸入，密碼輸入時(shí)，點(diǎn)擊登錄按鈕，（4）用戶名和密碼都輸入后，點(diǎn)擊登錄按鈕。這就需要對(duì)多個(gè)用例設(shè)置條件，并正確設(shè)置各個(gè)條件之間的關(guān)系，只要條件關(guān)系整理清楚，用例編輯器就很好掌握了，這部分內(nèi)容也是講授的重點(diǎn)。

圖：登錄界面多條件用例設(shè)置學(xué)生APP設(shè)計(jì)作品創(chuàng)作

按照課程計(jì)劃，以微信APP為例，完成16課時(shí)的講授操作之后，布置課程作業(yè)，要求學(xué)生運(yùn)用AXURE設(shè)計(jì)一個(gè)APP原型，要求產(chǎn)品架構(gòu)信息完整，且功能豐富詳細(xì)。學(xué)生對(duì)這項(xiàng)作業(yè)的興趣很高，制作效率高，作品質(zhì)量良好，作品主要有以下幾類：以QQ為例的即時(shí)通信軟件類；有模仿嗶哩嗶哩動(dòng)畫的APP；有美團(tuán)外賣之類的APP；還有像網(wǎng)易云詞典，云音樂之類的APP。盡管一些作品仍有小部分的功能沒有實(shí)現(xiàn)，有些設(shè)計(jì)不合理，但是學(xué)生的學(xué)習(xí)積極性得到極大提高，并且體現(xiàn)出更活躍更豐富的創(chuàng)新能力。

4 結(jié)束語

AXURE的出現(xiàn)是行業(yè)崗位細(xì)分化和更專業(yè)化的體現(xiàn)，為什么要設(shè)計(jì)原型？第一是減少修改成本，第二是便于溝通討論,在用戶和產(chǎn)品經(jīng)理之間，在產(chǎn)品經(jīng)理和交互設(shè)計(jì)師之間，在交互設(shè)計(jì)師和開發(fā)工程師之間,有了原型，他們的交流溝通更加明朗清晰,工作效率也自然提高?，F(xiàn)在大學(xué)課程中引入AXURE教學(xué)的，并不是很多，有待進(jìn)一步的改進(jìn)和完善，筆者主要從自身的教學(xué)中進(jìn)行了總結(jié)歸納，有一定的局限性，僅以此同廣大教育工作者共勉。