每一年，新技術(shù)和用戶行為都會(huì)推動(dòng)電商網(wǎng)站的發(fā)展以及網(wǎng)站設(shè)計(jì)的更新。2018年，自建站除了使用CSS網(wǎng)格布局外，還會(huì)使用對(duì)移動(dòng)設(shè)備友好的全屏窗口模式，提供更多的視頻，加入微交互和引導(dǎo)銷售等。

1、使用CSS網(wǎng)格布局

CSS網(wǎng)格布局是二維布局模式，CSS部分標(biāo)準(zhǔn)來(lái)自萬(wàn)維網(wǎng)聯(lián)盟。

它讓網(wǎng)站設(shè)計(jì)人員能夠更好地控制網(wǎng)頁(yè)布局，利用跨設(shè)備、不同尺寸屏幕的空間。換句話說(shuō)，與其他布局相比，CSS網(wǎng)格布局讓優(yōu)化用戶界面相對(duì)簡(jiǎn)單得多。

萬(wàn)維網(wǎng)聯(lián)盟給出關(guān)于CSS網(wǎng)格布局的建議：隨著網(wǎng)站從簡(jiǎn)單的文檔演變成復(fù)雜的交互式應(yīng)用程序，文檔布局技術(shù)中的一些元素，如浮動(dòng)元素（floats），不一定適合應(yīng)用程序布局。

萬(wàn)維網(wǎng)聯(lián)盟寫(xiě)道：“通過(guò)結(jié)合表格、JavaScript腳本，或?qū)Ω?dòng)元素進(jìn)行仔細(xì)測(cè)量，程序員發(fā)現(xiàn)了解決方案來(lái)實(shí)現(xiàn)所需布局。適應(yīng)可用空間的布局通常比較脆弱，并且由于空間受限會(huì)導(dǎo)致反直觀行為。另外，許多編寫(xiě)Web應(yīng)用程序的程序員會(huì)選擇固定的布局，無(wú)法利用屏幕上可用渲染空間的變化。”

CSS網(wǎng)格布局可以解決這些問(wèn)題，讓網(wǎng)站設(shè)計(jì)好很多。

2018年將有越來(lái)越多的電商網(wǎng)站設(shè)計(jì)人和主題制作人使用CSS網(wǎng)格布局，特別是在品類頁(yè)面或搜索結(jié)果頁(yè)上。

唯一可能存在的問(wèn)題在于，舊版的瀏覽器可能不支持CSS網(wǎng)格布局。但所有領(lǐng)先瀏覽器的最新版本都支持這一布局，包括Chrome、Firefox、Safari、Opera和Edge。

2、全屏搜索和表單

模態(tài)彈出框（modal）、模態(tài)框（modal box）或modal window（模態(tài)窗體）是網(wǎng)站設(shè)計(jì)要素之一，通常由腳本控制，并覆蓋在其他要素或內(nèi)容之上，讓用戶交互。

幾年來(lái)，模態(tài)彈出框一直是一個(gè)有效的用戶界面，在許多電商網(wǎng)站都很常見(jiàn)。2018年可能會(huì)改變的是全屏模態(tài)彈出框在搜索和表單中的應(yīng)用。

這一趨勢(shì)來(lái)自移動(dòng)端先行的網(wǎng)頁(yè)設(shè)計(jì)。在移動(dòng)設(shè)備上，許多模態(tài)彈出框占用了屏幕大部分或全部空間。

以O(shè)verstock為例子，該平臺(tái)推送的登記表單使用全屏模態(tài)顯示，在新用戶訪問(wèn)網(wǎng)站時(shí)彈出。在移動(dòng)設(shè)備上，該表單居中且全屏。

Ralph Lauren網(wǎng)站也包含了這種搜索模態(tài)彈出框，在臺(tái)式電腦或筆記本電腦上顯示時(shí)，幾乎覆蓋了網(wǎng)頁(yè)上的所有內(nèi)容，而且實(shí)際上，在移動(dòng)設(shè)備上是全屏顯示的。

企業(yè)可以尋找移動(dòng)設(shè)備網(wǎng)頁(yè)設(shè)計(jì)人，并率先對(duì)搜索和其他表單形式使用全屏模態(tài)，并將這些全屏模態(tài)在更大的布局中實(shí)現(xiàn)。

3、更多視頻

視頻是傳達(dá)復(fù)雜信息、講故事、引起消費(fèi)者共鳴的絕佳內(nèi)容。互聯(lián)網(wǎng)上分享的視頻數(shù)量每天都在上升。因此，電商零售商2018年將在網(wǎng)頁(yè)設(shè)計(jì)中使用更多視頻元素，一點(diǎn)也不令人意外。

Beardbrand等網(wǎng)站已經(jīng)使用了多年的視頻和內(nèi)容營(yíng)銷，并通過(guò)在產(chǎn)品詳情頁(yè)面上添加視頻內(nèi)容，引領(lǐng)這一網(wǎng)站設(shè)計(jì)趨勢(shì)。

2018年也將看到視頻用作背景，用于現(xiàn)場(chǎng)推銷或創(chuàng)建企業(yè)形象等。

4、更多微交互

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

對(duì)電商賣家來(lái)說(shuō)，微交互的絕招在于可能會(huì)幫助消費(fèi)者建立習(xí)慣，或是獎(jiǎng)勵(lì)完成特定任務(wù)的用戶，比如向購(gòu)物車添加產(chǎn)品、查看產(chǎn)品或訂閱實(shí)時(shí)通訊。

用戶體驗(yàn)博客Planet UX主編Nick Babich指出：“微交互能鼓勵(lì)用戶真正的互動(dòng)，該強(qiáng)有力的工具有助于讓消費(fèi)者形成消費(fèi)習(xí)慣循環(huán)。”

例如，電商網(wǎng)站購(gòu)物者可能會(huì)為最近購(gòu)買的產(chǎn)品撰寫(xiě)評(píng)論。當(dāng)他們提交評(píng)論時(shí)，如果有一個(gè)小動(dòng)畫(huà)（微交互）獎(jiǎng)勵(lì)他們提交評(píng)論的話，會(huì)鼓勵(lì)他們繼續(xù)撰寫(xiě)評(píng)論。

書(shū)籍《Microinteractions》一書(shū)作者Dan Saffer指出微交互主要分為4個(gè)部分：

?觸發(fā)：觸發(fā)啟動(dòng)微交互；

?規(guī)則：交互的行為規(guī)則；

?反饋：為用戶設(shè)計(jì)的微交互發(fā)生時(shí)返回信息的溝通機(jī)制；

?循環(huán)與模式：設(shè)定微交互的時(shí)長(zhǎng)以及周期，并設(shè)計(jì)它是否重復(fù)、隨著時(shí)間演變的過(guò)程。

2018年，預(yù)計(jì)電商網(wǎng)站和應(yīng)用程序設(shè)計(jì)人將在設(shè)計(jì)中融入微交互。

5、引導(dǎo)銷售

引導(dǎo)銷售是指詢問(wèn)消費(fèi)者關(guān)于產(chǎn)品特征和用途，以幫助他們挖掘特定產(chǎn)品的行為。

在電商行業(yè)中，引導(dǎo)銷售已經(jīng)存在好幾年了。例如維多利亞的秘密有一個(gè)運(yùn)動(dòng)文胸選擇器；North Face會(huì)幫消費(fèi)者找?jiàn)A克，而B(niǎo)odybuilding.com用三個(gè)步驟幫助消費(fèi)者找到適合健身目標(biāo)的營(yíng)養(yǎng)補(bǔ)充劑。

就像上述其他網(wǎng)站設(shè)計(jì)趨勢(shì)一樣，2018年，引導(dǎo)銷售將變得更加普遍。（編譯/雨果網(wǎng) 方小玲）