傳統文化元素在APP設計中的應用

陳歡　周璧承

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

關鍵詞：傳統文化;元素;APP設計;用戶體驗

基金項目：本文系江蘇省高校哲學社會科學研究一般項目“中華傳統文化影響下的游戲創新設計與內蘊提升研究”（2021SJA2312）研究成果。

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

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

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

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

一、視覺設計框架的搭建

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

視覺框架的設計務必力求精準，具體確定為：前期分析、產品架構、設計準則和創新亮點四大部分。通過前期分析所得到的設計目的來進行用戶路徑的梳理和設計準則的制定，最后運用到相應的視覺設計與交互設計中。經過調研，大部分的傳統文化類APP普遍存在功能單一、視覺界面簡陋、交互動效簡單等問題，而面臨著人們普遍對傳統文化不感興趣的文化危機。《鳶源》希望能在傳統文化逐漸被淡忘的背景下，重喚大家對傳統風箏文化的興趣以及對傳統民族藝術探索的欲望。

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

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

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

二、《鳶源》APP的圖標設計

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

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

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

用戶體驗在整個產品的設計過程中十分重要，設計師在每個環節都要考慮到用戶的主觀感受和可能使用的交互手段，圖標在其中也有著舉足輕重的作用。用戶體驗可以被分解成五個要素：表現層、框架層、結構層、范圍層、戰略層。

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

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

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

三、《鳶源》的具體亮點設計

（一）內容展示的亮點設計

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

在首頁采用了卡片化設計，通過大卡片以及傳統配色的將四大類型的傳統風箏展示出來，背景的動態元素配上靜態的卡片，動靜結合的樣式也表達了風箏雖歷史悠久，但始終充滿無窮的活力。在風箏類型的工藝頁面的設計上，通過畫卷般的展現方式，將風箏的制作方法展示出來，畫卷徐徐展開，經過手繪之后風箏的細節更加精美且清晰，加上排版設計的配合相得益彰，整個頁面在保證專業度的前提下為用戶提供了舒適的閱讀體驗。以用戶為本，想用戶所想。在特定的使用場景中，找到用戶想要完成的操作目標，然后運用最恰當的交互方式幫助用戶便捷實現。

（二）交互動效的亮點設計

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

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

四、結語

總之，傳統民族文化擁有獨特的魅力。輔之以現代互聯網手段，針對用戶體驗提出相應解決方案，對產品不斷進行迭代優化，是設計此類主題APP的關鍵。

參考文獻：

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

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

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

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

作者簡介：

陳歡，博士在讀，南京傳媒學院副教授。研究方向：數字娛樂與交互設計，互聯網思維與項目管理。

周璧承，廣東OPPO移動通信有限公司交互設計主管。研究方向：互聯網交互設計。