來源：三根設計骨（微信號：bone-bones）
作者：不沉的骨頭
原標題《天貓雙11頁面視覺分析（預熱期）》
本文經作者授權，未經允許請勿轉載
天貓官方雙11頁面上線了，大家都知道11.11（光棍節要來了）替還是單身的微微心疼3秒。又或者是買買買、又要開始敗家了。
而作為設計師，我們看到了什么？
首先先放一張天貓11.11入口圖
紅金搭配、依然豪氣的不要不要的。
今年的天貓雙11給大家的感受是什么、牛逼、炸裂、絢麗，要過目不忘、要流連忘返？
先看下GIF里面的幾張圖
大量運用了平面構成中的設計手法
平面構成是視覺元素在二次元的平面上，按照美的視覺效果，力學的原理，進行編排和組合，它是以理性和邏輯推理來創造形象、研究形象與形象之間的排列的方法。是理性與感性相結合的產物。（百度平面構成的解釋）
通過幾何圖形的重復排列，配合明亮、輕跳的色彩帶來讓人興奮、刺激的視覺效果。
那么頁面還有那些地方出彩的呢、所以在這里我通過幾點分析給大家：
第一、售賣頁主會場
一、場景
非常強烈的購物情景代入感覺、背景由商場樓盤組成，這就是為什么看到銀泰這些地方就會有購物的欲望，看到商城大腦反應給我們的直覺就是用來購物、那自然就達到了節日的目的。
背景上面承載的信息：
1. 雙11logo標識用來強調形象傳遞、這也是每年雙11都會這樣做。
2. 促銷海報及大牌logo，促銷海報引導刺激用戶購物欲望，大牌logo（全英文）增強品質感和全球、時尚的感受。
二、角度
1. 在角度上面，背景高樓的傾斜和下面色塊的傾斜，帶來非常強的縱深感。在平面上構造空間縱深感。
2. 其次也起到了非常強烈聚焦效果，讓你的視覺直擊中心。沒錯就是商品和標題。
3. 強烈的傾斜角度也給人帶來了速度感，在心理上面讓用戶感受到節日的氛圍和緊張感受。（一緊張就想抓點什么）
三、顏色
配色上面主打紫色調和漸變色、另外如左圖所示，漸變色均為臨近的顏色漸變，所以也不會那么突兀。
1. 天貓國際主色調為紫色
2. 紫色是由溫暖的紅色和冷靜的藍色化合而成，是極佳的刺激色。所以刺激不就是促銷最需要的么。在中國傳統里，紫色是尊貴的顏色，如北京故宮又稱為“紫禁城”，亦有所謂“紫氣東來”。其次、紫色高貴神秘的顏色。
3. 輔助圖形為漸變色、很醒目和時尚。相信大家在8月份的時候應該會看到過類似這樣一篇文章：
漸變配色的回歸正巧是在扁平化大行其道的今天，所以它不可避免地同大量扁平化的元素搭配到了一起，而其中最值得考慮的因素，就是色彩。某些用色最大膽、跨度范圍最大的漸變色設計干脆直接就從扁平化配色中“借用”色彩。
但是，只是把漸變色用在背景上面。所以在輔助圖形上面用上了漸變色，非常出彩。
要說明的是，顏色用寫輕佻一些的，別老是正那些近視色，搞得頁面標題標題不突出、商品商品不突出。
另外放2張be上面設計師的2張作品
四、標題
天貓的頁面標題沒有立體，沒有夸張的變形。夠直接、清爽、大方。
居中排版最穩定、也是最容易的做法。上文、下圖，也是運營活動主會場最常見的應用方式，因為給人比較正式、重要的感受。你想想一個點如果在右邊、左邊是不是顯得不是那么重要，沒有主角光環。
再看電影海報，是不是主角都在中間。就是要告訴那么多頁面、那么多類目我就是主會場。
五、輔助形
天貓雙11的logo爆出來的時候、就知道他的輔助形很多就是logo圍繞的那些橢圓射線、似舞臺感覺、又像人民大會堂不信你看。
哈哈，開個玩笑、還是說正經的吧。
1. 輔助形橢圓形非常好的動感圖形，又圓潤。輔助圖形上面也是有一條視覺引導線。
把風格和空間感結合起來，讓平靜的頁面圖案動了起來的。同時它們之間都連接起來，不會造成視覺的散亂。
這樣可以給頁面帶來動感和引導、動詞打次動詞打次。
2. 貓頭里面的圖案和應用頁面背景的圓形圖案。
貓頭里面不管是并列的小圓點，還是發散性圓形圖形，都帶來了視覺上面的節奏感。也可以說這種風格是歐普風（不了解的可以百度下）。
圖案總是給人一種精致的感覺、而平面構成幾何圖形總會讓你的頁面更加很時尚、節奏感、動感。從視覺心理上，平面構成與圖案也就形成了在對藝術形式的審美感知及情感體驗。
列如：
這些元素的組成結構嚴謹，富有極強的抽象性和形式感。又具有多方面的實用特點和創造力的設計作品，與具象表現形式相比較，它更具有廣泛性。
六、貓頭
貓頭依然精彩，沿用性和易用性很強。所以前一久被那46個商家貓頭刷屏了朋友圈。選了幾張放上來。
第二、售賣頁分會場
先來幾張分會場頭圖
那么我們從以下幾個點分析下分會場，都具備有：
1. 背景橢圓圖案的復用、橢圓輔助形的貫穿整個活動。
2. 顏色輕佻、對比強，促銷氛圍感強，加上了漸變色，同時也很新穎。
3. 排版右文左圖，分會場的最明顯的特征之一。，這樣做讓分會場的易用性非常高。
其次，輔助圖形部分用到了顏色的重復，視覺上面還挺有意思的嘛、同時帶來了也有節奏感、動感：
順便放幾張前幾天收集到的幾張顏色重復的視覺圖、大家隨意感受下：
全程總結：
1. 漸變色更出彩、輕佻、時尚；
2. 幾何圖形讓頁面具有時尚氣息、抽象性和形式感；
3. 商品和輔助形之間需具有視覺上面的連接。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（2條）