潘小棟

(浙江科技學(xué)院 藝術(shù)設(shè)計學(xué)院,杭州 310023)

10.3969/j.issn.1671-8798.2017.05.013

2017-04-17

潘小棟(1979— ),男,浙江省余姚人,講師,碩士,主要從事產(chǎn)品創(chuàng)新與交互設(shè)計研究。E-mail:adong915@126.com。

低保真原型在交互設(shè)計教學(xué)中的應(yīng)用與探索

潘小棟

(浙江科技學(xué)院 藝術(shù)設(shè)計學(xué)院,杭州 310023)

針對交互設(shè)計教學(xué)中出現(xiàn)的學(xué)生忽視框架層設(shè)計的問題,將低保真原型方法引入課堂。通過教學(xué)實例,從制作材料、制作要點、測試方法等方面闡述該方法的可行性及其給教學(xué)帶來的積極變化;同時,又剖析紙面原型在實踐中的局限性,進(jìn)一步提出如何結(jié)合手機(jī)應(yīng)用程序來實現(xiàn)低保真原型的數(shù)字化改良。教學(xué)實踐表明，低保真原型是一種值得應(yīng)用的交互設(shè)計教學(xué)方法。

低保真原型;交互設(shè)計教學(xué);用戶體驗要素;設(shè)計流程

隨著移動互聯(lián)網(wǎng)的發(fā)展與智能設(shè)備的興起,涉及用戶體驗的相關(guān)行業(yè)對人才的需求日趨緊迫,使得交互設(shè)計也正在成為國內(nèi)設(shè)計院校中的新興培養(yǎng)方向。然而,交互設(shè)計教學(xué)在國內(nèi)現(xiàn)行設(shè)計教育課程體系中尚處于蹣跚起步的階段[1-3],對如何有效培養(yǎng)符合行業(yè)需求的交互設(shè)計專業(yè)人才,如何科學(xué)合理地優(yōu)化課程設(shè)計環(huán)節(jié),國內(nèi)教育工作者們正處于邊實踐邊探索的過程中,其中低保真原型設(shè)計在整個教學(xué)環(huán)節(jié)中的作用與地位正在逐漸凸顯出來[4-5]。

1 低保真原型及其在交互設(shè)計教學(xué)中的必要性

1.1 低保真原型

原型(prototype)一詞來源于希臘語“prototypos”,最初的意思是具有原創(chuàng)性的初始模型[6]。隨著時間的推移,原型的含義已經(jīng)演化,如今在交互設(shè)計的概念中,原型可以理解成是在最終方案成形之前的一種設(shè)計呈現(xiàn)形式[7]。它將系統(tǒng)核心功能和關(guān)鍵流程以可視化的形態(tài)展現(xiàn)給用戶,用來征求意見、明確需求,同時也是開發(fā)團(tuán)隊成員之間用來討論、分析和驗證設(shè)計方案的工具。

根據(jù)制作精度與用途,原型可大致分為高保真與低保真兩類[8],其中高保真原型在交互體驗與視覺效果上均與最終產(chǎn)品非常接近,可提供最直觀的體驗效果,但其需要借助專業(yè)的原型軟件來制作完成,需要投入的時間、精力較多,并不適合在交互設(shè)計階段過早啟用。在設(shè)計方案尚未被驗證的前期階段,產(chǎn)品形態(tài)還存在諸多變數(shù),一旦方案需要大的調(diào)整甚至推翻重來,將會產(chǎn)生大量的資源浪費(fèi),因此高保真原型更多被使用在整個開發(fā)流程的后期。如圖1所示,低保真原型的主要呈現(xiàn)介質(zhì)是紙面,形式上以手工繪制的線框元素為主,它具有構(gòu)建快速、成本低廉的特點,可適應(yīng)反復(fù)的測試驗證與修改重建,滿足了前期階段的設(shè)計需求。

圖1 課程教學(xué)中制作的紙面原型Fig.1 Paper prototypes produced in course teaching

1.2 低保真原型方法引入課程教學(xué)的必要性

浙江科技學(xué)院工業(yè)設(shè)計專業(yè)從2012年起在本科高年級開設(shè)交互設(shè)計模塊化課程,在最初的教學(xué)設(shè)計中,借鑒企業(yè)經(jīng)驗并參考用戶體驗專家GARRETT對于用戶體驗要素5個層次(戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層)的經(jīng)典論述[9]。如圖2所示,將設(shè)計流程大致分解為“需求挖掘-概念設(shè)計-交互設(shè)計-視覺設(shè)計-高保真原型”,基本涵蓋了用戶體驗設(shè)計的完整流程,也符合該專業(yè)對學(xué)生的培養(yǎng)目標(biāo)與定位:培養(yǎng)具有產(chǎn)品全局觀的交互設(shè)計師、UI設(shè)計師。

圖2 用戶體驗要素的5個層次Fig.2 Five levels of user experience elements

然而,在實際教學(xué)中很快暴露了出問題,盡管課程對設(shè)計流程的劃分明確,但依舊有很多學(xué)生在各環(huán)節(jié)比重把握上存在較大的隨意性。學(xué)生依據(jù)自身性格、興趣的差異自然分化為兩個群體:一部分學(xué)生在前期階段較活躍,對選題分析、挖掘用戶需求與定義功能范圍等興趣濃厚,即專注于戰(zhàn)略層與范圍層的內(nèi)容,善于撰寫調(diào)研分析報告,可是缺乏將概念進(jìn)一步轉(zhuǎn)化成具體方案的動力和能力,出現(xiàn)虎頭蛇尾的現(xiàn)象;另一部分學(xué)生在選題與初稿之后,就一頭鉆進(jìn)自己喜歡的表現(xiàn)層設(shè)計中,執(zhí)迷于高保真原型的視覺與動態(tài)效果,甚至在完成視覺設(shè)計的細(xì)膩效果之后再反推交互流程與頁面邏輯。這兩種傾向都忽視了與用戶行為邏輯最直接的框架層與結(jié)構(gòu)層,導(dǎo)致用戶體驗設(shè)計流程的割裂,學(xué)生所做設(shè)計存在頁面邏輯錯誤與交互體驗不佳的問題也就不足為奇了。

這一狀態(tài)明顯偏離了培養(yǎng)目標(biāo),因此,本課題組著手對教學(xué)環(huán)節(jié)作調(diào)整,以實現(xiàn)范圍層到框架層之間的有效銜接。在原有信息架構(gòu)與線框草圖設(shè)計的基礎(chǔ)上引入低保真原型設(shè)計,淡化高保真原型的要求,并增加原型測試環(huán)節(jié),讓交互方案在進(jìn)入視覺設(shè)計流程之前,有可能進(jìn)行多次迭代修改,從而避免交互體驗上的結(jié)構(gòu)性錯誤[10]。

2 低保真原型在教學(xué)中的應(yīng)用

低保真原型在Google、騰訊、阿里巴巴、網(wǎng)易等國內(nèi)外知名互聯(lián)網(wǎng)企業(yè)的產(chǎn)品開發(fā)流程中已有較為廣泛的運(yùn)用,設(shè)計師們通過實踐總結(jié)出了一系列值得借鑒的經(jīng)驗[11-13]。但由于學(xué)校與企業(yè)在人員專業(yè)程度、團(tuán)隊協(xié)作能力、真實數(shù)據(jù)支撐等諸多方面存在著客觀差距,因此,低保真原型在高校教學(xué)環(huán)境中的應(yīng)用實施還需要根據(jù)實際情況,在多個方面做到因地制宜,以更符合學(xué)生能力與教學(xué)場景的實際。

2.1 介入課程教學(xué)的時機(jī)

以交互模塊的核心課程“目標(biāo)導(dǎo)向設(shè)計”為例,在完成目標(biāo)識別、需求分析、信息架構(gòu)等一系列前期任務(wù)之后,學(xué)生對自己設(shè)計的產(chǎn)品邏輯已初步形成,此時開始指導(dǎo)學(xué)生進(jìn)入低保真原型設(shè)計環(huán)節(jié)是較為合適的時間點。同時,由于原型制作的目的在于溝通、測試、評估與完善方案,而并不是作為交付效果的展示,因此,在初步完成信息架構(gòu)與流程圖草稿后就著手制作原型,也利于學(xué)生盡早通過原型測試來驗證前期內(nèi)容,形成設(shè)計上的快速迭代。

2.2 人員組織形式

紙面原型的制作、討論與測試工作較適合多人合作,所以課程教學(xué)中一般將班級學(xué)生按選題劃分成3人小組的形式,通過組員間的協(xié)作來完善交互邏輯并且提高工作效率。

2.3 制作材料的準(zhǔn)備

紙面原型的創(chuàng)建較為簡便,材料方面只需要一些日常文具,例如紙張、易事貼、固體膠、簽字筆、馬克筆、尺子、剪刀等,它們簡單輕便且不依賴電源和網(wǎng)絡(luò),便于在普通教室中開展。

2.4 制作方式與要點

紙面原型的制作方式較為簡便,例如針對移動端APP設(shè)計,可將手機(jī)輪廓線框打印出來做模板底稿使用以提高效率。如圖3所示,指導(dǎo)學(xué)生用簡約樸實的線條與文字,把概念設(shè)計中的界面元素按比例繪制在原型底稿上即可,同時將圖標(biāo)狀態(tài)、浮層與彈出框等元素制作成獨(dú)立模塊,以便測試時配合手工操作來使用。

圖3 學(xué)生制作的“烘焙菜譜APP”紙面原型Fig.3 Paper prototypes of “Baking recipes APP” made by students

在低保真的紙面原型制作環(huán)節(jié)中,有以下幾個要點值得注意：

一是真實的原型尺寸。目前教學(xué)中的設(shè)計對象以移動端APP為主,可選擇較主流的手機(jī)輪廓作為原型底板(如iPhone、小米等)。與電腦網(wǎng)頁用鼠標(biāo)移動點擊不同,智能手機(jī)在操作上通過手指直接觸摸,原型物理尺寸會影響到測試用戶對產(chǎn)品的理解和操作感受,所以在原型尺寸的設(shè)定上要盡量接近真實手機(jī)的數(shù)據(jù)[14-15]。

二是提前準(zhǔn)備常用控件。在移動端APP的設(shè)計中,不論iOS還是Android系統(tǒng),都有一些系統(tǒng)標(biāo)準(zhǔn)的控件元素可以拆分出來單獨(dú)制作。如圖4所示,控件包括標(biāo)簽欄、鍵盤、文本輸入框、高亮框、通知、分段式標(biāo)簽等。靈活運(yùn)用這些控件,能在很大程度上提高效率[16]。

圖4 學(xué)生自制的紙面原型控件庫Fig.4 Paper prototyping control library made by students

三是色彩以黑白灰為主。除少量色彩點綴強(qiáng)調(diào)外,整體盡量采用黑白灰色,在繪制方式上也最好保持簡約樸實的風(fēng)格,以避免視覺因素對測試環(huán)節(jié)產(chǎn)生干擾。

四是靈活處理交互細(xì)節(jié)。對于下拉刷新、進(jìn)度條百分比、圖片翻轉(zhuǎn)等動態(tài)效果,無需花費(fèi)時間精力在紙面原型中去模擬。小組成員可以在原型測試場景中結(jié)合口述提示的方式來靈活處理,例如“此處有下拉刷新動畫”“進(jìn)度條在行進(jìn)中”,等等。

2.5 溝通與測試

在課程中紙面原型是小組成員用來溝通設(shè)計方案的有效方法,也是進(jìn)行可用性測試評估的重要環(huán)節(jié)。紙面原型是用紙片素材模擬交互元素,因此本身并不具備反饋能力,需要成員間的合作才能真正發(fā)揮作用[17]。

首先進(jìn)行適當(dāng)?shù)慕巧止?小組中的三名學(xué)生分別充當(dāng)系統(tǒng)、主持人、記錄員的角色。系統(tǒng)角色負(fù)責(zé)模擬系統(tǒng)的操作反饋,例如進(jìn)行界面元素的移動、切換,必要時用語言描述交互效果等;主持人對被測用戶進(jìn)行必要的引導(dǎo)、輔助與解釋;記錄員將測試環(huán)節(jié)中的反饋與問題記錄備用。然后從小組以外邀請測試用戶角色,因為沒有參與過該原型設(shè)計的學(xué)生,對交互方案的理解水平和反應(yīng)狀態(tài)會更趨于接近真實用戶,如此得出的測試結(jié)果才更客觀有效[18]。

3 低保真原型在教學(xué)中的實踐效果

通過將低保真原型帶入課堂,給交互設(shè)計課程的教學(xué)帶來了清新之風(fēng),學(xué)生改變了以往空談概念難以落地轉(zhuǎn)化,或執(zhí)迷于視覺效果而忽視交互體驗的學(xué)習(xí)狀態(tài)。具體表現(xiàn)在以下幾個方面。

3.1 設(shè)計流程的優(yōu)化

低保真原型的創(chuàng)建成本低,制作效率高,學(xué)生能夠在課堂上借助簡單材料快速創(chuàng)建出原型,邊思考討論,邊動手制作,不再專注于對高保真視覺稿的描摹刻畫,注意力轉(zhuǎn)向到了探討交互方案本身。如圖5所示,學(xué)生們在課堂中繪制了大量紙上原型,雖然手工制作的低保真原型在視覺上也許比較簡陋,但卻夯實了框架層與結(jié)構(gòu)層的工作,設(shè)計流程得到了切實改善。

圖5 學(xué)生制作的紙面原型Fig.5 Paper prototypes made by students

3.2 團(tuán)隊意識的加強(qiáng)

低保真原型作為一種適合多人協(xié)作的設(shè)計方法,幾乎沒有技術(shù)門檻,不受繪畫與軟件水平的制約,每個學(xué)生都能參與到小組討論和制作中來。協(xié)作氛圍讓學(xué)生的思維更加活躍,設(shè)計靈感更易激發(fā),通過相互檢驗還減少了邏輯漏洞的出現(xiàn)。

3.3 修改意愿的轉(zhuǎn)變

由于低保真原型的創(chuàng)建便捷,能夠在短時間內(nèi)發(fā)展出較多方案,并對它們進(jìn)行測試比較,面對被驗證為不合理的方案,學(xué)生也比以往更樂意放棄,因為修改甚至重建的成本都很低。

3.4 設(shè)計效率的提升

相比高保真原型,低保真原型不僅在制作上節(jié)約了大量時間和精力,同時由于形式上的簡約樸實而排除了視覺因素的干擾,使學(xué)生能夠更專注于交互設(shè)計的本身,最終更有效率地推舉出最佳方案。

4 低保真原型的局限與探索

4.1 低保真原型的局限性

課堂教學(xué)環(huán)節(jié)的實踐證明了低保真原型在交互設(shè)計教學(xué)中的有效性。但同時也發(fā)現(xiàn)以紙面原型為主的低保真原型自身也存在一定的局限性,主要表現(xiàn)在以下方面：

一是紙面原型保存不便。紙面原型由底稿、界面模塊、控件等一系列紙質(zhì)元件構(gòu)成,一個完整的交互原型往往會包含多個獨(dú)立界面,綜合起來會產(chǎn)生大量的原型紙片,在客觀上給管理與保存帶來不便。

二是測試工作的制約因素較多。紙面原型沒有計算機(jī)系統(tǒng)的參與,所有的交互反饋都需要人工模擬操作,因此，測試效果在較大程度上受制于模擬系統(tǒng)角色的成員表現(xiàn)。在一個小組只有一份紙面原型的情況下只能安排現(xiàn)場測試,無法邀請遠(yuǎn)程用戶,也不能同時進(jìn)行多位用戶測試,使其效率受到限制。

三是對交互細(xì)節(jié)的支持不足。雖然這一點嚴(yán)格而論不能算紙面原型的缺點,本身目標(biāo)定位就不在此,但交互體驗是一個整體,要追求交互體驗的最優(yōu)化,細(xì)節(jié)完善也是重要的,而單一依靠紙面原型是做不到的。

4.2 對低保真原型的探索

針對上述問題,教學(xué)中在紙面原型的基礎(chǔ)上進(jìn)行了新的探索嘗試,例如利用“POP-Prototyping on Paper”“快現(xiàn)”等移動端的原型設(shè)計應(yīng)用,如圖6所示,可以通過手機(jī)拍攝紙面原型,導(dǎo)入后在圖片中增加鏈接熱區(qū)(例如按鈕區(qū)域、列表區(qū)域等),設(shè)定相應(yīng)的交互動作(如單擊、雙擊、滑動等),然后選擇要跳轉(zhuǎn)的目標(biāo)頁面圖片,就可以完成一組交互動作。這種結(jié)合應(yīng)用程序的方式,既保留了紙面原型簡單快捷低成本的優(yōu)勢,又可以在手機(jī)屏幕上真實地操作體驗,從而增強(qiáng)了實時互動性。此類應(yīng)用的介入,讓紙面原型的各種局限性都得到了很好的彌補(bǔ)。如今在學(xué)生群體中智能手機(jī)普及率近乎100%,因此,這種低保真原型的創(chuàng)新運(yùn)用方式也便于在課堂教學(xué)中采用與推廣。

圖6 紙面原型結(jié)合POP使用演示Fig.6 Combined use of paper prototypes and “POP” app

此外,在借助計算機(jī)的情況下,還可使用墨刀、InVision、Mockplus等原型工具,通過較豐富的交互元件庫創(chuàng)建低保真原型,并輸出到手機(jī)端進(jìn)行實時交互的體驗。但其學(xué)習(xí)曲線相對陡峭,學(xué)生們需要花費(fèi)更多精力去掌握軟件技能,這又對如何在課堂中保持設(shè)計的專注度提出了挑戰(zhàn)。因此，這類工具在教學(xué)中只能根據(jù)必要性有選擇地使用。

5 結(jié) 語

互聯(lián)網(wǎng)時代各種新技術(shù)新應(yīng)用不斷涌現(xiàn),面對眾多選擇,作為教育工作者需要把握交互設(shè)計教學(xué)中的任務(wù)核心,緊密圍繞設(shè)計的本質(zhì)選擇最佳教學(xué)方案。紙面原型雖然存在一定局限性,但仍不失作為課堂運(yùn)用的設(shè)計研討方法。這一看似原始的低技術(shù)手段卻最貼近心靈,由集體參與感所激發(fā)出的創(chuàng)作熱情,是通過其他方法很難獲得的。紙面原型與智能手機(jī)應(yīng)用結(jié)合所創(chuàng)建的數(shù)字化低保真原型,進(jìn)一步提升了原型的實用性,是當(dāng)前較為值得采用的交互設(shè)計課堂教學(xué)方法。

[1] 劉毅.工作室體系下的交互設(shè)計教學(xué)初探:以廣美交互設(shè)計工作室為例[J].裝飾,2013(3):144.

[2] 白然.高校交互設(shè)計實踐教學(xué)的探索研究:以廈門理工學(xué)院為例[J].美術(shù)教育研究,2016(10):75.

[3] 李奕.大數(shù)據(jù)時代的交互設(shè)計教學(xué)模式探討[J].美術(shù)教育研究,2015(2):174.

[4] 胡瑩,李璐,王巍.快速概念設(shè)計方法:面向教學(xué)的交互設(shè)計方法[J].裝飾,2010(9):98.

[5] 張勁松.面向用戶體驗行業(yè)的交互設(shè)計模塊化教學(xué)改革思路探析[J].裝飾,2012(12):87.

[6] 陳媛媛.淺析交互設(shè)計中的紙上原型設(shè)計[J].設(shè)計藝術(shù)研究,2012,2(3):41.

[7] MOGGRIDGE B. Designing interactions[M].Massachusetts: The MIT Press,2007:685.

[8] 劉彥.基于IOS環(huán)境的應(yīng)用軟件交互設(shè)計策略[J].信息化研究,2011,37(5):25.

[9] GARRETT J J.用戶體驗要素:以用戶為中心的產(chǎn)品設(shè)計[M].范曉燕,譯.北京:機(jī)械工業(yè)出版社,2011:28-30.

[10] 艾萍.UI設(shè)計中界面原型作用的研究[J].包裝工程,2013,34(18):38.

[11] 騰訊公司用戶研究與體驗設(shè)計部.在你身邊,為你設(shè)計:騰訊的用戶體驗設(shè)計之道[M].北京:電子工業(yè)出版社,2013:274-275.

[12] 劉津,李月.破繭成蝶:用戶體驗設(shè)計師的成長之路[M].北京:人民郵電出版社,2014:154.

[13] 傅小貞,胡甲超,鄭元攏.移動設(shè)計[M].北京:電子工業(yè)出版社,2013:283.

[14] GINSBURG S. iPhone應(yīng)用用戶體驗設(shè)計實戰(zhàn)與案例[M].師蓉,樊旺斌,譯.北京:機(jī)械工業(yè)出版社,2011:107.

[15] NIELSEN J, BUDI R.貼心設(shè)計:打造高可用性的移動產(chǎn)品[M].?；?譯.北京:人民郵電出版社,2013:38-39.

[16] 克拉克.觸動人心:設(shè)計優(yōu)秀的iPhone應(yīng)用[M].包季真,譯.北京:電子工業(yè)出版社,2011:135.

[17] 張婷,饒培倫,SALVENDY G.手機(jī)產(chǎn)品開發(fā)早期階段用戶界面評估方法[J].科技導(dǎo)報,2009,27(14):80.

[18] 劉再行.UI交互設(shè)計流程的探索與教學(xué)實踐[J].裝飾,2015(1):136.

Applicationandexplorationoflow-fidelityprototypingininteractiondesignteaching

PAN Xiaodong

(School of Design, Zhejiang University of Science and Technology, Hangzhou 310023, Zhejiang, China)

In response to students’ ignorance of the framework layer design in the course of the teaching practice of interaction design, the low-fidelity prototyping method is introduced into the classroom. Feasibility of the method, together with positive changes after implementation of teaching, is expounded through teaching examples from aspects of material tools, production points and testing methods. Moreover,as for the limitations of the paper prototypes in practice, it puts forward how to combine APP to realize the digital improvement of low-fidelity prototypes. It is proved by teaching practice that the low-fidelity prototyping is a valuable and applicable interactive design teaching method.

low-fidelity prototyping; interaction design teaching; user experience elements; design flow

G642.41

A

1671-8798(2017)05-0394-07