盤點：2018年5大自建站設計趨勢，這些元素你都有了嗎？

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

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

CSS網(wǎng)格布局是二維布局模式，CSS部分標準來自萬維網(wǎng)聯(lián)盟。

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

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

萬維網(wǎng)聯(lián)盟寫道：“通過結(jié)合表格、JavaScript腳本，或?qū)Ω釉剡M行仔細測量，程序員發(fā)現(xiàn)了解決方案來實現(xiàn)所需布局。適應可用空間的布局通常比較脆弱，并且由于空間受限會導致反直觀行為。另外，許多編寫Web應用程序的程序員會選擇固定的布局，無法利用屏幕上可用渲染空間的變化?！?

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

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

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

2、全屏搜索和表單

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

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

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

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

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

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

3、更多視頻

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

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

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

4、更多微交互

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

對電商賣家來說，微交互的絕招在于可能會幫助消費者建立習慣，或是獎勵完成特定任務的用戶，比如向購物車添加產(chǎn)品、查看產(chǎn)品或訂閱實時通訊。

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

例如，電商網(wǎng)站購物者可能會為最近購買的產(chǎn)品撰寫評論。當他們提交評論時，如果有一個小動畫（微交互）獎勵他們提交評論的話，會鼓勵他們繼續(xù)撰寫評論。

書籍《Microinteractions》一書作者Dan Saffer指出微交互主要分為4個部分：

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

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

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

?循環(huán)與模式：設定微交互的時長以及周期，并設計它是否重復、隨著時間演變的過程。

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

5、引導銷售

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

在電商行業(yè)中，引導銷售已經(jīng)存在好幾年了。例如維多利亞的秘密有一個運動文胸選擇器；North Face會幫消費者找夾克，而Bodybuilding.com用三個步驟幫助消費者找到適合健身目標的營養(yǎng)補充劑。

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