全尺寸鍵盤

大膽的配色、出色的材質應用，結合抽象創(chuàng)意化的圖形、形狀，雖然沒有太復雜的設計技法，但在風格上給人眼前一亮的感受，質感十足。

雞肉沙拉醬三明治

一款生動有趣的詳情頁，結合卡通形象，故事和創(chuàng)意都很強，唯一不好的就是稍微有點短，沒看夠

HYUNDAI暖飲機

將暖飲機做出了潮牌的感覺，構圖形式比較特殊，幾處小橫幅的使用讓整體在詳情頁設計中顯得很有新意，打破了常規(guī)電器類詳情頁的風格表現(xiàn)。

貴賓成犬專用糧

夸張的視覺表現(xiàn)力，使得整體生動有趣，張力十足，結合人物形象，也讓整體更有親和力，很有創(chuàng)意。

本期搜集的四款詳情頁，從視覺表現(xiàn)角度來說都比較新穎，眼前一亮。打破了我們的對詳情頁的常規(guī)認知。

在設計工作中，一直以來風格差異化也是創(chuàng)意形式的一種，在滿足正常需求的前提下，區(qū)別于同類競品，也許就能脫穎而出。

做設計最重要的就是大膽的發(fā)散思維，別人都這么做，為什么我不可以嘗試一下其他風格呢？

原文地址：美工美邦（公眾號）

作者：美工美邦

我們絕大多數的人都會在首屏下足功夫

因為它有著吸引用戶閱讀

提升轉化的重要作用

所以理所應當要花心思在上面

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

但是在現(xiàn)實工作中，很多設計師喜歡過分強調首焦圖（第一屏），而忽略了其他部分，尤其是產品參數。

因為大部分這個模塊是詳情頁的結尾部分了，越是到最后越是容易忽略細節(jié)，做的粗糙，使得詳情頁前后視覺感受差異過大，虎頭蛇尾。

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

所以今天就著重說一下詳情頁中最容易被忽略的產品參數模塊，如何做更出彩？

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

1. 純文字形式 

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

這是一位讀者讓我看的詳情頁中產品參數的模塊，盡管都是文字信息，但顯然這個模塊做的差強人意，有些粗糙了。

雖然主次信息做的還不錯，但是導致視覺亂的最直接原因：標題與說明性文字是居中對齊的形式，但說明性文字內部又是左對齊的形式，所以整體留白和對齊都很不規(guī)則，導致視覺感受是亂的。

下面是我為大家找的純文字形式的產品參數案例，一起來看看：

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

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

在我之前關于詳情頁制作相關的文章中就說過，這種有光來的效果很早在詳情頁設計中很實用，即便是簡單的文字排版，加上光影效果之后也會給人眼前一亮的感覺。

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

在純文字的基礎上我再加點類似卷紙、書本、或者夾板的展示效果會不會也會很出彩？下面看幾個案例：

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

2. 結合產品圖 
 

制作產品詳情頁的目的是有兩個：讓用戶更深入的了解產品和促進買成，所以很多時候為了讓產品參數信息更直觀，往往會將文字與產品相互結合，在一定程度上也能增加關聯(lián)性。
 

這種數據與產品相互結合的形式，為了更直觀將一些常用數據，比如：產品的長、寬、高等，通過線條標注的形式體現(xiàn)在產品圖上。
 

下面看看幾個類似的案例：

如上圖案例所示，產品與參數相互結合，使得冷冰冰的文字信息變得有溫度、真實。

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

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

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

同時也可以在此基礎之上做一些展示效果，讓整體視覺效果更加豐富，比如：

所以說，做設計一定要把思維打開，不要故步自封。
 

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

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

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

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

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

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

4. 最后總結 

在詳情頁設計中，很多設計師會認為產品參數就是文字信息，沒什么好做的，從而導致作品整體虎頭蛇尾。這就跟你追了很久的電視劇一樣，前面都很好，但是結局草草了事，顧頭不顧尾，你是不是會有打編劇的沖動。

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

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

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

作者：老張

來源：美工美邦

在電商設計工作中，詳情頁的設計一直都是衡量電商設計師能力的重要指標，正是因為它的重要程度，所以也就成了困擾很多設計師的難題。

目前詳情頁基本上都采用了分屏式的設計，目的為了提升視覺流暢度以及減少閱讀障礙。這種方式就將詳情頁設計轉變?yōu)榫哂薪M合效應的單屏海報設計。所以做好每一屏海報就成了最終需要解決的問題。那么有哪些實用的詳情頁設計技巧，可助我們一臂之力？

在寫這篇文章之前，我翻閱了很多比較不錯的詳情頁首焦設計，發(fā)現(xiàn)這么多不同產品和類目的詳情頁，在設計手法上竟有很多相似之處！

不信你來看！

上面是我在翻閱的過程中隨機篩選的12張詳情頁首焦，從視覺角度來看，每張首焦都給人一種干凈舒服的感受，元素雖然不多，但卻一點也不單調、層次感很強。
從實現(xiàn)難度來看，沒有很復雜的設計手法讓你望而卻步，整體來看實現(xiàn)起來都不算難，明白原理之后，只需多加練習就可以。

那么該有同學問了：

為什么我看完之后還是不會？

這時候，再回過頭看上面的12張首焦，著重觀察每張圖的明暗關系，光影變化！

哇！很豐富

所以說，簡單的場景一樣可以做出很有層次感的首焦海報，場景的復雜與否和最終的視覺效果沒有直接關系。通過設計手法表現(xiàn)出場景元素間的明暗變化在詳情頁設計中用到的非常多。

簡而言之就是：營造明暗變化。

什么是光就不解釋了，生活中隨處可見：燈光、日光、月光……并且物理老師也告訴我們：同種均勻介質中，光是沿直線傳播的！

無論是在設計，還是現(xiàn)實生活中，我們通常會把光與影放在一起說，即光影，兩者密不可分，有光就要有影，有明就要有暗。

只是體現(xiàn)光影、明暗關系，就足以讓設計作品變得豐富、有層次感，比如現(xiàn)實生活中的汽車：

在詳情頁設計中，光影并不是越復雜越好，反而越實用的越簡單。

注意：在詳情頁設計中，一般情況下不會用到直觀的光源，大多都是擬定光源位置，一但光源位置確定，畫面中的所有元素（包括背景）都要遵循：靠近光源的位置亮，遠離光源的位置暗。

那么如果光源位置確定，應該在背景上如何體現(xiàn)？

上圖所示就是擬定光源位置后，背景明暗關系對照圖，其實做起來很簡單，就是通過漸變疊加實現(xiàn)的，相比純色底，這種漸變的背景是不是更實用？

在詳情頁設計中，一些有模特的場景圖，大部分都使用漸變的背景，下面看兩個案例：

漸變的背景增加了整體的層次感，模擬了一個設計上的環(huán)境感，而且模特的形象因此也更加立體，作品整體也不顯單調。

產品特寫或者局部放大時，漸變背景用到的也很多！

一、產品即是場景

詳情頁設計，核心還是產品，很多時候產品素材本身通過修圖，明暗變化就很強，這時就可以完全依靠產品素材，做好背景處理及文字排版就可以了，下面看幾個案例：

看似案例很簡單，實則很考驗設計功底，漸變的背景用的恰到好處，模擬了一種有光源的視覺變化，從而提升了畫面整體的視覺層次感。簡潔大氣的作品也更易于大眾接受。

下面我們看個實操案例：

最終成品

如上圖案例所示，依靠產品自身豐富的明暗變化，利用簡單的構圖形式，一張詳情頁首焦輕松完成。

但這種形式受產品自身影響，有一定局限性，并不是所有的產品都適用。接下來我們繼續(xù)！
 

二、搭建小場景

搭建小場景在詳情頁設計中也是非常實用的，為什么要說小場景呢？小不是代表體積小，而是場景要簡約，無需特別復雜，簡約并不意味著簡單，重點是要有層次感、把控好整體的明暗變化和光影。

還是不太懂？

下面看一個最基礎的小場景搭建：

上圖案例是不是給你的感覺很簡單，除掉產品和文案，幾乎沒有任何多余的元素裝飾，那么有個問題：

為什么一點也不單調呢？

剖析一下：

看似簡單的場景，對設計功底的考驗一點也不少，小場景設計中，如何體現(xiàn)光影是非常重要的。

說完基礎的小場景，我們繼續(xù)往下延伸。很多產品的詳情頁設計都用到了更真實的使用或者擺放場景，目的是讓用戶更加直觀的了解產品，視覺上更有代入感。

在偏真實的小場景設計中，對于光的表現(xiàn)還可以再豐富，比如現(xiàn)實生活中的窗戶格、植物、陽光等等，都是對光的一種加強體現(xiàn)，下面我為大家總結一些實用的表現(xiàn)形式：

類似上圖中的光的表現(xiàn)形式有很多種，在詳情頁中都非常實用，它能起到加強光感、賦予整體環(huán)境感的作用，并且對提升作品層次感有很大幫助。下面我們看下在設計中的使用。

窗戶格形式

光照效果

素材影子

不管是哪種表現(xiàn)形式，其目的都是在營造一種光影的環(huán)境感，提升作品整體視覺變化強度，避免單調！也讓產品更貼合現(xiàn)實，易于解讀和表達。
下面再看個實操案例：

最終成品

在實操案例中，對于場景的搭建并不難，如何體現(xiàn)光的感覺才是最重要的一筆，光賦予了作品環(huán)境感，視覺上的明暗的變化使得作品給人的感覺豐富有層次。

對于詳情頁中的小場景搭建，前后遮擋用到的很多，根據實際情況選擇合適的遮擋物即可。

在詳情頁設計中，對于光的表現(xiàn)形式遠不至于文中所說到的，這里只是為大家提供一些實用的設計思路。不妨找一些不錯的詳情設計，對應著本文內容，自己再驗證、總結一下，這樣印象會更深刻。

最后，看下本文關鍵詞：

模擬光源、明暗變化、漸變背景、小場景、光感表現(xiàn)

原文地址： 美工美邦（公眾號）

作者： 張家彬