陳歡 周璧承
摘? 要:數(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è)計。