向樺

（西南財經(jīng)大學 天府學院，成都 610052）

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

一、國內(nèi)高校培養(yǎng)的界面設(shè)計人才與社會所需人才的現(xiàn)狀

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

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

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

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

二、教學對象和教學目標

課程教學對象為平面設(shè)計專業(yè)本科三年級學生。圖形創(chuàng)意、字體設(shè)計、版式設(shè)計、海報設(shè)計、VI設(shè)計課程作為先行課程，為平面設(shè)計專業(yè)轉(zhuǎn)互聯(lián)網(wǎng)界面設(shè)計提供了良好的版式基礎(chǔ)和視覺審美力。

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

1.工作坊制度的引入，使學生理解互聯(lián)網(wǎng)產(chǎn)品從無到有的過程，形成設(shè)計思維。

2.讓學生充分融入整個項目設(shè)計流程，加強團隊協(xié)作意識，知道產(chǎn)品設(shè)計的每個環(huán)節(jié)、每個職位如何銜接的。

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

三、教學方法

理論講授：互聯(lián)網(wǎng)項目設(shè)計通用流程及在設(shè)計工作中每個流程所對應(yīng)的工作崗位和工作內(nèi)容。

案例分析：選擇實際互聯(lián)網(wǎng)產(chǎn)品案例，結(jié)合項目設(shè)計流程和方法完整地進行分析展示。

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

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

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

四、教學內(nèi)容與安排

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

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

了解項目設(shè)計流程及互聯(lián)網(wǎng)公司里對應(yīng)的職位。

1.理論講授（4課時）

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

老板/客戶提出或發(fā)現(xiàn)用戶需求——產(chǎn)品經(jīng)理（市場調(diào)研、用戶研究、初步的交互、需求分配）——交互設(shè)計師（結(jié)合用戶研究結(jié)果整理出信息架構(gòu)、繪制出交互原型圖）——視覺設(shè)計師（根據(jù)交互原型圖設(shè)計出高保真原型圖、頁面標準）——前端工程師（切圖、搭建前端頁面）——后端工程師（功能程序編寫、測試、發(fā)布）

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

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

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

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

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

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

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

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

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

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

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

3.工作坊討論（6課時）：協(xié)作完成業(yè)務(wù)流程圖、任務(wù)流程圖、頁面流程圖、低保真交互原型圖、產(chǎn)品logo設(shè)計、產(chǎn)品slogan、確定產(chǎn)品主色調(diào)、主要頁面高保真原型圖。

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

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

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

五、教學案例

課程班級共分為五個小組，其中一個創(chuàng)意工作坊小組的產(chǎn)品設(shè)計過程如下：

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

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

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

交互設(shè)計階段：根據(jù)用戶研究的結(jié)果，小組成員對信息架構(gòu)進行了梳理，協(xié)作完成了業(yè)務(wù)流程圖、任務(wù)流程圖、頁面流程圖。該軟件的主要頁面為：救助系統(tǒng)，領(lǐng)養(yǎng)與互動，眾籌，個人中心。

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

總結(jié)

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

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