網(wǎng)站建設中該如何設計詳情頁(yè)更顯高大上發(fā)布者：本站     時(shí)間：2021-02-22 13:02:08

從事電商網(wǎng)站建設方面的設計師，詳情頁(yè)設計可以說(shuō)是必修課。好的詳情頁(yè)會(huì )給帶給用戶(hù)更流暢的視覺(jué)體驗、更直觀(guān)的產(chǎn)品信息、亮點(diǎn)等等，也有助于提升交易的達成率。正是如此，所以很多商家不惜重金請設計師為其打造爆款產(chǎn)品的詳情頁(yè)，由此可見(jiàn)詳情頁(yè)在電商設計中的重要程度。本期和大家一起分析總結：如何把詳情頁(yè)做得足夠出彩，詳情頁(yè)做不好需要從哪些方面進(jìn)行提升？

構圖形式
目前被認可的一種詳情頁(yè)設計形式是分屏式，就是按照手機端設計思維，以一屏為單位制作，最后整合成一個(gè)完整的詳情頁(yè)，這種形式有助于提升視覺(jué)流暢度及內容識別度，所以我們可以將每一屏都當作一張海報來(lái)制作。而說(shuō)到海報，就離不開(kāi)設計構圖。

詳情頁(yè)的構圖與傳統的 PC 端海報有所不同，因為詳情頁(yè)設計更注重手機端，所以一屏的內容又可以看做是手機端豎向的海報。而一幅出彩的海報，必然需要優(yōu)質(zhì)的骨架。

那么常見(jiàn)豎向海報構圖形式有哪些？下面為大家總結了幾種在詳情頁(yè)設計中比較實(shí)用的構圖形式：

詳情頁(yè)設計不夠出彩，該如何提升？

如圖所示，這三種構圖形式看似簡(jiǎn)單，實(shí)則兼顧了手機端的很多必要點(diǎn)，比如：視覺(jué)的流暢度、整潔度、辨識度、用戶(hù)的接受度等等，詳情頁(yè)設計在構圖及版式方面并不需要很復雜，反而干凈整齊的畫(huà)面更易于視覺(jué)表達，也更利于手機端展示。

這三種構圖形式在詳情頁(yè)中使用頻率是非常高的，下面我們看幾組案例：

詳情頁(yè)設計不夠出彩，該如何提升？

看似簡(jiǎn)單的構圖，反而在詳情頁(yè)設計中非常實(shí)用，僅靠這三種構圖，完全可以做出很優(yōu)秀的詳情頁(yè)。另外還有一些從這三類(lèi)衍生的構圖形式，也比較常用：

詳情頁(yè)設計不夠出彩，該如何提升？

文案在配圖下半部分的這類(lèi)構圖相比而言用的少一些、也難把控一些，當然用的好了在版式上會(huì )有打破、眼前一亮的視覺(jué)感受，只是這類(lèi)構圖不宜多用，完整的詳情頁(yè)中出現 1-2 次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：

詳情頁(yè)設計不夠出彩，該如何提升？

詳情頁(yè)的構圖不宜太復雜，這六種構圖形式完全夠日常工作，只需選取其中 1-3 種構圖形式交替使用即可。以上構圖示例中標識的裝飾元素可以是線(xiàn)條、英文、圖標、數字、實(shí)物素材等等，也可以選擇不使用，具體情況根據配圖的留白以及重心靈活使用即可。

所以，詳情頁(yè)中每一屏的構圖并不難，完全可以把這六種構圖形式當做公式，需要哪種直接套用其結構就可以（結構類(lèi)似即可，并非要求1:1）。另外配圖形式可以分為三種：全屏、半屏、透明圖，具體的構圖形式需要結合畫(huà)面整體的重心、留白、美觀(guān)度決定。更通俗一些的話(huà)，構圖就可以理解為填空，內容就往空的地方填，注意好適量的留白。

當透明圖作為配圖時(shí)，不管哪種構圖形式都有可能出現空的現象，這時(shí)我們可以用一些具有裝飾性的數字、英文、線(xiàn)條、形狀、文字等等進(jìn)行填充。舉例說(shuō)明：

詳情頁(yè)設計不夠出彩，該如何提升？

詳情頁(yè)設計不夠出彩，該如何提升？

案例中的文字、數字與產(chǎn)品相互結合，既解決了空的問(wèn)題、提升了整體的飽滿(mǎn)度，又在形式上做到的新穎、有創(chuàng )意。構圖形式與前面所說(shuō)的皆能吻合。

合理的設計素材
說(shuō)到設計素材，浮在腦海中的可能會(huì )很多種，而這次要說(shuō)的主要是三類(lèi)，即：手勢、植物、肌理（在花瓣搜索關(guān)鍵詞「手勢」「植物」「材質(zhì)」「肌理」就能找到對應素材），這三類(lèi)素材在詳情頁(yè)設計中出現的頻率也是很高的，如果運用得當會(huì )將詳情頁(yè)的出彩度提升一個(gè)檔次，而且對于視覺(jué)表達也會(huì )更加生動(dòng)、形象、富有說(shuō)服力。

1. 手勢素材

顧名思義，就是各種各樣關(guān)于手方面的動(dòng)作，比如：拿、托、指等等。

詳情頁(yè)設計不夠出彩，該如何提升？

這些手勢在很多詳情頁(yè)中都會(huì )出現，接下來(lái)我們不妨思考這么一個(gè)問(wèn)題：為什么要用這些手勢，只是單純的好看嗎？

其實(shí)不然，在視覺(jué)上，這些手勢使得畫(huà)面更加生動(dòng)、有立體感、有層次感，讓作品更飽滿(mǎn)、更出彩。而對于用戶(hù)而言，更加深刻地體會(huì )到產(chǎn)品是有溫度的、可操作的、更真實(shí)、更容易理解，所以對于交易的達成以及加深用戶(hù)對產(chǎn)品的了解也更具說(shuō)服力。

影響詳情頁(yè)轉化率的因素有很多種，視覺(jué)表達能否真正抓住用戶(hù)心理也是很關(guān)鍵的一點(diǎn)。

2. 植物素材

這類(lèi)素材相信大家都不陌生，在很多頁(yè)面以及詳情頁(yè)出現的頻率都很高，而且裝飾性很強，寓意也很寬泛，比如：自然、清新、貼合現實(shí)、有生機等等。

詳情頁(yè)設計不夠出彩，該如何提升？

如圖所示，這里的植物都能與畫(huà)面主體形成很好的遮擋關(guān)系，在視覺(jué)層面顯得更有層次感、畫(huà)面也更飽滿(mǎn)。而且植物的運用并不是隨便使用的，而是與海報氛圍、文案都緊密相關(guān)，形成了很好的呼應、裝飾作用。

我們常用的植物元素可以是清晰的，也可以模糊處理，只要與畫(huà)面整體氣質(zhì)相符，可以根據實(shí)際情況靈活使用。

3. 肌理素材

關(guān)于材質(zhì)、肌理的妙用在前面很多文章中都有提到過(guò)，這里簡(jiǎn)單地說(shuō)一下，肌理素材對于提升作品細節感、層次感、出彩度以及飽滿(mǎn)度都有很大的幫助，如果作品碰到上述問(wèn)題，不妨用肌理素材試試。

抽象名詞具體化
單看標題可能很多人不太明白，什么叫做抽象名詞具體化？其實(shí)簡(jiǎn)單理解就是：將一些比較抽象的名詞通過(guò)設計手法表現出來(lái)，比如風(fēng)、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶(hù)體驗、加快用戶(hù)理解，而且在視覺(jué)上能生動(dòng)形象的將抽象化名詞表現出來(lái)，對于視覺(jué)出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺(jué)傳達的時(shí)效性。