傳統(tǒng)文化元素在APP設(shè)計中的應(yīng)用

陳歡　周璧承

摘? 要：數(shù)字化的生存方式已經(jīng)成為當(dāng)代社會人類生活的基本特點(diǎn)，傳統(tǒng)文化也必將躋身于數(shù)字化的發(fā)展進(jìn)程。在移動互聯(lián)網(wǎng)背景下，在理解大眾對傳統(tǒng)文化的理解程度和對界面不同認(rèn)知的基礎(chǔ)上，不能直接將傳統(tǒng)元素照搬到App設(shè)計中，而要重視內(nèi)在的傳統(tǒng)文化特色與精神內(nèi)涵，將傳統(tǒng)文化各個層次的藝術(shù)價值表達(dá)出來，以提升用戶體驗和大眾對傳統(tǒng)文化的包容度及理解度。

關(guān)鍵詞：傳統(tǒng)文化;元素;APP設(shè)計;用戶體驗

基金項目：本文系江蘇省高校哲學(xué)社會科學(xué)研究一般項目“中華傳統(tǒng)文化影響下的游戲創(chuàng)新設(shè)計與內(nèi)蘊(yùn)提升研究”（2021SJA2312）研究成果。

在“互聯(lián)網(wǎng)+”的大趨勢下，傳統(tǒng)文化與移動端結(jié)合的趨勢已勢不可擋。但目前背景下的傳統(tǒng)文化產(chǎn)業(yè)還處于較初級的探索階段。許多傳統(tǒng)文化類APP依舊是簡單的圖文科普，忽略了產(chǎn)品本身可能帶來的不夠友好的用戶體驗，反而削弱用戶對傳統(tǒng)文化的興趣。身處互聯(lián)網(wǎng)高速發(fā)展的時代，人們很容易接受新鮮事物，但對于傳統(tǒng)文化缺少了解。并非是傳統(tǒng)文化失去魅力，而是因為沒有“搭上”互聯(lián)網(wǎng)這趟“高速列車”，沒有運(yùn)用合適的方式去展現(xiàn)其獨(dú)有的光彩。因此，為幫助傳統(tǒng)文化重獲新生，使其與互聯(lián)網(wǎng)相結(jié)合成為必然。

隨著近幾年互聯(lián)網(wǎng)的高速發(fā)展和智能終端的普及，信息的獲取方式也在發(fā)生改變，傳統(tǒng)文化也必然處于這股數(shù)字化潮流之中。原研哉提道：“隨著現(xiàn)代信息技術(shù)的高速發(fā)展，信息的種類也變得多種多樣，在這種情況下，書籍也許早已不是傳播媒介的主角。不管是流通速度、密度，還是量的大小，書籍和電子媒介都不能相提并論，但是電子媒介無法完全取代書籍。在這種時刻，我們有必要再次確認(rèn)‘書籍是什么，如果什么都不做、都不想，只是堅持用以往的方法來設(shè)計書，那么不管怎樣都會錯過對時代的準(zhǔn)確認(rèn)識。”

傳統(tǒng)文化具有很高的知識價值和社會價值。在信息高度發(fā)達(dá)的社會，傳統(tǒng)文化本應(yīng)迎來難得的歷史機(jī)遇。然而，傳統(tǒng)文化類App目前未被大眾所重視，其晦澀難懂的刻板印象已深入人心，除少數(shù)特殊人群外，大眾對傳統(tǒng)文化并未有非常濃厚的興趣。加之近年來各種外國文藝作品的沖擊，吸引了人們的關(guān)注，傳統(tǒng)文化類App的發(fā)展更是難上加難。

一款2017年上線的App《榫卯》被蘋果公司CEO庫克評價為“為中國的應(yīng)用市場提供了一些獨(dú)特性”。它的成功讓我們看到了傳統(tǒng)文化與新媒介結(jié)合的強(qiáng)大優(yōu)勢，更讓我們相信，只要設(shè)計得當(dāng)，并結(jié)合現(xiàn)代科技手段，傳統(tǒng)文化將會在這個信息時代重獲生機(jī)，這無論對于提高我國文化軟實(shí)力還是豐富大眾的精神需求，都具有非凡意義。因此，針對這一現(xiàn)狀，筆者以紙鳶主題的中國傳統(tǒng)文化類App《鳶源》為例，探討傳統(tǒng)文化APP的設(shè)計思路、文化意義及社會價值。

一、視覺設(shè)計框架的搭建

《鳶源》就像一個裝在口袋里的風(fēng)箏科普數(shù)字互動展覽館。通過數(shù)字交互手段的注入，喚醒年輕人對傳統(tǒng)風(fēng)箏文化的興趣，讓更多人特別是年輕人了解并喜愛我們的民族傳統(tǒng)文化是《鳶源》App的設(shè)計初衷。視覺設(shè)計框架是指設(shè)計提煉并選擇視覺風(fēng)格，意義在于有理有據(jù)地推導(dǎo)視覺設(shè)計風(fēng)格，使設(shè)計更具有現(xiàn)實(shí)意義和說服力。

視覺框架的設(shè)計務(wù)必力求精準(zhǔn)，具體確定為：前期分析、產(chǎn)品架構(gòu)、設(shè)計準(zhǔn)則和創(chuàng)新亮點(diǎn)四大部分。通過前期分析所得到的設(shè)計目的來進(jìn)行用戶路徑的梳理和設(shè)計準(zhǔn)則的制定，最后運(yùn)用到相應(yīng)的視覺設(shè)計與交互設(shè)計中。經(jīng)過調(diào)研，大部分的傳統(tǒng)文化類APP普遍存在功能單一、視覺界面簡陋、交互動效簡單等問題，而面臨著人們普遍對傳統(tǒng)文化不感興趣的文化危機(jī)?！而S源》希望能在傳統(tǒng)文化逐漸被淡忘的背景下，重喚大家對傳統(tǒng)風(fēng)箏文化的興趣以及對傳統(tǒng)民族藝術(shù)探索的欲望。

前期分析包括設(shè)計的必要性和基本需求的思考。近年來傳統(tǒng)文化類APP層出不窮，但大部分都存在著功能單一、界面單薄、交互缺失等問題，《鳶源》的主題就是希望全方位多角度地傳播文化之美，并通過視覺和交互動效的設(shè)計由內(nèi)而外地協(xié)調(diào)統(tǒng)一，使得視覺設(shè)計元素和《鳶源》APP的功能目的及情感需求高度匹配，以達(dá)到傳播傳統(tǒng)文化的根本目的。

產(chǎn)品架構(gòu)主要是內(nèi)容板塊的分類，在《鳶源》APP中主要分為首頁、史話、故事三大板塊，從不同的切入點(diǎn)來向用戶展示內(nèi)容。設(shè)計準(zhǔn)則包括對內(nèi)容、排版布局、色彩以及動效的設(shè)計。《鳶源》APP中的設(shè)計意圖是在更好傳達(dá)內(nèi)容、帶給用戶舒適用戶體驗的基礎(chǔ)上，使傳統(tǒng)文化與現(xiàn)代元素相融合、碰撞成更易為用戶所接受的視覺設(shè)計和交互設(shè)計。由于《鳶源》APP面向的使用人群大部分為年輕人，在產(chǎn)品視覺上必然要提高用戶的愉悅感以及適當(dāng)?shù)捏@喜感，并且注重細(xì)節(jié)的表達(dá)。在顏色上《鳶源》選擇宣紙黃作為主色;在形態(tài)上運(yùn)用了風(fēng)箏形狀和傳統(tǒng)漢字的變形結(jié)合，訴說著傳統(tǒng)與現(xiàn)代的融合，傳達(dá)新時代的傳播方式。

創(chuàng)新亮點(diǎn)主要包括傳統(tǒng)元素與現(xiàn)代設(shè)計風(fēng)格的融合以及新的交互方式。之前的大部分的傳統(tǒng)文化競品APP中，傳統(tǒng)紋樣以及富有民族特色的圖標(biāo)大多比較精致且充滿細(xì)節(jié)，應(yīng)用在界面中反而識別度不高。因此在《鳶源》APP中，筆者便嘗試將元素重新提取與文字進(jìn)行融合，看似簡單，卻是最適合當(dāng)下界面的場景設(shè)計。同時考慮到大屏移動設(shè)備的普及，在交互方式上將主要功能區(qū)域下移，包括常年處于屏幕頂部的“返回”按鈕，更加符合發(fā)展趨勢的同時，也降低了用戶的操作成本。用戶與內(nèi)容之間的距離，通過新的交互方式進(jìn)一步拉近，在滿足操作的易用性基礎(chǔ)上，增加了小部分驚喜，使得《鳶源》向“好產(chǎn)品”又邁進(jìn)了一步。

二、《鳶源》APP的圖標(biāo)設(shè)計

一款產(chǎn)品成功的基礎(chǔ)，是深入理解用戶，再圍繞用戶的需求進(jìn)行設(shè)計。而不同的用戶對于傳統(tǒng)文化的需求也不同，且處于不斷變化中，因此在前期設(shè)計中對內(nèi)容和功能的確定是十分必要的。對于年輕用戶來說，傳統(tǒng)APP的設(shè)計需要更新穎、充滿趣味性且體驗感十足。所以，從內(nèi)容到功能都需要匹配用戶需求。

圖標(biāo)是具有指代意義的具有標(biāo)識性質(zhì)的圖形，它不僅是一種圖形，更是一種標(biāo)識，它具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。

在icon圖標(biāo)設(shè)計上，主要從平臺命名、面向的用戶群體偏好以及產(chǎn)品的類型定義三個方面來確定圖標(biāo)的顏色、形態(tài)等。產(chǎn)品命名“鳶源”的由來：“鳶”即風(fēng)箏，“源”即淵源，產(chǎn)品向用戶講述風(fēng)箏的“前世今生”，使用戶感受風(fēng)箏的文化魅力，從而激發(fā)用戶對傳統(tǒng)民族文化的興趣。而對于色彩的選擇，在制作過程中，選擇了宣紙色作為用色參考，宣紙也隱喻了中國傳統(tǒng)文化“記錄者”的屬性，文字背后是中國傳統(tǒng)圖案紋樣，山川、河流、祥云與太陽，隱隱約約、若隱若現(xiàn)，既給圖標(biāo)增加了景深，展現(xiàn)立體感，又將傳統(tǒng)元素與現(xiàn)代字體巧妙融合。在字體上進(jìn)行了圖形化重設(shè)計，將傳統(tǒng)字體進(jìn)行圖形化變形。文字內(nèi)部的變形設(shè)計也將傳統(tǒng)風(fēng)箏融合其中，具體的創(chuàng)意構(gòu)思。

用戶體驗在整個產(chǎn)品的設(shè)計過程中十分重要，設(shè)計師在每個環(huán)節(jié)都要考慮到用戶的主觀感受和可能使用的交互手段，圖標(biāo)在其中也有著舉足輕重的作用。用戶體驗可以被分解成五個要素：表現(xiàn)層、框架層、結(jié)構(gòu)層、范圍層、戰(zhàn)略層。

一套用戶體驗好的圖標(biāo)也是按照用戶體驗五大要素進(jìn)行設(shè)計的。對于《鳶源》來說，在戰(zhàn)略層就已經(jīng)定義好了，整個App是傳承中國傳統(tǒng)風(fēng)箏文化，由此確定設(shè)計風(fēng)格是偏傳統(tǒng)的中國風(fēng)。其次在框架層，此次設(shè)計的圖標(biāo)屬于導(dǎo)航圖標(biāo)，因此在設(shè)計之前就必須先考慮好圖標(biāo)的使用場景，再根據(jù)場景和功能定義圖標(biāo)的樣式、尺寸等。

《鳶源》的主功能按鈕圖標(biāo)處于首頁，承載的主要業(yè)務(wù)功能是進(jìn)行內(nèi)容板塊的流量分發(fā)，是十分重要的功能入口，在整個首頁中處于最高的優(yōu)先級，所以需要清晰直觀地傳達(dá)功能信息，其他因素都要為此“讓位”。圖標(biāo)所處界面的復(fù)雜程度較低，在圖形的表達(dá)方式上，我們一開始決定使用稍復(fù)雜的圖形設(shè)計?？紤]到產(chǎn)品定位相對穩(wěn)定，如果能將品牌和體驗設(shè)計相融合，打造出符合品牌調(diào)性和產(chǎn)品特征的圖形樣式，不僅能在品牌上深入人心，也能獲得良好的體驗，由此產(chǎn)出第一版設(shè)計。

信息時代，設(shè)計的目的是使信息有序、準(zhǔn)確地傳達(dá)和被有效地利用，設(shè)計活動集中在對信息的分析與處理上。而這樣的圖標(biāo)在隱喻上過于晦澀，在視覺上過于復(fù)雜，如果人們不看下方的文字說明，在使用此類圖標(biāo)時就需要花費(fèi)數(shù)秒甚至更長時間去猜測圖標(biāo)含義，甚至根本不知道這套圖標(biāo)的具體意思，體驗并不好。在圖標(biāo)無法表達(dá)復(fù)雜含義的情況下，我們最終決定使用更加簡潔的文字型圖標(biāo)樣式，并加以簡單的設(shè)計修飾，這樣既能增加圖標(biāo)信息的可用性，又能提高用戶工作的效率，同時還能表達(dá)出產(chǎn)品的中國風(fēng)。經(jīng)過關(guān)鍵詞提取與繪制，最后的圖標(biāo)樣式雖然不是最好看的，卻是最適合首頁這個場景的。

三、《鳶源》的具體亮點(diǎn)設(shè)計

（一）內(nèi)容展示的亮點(diǎn)設(shè)計

卡片化設(shè)計不僅可以聚焦用戶的視線，同時往往帶有足夠的空間留白和層次，充分體現(xiàn)質(zhì)感和舒適感。

在首頁采用了卡片化設(shè)計，通過大卡片以及傳統(tǒng)配色的將四大類型的傳統(tǒng)風(fēng)箏展示出來，背景的動態(tài)元素配上靜態(tài)的卡片，動靜結(jié)合的樣式也表達(dá)了風(fēng)箏雖歷史悠久，但始終充滿無窮的活力。在風(fēng)箏類型的工藝頁面的設(shè)計上，通過畫卷般的展現(xiàn)方式，將風(fēng)箏的制作方法展示出來，畫卷徐徐展開，經(jīng)過手繪之后風(fēng)箏的細(xì)節(jié)更加精美且清晰，加上排版設(shè)計的配合相得益彰，整個頁面在保證專業(yè)度的前提下為用戶提供了舒適的閱讀體驗。以用戶為本，想用戶所想。在特定的使用場景中，找到用戶想要完成的操作目標(biāo)，然后運(yùn)用最恰當(dāng)?shù)慕换シ绞綆椭脩舯憬輰?shí)現(xiàn)。

（二）交互動效的亮點(diǎn)設(shè)計

移動交互動效指用戶在與移動設(shè)備交互過程中，用戶界面呈現(xiàn)出來的動態(tài)效果。移動應(yīng)用中的交互動效能夠傳達(dá)狀態(tài)，提供反饋，將用戶的操作可視化，增強(qiáng)直接操縱的感覺。交互動效可以在很多層面發(fā)揮作用，一方面可以通過視覺設(shè)計和動作設(shè)計讓APP的表現(xiàn)能力更強(qiáng);另一方面可以增加動能提供豐富的視覺效果，更生動、清晰、高效地傳遞信息，使APP充滿節(jié)奏感和掌控感，帶給用戶愉悅有趣的感受，增加用戶進(jìn)行操控的積極性。動效是最能被用戶所感知和注意到的視覺元素，會吸引用戶相當(dāng)一部分的注意力，那么如何創(chuàng)新交互動效，將這些注意力與我們所要傳播的內(nèi)容相融合呢？

首先在設(shè)計的時候我們將內(nèi)容與操作手勢進(jìn)行了綁定，每次滑動時，APP內(nèi)的文字及其他視覺元素會始終跟著手勢的操作進(jìn)行鏡頭切換般得運(yùn)動，新穎且有趣。由于文字板塊也是交互動效的一部分，所以用戶在進(jìn)行操作時必然會注意到這個板塊的運(yùn)動，再配合整理精煉的文本內(nèi)容，用戶閱讀的欲望便會增加。而在一開始進(jìn)入史話的在紋樣頁面的，內(nèi)容元素會有節(jié)奏地向右運(yùn)動，告訴用戶向右滑即可繼續(xù)閱讀，這樣的動效既具引導(dǎo)性，又使產(chǎn)品充滿個性。

四、結(jié)語

總之，傳統(tǒng)民族文化擁有獨(dú)特的魅力。輔之以現(xiàn)代互聯(lián)網(wǎng)手段，針對用戶體驗提出相應(yīng)解決方案，對產(chǎn)品不斷進(jìn)行迭代優(yōu)化，是設(shè)計此類主題APP的關(guān)鍵。

參考文獻(xiàn)：

[1]庫伯，等.About Face4：交互設(shè)計精髓紀(jì)念版[M].倪衛(wèi)國，劉松濤，等譯.北京：電子工出版社，2020.

[2]加瑞特.用戶體驗的要素：以用戶為中心的Web的設(shè)計[M].范曉燕，譯.北京：機(jī)械工業(yè)出版社，2008.

[3]譚坤，王凱翔.軟件界面中的圖標(biāo)設(shè)計[J].飾，2007（4）：35-37.

[4]原研哉.設(shè)計中的設(shè)計[M].朱鍔，譯.濟(jì)南：山東人民出版社，2006：102.

作者簡介：

陳歡，博士在讀，南京傳媒學(xué)院副教授。研究方向：數(shù)字娛樂與交互設(shè)計，互聯(lián)網(wǎng)思維與項目管理。

周璧承，廣東OPPO移動通信有限公司交互設(shè)計主管。研究方向：互聯(lián)網(wǎng)交互設(shè)計。