潘紅蓮 李杰

摘 要：西南地區(qū)非物質(zhì)文化遺產(chǎn)——北川羌山雀舌茶（古羌茶技藝），通過新媒介下的APP界面設(shè)計(jì)對其進(jìn)行視覺信息系統(tǒng)設(shè)計(jì)研究與開發(fā)：對“羌山雀舌茶”交互界面的信息架構(gòu)、視覺設(shè)計(jì)和交互構(gòu)思進(jìn)行深入分析，完成信息邏輯層級規(guī)劃，非遺符號元素設(shè)定和界面布局，以及基于用戶需求的交互邏輯表達(dá)。使其市場價值與非遺技藝優(yōu)勢得到顯著提升，重塑品牌形象。

關(guān)鍵詞：界面設(shè)計(jì) 交互設(shè)計(jì) 信息架構(gòu) 視覺設(shè)計(jì)

北川羌茶——“羌山雀舌”手工茶，隸屬西南地區(qū)非物質(zhì)文化遺產(chǎn)——“古羌茶藝”。古羌茶藝是羌民在發(fā)現(xiàn)茶、種植茶、使用茶的過程中，以茶為載體，表達(dá)人與自然、人與人之間的信仰、思想、情感、意識的總稱，它是一個自然融合和表達(dá)的過程。本文擬在此茶文化基礎(chǔ)上研究一個可讀可視化的復(fù)合體系——“非遺”類“羌山雀舌茶”APP，它由圖像、文字和數(shù)字結(jié)合而成，使信息更高效地得以交流。

當(dāng)今國內(nèi)的茶類APP界面設(shè)計(jì)大多呈現(xiàn)出一種趨同化走勢，由于缺少文化背景的依托而失去了真正的內(nèi)涵，造成茶品牌傳播的局限。北川羌山雀舌茶現(xiàn)有的品牌形象，所特有的非物質(zhì)文化遺產(chǎn)信息并不明顯，代表旅游地（四川省綿陽市北川羌族自治縣）自身的特殊符號不突出，因此無法從實(shí)質(zhì)上彰顯出傳統(tǒng)旅游地的特殊地域文化和非遺品牌特征，而“羌山雀舌茶”APP設(shè)計(jì)的不足與傳播途徑單一也是其品牌發(fā)展的弊端。對于非遺羌茶APP設(shè)計(jì)靈感的汲取，應(yīng)依據(jù)市場需求，結(jié)合羌族地域文化與消費(fèi)者的喜好，對其古羌茶深層內(nèi)容（羌茶非遺制作技藝、地域環(huán)境、原生態(tài)的產(chǎn)品特質(zhì)）認(rèn)知，以及APP信息傳播載體進(jìn)行開發(fā)，即通過“羌山雀舌茶”APP設(shè)計(jì)，結(jié)合信息技術(shù)-數(shù)字技術(shù)-藝術(shù)手段，使非遺文化得以開發(fā)與利用、傳承與創(chuàng)新。

一、“羌山雀舌茶”APP界面信息架構(gòu)

信息架構(gòu)，旨在將諸多信息有機(jī)有序地組織在一起。信息架構(gòu)的用途——組織內(nèi)容結(jié)構(gòu)：為方便用戶查找所需信息，需將內(nèi)容合理組織與標(biāo)注。用戶與信息之間的通道由于信息架構(gòu)被迅速建立，所需信息被快速傳達(dá)給目標(biāo)用戶。本文研究重點(diǎn)旨在有效利用界面信息架構(gòu)，通過可視化視覺展示，提高信息的快速識別性與可尋性，使信息閱讀更加高效有序。

1.羌茶信息分類組織

在人類的認(rèn)知世界中，信息常常以已有的獲得普遍贊同的基本結(jié)構(gòu)進(jìn)行排布。（如表1）

基于以上APP信息圖表，羌山雀舌茶非遺技藝從口述行為過程轉(zhuǎn)化為文字與圖示，其種植、生態(tài)環(huán)境被深入情景再現(xiàn)式分析，最終完成全產(chǎn)業(yè)鏈視覺信息設(shè)計(jì)，使之品牌文化保持直觀的可識別性，可認(rèn)知性與易傳播功能，促進(jìn)良好的客戶體驗(yàn)。

2.羌茶信息的層級

（如表2）茶品種分類圖表內(nèi)容：羌山雀舌茶中的綠茶、紅茶、黑茶、白茶，屬于扁平并列層級，對應(yīng)“一日三茶”的飲茶概念，即早上喝綠茶、黑茶提神，中午喝紅茶養(yǎng)胃，晚上喝白茶不影響睡眠。？譻？訛基于這一羌茶文化概念的細(xì)化，為進(jìn)一步推動個性化羌茶銷售（私人訂制），提高用戶體驗(yàn)做下鋪墊。

3.羌茶信息的呈現(xiàn)

由于要考慮屏幕界面面積的局限性，交互呈現(xiàn)的局限性，APP界面信息架構(gòu)如同桎梏下的舞蹈，既要考慮信息的可讀性又要考慮特定內(nèi)容的特殊性。本著以下準(zhǔn)則：方便用戶快速查找的信息，能夠在性能板塊間進(jìn)行邏輯切換;明晰的性能信息層級布局，從最常用到不常用逐級顯現(xiàn)。

主要內(nèi)容：從顯現(xiàn)模式的角度，北川羌山雀舌茶視覺信息設(shè)計(jì)（信息圖形）作為視覺工具包含：圖表、圖解、圖形、表格、地圖、名單六類。

（1）羌山雀舌茶時序性圖表：以時間信息為基礎(chǔ)，描述該品牌古老的茶葉種植歷史。突出與強(qiáng)化空間或事件在時空中的前后活動變化，同時，時間軸也可以設(shè)計(jì)成一條符合人們視線流的路徑。

（2）羌山雀舌茶空間關(guān)系性圖表：將北川羌山雀舌茶種植與生長環(huán)境的空間位置，如方位、海拔、植被層、生物鏈，制作成直觀化的環(huán)境空間組織模式圖。如海拔植被剖面圖，以實(shí)體形式來解釋空間關(guān)系。

（3）羌山雀舌茶制茶推導(dǎo)性圖表：將該品牌原始的手工制茶工藝過程的前后關(guān)系及細(xì)節(jié)情況用直觀性圖表制作出來（流程圖）。原生態(tài)、嚴(yán)謹(jǐn)?shù)闹撇枇鞒虉D表明了茶葉處理系統(tǒng)的安全可靠。

二、“羌山雀舌茶”APP界面視覺設(shè)計(jì)

1.“F”形視覺軌跡與“井”形骨架設(shè)計(jì)

當(dāng)我們激活一個APP網(wǎng)頁界面，進(jìn)行快速瀏覽時，視線掃描這些信息是否存在某種規(guī)律？科學(xué)研究表明，通過“眼動儀”的測試，瀏覽者在閱讀網(wǎng)頁信息時，多數(shù)情況下以“F”形狀為瀏覽路線。同時，為了優(yōu)化羌茶APP界面視覺結(jié)構(gòu)，多使用圖標(biāo)、縮略圖、導(dǎo)視等扁平化圖像來描繪信息。

版面布局的分割，基于界面尺寸和分辨率考慮，將羌茶相關(guān)圖片文字進(jìn)行黃金比例法則以及“井”形骨架分割。此種分割，將主題、內(nèi)文和圖片展現(xiàn)得尤為清楚。（如圖1）可以看到“井”形骨架基于三等分排布，對界面視覺劃分起到了平衡的作用。

2.羌茶色彩的分類表述

“羌山雀舌茶”分類為綠茶、紅茶、黑茶、白茶。鑒于色彩給予用戶的直觀印象，沿襲中國畫顏料中的朱砂、石綠、水墨黑白作為“非遺”類羌茶APP界面配色的首選。（如圖1）朱砂色與黑白搭配，傳遞出莊重、濃郁的氣質(zhì);黑白的配色演繹出意象的水墨山水風(fēng)情，配以紅茶色的方形印章，凸顯古羌茶文化的勃勃生機(jī)。非遺羌茶界面主色為國畫顏料中的中低明度、中純度色彩，通過色彩之間的對照與協(xié)調(diào)，塑造出古樸內(nèi)斂的色彩氛圍。同時，利用多色塊分割，加強(qiáng)內(nèi)容使用率，讓界面不單調(diào)。

3.相關(guān)“非遺”羌茶具象元素的提煉

“羌山雀舌茶” APP 界面設(shè)計(jì)所指的“非遺”主題——“古羌茶”，包含了特定的具象元素。（如圖2）從視覺信息的角度來解析這些珍貴的“非遺”資源，可概括為羌茶原料（老茶樹、茶葉）、工具（飲茶器具、采茶和制茶工具）、手工茶技藝（攤涼—?dú)⑶嗟龋⑶甲寮y飾（羊角花、喜鵲等）、圖騰（羊角紋）、質(zhì)感（意象茶香等）……根據(jù)簡潔直觀的設(shè)計(jì)原則轉(zhuǎn)化為界面圖標(biāo)、縮略圖與導(dǎo)視，從而加強(qiáng)了界面設(shè)計(jì)的特定文化感和深層內(nèi)涵性。

三、“羌山雀舌茶”APP界面交互構(gòu)思

1.古羌茶制作實(shí)景再現(xiàn)

“羌山雀舌茶”實(shí)景再現(xiàn)式APP界面，模擬“非遺”古羌茶制作場景：攤涼-殺青-理?xiàng)l-毛烘-炒二青-足水，力圖營造出符合“非遺”主題特征意境的實(shí)景氛圍。誠然，該“非遺”類APP界面設(shè)計(jì)不是簡單地對既定場景做出復(fù)原和重建，還包括非遺技藝—古羌茶歷史由來、茶藝特色、風(fēng)俗趣談、非遺傳承人牛義貴與所獲獎項(xiàng)等知識的展示，有序地經(jīng)過信息組織和整理來實(shí)現(xiàn)場景的再設(shè)計(jì)，使信息直觀化、藝術(shù)化，激起瀏覽者的感知與思考，以此加強(qiáng)古羌茶非遺文化的“情景記憶”，襯托古羌茶制作過程的完整性，獲得瀏覽者對“非遺”主題的共鳴。

2. “古羌茶藝傳習(xí)所”360°虛擬瀏覽

“羌山雀舌茶”實(shí)景再現(xiàn)式APP界面，以360°虛擬瀏覽——目前一種最接近于實(shí)物的展示方式，將“古羌茶藝傳習(xí)所”展示出來。360°虛擬瀏覽促進(jìn)了用戶與展示空間之間的溝通與交流，使用戶能清晰地看到不同歷史階段的羌族飲茶器具、采茶和制茶工具。如時代久遠(yuǎn)的陶土罐、竹編的采茶簍，各個角度、各個局部的細(xì)節(jié)，都致力達(dá)到“如見真面、恍若親臨”的體驗(yàn)感。對應(yīng)“古羌茶藝傳習(xí)所”的各個視角，瀏覽者能夠自主進(jìn)行360°全方位細(xì)致觀察，完成“非遺”文化的直觀體驗(yàn)。其知識的視覺化，加強(qiáng)了用戶的理解，此外，為增強(qiáng)用戶學(xué)習(xí)的主動性，增加了知識問答互動操作。除了360°全方位展示外，該APP界面還增加一些針對“古羌茶藝傳習(xí)所”新產(chǎn)品推廣區(qū)局部放大瀏覽的功能，使用戶瀏覽局部物件時對局部進(jìn)行深入研習(xí)。

結(jié)語

面向“非遺”類的 APP 界面設(shè)計(jì)首先應(yīng)依據(jù)外圍功能層級建立中間層核心的信息架構(gòu)，進(jìn)而達(dá)成表面層的視覺傳達(dá)設(shè)計(jì)表現(xiàn)，最后按照用戶需求確定其交互目的和體驗(yàn)方式。從設(shè)計(jì)的優(yōu)先切入點(diǎn)來看，從信息架構(gòu)到 APP 產(chǎn)品功能與交互方式，到界面視覺設(shè)計(jì)，其最終目的都是使用戶達(dá)成趣味性體驗(yàn)，在這個復(fù)雜晉升的設(shè)計(jì)過程中，我們應(yīng)不斷求索羌山雀舌茶標(biāo)志性的視覺符號表現(xiàn)以及交互應(yīng)用，并利用APP 整合平臺和AR（增強(qiáng)現(xiàn)實(shí)）技術(shù)，實(shí)現(xiàn)真實(shí)場景中對數(shù)字文化內(nèi)容的智能交互，使用戶在體驗(yàn)過程中對所屬地-北川羌族自治縣文化內(nèi)涵有更深入解讀，增強(qiáng)民族文化傳播力度與強(qiáng)化非遺文化品牌值。

注釋：

王烈娟.傳承羌茶文化，發(fā)展羌茶產(chǎn)業(yè)—以北川縣“古羌茶藝傳習(xí)所”為例[J].包裝世界 2015（5）.

劉飛.基于即時體驗(yàn)的虛擬旅游移動應(yīng)用界面設(shè)計(jì)研究—以五當(dāng)召虛擬旅游app界面設(shè)計(jì)為例[D].呼和浩特：內(nèi)蒙古師范大學(xué)，2017.

朱麒宇.“一日三茶”情感需求 ：以用戶體驗(yàn)為核心的包裝設(shè)計(jì)[J].裝飾，2017（10）.

譚坤，劉正宏，李穎.“非遺” 傳承創(chuàng)新語境下的app界面設(shè)計(jì)研究[J].包裝工程，2015，36（8）.

鐘義信.信息科學(xué)原理[M]北京：北京郵電大學(xué)出版社，2002.

孫利，吳儉濤.基于時間維度的整體用戶體驗(yàn)設(shè)計(jì)研究[J].包裝工程，2014，35（18）.

注：本文系四川省教育廳人文社科重點(diǎn)項(xiàng)目，項(xiàng)目名稱：北川羌山雀舌茶視覺信息設(shè)計(jì)與傳播途徑研究，編號：18SA0084;綿陽師范學(xué)院應(yīng)用型人才培養(yǎng)示范專業(yè)——視覺傳達(dá)設(shè)計(jì)，編號：Mnu-JY18110。