產品詳情頁中最容易被忽略的產品參數模塊，該如何設計？

在電商詳情頁設計中

我們絕大多數的人都會在首屏下足功夫

因為它有著吸引用戶閱讀

提升轉化的重要作用

所以理所應當要花心思在上麵

一張完整的詳情頁，按照現在分屏式的設計，大概也都會在10屏左右，從第一屏到最後一屏，對於詳情頁整體呈現效果來說都非常重要。

但是在現實工作中，很多設計師喜歡過分強調首焦圖（第一屏），而忽略了其他部分，尤其是產品參數。

因為大部分這個模塊是詳情頁的結尾部分了，越是到最後越是容易忽略細節，做的粗糙，使得詳情頁前後視覺感受差異過大，虎頭蛇尾。

所謂細節決定成敗，尤其是這種偏整體性的設計作品，更要注重視覺、細節的連貫性。

所以今天就著重說一下詳情頁中最容易被忽略的產品參數模塊，如何做更出彩？

產品參數，顧名思義就是產品的詳細信息，比如：尺寸、材質、顏色等等，多以文字信息為主，下麵我們以展示形式的不同進行分類。

1. 純文字形式 

這也是最常見的一種表現形式，把產品的具體參數直接以文字的形式展示，但即便是簡單的文字信息，也並不是說所有人都能做的很好：

這是一位讀者讓我看的詳情頁中產品參數的模塊，盡管都是文字信息，但顯然這個模塊做的差強人意，有些粗糙了。

雖然主次信息做的還不錯，但是導致視覺亂的最直接原因：標題與說明性文字是居中對齊的形式，但說明性文字內部又是左對齊的形式，所以整體留白和對齊都很不規則，導致視覺感受是亂的。

下麵是我為大家找的純文字形式的產品參數案例，一起來看看：

其實純文字的產品參數，隻要做好主次關係、對齊和留白，就不會感覺差，如上麵案例的表現形式，在平時工作中用的也很多。

還可以繼續優化和提升，但是做好純文字形式的產品參數是繼續優化的前提，如果在上圖基礎之上加點光影效果，會使得這個模塊視覺感受更加豐富：

在我之前關於詳情頁製作相關的文章中就說過，這種有光來的效果很早在詳情頁設計中很實用，即便是簡單的文字排版，加上光影效果之後也會給人眼前一亮的感覺。

做設計最重要的是發散思維，多思考，先大膽的想，再考慮細節。

在純文字的基礎上我再加點類似卷紙、書本、或者夾板的展示效果會不會也會很出彩？下麵看幾個案例：

即使都是文字信息，視覺呈現效果也是天差地別，優秀的設計師不會放過任何一個模塊的細節。

2. 結合產品圖 
 

製作產品詳情頁的目的是有兩個：讓用戶更深入的了解產品和促進買成，所以很多時候為了讓產品參數信息更直觀，往往會將文字與產品相互結合，在一定程度上也能增加關聯性。
 

這種數據與產品相互結合的形式，為了更直觀將一些常用數據，比如：產品的長、寬、高等，通過線條標注的形式體現在產品圖上。
 

下麵看看幾個類似的案例：

如上圖案例所示，產品與參數相互結合，使得冷冰冰的文字信息變得有溫度、真實。

也可以在上圖基礎之上，整個模塊加點紋理、光影效果或者是一些抽象化的線條，使得整體視覺感受上更有層次感，看兩個案例：

還可以在將產品進行特殊化的處理，比如部分高斯模糊，也是很有層次感的一種表現形式：

還有另外一種，就是把產品做成簡筆畫的形式，或者是產品圖與簡筆畫相互結合的形式，在一定程度上能夠提升模塊整體的設計感，比如：

同時也可以在此基礎之上做一些展示效果，讓整體視覺效果更加豐富，比如：

所以說，做設計一定要把思維打開，不要故步自封。
 

3. 場景圖表現法 

這種在工作中用的也很多，簡單的理解就是將產品場景圖與參數信息相互結合，使得整個模塊更有代入感，下麵看幾個例子：

同樣的，場景也可以做類似部分磨砂玻璃的效果，比如：

這類產品參數表現形式，畫麵感很豐富，也很有代入感。

那麼該有人問了，前麵三類表現形式在工作中如何選擇使用呢？

如果產品參數模塊前兩屏都是複雜的場景或者海報時，盡量使用純文字或者產品結合文字的表現形式，因為參數本身信息量就很大，連續3-5屏都是很複雜的場景會給人感覺很有壓迫感，有簡有繁的整體感覺才更舒服，也更有層次感！

4. 最後總結 

在詳情頁設計中，很多設計師會認為產品參數就是文字信息，沒什麼好做的，從而導致作品整體虎頭蛇尾。這就跟你追了很久的電視劇一樣，前麵都很好，但是結局草草了事，顧頭不顧尾，你是不是會有打編劇的衝動。

我相信很多人並不是做不好參數模塊，隻是沒有在意過，甚至在看優秀案例時，也很少會重點看一下別人這個模塊是如何銜接整體和表現的。

所以，在做這種整體性很強的作品時，盡量要做到麵麵俱到，往往細節才是決定一個作品高度的重要標尺，容易被忽略的並不代表不重要！

注意：參數最重要的還是信息，一切設計手法都要建立在能有效傳達信息的基礎之上，根據作品實際情況，選擇合適的表現形式。

作者：老張
來源：美工美邦