當前位置:
首頁 > 最新 > 詳情頁做不好,可能你缺少這些……

詳情頁做不好,可能你缺少這些……

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

乾貨文章、行業動態定期更新

(轉載請聯繫作者)

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 美工美邦 的精彩文章:

TAG:美工美邦 |