扇文化推廣類網站設計研究

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

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

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

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

一、網頁設計中的用戶體驗

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

二、網絡化設計中的用戶體驗設計原則

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

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

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

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

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

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

參考文獻

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

[2]《國務院關于積極推進“互聯網+”行動的指導意見》[Z].

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

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

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

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

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

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

作者:王昭 單位:中央財經大學文化與傳媒學院