電商詳情頁設計流程

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


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


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




三、構架布局框架
根據文案內容，結合實際產品，進行有效的布局建立,可以從下面八個方面入手操作：
1.產品海報 -- 引起注意。
2.產品屬性功能 -- 提升興趣，了解產品。
3.產品全景 -- 提升興趣。
4.產品細節展示 -- 提升興趣，了解產品。
5.痛點挖掘 -- 拉近客戶。
6.檢測報告 -- 建立信任。
7.賣點優勢 -- 體現產品價值。
8.好評分享展示 -- 進一步加強購買欲望。




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


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


六、整個詳情頁排版
怎么對圖片和文案內容進行排版設置，要考驗我們平時積累下來的設計的水平。越是簡約大氣的頁面，元素務必不要太多，清爽舒適的頁面多留白。




七、修改定稿
把制作好的首稿輸出為JPG或PNG格式，同時保留源文件格式，給團隊成員進行閱稿審核，如不符合要求，進行局部修改。也可以參考不同的意見進行優化處理，直至定稿保存為止。


八、切片和優化頁面存儲
設計制作后的商品詳情頁往往是一張大圖，高度可能達上萬像素，而我們在網上瀏覽的圖是經過Photoshop切片功能進行切割圖片后呈現出來的。如果一張數幾十MB的圖像直接上傳網店店鋪，網絡加載速度會很慢，用戶體驗差，所以要對圖片進行切割優化。