商家產品展示頁面是每個平臺展示產品不可或缺的頁面，而這個頁面的設計師是觸發(fā)商家用戶入駐的一個重要的設計觸點，是我們在商家入駐鏈路的重要一環(huán)節(jié)，到底如何來設計我們網頁的商家產品展示頁面？今天給大家看看我的總結。

今天我們就來具體的聊一聊，按照以下的順序來進行詳細介紹吧！

詳細的設計分子如下：

• 頭部設計
• 了解產品
• 入駐.操作.合作的流程
• 合作伙伴
• 數據可視化展示
• 聯系我們

頭部設計

頭部位置設計主要包含banner位和占位圖，設計表現形式主要分為科技類圖形配圖、產品品牌相關配圖、產品相關視頻。

1. 科技類圖形配圖

科技感類的圖形配圖，會讓平臺充滿逼格和簡潔風，主要適用于科技類的公司產品。

2. 產品品牌相關配圖

產品品牌相關的配圖，對于用戶有著更加直觀的感受相對于圖形而言，同時切合品牌基因，能更好的宣傳產品本身，吸引用戶選擇我們的產品。

3. 產品相關視頻動畫

頭部增加產品相關宣傳視頻是當下比較潮流的設計方式，同時視頻的傳播和引導力度也是大于圖形和圖片單一的表現手法。

了解產品

了解產品的設計分子主要是展示產品總的概述，比如產品簡介設計配圖、產品功能點設計配圖、產品優(yōu)勢配圖等等，在設計上主要分為左右布局的大卡片設、宮格設計、背景圖覆蓋設計、以及視頻的設計等等。

1. 左右布局的大卡片設計

大卡片設計的大圖設計比較高級，在畫面效果上非常簡潔，能夠比較直接的吸引到用戶。當然有一些缺失是內容填充不夠，信息傳達量少，所以有時候設計師會增加文本的信息量起到相對互補的作用。

2. 宮格設計

宮格布局設計，清晰展示產品功能特色介紹，清晰明確，在相對有限的布局下，容納更多信息展示。缺點不能展示太多的點擊入口，信息文本也不能添加太多，容易造成層級更深的情況出現。

3. 背景圖覆蓋設計

全部背景圖覆蓋的設計比較有沉浸感，在網頁設計上，可以增加品牌元素和特色覆蓋到底圖上，提示設計質感。

4. 視頻簡介設計

產品相關簡介視頻是當下比較潮流的設計方式，同時視頻的傳播和引導力度也是大于圖形和圖片單一的表現手法。

入駐.操作.合作的流程

入駐操作合作的流程是引導用戶加入我們的重要環(huán)節(jié)，如何引導用戶入駐操作合作等是我們設計的重點，主要的設計手法我總結了幾個方面，主要是圖形說明的展示手法、圖片說明展示手法、產品截圖類展示手法、流程圖展示等等。當然還有很多，沒有全部說明，希望設計小伙伴們一起來補充吧！

1. 圖形說明的展示手法

圖形說明的展示手法，主要是概括產品品牌特色，作為圖形具象化的展示給用戶，所以這個部分設計重點是需要更好的融入品牌基因和產品特色，這樣才能更好的打動用戶。

2. 圖片說明的展示手法

圖片類的說明展示需要把產品具有代表性的應用場景拍攝出來，展示給用戶，傳播和引導效果比圖形好一點。痛點是需要我們選取高清有代表性的圖片來應用設計。

3. 產品截圖類展示手法

產品截圖類展示手法，更加真實的展示給用戶產品具體的操作點，減輕用戶學習成本，提升用戶體驗。是一個不錯的設計手法。

4. 流程圖展示

流程圖展示設計主要是重點突出流程架構，讓用戶對于產品本身的操作、展示、入駐等流程清晰直觀的了解。吸引用戶關注和使用我們的產品，提示產品引導效率。

合作伙伴

合作伙伴主要是資源共享，優(yōu)勢互補，合作伙伴設計需要展示給用戶公司的實力，宣傳我們的品牌內在力量。在設計上一般會選擇平鋪和滾動展示等等。

1. 平鋪

平鋪的設計手法主要是可以全面的展示給用戶我們的合作伙伴，更加直觀和效率。

2. 滾動展示

滾動展示主要是可以引導用戶焦點，提升交互體驗，而且頁面利用率高；不足是信息展示量不足。

數據可視化設計

效率更快，這是因為人腦對視覺信息的處理要比書面信息容易得多。使用數據來總結復雜的數據。數據可視化是一種非常清晰的溝通方式，使用戶能夠更快地理解和處理他們的信息，提升用戶體驗。

聯系我們

聯系我們主要是給予用戶聯系溝通的入口，設計方式可以主要分為浮窗設計，卡片設計，功能入口按鈕內置等等。

1. 浮窗設計

浮窗設計的聯系我們主要是可以全頁面固定展示，給予用戶更多聯系我們的入口機會，方便用戶使用我們的功能，提示用戶體驗，屬于一種比較層級高的聯系我們入口設計。

2. 卡片設計

內置的卡片設計相對于浮窗入口層級低了一點，但是設計引導固定也是一種不錯的聯系我們設計手法。

3. 功能入口按鈕內置

每一步的引導設計都放入聯系我們的功能入口按鈕，操作更加便捷，引導更加有效。

總結

在我看來，今天的這幾個設計分子-頭部設計、了解產品、入駐操作合作流程、合作伙伴、數據可視化展示、聯系我們等是我們商家產品展示中相對通用的設計分子，當然根據不同的產品業(yè)務，也會有其他的設計分子，希望大家一起來探索！以上就是我對于官網的商家產品展示頁面的歸納和總結，不全面的地方，大家可以多多討論交流。謝謝大家！

本文圖片來源于網絡截圖。

歡迎關注作者微信公眾號：「阿韓設計」