陳歡　周璧承

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

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

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

在“互聯(lián)網(wǎng)+”的大趨勢(shì)下，傳統(tǒng)文化與移動(dòng)端結(jié)合的趨勢(shì)已勢(shì)不可擋。但目前背景下的傳統(tǒng)文化產(chǎn)業(yè)還處于較初級(jí)的探索階段。許多傳統(tǒng)文化類APP依舊是簡(jiǎn)單的圖文科普，忽略了產(chǎn)品本身可能帶來的不夠友好的用戶體驗(yàn)，反而削弱用戶對(duì)傳統(tǒng)文化的興趣。身處互聯(lián)網(wǎng)高速發(fā)展的時(shí)代，人們很容易接受新鮮事物，但對(duì)于傳統(tǒng)文化缺少了解。并非是傳統(tǒng)文化失去魅力，而是因?yàn)闆]有“搭上”互聯(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ā)展，信息的種類也變得多種多樣，在這種情況下，書籍也許早已不是傳播媒介的主角。不管是流通速度、密度，還是量的大小，書籍和電子媒介都不能相提并論，但是電子媒介無(wú)法完全取代書籍。在這種時(shí)刻，我們有必要再次確認(rèn)‘書籍是什么，如果什么都不做、都不想，只是堅(jiān)持用以往的方法來設(shè)計(jì)書，那么不管怎樣都會(huì)錯(cuò)過對(duì)時(shí)代的準(zhǔn)確認(rèn)識(shí)。”

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（二）交互動(dòng)效的亮點(diǎn)設(shè)計(jì)

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

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

四、結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

作者簡(jiǎn)介：

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

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