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

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

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

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

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

一、研究背景

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

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

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

2. 課題背景介紹

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

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

二、用戶體驗設(shè)計要素分析

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

圖1 用戶體驗的要素 圖片來源《用戶體驗的要素》第二章

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

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

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

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

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

圖2

圖3

圖4

圖5

圖6

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

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

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

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

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

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

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

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

圖10 《云錦織道》“織機”界面

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

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

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

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

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

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

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

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

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

圖11 《斗栱》首頁界面

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

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

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

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

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

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

圖14 《斗栱》“實例展示”界面

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

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

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

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

多項調(diào)查研究發(fā)現(xiàn)，界面在美學(xué)上越吸引人，人們就越覺得它容易使用①Noam Tractinsky：《美學(xué)和明顯的有用性：根據(jù)經(jīng)驗評估和文化方法問題》，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)確無誤到達(dá)內(nèi)容的路徑、即交互設(shè)計基礎(chǔ)之后， 還應(yīng)根據(jù)主題確定視覺風(fēng)格，呈現(xiàn)既突出傳統(tǒng)人文氣息又符合現(xiàn)代人文審美的“表現(xiàn)層”。

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

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

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

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

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

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

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

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

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

（3）動畫與動效細(xì)節(jié)

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

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

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

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

四、建立美好交互體驗

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

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

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

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

J502

A

1008-9675（2016）03-0126-08

2016-03-10

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

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