編輯導(dǎo)語：每天各種營銷活動，平臺OR商家要如何設(shè)計自己的會場？用戶喜歡看到的是怎么樣的活動？在大促期間，怎么樣的會場頁面更能引導(dǎo)成交？文章結(jié)合目標用戶痛點和購物邏輯，分享了蘇寧易購大促會場動線設(shè)計的相關(guān)思路，供大家一同參考和學(xué)習(xí)。

前言

大促會場設(shè)計，對于研發(fā)的設(shè)計團隊來說，如何通過設(shè)計提升用戶點擊量，如何能夠讓用戶在繁雜的會場頁面里瀏覽深度更深，能夠不自覺地向下瀏覽，始終是我們的突破使命。從2010年蘇寧易購打造818購物節(jié)到現(xiàn)在歷經(jīng)10個全民購物節(jié)，如何突破？是設(shè)計團隊最頭疼的事情。

2020年是集團30歲的生日，在這個重要的節(jié)點，設(shè)計團隊不想在會場設(shè)計中只是單純的從平面設(shè)計上做文章，還能從哪些方面突破，設(shè)計小伙伴們展開了熱烈的討論。有人說調(diào)整現(xiàn)有框架、有人講主會場融入小游戲……可這些都是往期大促提出的老梗算不上突破。

在中場休息環(huán)節(jié)，有人提到了去迪士尼玩，那里的客流的運動軌跡很牛，這句話給了我們靈感。蘇寧是做電器起家的，對線下賣場設(shè)計有著非常豐富的經(jīng)驗，我們是否可以嘗試將賣場的客戶動線設(shè)計運用到線上會場上來。于是本次大促我們鎖定了用戶動線設(shè)計。

在大促會場頁面中，如何運用動線設(shè)計讓用戶不知不覺在會場里逛起來，提升瀏覽時間，達到我們的預(yù)期目標。

“動線”其實應(yīng)用更廣泛的是線下賣場，也就是客流的運動軌跡。良好的客戶動線可以在復(fù)雜的環(huán)境中，為客戶提供可辨識、清晰的路徑，可以讓顧客更多的觸達有效區(qū)，盡量避免死角、盲區(qū)等現(xiàn)象發(fā)生，可能避免客戶的購物疲勞感，從而使客戶在輕松的狀態(tài)下逛的時間更長。

不難看出，賣場的動線設(shè)計目標和我們的設(shè)計目標基本是一致的。可線上會場的動線設(shè)計要怎么設(shè)計呢？我們怎么能夠通過良好的動線設(shè)計盡量延長用戶的瀏覽深度和使用時長，并且盡可能避免用戶視覺疲勞？

要達到我們的設(shè)計目標，要從兩個方面出發(fā)：一是會場動線如何設(shè)計；二是如何盡可能避免用戶的視覺疲勞。

首先我們分析了線上用戶和線下客戶的運動差異。線上用戶主要是以視覺為主要動線，而人的視覺中心是有限的，人們在瀏覽頁面時一次只能產(chǎn)生一個視覺焦點。對于設(shè)計師而言，我們的目標就是通過合理的頁面布局和設(shè)計元素的組合，引導(dǎo)用戶盡可能按照設(shè)定的最長瀏覽路徑進行瀏覽，從而提升我們的瀏覽時長。

這就需要設(shè)計師去了解我們的眼睛如何處理界面信息，了解用戶的視線規(guī)律，提升我們的瀏覽體驗。

動線最常用的幾種類型：LFZ型瀏覽動線。

其中Z字型的瀏覽模式很有效，它是沿著Z字形狀，用戶視線是從左到右從上到下的自然移動去瀏覽內(nèi)容。這種模式的瀏覽內(nèi)容面積最大。

我們在規(guī)劃會場方案時必須從總體上考慮商業(yè)，使各會場的入口流量盡量平衡。我們利用Z字型的瀏覽模式對主會場頁面進行了重新定義

（圖-2）可以看出，之前的會場動線覆蓋面積比較小，大致可以歸為F型瀏覽軌跡，用戶的視覺中心嚴格來講，每個樓層的中心只有一個，就是前面的樓層標題，后面的入口都很弱化。為了讓用戶的視覺動線覆蓋面積更大，設(shè)計師在原來的樓層模板基礎(chǔ)上將F型的瀏覽動線轉(zhuǎn)變?yōu)閆型瀏覽動線，從兩個維度進行了定義：

1. 純視覺表達的展示設(shè)計：將每個樓層的第一行入口著重設(shè)計，從上圖的對比可以看出，第一行三個入口更加突出，整個樓層右側(cè)層級也更加清晰。對比左側(cè)原始樓層模板，從靜態(tài)的視覺傳達設(shè)計上已經(jīng)基本形成的Z型瀏覽動線。
2. 動效介入：只是單純的靜態(tài)Z型瀏覽動線，對用戶的視線引導(dǎo)還是存在一定的局限，且引導(dǎo)性較弱，如何讓右側(cè)和下面的入口更好地吸引用戶的視覺呢？我們想到了動畫。在每個Z字型的關(guān)鍵節(jié)點加入微動效，通過動態(tài)圖片來吸引用戶。既不會使整個頁面看起來視覺元素過于膨脹，對視覺感受造成負面影響，又能夠很好的抓住用戶的視線。

我們在設(shè)計動線的時候也從賣場動線的設(shè)計原則里借鑒到了一些方法。以下是會場動線設(shè)計中總結(jié)的一些設(shè)計原則：

01 脈絡(luò)清晰，讓用戶的視線流更加清晰

在賣場我們可以看到，賣場一樓大廳會有一個很醒目的賣場一覽圖，他會把整個商場的所有商鋪的位置、電梯的位置、衛(wèi)生間的位置等都標注的很清楚。另外每層電梯口處都會有一個指示牌，同樣會標注清楚本樓層的布局情況。這就是為了客戶能夠?qū)u場的布局有清晰的脈絡(luò)，讓用戶逛得安心提升效率。

我們在做818會場的時候，為了讓用戶對會場有整體的清晰的脈絡(luò)，讓用戶在信息繁多的頁面里有一個更加清晰的瀏覽動線？我們設(shè)計了隨時可見的樓層錨點導(dǎo)航和清晰的樓層分割，給用戶提供明確的方向感。

02 保證回路，避免出現(xiàn)死角

賣場的動線設(shè)計有幾個模型，其中口字型設(shè)計能夠很好的避免出現(xiàn)死角，讓用戶不知不覺中在不同程度下最大程度的接觸到商鋪，實現(xiàn)利益最大化。

對于線上會場來講，除了主會場自身的瀏覽路徑清晰以外，還承擔著分流的重要責任，為分會場、店鋪、頻道、商詳做引流。這樣就可以讓用戶在整個大促會場里逛起來，獲得更多的實惠，同時平臺也為平臺爭取了更多與用戶交互的機會，激發(fā)用戶購物欲望從而完成我們的業(yè)務(wù)目標。

所以設(shè)計師在設(shè)計會場的時候要思考，用戶瀏覽完品類樓層仍沒有被打動，仍沒有被分流走，我們還會有哪些手段進一步促成用戶分流的作用。因此我們對品類樓層后面的更對會場進行了升級，用更多的單品入口去吸引用戶，通過偏好命中用戶的興趣點，從而激發(fā)用戶的點擊欲望。

03 適當設(shè)置節(jié)點，避免疲勞感

根據(jù)消費心理學(xué)研究，筆直見底的通道會讓用戶產(chǎn)生疲勞，在賣場里一般每隔25米就會設(shè)置節(jié)點或者過渡區(qū)，可以有效的幫助客戶緩解疲勞感，提升用戶的視覺興趣點。

對于大促主會場來講，會場頁面非常長，如果沒有對樓層設(shè)計視覺節(jié)點，只是單一的模塊堆砌，會使用戶失去對頁面的探索欲望，用戶很容易產(chǎn)生視覺疲勞，最終流失。

我們針對每個樓層設(shè)置視覺節(jié)點，產(chǎn)品定位不同，梳理設(shè)計層級；業(yè)務(wù)屬性不同，視覺設(shè)計傳達給用戶的感覺不同，避免單一的視覺呈現(xiàn)，使用戶產(chǎn)生新鮮感，增加用戶的停留時長，延長瀏覽路徑。

以上就是我們在818大促主會場設(shè)計中的一些探索和思路。

動線是作為我們控制用戶瀏覽軌跡和瀏覽體驗的一種手段，為了減少信息噪點，讓用戶高效獲取信息，使用戶心情愉悅地瀏覽，增加用戶的停留時長，最終達到我們的業(yè)務(wù)目標，設(shè)計師必須精心設(shè)計用戶的瀏覽動線。

作者：朱珂瑤，互聯(lián)網(wǎng)BU消費者前端產(chǎn)品研發(fā)中心經(jīng)理；公眾號：蘇寧設(shè)計

本文由 @蘇寧設(shè)計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自pexels，基于CC0協(xié)議。