張飛越，靳璨

（1.揚州市職業(yè)大學 藝術學院，江蘇 揚州 225009 2.江南大學設計學院，江蘇 無錫 214122）

一、引言

在以交互性、便攜性為特征的移動互聯時代，積極探索揚州非物質文化遺產（以下簡稱“非遺”）的數字化傳承與保護，將這種以人為載體的活態(tài)傳承文化形式轉變?yōu)楝F代普通大眾所熟知的移動互聯的典型產物——App。智能手機App，是融媒體時代的典型產物，我們需要使用App去進行信息的接收與傳播，揚州運河沿岸的非遺文化可以通過App更自然地融入人們的生活。App在接收與傳播信息的過程中，內容是核心，但其界面設計是連接用戶和內容的至關重要的橋梁。

二、構思立意

截止到2014年，揚州市共有聯合國教科文組織“人類非物質文化遺產代表作”3項、國家級非物質文化遺產19項、江蘇省非物質文化遺產46項、揚州市非物質文化遺產206項、縣（市、區(qū)）級非物質文化遺產名錄項目237項 。

揚州的非遺文化歷史悠久、種類繁多，具有鮮明的地域特色。筆者希望用戶通過使用揚州非遺App，能在獲取揚州非遺信息的同時，更加深入地感受到揚州所具有的歷史文化及地域文化，增進國內外友人對揚州的了解。

在視覺塑造方面，深入挖掘揚州具有代表性的視覺元素，融入到揚州非遺App界面設計之中。在流程構建方面，圍繞揚州地域文化內涵，結合現階段成熟化的界面交互邏輯，對揚州非遺 App的功能進行構建與分組。（圖1）

三、揚州非遺App版塊內容設計

上述的揚州非遺App功能圖，分為四大版塊：首頁、技藝、直播和我，筆者將對其進行詳細規(guī)劃及闡述：

（1）首頁版塊，包含了揚州非遺的最新消息及相關新聞。揚州某類非遺的博物館、某位非遺傳承大師、某些非遺的主要聚集區(qū)等，這些與揚州非遺相關的信息，都會配合簡介和地圖，在“非遺分布”的子版塊內展現。用戶可在“發(fā)布消息”的子版塊，對本App中發(fā)布的消息和收到的消息進行整理和歸檔。

> 圖1 App功能構建與分組

> 圖2 App入口圖標設計

> 圖3 App界面主要按鈕元件設計

> 圖4 “首頁”版塊

（2）技藝版塊，以官方的形式對揚州非遺做出分類，用戶可以根據自身感興趣的分類進行選擇性瀏覽。根據2014年聯合國教科文組織頒發(fā)給揚州的非物質文化遺產名錄的分類，揚州非遺共分為10類，每項類別中都會有其代表的杰出傳承人。用戶可以選擇這些傳承人進行瀏覽，在“我想傳承”的子版塊中與傳承人進行網絡互動，一方面可以使這些傳承人讓更多人所熟知，另一方面，也讓對揚州非遺感興趣的用戶，能夠更方便地與傳承人取得聯系。揚州非遺可憑借此App平臺，讓自己“走出去”，也可以把更多的有興趣的用戶“引進來”。

（3）直播版塊，是目前較為流行的自媒體的信息傳播方式。該版塊主要承載揚州非遺技藝的直播展示，即揚州非遺傳承人可以使用手機，即時地傳播自己正在傳承的技藝。在“推薦”子版塊里，可以根據用戶的瀏覽習慣去推送與之匹配的非遺技藝。原先一些存有技藝的揚州非遺傳承人，如果需要一個平臺去展示技藝，也可以使用“我要直播”版塊，這樣揚州非遺App的用戶，只要點開直播鏈接，即可觀看。

此外，直播版塊還設計有“我想打賞”和“聯系方式”的二層子功能，一方面可以通過用戶自愿的形式，給予非遺傳承人一定的物質獎勵，以激發(fā)他們的傳承熱情；另一方面，也為平臺的經費籌措與持續(xù)運轉做出貢獻。

（4）我版塊，是對于用戶個人信息的設置和整理，包含用戶對揚州非遺信息的收藏、對非遺傳承人的關注信息、用戶的瀏覽記錄、用戶對話題評論的管理，以及基于用戶個人使用習慣對App相關功能的設置。

四、揚州非遺App界面視覺設計

揚州是國家歷史文化名城和具有傳統特色的風景旅游城市，自古有“淮左名都，竹西佳處”之美稱。揚州非遺手機App的界面視覺設計，需以揚州的傳統地方特色為設計內核，篩選揚州最具代表性的視覺元素，在符合當下智能手機App界面設計潮流的前提下，進行解構與重構，設計出直觀、簡潔、符合絕大多數人群審美習慣的界面設計產品。

（一）揚州非遺App入口圖標的設計

揚州非遺App入口圖標設計分為兩個部分，一部分是圖像設計，另一部分是文字設計。（圖2）

在圖像設計部分，筆者將揚州最具代表性的五亭橋的視覺形象進行抽象與凝練，篩選出五亭橋的頂部與底部，頂部進行了視覺的抽象與剝離，采用正側面的視角，使五亭分左中右對稱排列。底部則將五亭橋的橋洞抽象為不規(guī)則的“凹形紋”，從左至右均勻鋪列。由于人視覺瀏覽順序的緣故，往往是自上而下的順序觀看，因此圖像部分的頂部要略寬于底部。在圖像頂部與底部中間，留下了放置文字設計的區(qū)域。

在文字設計部分，顏色選取方面與圖像設計相一致采用了綠色，一方面綠色能夠吸引用戶的注意，即便用戶手機里的App較多，也能夠第一時間抓住眼球；另一方面，是為了突出現代揚州“公園城市”的發(fā)展定位，展現揚州有山有水有運河，風光秀美的特色。筆者提取揚州的“揚”字，基于書法漢字中的隸書，進行再設計，首先將其進行繁體化處理，突出揚州的傳統文化底蘊，其次在不失去漢字基本的識別功能上進行簡潔化處理“揚”字，最后將文字與圖形相結合，進行融合設計。

（二）ICON按鈕元件的設計

筆者在遵循目前智能手機兩個主要操作系統iOS與Android的最新設計規(guī)范基礎上，進行揚州非遺App界面主要按鈕元件的創(chuàng)新設計，如圖3所示。

首頁的內容主要包含揚州的非遺新聞、非遺動態(tài)、非遺分布等內容，主要是以咨詢類為主，所以在設計按鈕時，筆者提取了咨詢信息內的圖片與文字的隱喻性視覺元素，并將其進行抽象化凝練，圖片以寬型矩形框表示、文字以粗條短線段表示。

技藝版塊按鈕設計，則運用了揚州非遺的代表產品——揚州玉器的制作工具，借以一把小錘子來替代揚州非遺工匠手中的工具，既突出非遺產品制作非機器化的手工特色，也表達了通過簡單的工具就能鑄就精品的工匠精神。

視頻版塊按鈕設計，筆者通過將視頻播放與電視機聯系起來，將電視機的造型扁平化、輪廓化，輔以業(yè)內通用的“視頻播放”按鈕，將這個旋轉后的正三角形放置在“電視機”的正中，用戶看到此按鈕，便能立刻理解其含義。

> 圖5 “技藝”版塊

> 圖6 “視頻”版塊

> 圖7 “我”版塊

最后是我版塊按鈕設計，將所有用戶形象進行抽象，無需區(qū)分用戶性別，提煉出每個人都有的肩部和頭的形象，進行圓角化設計，再置身于一個圓背景，以此暗示用戶這個按鈕與個人相關。

首頁、技藝、視頻與我，是筆者在揚州非遺App功能中所構建的四個大版塊，也是用戶使用揚州非遺App進行交互操作的核心。用戶觸摸“首頁”的按鈕時，“首頁”頁面便被激活，其顏色也會發(fā)生變化，從無彩色變成有彩色（顏色顯示如圖3所示），以此來區(qū)分激活與未激活的按鈕，按鈕被激活時，上方屏幕內即會出現相關信息，其他的按鈕均采用上述有彩色與無彩色區(qū)分的交互設計。

（三）揚州非遺App界面主要版塊的設計

揚州非遺App界面主要版塊有四項，包括首頁、技藝、視頻和我。揚州非遺App主要以由面到點的形式，對揚州非遺項目的新聞動態(tài)、分類、分布等信息進行傳播，再以由點到面的形式，吸引用戶參與，這些用戶有非遺傳承人群、有對揚州非遺有著極大興趣的人群、也有最初不了解揚州非遺但使用App后產生興趣點的人群。各類人群在揚州非遺App上互動分享自己身邊的非遺資源和傳統文化。

筆者結合揚州地方特色，又結合當下流行的App版塊設計形式，針對首頁、技藝、視頻和我，四大版塊進行了原型設計。（圖4—7）

揚州非遺App界面主要版塊設計，該四張原型圖從整體角度來看，采用白色為主調背景色，文字設計采用黑體字，主要顏色有黑、白、紅三種，分別應用于不同的功能與排版。圖片與視頻的縮略圖，以矩形的形式切割圓角，加深灰色投影懸浮于白色背景之上。由于智能手機瀏覽方式的限制，用戶對揚州App的瀏覽行為，采用豎持手機的方式，每條信息采用圖文并茂的形式，將縮略圖與文章標題排版于背景之上，不同信息用灰色線條隔開，以示區(qū)分。上文所提及的四個ICON按鈕元件，固定放置于屏幕下方，當用戶在手機屏幕上進行滑動操作時，并不會消失，而是永久顯示在界面上，以方面用戶在不同功能版塊進行快速切換。

該四張原型圖從細節(jié)角度來看，首頁版塊的主要功能是揚州非遺的信息綜合展示，應當以若干圖文信息為主，故筆者在設計時使用小縮略圖的形式，吸引用戶眼球，如圖4所示。在首頁標題的下方，還設計了“推薦、動態(tài)、非遺分布、消息”四個子功能標簽，以此方便信息的歸類與用戶的篩選瀏覽。

技藝版塊主要展示揚州非遺代表作品，故此將技藝傳承的照片以豎排版的形式，排列在界面上方的醒目位置，如圖5所示。在技藝傳承的照片下方是技藝版塊的四個子功能標簽，再往下的相關信息以圖片形式為主，以便于各類文化層次用戶的瀏覽。

直播版塊在未播放時，筆者設計了播放交互按鈕，如圖6所示。右下角有視頻的留言互動的數量。當用戶點擊視頻播放鍵時即開始播放視頻且按鈕消失。直播版塊也分為四個子功能，其中“我來直播”標簽，可讓用戶參與到視頻直播互動之中。

在我版塊中，以一個不規(guī)則梯形進行用戶頭像的設計，如圖7，用戶可在設置中個性定制頭像，無論用戶設置的頭像外輪廓是什么形狀，App都會自動進行裁切。頭像下方是用戶的昵稱，用戶的收藏、瀏覽歷史及關注量都會并排顯示在昵稱正下方。用戶的點評及留言會被App記錄，縮略圖以正方形搭配文字標題的形式顯示在界面下三分之一處。

五、結論

隨著當前移動互聯網的迅速發(fā)展與進步，移動智能終端的發(fā)展進入了一個全新的發(fā)展階段。同時，移動互聯網的發(fā)展也逐漸改變了人們的生活方式。在本文的研究中，筆者針對揚州非遺App的界面設計進行了細致的分析和探索，歸納出設計方法和思路，并將理論轉化為實踐得出了四大功能版塊的視覺化設計方案。筆者期望本文的研究能夠指導我們進行揚州非遺App的界面設計，使揚州的非遺產品、非遺文化能夠通過移動互聯網被更多的受眾所熟知?！?/p>