潘紅蓮 李杰

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

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

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

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

1.羌茶信息分類組織

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

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

2.羌茶信息的層級(jí)

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

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

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

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

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

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

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

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

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

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

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

2.羌茶色彩的分類表述

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

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

“羌山雀舌茶” APP 界面設(shè)計(jì)所指的“非遺”主題——“古羌茶”，包含了特定的具象元素。（如圖2）從視覺(jué)信息的角度來(lái)解析這些珍貴的“非遺”資源，可概括為羌茶原料（老茶樹(shù)、茶葉）、工具（飲茶器具、采茶和制茶工具）、手工茶技藝（攤涼—?dú)⑶嗟龋⑶甲寮y飾（羊角花、喜鵲等）、圖騰（羊角紋）、質(zhì)感（意象茶香等）……根據(jù)簡(jiǎn)潔直觀的設(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界面，模擬“非遺”古羌茶制作場(chǎng)景：攤涼-殺青-理?xiàng)l-毛烘-炒二青-足水，力圖營(yíng)造出符合“非遺”主題特征意境的實(shí)景氛圍。誠(chéng)然，該“非遺”類APP界面設(shè)計(jì)不是簡(jiǎn)單地對(duì)既定場(chǎng)景做出復(fù)原和重建，還包括非遺技藝—古羌茶歷史由來(lái)、茶藝特色、風(fēng)俗趣談、非遺傳承人牛義貴與所獲獎(jiǎng)項(xiàng)等知識(shí)的展示，有序地經(jīng)過(guò)信息組織和整理來(lái)實(shí)現(xiàn)場(chǎng)景的再設(shè)計(jì)，使信息直觀化、藝術(shù)化，激起瀏覽者的感知與思考，以此加強(qiáng)古羌茶非遺文化的“情景記憶”，襯托古羌茶制作過(guò)程的完整性，獲得瀏覽者對(duì)“非遺”主題的共鳴。

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

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

結(jié)語(yǔ)

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

注釋：

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

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

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

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

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

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

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