「10招」教你玩轉(zhuǎn)電商專題頁面設(shè)計

1 評論 24886 瀏覽 134 收藏 15 分鐘

電商中的專題設(shè)計都是單頁設(shè)計的一種應(yīng)用。

寫在前面的話

電商中的專題設(shè)計都是單頁設(shè)計的一種應(yīng)用。

單頁設(shè)計,簡單將其比喻為在一張紙上進(jìn)行的創(chuàng)作和設(shè)計。

單頁最早出現(xiàn)在平面設(shè)計中,設(shè)計師通過用不同尺寸、材質(zhì)的紙張,在僅有的正面和反面上進(jìn)行自由設(shè)計的過程,主要用在折頁、宣傳單、海報中。

如下圖:

50395760bbc30000018c1b2a7d53.jpg

圖片來自花瓣網(wǎng)

電商領(lǐng)域的單頁設(shè)計,更像是對平面單頁在使用環(huán)境上的升級,它不僅擁有平面設(shè)計中的所有設(shè)計規(guī)律,更有著網(wǎng)站設(shè)計的很多特點。

比如:可以利用新的視差滾動和H5的技術(shù),來使頁面與人的交互更密切,也使得用戶在瀏覽頁面時,更像是在閱讀一個故事。

它主要出現(xiàn)在一些促銷類的活動頁面、產(chǎn)品介紹頁、店鋪首頁等需求中。

如下圖:
7f595760bbf90000012e7ebe8d86.jpg

什么是整體專題設(shè)計的“冰糖葫蘆原則”?

在設(shè)計單頁的專題時,為了讓首屏到次屏再到內(nèi)容區(qū)間的視覺更加的連貫和流暢,就要充分利用好局部對比和整體關(guān)系來使頁面效果更加的完整。

6d6c576181210000018c1b1a9962.jpg

冰糖葫蘆原則一:單頁的點,這里指切入點

專題單頁中的切入點就是整體頁面中的主線。

平面理論中的點用來聚焦、發(fā)散、吸引人們的注意力。

如下圖:
8b3a5760bc4d0000012e7ec7e302.jpg

冰糖葫蘆原則二:單頁的線,用來連接和引導(dǎo)

專題單頁中的線用于引出故事的情節(jié)。

運(yùn)用一些藝術(shù)化的表達(dá)方式,來給頁面增加一些趣味性和裝飾性。

冰糖葫蘆原則三:單頁的面,用于整體風(fēng)格的設(shè)計

這里的指的是對整張頁面的完成度。

單頁設(shè)計不要局限于完成首屏設(shè)計或者某個單一元素的設(shè)計中。

它強(qiáng)調(diào)的是從頭到尾、(首屏到次屏再到內(nèi)容區(qū),再到最底部)、從局部到整體的一種視覺聯(lián)系。

下面我們來看3組優(yōu)秀的設(shè)計:

c7625760bcc00000012e7e009399.jpg

10個專題設(shè)計的技巧

接下來是我整理的10個專題設(shè)計的技巧,主要是一些大的理論點,大家結(jié)合著自己的專題去思考吧。

1、頭圖有個點,下面設(shè)計才好接

頭圖元素的設(shè)計不分楚河和漢界。

不能只抱著做個頭圖就完事的想法去做單頁面,要讓頭圖視覺和下面的內(nèi)容有聯(lián)系。

打破首屏(就是俗稱的頭圖)與次屏在設(shè)計上有明顯的顏色條分隔、形式分隔、線分隔等。

如下圖,紅圈所示的位置就是頭圖的高度所在,一般頭圖的高度值建議在450?600之間,太高了就會浪費(fèi)空間。

45e95760bd9b0000018c1b071da7.jpg

2、承上啟下很重要,頁面有頭也有尾

所謂的承上啟下,就是說頁面中要有一個貫穿整體的主要元素,去構(gòu)成整張頁面的視覺焦點。

讓元素頭尾呼應(yīng),上下連貫。

舉個例子:

(1)圖中紅圈所示

專題中出現(xiàn)的主要元素如:頭和尾部的元素要在視覺上做到呼應(yīng)和一致性;

(2)圖中黑圈所示

專題中貫穿整體的這個元素,一定要在整體頁面中一筆直下,一氣呵成,否則就會出現(xiàn)斷點的感覺。

如果在實際需求應(yīng)用中無法做到整體設(shè)計的表現(xiàn),那么也應(yīng)該盡量在局部或者某些元素的運(yùn)用上做到這點。

f58e5760c0930000018c1b6ae01f.jpg

3、背景顏色要整體,慎用色塊“切豆腐”

盡量不要用色塊進(jìn)行頁面內(nèi)容的分區(qū),整體的單頁設(shè)計大多用的是單一顏色的背景。

對于一些平臺型的活動單頁來講,我們常看到一些用不同色塊分區(qū)的設(shè)計。當(dāng)然,這樣的處理方式是為了更好的分出不同的活動內(nèi)容,也是做為設(shè)計的表現(xiàn)形式。

對于品類專題、店鋪首頁來說多色塊的分隔顯然整體性會差一些。

如下圖:

  1. 左圖是整塊的暗藍(lán)色的背景,沒有任何分區(qū),整體頁面看著比較統(tǒng)一;
  2. 右圖是分塊的淺色系的背景,利用顏色進(jìn)行分區(qū),使得整體頁面比較活潑和俏皮。

(注:并不是說不能用多色塊對頁面內(nèi)容進(jìn)行分區(qū),而是要看具體的需求和主題,選擇用不同的形式去表現(xiàn))

4、由點到面整體感,切記東拼和西湊

上面講到元素的重復(fù)出現(xiàn)是為了更好的連接由點到面的整體感;

但是出現(xiàn)在整體中的元素或東拼西湊、或風(fēng)格千奇百變的話,那么單頁的整體性還是會大大折扣。

無論從排版上、字體選擇上、按鈕樣式、色彩等方面都要做到一致性,這樣的單頁才是整體的。

如圖所示:
2c135760ca890000012e7e015b32.jpg

5、一眼看完3屏多,不做留白就得暈?

單頁因其把所有信息和元素都集中表現(xiàn)在一整張頁面中,所以單頁設(shè)計也注定是能超過3屏以上的頁面設(shè)計。

既然是長版的整體頁面,信息量又都很大,那就應(yīng)該對每屏間的高度適當(dāng)控制,既要保持屏與屏之間的可呼吸性和留白,給人們放松和喘息的空間。

舉個例子:
c1fa5760cc240000018c1b8ab999.jpg

留白并不是特指白色哦~

在使用留白時,要注意不要因為頁面有留白和大空隙的出現(xiàn),使得整體視覺的連接上,出現(xiàn)視覺斷點的情況。要盡量做到屏內(nèi)可緊、屏外可松,讓整體頁面充滿節(jié)奏感。

6、整體想了,整體做,整體看

整張頁面設(shè)計強(qiáng)調(diào)的是整體從點、到線、再到面的構(gòu)思和表現(xiàn),它不光只是產(chǎn)出一個首屏視覺(頭圖)和一個內(nèi)容區(qū)各自獨立的體現(xiàn)。

而更多的要求我們在設(shè)計中用放大局部來看細(xì)節(jié),縮小頁面來看整體頁面的方法去完成一張超高的,具有創(chuàng)意和實用平衡的頁面設(shè)計。

舉個例子:

如圖所示的幾個放大效果,在細(xì)節(jié)的處理和技巧上都是很棒的哦。

4d985760ce600000018c1b2c939b.jpg

7、整體專題怎么做,注重形式就能破

單頁設(shè)計的最大特點就是強(qiáng)調(diào)對整體形式感的表達(dá);

正是因為過分強(qiáng)調(diào)形式感的東西,所以整張頁面的效果就要具有十足的特色和精巧的創(chuàng)意性,才能必免流于普通單頁設(shè)計行列中。

從而吸引用戶眼球,讓用戶跟隨整體的設(shè)計去體驗完整的頁面信息,形成對整張頁面較完整的用戶體驗和視覺認(rèn)識。

舉個例子:

  1. 左圖是我當(dāng)時做的一個圣誕節(jié)的整體創(chuàng)意頁面,以禮結(jié)的形式貫穿整體設(shè)計中。當(dāng)時做的時候,就把整體的禮結(jié)元素放大化,做為主元素去表現(xiàn);
  2. 右圖是一個國外戶外專題單頁的設(shè)計,整體以傾斜感的折線為主元素,具有動感、運(yùn)動的印象。同時,結(jié)合非常有動勢的人物圖片使得整體頁面的動感時足。

c5d15760ceed0000018c1b10cddd.jpg

8、整體設(shè)計故事化,頁面才能吸引人

當(dāng)你設(shè)計單頁頁面時,在構(gòu)思之初給整體頁面設(shè)定出一個故事,讓頁面具有新穎的主題性,那單頁給用戶的視覺體驗也會更棒。

二個作品從立意到技法,到設(shè)計都脫離了傳統(tǒng)電商的折扣表現(xiàn)。比較有意思,想知道這里面的技法細(xì)節(jié)和更多的幕后知識嗎?

7f715760d3f40000012e7e6195e3.jpg

9、視差滾動好助手,單頁發(fā)展新潮流

滾屏動畫的特點在于:

  • 首先它是用來循序漸進(jìn)的講故事;
  • 然后利用完美的順滑的瀏覽體驗,將各個內(nèi)容間無縫且精巧的連接起來局部某些元素去做分層的動畫特效;
  • 最后使現(xiàn)在極簡的、扁平的頁面設(shè)計,有了點晴之處!

如下圖所示,來自蒂芙尼。

016e5760d63f0000012e7e70af96.jpg

ebab5760d6050000018c1ba39b25.jpg

分享一下我的觀后感:

跟著漫天飛舞的,飄逸在蒂芙尼的純凈世界。

這里有開啟幸福的鑰匙、有城市的記憶、有定情的禮物、有盟約的海誓,來吧,一起探索屬于你和我的蒂芙尼。

個人解讀

  • 左右搖擺的雪花帶著觀者的視線一步步的去發(fā)現(xiàn)精彩世界,純凈的白色折紙搭出了西式的唯美建筑與城市街景,折紙的陰影很倒位,把原本平鋪的紙,有了空間和立體感;
  • 清新的湖水綠與純凈的白色搭配,完全定義了愛的純真。
  • 滾屏技術(shù)的運(yùn)用,像首樂曲循序漸進(jìn)的去聆聽這美妙故事。

幾個視差滾動的案例分享:

http://memories.sutueatsflies.com/

http://tati-express.arte.tv/fr/

http://philwappler.de/

https://www.sodastreamusa.com/pepsihomemade/

http://nicolauska.sk/

10、H5動效新趨勢,人機(jī)交互有看頭

H5和動效的出現(xiàn),使得專題活了起來,不再是死板的純靜態(tài)圖片。

H5和動效的出現(xiàn),使得專題的整體體驗更像是在看一場精心安排的故事一樣。

如下圖:

c52a5760d7140000012e7eb4aa0e.jpg

設(shè)計版權(quán)歸太平洋網(wǎng)絡(luò)所有

算是一種新的嘗試案例。也希望自己以后可以做一個這樣的例子!

(細(xì)琢磨一下,專題里共推薦了40款商品以內(nèi),算中小型推薦活動!但是里面的文案和畫面結(jié)合的超贊,加上H5技術(shù)提升了用戶瀏覽體驗,改變了現(xiàn)有大多數(shù)電商平臺,靜態(tài)展示、強(qiáng)迫似推銷的路子)!

整體策劃,以故事性為主 讓用戶在觀看畫面時,連帶推銷!或者這樣的創(chuàng)新現(xiàn)在看來有些不符合運(yùn)營們的路子,但是這樣的方式或許是將來流行的趨勢

最后

總結(jié)起來9個字:整體想、整體做、整體看

總結(jié)起來10句話:

  1. H5動效新趨勢,人機(jī)交互有看頭
  2. 視差滾動好助手,單頁發(fā)展新潮流
  3. 整體設(shè)計故事化,頁面才能吸引人
  4. 整體專題怎么做,注重形式就能破
  5. 整體想了,整體做,整體看
  6. 一眼看完3屏多,不做留白就得暈
  7. 由點到面整體感,切記東拼和西湊
  8. 背景顏色要整體,慎用色塊“切豆腐”
  9. 承上啟下很重要,頁面有頭也有尾
  10. 頭圖有個點,下面設(shè)計才好接

注:圖片版權(quán)如有侵權(quán),請與我聯(lián)系,謝謝各位設(shè)計界的同仁們的漂亮頁面!

 

作者:馬良重生,公眾號:不錯研究室

本文由 @馬良重生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

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

    來自北京 回復(fù)