編輯導(dǎo)讀：對(duì)于一些TO B企業(yè)來說，如何吸引商家入駐很大程度上要靠平臺(tái)展示頁。既要有吸引商家入駐的權(quán)益，又要富有設(shè)計(jì)感，這就很考驗(yàn)設(shè)計(jì)師的功底。本文作者將從自身工作經(jīng)驗(yàn)出發(fā)，談?wù)勅绾卧O(shè)計(jì)網(wǎng)頁的商家產(chǎn)品展示頁，希望對(duì)你有幫助。

網(wǎng)頁商家產(chǎn)品展示頁面是每個(gè)平臺(tái)展示產(chǎn)品第一步不可或缺的頁面，而這個(gè)頁面的設(shè)計(jì)師觸發(fā)商家用戶入駐的一個(gè)重要的設(shè)計(jì)觸點(diǎn)，是我們?cè)谏碳胰腭v鏈路的重要一環(huán)節(jié)，到底如何來設(shè)計(jì)我們網(wǎng)頁的商家產(chǎn)品展示頁面呢！今天給大家看看我的總結(jié)。

今天我們就來具體的聊一聊，按照以下的順序來進(jìn)行詳細(xì)介紹吧！詳細(xì)的設(shè)計(jì)分子如下：

1. 頭部設(shè)計(jì)
2. 了解產(chǎn)品
3. 入駐、操作、合作的流程
4. 合作伙伴
5. 數(shù)據(jù)可視化展示
6. 聯(lián)系我們

一、頭部設(shè)計(jì)

頭部位置設(shè)計(jì)主要包含banner位和占位圖，設(shè)計(jì)表現(xiàn)形式主要分為科技類圖形配圖、產(chǎn)品品牌相關(guān)配圖、產(chǎn)品相關(guān)視頻。

1. 科技類圖形配圖

科技感類的圖形配圖，會(huì)讓平臺(tái)充滿逼格和簡(jiǎn)潔風(fēng)，主要適用于科技類的公司產(chǎn)品。

2. 產(chǎn)品品牌相關(guān)配圖

產(chǎn)品品牌相關(guān)的配圖，對(duì)于用戶有著更加直觀的感受相對(duì)于圖形而言，同時(shí)切合品牌基因，能更好的宣傳產(chǎn)品本身，吸引用戶選擇我們的產(chǎn)品。

3. 產(chǎn)品相關(guān)視頻動(dòng)畫

頭部增加產(chǎn)品相關(guān)宣傳視頻是當(dāng)下比較潮流的設(shè)計(jì)方式，同時(shí)視頻的傳播和引導(dǎo)力度也是大于圖形和圖片單一的表現(xiàn)手法。

二、了解產(chǎn)品

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

1. 左右布局的大卡片設(shè)計(jì)

大卡片設(shè)計(jì)的大圖設(shè)計(jì)比較高級(jí)，在畫面效果上非常簡(jiǎn)潔，能夠比較直接的吸引到用戶。當(dāng)然有一些缺失是內(nèi)容填充不夠，信息傳達(dá)量少，所以有時(shí)候設(shè)計(jì)師會(huì)增加文本的信息量起到相對(duì)互補(bǔ)的作用。

2. 宮格設(shè)計(jì)

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

3. 背景圖覆蓋設(shè)計(jì)

全部背景圖覆蓋的設(shè)計(jì)比較有沉浸感，在網(wǎng)頁設(shè)計(jì)上，可以增加品牌元素和特色覆蓋到底圖上，提示設(shè)計(jì)質(zhì)感。

4. 視頻簡(jiǎn)介設(shè)計(jì)

?產(chǎn)品相關(guān)簡(jiǎn)介視頻是當(dāng)下比較潮流的設(shè)計(jì)方式，同時(shí)視頻的傳播和引導(dǎo)力度也是大于圖形和圖片單一的表現(xiàn)手法。????

三、入駐、操作、合作的流程

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

1. 圖形說明的展示手法

圖形說明的展示手法，主要是概括產(chǎn)品品牌特色，作為圖形具象化的展示給用戶，所以這個(gè)部分設(shè)計(jì)重點(diǎn)是需要更好的融入品牌基因和產(chǎn)品特色，這樣才能更好的打動(dòng)用戶。

2. 圖片說明的展示手法

圖片類的說明展示需要吧產(chǎn)品具有代表性的應(yīng)用場(chǎng)景拍攝出來，展示給用戶，傳播和引導(dǎo)效果比圖形好一點(diǎn)。痛點(diǎn)是需要我們選取高清有代表性的圖片來應(yīng)用設(shè)計(jì)。

3. 產(chǎn)品截圖類展示手法

產(chǎn)品截圖類展示手法，更加真實(shí)的展示給用戶產(chǎn)品具體的操作點(diǎn)，減輕用戶學(xué)習(xí)成本，提升用戶體驗(yàn)。是一個(gè)不錯(cuò)的設(shè)計(jì)手法。

4. 流程圖展示

流程圖展示設(shè)計(jì)主要是重點(diǎn)突出流程架構(gòu)，讓用戶對(duì)于產(chǎn)品本身的操作、展示、入駐等流程清晰直觀的了解。吸引用戶關(guān)注和使用我們的產(chǎn)品，提示產(chǎn)品引導(dǎo)效率。

五、合作伙伴

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

1. 平鋪

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

2. 滾動(dòng)展示

滾動(dòng)展示主要是可以引導(dǎo)用戶焦點(diǎn)，提升交互體驗(yàn)，而且頁面利用率高；不足是信息展示量不足。

六、數(shù)據(jù)可視化設(shè)計(jì)

效率更快，這是因?yàn)槿四X對(duì)視覺信息的處理要比書面信息容易得多。使用數(shù)據(jù)來總結(jié)復(fù)雜的數(shù)據(jù)。數(shù)據(jù)可視化是一種非常清晰的溝通方式，使用戶能夠更快地理解和處理他們的信息，提升用戶體驗(yàn)。

七、聯(lián)系我們

聯(lián)系我們主要是給予用戶聯(lián)系溝通的入口，設(shè)計(jì)方式可以主要分為浮窗設(shè)計(jì)，卡片設(shè)計(jì)，功能入口按鈕內(nèi)置等等。

1. 浮窗設(shè)計(jì)

浮窗設(shè)計(jì)的聯(lián)系我們主要是可以全頁面固定展示，給予用戶更多聯(lián)系我們的入口機(jī)會(huì)，方便用戶使用我們的功能，提示用戶體驗(yàn)，屬于一種比較層級(jí)高的聯(lián)系我們?nèi)肟谠O(shè)計(jì)。

2. 卡片設(shè)計(jì)

內(nèi)置的卡片設(shè)計(jì)相對(duì)于浮窗入口層級(jí)低了一點(diǎn)，但是設(shè)計(jì)引導(dǎo)固定也是一種不錯(cuò)的聯(lián)系我們?cè)O(shè)計(jì)手法。

3. 功能入口按鈕內(nèi)置

每一步的引導(dǎo)設(shè)計(jì)都放入聯(lián)系我們的功能入口按鈕，操作更加便捷，引導(dǎo)更加有效。

八、總結(jié)

在我看來，今天的這幾個(gè)設(shè)計(jì)分子-頭部設(shè)計(jì)、了解產(chǎn)品、入駐操作合作流程、合作伙伴、數(shù)據(jù)可視化展示、聯(lián)系我們等是我們商家產(chǎn)品展示中相對(duì)通用的設(shè)計(jì)分子，當(dāng)然根據(jù)不同的產(chǎn)品業(yè)務(wù)，也會(huì)有其他的設(shè)計(jì)分子，希望大家一起來探索！

以上就是我對(duì)于官網(wǎng)的商家產(chǎn)品展示頁面的歸納和總結(jié)，不全面的地方，大家可以多多討論交流。謝謝大家！

本文由 @阿韓設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議