詳情頁設計無非就是兩種:套模板和原創

詳情頁除了讓消費者了解產品,更重要的是幫助商家提升銷量。打造一款優秀的詳情頁,要用60%的時間去調查構思,確定方向,40%的時間去設計。當然,詳情頁只是例如淘寶店鋪裝修中的一個內容,但主圖店招也是同樣的道理。

確定頁面風格

頁面風格主要是根據產品本身來定的,如產品的屬性、產品功能等。如果產品沒有特定的風格屬性,可以根據目標銷售人群、季節、節日或主題活動來定。

產品和素材搜集

前期實拍素材,進行整理和分類。我們也要在設計的過程中要學會整理搜集自己的素材庫,做好備份。

構架布局框架

根據文案內容,結合實際產品,進行有效的布局建立,可以從下面八個方面入手操作:

產品海報 -- 引起注意。

產品屬性功能 -- 提升興趣,了解產品。

產品全景 -- 提升興趣。

產品細節展示 -- 提升興趣,了解產品。

痛點挖掘 -- 拉近客戶。

檢測報告 -- 建立信任。

賣點優勢 -- 體現產品價值。

好評分享展示 -- 進一步加強購買欲望。

確定配色方案

已有店鋪視覺規范的可以直接延續使用。如果沒有,可以從產品本身提取,或者從Logo中提取或從產品聯想屬性提取。在配色過程中,無論用幾種顏色來組合,首先要考慮用什么顏色作為主色調。

在選擇配色時應根據企業自身文化特點、產品特色、店鋪的風格等選擇一個色系的某一種顏色作為主色調,然后通過調整顏色的透明度或飽和度來獲得其他搭配顏色,并將其作為輔助色,這樣得到的整個頁面看起來色彩統一、有層次感。選用顏色時切記使用的顏色數不宜過多,應限制在三種之內。

選擇合適字體類型

字體相當于一個橋梁,相當重要。主要用來對產品進行解釋說明,方便顧客閱讀,同時,也是起重要信息的引導作用,可通過大小字體搭配進行重點顯示某項內容。字體使用時一般不超過3種字體并選擇符合產品定位的字體;在重點部分內容進行加粗突出顯示,以加深買家對該信息的印象程度。

整個詳情頁排版

怎么對圖片和文案內容進行排版設置,要考驗我們平時積累下來的設計的水平。越是簡約大氣的頁面,元素務必不要太多,清爽舒適的頁面多留白,多學習,多總結,擴展想法,拓展思維,建立自己的設計風格。


電商詳情頁設計的風格及方向

01.數碼電器更加簡約/輕量化

就像蘋果手機影響手機行業一樣。國內設計師既受behance影響,同時又受國內小米為代表的大廠風格影響。

這類詳情頁的特點是越發扁平、簡約化、信息和產品重點突出,品牌質感加強。

含有大量點綴性質的英文頁面已不常見,一般僅用于標題輔助。

詳情頁設計-數碼電器

用戶長期的視覺疲勞,影響數碼產品本身展示的,雜亂重特效風格將會減少。而輕視覺特效則會越來越多,視覺感也較為舒適。

通過強烈的明暗對比、視覺穿插、產品破格都可以用來加強頁面形式感。越是看似簡單的畫面,越考驗基本功。

詳情頁設計-數碼電器2

02.俏皮插畫相結合

插畫應用一直非常廣泛。對于家居、創意、小工藝品等品類,簡單的輕松插畫出現,可以起到拉近觀者距離,增加品牌感等功能。特別是一些產品使用場景的氣氛渲染。

 詳情頁設計-插畫類

03.合成類依然使用廣泛

合成類詳情頁的審美一直在變化,過重視覺的炫酷轟炸久而必倦。其實對很多人而言,疲倦的不是技術本身,而是太重視覺從而影響產品自身的視覺體驗。但無論如何合成技術仍是設計師需要掌握的必要技能,合成目前在食品、母嬰、化妝品等大品類依然有很大發揮空間,關鍵點在于用技術去襯托產品,而非喧賓奪主。

詳情頁設計-合成

04.C4D繼續順勢向上

C4D自從前幾年爆發之后,熱度依然不減,但是目前在除了在電商大促頁面常見之外,平時主要在3C、電器、化妝品等人造產品出現頻次較高。C4D建??梢詫崿FPS修圖達不到的效果,但是缺點就是耗時太長。

詳情頁設計-C4D

05.國風新視覺風格爆發

大家都會從傳統文化中尋找一些東西來滿足需求,因此傳統文化重新被重視,漢服再次復興,國潮風產品的熱銷就是其直接體現。每個新品類的誕生都是絕佳市場良機,比如最近火爆的花西子就是一個典型的新品牌,定位東方美妝,其新古典設計風格一度引來眾多模仿對象。

整體色調中國風,字體上使用宋體字,細節上采用拼音做裝飾,同時加上國風素材、肌理、光影來渲染畫面。

這類新國風類產品,要求整個畫面的色彩、字體、圖案、肌理樣式都要與產品調性保持一致,不然就會有違和感。

細節上與數碼類詳情頁完全相反,需要大量的裝飾性元素去烘托產品的調性,以及傳統文化的厚重感。

詳情頁設計-國風1

詳情頁設計-國風2

詳情頁設計-國風3

詳情頁設計-國風4

06.新視覺混搭嘗試

不少有靈性的設計師開始嘗試各種風格混搭,比如波普、孟菲斯、故障藝術、雜志風、等等,以求突破傳統。

總的來看,當下的電商已進入存量競爭。5年前,我們由PC轉向移動手機,緊接著手機詳情頁開始豎屏化適配手機。

但是隨著5G帶來,資費的降低,去年抖音、淘寶直播開始迅猛爆發。

相信未來詳情頁除了傳統圖文模式外,也會有豎屏視頻化的可能,那時視頻剪輯也會慢慢成為設計師必備技能。

但是無論技術如何發展,我們商業設計永遠不是為了設計而設計,而是永遠為了產品和品牌服務。國內電商已經發展了20年,其實真正發展在2010年后,相對比國內其他行業算是最年輕的行業之一。順勢而為,展望未來,我們相信電商設計依然大有可為。

詳情頁設計-新潮流視覺

詳情頁設計-新潮流視覺

詳情頁除了讓消費者了解產品,更重要的是幫助商家提升銷量。打造一款優秀的詳情頁,要用60%的時間去調查構思,確定方向,40%的時間去設計。

確定頁面風格

頁面風格主要是根據產品本身來定的,如產品的屬性、產品功能等。如果產品沒有特定的風格屬性,可以根據目標銷售人群、季節、節日或主題活動來定。

產品和素材搜集

前期實拍素材,進行整理和分類。我們也要在設計的過程中要學會整理搜集自己的素材庫,做好備份。

構架布局框架

根據文案內容,結合實際產品,進行有效的布局建立,可以從下面八個方面入手操作:

產品海報 -- 引起注意。

產品屬性功能 -- 提升興趣,了解產品。

產品全景 -- 提升興趣。

產品細節展示 -- 提升興趣,了解產品。

痛點挖掘 -- 拉近客戶。

檢測報告 -- 建立信任。

賣點優勢 -- 體現產品價值。

好評分享展示 -- 進一步加強購買欲望。

確定配色方案

已有店鋪視覺規范的可以直接延續使用。如果沒有,可以從產品本身提取,或者從Logo中提取或從產品聯想屬性提取。在配色過程中,無論用幾種顏色來組合,首先要考慮用什么顏色作為主色調。

在選擇配色時應根據企業自身文化特點、產品特色、店鋪的風格等選擇一個色系的某一種顏色作為主色調,然后通過調整顏色的透明度或飽和度來獲得其他搭配顏色,并將其作為輔助色,這樣得到的整個頁面看起來色彩統一、有層次感。選用顏色時切記使用的顏色數不宜過多,應限制在三種之內。

選擇合適字體類型

字體相當于一個橋梁,相當重要。主要用來對產品進行解釋說明,方便顧客閱讀,同時,也是起重要信息的引導作用,可通過大小字體搭配進行重點顯示某項內容。字體使用時一般不超過3種字體并選擇符合產品定位的字體;在重點部分內容進行加粗突出顯示,以加深買家對該信息的印象程度。

整個詳情頁排版

怎么對圖片和文案內容進行排版設置,要考驗我們平時積累下來的設計的水平。越是簡約大氣的頁面,元素務必不要太多,清爽舒適的頁面多留白,多學習,多總結,擴展想法,拓展思維,建立自己的設計風格。


電商詳情頁的設計風格及方向

01.數碼電器更加簡約/輕量化

就像蘋果手機影響手機行業一樣。國內設計師既受behance影響,同時又受國內小米為代表的大廠風格影響。

這類詳情頁的特點是越發扁平、簡約化、信息和產品重點突出,品牌質感加強。

含有大量點綴性質的英文頁面已不常見,一般僅用于標題輔助。

詳情頁設計-數碼電器


用戶長期的視覺疲勞,影響數碼產品本身展示的,雜亂重特效風格將會減少。而輕視覺特效則會越來越多,視覺感也較為舒適。

通過強烈的明暗對比、視覺穿插、產品破格都可以用來加強頁面形式感。越是看似簡單的畫面,越考驗基本功。

詳情頁設計-數碼電器2

02.俏皮插畫相結合

插畫應用一直非常廣泛。對于家居、創意、小工藝品等品類,簡單的輕松插畫出現,可以起到拉近觀者距離,增加品牌感等功能。特別是一些產品使用場景的氣氛渲染。

 詳情頁設計-插畫類

03.合成類依然使用廣泛

合成類詳情頁的審美一直在變化,過重視覺的炫酷轟炸久而必倦。其實對很多人而言,疲倦的不是技術本身,而是太重視覺從而影響產品自身的視覺體驗。但無論如何合成技術仍是設計師需要掌握的必要技能,合成目前在食品、母嬰、化妝品等大品類依然有很大發揮空間,關鍵點在于用技術去襯托產品,而非喧賓奪主。

詳情頁設計-合成

04.C4D繼續順勢向上

C4D自從前幾年爆發之后,熱度依然不減,但是目前在除了在電商大促頁面常見之外,平時主要在3C、電器、化妝品等人造產品出現頻次較高。C4D建??梢詫崿FPS修圖達不到的效果,但是缺點就是耗時太長。

詳情頁設計-C4D

05.國風新視覺風格爆發

大家都會從傳統文化中尋找一些東西來滿足需求,因此傳統文化重新被重視,漢服再次復興,國潮風產品的熱銷就是其直接體現。每個新品類的誕生都是絕佳市場良機,比如最近火爆的花西子就是一個典型的新品牌,定位東方美妝,其新古典設計風格一度引來眾多模仿對象。

整體色調中國風,字體上使用宋體字,細節上采用拼音做裝飾,同時加上國風素材、肌理、光影來渲染畫面。

這類新國風類產品,要求整個畫面的色彩、字體、圖案、肌理樣式都要與產品調性保持一致,不然就會有違和感。

細節上與數碼類詳情頁完全相反,需要大量的裝飾性元素去烘托產品的調性,以及傳統文化的厚重感。

詳情頁設計-國風1

詳情頁設計-國風2

詳情頁設計-國風3

詳情頁設計-國風4

06.新視覺混搭嘗試

不少有靈性的設計師開始嘗試各種風格混搭,比如波普、孟菲斯、故障藝術、雜志風、等等,以求突破傳統。

總的來看,當下的電商已進入存量競爭。5年前,我們由PC轉向移動手機,緊接著手機詳情頁開始豎屏化適配手機。

但是隨著5G帶來,資費的降低,去年抖音、淘寶直播開始迅猛爆發。

相信未來詳情頁除了傳統圖文模式外,也會有豎屏視頻化的可能,那時視頻剪輯也會慢慢成為設計師必備技能。

但是無論技術如何發展,我們商業設計永遠不是為了設計而設計,而是永遠為了產品和品牌服務。國內電商已經發展了20年,其實真正發展在2010年后,相對比國內其他行業算是最年輕的行業之一。順勢而為,展望未來,我們相信電商設計依然大有可為。

詳情頁設計-新潮流視覺

詳情頁設計-新潮流視覺

品牌VI設計 電商視覺設計 LOGO設計 包裝設計 畫冊設計 展示空間設計商務禮品定制 相關資訊