以項(xiàng)目設(shè)計(jì)流程為導(dǎo)向的APP界面視覺(jué)設(shè)計(jì)教學(xué)改革初探

向樺

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

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

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

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

圖1 學(xué)生進(jìn)行小組討論及階段成果匯報(bào)

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

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

二、教學(xué)對(duì)象和教學(xué)目標(biāo)

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

針對(duì)目前國(guó)內(nèi)高校輸出的界面設(shè)計(jì)人才與企業(yè)對(duì)人才需求標(biāo)準(zhǔn)不匹配的問(wèn)題，避免平面專業(yè)的學(xué)生把APP界面視覺(jué)設(shè)計(jì)當(dāng)畫冊(cè)、書籍來(lái)進(jìn)行設(shè)計(jì)，課程教學(xué)目標(biāo)如下：

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

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

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

三、教學(xué)方法

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

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

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

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

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

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

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

（一）第一階段（8課時(shí)）

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

1.理論講授（4課時(shí)）

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

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

（2）競(jìng)品分析、頭腦風(fēng)暴、用戶訪談（問(wèn)卷、單人訪談）[案例分析法]

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

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

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

（二）第二階段（8課時(shí)）

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

2.理論講授（2課時(shí)）：同理心地圖、用戶畫像、用戶旅程圖、痛點(diǎn)、機(jī)會(huì)點(diǎn)、故事版[案例分析法]

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

（三）第三階段（8課時(shí)）

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

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

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

（四）第四階段（8課時(shí)）

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

2.最終展示（1課時(shí)）：每組10分鐘展示匯報(bào)時(shí)間。

五、教學(xué)案例

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

寵嗚——救助流浪動(dòng)物APP（圖2）

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

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

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

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

總結(jié)

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

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