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

關(guān)鍵詞：電商網(wǎng)頁(yè)；視覺(jué)傳達(dá)；頁(yè)面布局優(yōu)化；視覺(jué)元素；特征提取

中圖分類(lèi)號(hào)：TP391.41" 文獻(xiàn)標(biāo)識(shí)碼：A" 文章編號(hào)：1673-260X（2025）02-0010-04

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

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

1 界面視覺(jué)傳達(dá)設(shè)計(jì)分析

1.1 電商網(wǎng)頁(yè)頁(yè)面視覺(jué)元素圖形多維特征描述子提取

由于電商網(wǎng)頁(yè)中包含了大量的視覺(jué)元素，如產(chǎn)品圖片、圖標(biāo)、文字等，為保證視覺(jué)元素能夠被用戶(hù)準(zhǔn)確識(shí)別，首先針對(duì)視覺(jué)元素圖形進(jìn)行多維特征描述子提取，為后續(xù)的視覺(jué)元素布局與排版提供支持。在電商網(wǎng)頁(yè)界面中，將商品圖片、背景圖片等視覺(jué)元素作為輸入圖像，對(duì)高斯金字塔進(jìn)行構(gòu)建。具體構(gòu)建表達(dá)式如式（1）所示。

1.2 電商網(wǎng)頁(yè)頁(yè)面視覺(jué)相似元素篩選

在電商網(wǎng)頁(yè)界面中，具有相似視覺(jué)特征的元素往往被視為相關(guān)或?qū)儆谕活?lèi)別。例如，具有相同顏色或形狀的圖標(biāo)可能被用戶(hù)視為具有相似功能的按鈕或鏈接。通過(guò)計(jì)算這些元素的相似度，可以篩選出具有視覺(jué)傳達(dá)共性的元素，從而進(jìn)行更合理的布局和優(yōu)化。將待辨識(shí)的電商網(wǎng)頁(yè)界面中的視覺(jué)組件與預(yù)存的視覺(jué)組件特征數(shù)據(jù)庫(kù)中的描述符進(jìn)行比對(duì)[11]。設(shè)待識(shí)別視覺(jué)元素的特征描述子為Dnew，視覺(jué)元素庫(kù)中的特征描述子集合為Dlib={d1，d2，…，dn}。則具體匹配過(guò)程表達(dá)式如式（6）所示。

1.3 視覺(jué)元素布局優(yōu)化與視覺(jué)傳達(dá)設(shè)計(jì)

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

2 實(shí)驗(yàn)論證

2.1 實(shí)驗(yàn)準(zhǔn)備

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

每個(gè)數(shù)據(jù)樣本分配唯一的標(biāo)識(shí)符，并建立相應(yīng)的索引和元數(shù)據(jù)描述，以便于后續(xù)的數(shù)據(jù)管理和分析。保持原始電商網(wǎng)頁(yè)界面不變，作為對(duì)比基準(zhǔn)。并應(yīng)用本文提出的頁(yè)面視覺(jué)傳達(dá)設(shè)計(jì)方法對(duì)原始電商網(wǎng)頁(yè)界面進(jìn)行優(yōu)化。對(duì)此，本文方法需要對(duì)相似的視覺(jué)元素進(jìn)行匹配，并通過(guò)對(duì)其進(jìn)行聚類(lèi)分析，結(jié)合布局原則對(duì)網(wǎng)頁(yè)界面的布局情況進(jìn)行優(yōu)化與調(diào)整。

通過(guò)對(duì)原始電商網(wǎng)頁(yè)中的視覺(jué)元素進(jìn)行重新布局與優(yōu)化，從而實(shí)現(xiàn)視覺(jué)傳達(dá)。對(duì)此，為保證實(shí)驗(yàn)效果，除了原始電商網(wǎng)頁(yè)作為對(duì)照基準(zhǔn)以外，實(shí)驗(yàn)還選取了兩種常規(guī)的網(wǎng)頁(yè)布局優(yōu)化設(shè)計(jì)方法作為實(shí)驗(yàn)對(duì)照組，分別為基于視覺(jué)注意力機(jī)制的優(yōu)化方法以及基于交互體驗(yàn)的優(yōu)化方法。通過(guò)將三種方法得到的網(wǎng)頁(yè)界面進(jìn)行對(duì)比分析，從而驗(yàn)證本文方法在視覺(jué)傳達(dá)效果方面的優(yōu)越性。

2.2 電商網(wǎng)頁(yè)界面視覺(jué)傳達(dá)優(yōu)化設(shè)計(jì)結(jié)果

利用視覺(jué)吸引力評(píng)分為評(píng)價(jià)指標(biāo)，對(duì)比本文方法應(yīng)用前后的網(wǎng)頁(yè)界面視覺(jué)傳達(dá)效果，得到的對(duì)比結(jié)果如圖1所示。

通過(guò)圖1實(shí)驗(yàn)結(jié)果可以看出，應(yīng)用本文方法前，網(wǎng)頁(yè)界面視覺(jué)傳達(dá)結(jié)果視覺(jué)吸引力評(píng)分較低，而應(yīng)用本文方法后，視覺(jué)吸引力評(píng)分較高，最大值為99分，對(duì)網(wǎng)頁(yè)界面進(jìn)行視覺(jué)傳達(dá)調(diào)整后，用戶(hù)能夠有效地將視覺(jué)重點(diǎn)放在商品上，同時(shí)提高用戶(hù)的購(gòu)物欲望。針對(duì)優(yōu)化前后的網(wǎng)頁(yè)界面，實(shí)驗(yàn)記錄了用戶(hù)在各頁(yè)面上的平均駐留時(shí)長(zhǎng)及訪(fǎng)問(wèn)的頁(yè)面數(shù)目，采用瀏覽層次作為評(píng)估基準(zhǔn)，對(duì)視覺(jué)呈現(xiàn)效果實(shí)施了量化評(píng)估。

表2數(shù)據(jù)顯示，用戶(hù)在優(yōu)化后的網(wǎng)頁(yè)界面上的平均停留時(shí)間和瀏覽頁(yè)面數(shù)量均顯著高于優(yōu)化前的界面。這表明本文提出的視覺(jué)傳達(dá)方法不僅吸引了用戶(hù)的注意力，還促使他們?yōu)g覽更多頁(yè)面，從而增加了與平臺(tái)的互動(dòng)和了解。

2.3 視覺(jué)顯著性對(duì)比分析

實(shí)驗(yàn)以不同視覺(jué)傳達(dá)算法下電商網(wǎng)頁(yè)界面顯著區(qū)域的對(duì)比度和平滑度作為對(duì)比指標(biāo)，對(duì)算法的視覺(jué)顯著性進(jìn)行衡量。高對(duì)比度有助于用戶(hù)更容易地識(shí)別出網(wǎng)頁(yè)中的關(guān)鍵信息，從而提高瀏覽效率和購(gòu)買(mǎi)轉(zhuǎn)化率。高平滑度可以避免顯著圖中出現(xiàn)過(guò)度的噪聲或細(xì)節(jié)丟失，從而提高視覺(jué)顯著性的準(zhǔn)確性和可讀性。

通過(guò)表3實(shí)驗(yàn)結(jié)果可以看出，相較于原始電商網(wǎng)頁(yè)以及兩種優(yōu)化方法，本文所提出的視覺(jué)傳達(dá)方法在對(duì)比度以及平滑度上均占據(jù)較大優(yōu)勢(shì)，以此可以證明本文提出的方法能夠更有效地突出網(wǎng)頁(yè)中的關(guān)鍵信息，提升用戶(hù)的視覺(jué)體驗(yàn)。

3 結(jié)束語(yǔ)

本文所提出的電商網(wǎng)頁(yè)界面視覺(jué)傳達(dá)設(shè)計(jì)方法不僅從理論層面豐富了新媒體時(shí)代下視覺(jué)傳達(dá)設(shè)計(jì)的研究框架，為相關(guān)領(lǐng)域的學(xué)術(shù)研究提供了有益的補(bǔ)充和深化，更從實(shí)踐層面為電商企業(yè)提供了切實(shí)可行的視覺(jué)設(shè)計(jì)策略。這些策略不僅有助于提升電商網(wǎng)頁(yè)的用戶(hù)體驗(yàn)，更能助力電商企業(yè)在激烈的市場(chǎng)角逐中占據(jù)獨(dú)特的競(jìng)爭(zhēng)先機(jī)。

參考文獻(xiàn)：

〔1〕王猛.基于視覺(jué)傳達(dá)的船舶智能導(dǎo)航人機(jī)交互界面設(shè)計(jì)[J].艦船科學(xué)技術(shù)，2024，46（14）：170-173.

〔2〕劉濤.基于視覺(jué)注意機(jī)制下農(nóng)機(jī)導(dǎo)航顯示界面的設(shè)計(jì)[J].農(nóng)機(jī)化研究，2024，46（11）：110-115+190.

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

〔4〕張紅華.基于交互體驗(yàn)下的食品包裝視覺(jué)傳達(dá)設(shè)計(jì)研究——評(píng)《食品包裝》[J].食品安全質(zhì)量檢測(cè)學(xué)報(bào)，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〕郭紅秀.基于視覺(jué)思維下用戶(hù)界面信息可視化設(shè)計(jì)——以聯(lián)合收割機(jī)遠(yuǎn)程故障監(jiān)測(cè)系統(tǒng)為例[J].農(nóng)機(jī)化研究，2024，46（09）：95-100.

〔7〕郭華，高博涵.紙品包裝設(shè)計(jì)的視覺(jué)傳達(dá)要素及作用分析[J].中國(guó)造紙，2024，43（01）：190-191.

〔8〕剛春明.基于視覺(jué)認(rèn)知特征的網(wǎng)課界面布局設(shè)計(jì)研究[J].包裝工程，2024，45（02）：209-215.

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

〔10〕徐萌.基于視覺(jué)傳達(dá)的船用智能導(dǎo)航系統(tǒng)界面設(shè)計(jì)研究[J].艦船科學(xué)技術(shù)，2023，45（13）：166-169.

〔11〕王惠英.基于視覺(jué)傳達(dá)探索影像視覺(jué)元素與紙質(zhì)包裝設(shè)計(jì)的融合[J].中國(guó)造紙，2024，43（04）：204.

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

〔13〕錢(qián)茵.基于視覺(jué)傳達(dá)設(shè)計(jì)理念的紙質(zhì)包裝廣告設(shè)計(jì)[J].中國(guó)造紙，2024，43（03）：165-166.

〔14〕李娜，韓海燕.基于A(yíng)RCS的蒙古族學(xué)齡前兒童教育APP界面視覺(jué)設(shè)計(jì)[J].包裝工程，2023， 44（10）：202-212.

〔15〕周紅，簡(jiǎn)能藝，張偉孝，等.塑料包裝設(shè)計(jì)中的視覺(jué)傳達(dá)策略及其應(yīng)用研究[J].塑料工業(yè)，2024，52（04）：196-197.