童 芳（南京藝術(shù)學(xué)院 設(shè)計(jì)學(xué)院，江蘇 南京 210013）

“口袋博物館”的用戶體驗(yàn)要素設(shè)計(jì)①

童 芳（南京藝術(shù)學(xué)院 設(shè)計(jì)學(xué)院，江蘇 南京 210013）

本文以原創(chuàng)移動(dòng)應(yīng)用設(shè)計(jì)項(xiàng)目《云錦織道》和《斗栱》展開(kāi)實(shí)例分析，梳理文化教育類應(yīng)用的用戶體驗(yàn)設(shè)計(jì)方法：以“口袋博物館的”概念，以不同非遺文化主題的特征為基礎(chǔ)，從用戶體驗(yàn)要素設(shè)計(jì)的戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層五個(gè)不同方面開(kāi)展文化教育類移動(dòng)應(yīng)用設(shè)計(jì)研究。

非物質(zhì)文化遺產(chǎn)；移動(dòng)應(yīng)用設(shè)計(jì)；用戶體驗(yàn)設(shè)計(jì)要素

一、研究背景

1. 移動(dòng)互聯(lián)網(wǎng)使用現(xiàn)狀

隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，顯示與交互技術(shù)的進(jìn)步，以及移動(dòng)終端的普及，移動(dòng)應(yīng)用設(shè)計(jì)覆蓋各個(gè)領(lǐng)域?！兑苿?dòng)互聯(lián)網(wǎng)時(shí)代》一書(shū)中數(shù)據(jù)分析：2014年年底，全球接入互聯(lián)網(wǎng)的用戶達(dá)到總?cè)丝诘?0%，全球移動(dòng)互聯(lián)網(wǎng)用戶接近30億。到2020年，預(yù)計(jì)全球互聯(lián)設(shè)備將產(chǎn)生500億的連接②易北辰：《移動(dòng)互聯(lián)網(wǎng)時(shí)代》，企業(yè)管理出版社2014年版。?！?015年中國(guó)移動(dòng)互聯(lián)網(wǎng)研究報(bào)告》指出：截止到2015年12月，國(guó)內(nèi)在網(wǎng)活躍移動(dòng)智能設(shè)備數(shù)量達(dá)到8.99億，設(shè)備用戶年齡構(gòu)成中，80后接近8成。③2015年中國(guó)移動(dòng)互聯(lián)網(wǎng)研究報(bào)告。Http：//tech.sina.com.cn/2016-01-08/doc-ifxnkkuy7746197.shtml

移動(dòng)互聯(lián)網(wǎng)全面覆蓋了公眾的生活，同時(shí)成為傳統(tǒng)文化教育信息傳遞的優(yōu)質(zhì)媒體，使得文化傳播進(jìn)入了一個(gè)新格局。目前許多中國(guó)傳統(tǒng)文化在展示與推廣中融入數(shù)字和互動(dòng)等新媒體呈現(xiàn)方式，其中關(guān)于非物質(zhì)文化遺產(chǎn)的移動(dòng)應(yīng)用設(shè)計(jì)給公眾帶來(lái)了新穎獨(dú)特的體驗(yàn)。

2. 課題背景介紹

中國(guó)古典文化歷史悠久、品類眾多，是歷年來(lái)各類藝術(shù)設(shè)計(jì)創(chuàng)作關(guān)注主題，南京藝術(shù)學(xué)院師生近年來(lái)多次探索如何以新的藝術(shù)語(yǔ)言呈現(xiàn)經(jīng)典文化成就?！霸棋\木機(jī)妝花手工織造技藝”與“中國(guó)傳統(tǒng)木結(jié)構(gòu)營(yíng)造技藝”于2009年分別經(jīng)聯(lián)合國(guó)教科文組織評(píng)選確定而列入《人類非物質(zhì)文化遺產(chǎn)代表作名錄》（下文簡(jiǎn)稱非遺）。自2013年南藝設(shè)計(jì)學(xué)院教師著手以保護(hù)傳統(tǒng)文化為目標(biāo)的移動(dòng)應(yīng)用（App）設(shè)計(jì)，目前已組織、策劃、設(shè)計(jì)、開(kāi)發(fā)多個(gè)傳統(tǒng)文化主題的移動(dòng)應(yīng)用項(xiàng)目，其中二項(xiàng)非遺文化主題的移動(dòng)應(yīng)用《云錦織道》、《斗栱》（斗栱為中國(guó)傳統(tǒng)木結(jié)構(gòu)建筑重要構(gòu)件）因設(shè)計(jì)優(yōu)良而入選由中國(guó)文化部主辦的“第二屆中國(guó)設(shè)計(jì)大展”。此外《斗栱》獲得全球大型綜合性設(shè)計(jì)競(jìng)賽雙年展“GDC 15”交互設(shè)計(jì)類唯一提名獎(jiǎng)。目前二款應(yīng)用在蘋果App Store發(fā)布審核中，即將正式上線。

在實(shí)踐以現(xiàn)代數(shù)字媒體表現(xiàn)世界非遺項(xiàng)目的移動(dòng)應(yīng)用設(shè)計(jì)過(guò)程中，對(duì)于如何通過(guò)移動(dòng)互聯(lián)網(wǎng)平臺(tái)推廣中國(guó)古典文化，令大眾用戶便捷獲取“非日常生活相關(guān)”的信息，了解傳統(tǒng)技藝在歷史語(yǔ)境中的關(guān)系與文化意義，童芳與盧毅二位主創(chuàng)教師以互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)方法，結(jié)合“口袋博物館”概念，以增強(qiáng)用戶體驗(yàn)方法梳理設(shè)計(jì)工作的實(shí)踐流程，嘗試“設(shè)計(jì)+技術(shù)”形式解碼經(jīng)典傳統(tǒng)技藝。文章以《云錦織道》和《斗栱》非遺項(xiàng)目為設(shè)計(jì)案例分析，研究傳統(tǒng)文化主題應(yīng)用的用戶體驗(yàn)設(shè)計(jì)。

二、用戶體驗(yàn)設(shè)計(jì)要素分析

經(jīng)典專著《用戶體驗(yàn)的要素》一書(shū)將用戶體驗(yàn)解析為從概念抽象到視覺(jué)具象的五個(gè)層面：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層與表現(xiàn)層。④Jesse James Garrett：《用戶體驗(yàn)的要素——以用戶為中心的Web設(shè)計(jì)》，機(jī)械工業(yè)出版社2008年版。如圖所示（圖1）：“戰(zhàn)略層”是互聯(lián)網(wǎng)產(chǎn)品移動(dòng)應(yīng)用的目標(biāo)用戶和設(shè)計(jì)目標(biāo)；“范圍層” 是應(yīng)用的內(nèi)容需求和功能規(guī)格；“結(jié)構(gòu)層”為應(yīng)用的信息構(gòu)架與交互設(shè)計(jì)；“框架層”體現(xiàn)為信息設(shè)計(jì)和界面設(shè)計(jì)；“表現(xiàn)層”則是最終呈現(xiàn)給用戶的視覺(jué)設(shè)計(jì)。

圖1 用戶體驗(yàn)的要素 圖片來(lái)源《用戶體驗(yàn)的要素》第二章

由上述理論觀點(diǎn)可見(jiàn)，由用戶操作控制而呈現(xiàn)的移動(dòng)應(yīng)用，首先需要關(guān)注的設(shè)計(jì)不是可視的視覺(jué)表層與裝飾，而是準(zhǔn)確定義用戶與目標(biāo)；設(shè)計(jì)的過(guò)程，是從理性研究所得信息結(jié)構(gòu)到感性的視覺(jué)表現(xiàn)過(guò)程。移動(dòng)應(yīng)用的設(shè)計(jì)之美是建立在用戶對(duì)交互產(chǎn)品的使用滿意度基礎(chǔ)上，用戶體驗(yàn)的滿意度貫穿用戶全部使用過(guò)程，不只限于用戶最終面對(duì)的“表現(xiàn)層”——一系列由文字和圖片編排構(gòu)成的界面。靜態(tài)畫(huà)面的美觀無(wú)疑能提升作品的品位，但交互作品的基礎(chǔ)是符合邏輯、易于理解的信息構(gòu)架，進(jìn)而結(jié)合有趣而合理的交互方式和手勢(shì)操作，配合表現(xiàn)主題細(xì)節(jié)的原創(chuàng)性圖形設(shè)計(jì)和美觀界面設(shè)計(jì)，具備功能性或引導(dǎo)性的精美動(dòng)畫(huà)，才能最終轉(zhuǎn)化為豐富優(yōu)秀的設(shè)計(jì)作品。另外，用戶體驗(yàn)中每一層級(jí)的結(jié)果都依賴于上一個(gè)層級(jí)的定位，但每一個(gè)層級(jí)之間也不是封閉的單向因果關(guān)系，而是內(nèi)容、功能和美學(xué)匯集一起，最終完成產(chǎn)生一項(xiàng)整體設(shè)計(jì)，方可達(dá)到良好的用戶體驗(yàn)。

三、文化類App的用戶體驗(yàn)要素設(shè)計(jì)方法

1. 針對(duì)目標(biāo)用戶需求確定內(nèi)容需求——從

“戰(zhàn)略層”到“范圍層”

互聯(lián)網(wǎng)產(chǎn)品的信息架構(gòu)設(shè)計(jì)，分為“自上而下”和“自下而上”二種方式。前者即根據(jù)目標(biāo)用戶需求和應(yīng)用的設(shè)計(jì)目標(biāo)，從無(wú)到有采集內(nèi)容與設(shè)計(jì)圖片、編輯文本、創(chuàng)作視頻音頻相關(guān)資料，再整理移動(dòng)應(yīng)用作品信息構(gòu)架；后者則以現(xiàn)有的圖文資料為素材，梳理整合產(chǎn)品的信息構(gòu)架。通常互聯(lián)網(wǎng)產(chǎn)品采用二者結(jié)合的方式進(jìn)行設(shè)計(jì)。

圖2

圖3

圖4

圖5

圖6

（1）自上而下——根據(jù)需求與目標(biāo)明確核心內(nèi)容

設(shè)計(jì)團(tuán)隊(duì)根據(jù)目標(biāo)用戶的需求與移動(dòng)應(yīng)用的目標(biāo)，以“口袋博物館”角色確定移動(dòng)應(yīng)用的核心內(nèi)容。因“設(shè)備用戶年齡構(gòu)成中80后接近8成”，在前期針對(duì)25—35歲群體調(diào)研中發(fā)現(xiàn)下列情況：第一，大眾對(duì)世界非遺文化認(rèn)知有限，對(duì)于“云錦”略有耳聞的人不少，參觀主題性博物館“南京云錦博物館” 的人數(shù)不多；實(shí)地考察過(guò)“傳統(tǒng)木結(jié)構(gòu)建筑”、對(duì)“斗栱”有所了解的人更少。第二，實(shí)地參觀博物館觀眾也未必了解非遺文化，例如“云錦博物館”有真實(shí)織機(jī)展陳，但一般無(wú)工作人員演示織錦工藝，觀眾無(wú)法直觀了解織造技藝。對(duì)于“傳統(tǒng)木結(jié)構(gòu)建筑技藝”大眾因從木建筑外觀無(wú)法了解木結(jié)構(gòu)內(nèi)部，也就無(wú)從認(rèn)知斗栱概念以及木建筑營(yíng)造技藝。第三，相關(guān)主題書(shū)籍和專題紀(jì)錄片受眾有局限，書(shū)籍閱讀人群主要是準(zhǔn)專業(yè)與專業(yè)人士，相關(guān)紀(jì)錄片因片長(zhǎng)、播出時(shí)間段等客觀因素，不完全符合當(dāng)前觀眾追求趣味性的碎片化閱讀方式。第四，相關(guān)題材藝術(shù)與設(shè)計(jì)作品未能廣泛進(jìn)入大眾視野，非遺項(xiàng)目一直是藝術(shù)家、設(shè)計(jì)師關(guān)注的創(chuàng)作主題，但因展出空間、發(fā)布渠道、時(shí)間限制、受眾面窄等因素同樣無(wú)法大范圍傳播信息。

傳統(tǒng)文化主題的移動(dòng)應(yīng)用與專業(yè)性主題博物館，二者都承擔(dān)著學(xué)習(xí)與教育的功能。目前許多博物館已開(kāi)始在展示與服務(wù)中融入數(shù)字和互動(dòng)等新媒體元素，其中博物館App給公眾帶來(lái)了新穎獨(dú)特的體驗(yàn)。兩者相較，博物館提供相關(guān)主題的全面回顧與冷靜審視，而移動(dòng)產(chǎn)品的平臺(tái)屬性與用戶的閱讀習(xí)慣，意味著即使以“學(xué)習(xí)知識(shí)”為目的的，也宜符合“小而美”的專屬特性，是一種用戶隨時(shí)可達(dá)的便捷“口袋博物館”。以故宮博物院出品的一系列應(yīng)用為例，其中有發(fā)布在iPad表現(xiàn)某個(gè)專題的應(yīng)用如《清朝皇帝服飾》，“邀請(qǐng)用戶與清代帝冠服進(jìn)行一次全方位的親密接觸”；《紫禁城祥瑞》，“獨(dú)家揭秘紫禁城的祥瑞符號(hào)”；《胤禛美人圖》和《韓熙載夜宴圖》，“全面調(diào)動(dòng)用戶感官，深度賞析相關(guān)畫(huà)作及其背景知識(shí)”；《皇帝的一天》，“專為孩子們講述過(guò)去、深入清宮，了解皇帝一天的工作起居與生活?yuàn)蕵?lè)”；還有專門發(fā)布于手機(jī)端的《每日故宮》以日歷形式“每日甄選一款館藏臻品，縱覽各領(lǐng)域珍貴文物及代表作品”。①蘋果App Store中“故宮出品應(yīng)用”的內(nèi)容提要信息。（圖2-7）

基于上述調(diào)研分析，設(shè)計(jì)團(tuán)隊(duì)確定世界非遺文化主題適合移動(dòng)應(yīng)用表現(xiàn)形式，觀眾無(wú)需進(jìn)入博物館即能以趣味、交互方式學(xué)習(xí)，無(wú)論是展開(kāi)全面閱讀，或單獨(dú)瀏覽某部分信息，都能由用戶自定義深入相關(guān)主題，從而達(dá)到傳承非遺文化宗旨。設(shè)計(jì)團(tuán)隊(duì)將應(yīng)用的目標(biāo)用戶定義為“20-35歲、愛(ài)好中國(guó)非物質(zhì)文化遺產(chǎn)項(xiàng)目的非專業(yè)人士”；設(shè)計(jì)目標(biāo)為“讓用戶通過(guò)應(yīng)用能較為輕松直觀了解非遺文化，讓普通人以?shī)蕵?lè)的方式接受、學(xué)習(xí)傳統(tǒng)文化”。

因?yàn)槟繕?biāo)用戶針對(duì)業(yè)余愛(ài)好者，設(shè)計(jì)目標(biāo)為普及推廣古典文化，應(yīng)用的內(nèi)容信息不宜過(guò)深過(guò)廣，要避免設(shè)計(jì)成 iBook電子書(shū)形式。設(shè)計(jì)團(tuán)隊(duì)將應(yīng)用的內(nèi)容和范疇定位為目標(biāo)觀眾易于接受的精選信息內(nèi)容和適中信息數(shù)量，因此二款應(yīng)用的核心內(nèi)容分別確定為“妝花織造技藝”和“斗栱榫卯結(jié)構(gòu)”。具體手段上采用兼顧常識(shí)型和體驗(yàn)型的學(xué)習(xí)和欣賞方式，其中“云錦”側(cè)重于表現(xiàn)常識(shí)信息讓觀眾欣賞學(xué)習(xí)妝花織造技藝，“斗栱”則重點(diǎn)以用戶的交互操作去體驗(yàn)了解其榫卯結(jié)構(gòu)。

圖7 （圖2-圖7 故宮出品移動(dòng)應(yīng)用界面）

圖8 《云錦織道》導(dǎo)航菜單

圖9 《云錦織道》“工藝流程”的五個(gè)步驟

圖10 《云錦織道》“織機(jī)”界面

（2）自下而上——重組信息表現(xiàn)文化敘述與內(nèi)涵

“妝花手工織造技藝”與“木結(jié)構(gòu)營(yíng)造技藝”兩項(xiàng)世界非遺項(xiàng)目，傳承源遠(yuǎn)流長(zhǎng)，工藝精妙絕倫，相關(guān)知識(shí)從博物館、歷史留存文物，各類專業(yè)書(shū)籍集結(jié)成文數(shù)十萬(wàn)字都難以概全，如何在已有浩瀚信息中汲取適當(dāng)內(nèi)容量？前文提及移動(dòng)應(yīng)用與專業(yè)實(shí)體博物館訴求不同，需要找到適合目標(biāo)觀眾的敘事方式，才能達(dá)到“口袋博物館”的效用，這類設(shè)計(jì)需要經(jīng)過(guò)研究與策劃，以類似“小型專題展覽”而開(kāi)展思路，而非任意提取相關(guān)主題的某點(diǎn)特征延伸設(shè)計(jì)。

以云錦為例，木機(jī)妝花手工織造技藝價(jià)值在于其歷史與工藝，業(yè)內(nèi)人士最引以為傲“妝花”、“挑花結(jié)本”等概念，如果將專業(yè)名詞直接呈現(xiàn)在應(yīng)用的導(dǎo)航系統(tǒng)會(huì)令人產(chǎn)生距離感，難以達(dá)到普及信息目的。因此作品從命名到信息構(gòu)架均采用大眾易理解的通識(shí)方式：云錦項(xiàng)目命名為《云錦織道》，強(qiáng)調(diào)非遺主題“織造技藝”；信息構(gòu)架以“歷史”、“工藝流程”和“織機(jī)”三項(xiàng)內(nèi)容（圖8），開(kāi)啟“云錦妝花織造技藝”和觀者之間的無(wú)障礙溝通。其中“工藝流程”就是對(duì)應(yīng)前期設(shè)定的云錦應(yīng)用核心 “妝花織造技藝”，重要“妝花”工藝在整體工藝步驟中系統(tǒng)展示，以實(shí)拍圖像、靜態(tài)或動(dòng)態(tài)圖形設(shè)計(jì)、說(shuō)明文本、演示視頻逐一直觀詮釋（圖9）?！对棋\織道》中另一重要元素是“織機(jī)”，這是世界手工紡織業(yè)中最龐大、最巧妙的大花樓機(jī)，用戶進(jìn)入該選項(xiàng)探索三維織機(jī)，在交互過(guò)程中直觀學(xué)習(xí)織機(jī)結(jié)構(gòu)與對(duì)應(yīng)工藝：機(jī)身、花樓、開(kāi)口機(jī)構(gòu)、打緯機(jī)構(gòu)和送經(jīng)取卷（圖10）。

2. 創(chuàng)建“看不見(jiàn)”交互設(shè)計(jì)——從“結(jié)構(gòu)層”到“框架層”

（1）采用扁平化的信息架構(gòu)

《用戶體驗(yàn)要素》一書(shū)寫(xiě)到：“信息架構(gòu)著重于設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu)，從而讓用戶可以高效率有效地瀏覽網(wǎng)站的內(nèi)容?！保?］傳統(tǒng)互聯(lián)網(wǎng)瀏覽信息以“點(diǎn)擊、進(jìn)入”為交互方式，逐層漸進(jìn)由寬泛信息深入至具體細(xì)節(jié)。相較傳統(tǒng)互聯(lián)網(wǎng)用戶身體局限于桌面狀態(tài)，移動(dòng)應(yīng)用用戶的行為可能發(fā)生在移動(dòng)、紛雜的環(huán)境中，因此在設(shè)計(jì)上除了突出核心內(nèi)容與功能，還要避免用戶進(jìn)入更深的層級(jí)才能訪問(wèn)內(nèi)容，避免信息的深度嵌套而導(dǎo)致用戶的觀察路徑混淆，甚至找不到應(yīng)用提供的信息內(nèi)容。概括而言在移動(dòng)應(yīng)用設(shè)計(jì)中需保持信息架構(gòu)的扁平化。

《云錦織道》若按傳統(tǒng)平面作品劃分有近百靜態(tài)頁(yè)面，140多個(gè)可操作的交互點(diǎn)，如果信息層級(jí)過(guò)于深入，用戶需要多次操作才能體驗(yàn)全部完整信息，那么在移動(dòng)環(huán)境下可能遺漏、甚至錯(cuò)失重點(diǎn)信息?！对棋\織道》信息結(jié)構(gòu)采用信息扁平化策略，為了重點(diǎn)呈現(xiàn)核心內(nèi)容，設(shè)定用戶開(kāi)啟應(yīng)用即進(jìn)入“工藝流程”，摒棄了互聯(lián)網(wǎng)產(chǎn)品常規(guī)通過(guò)“首頁(yè)”再進(jìn)入“工藝流程”；用戶還可根據(jù)自身需求通過(guò)全局導(dǎo)航菜單隨時(shí)進(jìn)入“歷史”與“織機(jī)”欄目。為了提示用戶不遺漏織造工藝的步驟與細(xì)節(jié)，每項(xiàng)步驟的二級(jí)頁(yè)面導(dǎo)航條采用不同色調(diào)底紋圖形，并以 “壹、貳、叁、肆、伍”文本提示工藝流程對(duì)應(yīng)順序。（圖9）

（2）依據(jù)應(yīng)用核心內(nèi)容確定優(yōu)先級(jí)

移動(dòng)應(yīng)用“范圍層”的內(nèi)容需求與功能規(guī)格建立在“戰(zhàn)略層”基礎(chǔ)之上。而屬于“結(jié)構(gòu)層”的信息構(gòu)架與交互設(shè)計(jì)，通過(guò)評(píng)估內(nèi)容需求是否滿足應(yīng)用的戰(zhàn)略目標(biāo)，從而首先確定應(yīng)用呈現(xiàn)哪些內(nèi)容；其次明確哪些部分是核心內(nèi)容；最后確定核心內(nèi)容以何種優(yōu)先級(jí)呈現(xiàn)。

圖11 《斗栱》首頁(yè)界面

前期調(diào)研發(fā)現(xiàn)，大眾一般對(duì)云錦文化有基本認(rèn)知，因此設(shè)定開(kāi)啟《云錦織道》應(yīng)用即進(jìn)入核心內(nèi)容“工藝流程”。相較云錦，人們對(duì)斗栱更為陌生。百度詞條解釋：“中國(guó)傳統(tǒng)木結(jié)構(gòu)建筑是由柱、梁、檁、枋、斗拱等大木構(gòu)件形成框架結(jié)構(gòu)……這種木結(jié)構(gòu)體系的關(guān)鍵技術(shù)是榫卯結(jié)構(gòu)。斗栱，又稱斗科、欂櫨，是中國(guó)木構(gòu)架建筑結(jié)構(gòu)的關(guān)鍵性部件，在橫梁和立柱之間挑出以承重，將屋檐的荷載經(jīng)斗栱傳遞到立柱。斗栱又有一定的裝飾作用，是中國(guó)古典建筑顯著特征之一?！雹貶ttp：//baike.baidu.com/link？url=HvUrQqN0vRbJgPogkJ1c31hnMwuNVm9iPYgWtcNhtVME-wsVZsgPLhWCybRbV21Za 1uiZxQ_5DBAn2zrjBO43K

斗栱的文化歷史體系龐大深入，設(shè)計(jì)團(tuán)隊(duì)擬定以三維交互“游戲”演繹中國(guó)傳統(tǒng)木結(jié)構(gòu)建筑結(jié)構(gòu)，表現(xiàn)《斗栱》核心榫卯結(jié)構(gòu)，以寓教于樂(lè)方式讓用戶理解其歷史意義與文化價(jià)值。但這不是一款純粹娛樂(lè)類游戲應(yīng)用，對(duì)于在什么時(shí)間、如何呈現(xiàn)“游戲”，需要考量非遺主題的文化內(nèi)涵。鑒于大眾對(duì)其認(rèn)知匱缺，設(shè)定用戶啟App 首先面對(duì)“歷史構(gòu)造”、“游戲”和“實(shí)例展示”三個(gè)選項(xiàng)（圖11），根據(jù)各自興趣進(jìn)入相關(guān)欄目，而非在第一時(shí)間進(jìn)入游戲狀態(tài)。其中“歷史構(gòu)造”內(nèi)容展現(xiàn)了斗栱在歷史語(yǔ)境中的歷史關(guān)系與結(jié)構(gòu)、功能變遷，這部分基礎(chǔ)知識(shí)是文化教育類應(yīng)用不可或缺信息；“游戲”內(nèi)容是《斗栱》最具特色的部分，也是設(shè)計(jì)的切入點(diǎn)——以虛擬形式真實(shí)再現(xiàn)斗栱榫卯結(jié)構(gòu)，首頁(yè)界面上“游戲”按鈕的居中位置直觀揭示其核心地位；“實(shí)例展示”部分以照片與文本呈現(xiàn)應(yīng)縣木塔、故宮建筑等四組經(jīng)典斗栱結(jié)構(gòu)木建筑。概括而言，在《斗栱》應(yīng)用中核心內(nèi)容是“游戲”，但信息的優(yōu)先級(jí)由用戶自行選擇以下其一：以圖文閱讀方式學(xué)習(xí)基礎(chǔ)知識(shí)“歷史構(gòu)造”，或觀看現(xiàn)世斗栱建筑資料直觀了解 “實(shí)例展示”，亦或直接啟動(dòng)娛樂(lè)性的“游戲”，通過(guò)游戲通關(guān)晉級(jí)逐步熟悉古代木結(jié)構(gòu)建筑的精妙榫卯結(jié)構(gòu)。

圖12 《云錦織道》“原料加工”界面

圖13 《斗栱》“歷史構(gòu)造”界面

（3）結(jié)合iPad手勢(shì)創(chuàng)建“看不見(jiàn)”的交互設(shè)計(jì)

《iOS人機(jī)交互界面指南》說(shuō)明：“用戶使用點(diǎn)擊、拖拽、捏合等手勢(shì)與設(shè)備進(jìn)行交互。使用手勢(shì)拉近了用戶和設(shè)備之間的距離，并且增強(qiáng)了直接操縱感。用戶通常期待手勢(shì)在不同應(yīng)用之間都是通用的。②ios8人機(jī)交互界面指南。http：//isux.tencent.com/ios8-human-interface-guidelines.html《用戶體驗(yàn)要素》書(shū)中講述：“交互設(shè)計(jì)通常被描繪為具有會(huì)面功能的形式?？床灰?jiàn)的設(shè)計(jì)結(jié)合了對(duì)用戶有意義的形式和直觀的功能?！保?］

圖14 《斗栱》“實(shí)例展示”界面

對(duì)交互設(shè)計(jì)的評(píng)估，一般要求為直觀、容易學(xué)習(xí)或使用，良好的交互設(shè)計(jì)在處理得當(dāng)時(shí)應(yīng)該讓用戶無(wú)障礙使用，即不是強(qiáng)調(diào)突出所謂交互設(shè)計(jì)，而是看似不存在，卻讓用戶如愿操作，變成“看不見(jiàn)”的設(shè)計(jì)，只有在交互設(shè)計(jì)處理不當(dāng)、存在問(wèn)題時(shí)，用戶才會(huì)因其缺陷所桎梏，無(wú)法順利達(dá)到目的。這點(diǎn)可從蘋果App Store 的移動(dòng)應(yīng)用用戶點(diǎn)評(píng)體現(xiàn)：對(duì)某個(gè)應(yīng)用有負(fù)面意見(jiàn)的用戶會(huì)給出詳細(xì)具體意見(jiàn)，如“登錄有問(wèn)題”、“點(diǎn)擊無(wú)反應(yīng)響應(yīng)遲鈍”、“希望提高圖片質(zhì)量”、“缺少詳細(xì)信息介紹”等等；而正面評(píng)價(jià)通常是“界面很贊”、“推薦”、“好評(píng)”這類寬泛夸贊。

由此可見(jiàn)，良好的交互產(chǎn)品設(shè)計(jì)并不需要夸張的形式，而應(yīng)在所有細(xì)節(jié)設(shè)計(jì)中確保用戶使用的便捷性，這也包括以大眾熟悉手勢(shì)與作品交互。信息層級(jí)的扁平化引導(dǎo)出交互流程的扁平化。用戶在《云錦織道》“工藝流程”部分，以“左右滑動(dòng)” 手勢(shì)操作，從左至右依次呈現(xiàn)工藝流程的五個(gè)步驟（圖9）；進(jìn)入每個(gè)步驟后以“上下滑動(dòng)”操作，展現(xiàn)每項(xiàng)步驟的若干細(xì)節(jié)，例如進(jìn)入“原料加工”界面通過(guò)上下滑動(dòng)手勢(shì)可見(jiàn)絡(luò)絲工藝、植物染料、金銀線加工、煮線、染線等多種工藝（圖12）。

再以《斗栱》應(yīng)用來(lái)做設(shè)計(jì)分析。其“歷史構(gòu)造”部分展現(xiàn)了漢代至明清的斗栱結(jié)構(gòu)發(fā)展和功能變遷：“柱頭輔作”、“樓輔間輔作”這類專屬名詞以圖形、動(dòng)畫(huà)圖解，闡述斗栱在歷史上的變化；《營(yíng)造法式》、《工程做法》經(jīng)典著作信息編排在各自相應(yīng)出現(xiàn)的時(shí)間節(jié)點(diǎn)，如宋代與清代；用戶在此以“上下滑動(dòng)”手勢(shì)瀏覽信息，符合常規(guī)思維邏輯對(duì)歷史時(shí)間線的印象：從最頂端漢代經(jīng)歷南北朝、隋、唐、宋等直至最底端清代（圖11）?！抖窎怼返摹皩?shí)例展示”界面用戶以點(diǎn)擊和放大手勢(shì)查閱四座建筑的圖片，通過(guò)圖文詳情直觀學(xué)習(xí)（圖14）。 “游戲”部分是由用戶限時(shí)將部件拼裝成完整斗栱。針對(duì)用戶水準(zhǔn)不同，游戲分為五個(gè)級(jí)別，從簡(jiǎn)單十多個(gè)至復(fù)雜的上百個(gè)部件不等，界面上的“鎖”與“解鎖”圖標(biāo)直觀比喻由易至難的級(jí)別關(guān)聯(lián)。游戲的操作手勢(shì)采用多個(gè)屏幕特有的交互方式：拖拽、單擊、雙擊、旋轉(zhuǎn)、放大和縮小，力使游戲玩家充分利用各種手勢(shì)結(jié)合方式，以便在游戲娛樂(lè)中了解斗栱精妙榫卯結(jié)構(gòu)，從而理解中國(guó)傳統(tǒng)木結(jié)構(gòu)建筑的程式化、標(biāo)準(zhǔn)化、模數(shù)化特征。

3. 呈現(xiàn)“看得見(jiàn)”的視覺(jué)元素——設(shè)計(jì)“表現(xiàn)層”

多項(xiàng)調(diào)查研究發(fā)現(xiàn)，界面在美學(xué)上越吸引人，人們就越覺(jué)得它容易使用①Noam Tractinsky：《美學(xué)和明顯的有用性：根據(jù)經(jīng)驗(yàn)評(píng)估和文化方法問(wèn)題》，Aesthetics and Apparent Usability： Empirically Assessing Cultural and Methodological Issues。Http：//xueshu.baidu.com/s？wd=paperuri：（10dcc1f7eaf826627a4382e4ae 1a20b5）&filter=sc_long_sign&sc_ks_para=q%3DAesthetics+and+apparent+usability%3A+empirically+assessing+cultural+ and+methodological+issues&tn=SE_baiduxueshu_c1gjeupa&ie=utf-8。因此在建立讓用戶安心、準(zhǔn)確無(wú)誤到達(dá)內(nèi)容的路徑、即交互設(shè)計(jì)基礎(chǔ)之后， 還應(yīng)根據(jù)主題確定視覺(jué)風(fēng)格，呈現(xiàn)既突出傳統(tǒng)人文氣息又符合現(xiàn)代人文審美的“表現(xiàn)層”。

非遺文化主題應(yīng)用方設(shè)計(jì)目的是針對(duì)年輕人群普及推廣古典文化，因此需采用目標(biāo)人群偏愛(ài)審美形式，以此明確應(yīng)用的視覺(jué)風(fēng)格。

（1）依據(jù)不同主題特征確定視覺(jué)風(fēng)格

云錦是三代皇室御用產(chǎn)品，其花團(tuán)錦簇的視覺(jué)特征符合經(jīng)典中國(guó)皇室形象?！对棋\織道》在視覺(jué)上力圖體現(xiàn)手工織造工藝的精細(xì)繁復(fù)、云錦織品獨(dú)特金、銀、孔雀線等材質(zhì)的富麗深邃，又要滿足目標(biāo)用戶的審美需求，因此視覺(jué)表現(xiàn)定位為既有古典精細(xì)、華美精妙的特征，又符合現(xiàn)代人偏好簡(jiǎn)潔的審美趨勢(shì)。界面設(shè)計(jì)元素上除了云錦本身的華麗色彩和豐富細(xì)節(jié)，在背景上盡可能多采用留白形式，并在簡(jiǎn)練的設(shè)計(jì)風(fēng)格中包含若干設(shè)計(jì)細(xì)節(jié)元素：五組色塊代表工藝流程的五個(gè)步驟；中國(guó)古典云紋作為菜單欄的底紋，并跟隨不同工藝步驟產(chǎn)生對(duì)應(yīng)的色彩變化。這些細(xì)節(jié)設(shè)計(jì)讓?xiě)?yīng)用體現(xiàn)了精美而又現(xiàn)代的質(zhì)感（圖9）。

與云錦專屬皇家御用的屬性不同，斗栱主題有其自身特點(diǎn)。百度詞條說(shuō)明：斗栱在中國(guó)木構(gòu)架建筑的發(fā)展過(guò)程中起過(guò)重要作用，其演變可以看做是中國(guó)傳統(tǒng)木構(gòu)架建筑形制演變的重要標(biāo)志，也是鑒別中國(guó)傳統(tǒng)木構(gòu)架建筑年代的一個(gè)重要依據(jù)。②Http：//baike.baidu.com/link？url=HvUrQqN0vRbJgPogkJ1c31hnMwuNVm9iPYgWtcNhtVME-wsVZsgPLhWCybRbV21Za 1uiZxQ_5DBAn2zrjBO43K《斗栱》應(yīng)用強(qiáng)調(diào)內(nèi)部結(jié)構(gòu)，及其形式功能在歷史上的演變與應(yīng)用，視覺(jué)風(fēng)格定位為古樸精準(zhǔn)，兼具以三維圖形體現(xiàn)的現(xiàn)代形式感。斗栱初創(chuàng)于西周至南北朝，為了表現(xiàn)歷史悠久特性，圖形元素的色彩與形式借鑒了漢代“減地平雕”漢畫(huà)像石拓片效果，深灰色類似版畫(huà)有較強(qiáng)視覺(jué)張力，并且所有二維圖形全部采用矢量圖重新繪制，畫(huà)面嚴(yán)謹(jǐn)，細(xì)節(jié)準(zhǔn)確，形式上與榫卯結(jié)構(gòu)予人的“精準(zhǔn)”感受一致契合，表現(xiàn)傳統(tǒng)木結(jié)構(gòu)的精神與匠心（圖13）。

圖15 《云錦織道》采用原創(chuàng)攝影

（2）素材與圖形設(shè)計(jì)的原創(chuàng)性

當(dāng)前有許多互聯(lián)網(wǎng)作品常以收集、編輯而非原創(chuàng)的手段，整合所需圖片信息，這樣做的優(yōu)勢(shì)是速度快、成本低，但相對(duì)而言與特定主題契合度不強(qiáng)，表現(xiàn)力也相對(duì)不充分。《云錦織道》創(chuàng)作過(guò)程中多次與南京云錦博物館工作人員溝通，得以拍攝了數(shù)百?gòu)垐D片，包括原料加工、紋樣設(shè)計(jì)等不同步驟工作流程，以及設(shè)計(jì)師手工繪制圖紙樣稿、云錦成品與傳統(tǒng)織造器具的細(xì)節(jié)特寫(xiě)，另有云錦織機(jī)的造機(jī)過(guò)程、與云錦大師的訪談等。最終實(shí)際使用120余張（圖15）。圖形設(shè)計(jì)方面，應(yīng)用的圖標(biāo)設(shè)計(jì)以線條形式表現(xiàn)織機(jī)局部圖形與文字結(jié)合，重點(diǎn)體現(xiàn)云錦織造技藝的概念（圖16）。

在《斗栱》的圖形設(shè)計(jì)方面，為了還原斗栱真實(shí)榫卯結(jié)構(gòu)，設(shè)計(jì)團(tuán)隊(duì)根據(jù)《斗栱》①潘德華：《斗栱》，東南大學(xué)出版社2004年版。一書(shū)重新繪制了歷代數(shù)十種斗栱的二維圖形，并將十多件重要斗栱結(jié)構(gòu)以三維建模，最終在成品中表現(xiàn)為三維演示動(dòng)畫(huà)和三維互動(dòng)游戲：“歷史構(gòu)造” 部分展現(xiàn)了斗拱三維模型演示視頻；“游戲”部分用戶交互控制三維模型，可從不同視角拼裝斗栱，并實(shí)時(shí)渲染三種不同木色材質(zhì)，由于每套斗栱可以上下左右720度旋轉(zhuǎn)、放大細(xì)節(jié)，不僅加深用戶對(duì)斗栱的深入理解，還增添了游戲的趣味性（圖17-18）。同樣，《斗栱》圖標(biāo)的設(shè)計(jì)也采用木結(jié)構(gòu)的概念設(shè)計(jì)創(chuàng)作，表現(xiàn)出獨(dú)特的木結(jié)構(gòu)美學(xué)特征（圖19）。

圖16 《云錦織道》圖標(biāo)設(shè)計(jì)

圖17-圖18 《斗栱》游戲界面

這些原創(chuàng)圖像拍攝、圖形設(shè)計(jì)元素特有的視覺(jué)新鮮感提升了傳統(tǒng)文化教育類應(yīng)用的品質(zhì)，同時(shí)避免了日后作品的侵權(quán)弊端。

（3）動(dòng)畫(huà)與動(dòng)效細(xì)節(jié)

關(guān)于移動(dòng)應(yīng)用的動(dòng)畫(huà)細(xì)節(jié)，Ben Johnson在2014年蘋果開(kāi)發(fā)者大會(huì)上提出“1個(gè)單元的歡迎動(dòng)畫(huà)+6個(gè)單元的向?qū)?dòng)畫(huà)+1-2個(gè)單元讓人愉悅的細(xì)節(jié)性動(dòng)畫(huà)”的程序內(nèi)動(dòng)畫(huà)的編排公式。在移動(dòng)應(yīng)用設(shè)計(jì)中，動(dòng)畫(huà)的目的不僅扮演提升審美的角色，更有不可替代的功能性。設(shè)計(jì)良好的動(dòng)畫(huà)能讓用戶覺(jué)得有趣，提高用戶的預(yù)期，把用戶的注意力吸引到希望用戶與App進(jìn)行交互之處，最終達(dá)到增加互動(dòng)體驗(yàn)的目的。

基于上述原理，這二款應(yīng)用不僅采用三維動(dòng)畫(huà)展現(xiàn)了云錦織機(jī)和斗拱的三維結(jié)構(gòu)，還都設(shè)計(jì)了與主題風(fēng)格統(tǒng)一的動(dòng)畫(huà)?！抖窎怼吩谠O(shè)計(jì)調(diào)研中發(fā)現(xiàn)斗栱與北斗七星存在概念上聯(lián)系，斗拱象征著北斗七星中的“斗”，由此《斗栱》的“歷史”界面表現(xiàn)了北斗七星的動(dòng)畫(huà)，為了更好契合主題，北斗七星圖形沒(méi)有以慣常的圓點(diǎn)表現(xiàn)七星，而是以斗栱的零部件代表北斗七星，每個(gè)部件可以點(diǎn)擊，一一對(duì)應(yīng)關(guān)聯(lián)七個(gè)不同歷史時(shí)期的斗栱圖文詳解，這一動(dòng)畫(huà)在兼顧增強(qiáng)趣味性的同時(shí)也具備功能性。（圖13）

圖19 《斗栱》圖標(biāo)設(shè)計(jì)

《云錦織道》為了體現(xiàn)織錦概念，所有可操作上下滑動(dòng)手勢(shì)的頁(yè)面下拉時(shí)都會(huì)呈現(xiàn)一個(gè)線軸滾動(dòng)的動(dòng)畫(huà)，直至到頁(yè)面底端動(dòng)畫(huà)停止，該動(dòng)畫(huà)不僅具有增添豐富動(dòng)感的美化效果，還有提示用戶是否可以繼續(xù)往下瀏覽的實(shí)際功能。除此之外，二個(gè)應(yīng)用中各個(gè)畫(huà)面的鏈接都采用無(wú)縫平滑、略帶彈性交接方式，避免生硬的跳轉(zhuǎn)，令觀眾產(chǎn)生良好的視覺(jué)感受。

四、建立美好交互體驗(yàn)

二項(xiàng)世界非遺主題的應(yīng)用程序在整體信息構(gòu)架是采用以扁平化層次結(jié)構(gòu)表現(xiàn)，同時(shí)對(duì)于非遺主題必須詮釋的生僻專業(yè)名詞，依托于普通觀眾熟悉的信息提示方式逐一說(shuō)明，如《云錦織道》的“工藝流程”解釋了“妝花工藝”，《斗栱》“游戲”詮釋了斗栱榫卯結(jié)構(gòu)，并將這些信息安置在適當(dāng)?shù)膶蛹?jí)和位置。

簡(jiǎn)潔的視覺(jué)效果，精巧的動(dòng)畫(huà)效果，流暢的交互過(guò)程，讓觀眾在二、三十分鐘內(nèi)體驗(yàn)了世界非遺的信息傳遞，大眾化的交互平臺(tái)推廣了非物質(zhì)遺產(chǎn)的文化傳承。二款應(yīng)用為傳統(tǒng)文化帶來(lái)超出傳統(tǒng)博物館之外、更豐富的展陳方式：移動(dòng)應(yīng)用傳播、個(gè)人定制、碎片閱讀方式與傳統(tǒng)博物館、實(shí)地考察參觀日漸融合，形成多通道獲取信息形式。概括言之，二項(xiàng)應(yīng)用遵循移動(dòng)產(chǎn)品的用戶體驗(yàn)要素開(kāi)展設(shè)計(jì)實(shí)踐，幫助公眾綜合性學(xué)習(xí)、理解、熟悉經(jīng)典中國(guó)傳統(tǒng)文化技藝。

［1］Jesse James Garrett. 用戶體驗(yàn)的要素——以用戶為中心的Web設(shè)計(jì)［M］. 北京：機(jī)械工業(yè)出版社，2008.

（責(zé)任編輯：王 璇）

J502

A

1008-9675（2016）03-0126-08

2016-03-10

童 芳（1971-），女，江蘇南京人，南京藝術(shù)學(xué)院設(shè)計(jì)學(xué)院副教授，研究方向：數(shù)字媒體設(shè)計(jì)，藝術(shù)設(shè)計(jì)。
①

江蘇高校哲學(xué)社會(huì)科學(xué)研究項(xiàng)目《移動(dòng)互聯(lián)網(wǎng)的文化教育類應(yīng)用程序設(shè)計(jì)研究》（2013SJB760033）階段性成果。