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

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

詳細(xì)的設(shè)計(jì)分子如下：

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

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

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

1. 科技類圖形配圖

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

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

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

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

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

了解產(chǎn)品

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

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

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

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

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

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

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

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

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

入駐.操作.合作的流程

入駐操作合作的流程是引導(dǎo)用戶加入我們的重要環(huán)節(jié)，如何引導(dǎ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)品特色，這樣才能更好的打動用戶。

2. 圖片說明的展示手法

圖片類的說明展示需要把產(chǎn)品具有代表性的應(yī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)，讓用戶對于產(chǎn)品本身的操作、展示、入駐等流程清晰直觀的了解。吸引用戶關(guān)注和使用我們的產(chǎn)品，提示產(chǎn)品引導(dǎo)效率。

合作伙伴

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

1. 平鋪

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

2. 滾動展示

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

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

效率更快，這是因?yàn)槿四X對視覺信息的處理要比書面信息容易得多。使用數(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ī)會，方便用戶使用我們的功能，提示用戶體驗(yàn)，屬于一種比較層級高的聯(lián)系我們?nèi)肟谠O(shè)計(jì)。

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

內(nèi)置的卡片設(shè)計(jì)相對于浮窗入口層級低了一點(diǎn)，但是設(shè)計(jì)引導(dǎo)固定也是一種不錯(cuò)的聯(lián)系我們設(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)品展示中相對通用的設(shè)計(jì)分子，當(dāng)然根據(jù)不同的產(chǎn)品業(yè)務(wù)，也會有其他的設(shè)計(jì)分子，希望大家一起來探索！以上就是我對于官網(wǎng)的商家產(chǎn)品展示頁面的歸納和總結(jié)，不全面的地方，大家可以多多討論交流。謝謝大家！

本文圖片來源于網(wǎng)絡(luò)截圖。

歡迎關(guān)注作者微信公眾號：「阿韓設(shè)計(jì)」