隨著時光的流轉(zhuǎn)，每年新技術(shù)的涌現(xiàn)與用戶行為的變化都在推動著電商網(wǎng)站的發(fā)展及其設(shè)計的更新。特別是在2018年，電商自建站不僅采用了CSS網(wǎng)格布局，更注重對移動設(shè)備友好的全屏窗口模式，同時還加大了對視頻內(nèi)容的投入，引入了微交互和引導(dǎo)銷售等新策略。

一、掌握CSS網(wǎng)格布局的魅力

CSS網(wǎng)格布局，作為一種二維布局模式，已逐漸成為網(wǎng)站設(shè)計人員的得力助手。其部分標準來源于萬維網(wǎng)聯(lián)盟，使網(wǎng)站設(shè)計人員能夠更好地掌控網(wǎng)頁布局，充分利用不同設(shè)備、不同尺寸屏幕的空間。

萬維網(wǎng)聯(lián)盟對于CSS網(wǎng)格布局給出了建議：在網(wǎng)站從簡單的文檔進化為復(fù)雜的交互式應(yīng)用程序的過程中，舊的布局技術(shù)如浮動元素可能不再適合新的應(yīng)用程序布局。而CSS網(wǎng)格布局，結(jié)合了表格、JavaScript腳本以及對浮動元素的精細測量，為設(shè)計師提供了實現(xiàn)所需布局的強大工具。

值得注意的是，雖然舊版瀏覽器可能不支持CSS網(wǎng)格布局，但所有主流瀏覽器的最新版本均已支持，包括Chrome、Firefox、Safari、Opera以及Edge。2018年將有越來越多的電商網(wǎng)站設(shè)計人員和主題制作人員采用這一布局，特別是在品類頁面和搜索結(jié)果頁面上。

二、全屏搜索與表單的崛起

模態(tài)彈出框，作為網(wǎng)站設(shè)計的關(guān)鍵元素之一，通常由腳本控制并覆蓋在其他元素或內(nèi)容之上，為用戶提供交互式體驗。近年來，模態(tài)彈出框在電商網(wǎng)站中非常流行。而到了2018年，全屏模態(tài)彈出框在搜索和表單中的應(yīng)用將越來越普遍。

此趨勢與移動優(yōu)先的網(wǎng)頁設(shè)計理念相吻合。在移動設(shè)備上，全屏模態(tài)彈出框能夠占據(jù)大部分或全部屏幕空間，為用戶提供更加沉浸式的體驗。例如，Overstock平臺的登記表單采用了全屏模態(tài)顯示，當新用戶訪問網(wǎng)站時彈出。這種設(shè)計在移動設(shè)備上尤為突出，居中且全屏的顯示方式極大地提升了用戶體驗。

三、視頻內(nèi)容的崛起

在信息傳達、故事講述以及引起消費者共鳴方面，視頻內(nèi)容無疑是最佳選擇。隨著互聯(lián)網(wǎng)上分享的視頻數(shù)量日益增長，電商零售商也開始在網(wǎng)頁設(shè)計中加大視頻元素的投入。

Beardbrand等網(wǎng)站早已意識到視頻內(nèi)容的重要性，并在產(chǎn)品詳情頁面上添加了視頻內(nèi)容。而這種趨勢在2018年將更加明顯，我們甚至?xí)吹揭曨l被用作背景，用于現(xiàn)場推銷或創(chuàng)建企業(yè)形象等。

四、微交互的盛行

微交互自Facebook在帖子上添加“Like”按鈕以來就一直存在。而在2018年，它將成為網(wǎng)站和應(yīng)用程序中最受歡迎的趨勢之一。

對于電商賣家而言，巧用微交互可以幫助消費者建立習(xí)慣，或是獎勵完成特定任務(wù)的用戶。例如，當購物者為最近購買的產(chǎn)品撰寫評論并提交時，一個小動畫（微交互）可以作為一種獎勵，鼓勵他們繼續(xù)撰寫評論。這種設(shè)計不僅增加了用戶的互動性，還幫助消費者形成了消費習(xí)慣循環(huán)。

五、引導(dǎo)銷售的策略

引導(dǎo)銷售是電商行業(yè)中一種常見策略，旨在詢問消費者關(guān)于產(chǎn)品特征和用途的問題，以幫助他們更好地選擇特定產(chǎn)品。在2018年及以后的日子里，這種策略將變得更加普遍。

多家電商網(wǎng)站已經(jīng)采用了引導(dǎo)銷售策略來提升用戶購物體驗。例如維多利亞的秘密通過運動文胸選擇器幫助消費者挑選合適的文胸；North Face則通過智能搜索為消費者推薦合適的夾克；則通過簡單的步驟幫助消費者找到適合其健身目標的營養(yǎng)補充劑。這些策略都旨在為消費者提供更加便捷、人性化的購物體驗。

隨著新技術(shù)的不斷涌現(xiàn)和用戶行為的變化，電商網(wǎng)站的設(shè)計也在不斷更新與進步。從CSS網(wǎng)格布局到全屏搜索與表單、視頻內(nèi)容的崛起、微交互的盛行以及引導(dǎo)銷售的策略，這些趨勢都為電商行業(yè)帶來了新的機遇與挑戰(zhàn)。