tft每日頭條

 > 圖文

 > 淘寶頁面設計包括哪些

淘寶頁面設計包括哪些

圖文 更新时间:2024-07-24 02:17:01

在電商設計中,詳情頁的設計在整個設計環節中都是至關重要的一項,因為詳情頁在購買環節中能起到一定的轉化、促進交易作用,所以一款符合産品定位且視覺效果很好的詳情頁是很多電商商家所渴求的,但是詳情頁設計和PC端設計在視覺呈現的過程中是有一定差别的,用PC的設計習慣做産品詳情頁,隻會顧此失彼,所以這期的内容就是:詳情頁設計應該注意什麼?從哪裡思考,入手?

淘寶頁面設計包括哪些(你真的會設計電商)1

很多人做不好詳情頁并不是因為不會做,而是走進了很多誤區,最終導緻作品不盡如人意,那麼在詳情頁設計中常見的誤區有哪些:

誤區一:用PC的設計思維做詳情頁設計,這種現象是極其常見的,意思是隻兼顧PC端,而忽略手機端,要知道現在電商流量95%來自于移動端,PC端設計思維在電商詳情頁制作中是不通用的!

誤區二:隻追求效果而忽略了最基礎的信息傳達,詳情頁目的在于向用戶诠釋産品的特性、亮點、功能,是向用戶傳達要表達的産品信息,使得用戶能夠充分了解産品特征、優點、亮點,從而促進買成交易,而不是一味的隻追求視覺效果而忽略信息傳遞!

誤區三:文案、産品、功能、視覺不能做到很多的串聯,也就是俗話說的驢頭不對馬嘴,不能将這四點很好的結合在一起!

那麼在詳情頁設計中常用的形式有哪些?該注意些什麼?

淘寶頁面設計包括哪些(你真的會設計電商)2

在詳情頁設計中,很多設計手法、形式是實用且有效的,總結常用的設計形式也有助于提升工作效率,提供設計思路,那麼常用設計形式可以簡單分為以下幾種:

形式一:采用豎屏的設計思維,分屏制作,更利于信息傳遞以及視覺效果的體現,這也是做電商詳情頁最常用的形式之一,這樣做的目的更多的兼顧移動端,以移動端為主,提升視覺流暢度以及信息傳達率,比如:

淘寶頁面設計包括哪些(你真的會設計電商)3

傳統的電商詳情頁設計是基于PC的,無法兼顧手機端,從視覺流暢度和信息傳達方面都有很大的缺陷,而采用分屏制作的形式就能很好的兼顧手機端,大大提升視覺流暢度和用戶捕捉信息的速度!

形式二:善用圖标元素,當畫面出現數字時可以做特殊處理或者放大,因為大字号和數字能起到很好的裝飾性且也能起到突出的作用,增加畫面的設計感,比如:

淘寶頁面設計包括哪些(你真的會設計電商)4

大字号的數字或者英文能起到很好的裝飾性,目的是打破原本比較相似的構圖形式,使得整體畫面在統一的前提下又不顯單調,同時也起到了很好的突出強調關鍵詞的作用!

形式三:很多人對于詳情頁配圖不太精通,原因是拿到文案不知道如何去選圖才能更好地切合産品和主題,常見的配圖形式分為兩種,即:以産品為中心配圖和關鍵詞配圖兩種形式,這兩種形式也可以結合着用,雖然詳情頁是以商品為主,但是如果每一屏都出現産品圖,會給人一種重複感很強甚至太刻意的感覺,那麼我們可以以文案的關鍵詞作為配圖參考,這樣同樣能保證切合主題:

淘寶頁面設計包括哪些(你真的會設計電商)5

這裡的配圖形式就是以文案關鍵詞作為切入點,将文案“更靜一步舒适環境”中的靜和舒适作為畫面整體的配圖參考,也改變了每一屏都要有産品的單一形式!

形式四:當畫面整體不需要完全深色的情況下,要盡量做到整體模塊有深有淺,也就是視覺上有輕重之分,這樣能形成很好的視覺節奏關系,但是盡量不要大面積的輕、重過于集中,要讓整體中心偏向平穩:

淘寶頁面設計包括哪些(你真的會設計電商)6

輕重并不是要做到完全均衡,而是盡量保證畫面富有節奏感,避免大面積出現重色或者淺色,可以通過改變其中某個模塊将其隔開,從而形成視覺上的輕重之分!

形式五:文字排版不易做的太過複雜,因為對于移動端而言,過于複雜的文字編排雖然設計感提升了,但是卻會影響到視覺信息的傳達流暢度,而且文字大小不易太小,要保證在移動端正常閱讀習慣的前提下,文案的識别性以及可讀性高!

淘寶頁面設計包括哪些(你真的會設計電商)7

首屏設計在整個詳情頁中是至關重要的,首屏的好壞在一定程度上也能影響用戶是否繼續閱讀,同時也是為整體定基調的一屏,那麼常見的詳情頁首屏設計手法有哪些?接下來我們繼續分析(前提是結合文案):

手法一:将首屏設計畫面做出光感,也就是不管畫面有沒有光源,要做出一種有光來的感覺,比如:

淘寶頁面設計包括哪些(你真的會設計電商)8

淘寶頁面設計包括哪些(你真的會設計電商)9

看似簡單的畫面,做出有光來的感覺後一樣可以很出彩,光感是增加畫面立體感、場景感最常用的形式之一!

手法二:首屏以小場景的形式呈現,這樣能夠起到很好的帶入感、場景感,使得産品形象更加鮮明,比如:

淘寶頁面設計包括哪些(你真的會設計電商)10

淘寶頁面設計包括哪些(你真的會設計電商)11

将産品置身于環境内,搭建出一個小型的場景畫面,使得整體給人一種很舒服、協調的感覺,搭配簡單的文字排版,畫面整體也會很吸引人!

手法三:并不是所有産品都适合簡約的設計風格,也有一些偏炫酷、遊戲風格的産品首屏就不适合這樣做了,但是做出光感是共通的,隻不過是在效果、材質的改變,但是作圖思路還是如此,即:場景感、光感的體現:

淘寶頁面設計包括哪些(你真的會設計電商)12

淘寶頁面設計包括哪些(你真的會設計電商)13

我們不難發現,不管是什麼風格類型,這裡所強調的光感和場景感都是至關重要的!

淘寶頁面設計包括哪些(你真的會設計電商)14

結合本期所說的内容,做了一個關于空氣淨化器的案例,下面帶着前面所說的,用分析的視角看整體,你能說出分别用到前面說的哪些形式和手法嗎?

淘寶頁面設計包括哪些(你真的會設計電商)15

淘寶頁面設計包括哪些(你真的會設計電商)16

淘寶頁面設計包括哪些(你真的會設計電商)17

結合文案、産品、理論、風格,最終呈現了這樣的一個詳情頁設計,這裡用到的設計思路及手法,在上面都有提到,當你看完前面的,能在這個案例中分析出來,說明你可能有所收獲了!并不是說做的多麼好,要看的是把理論轉換成設計的呈現手法!

淘寶頁面設計包括哪些(你真的會設計電商)18

無論是什麼樣的設計手法,前提都是要符合文案和産品,我們可以帶着本期所說的理論,去找一些比較不錯的詳情頁分析一下,分别用到了哪些手法和形式,為什麼?隻有通過不斷的分析、總結、練習,才能将文字理論轉化成設計效果;而且一直強調的是不要把理論學死了,要學會靈活運用,舉一反三,理論隻是提供思路的一種手段,善于總結才是王道!!!

PS:有電商運營問題都可以私信咨詢我,私信回複“電商”,我們一起交流

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved