新媒體時代下電商網頁界面視覺傳達設計分析

摘 要：電商網頁界面呈現出視覺元素繁多、信息層次復雜的特點，這種特性導致網頁界面的視覺顯著性不明顯，用戶的關注度不高。為提高用戶轉化率，對新媒體時代下電商網頁界面視覺傳達設計進行分析。將商品圖片、背景圖片等視覺元素作為輸入圖像，對高斯金字塔進行構建。并通過對比鄰域極值分布情況，篩選出潛在特征點，并利用Hessian矩陣排除邊緣敏感點。通過直方圖組合的方式生成關于視覺元素的特征描述子。待識別的電商網頁界面中的視覺元素與已知的視覺元素庫中的特征描述子進行匹配，識別出相似的視覺元素。結合視覺元素布局原則，構建出網頁界面布局優化模型。通過對其進行迭代尋優，得到最優布局方案，并對視覺元素進行調整，從而實現視覺傳達。在實驗中，對提出的方法進行了視覺傳達效果的檢驗。測試結果表明，采用提出的方法對電商網頁界面進行處理后，界面顯著區域的對比度以及平滑度更高，具備較為理想的視覺顯著性。

關鍵詞：電商網頁；視覺傳達；頁面布局優化；視覺元素；特征提取

中圖分類號：TP391.41" 文獻標識碼：A" 文章編號：1673-260X（2025）02-0010-04

電商網頁界面設計作為電商平臺的重要組成部分，其視覺傳達效果不僅影響著用戶的第一印象，更直接決定了用戶的購買決策和平臺的競爭力。視覺元素的排列方式直接影響用戶的信息處理效率，有序的排列能減少用戶的認知負擔，提高信息獲取的準確性[1]。例如，通過網格布局將產品圖片、價格、描述等信息整齊排列，便于用戶比較和選擇。良好的視覺設計可以吸引用戶的注意力，提升用戶的滿意度和忠誠度，從而有效增加電商平臺的流量和銷售額。此外，通過視覺設計的創新，電商平臺能夠更好地傳達品牌理念和產品特點，達成精確的市場定位與定制化服務，以增強用戶滿意度及成交率。因此，對新媒體時代下電商網頁界面視覺傳達設計方法的研究，具有重要的理論意義和實際價值。

目前，針對網頁界面與視覺傳達設計，國內外學者已經從不同角度開展了深入研究。例如，劉濤通過分析用戶的視覺注意特性，包括注視點分布、眼動軌跡等，隨后將這些數據應用于界面布局的優化[2]。通過提升核心導航元素的視覺突出性，例如運用鮮明的色彩和高對比度來高亮關鍵按鈕及路徑，有效地捕獲了用戶的關注。但個體差異可能導致不同用戶的視覺注意特性有所不同，從而影響界面的通用性。路鵬等結合視覺符號理論，提出減少簡化界面元素，減少不必要的視覺干擾，確保老年人能輕松識別和操作[3]。同時引入易于理解的視覺符號，如大字體、高對比度的圖標和明確的顏色編碼，幫助用戶快速獲取所需信息。但由于視覺和認知能力存在差異，單一的設計原則可能無法滿足所有用戶的需求。張紅華強調了包裝與消費者之間的互動關系，提出了通過觸覺、視覺和嗅覺等多種感官體驗來提升包裝吸引力的方法[4]。在視覺上，通過對色彩搭配方案進行自適應優化，并引入高注意力圖形元素，從而提高用戶的注意力以及視覺體驗。但由于產品特性以及目標消費群體不同，導致視覺傳達效果在信息表征方面存在一定的差異。Li G探索了傳統手工藝中的設計元素，包括紋樣、色彩搭配及材料運用等，提煉出具有獨特韻味的圖形元素[5]。并結合人工智能算法，將圖形元素與頁面視覺元素進行融合，從而在保證頁面美觀簡潔的同時傳達出關鍵信息。但由于算法缺乏有效的訓練樣本，同時忽略了對不同視覺元素特征的融合處理，從而導致優化后的頁面布局在視覺顯著性上表現較差。本文通過對電商網頁界面視覺元素進行多維度特征提取，并優化元素布局情況，從而提高頁面的視覺傳達效果，以此優化用戶的瀏覽體驗。

1 界面視覺傳達設計分析

1.1 電商網頁頁面視覺元素圖形多維特征描述子提取

由于電商網頁中包含了大量的視覺元素，如產品圖片、圖標、文字等，為保證視覺元素能夠被用戶準確識別，首先針對視覺元素圖形進行多維特征描述子提取，為后續的視覺元素布局與排版提供支持。在電商網頁界面中，將商品圖片、背景圖片等視覺元素作為輸入圖像，對高斯金字塔進行構建。具體構建表達式如式（1）所示。

1.2 電商網頁頁面視覺相似元素篩選

在電商網頁界面中，具有相似視覺特征的元素往往被視為相關或屬于同一類別。例如，具有相同顏色或形狀的圖標可能被用戶視為具有相似功能的按鈕或鏈接。通過計算這些元素的相似度，可以篩選出具有視覺傳達共性的元素，從而進行更合理的布局和優化。將待辨識的電商網頁界面中的視覺組件與預存的視覺組件特征數據庫中的描述符進行比對[11]。設待識別視覺元素的特征描述子為Dnew，視覺元素庫中的特征描述子集合為Dlib={d1，d2，…，dn}。則具體匹配過程表達式如式（6）所示。

1.3 視覺元素布局優化與視覺傳達設計

通過對識別出的網頁界面相似視覺元素進行聚類分析，設計出視覺元素布局原則，并構建出網頁界面布局優化模型。通過對其進行迭代尋優，得到最優布局方案，并對視覺元素進行調整，從而實現視覺傳達。假設電商網頁界面的視覺元素集合為V={v1，v2，…，vn}，其中，每個視覺元素都有其獨特的特征向量，該特征向量來自上文求解得到的特征描述子。通過對Si設定閾值，可以得到相似度較高的不同視覺元素簇類。通過對每個簇類下的特征描述子進行分析，可以發現它們之間的內在關聯和分布規律。對此，本文所設計的視覺元素布局原則有三點，分別為同類元素聚集、異類元素分離以及視覺層次構建。其中，同類元素聚集是指將同一聚類中的視覺元素盡量聚集在一起，形成視覺上的統一和連貫[14]。異類元素分離是指不同聚類中的視覺元素應盡量分離，以減少視覺上的干擾和混亂。視覺層次構建指根據視覺元素的重要性和優先級，構建出清晰的視覺層次結構，引導用戶的注意力。

2 實驗論證

2.1 實驗準備

實驗以某大型電商網絡購物平臺作為基礎數據來源，通過采用爬蟲的方式對該購物網絡平臺上的頁面內容進行爬取，從而獲得關于電商網頁界面視覺元素的數據。該平臺擁有超過5 000萬注冊用戶，提供超過100萬種商品種類，確保了數據的廣泛性和多樣性。開發并部署定制化的網絡爬蟲程序，對網頁界面內容進行爬取。采集的數據涵蓋了電商網頁界面的各種視覺元素，包括顏色搭配（RGB值）、布局結構（HTML/CSS代碼）、圖片（JPEG/PNG格式）和文字內容（純文本/HTML格式）等。由此得到的基礎數據集總數據量超過1 000萬條數據記錄，涵蓋了電商平臺上多個商品類別的網頁界面視覺元素。實驗中所選取的部分視覺元素共分為三類，分別為：產品類視覺元素、文字類視覺元素以及圖形類視覺元素。數據集結構如表1所示。

每個數據樣本分配唯一的標識符，并建立相應的索引和元數據描述，以便于后續的數據管理和分析。保持原始電商網頁界面不變，作為對比基準。并應用本文提出的頁面視覺傳達設計方法對原始電商網頁界面進行優化。對此，本文方法需要對相似的視覺元素進行匹配，并通過對其進行聚類分析，結合布局原則對網頁界面的布局情況進行優化與調整。

通過對原始電商網頁中的視覺元素進行重新布局與優化，從而實現視覺傳達。對此，為保證實驗效果，除了原始電商網頁作為對照基準以外，實驗還選取了兩種常規的網頁布局優化設計方法作為實驗對照組，分別為基于視覺注意力機制的優化方法以及基于交互體驗的優化方法。通過將三種方法得到的網頁界面進行對比分析，從而驗證本文方法在視覺傳達效果方面的優越性。

2.2 電商網頁界面視覺傳達優化設計結果

利用視覺吸引力評分為評價指標，對比本文方法應用前后的網頁界面視覺傳達效果，得到的對比結果如圖1所示。

通過圖1實驗結果可以看出，應用本文方法前，網頁界面視覺傳達結果視覺吸引力評分較低，而應用本文方法后，視覺吸引力評分較高，最大值為99分，對網頁界面進行視覺傳達調整后，用戶能夠有效地將視覺重點放在商品上，同時提高用戶的購物欲望。針對優化前后的網頁界面，實驗記錄了用戶在各頁面上的平均駐留時長及訪問的頁面數目，采用瀏覽層次作為評估基準，對視覺呈現效果實施了量化評估。

表2數據顯示，用戶在優化后的網頁界面上的平均停留時間和瀏覽頁面數量均顯著高于優化前的界面。這表明本文提出的視覺傳達方法不僅吸引了用戶的注意力，還促使他們瀏覽更多頁面，從而增加了與平臺的互動和了解。

2.3 視覺顯著性對比分析

實驗以不同視覺傳達算法下電商網頁界面顯著區域的對比度和平滑度作為對比指標，對算法的視覺顯著性進行衡量。高對比度有助于用戶更容易地識別出網頁中的關鍵信息，從而提高瀏覽效率和購買轉化率。高平滑度可以避免顯著圖中出現過度的噪聲或細節丟失，從而提高視覺顯著性的準確性和可讀性。

通過表3實驗結果可以看出，相較于原始電商網頁以及兩種優化方法，本文所提出的視覺傳達方法在對比度以及平滑度上均占據較大優勢，以此可以證明本文提出的方法能夠更有效地突出網頁中的關鍵信息，提升用戶的視覺體驗。

3 結束語

本文所提出的電商網頁界面視覺傳達設計方法不僅從理論層面豐富了新媒體時代下視覺傳達設計的研究框架，為相關領域的學術研究提供了有益的補充和深化，更從實踐層面為電商企業提供了切實可行的視覺設計策略。這些策略不僅有助于提升電商網頁的用戶體驗，更能助力電商企業在激烈的市場角逐中占據獨特的競爭先機。

參考文獻：

〔1〕王猛.基于視覺傳達的船舶智能導航人機交互界面設計[J].艦船科學技術，2024，46（14）：170-173.

〔2〕劉濤.基于視覺注意機制下農機導航顯示界面的設計[J].農機化研究，2024，46（11）：110-115+190.

〔3〕路鵬，姜怡楠.基于視覺符號理論的APP交互界面適老化設計研究[J].包裝工程，2023，44（12）：189-197+212.

〔4〕張紅華.基于交互體驗下的食品包裝視覺傳達設計研究——評《食品包裝》[J].食品安全質量檢測學報，2022，13（12）：4075-4076.

〔5〕Li G. A Visual Communication Design Study： Graphic Element Design Under Traditional Handwork[J]. Journal of Information Processing Systems， 2023， 19（02）： 203-210.

〔6〕郭紅秀.基于視覺思維下用戶界面信息可視化設計——以聯合收割機遠程故障監測系統為例[J].農機化研究，2024，46（09）：95-100.

〔7〕郭華，高博涵.紙品包裝設計的視覺傳達要素及作用分析[J].中國造紙，2024，43（01）：190-191.

〔8〕剛春明.基于視覺認知特征的網課界面布局設計研究[J].包裝工程，2024，45（02）：209-215.

〔9〕袁麗敏.基于激光視覺融合的多幀影視圖像視覺傳達設計研究[J].激光雜志，2023，44（12）：81-85.

〔10〕徐萌.基于視覺傳達的船用智能導航系統界面設計研究[J].艦船科學技術，2023，45（13）：166-169.

〔11〕王惠英.基于視覺傳達探索影像視覺元素與紙質包裝設計的融合[J].中國造紙，2024，43（04）：204.

〔12〕梁黎，王勇.大型船舶電子海圖顯示界面視覺交互設計[J].艦船科學技術，2023，45（10）：143-146.

〔13〕錢茵.基于視覺傳達設計理念的紙質包裝廣告設計[J].中國造紙，2024，43（03）：165-166.

〔14〕李娜，韓海燕.基于ARCS的蒙古族學齡前兒童教育APP界面視覺設計[J].包裝工程，2023， 44（10）：202-212.

〔15〕周紅，簡能藝，張偉孝，等.塑料包裝設計中的視覺傳達策略及其應用研究[J].塑料工業，2024，52（04）：196-197.