雙11的電商設(shè)計風(fēng)格:5個角度分析天貓視覺頁

1 評論 23597 瀏覽 64 收藏 12 分鐘

天貓官方的雙十一預(yù)熱頁面剛剛上線,本文作者就幫大家分析雙十一電商設(shè)計的流行趨勢,包括場景、配色、角度、標(biāo)題、輔助性元素等。干貨+趨勢,絕對值得一讀!

首先放一張?zhí)熵?1.11入口圖:

uisdc-1111-201610211

紅金搭配、依然豪氣的不要不要的。

今年的天貓雙11給大家的感受是什么:牛逼、炸裂、絢麗,過目不忘、流連忘返?

那么,頁面還有那些地方出彩的呢?所以在這里,我通過幾點分析給大家:

一、售賣頁主會場

1、場景

uisdc-1111-201610212

非常強烈的購物情景代入感覺、背景由商場樓盤組成,這就是為什么看到銀泰這些地方就會有購物的欲望,看到商城大腦反應(yīng)給我們的直覺就是用來購物、那自然就達(dá)到了節(jié)日的目的。

背景上面承載的信息:

  1. 雙11 Logo標(biāo)識用來強調(diào)形象傳遞、這也是每年雙11都會這樣做。
  2. 促銷海報及大牌logo,促銷海報引導(dǎo)刺激用戶購物欲望,大牌logo(全英文)增強品質(zhì)感和全球、時尚的感受。

2、角度

uisdc-1111-201610213

uisdc-1111-201610214

在角度上面,背景高樓的傾斜和下面色塊的傾斜,帶來非常強的縱深感。在平面上構(gòu)造空間縱深感。

其次也起到了非常強烈聚焦效果,讓你的視覺直擊中心。沒錯就是商品和標(biāo)題。

強烈的傾斜角度也給人帶來了速度感,在心理上面讓用戶感受到節(jié)日的氛圍和緊張感受。(一緊張就想抓點什么)

3、顏色

uisdc-1111-201610215

配色上面主打紫色調(diào)和漸變色、另外如左圖所示,漸變色均為臨近的顏色漸變,所以也不會那么突兀。

如下圖,天貓國際主色調(diào)為紫色。

uisdc-1111-201610216

紫色是由溫暖的紅色和冷靜的藍(lán)色化合而成,是極佳的刺激色。所以,刺激不就是促銷最需要的么?在中國傳統(tǒng)里,紫色是尊貴的顏色,如北京故宮又稱為“紫禁城”,亦有所謂“紫氣東來”。其次,紫色高貴神秘的顏色。

輔助圖形為漸變色、很醒目和時尚。

uisdc-1111-201610217

uisdc-1111-201610218

漸變配色的回歸正巧是在扁平化大行其道的今天,所以它不可避免地同大量扁平化的元素搭配到了一起,而其中最值得考慮的因素,就是色彩。某些用色最大膽、跨度范圍最大的漸變色設(shè)計干脆直接就從扁平化配色中“借用”色彩。

但是,只是把漸變色用在背景上面。所以在輔助圖形上面用上了漸變色,非常出彩。

要說明的是,顏色用寫輕佻一些的,別老是正那些近視色,搞得頁面標(biāo)題標(biāo)題不突出、商品商品不突出。

另外放2張be上面設(shè)計師的2張作品:

uisdc-1111-201610219

4、標(biāo)題

天貓的頁面標(biāo)題沒有立體,沒有夸張的變形。夠直接、清爽、大方。

uisdc-1111-2016102110

居中排版最穩(wěn)定、也是最容易的做法。上文、下圖,也是運營活動主會場最常見的應(yīng)用方式,因為給人比較正式、重要的感受。你想想一個點如果在右邊、左邊是不是顯得不是那么重要,沒有主角光環(huán)。

uisdc-1111-2016102111

再看電影海報,是不是主角都在中間。就是要告訴那么多頁面、那么多類目我就是主會場。

uisdc-1111-2016102112

5、輔助性

天貓雙11的logo爆出來的時候、就知道他的輔助性很多就是logo圍繞的那些橢圓射線、似舞臺感覺、又像人民大會堂不信你看。

uisdc-1111-2016102113

uisdc-1111-2016102114

哈哈,還是說正經(jīng)的。

(1)輔助性橢圓形非常好的動感圖形,又圓潤。輔助圖形上面也是有一條視覺引導(dǎo)線。

uisdc-1111-2016102115

uisdc-1111-2016102116

把風(fēng)格和空間感結(jié)合起來,讓平靜的頁面圖案動了起來的。同時它們之間都連接起來,不會造成視覺的散亂。

uisdc-1111-2016102117

uisdc-1111-2016102118

這樣可以給頁面帶來動感和引導(dǎo)、動詞打次動詞打次。

(2)貓頭里面的圖案和應(yīng)用頁面背景的圓形圖案。

uisdc-1111-2016102119

uisdc-1111-2016102120

uisdc-1111-201610211

貓頭里面不管是并列的小圓點,還是發(fā)散性圓形圖形,都帶來了視覺上面的節(jié)奏感。也可以說這種風(fēng)格是歐普風(fēng)(不了解的可以百度下)。

uisdc-1111-2016102121

uisdc-1111-2016102122

uisdc-1111-2016102123

圖案總是給人一種精致的感覺、而平面構(gòu)成幾何圖形總會讓你的頁面更加很時尚、節(jié)奏感、動感。從視覺心理上,平面構(gòu)成與圖案也就形成了在對藝術(shù)形式的審美感知及情感體驗。

例如:

uisdc-1111-2016102124

uisdc-1111-2016102125

uisdc-1111-2016102126

這些元素的組成結(jié)構(gòu)嚴(yán)謹(jǐn),富有極強的抽象性和形式感。又具有多方面的實用特點和創(chuàng)造力的設(shè)計作品,與具象表現(xiàn)形式相比較,它更具有廣泛性。

6、貓頭

貓頭依然精彩,沿用性和易用性很強。所以前一久被那46個商家貓頭刷屏了朋友圈。選了幾張放上來。

uisdc-1111-2016102127

二、售賣頁分會場

先來幾張分會場頭圖:

uisdc-1111-2016102128

uisdc-1111-2016102129

uisdc-1111-2016102130

uisdc-1111-2016102131

那么我們從以下幾個點分析下分會場:

首先,各分會場的共同點:

  1. 背景橢圓圖案的復(fù)用、橢圓輔助形的貫穿整個活動。
  2. 顏色輕佻、對比強,促銷氛圍感強,加上了漸變色,同時也很新穎。
  3. 排版右文左圖,分會場的最明顯的特征之一。,這樣做讓分會場的易用性非常高。

其次,輔助圖形部分用到了顏色的重復(fù),視覺上面還挺有意思的嘛、同時帶來了也有節(jié)奏感、動感。

uisdc-1111-2016102132

順便放幾張前幾天收集到的幾張顏色重復(fù)的視覺圖、大家隨意感受下:

uisdc-1111-2016102133

小結(jié)

1、漸變色更出彩、輕佻、時尚;

2、幾何圖形讓頁面具有時尚氣息、抽象性和形式感;

3、商品和輔助形之間需具有視覺上面的連接。

 

作者:不沉的骨頭

來源:微信公眾號【三根設(shè)計骨】

本文由 @不沉的骨頭 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 天貓的視覺真心漂亮

    來自廣東 回復(fù)