詳情頁(yè)參數(shù)做不出彩？掌握這些形式馬上就不一樣了

小雨又來(lái)襲TSG 2021-03-28

展開全文

在電商詳情頁(yè)設(shè)計(jì)中

我們絕大多數(shù)的人都會(huì)在首屏下足功夫

因?yàn)樗兄脩糸喿x

提升轉(zhuǎn)化的重要作用

所以理所應(yīng)當(dāng)要花心思在上面

一張完整的詳情頁(yè)，按照現(xiàn)在分屏式的設(shè)計(jì)，大概也都會(huì)在10屏左右，從第一屏到最后一屏，對(duì)于詳情頁(yè)整體呈現(xiàn)效果來(lái)說(shuō)都非常重要。

但是在現(xiàn)實(shí)工作中，很多設(shè)計(jì)師喜歡過(guò)分強(qiáng)調(diào)首焦圖（第一屏），而忽略了其他部分，尤其是產(chǎn)品參數(shù)。

因?yàn)榇蟛糠诌@個(gè)模塊是詳情頁(yè)的結(jié)尾部分了，越是到最后越是容易忽略細(xì)節(jié)，做的粗糙，使得詳情頁(yè)前后視覺(jué)感受差異過(guò)大，虎頭蛇尾。

所謂細(xì)節(jié)決定成敗，尤其是這種偏整體性的設(shè)計(jì)作品，更要注重視覺(jué)、細(xì)節(jié)的連貫性。

所以今天就著重說(shuō)一下詳情頁(yè)中最容易被忽略的產(chǎn)品參數(shù)模塊，如何做更出彩？

產(chǎn)品參數(shù)，顧名思義就是產(chǎn)品的詳細(xì)信息，比如：尺寸、材質(zhì)、顏色等等，多以文字信息為主，下面我們以展示形式的不同進(jìn)行分類。

1. 純文字形式

這也是最常見的一種表現(xiàn)形式，把產(chǎn)品的具體參數(shù)直接以文字的形式展示，但即便是簡(jiǎn)單的文字信息，也并不是說(shuō)所有人都能做的很好：

這是一位讀者讓我看的詳情頁(yè)中產(chǎn)品參數(shù)的模塊，盡管都是文字信息，但顯然這個(gè)模塊做的差強(qiáng)人意，有些粗糙了。

雖然主次信息做的還不錯(cuò)，但是導(dǎo)致視覺(jué)亂的最直接原因：標(biāo)題與說(shuō)明性文字是居中對(duì)齊的形式，但說(shuō)明性文字內(nèi)部又是左對(duì)齊的形式，所以整體留白和對(duì)齊都很不規(guī)則，導(dǎo)致視覺(jué)感受是亂的。

下面是我為大家找的純文字形式的產(chǎn)品參數(shù)案例，一起來(lái)看看：

其實(shí)純文字的產(chǎn)品參數(shù)，只要做好主次關(guān)系、對(duì)齊和留白，就不會(huì)感覺(jué)差，如上面案例的表現(xiàn)形式，在平時(shí)工作中用的也很多。

還可以繼續(xù)優(yōu)化和提升，但是做好純文字形式的產(chǎn)品參數(shù)是繼續(xù)優(yōu)化的前提，如果在上圖基礎(chǔ)之上加點(diǎn)光影效果，會(huì)使得這個(gè)模塊視覺(jué)感受更加豐富：

在我之前關(guān)于詳情頁(yè)制作相關(guān)的文章中就說(shuō)過(guò)，這種有光來(lái)的效果很早在詳情頁(yè)設(shè)計(jì)中很實(shí)用，即便是簡(jiǎn)單的文字排版，加上光影效果之后也會(huì)給人眼前一亮的感覺(jué)。

做設(shè)計(jì)最重要的是發(fā)散思維，多思考，先大膽的想，再考慮細(xì)節(jié)。

在純文字的基礎(chǔ)上我再加點(diǎn)類似卷紙、書本、或者夾板的展示效果會(huì)不會(huì)也會(huì)很出彩？下面看幾個(gè)案例：

即使都是文字信息，視覺(jué)呈現(xiàn)效果也是天差地別，優(yōu)秀的設(shè)計(jì)師不會(huì)放過(guò)任何一個(gè)模塊的細(xì)節(jié)。

2. 結(jié)合產(chǎn)品圖

制作產(chǎn)品詳情頁(yè)的目的是有兩個(gè)：讓用戶更深入的了解產(chǎn)品和促進(jìn)買成，所以很多時(shí)候?yàn)榱俗尞a(chǎn)品參數(shù)信息更直觀，往往會(huì)將文字與產(chǎn)品相互結(jié)合，在一定程度上也能增加關(guān)聯(lián)性。

這種數(shù)據(jù)與產(chǎn)品相互結(jié)合的形式，為了更直觀將一些常用數(shù)據(jù)，比如：產(chǎn)品的長(zhǎng)、寬、高等，通過(guò)線條標(biāo)注的形式體現(xiàn)在產(chǎn)品圖上。

下面看看幾個(gè)類似的案例：

如上圖案例所示，產(chǎn)品與參數(shù)相互結(jié)合，使得冷冰冰的文字信息變得有溫度、真實(shí)。

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

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

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

同時(shí)也可以在此基礎(chǔ)之上做一些展示效果，讓整體視覺(jué)效果更加豐富，比如：

所以說(shuō)，做設(shè)計(jì)一定要把思維打開，不要故步自封。

3. 場(chǎng)景圖表現(xiàn)法

這種在工作中用的也很多，簡(jiǎn)單的理解就是將產(chǎn)品場(chǎng)景圖與參數(shù)信息相互結(jié)合，使得整個(gè)模塊更有代入感，下面看幾個(gè)例子：

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

這類產(chǎn)品參數(shù)表現(xiàn)形式，畫面感很豐富，也很有代入感。

那么該有人問(wèn)了，前面三類表現(xiàn)形式在工作中如何選擇使用呢？

如果產(chǎn)品參數(shù)模塊前兩屏都是復(fù)雜的場(chǎng)景或者海報(bào)時(shí)，盡量使用純文字或者產(chǎn)品結(jié)合文字的表現(xiàn)形式，因?yàn)閰?shù)本身信息量就很大，連續(xù)3-5屏都是很復(fù)雜的場(chǎng)景會(huì)給人感覺(jué)很有壓迫感，有簡(jiǎn)有繁的整體感覺(jué)才更舒服，也更有層次感！

4. 最后總結(jié)

在詳情頁(yè)設(shè)計(jì)中，很多設(shè)計(jì)師會(huì)認(rèn)為產(chǎn)品參數(shù)就是文字信息，沒(méi)什么好做的，從而導(dǎo)致作品整體虎頭蛇尾。這就跟你追了很久的電視劇一樣，前面都很好，但是結(jié)局草草了事，顧頭不顧尾，你是不是會(huì)有打編劇的沖動(dòng)。

我相信很多人并不是做不好參數(shù)模塊，只是沒(méi)有在意過(guò)，甚至在看優(yōu)秀案例時(shí)，也很少會(huì)重點(diǎn)看一下別人這個(gè)模塊是如何銜接整體和表現(xiàn)的。

所以，在做這種整體性很強(qiáng)的作品時(shí)，盡量要做到面面俱到，往往細(xì)節(jié)才是決定一個(gè)作品高度的重要標(biāo)尺，容易被忽略的并不代表不重要！

注意：參數(shù)最重要的還是信息，一切設(shè)計(jì)手法都要建立在能有效傳達(dá)信息的基礎(chǔ)之上，根據(jù)作品實(shí)際情況，選擇合適的表現(xiàn)形式。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：小雨又來(lái)襲TSG > 《版式色彩》

舉報(bào)/認(rèn)領(lǐng)