免費(fèi)參與·100+跨境活動 
免費(fèi)下載·4000+跨境資料 
免費(fèi)學(xué)習(xí)·2000+直播課程 
免費(fèi)加入·15萬+賣家交流群 
2017-12-19 09:20
已收藏，可在
我的資料庫 中查看
每一年，新技術(shù)和用戶行為都會推動電商網(wǎng)站的發(fā)展以及網(wǎng)站設(shè)計(jì)的更新。2018年，自建站除了使用CSS網(wǎng)格布局外，還會使用對移動設(shè)備友好的全屏窗口模式，提供更多的視頻，加入微交互和引導(dǎo)銷售等。
CSS網(wǎng)格布局是二維布局模式，CSS部分標(biāo)準(zhǔn)來自萬維網(wǎng)聯(lián)盟。
它讓網(wǎng)站設(shè)計(jì)人員能夠更好地控制網(wǎng)頁布局，利用跨設(shè)備、不同尺寸屏幕的空間。換句話說，與其他布局相比，CSS網(wǎng)格布局讓優(yōu)化用戶界面相對簡單得多。
萬維網(wǎng)聯(lián)盟給出關(guān)于CSS網(wǎng)格布局的建議：隨著網(wǎng)站從簡單的文檔演變成復(fù)雜的交互式應(yīng)用程序，文檔布局技術(shù)中的一些元素，如浮動元素（floats），不一定適合應(yīng)用程序布局。
萬維網(wǎng)聯(lián)盟寫道：“通過結(jié)合表格、JavaScript腳本，或?qū)Ω釉剡M(jìn)行仔細(xì)測量，程序員發(fā)現(xiàn)了解決方案來實(shí)現(xiàn)所需布局。適應(yīng)可用空間的布局通常比較脆弱，并且由于空間受限會導(dǎo)致反直觀行為。另外，許多編寫Web應(yīng)用程序的程序員會選擇固定的布局，無法利用屏幕上可用渲染空間的變化。”
CSS網(wǎng)格布局可以解決這些問題，讓網(wǎng)站設(shè)計(jì)好很多。
2018年將有越來越多的電商網(wǎng)站設(shè)計(jì)人和主題制作人使用CSS網(wǎng)格布局，特別是在品類頁面或搜索結(jié)果頁上。
唯一可能存在的問題在于，舊版的瀏覽器可能不支持CSS網(wǎng)格布局。但所有領(lǐng)先瀏覽器的最新版本都支持這一布局，包括Chrome、Firefox、Safari、Opera和Edge。
模態(tài)彈出框（modal）、模態(tài)框（modal box）或modal window（模態(tài)窗體）是網(wǎng)站設(shè)計(jì)要素之一，通常由腳本控制，并覆蓋在其他要素或內(nèi)容之上，讓用戶交互。
幾年來，模態(tài)彈出框一直是一個(gè)有效的用戶界面，在許多電商網(wǎng)站都很常見。2018年可能會改變的是全屏模態(tài)彈出框在搜索和表單中的應(yīng)用。
這一趨勢來自移動端先行的網(wǎng)頁設(shè)計(jì)。在移動設(shè)備上，許多模態(tài)彈出框占用了屏幕大部分或全部空間。
以O(shè)verstock為例子，該平臺推送的登記表單使用全屏模態(tài)顯示，在新用戶訪問網(wǎng)站時(shí)彈出。在移動設(shè)備上，該表單居中且全屏。
Ralph Lauren網(wǎng)站也包含了這種搜索模態(tài)彈出框，在臺式電腦或筆記本電腦上顯示時(shí)，幾乎覆蓋了網(wǎng)頁上的所有內(nèi)容，而且實(shí)際上，在移動設(shè)備上是全屏顯示的。
企業(yè)可以尋找移動設(shè)備網(wǎng)頁設(shè)計(jì)人，并率先對搜索和其他表單形式使用全屏模態(tài)，并將這些全屏模態(tài)在更大的布局中實(shí)現(xiàn)。
視頻是傳達(dá)復(fù)雜信息、講故事、引起消費(fèi)者共鳴的絕佳內(nèi)容。互聯(lián)網(wǎng)上分享的視頻數(shù)量每天都在上升。因此，電商零售商2018年將在網(wǎng)頁設(shè)計(jì)中使用更多視頻元素，一點(diǎn)也不令人意外。
Beardbrand等網(wǎng)站已經(jīng)使用了多年的視頻和內(nèi)容營銷，并通過在產(chǎn)品詳情頁面上添加視頻內(nèi)容，引領(lǐng)這一網(wǎng)站設(shè)計(jì)趨勢。
2018年也將看到視頻用作背景，用于現(xiàn)場推銷或創(chuàng)建企業(yè)形象等。
從Facebook在帖子上添加“Like”按鈕以來，微交互一直存在。微交互將成為2018年最受歡迎的網(wǎng)站和應(yīng)用程序趨勢之一。
對電商賣家來說，微交互的絕招在于可能會幫助消費(fèi)者建立習(xí)慣，或是獎勵完成特定任務(wù)的用戶，比如向購物車添加產(chǎn)品、查看產(chǎn)品或訂閱實(shí)時(shí)通訊。
用戶體驗(yàn)博客Planet UX主編Nick Babich指出：“微交互能鼓勵用戶真正的互動，該強(qiáng)有力的工具有助于讓消費(fèi)者形成消費(fèi)習(xí)慣循環(huán)。”
例如，電商網(wǎng)站購物者可能會為最近購買的產(chǎn)品撰寫評論。當(dāng)他們提交評論時(shí)，如果有一個(gè)小動畫（微交互）獎勵他們提交評論的話，會鼓勵他們繼續(xù)撰寫評論。
書籍《Microinteractions》一書作者Dan Saffer指出微交互主要分為4個(gè)部分：
?觸發(fā)：觸發(fā)啟動微交互；
?規(guī)則：交互的行為規(guī)則；
?反饋：為用戶設(shè)計(jì)的微交互發(fā)生時(shí)返回信息的溝通機(jī)制；
?循環(huán)與模式：設(shè)定微交互的時(shí)長以及周期，并設(shè)計(jì)它是否重復(fù)、隨著時(shí)間演變的過程。
2018年，預(yù)計(jì)電商網(wǎng)站和應(yīng)用程序設(shè)計(jì)人將在設(shè)計(jì)中融入微交互。
引導(dǎo)銷售是指詢問消費(fèi)者關(guān)于產(chǎn)品特征和用途，以幫助他們挖掘特定產(chǎn)品的行為。
在電商行業(yè)中，引導(dǎo)銷售已經(jīng)存在好幾年了。例如維多利亞的秘密有一個(gè)運(yùn)動文胸選擇器；North Face會幫消費(fèi)者找夾克，而Bodybuilding.com用三個(gè)步驟幫助消費(fèi)者找到適合健身目標(biāo)的營養(yǎng)補(bǔ)充劑。
就像上述其他網(wǎng)站設(shè)計(jì)趨勢一樣，2018年，引導(dǎo)銷售將變得更加普遍。（編譯/雨果網(wǎng) 方小玲）
