卡片工具在界面設(shè)計(jì)課程中的應(yīng)用

王炯賢

【摘要】卡片工具是一種傳統(tǒng)的直觀教具，在語言教學(xué)中被廣為使用。文章結(jié)合作者所在學(xué)校界面設(shè)計(jì)課程的課程設(shè)置與教學(xué)實(shí)踐，闡述卡片工具在教學(xué)過程中的具體運(yùn)用方法，展現(xiàn)傳統(tǒng)實(shí)物卡片在設(shè)計(jì)類課程中運(yùn)用的可行性。

【關(guān)鍵詞】卡片 界面設(shè)計(jì)課程 交互設(shè)計(jì)

【中圖分類號(hào)】G64 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】2095-3089（2017）37-0245-02

一、國內(nèi)界面設(shè)計(jì)課程研究概況

隨著智能手機(jī)日益普及，移動(dòng)互聯(lián)逐漸實(shí)現(xiàn)。如何讓手機(jī)用戶有更便捷的交互體驗(yàn)，如何讓手機(jī)軟件滿足用戶需求，使得交互設(shè)計(jì)類專業(yè)人才需求大量增加。各大高校的設(shè)計(jì)類專業(yè)紛紛調(diào)整人才培養(yǎng)方案，引入有交互設(shè)計(jì)類課程，界面設(shè)計(jì)課程便是交互設(shè)計(jì)領(lǐng)域的核心課程。界面設(shè)計(jì)即UI（User Interface）設(shè)計(jì)，其來源于計(jì)算機(jī)學(xué)科中的人機(jī)交互研究，是一門跨領(lǐng)域的邊緣學(xué)科，橫跨機(jī)械工程、計(jì)算機(jī)科學(xué)、心理學(xué)和藝術(shù)設(shè)計(jì)等多個(gè)領(lǐng)域。學(xué)界對(duì)于界面設(shè)計(jì)課程的存在現(xiàn)狀、內(nèi)容模塊、能力培養(yǎng)和教學(xué)實(shí)踐等多個(gè)方面開展深入研究。丁凱（2012）基于課程體系建設(shè)提出課程可分成兩大模塊和六項(xiàng)基本內(nèi)容，界面設(shè)計(jì)原理模塊包含：認(rèn)識(shí)界面設(shè)計(jì)、GUI時(shí)代的修辭、界面設(shè)計(jì)的基本準(zhǔn)則與規(guī)范、界面設(shè)計(jì)的一般流程和設(shè)計(jì)層次，界面視覺設(shè)計(jì)實(shí)務(wù)模塊：圖標(biāo)創(chuàng)意、軟件GUI中的視覺設(shè)計(jì)。朱吉虹（2012）從行業(yè)實(shí)踐入手，匯總整理出“校內(nèi)工作室+合作企業(yè)”相結(jié)合的設(shè)計(jì)實(shí)踐訓(xùn)練辦法。高鳳燕（2013）從以能力培養(yǎng)為中心的教學(xué)體系出發(fā)，結(jié)合職業(yè)崗位人力需求，提出“1+1+3”課程模塊體系。文章將本學(xué)院的界面設(shè)計(jì)課程特點(diǎn)，介紹卡片工具在課程實(shí)踐中的應(yīng)用。

二、學(xué)院界面設(shè)計(jì)課程特色

界面設(shè)計(jì)課程是學(xué)院數(shù)字媒體藝術(shù)專業(yè)的專業(yè)必修課，開設(shè)在大三的第二學(xué)期，授課以小班教學(xué)，每個(gè)教學(xué)班有50-60名學(xué)生，歷時(shí)12周共有48個(gè)學(xué)時(shí)。課程采用案例教學(xué)與設(shè)計(jì)實(shí)踐相結(jié)合模式，每周兩次課，課堂教學(xué)與上機(jī)實(shí)踐各一次，以三個(gè)項(xiàng)目作業(yè)貫穿整個(gè)課程，學(xué)生按5-7人分成若干項(xiàng)目組作課程實(shí)踐。

第一個(gè)項(xiàng)目作業(yè)為網(wǎng)站設(shè)計(jì)，要求項(xiàng)目組成立一個(gè)設(shè)計(jì)工作室，運(yùn)用在線建站技術(shù)設(shè)計(jì)建立一個(gè)宣傳該工作室的網(wǎng)站。該網(wǎng)站包含5個(gè)基本頁面：首頁、團(tuán)隊(duì)簡介、成員介紹、作品展示、聯(lián)系方式。項(xiàng)目作業(yè)完成電腦版網(wǎng)站建設(shè)后還要開通手機(jī)版網(wǎng)站。通過在免費(fèi)線建站技術(shù)，項(xiàng)目作業(yè)可以真實(shí)上線運(yùn)營，學(xué)生通過網(wǎng)站后臺(tái)的用戶數(shù)據(jù)，了解移動(dòng)版網(wǎng)站與臺(tái)機(jī)版網(wǎng)站的差異。

第二個(gè)項(xiàng)目作業(yè)為手機(jī)系統(tǒng)主題UI界面設(shè)計(jì)，要求項(xiàng)目組按照用戶調(diào)查結(jié)果確定設(shè)計(jì)主題，開展手機(jī)系統(tǒng)主題UI界面設(shè)計(jì)。首先，讓每個(gè)學(xué)生按照界面設(shè)計(jì)的用戶調(diào)查要求，為自己建立個(gè)人用戶檔案。隨后，讓小組代表抽簽確定目標(biāo)用戶，如A組抽到C組，即A組使用C組的用戶檔案為調(diào)查結(jié)果，繼而將用戶檔案信息可視化制作出用戶拼圖。最后，開展小組討論從用戶拼圖中提取設(shè)計(jì)主題，制作相關(guān)主題UI界面設(shè)計(jì)方案。

第三個(gè)項(xiàng)目作業(yè)為手機(jī)APP軟件界面改良設(shè)計(jì)。要求項(xiàng)目組討論確定改良APP軟件后，第一步在網(wǎng)絡(luò)應(yīng)用商店下載三款同類型APP軟件，運(yùn)用X-MIND軟件制作出頁面導(dǎo)航地圖，分析比較其架構(gòu)優(yōu)劣，提出信息架構(gòu)改良方案。第二步綜合考慮軟件的頁面布局、操作體驗(yàn)、信息內(nèi)容，提出主要頁面改良方案。第三步使用簡易工具制作改良方案的低保真原型，獲取交互體驗(yàn)作細(xì)節(jié)調(diào)整。第四步用圖形編輯軟件、幻燈片制作軟件作出改良方案的高保真原型，用課堂演示向全體學(xué)生講解改良方案。

三、卡片工具在課程實(shí)踐中應(yīng)用

卡片工具是一種傳統(tǒng)的直觀教具，在語言學(xué)習(xí)、幼兒啟蒙、中小學(xué)教學(xué)中被廣為使用，在卡片上展示文字、圖形等信息，加深學(xué)生的記憶印象。卡片工具既可以展示教學(xué)內(nèi)容，也可以作為課堂師生互動(dòng)的媒介，學(xué)生按照課堂安排現(xiàn)場制作卡片以加深學(xué)習(xí)體驗(yàn)。傳統(tǒng)實(shí)物卡片制作極為方便，使用文具市場上批量生產(chǎn)的便簽紙或便利貼，在其上書寫文本內(nèi)容或繪制簡易圖形，便可完成卡片制作，因其制作簡易能滿足快速交流分享的需要?？ㄆぞ吣芴峁┮环N圖文并存的簡易展示，成為設(shè)計(jì)行業(yè)表達(dá)創(chuàng)意思維的一種工具，在頭腦風(fēng)暴、信息構(gòu)建、原型制作中廣為使用。隨著電腦在教學(xué)過程中的大量使用，按照卡片工具原理，出現(xiàn)大量制作虛擬卡片軟件，如微軟公司出品的Powerpoint軟件。下文討論卡片工具在課程項(xiàng)目作業(yè)中的應(yīng)用。

1.卡片工具在網(wǎng)站項(xiàng)目作業(yè)中的應(yīng)用

項(xiàng)目作業(yè)要求學(xué)生團(tuán)隊(duì)建立設(shè)計(jì)工作室宣傳網(wǎng)站，建站前需要組內(nèi)討論工作室定位，如工作室的設(shè)計(jì)風(fēng)格、行業(yè)范圍、服務(wù)形式、網(wǎng)站特色等。教師講解如何運(yùn)用頭腦風(fēng)暴法尋找工作室定位，介紹頭腦風(fēng)暴法的基本原則后，開始結(jié)合卡片工作來實(shí)施項(xiàng)目組內(nèi)頭腦風(fēng)暴。首先，每個(gè)項(xiàng)目組發(fā)放便利貼作為卡片，成員圍坐在工作桌旁，用手機(jī)作為計(jì)時(shí)器。每個(gè)組員在2分鐘內(nèi)繪制一張卡片，然后將卡片粘貼到桌面上，過程中成員間不能討論，隨即開展下一輪的卡片制作，如此循環(huán)15輪耗時(shí)約30分鐘，每組將獲得近100個(gè)創(chuàng)意靈感。小組討論卡片內(nèi)容，調(diào)整卡片粘貼位置，用白板筆在卡片間連線，添加若干解釋備注，便形成一張關(guān)于團(tuán)隊(duì)定位的思維導(dǎo)圖，用手機(jī)拍照記錄作為網(wǎng)站界面設(shè)計(jì)的指導(dǎo)原則。

2.卡片工具在主題UI項(xiàng)目作業(yè)中的應(yīng)用

項(xiàng)目作業(yè)要求學(xué)生團(tuán)隊(duì)將手機(jī)系統(tǒng)預(yù)先安裝軟件按使用頻率設(shè)計(jì)成3個(gè)頁面，學(xué)生運(yùn)用卡片工具讓用戶對(duì)系統(tǒng)預(yù)先安裝軟件做卡片分類，按照以下3個(gè)步驟來操作：第一步制作卡片，項(xiàng)目組將手機(jī)系統(tǒng)每個(gè)預(yù)先安裝軟件的桌面圖標(biāo)與文字說明繪制在一張卡片正面，卡片背面標(biāo)記一個(gè)統(tǒng)計(jì)編號(hào)，制作出一套卡片代表該手機(jī)系統(tǒng)預(yù)先安裝軟件。第二步為卡片分類，項(xiàng)目組邀請(qǐng)組外有該手機(jī)系統(tǒng)使用經(jīng)驗(yàn)的同學(xué)充當(dāng)用戶，按使用頻率將卡片分成3類，按照卡片背面的統(tǒng)計(jì)編號(hào)記錄分類結(jié)果。第三步為結(jié)果分析，用微軟公司出品的EXCEL軟件錄入分類結(jié)果，使用頻率高的軟件標(biāo)記為“3”，頻率一般為“2”，頻率低為“1”，以此建立預(yù)先安裝軟件用戶使用頻率的數(shù)據(jù)矩陣。再將結(jié)果導(dǎo)入IBM公司出品統(tǒng)計(jì)軟件SPSS作聚類分析，使用分析功能中的“系統(tǒng)聚類”，按照WARD法得出相關(guān)樹狀圖，選擇恰當(dāng)?shù)姆纸M線把系統(tǒng)預(yù)先安裝軟件分成三類，安置到3個(gè)頁面中。

3.卡片工具在APP改良項(xiàng)目中的應(yīng)用

卡片工具可用于制作APP改良設(shè)計(jì)的保真原型，模擬交互操作場景來驗(yàn)證方案可行性。一般智能手機(jī)尺寸較少，屏幕多為5英寸左右，用A4復(fù)印紙來制作1：1的卡片來模擬手機(jī)屏幕，從APP軟件的導(dǎo)航信息架構(gòu)中挑選主要頁面來制作卡片，在卡片上只需要繪制簡單頁面布局和功能按鍵即可。按照任務(wù)流程將卡片疊起，讓設(shè)計(jì)人員或用戶拿在手上模擬點(diǎn)擊翻頁來完成任務(wù)，來體驗(yàn)該流程設(shè)置是否合理，操作是否方便。根據(jù)不同的任務(wù)流程來調(diào)整卡片的順序，來實(shí)現(xiàn)APP改良方案的功能模擬，獲取其中交互體驗(yàn)用于調(diào)整方案，為制作高保真模型提供參考資料。

四、小結(jié)

界面設(shè)計(jì)課程的卡片工具運(yùn)用都以學(xué)生分組來實(shí)施，團(tuán)隊(duì)配合程度對(duì)教學(xué)實(shí)踐效果有較大影響，個(gè)別組員在制作卡片時(shí)稍有分心，就會(huì)影響團(tuán)隊(duì)整體進(jìn)度，教師需要加強(qiáng)教學(xué)場面的控制力，在課堂上及時(shí)走動(dòng)觀察各組情況，多給予同學(xué)鼓勵(lì)與指導(dǎo)。學(xué)生的能力差異會(huì)影響團(tuán)隊(duì)的合作，教師需要安排組織能力強(qiáng)的學(xué)生作組長，調(diào)動(dòng)團(tuán)隊(duì)積極性。同時(shí)，教師可將教學(xué)內(nèi)容歸納好，用網(wǎng)絡(luò)自媒體平臺(tái)在課堂上同步推送給學(xué)生，作為教學(xué)內(nèi)容的有效補(bǔ)充。

通過上述的教學(xué)實(shí)踐，卡片工具可運(yùn)用在界面設(shè)計(jì)課程的多個(gè)環(huán)節(jié)：前期的創(chuàng)意探尋，中期的信息導(dǎo)航構(gòu)建，后期的體驗(yàn)?zāi)M。學(xué)生在項(xiàng)目作業(yè)中多次實(shí)踐操練，能逐漸掌握卡片工具的運(yùn)用技巧，更好的達(dá)成教學(xué)目標(biāo)。傳統(tǒng)實(shí)物卡片以其制作簡便、成本低廉、圖文并茂、交流迅速等優(yōu)點(diǎn)，將會(huì)在設(shè)計(jì)類課程中有較大的推廣空間。

參考文獻(xiàn)：

[1]丁凱，李暉.互動(dòng)媒體藝術(shù)模塊化課程體系之《界面設(shè)計(jì)創(chuàng)意》研究[J]，南京藝術(shù)學(xué)院學(xué)報(bào)（美術(shù)與設(shè)計(jì)版），2012（12） [2]高鳳燕，郭玉真.界面設(shè)計(jì)課程模塊化教學(xué)體系探索與實(shí)踐[J]，藝術(shù)與設(shè)計(jì)（理論），2013（09）

[3]卡片分類：可用類別設(shè)計(jì)[M]，清華大學(xué)出版社，（澳） Donna Spencer，2010endprint