營銷頁面設計方法在零售空間中的設計秩序

5 評論 6698 瀏覽 28 收藏 24 分鐘

我們將從題圖的信息視覺秩序和會場的信息視覺秩序,兩部分來了解營銷活動頁面中的方法,利用營銷視覺設計的方法,賦能新零售浪潮下店面空間的信息設計秩序。

文章寫在2017天貓雙十一全球狂歡節結束后。自天貓2009年首創雙十一購物節以來,每年的這一天已成為全民購物盛宴。在當前經濟下行壓力加大的背景下,雙十一購物狂歡節的洶涌客流和極為龐大的單日成交量顯示了用戶群體較強的消費意愿和較高的消費能力。

在這九年里,作為阿里巴巴每一次促銷活動頁面的創作者,不僅僅在視覺表現上創造出一場場令人嘆為觀止的視覺體驗,在視覺的背后,也有著完整的視覺傳達以及邏輯秩序。我們將從題圖的信息視覺秩序和會場的信息視覺秩序,兩部分來了解營銷活動頁面中的方法,利用營銷視覺設計的方法,賦能新零售浪潮下店面空間的信息設計秩序。

會場頁面的信息視覺秩序

在線上頁面的視覺設計中無論web還是無線,他們都是承載在瀏覽器中的。而瀏覽器作為視覺透出的窗口,結合鼠標操作的習慣,因此用戶瀏覽頁面的行動是線性的。

例如“尼爾森F視覺模型”中指出用戶的視覺隨著操作行動,通常不是先看中間,而是根據母語的讀寫習慣,經過大腦的指令,按照:從上到下,從左到右的路線進行查看。

從左上角至右下角優先比重逐級遞減。首先用戶會先從頂部開始從左到右水平移動。從而目光再向下移。開始從左到右觀察,但是長度會相對較短。最后以較短的長度向下掃視,形成一個 F形狀。此時我們的閱讀速度較慢,也更為系統和條理性。

因此在過去經驗中我們也依據用戶線性的瀏覽動向,將整個活動的頁面分為了四個主要區域。而他們則承載著不同的作用。

1)氛圍題圖。活動題圖承載著運營內容的主副標題、利益點的重點透出和傳播。同時它需要為用戶進入頁面后,帶來視覺上的信息進入感和關聯感。再依次在用戶線性前進的過程中帶動信息內容的確定感和沉浸感。這就是題圖創作中信息視覺的遞進秩序。

2)會場分流器。會場頁面題圖部分向下的區域,負責引導用戶前往定向內容或利益點細分的功能。在用戶與題圖主題產生體感關聯后,在視覺信息的這個部分,引導用戶進行首次判斷,輔助用戶對信息目標產生肯定感。而分流器是面向具備清晰購買目標的用戶群體。他們的特點是清晰的了解活動特征并產生強烈關聯感。

3)海景房模塊。是負責重點商品的透出傳播的區域。它具備計劃性的同時也擔負著營銷策略變化的可變性。隨著互聯網大數據的深入,營銷時期的海景房模塊已經具備千人千面的特點,定向個性化內容常常會在這個區域,對用戶進行強弱不同的引導,進而形成營銷內容,當然通常依據營運策略,分流器和海景房的促銷區域時常會進行位置互換,并不是固定不變的。

4)行業樓層。線性瀏覽的行動,行進到的第四區域是主題會場設計中的子區域。負責承載頁面活動的商品和區域劃分的作用。當用戶瀏覽到此時,用戶已經完成了從進入頁面形成對活動的理解,但并未就以上區域的輔助信息產生明確判斷。進而直行達到的樓層設計則可以在設計信息上增加豐富性,最終幫助用戶前往準確的商品detail。

以上從縱向觀察四個區域的信息作用,分別承擔著用戶從外部banner入口進入頁面會場之后,信息體感的遞進模式和責任。作為UED營銷視覺,我們也依據這樣的信息秩序分別向不同板塊注入了四個感知階段。即用題圖氛圍營造明確的進入感、通過題圖中焦點信息和用戶產生關聯感、通過分流器或者海景房引導用戶產生內容肯定感,隨后的用戶行進將逐步進入視覺沉浸的感知中。

會場題圖的信息視覺秩序

從頁面的縱向我們通過四個遞進的感知,向用戶輸送頁面的信息設計秩序。在題圖的視覺設計中我們也有著明確的信息排序。在過去的專業輸出中,我們將營銷設計從形式感的角度分為了前中后三景。

通過前中后的三個位置的設計我們可以得到一張完整的營銷視覺畫面。但是營銷視覺設計不單純是一場藝術設計,作為互聯網營銷的一種重要設計形式,視覺題圖設計也蘊含著不同的信息邏輯,因此我們進一步將三景分為了焦點信息層、輔助信息層和背景信息層。每一個景別都清晰的承載用戶進入頁面后的信息感知。通過明確的信息分區,我們就可以得到一張功能性和藝術性結合緊密的營銷設計題圖。

1.景別一:焦點信息層

在我們設計營銷頁面中,我們通常會設置一個重要的視覺焦點,視覺焦點所富含的信息主要由主標題文字信息和圖形核心為主要元素。那么焦點信息層起到的作用是在用戶視覺對焦的時候,第一時間獲得準確的信息接收。文字是人類文明發展以來的準確信息承載的最佳方式,往往會處于畫面的中心位置或者靠前的位置。

但是有時候在大型促銷氛圍中,我們也會使用更多的圖形處于焦點的位置,例如農村淘寶雙十一的頁面,我們在通過走訪用戶、收集業務目標、提出體驗目標后得出的設計策略是:具象的群眾聚集歡慶的畫面。

因此我們的焦點信息層通過群眾聚合歡慶的形式畫面準確表達了狂歡的含義。這也是一種表達的設計策略。靈活調整焦點信息也需要根據設計策略隨時進行變換。

2.景別二:輔助信息層

當在焦點明確傳遞之后,在營銷頁面設計當中為了使用戶更深層次的獲得肯定的感知,輔助信息層則是一個必要的環節。

例如活動焦點是“冬季女裝五折起”。當用戶獲取信息時,若頁面毫無女裝熱點品牌或者沒有冬季特征元素,則用戶會對接受的焦點信息產生疑慮。任何在促銷中的猶豫和疑問狀態都是造成用戶跳失的主要原因。因此輔助信息層所起到的作用除去幫助用戶肯定焦點信息,還有幫助用戶產生活動的關聯感,打消猶豫和疑慮。

3.景別三:背景信息層

當用戶對于活動焦點信息完成認識和肯定的情況下,保持用戶持續感知的視覺信息則在于第三景別的背景信息層。關聯的就是我們前面談到的沉浸式體感。很多設計師在設計營銷頁面的時候通常不會將背景設計納入信息秩序當中。但是在阿里巴巴的各類營銷活動中通過背景中的色彩和機理調節,確保用戶對于會場和活動的級別有顯著的感受。

例如在S級大促中,我們會預設好主會場的色調,即明度和純度較高的紅色暖系顏色。但是通過分流的主題會場和其他分會場則盡可能的規避該色調。以保證整體活動的視覺色彩信息,帶給用戶既微妙又明確的主次區別。

通過頁面縱向和題圖部分橫向的分析,我們針對營銷運營活動可以建立起一套縱橫均明確的信息設計秩序。當然在不同的業務場景下,我們會針對業務屬性的不同和其需求的不同,做出不同的響應和調整。雖然設計本身背離不掉藝術屬性,但是用戶體驗的目標總是嚴肅又任重道遠。

一橫又一縱的設計方法可以在線上頁面的設計中給予大家一些參考。但是在不同屬性的電商平臺間,營銷設計也有著不一樣的設計策略。以下我們以嚴選和天貓平臺為例,看看其中的信息設計的秩序。

線上線下的不同以及相同之處

1.線上自營性質與平臺性質的不同點?

本小節以嚴選與天貓為例。通過對嚴選和天貓的分析,嚴選屬于自主品牌的平臺。其相比多商聚合的平臺更容易形成品牌一致性。在營銷中則可以延伸品牌效應和增加品牌價值。同時商品、服務、售后乃至產品的設計等信息的透出更加細膩純凈。而天貓屬于多商聚合的平臺,更重要的是在服務信息和商品信息中進行平衡的設計。

2.線下自營性質和平臺性質有什么不同點?

本小節以宜家和世紀華聯為例。自營性質的特點更加注重體驗式營銷,給顧客更多心動的感受,先處理心情,再談買賣,是自營最大的特質,比如宜家,它更懂得愉悅的推銷之道,在喜悅中搞定買賣,宜家極致細膩的服務就說明了這一點,沒有人喜歡在一個令人煩躁的場境下購買商品;平臺性質一大優點是商品非常齊全,但體驗式營銷還是比較欠缺,比如華聯超市貨柜貨架貼滿了標簽,雜亂不堪,無秩序可言。

3.線下空間布局和線上頁面框架結構的同類項

探究之路開始亮起了綠燈,我們的目的就是要精準挖掘線下的體驗式營銷,給顧客一個更加優質的體驗場景。

倫敦大學建筑學教授Alan Penn曾經指出“實體店面內的平面設計與用戶界面設計之間是存在共鳴的”,其框架結構的設計都是為了給用戶更舒適的體驗,即線上線下內容信息秩序背后的邏輯其實是相同或者相似的,舉一個簡單例子,一個蘋果+一個蘋果=兩個蘋果;一個人+一個人=兩個人,他們背后的邏輯都是1+1=2。

通過事物背后的相通性,我們可以相信這個世界乃至宇宙是按照一套統一的規律來運行的,所以萬物是相通的,因此我們將線上豐富的經驗來反哺線下,對線下體驗的不足進行邏輯加持。

根據線上線下內容信息秩序的相通性,我們可以將頁面中的題圖、海景房、分流路徑以及樓層與店內的布局進行一一對應。

通過以上對比我們在線下做過很多實地考察,其中宜家最為印象深刻,它們的細節之處有著獨具匠心的人性化設計,比如用戶在訪問網站時按照F型從上到下,從左到右的瀏覽習慣,而宜家恰恰也運用了同樣的原理,從上到下依次是商品信息和商品陳列,從左到右依次是促銷信息和商品描述,而普通陳列區的商品相當于網頁中的offer組件,優惠信息的強調等同于offer組件中的標簽,雖是細節但完全可以表達線上線下用戶體驗的相同之處。

4.線上線下的不同之處

舉一個例子,同卵雙胞胎的遺傳物質DNA是相同的,因此決定著他們的特征也是相同的,但外部因素又對兩者產生影響,造成身高和體重等的不同,同理線下店布局與線上頁面內部邏輯雖是相通的,但外在又有所不同。

從用戶瀏覽時的行動來看,網站瀏覽是單一線性的,而線下用戶行動是非線性的,且是相互連接、非平面、立體化、無中心、不規則的網狀結構,而比較復雜的結構需要重新拆分,重新組合,將相通之處在線下按各個區域的不同合理化運用。

從體驗感的“五覺”來看,線上僅具備視覺與聽覺,從視覺上,網頁內容完全在最佳眼睛轉動區域內,因此線上頁面布局的引導性會更加直觀,相對線下瀏覽效率會更高,而在線下視覺、觸覺、聽覺、嗅覺、味覺是全部具備的,體驗感愈加豐富,能夠鎖定最佳眼睛轉動區域的同時還會出現很多的誘導因素,因此線下秩序必須更加的嚴密謹慎。

5.促銷信息排布的秩序

以大眾身高(160CM-170CM)來衡量, 顧客進店除了看商品之外,最關心的即是價格以及優惠力度,“先看價格后購物”已成為顧客的消費習慣,因此價簽的擺放也是非常講究的,通過調查發現平視是最舒適和人性化的觀看角度。如果價格以及描述非常小,湊近仔細來看不夠人性化且效率極低,因此價格以及描述根據店內場景合理放大,并放置在最舒適的位置,減少顧客成本,同時當顧客站在店內環顧四周時,最為吸引視線的將是促銷價格,同時店內日常價簽和促銷價簽空間排布也是有秩序可循的,不僅起到信息描述的作用,而且還可以影響顧客在店內的動向,從而證明了一個事實:眼睛的視線引導走向,即身隨眼動。在店鋪面積不是很大的情況下這一點顯得格外重要。

線下秩序的探究與結論驗證

對于普通人來講,他們在實體店里接觸到的每一個觸點,從店外到店內,從營銷氛圍的布置到商品的陳列都存在著相應的秩序,然而秩序并不是設計師憑空想象的,而是通過實踐來檢驗我們的想法,因此我們展開了方法研究、實地考察和實驗設計。

1)正常人在站立時的平行視線和垂直視線都會有最佳視線區域,因此我們會根據最佳視線區布局我們的店內物料,給消費者更加舒適的體驗并且起到刺激消費的作用。

2)根據正常人站立時的視野分布,以大眾身高為基準,可按照視剖面三分法將店內分為上中下、左中右各3層,中間層為主要內容區,吸引消費者目光,由于垂直視野略微偏下因此下層作為路徑引導層,在不妨礙主要內容的同時,可快速察覺,上層是最易被忽略的可作為常規氛圍層,橫向與縱向重疊的區域作為主要促銷區,通過三分法將大結構下的物料排布秩序,以及普通人自然平視下的舒適范圍表達明確。

3)根據視野分布示意圖,普通人平視狀態的最佳眼睛轉動區在30-60度,超過30-60度的周邊部分稱為誘導視野,即人眼并不敏感的范圍,精準識別即集中注意力時的人眼視度為5-30度,垂直視線狀態下的最佳眼睛轉動區為30度,同樣超過30度的區域也就看不清楚了,要想快速抓住用戶視線就要在舒適的角度區間內,從而鎖定用戶的視線。

4)我們到宜家線下做了多次實地考察,為什么選擇宜家,因為宜家屬于超市型自主自助的購物方式,店內的陳列與設計宗旨就是以人為本,無論是商品的擺放還是物料的布置以及行走路徑的安排都是本著簡單直接的邏輯操作的,同時物料的設計極具“人情味”,比如店外促銷信息的預告,進店溫暖的路徑引導,店內真實場景的模擬和信息層的位置安排以及空間劃分,這些都是體驗式營銷的最佳體現,與此同時也大大提高了消費者的購物欲望。

5)視野實驗設計-采樣人數5人,結果一致性達到99%,可斷定對于靜態物料在固定范圍內,正常人在平視狀態下,視野舒適區在65CM左右,也就是物料的最佳展示區,相對中間清晰區兩邊不敏感的范圍是105CM,在往外就真的看不清了,因此物料展示區不得大于65CM,并且信息展示距離地面最舒適的高度在130CM左右。同時也驗證了線下實地考察的結論。

物料設計在線下的運用如何進行指標衡量?

在萬能的早讀課中得知“坪效”一詞,坪效即每平米面積上產生的銷售額,那么如何衡量我們的設計呢,通過前后物料的視覺優化,從而對比坪效,如果相比之前坪效有所提升,那說明我們的設計起到了作用,如果坪效下降那就要對我們的設計進行反思,找到問題所在,快速迭代,提升坪效。

尾聲

線上和線下并不是各自孤立的,雖然它們在營銷領域都有自己的獨到之處,但是兩者之間的關系又是相輔相成的,內部邏輯的相通性讓線下信息傳達的邏輯秩序更加直觀清晰,我們利用營銷頁面設計的方法,賦能新零售浪潮下店面空間的信息設計秩序,這些僅僅是我們優化體驗式營銷的一小步,隨著VR、AR技術的高速發展,未來將會在感官、情感、行動上賦予顧客全新的服務和體驗。探究之路雖然坎坷但我們仍保持著激情迎接體驗式經濟時代的來臨。

 

作者:superking

來源:阿里巴巴UED

題圖來自unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 如何衡量設計價值,簡單坪效無法明確區分,前提是營銷方式不變或者活動節日與內容不太變化的情況,在電商營銷領域太多不可控的因素

    來自廣東 回復
  2. ?天翔,是嗎?哈哈,我也是電商行業的,可以交流一下哈,視覺角度不一樣的瀏覽路徑與感知哈

    來自廣東 回復
  3. 4.線上線下的不同之處 大哥 顧客動線了解一下?

    來自廣東 回復
  4. 比如用戶在訪問網站時按照F型從上到下,從左到右的瀏覽習慣,而宜家恰恰也運用了同樣的原理,從上到下依次是商品信息和商品陳列,從左到右依次是促銷信息和商品描述,而普通陳列區的商品相當于網頁中的offer組件,優惠信息的強調等同于offer組件中的標簽,雖是細節但完全可以表達線上線下用戶體驗的相同之處。—————————非常牽強了 都采用這種方式是因為我們的閱讀習慣就是從上到下從左到右啊

    來自廣東 回復
  5. 不裝逼會死系列,比如:而瀏覽器作為視覺透出的窗口,結合鼠標操作的習慣,因此用戶瀏覽頁面的行動是線性的,直接說顯示屏有大小限制,一頁放不下那么多內容,所以只能用鼠標下拉操作不好嗎?我的天吶 這是什么鬼文章啊 文章內容是好的但是能不能換一個人來表達? ??

    來自廣東 回復