王昭

摘要：以用戶體驗(yàn)為核心，通過研究獲取相關(guān)中國傳統(tǒng)文化推廣類網(wǎng)站的設(shè)計(jì)方法。通過研究目標(biāo)用戶行為，將人對扇物化的體驗(yàn)虛擬化;分析中國傳統(tǒng)扇子的特點(diǎn)，將扇元素提取并符號化;以“京扇子”品牌網(wǎng)站設(shè)計(jì)為例，將用戶體驗(yàn)作為核心，進(jìn)行網(wǎng)站設(shè)計(jì)。設(shè)計(jì)出符合用戶體驗(yàn)的京扇子品牌官方網(wǎng)站，并總結(jié)出設(shè)計(jì)方法。該研究可以為中國傳統(tǒng)文化推廣類網(wǎng)站設(shè)計(jì)提供參考。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì) 元素再設(shè)計(jì) 用戶體驗(yàn) 品牌 網(wǎng)絡(luò)化

中圖分類號：TB47

文獻(xiàn)標(biāo)識碼：A

文章編號：1003-0069 （2020） 04-0028-04

引言

中國扇文化源遠(yuǎn)流長，早已成為文人雅士的必備配飾、也是詩歌、小說中重要描述的物品之一。但隨著人們生活方式的轉(zhuǎn)變，對扇子的認(rèn)知愈發(fā)模糊，并逐漸淡出人們的視野，保護(hù)、傳承與發(fā)展扇文化勢在必行。習(xí)近平總書記指出要把中國傳統(tǒng)文化“講清楚”，讓它“活起來”，互聯(lián)網(wǎng)成為實(shí)踐、發(fā)展的重要方式之一。近年來中國傳統(tǒng)文化正運(yùn)用數(shù)字化、新媒體的手段推廣與傳播，喚起越來越多的人重新關(guān)注傳統(tǒng)文化。扇文化完全可以借助這股風(fēng)潮“活起來”，企業(yè)也可以借助這股東風(fēng)壯大自己，提升產(chǎn)品的市場占有率與銷售額，繼續(xù)為扇文化產(chǎn)業(yè)的發(fā)展提供重要的支持。

但新媒體的傳播不僅是將扇子相關(guān)的內(nèi)容簡單羅列，而是通過分析用戶的心理與行為，設(shè)計(jì)出滿足用戶需求的網(wǎng)絡(luò)產(chǎn)品。本文以用戶體驗(yàn)設(shè)計(jì)為核心，基于“京扇子”品牌的設(shè)計(jì)實(shí)踐，總結(jié)出符合用戶體驗(yàn)的中國扇文化網(wǎng)絡(luò)化的相關(guān)設(shè)計(jì)方法，為其他傳統(tǒng)文化的網(wǎng)絡(luò)化設(shè)計(jì)提供有價(jià)值的參考。

一、網(wǎng)頁設(shè)計(jì)中的用戶體驗(yàn)

網(wǎng)頁設(shè)計(jì)包含了版式、字體、色彩等設(shè)計(jì)，但隨著網(wǎng)頁與用戶的互動越來越頻繁，用戶體驗(yàn)設(shè)計(jì)逐漸成為網(wǎng)頁能否成功的關(guān)鍵因素。優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)可充分調(diào)動人們的感官、情感、互動等體驗(yàn)，使用戶體會到友好、舒適、便捷的網(wǎng)站使用環(huán)境[l]。優(yōu)質(zhì)的用戶體驗(yàn)設(shè)計(jì)不僅可以更好地展示產(chǎn)品，使用戶了解到產(chǎn)品的真諦，還可以與用戶建立情感關(guān)系，增強(qiáng)網(wǎng)站對用戶的黏度。

用戶體驗(yàn)設(shè)計(jì)不僅是在對用戶行為的研究上，還是對網(wǎng)頁設(shè)計(jì)中的字體、顏色、版式、圖像、動態(tài)效果等元素綜合的運(yùn)用，通過合理的整合表達(dá)網(wǎng)站內(nèi)容。網(wǎng)站設(shè)計(jì)是無法為用戶提供直接的用戶體驗(yàn)的，而是運(yùn)用上文提到的這些元素，達(dá)到與用戶的良好互動，最終滿足用戶的瀏覽需求。

二、網(wǎng)絡(luò)化設(shè)計(jì)中的用戶體驗(yàn)設(shè)計(jì)原則

（一）構(gòu)建“互聯(lián)網(wǎng)+實(shí)體”化的體驗(yàn)性設(shè)計(jì)

國務(wù)院在《國務(wù)院關(guān)于積極推進(jìn)“互聯(lián)網(wǎng)+”行動的指導(dǎo)意見》中提出，“互聯(lián)網(wǎng)+”是把互聯(lián)網(wǎng)的創(chuàng)新成果與經(jīng)濟(jì)社會各領(lǐng)域深度融合，推動技術(shù)進(jìn)步、效率提升和組織變革，提升實(shí)體經(jīng)濟(jì)創(chuàng)新力和生產(chǎn)力，形成更廣泛的以互聯(lián)網(wǎng)為基礎(chǔ)設(shè)施和創(chuàng)新要素的經(jīng)濟(jì)社會發(fā)展新形態(tài)[2]。國務(wù)院的指導(dǎo)意見為京扇子品牌網(wǎng)絡(luò)化建設(shè)提供了重要的參考。在新時(shí)代的品牌發(fā)展中，不能將網(wǎng)絡(luò)化與線下實(shí)體店分開對待，而是在充分挖掘?qū)嶓w店的經(jīng)驗(yàn)、教訓(xùn)，為品牌的網(wǎng)絡(luò)化設(shè)計(jì)提供參考。

首先，“互聯(lián)網(wǎng)+實(shí)體”的設(shè)計(jì)不是用網(wǎng)店取代實(shí)體店、也不是用網(wǎng)店補(bǔ)充實(shí)體店，應(yīng)利用二者的優(yōu)勢相互促進(jìn)，實(shí)體店應(yīng)充分發(fā)揮用戶可接觸式的體驗(yàn)作用，保持用戶對品牌的信任。而網(wǎng)店應(yīng)利用傳播的優(yōu)勢拓展市場，為實(shí)體店帶來新的客源，促進(jìn)品牌擴(kuò)張與消費(fèi)額的增長。其次，應(yīng)深入挖掘網(wǎng)絡(luò)的潛力，作為當(dāng)今社會中重要的媒介之一，擁有傳播力較強(qiáng)，傳播、運(yùn)營成本低等特點(diǎn)。利用網(wǎng)絡(luò)資源傳播品牌，利用在線學(xué)堂、論壇、活動等多種手段與消費(fèi)者互動，增強(qiáng)品牌認(rèn)知度。通過引導(dǎo)用戶在線體驗(yàn)，最終引入到線下實(shí)體店消費(fèi)。

（二）抓住用戶體驗(yàn)要素

辛向陽提出，用戶的交互行為由人、動作、媒介、目的和場景構(gòu)成，在用戶體驗(yàn)設(shè)計(jì)的研究中，要抓住行為邏輯，進(jìn)行行為的設(shè)計(jì)[3]。作為網(wǎng)絡(luò)產(chǎn)品的設(shè)計(jì)研究方法，用戶行為研究的相關(guān)數(shù)據(jù)影響著網(wǎng)站的建構(gòu)，最終可能決定了網(wǎng)站的成敗。網(wǎng)絡(luò)化的品牌傳播形式不同于實(shí)體店，在實(shí)體店中可通過店面空間布局引導(dǎo)消費(fèi)者的參觀路線。但網(wǎng)絡(luò)中這種情況是無法實(shí)現(xiàn)的，用戶進(jìn)入網(wǎng)站后，第一眼就要抓住眼球，留下用戶。這也是為什么當(dāng)今許多網(wǎng)站中運(yùn)用開屏大國或視頻的方式展示品牌或產(chǎn)品。如Players Paris官方網(wǎng)站（圖1），作為專業(yè)提供商業(yè)和品牌內(nèi)容的公司，開屏圖像中展示了多項(xiàng)成功案例，瀏覽者進(jìn)入網(wǎng)站后立刻就被這些震撼的畫面所吸引。

理查德·布坎南清晰的將用戶體驗(yàn)歸納為：通過媒介的作用來創(chuàng)造和支持人的行為[4]。將用戶對扇的認(rèn)知與感受虛擬化，使人們在思想上重新定義扇子，為未來的商業(yè)銷售提供支撐。就像蘋果官方網(wǎng)站（圖2）推廣iPhonell Pro產(chǎn)品一樣，里面所有的內(nèi)容和視頻均用iPhonell拍攝，使用戶感覺只要擁有了這款手機(jī)，就可以拍攝出與官網(wǎng)宣傳片相同效果的視頻。我們在京扇子網(wǎng)站構(gòu)建中，也應(yīng)傳達(dá)相同的使用效果，使用戶感受到擁有這些產(chǎn)品，將使自己的生活品質(zhì)得到提升。這與我們要表達(dá)的中心概念不謀而合：扇子可以提升生活品質(zhì)，最終成為生活中不可或缺的組成部分。我們運(yùn)用好網(wǎng)絡(luò)媒介，打造新的消費(fèi)時(shí)尚，為推廣品牌、產(chǎn)品銷售服務(wù)。

（三）構(gòu)建一致的線上線下體驗(yàn)

作為以實(shí)體店起家的京扇子品牌，店面的裝修風(fēng)格與展品布置已經(jīng)在消費(fèi)者心中烙下了很深的印象，那我們在網(wǎng)站構(gòu)建時(shí)應(yīng)考慮延續(xù)線下店的風(fēng)格。因?yàn)槿藗儗κ煜さ氖挛飼a(chǎn)生強(qiáng)烈的信任感，尤其是在虛擬的網(wǎng)絡(luò)世界。就像一個(gè)人外出旅行，尤其是去陌生的國度，當(dāng)被吃飯問題困擾時(shí)，那么麥當(dāng)勞可能就是旅行者的最終選擇。那么這樣的思路同樣適用于京扇子品牌的網(wǎng)絡(luò)化設(shè)計(jì)，品牌形象及品牌感受的延展使網(wǎng)絡(luò)推廣過程更加的便捷，即使沒有進(jìn)入京扇子店鋪購物過的消費(fèi)者，由于有實(shí)體店的支撐，也會給人以信任感。

如果品牌本身已構(gòu)建較強(qiáng)的時(shí)尚性與品質(zhì)感，應(yīng)將這種品質(zhì)感延續(xù)，使線上線下保持一致性。京扇子品牌線下實(shí)體店以獨(dú)特的設(shè)計(jì)風(fēng)格、輕松時(shí)尚的設(shè)計(jì)品味成為吸引消費(fèi)者的重要原因。而在網(wǎng)絡(luò)傳播中應(yīng)吸取線下店鋪的視覺信息并提取，應(yīng)用到網(wǎng)站設(shè)計(jì)之中。使線下店鋪已形成的較好心理感受被移植到網(wǎng)站之中，為初次使用網(wǎng)站的用戶帶來熟悉感與安全感，從而留住了網(wǎng)絡(luò)用戶，如圖3。

三、結(jié)構(gòu)設(shè)計(jì)中的用戶體驗(yàn)設(shè)計(jì) （一）布局創(chuàng)新

網(wǎng)站整體的布局設(shè)計(jì)中，應(yīng)打破守舊、古板、無趣的固有印象，運(yùn)用現(xiàn)代的設(shè)計(jì)方法，為品牌的推廣與產(chǎn)品的銷售服務(wù)。作為產(chǎn)品重要的消費(fèi)人群——年輕人，要抓住他們崇尚自由、品味時(shí)尚的特征，在網(wǎng)站設(shè)計(jì)中要能吸引這部分用戶的關(guān)注。例如作為一個(gè)以戶外用品為核心產(chǎn)品的企業(yè)，Open Wear官方網(wǎng)站（圖4）在用戶初次訪問時(shí)，將戶外運(yùn)動的激情與挑戰(zhàn)展示在消費(fèi)者面前，非規(guī)整化的布局模式又將自由的感受賦予到設(shè)計(jì)之中，突破了網(wǎng)頁規(guī)矩的布局模式，給消費(fèi)者帶來了突破現(xiàn)實(shí)社會中條條框框的感覺，又使消費(fèi)者形成運(yùn)動是釋放、無拘無束的感受。

我們在思考京扇子品牌網(wǎng)站所能帶給觀眾的感受到底在什么地方?！皶r(shí)尚”、“生活”、“格調(diào)”是我們可以為消費(fèi)者賦予的關(guān)鍵詞，這也正是品牌現(xiàn)有重要的發(fā)展方向。非對稱的布局形式是在頁面設(shè)計(jì)中可以考慮的重要方式之一，大國與內(nèi)容圖交錯(cuò)出現(xiàn)充分體現(xiàn)了網(wǎng)站開放與無束縛的性格。非對稱的頁面結(jié)構(gòu)也與扇子的對稱結(jié)構(gòu)形成強(qiáng)烈的對比，使人們感受到傳統(tǒng)與現(xiàn)代的碰撞。但在非對稱的布局中應(yīng)把握住網(wǎng)頁的重心點(diǎn)位置，使頁面在瀏覽過程中不至于失去平衡，如圖5。

（二）結(jié)構(gòu)創(chuàng)新

網(wǎng)站在創(chuàng)作過程中牢牢把握住建站初心，把對品牌的推廣、重塑人們生活作為重要的展示信息之一，所以在網(wǎng)站的整體結(jié)構(gòu)處理過程中，將對扇文化塑造放置在了重要的位置上，將產(chǎn)品的銷售融合到網(wǎng)站的各個(gè)結(jié)構(gòu)之中，所有頁面的終極頁面將引導(dǎo)至產(chǎn)品的銷售環(huán)節(jié)，但這個(gè)過程是用戶自主的操作，減少觀眾的抵觸感。并且網(wǎng)站本身不提供任何購物的環(huán)節(jié)，通過引導(dǎo)進(jìn)入微店進(jìn)行售賣，將用戶引流至具有較高流量的平臺中，使企業(yè)可以在多平臺推廣信息。

但作為品牌或網(wǎng)站的資深用戶，網(wǎng)頁也提供更快捷的產(chǎn)品推薦環(huán)節(jié)，無論是在網(wǎng)站的導(dǎo)航、首頁展示等頁面，為直達(dá)產(chǎn)品展示頁面提供了通道。網(wǎng)站的這種布局形式使兩種消費(fèi)用戶均可以在自己感興趣的部分瀏覽與操作，滿足了用戶需求。以網(wǎng)站導(dǎo)航為例，網(wǎng)站導(dǎo)航整體分為兩個(gè)部分（圖6、7），左側(cè)的延伸導(dǎo)航與上部的快捷導(dǎo)航，兩種導(dǎo)航模塊互相補(bǔ)充，不相包圍。右側(cè)以快捷導(dǎo)航九宮格的形式，將扇子之美淋漓盡致地展示在觀眾面前。

四、視覺設(shè)計(jì)中的用戶體驗(yàn)

（一）色彩的應(yīng)用

色彩是帶給瀏覽者最初的視覺感受，是用戶體驗(yàn)重要的組成部分，也是品牌識別的重要符號。在色彩的體驗(yàn)中不僅包含網(wǎng)頁各模塊的色彩定義，還包括網(wǎng)站中圖片形成的色彩。在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)師一方面要尊重視覺導(dǎo)向，另—方面要符合大多數(shù)人的思維習(xí)慣，將網(wǎng)頁信息自然、合理、快速地傳達(dá)給用戶[5]。京扇子品牌以金色為主要視覺識別色，但輔助色又以灰白為主，較單調(diào)的品牌色彩體系需要輔以其他色彩，提振網(wǎng)站整體的視覺感受。由于金色與其他顏色搭配均較為適宜，所以在定位網(wǎng)站色彩時(shí)有較大的寬容度。網(wǎng)站中色彩是整個(gè)網(wǎng)站色彩應(yīng)用的一部分，而圖片也是重要的色彩來源，并且京扇子品牌宣傳圖（圖8）又以時(shí)尚、現(xiàn)代著稱，為了配合圖片色彩，網(wǎng)站色塊顏色使用提取宣傳國中的顏色，使圖、色配合更相宜，在網(wǎng)站后臺中也為網(wǎng)站提供了可以自定義相應(yīng)色彩的操作。

網(wǎng)站色彩的自定義性為網(wǎng)站圖文配合提供了很好的適應(yīng)性，以防止過于固化色彩帶來色彩的歧義。但在網(wǎng)站顏色選擇上除色彩的色相不做規(guī)范外，在色彩的純度、飽和度與亮度上均定義了相應(yīng)的要求。這樣使網(wǎng)站中所有運(yùn)用的色彩在相同的視覺感受上，防止色彩過于豐富導(dǎo)致的雜亂的情況，最大限度地為觀眾帶來和諧的色彩感受。

（二）文字的創(chuàng)新

網(wǎng)站中除了色彩與圖片外，最能打動人的就是文字的展示，有時(shí)僅僅是一個(gè)小小的詞匯就可以讓消費(fèi)者無限的延展，起到提振品牌與產(chǎn)品的作用。尤其是博大精深的中國文學(xué)中，借喻、同音字的替換使文學(xué)作品添色不少。尤其是在網(wǎng)絡(luò)海量信息的環(huán)境中，精簡、準(zhǔn)確的詞語表達(dá)使人們精確的定位產(chǎn)品屬性，記住產(chǎn)品。其中經(jīng)典的案例之一就是蘋果產(chǎn)品的官方宣傳圖（圖9），僅用精巧的詞匯把產(chǎn)品描述得淋漓盡致，也直達(dá)消費(fèi)者的內(nèi)心。在京扇子品牌網(wǎng)站中（圖10）對于扇藝、扇工、扇美的詞藻的選用，均與“善”字呼應(yīng)，將同音字應(yīng)用其中，與企業(yè)為消費(fèi)者提供“盡善盡美”的理念一致。同時(shí)也將人文屬性凸顯，使人們更加認(rèn)同扇子的人文價(jià)值。網(wǎng)站中減少商業(yè)詞藻的應(yīng)用，代而言之的是具有中國傳統(tǒng)人文氣質(zhì)的詞藻，在增加產(chǎn)品的文學(xué)氣質(zhì)之外，也使消費(fèi)者感受到文化之美。

如在扇美中，將扇子應(yīng)用的不同場合以“格調(diào)之行”、“睿智之思”、“摯愛之美”等詞藻代替?zhèn)鹘y(tǒng)的使用場景過于直白的表述，在“摯愛之美”中（圖11），又將“婚禮”、“生日”、“禮贊”等美貫徹之中，呼應(yīng)“扇美”主題，進(jìn)一步增強(qiáng)品牌格調(diào)。文化是支撐品牌的重要因素，而網(wǎng)站中所有的文字均是基于用戶體驗(yàn)而生，在中國傳統(tǒng)對美好事物追求的體驗(yàn)中，使內(nèi)容可以被多數(shù)用戶所認(rèn)可。

（三）扇元素的應(yīng)用

圖像直觀而形象地表達(dá)含義，能夠展現(xiàn)出無盡的想象空間;因?yàn)閳D像是全世界通用的“語言”，所以幾乎不需要任何文字的注釋[6]。獨(dú)特性是使自己區(qū)別于其他網(wǎng)站的重要特征，也成為吸引用戶，提升用戶體驗(yàn)的重要的法寶。無論是圖案的提取還是基礎(chǔ)形體再設(shè)計(jì)，都可增強(qiáng)品牌的識別力與吸引力。像京東商城的網(wǎng)站（圖12），許多與品牌相關(guān)的視覺元素運(yùn)用到設(shè)計(jì)中，通過詼諧幽默的形式使人們即使在網(wǎng)站加載過程中也不會感到無聊，這也使品牌潛移默化地被瀏覽者認(rèn)知。京扇子品牌以扇子作為企業(yè)核心的產(chǎn)品，要著重挖掘扇子的特點(diǎn)，提取并運(yùn)用到網(wǎng)站頁面的展示之中，不僅可以豐富展示效果，還可不浪費(fèi)任何展示產(chǎn)品的空間。

以本網(wǎng)站為例，扇元素應(yīng)用到了網(wǎng)站的方方面面。無論是網(wǎng)站的Loading符號，還是在“扇工”頁面中（圖13），將頁面中的扇骨、扇面、扇墜用傳統(tǒng)形態(tài)展現(xiàn)，都將扇元素完美的融入到網(wǎng)站各功能的設(shè)計(jì)中。扇元素的應(yīng)用不僅可以強(qiáng)化瀏覽者的主觀印象，相似的視覺元素也可以使網(wǎng)站整體更加統(tǒng)一。

（四）動態(tài)再塑

動態(tài)效果增強(qiáng)了用戶瀏覽的視覺感受，隨著網(wǎng)頁內(nèi)容不再受網(wǎng)速的限制，靜態(tài)化的頁面設(shè)計(jì)逐漸淡出人們的視野。動態(tài)效果力求能夠讓軟件使用者與軟件進(jìn)行情感溝通，通過營造不同的視覺氛圍激發(fā)共鳴，調(diào)動使用者的情緒，具有維系使用者群體的功能[7]。尤其是近1～2年的時(shí)間內(nèi)，運(yùn)用視頻影像作為背景的方式也越來越多。使產(chǎn)品在營銷的過程中加入更多的可能性，將用戶從枯燥的用戶體驗(yàn)中解脫出來，暢游在新奇的視覺奇觀中。京扇子品牌視頻資源較少，所以需要通過其他方式塑造網(wǎng)頁展示內(nèi)容的動態(tài)效果。

如在網(wǎng)頁的右上角有一處產(chǎn)品推薦的按鈕，按鈕點(diǎn)開后為用戶推薦9把扇子（圖14），用戶鼠標(biāo)滑過后，扇子有一個(gè)展開的效果，將扇子“活靈活現(xiàn)”地展示在用戶面前。再如首頁采用大圖展示的形式，圖片間的切屏形式借鑒了折扇開合的形式，形成網(wǎng)站重要的特征。頁面切割采用傳統(tǒng)的黃金分割的處理方式，形體看上去更符合大眾的審美。網(wǎng)頁的動態(tài)效果為網(wǎng)站信息的傳達(dá)提供了更多的可能，使原來靜態(tài)中無法展示的內(nèi)容更完整的展示給瀏覽者。

優(yōu)質(zhì)的用戶體驗(yàn)塑造了可以被廣泛推崇的內(nèi)容，優(yōu)質(zhì)的線上傳播是中國傳統(tǒng)文化推向市場，享譽(yù)全球的重要渠道，應(yīng)用好這個(gè)渠道可以使產(chǎn)品的推廣達(dá)到最優(yōu)化。隨著中國文化自信心越來越強(qiáng)，對傳統(tǒng)文化的關(guān)注度越來越高，人們也越來越愿意在日常生活中使用、展示中國傳統(tǒng)文化產(chǎn)品。我們要借助這場文化的潮流，將扇文化的內(nèi)涵完整的展示出來，推廣扇文化、提升扇子的價(jià)值，最終實(shí)現(xiàn)扇文化市場的輝煌。

參考文獻(xiàn)

[1]江靜.基于用戶體驗(yàn)的網(wǎng)頁交互性設(shè)計(jì)策略[J].黑河學(xué)院學(xué)報(bào)，2019，10 （12）：184-185

[2]《國務(wù)院關(guān)于積極推進(jìn)“互聯(lián)網(wǎng)+”行動的指導(dǎo)意見》[Z]. http： //www sohu com/a/114687054_100441 2016年9月20日

[3]辛向陽.交互設(shè)計(jì)：從物理邏輯到行為邏輯[J].裝飾，2015 （01）：58-62

[4]辛向陽.交互設(shè)計(jì)：從物理邏輯到行為邏輯[J].裝飾，2015 （01）：58-62

[5]朱婷婷，蔣飛燕.網(wǎng)頁設(shè)計(jì)的視覺信息傳達(dá)分析[J].美術(shù)教育研究，2019 （09）：103-104+107

[6]王萍淺談中國元素在當(dāng)代網(wǎng)頁設(shè)計(jì)中的應(yīng)用[J].中國美術(shù)，2014 （01）：126-128

[7]馬馳.圖形界面設(shè)計(jì)中的動態(tài)效果應(yīng)用及趨勢探析[J].設(shè)計(jì)，2019，32 （20）：113-115

[8]（美）JeffJohnson著.張一寧譯.認(rèn)知與設(shè)計(jì)：理解UI設(shè)計(jì)準(zhǔn)則：北京人民郵電出版社，2012： 52