淺析《用戶體驗設計》中APP原型設計在教學中的應用

周 健

（武漢職業技術學院計算機技術與軟件工程學院，湖北武漢 430074）

引言：

現在,在我們日常生活的方方面面，都離不開手機APP的應用，APP就是在智能手機操作系統下（IOS、Android和WindowsPhone等）使用的第三方應用程序。APP種類紛繁復雜，有可以發送視頻、圖片、文本和語音信息，與好友一起玩游戲，分享自己的生活到朋友圈的社交類的微信，讓你感受耳目一新的移動方式的通訊應用；有出行必不可少的地圖導航類APP，高德地圖最大的優點就是精確，而百度地圖功能做的十分完善，依靠自身公司的大數據庫，對于找一些周邊的商家，飯店，酒店什么的，百度的標注的可能更多一些；還有翻譯類APP，將厚重的紙質詞典安裝到手機上并裝入口袋，隨時隨地，想翻就翻，支持多語種互譯，語音翻譯，拍照翻譯，離線翻譯等等；還有分享美食信息的大眾點評，網上購物的淘寶，自娛自樂地酷狗音樂，各種休閑娛樂的小游戲，更有許多企業因為管理和技術查詢的需求，會專門定制一些適合企業使用的APP。

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

1 什么是用戶體驗設計

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

如何成為一個好的用戶體驗設計師？用戶體驗設計包含兩個方面：界面設計和交互設計。界面設計主要在于體現品牌特色，包括色彩，色調，視覺風格，整體感官等；交互設計包含功能設計，流程設計，界面布局，交互邏輯，信息反饋等。交互設計又稱互動設計，是定義設定人造系統行為的設計領域，是一門以用戶為中心，關注交互體驗的學科。

2 產品原型與AXURE

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

3 AXURE在課程教學中的應用

本文是以《用戶體驗設計》課程中使用AXURERP8設計APP原型為例，目標是讓學生掌握AXURE的主要操作方法,并能夠設計詳細的功能交互流程和交互效果的APP產品原型，授課學生是本院計算機網絡技術專業前端方向的大三年級學生，有一定的軟件開發能力和平面設計經驗基礎。

3.1 AXURE的主要操作方法

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

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

3.2 APP交互設計案例分析

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

下面以登錄界面的登錄按鈕事件設計為例，分析交互設計：

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

圖：登錄界面多條件用例設置學生APP設計作品創作

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

4 結束語

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