文章寫(xiě)在2017天貓雙十一全球狂歡節(jié)結(jié)束后。自天貓2009年首創(chuàng)雙十一購(gòu)物節(jié)以來(lái)，每年的這一天已成為全民購(gòu)物盛宴。在當(dāng)前經(jīng)濟(jì)下行壓力加大的背景下，雙十一購(gòu)物狂歡節(jié)的洶涌客流和極為龐大的單日成交量顯示了用戶群體較強(qiáng)的消費(fèi)意愿和較高的消費(fèi)能力。在這九年里，作為阿里巴巴每一次促銷活動(dòng)頁(yè)面的創(chuàng)作者，不僅僅在視覺(jué)表現(xiàn)上創(chuàng)造出一場(chǎng)場(chǎng)令人嘆為觀止的視覺(jué)體驗(yàn)，在視覺(jué)的背后，也有著完整的視覺(jué)傳達(dá)以及邏輯秩序。我們將從題圖的信息視覺(jué)秩序和會(huì)場(chǎng)的信息視覺(jué)秩序，兩部分來(lái)了解營(yíng)銷活動(dòng)頁(yè)面中的方法，利用營(yíng)銷視覺(jué)設(shè)計(jì)的方法，賦能新零售浪潮下店面空間的信息設(shè)計(jì)秩序。
會(huì)場(chǎng)頁(yè)面的信息視覺(jué)秩序
在線上頁(yè)面的視覺(jué)設(shè)計(jì)中無(wú)論web還是無(wú)線，他們都是承載在瀏覽器中的。而瀏覽器作為視覺(jué)透出的窗口，結(jié)合鼠標(biāo)操作的習(xí)慣，因此用戶瀏覽頁(yè)面的行動(dòng)是線性的。例如“尼爾森F視覺(jué)模型”中指出用戶的視覺(jué)隨著操作行動(dòng)，通常不是先看中間，而是根據(jù)母語(yǔ)的讀寫(xiě)習(xí)慣，經(jīng)過(guò)大腦的指令，按照：從上到下，從左到右的路線進(jìn)行查看。從左上角至右下角優(yōu)先比重逐級(jí)遞減。首先用戶會(huì)先從頂部開(kāi)始從左到右水平移動(dòng)。從而目光再向下移。開(kāi)始從左到右觀察，但是長(zhǎng)度會(huì)相對(duì)較短。最后以較短的長(zhǎng)度向下掃視，形成一個(gè) F形狀。此時(shí)我們的閱讀速度較慢，也更為系統(tǒng)和條理性。
因此在過(guò)去經(jīng)驗(yàn)中我們也依據(jù)用戶線性的瀏覽動(dòng)向，將整個(gè)活動(dòng)的頁(yè)面分為了四個(gè)主要區(qū)域。而他們則承載著不同的作用。
1）氛圍題圖。活動(dòng)題圖承載著運(yùn)營(yíng)內(nèi)容的主副標(biāo)題、利益點(diǎn)的重點(diǎn)透出和傳播。同時(shí)它需要為用戶進(jìn)入頁(yè)面后，帶來(lái)視覺(jué)上的信息進(jìn)入感和關(guān)聯(lián)感。再依次在用戶線性前進(jìn)的過(guò)程中帶動(dòng)信息內(nèi)容的確定感和沉浸感。這就是題圖創(chuàng)作中信息視覺(jué)的遞進(jìn)秩序。
2）會(huì)場(chǎng)分流器。會(huì)場(chǎng)頁(yè)面題圖部分向下的區(qū)域，負(fù)責(zé)引導(dǎo)用戶前往定向內(nèi)容或利益點(diǎn)細(xì)分的功能。在用戶與題圖主題產(chǎn)生體感關(guān)聯(lián)后，在視覺(jué)信息的這個(gè)部分，引導(dǎo)用戶進(jìn)行首次判斷，輔助用戶對(duì)信息目標(biāo)產(chǎn)生肯定感。而分流器是面向具備清晰購(gòu)買(mǎi)目標(biāo)的用戶群體。他們的特點(diǎn)是清晰的了解活動(dòng)特征并產(chǎn)生強(qiáng)烈關(guān)聯(lián)感。
3）海景房模塊。是負(fù)責(zé)重點(diǎn)商品的透出傳播的區(qū)域。它具備計(jì)劃性的同時(shí)也擔(dān)負(fù)著營(yíng)銷策略變化的可變性。隨著互聯(lián)網(wǎng)大數(shù)據(jù)的深入，營(yíng)銷時(shí)期的海景房模塊已經(jīng)具備千人千面的特點(diǎn)，定向個(gè)性化內(nèi)容常常會(huì)在這個(gè)區(qū)域，對(duì)用戶進(jìn)行強(qiáng)弱不同的引導(dǎo)，進(jìn)而形成營(yíng)銷內(nèi)容，當(dāng)然通常依據(jù)營(yíng)運(yùn)策略，分流器和海景房的促銷區(qū)域時(shí)常會(huì)進(jìn)行位置互換，并不是固定不變的。
4）行業(yè)樓層。線性瀏覽的行動(dòng)，行進(jìn)到的第四區(qū)域是主題會(huì)場(chǎng)設(shè)計(jì)中的子區(qū)域。負(fù)責(zé)承載頁(yè)面活動(dòng)的商品和區(qū)域劃分的作用。當(dāng)用戶瀏覽到此時(shí)，用戶已經(jīng)完成了從進(jìn)入頁(yè)面形成對(duì)活動(dòng)的理解，但并未就以上區(qū)域的輔助信息產(chǎn)生明確判斷。進(jìn)而直行達(dá)到的樓層設(shè)計(jì)則可以在設(shè)計(jì)信息上增加豐富性，最終幫助用戶前往準(zhǔn)確的商品detail。
以上從縱向觀察四個(gè)區(qū)域的信息作用，分別承擔(dān)著用戶從外部banner入口進(jìn)入頁(yè)面會(huì)場(chǎng)之后，信息體感的遞進(jìn)模式和責(zé)任。作為UED營(yíng)銷視覺(jué)，我們也依據(jù)這樣的信息秩序分別向不同板塊注入了四個(gè)感知階段。即用題圖氛圍營(yíng)造明確的進(jìn)入感、通過(guò)題圖中焦點(diǎn)信息和用戶產(chǎn)生關(guān)聯(lián)感、通過(guò)分流器或者海景房引導(dǎo)用戶產(chǎn)生內(nèi)容肯定感，隨后的用戶行進(jìn)將逐步進(jìn)入視覺(jué)沉浸的感知中。
會(huì)場(chǎng)題圖的信息視覺(jué)秩序
從頁(yè)面的縱向我們通過(guò)四個(gè)遞進(jìn)的感知，向用戶輸送頁(yè)面的信息設(shè)計(jì)秩序。在題圖的視覺(jué)設(shè)計(jì)中我們也有著明確的信息排序。在過(guò)去的專業(yè)輸出中，我們將營(yíng)銷設(shè)計(jì)從形式感的角度分為了前中后三景。通過(guò)前中后的三個(gè)位置的設(shè)計(jì)我們可以得到一張完整的營(yíng)銷視覺(jué)畫(huà)面。但是營(yíng)銷視覺(jué)設(shè)計(jì)不單純是一場(chǎng)藝術(shù)設(shè)計(jì)，作為互聯(lián)網(wǎng)營(yíng)銷的一種重要設(shè)計(jì)形式，視覺(jué)題圖設(shè)計(jì)也蘊(yùn)含著不同的信息邏輯，因此我們進(jìn)一步將三景分為了焦點(diǎn)信息層、輔助信息層和背景信息層。每一個(gè)景別都清晰的承載用戶進(jìn)入頁(yè)面后的信息感知。通過(guò)明確的信息分區(qū)，我們就可以得到一張功能性和藝術(shù)性結(jié)合緊密的營(yíng)銷設(shè)計(jì)題圖。
1.景別一：焦點(diǎn)信息層
在我們?cè)O(shè)計(jì)營(yíng)銷頁(yè)面中，我們通常會(huì)設(shè)置一個(gè)重要的視覺(jué)焦點(diǎn)，視覺(jué)焦點(diǎn)所富含的信息主要由主標(biāo)題文字信息和圖形核心為主要元素。那么焦點(diǎn)信息層起到的作用是在用戶視覺(jué)對(duì)焦的時(shí)候，第一時(shí)間獲得準(zhǔn)確的信息接收。文字是人類文明發(fā)展以來(lái)的準(zhǔn)確信息承載的最佳方式，往往會(huì)處于畫(huà)面的中心位置或者靠前的位置。但是有時(shí)候在大型促銷氛圍中，我們也會(huì)使用更多的圖形處于焦點(diǎn)的位置，例如農(nóng)村淘寶雙十一的頁(yè)面，我們?cè)谕ㄟ^(guò)走訪用戶、收集業(yè)務(wù)目標(biāo)、提出體驗(yàn)?zāi)繕?biāo)后得出的設(shè)計(jì)策略是：具象的群眾聚集歡慶的畫(huà)面。因此我們的焦點(diǎn)信息層通過(guò)群眾聚合歡慶的形式畫(huà)面準(zhǔn)確表達(dá)了狂歡的含義。這也是一種表達(dá)的設(shè)計(jì)策略。靈活調(diào)整焦點(diǎn)信息也需要根據(jù)設(shè)計(jì)策略隨時(shí)進(jìn)行變換。
2.景別二：輔助信息層
當(dāng)在焦點(diǎn)明確傳遞之后，在營(yíng)銷頁(yè)面設(shè)計(jì)當(dāng)中為了使用戶更深層次的獲得肯定的感知，輔助信息層則是一個(gè)必要的環(huán)節(jié)。例如活動(dòng)焦點(diǎn)是“冬季女裝五折起”。當(dāng)用戶獲取信息時(shí)，若頁(yè)面毫無(wú)女裝熱點(diǎn)品牌或者沒(méi)有冬季特征元素，則用戶會(huì)對(duì)接受的焦點(diǎn)信息產(chǎn)生疑慮。任何在促銷中的猶豫和疑問(wèn)狀態(tài)都是造成用戶跳失的主要原因。因此輔助信息層所起到的作用除去幫助用戶肯定焦點(diǎn)信息，還有幫助用戶產(chǎn)生活動(dòng)的關(guān)聯(lián)感，打消猶豫和疑慮。
3.景別三：背景信息層
當(dāng)用戶對(duì)于活動(dòng)焦點(diǎn)信息完成認(rèn)識(shí)和肯定的情況下，保持用戶持續(xù)感知的視覺(jué)信息則在于第三景別的背景信息層。關(guān)聯(lián)的就是我們前面談到的沉浸式體感。很多設(shè)計(jì)師在設(shè)計(jì)營(yíng)銷頁(yè)面的時(shí)候通常不會(huì)將背景設(shè)計(jì)納入信息秩序當(dāng)中。但是在阿里巴巴的各類營(yíng)銷活動(dòng)中通過(guò)背景中的色彩和機(jī)理調(diào)節(jié)，確保用戶對(duì)于會(huì)場(chǎng)和活動(dòng)的級(jí)別有顯著的感受。例如在S級(jí)大促中，我們會(huì)預(yù)設(shè)好主會(huì)場(chǎng)的色調(diào)，即明度和純度較高的紅色暖系顏色。但是通過(guò)分流的主題會(huì)場(chǎng)和其他分會(huì)場(chǎng)則盡可能的規(guī)避該色調(diào)。以保證整體活動(dòng)的視覺(jué)色彩信息，帶給用戶既微妙又明確的主次區(qū)別。
通過(guò)頁(yè)面縱向和題圖部分橫向的分析，我們針對(duì)營(yíng)銷運(yùn)營(yíng)活動(dòng)可以建立起一套縱橫均明確的信息設(shè)計(jì)秩序。當(dāng)然在不同的業(yè)務(wù)場(chǎng)景下，我們會(huì)針對(duì)業(yè)務(wù)屬性的不同和其需求的不同，做出不同的響應(yīng)和調(diào)整。雖然設(shè)計(jì)本身背離不掉藝術(shù)屬性，但是用戶體驗(yàn)的目標(biāo)總是嚴(yán)肅又任重道遠(yuǎn)。一橫又一縱的設(shè)計(jì)方法可以在線上頁(yè)面的設(shè)計(jì)中給予大家一些參考。但是在不同屬性的電商平臺(tái)間，營(yíng)銷設(shè)計(jì)也有著不一樣的設(shè)計(jì)策略。以下我們以嚴(yán)選和天貓平臺(tái)為例，看看其中的信息設(shè)計(jì)的秩序。
——————————————————————
1、以上只是文章的部分內(nèi)容，更多精彩請(qǐng)“淘寶”“天貓”搜索《U一點(diǎn)料Ⅱ》了解詳情。
2、您也可以訪問(wèn)“U一點(diǎn)”的官方博客，查看更多優(yōu)質(zhì)文章。
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
