以項目設計流程為導向的APP界面視覺設計教學改革初探

向樺

（西南財經大學 天府學院，成都 610052）

高校藝術專業開設的“UI設計”課程中，界面設計教學部分屬于課程的重點和難點。隨著互聯網時代的進步，美觀的界面設計已經成為了設計中最基本的要求，體驗、交互、視覺設計的配合才能真正提升互聯網產品的價值。所以企業需要有思考能力和分析能力的設計師。

一、國內高校培養的界面設計人才與社會所需人才的現狀

互聯網的興起，催生了UI設計師這個職業，設計師主要負責互聯網產品界面視覺設計工作，企業對此有大量的人才需求。藝術類高校嘗試開設界面設計課程，特別是平面設計專業在互聯網設計的沖擊下，也開始探尋互聯網設計之路。對于平面專業設計人才來講，互聯網視覺設計只是換了設計載體，不再基于傳統紙媒上進行。平面設計轉向界面設計，有版式作為基礎是最大的優勢，但如果把界面當畫冊、折頁等思路來進行設計，即使做得美觀漂亮也無法滿足用戶的需求。所以培養界面設計人才應該更多的讓設計師明白項目的背景，理解用戶體驗、交互設計在項目中對視覺設計的支持。

圖1 學生進行小組討論及階段成果匯報

圖2 寵鳴——救助流浪動物app界面設計

經過調研（往屆畢業生就業情況反饋、各大人才招聘網站招聘設計師信息、與互聯網設計公司負責人交流訪談等）發現目前的互聯網行業已不再過分關注產品視覺的包裝，更加注重產品的易學、易用性等體驗。企業對年輕設計師的評價，特別是對剛參加工作負責界面視覺設計的人才有諸多不滿，提出如“年輕設計師美工化”、設計“重皮膚輕骨骼”等問題。認為多數年輕設計師的工作僅停留在自我陶醉的美觀層面上，缺乏對項目本身的思考與認知，對用戶體驗置若惘然，設計的界面出現“繡花枕頭好看不中用”的問題，以至反復改稿影響整個項目進度。近幾年，還特別流行“全鏈路設計師”的說法，“全鏈路設計師”即能夠精通整個設計流程各個環節（用戶體驗、交互設計、視覺設計等）的設計師。雖然這是企業對人才需求的美好愿景，但也側面反映出企業對人才技能的要求變得越來越高。所以，目前高校開設的界面設計課程培養的人才還不能很好地滿足社會對人才的需求，界面設計課程除了解決美觀問題外，為適應互聯網行業人才需求的變化發展需嘗試進行改革與調整。

二、教學對象和教學目標

課程教學對象為平面設計專業本科三年級學生。圖形創意、字體設計、版式設計、海報設計、VI設計課程作為先行課程，為平面設計專業轉互聯網界面設計提供了良好的版式基礎和視覺審美力。

針對目前國內高校輸出的界面設計人才與企業對人才需求標準不匹配的問題，避免平面專業的學生把APP界面視覺設計當畫冊、書籍來進行設計，課程教學目標如下：

1.工作坊制度的引入，使學生理解互聯網產品從無到有的過程，形成設計思維。

2.讓學生充分融入整個項目設計流程，加強團隊協作意識，知道產品設計的每個環節、每個職位如何銜接的。

3.除掌握界面視覺設計原則及知識外，使學生懂得一些用戶體驗和交互設計知識，項目的視覺設計產出推行“皮膚+骨骼”的形式，避免“重皮膚輕骨骼”的設計出現。

三、教學方法

理論講授：互聯網項目設計通用流程及在設計工作中每個流程所對應的工作崗位和工作內容。

案例分析：選擇實際互聯網產品案例，結合項目設計流程和方法完整地進行分析展示。

工作坊形式（以項目設計流程為導向）：界面設計工作通常需要用戶研究員、交互設計師、視覺設計師等團隊成員共同協作完成。整個項目設計流程也按職位分為四個階段：發現需求—用戶研究—交互設計—視覺設計。

把此流程貫穿于創意工作坊中，對所有學生進行分組，每個團隊4～6人為宜，并選出一名綜合素質較強、具備領導才能的同學作為小組長，以便在討論中活躍氣氛和加強團隊凝聚力。老師在產品從無到有的項目設計流程中進行方向的把控，避免討論結果和設計流程跑偏。工作坊的每一個階段，團隊都需通過PPT形式匯報自己的產品設計結果，老師和其他組的成員也可以對其提問。課程最后每個團隊還需通過PPT完整地展示產品的設計流程和過程及視覺設計結果。

整個項目設計流程以學生討論、實際操作為主，與傳統老師教、學生聽的教學模式不同，學生參與度更高，鍛煉自身的表述能力，對項目的了解更深刻，注重產品的“骨骼”，最終為APP界面視覺設計找到合適的視覺“皮膚”。

四、教學內容與安排

界面設計教學共四周，每周8個課時，共32個課時，課程內容采用理論知識+案例分析+工作坊實踐穿插的模式展開。

（一）第一階段（8課時）

了解項目設計流程及互聯網公司里對應的職位。

1.理論講授（4課時）

（1）一個軟件的誕生（從無到有的設計流程）

老板/客戶提出或發現用戶需求——產品經理（市場調研、用戶研究、初步的交互、需求分配）——交互設計師（結合用戶研究結果整理出信息架構、繪制出交互原型圖）——視覺設計師（根據交互原型圖設計出高保真原型圖、頁面標準）——前端工程師（切圖、搭建前端頁面）——后端工程師（功能程序編寫、測試、發布）

（2）競品分析、頭腦風暴、用戶訪談（問卷、單人訪談）[案例分析法]

2.工作坊討論和任務布置（4課時）

任務：服務類方向APP軟件任選其一，以組為單位進行調研，組員每人選定一款該方向服務類的APP進行競品調研[每款APP調研內容包括：軟件名稱（由來）、軟件介紹、用戶分析（目標定位、用戶畫像）、視覺風格、軟件特色在哪里？主要界面截圖等] ，競品匯總、產品定位、用戶訪談（問卷和單人訪談結果），制作展示PPT。

團隊討論：組員們進行競品匯總整理、通過頭腦風暴擬定團隊要設計的產品定位、進行用戶訪談（問卷和單人訪談結果），并用PPT整理出調研結果。

（二）第二階段（8課時）

1.匯報第一階段調研結果（1課時）：每組10分鐘展示時間，老師和其他組同學提問，幫助其分析思路中存在的問題。

2.理論講授（2課時）：同理心地圖、用戶畫像、用戶旅程圖、痛點、機會點、故事版[案例分析法]

3.工作坊討論（5課時）：協作完成同理心地圖，繪制用戶畫像、繪制主要功能的用戶旅程圖，并用PPT整理出討論結果。

（三）第三階段（8課時）

1.匯報第一階段調研結果（1課時）：每組10分鐘展示時間，老師和其他組同學提問，幫助其分析思路中存在的問題。（圖1）

2.理論講授（2課時）：業務流程圖、任務流程圖、頁面流程圖、界面視覺設計分析[案例分析法]

3.工作坊討論（6課時）：協作完成業務流程圖、任務流程圖、頁面流程圖、低保真交互原型圖、產品logo設計、產品slogan、確定產品主色調、主要頁面高保真原型圖。

（四）第四階段（8課時）

1.工作坊討論（7課時）：老師介入到每個團隊，檢查第三階段任務完成情況，并進行界面視覺設計上的指導。

2.最終展示（1課時）：每組10分鐘展示匯報時間。

五、教學案例

課程班級共分為五個小組，其中一個創意工作坊小組的產品設計過程如下：

寵嗚——救助流浪動物APP（圖2）

本團隊觀察到現今很多流浪動物無法得到正確救助，擬開發一款能讓愛心人士及時幫助流浪動物脫險、領養和防止危險流浪動物流竄傷人的APP，并與寵物管理相關部門合作。該軟件集救助、領養、眾籌、商城、個人中心為一體，在救助流浪動物的同時，可以解決愛心人士想救卻因為經濟受限救助不了的問題。用戶還可以在APP上分享自己愛寵的動態，與其他用戶進行溝通，分享經驗，實現資源共享。

用戶研究階段：小組成員通過問卷進行網絡投放，3個小時回收了134份問卷，結果顯示超過一半以上的人看到流浪動物愿意關注它們并愿意投食物，少部分人選擇將其送往寵物管理相關部門。然后選擇了特別愛心人士進行了單人訪談，繪制了同理心地圖，確定了目標人群為學生黨、上班族、家庭主婦。繪制出了用戶畫像，定義了用戶使用場景。根據功能優先級繪制出用戶主要的旅程圖。

交互設計階段：根據用戶研究的結果，小組成員對信息架構進行了梳理，協作完成了業務流程圖、任務流程圖、頁面流程圖。該軟件的主要頁面為：救助系統，領養與互動，眾籌，個人中心。

視覺設計階段：用戶研究和交互設計階段工作的完成，為產品界面設覺設計奠定了基礎。小組成員根據前期的調研結果，為產品命名“寵嗚”，“寵嗚”的“嗚”字為動物受傷時發出的聲音，“寵嗚”也與寵物同音。產品logo采用“房子”+“寵物狗”造型正負形結合，表現出對動物的幫助關愛，產品色調采用黃橙色，展現溫暖和關懷的理念。界面視覺設計不只是軟件的“皮膚”，需結合“骨骼”——用戶研究和交互設計軟件來進行。

總結

課程五個小組，產生了5個不同的創意產品，課程要求學生推行“皮膚+骨骼”的方式來設計界面，讓產品更加易學、易用。在創意工作坊的開展過程中，學生反映學到了很多界面視覺設計以外的知識，拓展了眼界和設計思路，也更加理解了界面視覺設計不能只考慮美觀，必須依托于用戶研究和交互設計的結果來進行拓展，才能真正做到好體驗。

課程初次嘗試以項目設計流程為導向的方式來學習界面視覺設計，課程改革目的也正是為了讓學生不要只停留在研究界面視覺效果上，而應該在堅持研究視覺效果的基礎上，不斷拓展產品設計思維，讓產品視覺設計和交互更好地融合到一起，使自己的專業技能更適應社會發展對人才的要求。■