導語：扇文化推廣類網(wǎng)站設計研究一文來源于網(wǎng)友上傳，不代表本站觀點，若需要原創(chuàng)文章可咨詢客服老師，歡迎參考。

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

關鍵詞：網(wǎng)頁設計;元素再設計;用戶體驗;品牌;網(wǎng)絡化

中國扇文化源遠流長，早已成為文人雅士的必備配飾、也是詩歌、小說中重要描述的物品之一。但隨著人們生活方式的轉變，對扇子的認知愈發(fā)模糊，并逐漸淡出人們的視野，保護、傳承與發(fā)展扇文化勢在必行。指出要把中國傳統(tǒng)文化“講清楚”，讓它“活起來”，互聯(lián)網(wǎng)成為實踐、發(fā)展的重要方式之一。近年來中國傳統(tǒng)文化正運用數(shù)字化、新媒體的手段推廣與傳播，喚起越來越多的人重新關注傳統(tǒng)文化。扇文化完全可以借助這股風潮“活起來”，企業(yè)也可以借助這股東風壯大自己，提升產(chǎn)品的市場占有率與銷售額，繼續(xù)為扇文化產(chǎn)業(yè)的發(fā)展提供重要的支持。但新媒體的傳播不僅是將扇子相關的內容簡單羅列，而是通過分析用戶的心理與行為，設計出滿足用戶需求的網(wǎng)絡產(chǎn)品。本文以用戶體驗設計為核心，基于“京扇子”品牌的設計實踐，總結出符合用戶體驗的中國扇文化網(wǎng)絡化的相關設計方法，為其他傳統(tǒng)文化的網(wǎng)絡化設計提供有價值的參考。

一、網(wǎng)頁設計中的用戶體驗

網(wǎng)頁設計包含了版式、字體、色彩等設計，但隨著網(wǎng)頁與用戶的互動越來越頻繁，用戶體驗設計逐漸成為網(wǎng)頁能否成功的關鍵因素。優(yōu)秀的用戶體驗設計可充分調動人們的感官、情感、互動等體驗，使用戶體會到友好、舒適、便捷的網(wǎng)站使用環(huán)境[1]。優(yōu)質的用戶體驗設計不僅可以更好地展示產(chǎn)品，使用戶了解到產(chǎn)品的真諦，還可以與用戶建立情感關系，增強網(wǎng)站對用戶的黏度。用戶體驗設計不僅是在對用戶行為的研究上，還是對網(wǎng)頁設計中的字體、顏色、版式、圖像、動態(tài)效果等元素綜合的運用，通過合理的整合表達網(wǎng)站內容。網(wǎng)站設計是無法為用戶提供直接的用戶體驗的，而是運用上文提到的這些元素，達到與用戶的良好互動，最終滿足用戶的瀏覽需求。

二、網(wǎng)絡化設計中的用戶體驗設計原則

（一）構建“互聯(lián)網(wǎng)+實體”化的體驗性設計。國務院在《國務院關于積極推進“互聯(lián)網(wǎng)+”行動的指導意見》中提出，“互聯(lián)網(wǎng)+”是把互聯(lián)網(wǎng)的創(chuàng)新成果與經(jīng)濟社會各領域深度融合，推動技術進步、效率提升和組織變革，提升實體經(jīng)濟創(chuàng)新力和生產(chǎn)力，形成更廣泛的以互聯(lián)網(wǎng)為基礎設施和創(chuàng)新要素的經(jīng)濟社會發(fā)展新形態(tài)[2]。國務院的指導意見為京扇子品牌網(wǎng)絡化建設提供了重要的參考。在新時代的品牌發(fā)展中，不能將網(wǎng)絡化與線下實體店分開對待，而是在充分挖掘實體店的經(jīng)驗、教訓，為品牌的網(wǎng)絡化設計提供參考。首先，“互聯(lián)網(wǎng)+實體”的設計不是用網(wǎng)店取代實體店、也不是用網(wǎng)店補充實體店，應利用二者的優(yōu)勢相互促進，實體店應充分發(fā)揮用戶可接觸式的體驗作用，保持用戶對品牌的信任。而網(wǎng)店應利用傳播的優(yōu)勢拓展市場，為實體店帶來新的客源，促進品牌擴張與消費額的增長。其次，應深入挖掘網(wǎng)絡的潛力，作為當今社會中重要的媒介之一，擁有傳播力較強，傳播、運營成本低等特點。利用網(wǎng)絡資源傳播品牌，利用在線學堂、論壇、活動等多種手段與消費者互動，增強品牌認知度。通過引導用戶在線體驗，最終引入到線下實體店消費。（二）抓住用戶體驗要素。辛向陽提出，用戶的交互行為由人、動作、媒介、目的和場景構成，在用戶體驗設計的研究中，要抓住行為邏輯，進行行為的設計[3]。作為網(wǎng)絡產(chǎn)品的設計研究方法，用戶行為研究的相關數(shù)據(jù)影響著網(wǎng)站的建構，最終可能決定了網(wǎng)站的成敗。網(wǎng)絡化的品牌傳播形式不同于實體店，在實體店中可通過店面空間布局引導消費者的參觀路線。但網(wǎng)絡中這種情況是無法實現(xiàn)的，用戶進入網(wǎng)站后，第一眼就要抓住眼球，留下用戶。這也是為什么當今許多網(wǎng)站中運用開屏大圖或視頻的方式展示品牌或產(chǎn)品。如PlayersParis官方網(wǎng)站（圖1），作為專業(yè)提供商業(yè)和品牌內容的公司，開屏圖像中展示了多項成功案例，瀏覽者進入網(wǎng)站后立刻就被這些震撼的畫面所吸引。理查德•布坎南清晰的將用戶體驗歸納為：通過媒介的作用來創(chuàng)造和支持人的行為[4]。將用戶對扇的認知與感受虛擬化，使人們在思想上重新定義扇子，為未來的商業(yè)銷售提供支撐。就像蘋果官方網(wǎng)站（圖2）推廣iPhone11Pro產(chǎn)品一樣，里面所有的內容和視頻均用iPhone11拍攝，使用戶感覺只要擁有了這款手機，就可以拍攝出與官網(wǎng)宣傳片相同效果的視頻。我們在京扇子網(wǎng)站構建中，也應傳達相同的使用效果，使用戶感受到擁有這些產(chǎn)品，將使自己的生活品質得到提升。這與我們要表達的中心概念不謀而合：扇子可以提升生活品質，最終成為生活中不可或缺的組成部分。我們運用好網(wǎng)絡媒介，打造新的消費時尚，為推廣品牌、產(chǎn)品銷售服務。（三）構建一致的線上線下體驗。作為以實體店起家的京扇子品牌，店面的裝修風格與展品布置已經(jīng)在消費者心中烙下了很深的印象，那我們在網(wǎng)站構建時應考慮延續(xù)線下店的風格。因為人們對熟悉的事物會產(chǎn)生強烈的信任感，尤其是在虛擬的網(wǎng)絡世界。就像一個人外出旅行，尤其是去陌生的國度，當被吃飯問題困擾時，那么麥當勞可能就是旅行者的最終選擇。那么這樣的思路同樣適用于京扇子品牌的網(wǎng)絡化設計，品牌形象及品牌感受的延展使網(wǎng)絡推廣過程更加的便捷，即使沒有進入京扇子店鋪購物過的消費者，由于有實體店的支撐，也會給人以信任感。如果品牌本身已構建較強的時尚性與品質感，應將這種品質感延續(xù)，使線上線下保持一致性。京扇子品牌線下實體店以獨特的設計風格、輕松時尚的設計品味成為吸引消費者的重要原因。而在網(wǎng)絡傳播中應吸取線下店鋪的視覺信息并提取，應用到網(wǎng)站設計之中。使線下店鋪已形成的較好心理感受被移植到網(wǎng)站之中，為初次使用網(wǎng)站的用戶帶來熟悉感與安全感，從而留住了網(wǎng)絡用戶，如圖3。

三、結構設計中的用戶體驗設計

（一）布局創(chuàng)新。網(wǎng)站整體的布局設計中，應打破守舊、古板、無趣的固有印象，運用現(xiàn)代的設計方法，為品牌的推廣與產(chǎn)品的銷售服務。作為產(chǎn)品重要的消費人群——年輕人，要抓住他們崇尚自由、品味時尚的特征，在網(wǎng)站設計中要能吸引這部分用戶的關注。例如作為一個以戶外用品為核心產(chǎn)品的企業(yè)，OpenWear官方網(wǎng)站（圖4）在用戶初次訪問時，將戶外運動的激情與挑戰(zhàn)展示在消費者面前，非規(guī)整化的布局模式又將自由的感受賦予到設計之中，突破了網(wǎng)頁規(guī)矩的布局模式，給消費者帶來了突破現(xiàn)實社會中條條框框的感覺，又使消費者形成運動是釋放、無拘無束的感受。我們在思考京扇子品牌網(wǎng)站所能帶給觀眾的感受到底在什么地方?！皶r尚”、“生活”、“格調”是我們可以為消費者賦予的關鍵詞，這也正是品牌現(xiàn)有重要的發(fā)展方向。非對稱的布局形式是在頁面設計中可以考慮的重要方式之一，大圖與內容圖交錯出現(xiàn)充分體現(xiàn)了網(wǎng)站開放與無束縛的性格。非對稱的頁面結構也與扇子的對稱結構形成強烈的對比，使人們感受到傳統(tǒng)與現(xiàn)代的碰撞。但在非對稱的布局中應把握住網(wǎng)頁的重心點位置，使頁面在瀏覽過程中不至于失去平衡，如圖5。（二）結構創(chuàng)新。網(wǎng)站在創(chuàng)作過程中牢牢把握住建站初心，把對品牌的推廣、重塑人們生活作為重要的展示信息之一，所以在網(wǎng)站的整體結構處理過程中，將對扇文化塑造放置在了重要的位置上，將產(chǎn)品的銷售融合到網(wǎng)站的各個結構之中，所有頁面的終極頁面將引導至產(chǎn)品的銷售環(huán)節(jié)，但這個過程是用戶自主的操作，減少觀眾的抵觸感。并且網(wǎng)站本身不提供任何購物的環(huán)節(jié)，通過引導進入微店進行售賣，將用戶引流至具有較高流量的平臺中，使企業(yè)可以在多平臺推廣信息。但作為品牌或網(wǎng)站的資深用戶，網(wǎng)頁也提供更快捷的產(chǎn)品推薦環(huán)節(jié)，無論是在網(wǎng)站的導航、首頁展示等頁面，為直達產(chǎn)品展示頁面提供了通道。網(wǎng)站的這種布局形式使兩種消費用戶均可以在自己感興趣的部分瀏覽與操作，滿足了用戶需求。以網(wǎng)站導航為例，網(wǎng)站導航整體分為兩個部分（圖6、7），左側的延伸導航與上部的快捷導航，兩種導航模塊互相補充，不相包圍。右側以快捷導航九宮格的形式，將扇子之美淋漓盡致地展示在觀眾面前。

四、視覺設計中的用戶體驗

（一）色彩的應用。色彩是帶給瀏覽者最初的視覺感受，是用戶體驗重要的組成部分，也是品牌識別的重要符號。在色彩的體驗中不僅包含網(wǎng)頁各模塊的色彩定義，還包括網(wǎng)站中圖片形成的色彩。在網(wǎng)頁設計中，設計師一方面要尊重視覺導向，另一方面要符合大多數(shù)人的思維習慣，將網(wǎng)頁信息自然、合理、快速地傳達給用戶[5]。京扇子品牌以金色為主要視覺識別色，但輔助色又以灰白為主，較單調的品牌色彩體系需要輔以其他色彩，提振網(wǎng)站整體的視覺感受。由于金色與其他顏色搭配均較為適宜，所以在定位網(wǎng)站色彩時有較大的寬容度。網(wǎng)站中色彩是整個網(wǎng)站色彩應用的一部分，而圖片也是重要的色彩來源，并且京扇子品牌宣傳圖（圖8）又以時尚、現(xiàn)代著稱，為了配合圖片色彩，網(wǎng)站色塊顏色使用提取宣傳圖中的顏色，使圖、色配合更相宜，在網(wǎng)站后臺中也為網(wǎng)站提供了可以自定義相應色彩的操作。網(wǎng)站色彩的自定義性為網(wǎng)站圖文配合提供了很好的適應性，以防止過于固化色彩帶來色彩的歧義。但在網(wǎng)站顏色選擇上除色彩的色相不做規(guī)范外，在色彩的純度、飽和度與亮度上均定義了相應的要求。這樣使網(wǎng)站中所有運用的色彩在相同的視覺感受上，防止色彩過于豐富導致的雜亂的情況，最大限度地為觀眾帶來和諧的色彩感受。（二）文字的創(chuàng)新。網(wǎng)站中除了色彩與圖片外，最能打動人的就是文字的展示，有時僅僅是一個小小的詞匯就可以讓消費者無限的延展，起到提振品牌與產(chǎn)品的作用。尤其是博大精深的中國文學中，借喻、同音字的替換使文學作品添色不少。尤其是在網(wǎng)絡海量信息的環(huán)境中，精簡、準確的詞語表達使人們精確的定位產(chǎn)品屬性，記住產(chǎn)品。其中經(jīng)典的案例之一就是蘋果產(chǎn)品的官方宣傳圖（圖9），僅用精巧的詞匯把產(chǎn)品描述得淋漓盡致，也直達消費者的內心。在京扇子品牌網(wǎng)站中（圖10）對于扇藝、扇工、扇美的詞藻的選用，均與“善”字呼應，將同音字應用其中，與企業(yè)為消費者提供“盡善盡美”的理念一致。同時也將人文屬性凸顯，使人們更加認同扇子的人文價值。網(wǎng)站中減少商業(yè)詞藻的應用，代而言之的是具有中國傳統(tǒng)人文氣質的詞藻，在增加產(chǎn)品的文學氣質之外，也使消費者感受到文化之美。如在扇美中，將扇子應用的不同場合以“格調之行”、“睿智之思”、“摯愛之美”等詞藻代替?zhèn)鹘y(tǒng)的使用場景過于直白的表述，在“摯愛之美”中（圖11），又將“婚禮”、“生日”、“禮贊”等美貫徹之中，呼應“扇美”主題，進一步增強品牌格調。文化是支撐品牌的重要因素，而網(wǎng)站中所有的文字均是基于用戶體驗而生，在中國傳統(tǒng)對美好事物追求的體驗中，使內容可以被多數(shù)用戶所認可。（三）扇元素的應用。圖像直觀而形象地表達含義，能夠展現(xiàn)出無盡的想象空間;因為圖像是全世界通用的“語言”，所以幾乎不需要任何文字的注釋[6]。獨特性是使自己區(qū)別于其他網(wǎng)站的重要特征，也成為吸引用戶，提升用戶體驗的重要的法寶。無論是圖案的提取還是基礎形體再設計，都可增強品牌的識別力與吸引力。像京東商城的網(wǎng)站（圖12），許多與品牌相關的視覺元素運用到設計中，通過詼諧幽默的形式使人們即使在網(wǎng)站加載過程中也不會感到無聊，這也使品牌潛移默化地被瀏覽者認知。京扇子品牌以扇子作為企業(yè)核心的產(chǎn)品，要著重挖掘扇子的特點，提取并運用到網(wǎng)站頁面的展示之中，不僅可以豐富展示效果，還可不浪費任何展示產(chǎn)品的空間。以本網(wǎng)站為例，扇元素應用到了網(wǎng)站的方方面面。無論是網(wǎng)站的Loading符號，還是在“扇工”頁面中（圖13），將頁面中的扇骨、扇面、扇墜用傳統(tǒng)形態(tài)展現(xiàn)，都將扇元素完美的融入到網(wǎng)站各功能的設計中。扇元素的應用不僅可以強化瀏覽者的主觀印象，相似的視覺元素也可以使網(wǎng)站整體更加統(tǒng)一。（四）動態(tài)再塑。動態(tài)效果增強了用戶瀏覽的視覺感受，隨著網(wǎng)頁內容不再受網(wǎng)速的限制，靜態(tài)化的頁面設計逐漸淡出人們的視野。動態(tài)效果力求能夠讓軟件使用者與軟件進行情感溝通，通過營造不同的視覺氛圍激發(fā)共鳴，調動使用者的情緒，具有維系使用者群體的功能[7]。尤其是近1～2年的時間內，運用視頻影像作為背景的方式也越來越多。使產(chǎn)品在營銷的過程中加入更多的可能性，將用戶從枯燥的用戶體驗中解脫出來，暢游在新奇的視覺奇觀中。京扇子品牌視頻資源較少，所以需要通過其他方式塑造網(wǎng)頁展示內容的動態(tài)效果。如在網(wǎng)頁的右上角有一處產(chǎn)品推薦的按鈕，按鈕點開后為用戶推薦9把扇子（圖14），用戶鼠標滑過后，扇子有一個展開的效果，將扇子“活靈活現(xiàn)”地展示在用戶面前。再如首頁采用大圖展示的形式，圖片間的切屏形式借鑒了折扇開合的形式，形成網(wǎng)站重要的特征。頁面切割采用傳統(tǒng)的黃金分割的處理方式，形體看上去更符合大眾的審美。網(wǎng)頁的動態(tài)效果為網(wǎng)站信息的傳達提供了更多的可能，使原來靜態(tài)中無法展示的內容更完整的展示給瀏覽者。

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

參考文獻

[1]江靜.基于用戶體驗的網(wǎng)頁交互性設計策略[J].黑河學院學報，2019，10（12）：184-185.

[2]《國務院關于積極推進“互聯(lián)網(wǎng)+”行動的指導意見》[Z].

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

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

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

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

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

[8]（美）JeffJohnson著.張一寧譯.認知與設計：理解UI設計準則：北京人民郵電出版社，2012：52.

作者:王昭 單位:中央財經(jīng)大學文化與傳媒學院