對於一個購物網站而言，網站裝修是影響網站流量的重要因素之一，但要導致買家最終決定購買的原因卻是產品詳情頁的設計。即使你的網站裝修設計得再好，但產品詳情頁設計頭圖頁面設計不好，即使為你的網站帶來不少流量，但是網站的轉化率依然是不盡人意的。那麼，購物網站移動端詳情頁怎樣設計才吸引用戶眼球?

※ 頭圖一定要吸引人

詳情頁的頭圖如果能吸引用戶的眼球，讓他們有興趣繼續往下滾動網頁，繼而引起用戶的關注以及購物慾。那麼，頭圖怎樣吸引人?

① 大

頭圖作為詳情頁佔比比較大的主題，所以無論是產品、模特還是文字，只要跟產品相關的都要突出，這樣就能讓用戶第一眼就被吸引住。

② 破

如果你覺得頭圖頁面設計太過保守和單調，不妨嘗試打破它的界限，比如講規矩圖形異化，或讓產品放在界限外。

③ 美

利用帥哥美女的圖片作為頭圖素材，會使人身心愉悅，這會比單純放產品圖更能打動人。如果可能的話，選擇品質好一點的產品圖或背景素材，會讓畫面更加美觀。

④ 飄

在畫面里添加一些飄動元素，能增加畫面的層次感和熱鬧氛圍。

⑤ 光影

沒有光影的畫面會顯得乾癟癟的，光影的存在給帶給畫面增加更多真實感和質感，檔次一下子就提升了。

※ 整體風格一致

既然詳情頁是為了介紹產品，我們就需要提取產品的特點，應用在詳情頁的設計里，例如：

① 元素

從產品包裝上，提取產品的元素應用在詳情頁的設計中，保證整體風格的連貫性。

② 形狀

我們也可以從產品的形狀入手，提取基本形狀進行構圖創作，同樣保證風格統一連貫性。

③ 色彩

想頁面的色彩保持連貫，也可以從產品本身的顏色觸發，或者採用產品的近似色或對比色。

④ 質感

善用產品的質地或包裝質感紋理，作為詳情頁的背景使用。

⑤ 成分

不少護膚產品或食品的詳情頁都喜歡使用產品的成分來做文章，這樣會讓用戶對產品有更深入的認識。

※ 整體風格要搭調

每一款產品都有其獨特的氣質，因此氣質不同，詳情頁設計的風格也會有所不同，例如：

① 熱鬧促銷風格

這種類型的頁面，色彩往往比較豐富艷麗，而且畫面豐富具有動感;

② 文藝素雅風格

這種頁面不會使用太多色彩，顏色選取上也不會過於艷麗，往往給人寧靜柔和的感覺。

③ 年輕時尚風格

這種風格的頁面往往稜角分明，色彩沒有太多要求，但至少會有一些亮色點綴。

除了以上三種，還有很多風格需要大家去領悟……

※ 整體瀏覽器體驗好

如果你做到前面幾步，那麼你可能會產出一份視覺不錯的詳情頁設計，但做到視覺上美觀是不足以打動用戶購買產品的，你還需要提供更好的用戶體驗才對。

① 排版佈局

其實詳情頁設計的排版佈局與專題頁設計佈局排版類似，但形式上不能過於浮誇。

② 字號大小

雖然說移動端詳情頁設計是重中之重，但為了方便大家更舒適地閱讀，詳情頁的文字字號最小不能低於20號，或參考各大平台app 的最小字號。

③ 字體選擇

盡量選擇便於識別的字體，至於是否便於識別也是相對。不過無論背景怎麼樣，字體越大越便於識別，當然還要考慮頁面的美觀性。

④ 色彩選擇

深邃的顏色能給人帶來神秘或壓抑或沉穩有質感的感覺，而明亮的顏色則給人年輕活力或張揚輕浮的感覺。但顏色搭配上要注意，一定要有明有暗才會比較透氣耐看。

詳情頁雖然跟專題頁或首頁設計一樣都是長長的圖，但是詳情頁設計只有一個主角，所以無論詳情頁怎樣搭配，都應該以這一主角為主，否則就會讓整個頁面有種喧賓奪主的感覺。