]]>
]]>
這是隨著手機興起而真正流行起來的一招，因為PC時代都是寬大的橫屏設計，適合展現視野開闊的大場面，像大漠、海邊等等，而「空間陳列」作為小場景，在PC端就顯得不大氣，因此使用較少；而手機端卻剛好相反，瘦長豎屏就適合表現長焦特寫的小場景，像微距下的花鳥魚蟲等等，這時「空間陳列」就用的恰到好處。
如圖所示，同樣的產品展示圖，在PC端就顯得單薄，版面空缺，整體不飽滿；而在手機端則用的剛剛好，確實這種長焦特寫、微距放大的陳列小場景就是手機屏的最愛，所以在手機時代，空間陳列圖才會呈現井噴式增長。
其實合成、三維和攝影都可以實現「空間陳列」，但本書還是以合成為主，而合成的難點就在于如何將產品和空間進行自然融合，不能有違和感。
若想合的天衣無縫，第一步就是要做到「透視準確」，而透視作為構圖中的重要知識點，可以說是無處不在，在前面的章節里也多次提及。我們只有掌握透視的變化規律，才能準確表現出元素的空間關系，如果透視不對，那空間將會失真，下面就來詳細講講這個理性知識點——透視。
焦點透視
日常生活中，當我們看周圍事物時，會有遠近、高低、長短、寬窄等不同，這是由于距離、方位等差異在視覺中呈現的不同反映，這種現象就是透視。透視學的出現可以幫我們非常科學的表現各種空間感和立體感，它廣泛用于繪畫、建筑、環藝、設計等諸多領域，而常見的透視共3類：空氣透視、散點透視和焦點透視，這3類的側重點各有不同。
空氣透視又稱「色彩透視」，由于空氣介質的存在（雨、雪、霧、煙等），使人們看到近處景物比遠處的輪廓更清晰、色彩更飽滿的視覺現象，例如下方海報中的「煙雨蒙蒙」，這種近實遠虛感就是典型的空氣透視，隨著鏡頭拉遠，山川也變得越來越模糊。
散點透視則是中國畫特有的一種透視類型，例如下方的《清明上河圖》就是這類透視的代表作，在這五米長的畫卷中，很難找出畫家的具體觀察位置，好似在移動中作畫，每到一處畫一部分，最后拼接起來，這種視點不斷移動的畫法就是散點透視，散點透視適合表現景色的波瀾壯闊，重在寫意，體現一種氣勢和意境。
而焦點透視才是本文重點，它是透視學中的核心理論，也是西方繪畫所遵循的透視原則，最早研究透視就是從這里開始，如果散點透視是「寫意」，那焦點透視則「寫實」，一切都以客觀還原為準。
例如名畫《最后的晚餐》，所有視線都匯聚一點（稱為滅點），營造出一種立體空間感，這些就像自己身處畫面中央所看到的逼真景象。
而我們在設計中常說的透視也都指「焦點透視」，這是我們需要掌握的重中之重。記得高中學習素描時，老師就說畫靜物要「近大遠小」，其實就是對焦點透視最為形象的描述，例如草地上的奶牛，離我們越近就越大，越遠則越小，正是這種近大遠小的透視變化才使場景有了空間和層次。
觀察視角
在介紹焦點透視前，我們先說說透視中一個很重要的影響因素——觀察視角。視角即指人眼（稱為視點）在觀察事物時視線之間所形成的角度。
如下圖所示，其實就是人眼觀看角度的變化，常見有3種：當我們平視前方時就是「平視視角」；仰頭看時則是「仰視視角」；低頭看時便是「俯視視角」。
其中平視時人眼和物體形成的假想連線稱為「水平視線」，這是判斷視角高低的參考線。
當我們將產品放入空間時，就要根據陳列形式選擇合適視角，從下方的示意圖中能看到，三種視角給人的感受都不相同：
- 平視有種方方正正感，給人一種非常自然的觀察感受，雖然中規中矩但視覺舒服；
- 仰視則能體現產品的高大和氣勢，用來烘托價值感；
- 而俯視最接近我們日常看桌面小物品的視角，很真實也很親切，同時還凸顯了產品的立體感。
而上圖的仰視和俯視都屬于小視角，即產品視線和水平視線的夾角較小，這是設計中的常見視角，大概就是把頭微微抬起或低下時看到的場景，這時畫面最自然也最舒服。反之若視角過大，即頭抬的很高或壓的很低時，這時產品的形變就很夸張，顯得刻意、不舒服。
說完3種視角，現在正式講解焦點透視，一般根據物體滅點的數量不同，焦點透視又分3種：平行透視（一點透視）、成角透視（兩點透視）和斜角透視（三點透視），它們都有各自的透視效果和適用范圍，但若鋪開講會很復雜，因此下面就結合「空間陳列」進行介紹。
1. 平行透視
用立方體簡單說明，就是有一面與畫面平行，這時物體的厚度邊線若向內延伸，最后都會匯聚到1個點上，因此又稱「一點透視」。這是最簡單也最易掌握的一種透視形式，其中匯聚點稱為「滅點」，而滅點所在的那條線則是「視平線」，即與人眼等高的一條水平線。
再來看看平行透視在生活中的場景呈現，如圖所示，將各種景物進行前后連線并延伸，最后都是匯到一點才消失。平行透視適合表現場景縱深，給人一種正式感和平和感。
電商中的產品展示也一樣，例如下方示意圖中，不管哪種視角，產品和立方體都是正對觀眾，讓人覺得擺放角度正正好。
總體來說平行透視只有1個滅點，變化并不多，視覺表現單一，沒有太多的空間變化，基本就是從正面來表現整個場景，因此上手簡單，只要確保前后連線都匯聚一點即可，這樣畫面各元素也會顯得整齊。但有時這種正視會讓畫面缺少層次感，顯得很平，此時可嘗試俯視視角或者強化背景的空間縱深。
下面展示平行透視在3種視角下的應用案例，注意觀察不同視角下的產品呈現和透視變化，雖然微妙，但每種視角確實給人不一樣的視覺感受。
平行平視
當畫面為平行透視和平視視角時，這時的觀察位置很正。如下圖所示，空間和產品都顯得有些平整，雖然場景的立體感較弱，但視覺舒服協調，表現起來也相對簡單。注意平視的「視平線」基本位于主體元素的中心處，即是說人眼此時正對前方物體的中心，這樣才會有平視效果。
平行仰視
當畫面為仰視時，一般視角都不會太大，微微仰視即可，這樣視覺才舒服。如下圖所示，其實和平視比起來，小角度仰視的透視變化并不明顯，沒有夸張形變，但依然能體現空間和產品的高大。此時「視平線」位于主體中心靠下的位置，這時人眼明顯是從下往上看。
平行俯視
如果覺得畫面的層次感和立體感不夠，那就嘗試下俯視視角，如下圖所示，由于俯視時我們能同時看到物體的頂面和正面，這樣就能表現物體的厚度，立體感也明顯增強。而畫面的「視平線」則位于主體中心靠上的位置，這時人眼就是從上往下看，但同樣屬于小角度俯視。
2. 正俯視
平行透視的俯視還有一種特殊情形——正俯視，即視角為90°的俯視，這時我們是從物體的正上方低頭往下看，如下圖所示，當產品平放桌面時，正俯視能清晰看到產品的全貌。
在空間陳列中這是一種常見視角，上手簡單，展現清晰。例如下方案例中，俯視下的產品擺放非常靈活，根據構圖需求可以工整 ① 也可以隨意 ② ，并且產品多以正面展現為主，整體直觀、舒服。
以上都是產品的陳列案例，其實正俯視有時也會用于場景呈現中，如下圖所示，視點位于場景的正上方，有點類似無人機的俯瞰拍攝，這種看似「刁鉆」的視角能給畫面帶來獨特的戲劇效果，令人印象深刻。
空間平行透視
除了3種視角，這里還要介紹一種平行透視的常見形式——空間平行透視，這種形式即畫面的正前方有個類似方盒的縱深空間，而人物或產品就放置在空間里。
如圖所示，該形式也有視角的3種變化，但為了確保視覺的自然舒服，仰視和俯視也都是小角度的上下擺動，所以產品的透視變化并不明顯，場景呈現也沒有很夸張。
為何要將該形式單獨列出？因為它非常適合手機端的豎屏構圖。
手機不像PC，無法通過寬屏來表現視野開闊的大場面，手機屏更適合長焦特寫的小場景，但這樣有時就會顯得左右擁擠不透氣，這時「空間平行透視」就剛好取長補短，通過「深度」刻畫將狹窄空間的縱深感體現出來，最終使觀者視線在前后維度上有了延伸和舒展。
該形式正是利用平行透視的縱深性，才最大程度緩解了手機屏的擁擠感。下面分視角列舉案例，要注意不管平視、仰視還是俯視，空間里的所有元素最后都要匯聚一點，這樣透視才合理，縱深效果也最好。
3. 空間平視
3種視角中，空間平視最常見，因為這種方方正正的空間展示最適合手機的豎屏構圖，看著最舒服，上手也簡單，易于搭建。在平視下，由于沒有視角的高低變化，空間基本位于人眼的正前方，無任何偏移，擺放角度非常正，構圖給人一種穩定感，元素也沒有夸張形變，組合方便，真實自然。
對于「空間平行透視」，「深度」刻畫很關鍵，我們要根據版面構圖選擇合適的深淺。例如下方案例中：① ② 的深度淺，空間相對封閉，適合展現小空間，給人溫馨感和趣味性；而 ③ 的深度深，空間開闊，適合展現大空間，這樣能讓視線更舒展，畫面更透氣。
4. 空間仰視
在仰視下，我們是抬頭向上看，這時空間顯得高大，給人強烈的氣勢感。如下圖所示，視平線貼近地面，像是我們蹲著向上看，這種仰望視角，建筑和人物都很高大，再加上強烈的縱深感，雖然空間左右依然狹窄，但上下和前后維度卻變的非常開闊，畫面通透。
空間仰視能渲染氛圍，提升場景的戲劇效果，突出視覺沖擊力，但要注意仰視視角不能太大，否則夸張的仰視效果反而給人一種壓抑感。
5. 空間俯視
在俯視下，視平線處于空間中心的上方，類似我們站在高處往下看，如下圖所示，這時空間顯得立體，遠近的各類元素也能得到清晰展現，層次分明。
俯視適合展現空間的全局觀，也讓各物體有著豐富的體積感。除非有特殊的構圖需求，不然和仰視一樣，俯視視角不能過大，否則俯視就變成俯瞰，會產生遙遠的距離感，空間也壓縮的厲害，進而導致形變和失真。
成角透視
還是拿立方體舉例，就是物體與畫面形成一定夾角，這時物體的所有邊線分別向各自方向進行延伸，最后會在視平線上形成一左一右2個滅點，因此又稱「兩點透視」。這類透視最接近我們日常的觀察角度，即是說大部分時候，我們看到的物體都屬于成角透視。
雖然成角透視只比平行透視多了1個滅點，但2個滅點的位置卻很靈活，這樣空間的透視變化也更加豐富。
例如下方是我們經常看到的景象，雖然都是典型的成角透視，但 ① 是2個滅點都在畫面外，這時建筑給人的感覺結構平穩，立體感強，側重寫實；而 ② 則是1個滅點在畫面內，另1個在畫面外，這時空間右側的透視形變較大，產生縱深感，整個場景更有張力和沖擊。
其實還有第3種情形是2個滅點都在畫面內，但由于空間會產生夸張形變和失真，因此總體少見，不再舉例說明。
再看看成角透視下的產品展示效果，如下圖所示，不同于單面展示為主的平行透視，成角透視則以展示物體的兩面為主，這樣立體感更強，構圖也更穩定。注意在成角透視中，畫面所有的豎向邊線都是平行，不會產生滅點。
相比平行透視，成角透視在表現上更復雜一些，一般都以2滅點在畫面外的情形為主，這時透視最舒服。注意要想畫面只產生2個滅點，那當中的所有元素都需排列整齊，這也是成角透視的常用做法，此時畫面會顯得整齊統一。下面列舉3種視角下的電商案例，其中以仰視和俯視最為常見。
1. 成角平視
平視下的成角透視相對少見，因為使用成角透視就是為了凸顯物體的立體感，但平視由于視角很正，恰恰就會顯得立體感較弱，這時2種效果會有矛盾，影響場景的協調性。例如下方的2個案例中，產品看著就有些平整，和方形盒子以及立方體稍顯沖突，但整體視覺真實平和，沒有形變。
2. 成角仰視
仰視下的成角透視就顯得剛剛好，如下圖所示，所有元素均用2個立面展示，加上透視形變，這時空間的立體感強，產品和立方體也都有明顯的體積感，視覺平穩、飽滿，而且還能體現產品形象的高大，凸顯價值感。
注意2個案例中，視平線上都只有2個滅點，這是因為產品和立方體的排列都很整齊，反之若無序排列，就會產生多個滅點，這樣畫面會顯凌亂，視覺不舒服，所以在表現成角透視時，盡量確保所有元素都能整齊排列。
3. 成角俯視
在成角透視中，俯視視角最常見。因為該視角下的物體可以展現3個面，能進一步強化元素的立體感和方位感，如圖所示，物體的空間關系明顯，層次分明，構圖也平穩。
一般成角俯視適合小場景陳列（若是大場景則垂直方向會發生嚴重形變，這就是后面要講的「斜角透視」），剛好這是手機屏的擅長，小空間配上小角度俯視會給人一種親切感，類似長焦鏡頭的特寫畫面，很好的拉近了觀者的心理距離，因此屬于手機端的常用構圖。
空間成角透視
成角透視的優勢在于畫面立體、穩定和寫實，這些優勢剛好適合空間的立體呈現，如下圖所示，成角透視即可用于室內塑造 ① 也可用于外形搭建 ② ，類似我們站在空間側面看整體，此時空間立體、飽滿，結構有張力。
但由于成角透視都是在畫面兩端形成滅點，所以該透視下的空間更適合橫構圖，但手機屏卻是豎構圖，對于橫向擁擠的豎長屏，成角透視就會有些施展不開，左右狹窄，無法像橫版那樣開闊的展現空間，也沒有平行透視那樣看著規整，因此使用較少。
斜角透視
物體與畫面存在一定夾角，并且在2點透視的基礎上，再加入了高度變化，這樣垂直方向的連線會向上或者向下匯聚，最終畫面形成3個滅點，又稱「三點透視」。相比成角透視，斜角透視其實就是讓本沒有交集的豎線有了交集，這樣垂直方向就有了強烈的匯聚感。
斜角透視的形變夸張，常用于大型物體的仰視或高處俯瞰，類似廣角拍攝。
如下圖所示，該透視能表現出建筑或空間的宏大感，并且越宏大透視就越強烈。這時畫面的夸張構圖會顯得觀者渺小，給人一種壓迫感，也讓場景有著極強沖擊力，同時帶來了更加刺激的視覺感受。
其實只要觀者在場景中顯得很小，這時看到的畫面就會產生斜角透視，例如當我們仰望高樓時，相對高樓而言，渺小的我們就會看到斜角透視。
但如果產品展示采用斜角透視時，就會有一種強烈的不真實感，因為相對產品來說，我們并不渺小，所以日常是不會看到這樣的場景，這種場景更像是「昆蟲視角」，如圖所示，斜角透視下，雖然畫面不真實，但會有種特別的戲劇效果。
另外斜角透視沒有平視視角，因為平視物體的豎向邊線依然平行，不會在垂直方向產生第3個滅點，因此仍屬于成角透視。總之只有在大角度仰視或俯視大型物體時，才會看到斜角透視。
這種形變強烈的夸張透視雖然生活中相對少見，但電商中用的還真不少。還記得我們在第2章講創意方法時提過的「獨特視角」嗎？其中一個方向就是使用斜角透視。
這種透視可以體現物體的巨大（仰視）或者場景的宏大（俯視），正是這樣一種不真實也不自然的視覺感受，反倒給人一種強烈的氣勢和沖擊，畫面極具張力的構圖往往能脫穎而出，并在第一時間抓人眼球，吸引注意，所以成角透視特別適合大促主題的場景搭建和氛圍營造，下面分視角舉例。
斜角仰視
視能讓物體顯得高大，而斜角仰視則讓物體顯得「巨大」。如圖所示，2個案例中的產品都十分「巨大」，通過這樣一種「刁鉆」視角和夸張手法渲染出了產品氣勢，使產品顯得分量十足，同時也提升了視覺沖擊力，整個場景都變的大氣。其中 ① 由于版面有限，有個滅點沒有標示出來。
斜角俯視
當我們站在一個很高的地方俯瞰周圍，或者用無人機在高空航拍，這時看到的景象就是斜角俯視。如圖所示，盡管豎構圖并不適合展現遼闊的大場面，但在斜角俯視的幫助下，2個案例依然體現了場景的宏大，視覺沖擊強，這種居高臨下感使人視野開闊。
平行斜角透視
斜角透視中還有一種特殊情形——平行斜角透視，就是當空間或產品的一面與畫面平行時，此時不管透視多強烈，畫面也只有2個滅點。
如圖所示，當立方體的一面正對視點時，側面便從2個主立面減為了1個，這時除了垂直方向的1個滅點外，原本視平線上的2個也就成了1個，雖然只剩2滅點，但本質仍屬于透視強烈的斜角透視。
既然是與畫面平行，那和平行透視有何區別？
下面看張空間對比圖，能看到2者的形變差異還是相當大：左圖為平行透視，像是我們在看一個小方盒，親切、自然、真實；而右圖則是平行斜角透視，更像是我們在仰望一個巨大空間的入口，充滿戲劇性，并有壓迫感。
其實對于手機端，「平行斜角透視」才是斜角透視中的常用形式，因為它的擺放角度很正，這種正面觀察很適合手機端的豎屏構圖，而且前后的縱深刻畫也能緩解版面的左右擁擠，另外畫面縱向的匯聚感還能迅速吸引注意，給人一種巨大沖擊力和強烈氛圍感，其中仰視比俯視更加常見。
平行斜角仰視
近幾年這類透視越來越多見，因為它既適合豎構圖，也能提升畫面的形式感和表現力，非常利于促銷主題的氛圍打造。
如圖所示，整個畫面就像是我們站在宏大場景的正中央仰望時看到的景象，各元素擺放很正，雖有壓迫感，但空間和產品都顯得非常高大，張力十足，能讓用戶牢牢聚焦，同時也產生了強烈沖擊力，更易在用戶腦海中形成記憶。
平行斜角俯視
在這類透視下我們會感覺自己擁有高高在上的「上帝視角」，元素擺放同樣很正，視野遼闊，場景宏大。但過大的俯視視角會對場景進行一定壓縮，再加上俯瞰產生的遙遠距離感，這樣就顯得元素有些「小氣」，無法體現仰視下的高大，因此畫面的刺激感沒那么強烈，總體相對少見。
3. 小結
以上便是焦點透視的3種類型，我們再來回顧下各自的使用情形，如下圖所示，這是一張3種透視的轉換示意圖，都是仰視視角，旁邊小人則是觀察者的大小示意：
- 當立方體的一面正對觀察者時，就是「平行透視」，這時除了物體厚度的邊線會匯聚1點，其余邊線均無交集；
- 而當立方體旋轉一個角度，任何一面都不正對觀察者時，就是「成角透視」，這時橫向邊線會向各自方向匯聚成2點，豎向邊線則無交集；
- 此時若將立方體變的巨大，大到需要仰望，就是「斜角透視」，這時在2點基礎上，本無交集的豎向邊線將匯成1個新點。
希望通過這張示意圖能幫大家更好理解什么時候該用哪種透視，總之小場景搭建一般以「平行透視」和「成角透視」為主，而恢弘的大場景則以「斜角透視」為主。
當然現實里的透視遠不會這么單一，根據物體不同的擺放位置以及不同的觀測距離，很多時候同一畫面也會存在多種透視，例如平行透視和成角透視就經常組合出現。
電商設計也一樣，例如下方案例中，整個空間是平行透視，而里面的盒子則是成角透視，這時視平線上會有3個滅點，其實若產品的擺放再凌亂些，還會出現更多滅點，但這種無序組合會讓空間塑造變的復雜，看著也不規整，因此并不推薦。
但要注意不管畫面的透視多復雜，當中的視平線卻只能有1條，并且無論水平方向有多少個滅點，最后也都會落在視平線上。
除了以上3種透視外，其實還有4點透視（超廣角透視）、5點透視（魚眼透視）等等，但都過于復雜，用的也很少，這里就不做展開。對于電商里的「空間陳列」，3種透視已夠用，它是我們塑造空間的基礎，如果一開始的透視錯了，即便配色、光影做的再出彩那也無用。
總有人說透視難掌握，其實只要我們在生活中多觀察、多留意身邊物體的透視變化和規律，及時總結，那這種理性還原就不難做到。當然設計終歸還是理性與感性的雙重表達，所以透視雖要遵循，但切忌生搬硬套，視覺協調即可。
講完了焦點透視，我們知道了空間塑造的基本原則，下面就來說說都有哪些陳列場景。
陳列場景
相對PC來說，手機端受屏幕所限，陳列場景其實沒那么復雜，核心是要先構建一個空間，然后讓產品以合適的視角及透視在空間里呈現出來，而這個空間場景則要和主題氛圍、產品氣質都高度匹配。
一般來說，手機端常用的陳列場景有4類：盒子陳列、臺面陳列、自然陳列以及舞臺陳列，選擇哪類則要看哪個場景對產品的烘托效果最好。
1. 產品組合
在介紹每個場景前，我先說說關于產品組合的2原則，因為很多時候在空間擺放的產品數量較多，這時它們的組合形式就變的尤其重要，稍不注意就會顯得畫面雜亂無章，不夠協調，而且凌亂的擺放也會降低產品的品質感，缺少吸引力。關于組合原則，核心有2點：大小合理以及三角構圖。
大小合理
如果將多個產品擺一起，則要確保它們之間的相對大小符合現實中的真實差異，現實中尺寸大的產品就要相對大些，而尺寸小的產品就要相對小一點，這樣才會真實并經得起推敲。
而有些設計師在組合產品時，也不管大小的真實差異，放進版面后就很隨意的放大或縮小，最后出來的組合要不就大小一樣，要不就比例失真，這些都會給用戶一種強烈的不協調感和不真實感。
下面再看一組對比圖，明顯大小一樣的左圖會有不適感，也缺少層次；而大小合理的右圖則更有美感也更舒服。
其實大小合理的最終目的是希望整體結構錯落有致，就像右圖一樣，這種有高有低的組合才能體現韻律感和結構美。所以如果可以選擇，那我們就選擇一些尺寸差異較大的產品，盡量避免出現大小差不多的情況。
當然如果必須陳列大小一樣的產品，那也可以通過透視或者輔助元素來改善，例如空間里的近大遠小、立方體加高都能改變高度一樣的情形。
三角構圖
當我們選好不同大小的產品后，就要注意它們的組合形式，千萬不能亂堆一氣，不同的擺放會形成不同結構，而每種結構又會給人不同感受。我們在「圖形分割」中講過「正三角」具有很強的穩定性，因此當產品采用正三角構圖時，會讓人覺得版面平穩、視覺舒服。
如圖所示，所謂三角構圖，其實就是將尺寸大的產品放中間，而尺寸小的產品放兩邊，這樣不但構圖穩定，而且畫面也有節奏和變化。可以說「三角構圖」就是空間陳列里最常用的構圖方式，而本節展示的所有案例中，大部分也都是三角構圖。
明確了產品的組合原則，知道了如何陳列才舒服，下面就正式講講空間陳列的4類場景。
2. 場景
盒子陳列
「盒子陳列」就是在盒子里面放產品，而盒子多以禮盒為主，使用場景和主題相對單一，基本用于送禮之意的專題頁。創意雖然普通，但卻不易出錯，是種相對安全的表現方式。當然若能在盒里加些小心思，畫面也會很出彩，像我之前看過一個新年Banner，就是禮盒里裝著一個大家庭在吃年夜飯的溫馨場景，這樣的新組合便讓人眼前一亮。
另外若能提升禮盒刻畫的精致度，那畫面也會有不錯的設計感。而盒子外形也不只有方形，常用的還有圓形和異形。觀察視角則以小角度俯視居多，因為這個視角最接近我們日常看禮盒的真實情形，盒內產品在俯視下能看的一清二楚，展現也立體。
盒子陳列的難點在于當盒內要擺放很多產品時，如何能讓產品真實、自然的呈現，這需要我們既注意擺放的合理性，也能準確表現透視，還要刻畫出產品的明暗變化，總之只有把握好產品的空間感、立體感以及光影感，畫面才會舒服協調。
方形盒是最常用的盒子類型，畢竟也是生活中最常用的禮盒外形，結構感強而且易表現。如下圖所示，禮盒都是成角透視，且左右滅點都在畫面之外，這樣結構最穩定，立體感也強。注意盒里的產品呈現，特別是俯視視角下，產品越多越要注意它們是否協調統一，透視、光影等細節一個都不能少，把控不到位就會顯得凌亂，畫面別扭。
圓形盒比較少見，因為和立方體比起來，圓柱體的透視沒那么強烈，結構感偏弱，但圓潤的外形能使畫面變的柔和，給人一種親和力和溫馨感，如圖所示，由于圓形盒沒有明顯塊面，所以不管透視還是光影，刻畫起來都相對簡單。
異形盒是指外形為不規則形狀的盒子，總體也很少見，但易出彩。形狀用的好便能打破「盒子陳列」的常規感，使畫面變的新穎有創意。
例如下方案例中，不管是心形、貓頭輪廓還是圣誕樹，都能成為畫面焦點并引人注意。另外盒子呈現均用了「正俯視」視角，其實除了小角度俯視外，這種視角也很常見，因為該視角下的產品陳列清晰完整，盒子外形也能直觀顯示，最大程度的展現了其外形的特別之處。
臺面陳列
在空間陳列的4類場景中，「臺面陳列」用的最多，適用范圍也最廣，可以說電商中的大部分主題和產品都能使用，算是一種真正白搭的表現方式。
「臺面陳列」就是在空間里搭建一個「臺面」，然后在上面放置相關產品。由于該手法還是以放大特寫的小場景為主，元素形變不能太大，因此畫面常用平行透視和成角透視，視角則很靈活，跟著構圖走，3種（平視、俯視、仰視）都有。「臺面陳列」上手簡單，場景多變，其中的關鍵元素——臺面需要根據主題、場景進行靈活變化，常見有2類：桌面和幾何體。
桌面很好理解，就是桌子頂部的陳列面，所有產品都放置其上。由于桌子是家里常見家具之一，因此桌面陳列往往能傳遞一種「家」的溫暖和溫馨。
可能有人覺得「桌面」形式有些單一，其實遠沒那么簡單，我們不要固化思維，要能靈活變化桌子的樣式和裝飾，例如方桌還是圓桌？木桌還是大理石桌？光面還是鋪桌布？這些都是可變量，再加上視角和周圍環境的變化，總之形式可以很豐富。
如圖所示，桌面陳列尤其適合各類美食的組合呈現，這時整個場景貼近生活，頗有帶入感。
就是將各種幾何形體作為陳列產品的臺面，幾何體相對抽象，表現場景更多元，因此比具象「桌面」更加常用。
如圖所示，幾何體一般都是組合出現，特別適合多產品陳列，簡約大方，能烘托出產品的品質感。同時通過高高低低的大小排列也能表現出畫面的結構美以及層次感，總之是一種 「上手簡單、易出效果」的表現方式。
常用幾何體有「立方體」和「圓柱體」，它們適合陳列，高度調節方便，使用靈活。
如下圖所示，整體表現并不復雜，就是將各種產品放在幾何體上。但作為畫面的核心元素，這時幾何體的形態、排列、視角和透視就變的非常重要，我們要根據創意需求和產品氣質選擇最合適的展現方式，而這些展現本身就有不錯的形式感。
幾何體陳列既能營造空間關系和簡約氣質，也能讓用戶聚焦產品本身，因為它的外形簡單，不搶產品，不像一些復雜元素或場景，雖然視覺豐富但最后卻讓產品淹沒其中，這樣就本末倒置。
自然陳列
「自然陳列」需要先創建一個合適的自然環境，然后再將產品以合適方式融入其中。相對其他場景，自然環境顯然復雜一些，呈現手法常以「合成」和「插畫」為主。因為產品都是實物拍攝，為了風格統一，自然環境會偏向寫實風格，這樣2者結合才協調。
從下方案例能看到，「自然陳列」常用于季節感受或者產地溯源等主題，畫面通過「自然場景」營造出天然健康的綠色氛圍。而場景中的元素繁多，呈現復雜，這就需要我們具備優秀的整合能力。
對于「自然」塑造，視角以平視和小角度俯視居多，但畫面由于沒有太多的幾何型物體，所以透視沒那么嚴謹，核心是注意近、中、遠景的層次區分，還有光影的合理添加。如果這些把控不到位，就很可能出現場景雜亂、缺少層次、沒有帶入感的粗糙畫面，最終淪為各種素材的亂堆一氣。
以上列舉的都是以花草樹木為主的自然環境，確實綠色場景在「自然陳列」中用的也是最多，但除了綠色場景外，有時也會用到其他環境。如下圖所示，像海底 ① 、沙灘 ② 、海面 ③ 、冰山 ④ 也是適合陳列的自然場景，特別是夏季主題會經常用到。
舞臺陳列
最后一類「舞臺陳列」常用于大促主題的氣氛營造，這類場景不挑類目，任何產品放在「舞臺」上，燈光一打，色彩再斑斕些，都能營造出熱鬧的促銷氛圍。
如圖所示，舞臺外形以圓形居多，因為圓形的透視感較弱，構圖靈活，而且也符合大家對舞臺的第一印象。舞臺視角則很靈活，3種均很常見，核心是和產品視角保持一致。
關于「舞臺」塑造，還有2處需要注意的地方：
舞臺外形除了最常用的「圓形」外，還有半圓形、方形和六邊形等等；舞臺造型也可以很豐富，并不局限于常規的表演舞臺，各種造型都可嘗試，例如上方左四圖就是現代感十足的三維舞臺，總之我們要根據創意和風格塑造相匹配的陳列舞臺。
另外就是燈光運用，可以說這是「舞臺陳列」和其他場景的最大區別，但燈光也不是越多越好，太多反而顯得眼花繚亂，其實能渲染出絢爛氣氛即可。而有光就有影，在燈光照射下，產品一定要有準確的光影呼應，這樣才不會顯得突兀。例如上方案例中，仔細觀察燈光下的產品呈現，能看到產品表面都產生了被燈光照射后的色彩、明暗等變化，這些細節刻畫才讓畫面更真實，融合更自然。
3. 實戰案例
本次案例會用膠原蛋白口服液作主體元素，然后用這4類場景（盒子、臺面、自然、舞臺）來設計4張不同視角、不同風格的Banner，讓大家看看在不同場景下，如何將產品融入其中。先展示案例會用到的3種產品視角， 下方案例會根據不同的場景視角選擇對應素材。
總結
「空間陳列法」的內容量挺大，主要分成了「焦點透視」和「陳列場景」2大部分來介紹，其中焦點透視是立體「空間」的塑造基礎；而陳列場景則是產品「陳列」的具體環境。
常用場景有4類：盒子陳列、臺面陳列、自然陳列和舞臺陳列，每種陳列都有各自適用的主題和氛圍：「盒子」常用于溫馨的送禮主題；「臺面」則能根據不同主題靈活應變，屬于百搭場景；而「自然」則適合季節或者溯源主題，體現天然清新感；最后的「舞臺」則用于氛圍濃烈的大促主題。不管哪種場景，都要確保產品和空間的視角、透視相一致，這樣場景才會真實協調。另外多產品陳列時，還要注意它們之間的大小比例以及擺放結構，其中三角結構最常用。總之在手機時代，「空間陳列」是一種真正適合小屏豎構圖的表現方式。
原文：站酷
]]>
原文：站酷
]]>而字體設計作為電商廣告Banner中的靈魂，對banner主題的呈現起著關鍵作用，今天我們一起來探討一下關于Banner文字設計的一些經驗和方法。
①文字排版
Banner中的文字信息傳達應與口語表述相似，需要抑揚頓挫、重點突出地進行。在文字排版上，要求重點突出，大小粗細錯落有致。字與字之間的結構、布局、留白、組織、呼應等要疏密有序。字體保持在兩種左右，加入一些跟內容有關聯的元素或者形狀，可以很好地表達整個設計的情緒。
在明確主題以及內容之后，我們就要根據主題和內容來設計版式，版式就是畫面的整體布局，好的版式能夠清楚的表達核心思路，正確的展示想要給用戶看的東西；大體上排版一般分為兩種：圖文左右排版和文字居中排版。
1、圖文左右排版
因為我們的視覺瀏覽習慣都是從左往右還有從上到下的，所以我們在做 Banner 的時候會經常性的選擇使用左右排版，那么使用左圖右文還是左文右圖也是需要根據主題和內容來決定的。
當配圖示意比較模糊的時候，我們使用左文字右圖的形式，強調文字的吸引力，有一定指導作用。
圖片來自花瓣
這里文字能夠精準地將信息帶給用戶，文字所占比例比圖片多些，這也解釋了為何大部分左文右圖排版的 Banner 都是文字占比大于圖片。
當配圖示意比較明確，同時圖片能夠強調吸引的時候，我們采用左圖右文字，如下圖：
使用左圖右文字，也是因為圖片的內容更吸引用戶多一些，所以對圖像的品質要求更高，精致感品質感也有要求，這種類型大多使用在家居，護膚等產品上。
小結：圖文左右排版，以分割排版的方式構圖，畫面有明確的獨立性和引導性，這種方式留白更多，較好的視覺引導和方向使信息更明確，更顯品質感。
2、文字居中
文字居中的排版多用于電商促銷、公眾號的文章封面等，大多是突出文字的內容，比如促銷的折扣，文章的主題等，其余的產品或者圖片都是為了搭配文字做出的氣氛烘托，吸引用戶點擊。
圖片來自花瓣
使用這種方式讓畫面展示規整穩定、醒目大方，視覺更聚焦，信息更集中，在突出主體的同時能使整體畫面具有一定的沖擊力。
小結：文字居中布局對于實物（人，商品，創造形象）要求并不高，文字信息本身的處理要求就會高一點。在確認好主題和內容后，我們根據產品所要突出的重點來決定我們的版式，是要突出文字還是突出產品，突出產品即使用左圖右文字，這種版式對產品的圖片要求比較高；想要突出文字，則可以選擇左文字右圖或者文字居中排版，但都對文字的設計要求比較高。 不確定用什么版式，我們可以在設計的時候不妨多做幾個版本，大膽嘗試。
②文字設計
Banner的文字信息是其表達中心思想的靈魂，如果在設計文字的時候全部使用自帶字體，會使 Banner顯得太過生硬，不富有情感，應該更多地采用字體變形，重新組合。通過不同的筆觸粗細和寬高比例，展現 Banner的視覺沖擊力和活力。
文案內容要高效的傳遞信息，吸引用戶注意力，讓人一下子看到主題，文案中文字的排版要區分主次，把控好信息層級；使用合適的字體，明確字體適用的場合，同一畫面中字體的使用盡量不要超過三種，過多會顯得雜亂，要使用識別度高的字體。
而 Banner 中常用的字體有三種：襯線體、非襯線體和書法體。
1、襯線體
襯線體筆畫有粗細之分，它模仿的是中國古代字體和古代碑文上的字體，簡單且易變形，襯線體能給人古典，經典，文藝的感覺，適合用于文藝氣息的家居用品或文娛類的相關宣傳設計上。
圖片來自花瓣
以上圖為例：文案內容中的“全面淪陷”，讓人一目了然；下面一行的內容，更加詳細解釋了上面的主標題。畫面顏色凸顯主題，所以字體變形，使用白色，反而在畫面中更加突出。襯線字體一般推薦使用方正經黑簡體、方正俊黑、方正蘭亭顯黑簡體、華文細黑等，使用的時候注意版權問題。
2、非襯線體
非襯線體較簡潔，筆畫較粗，很容易產生視覺重點，非襯線字體體現現代、簡約的特性，適合用于蒼勁有力、促銷類的相關設計，吸引用戶注意力，提高Banner點擊率。
圖片來自花瓣
以上圖為例：主副標題區分清楚，在字體筆畫變形上，結合科技感的氣氛，增加了光的流動感，讓標題不會過于死板。非襯線字體常用的有：漢儀潤圓、方正綜藝簡體、造字工房勁黑、造字工坊版黑、方正蘭亭粗黑、冬青黑體、思源黑體等。
3、書法體
書法體源自中國古代，能體現中國文化和揮灑墨水的豪氣，適用于傳統、中國風、意境的文藝主題和金戈鐵馬般的豪邁主題。
圖片來自花瓣
上圖為例：中秋節是中國的傳統文化，使用書法體能夠將整體畫面營造的中國古典風更好的融合起來，書法體推薦李旭科書法、漢儀尚巍手書、葉根友行書繁體等字體 。
小結：不管是使用哪種類型的字體，在制作 Banner 時，我們都需要清楚的知道整張 Banner 所要表達的情緒，從而在字體的設計上也能夠表現出情緒，這樣才能夠更好地融合進 Banner ，進而更好的表達出你想要的主題。
]]>
]]>
總之，在看的過程中記得分析，而不僅只停留在看的層面。從構圖、到配色到表現形式，它們都有值得我們學習的地方。
作者公眾號：不錯研究室（ID: bucuo_8cuo）
]]>banner的設計過程可以分為五步：
- 了解需求
- 根據需求確定設計風格
- 根據素材和文案確定版式
- 構成banner的元素的設計（文案/背景/點綴/素材）
- 調整配色
整個設計分享共四期，我們今天的分享內容是第一期也就是前兩步涉及到的內容——了解需求風格及各風格設計方向與特點。分析風格找到合適的設計方向是至關重要的，往往決定了整個設計的走向。
一. 了解需求
做任何設計的前提就是了解設計需求，只有弄明白需求方到底想要什么，我們才能少改幾次稿。我剛參加工作的時候就沒少吃這方面的虧，那時候剛進公司臉皮薄，別人讓干啥就立馬擼起袖子打開ps開始工作。不明白的地方也不敢問太多，怕打擾別人工作。事實證明，這種想法是多么大的錯誤。
需要了解的需求大體可以總結成以下幾個方面。
1. 確定文案信息、素材、尺寸大小、投放的平臺
一般接到設計需求的時候，文案和素材都是需求方確定好的。但是有的需求方會說，你可以根據你的設計需要，稍微改動文案信息。本人親身經歷，這句話真的是一個火坑。文案的不確定會嚴重的影響設計進程，你改得好，改得他們滿意還好，如果不滿意，那就面臨著重做。除此之外，有時候我們可以從文案和素材里獲取設計靈感，確定設計的風格。
2. 確定banner是為了實現什么目的而設計
比如需求方給到的文案信息是「金秋助學」，我們需要了解金秋助學的對象是誰，是大學生還是小學生，這會影響風格的確定和設計元素的選擇。還要了解需求方想要這個banner起到什么作用，是想讓更多人參與到這個活動中來，還是想通過這個banner讓更多人了解某某企業熱心于慈善事業，提升企業的知名度和好感，只有確定這些才能確定你的設計風格。
3. 詢問需求方的建議
需求方在把這個需求給到我們之前，可能心里就已經有了自己的想法，如果我們在設計之前可以了解到，會很大的降低改稿次數。而且我們主動詢問他們的意見，會讓他們感覺到自己的想法受到了尊重，以后交流起來也會更愉快。但是有時候他們的想法用語言可能描述不出來，這個時候我們可以用「情緒板」的方法，快速的獲取視覺信息。
4. 確定設計時間
如果時間很緊張，就盡量選擇不易出錯的板式和風格，如果時間比較充裕，可以細細打磨設計作品，多嘗試一些以前沒嘗試過的表現方法。
二. 根據需求確定設計風格
banner的設計風格可以拿人作為比對很好理解。有人外向，有人內斂。而這兩種人的穿衣風格和舉止言行在生活中也是不盡相同。和人難過會用哭表現，高興會用笑表現一樣，不同的設計風格，也對應不同的表現方法。下面我們主要分析不同的設計風格對應的表現方法，及給大家安利的一些可參考使用的素材，覺得有用的同學別忘了做下筆記。
1. 關鍵詞：文藝、氣質、素雅、安靜
總結：
- 最明顯的特點就是留白，大量的留白。
- 字體多采用宋體這樣的襯線體，除一級標題字號略大些，其他的文案都非常小，給人精致的感覺。
- 色彩以灰白色系為主，其他的色彩飽和度和純度低，明度高。
- 這類banner多運用在茶、棉麻制品、以簡潔為特色的家居用品上。
- 點綴物多用細線條。
2. 關鍵詞：高冷、時尚
總結：
- 高冷的banner就和高冷的你一樣，最大的特點就是話少，一般就幾個字。
- 用色大多采用黑白灰。
- 素材圖一般都很大，突出細節，大牌的東西對自己的品質還是很有信心的，所以他們會放大放大再放大他們的細節，唯恐你們看不到。
- 很少運用點綴物，直接一張產品細節放大圖，放幾個字，就是這么自信。
3. 關鍵詞：傳統、中國風、意境
總結：
- 字體采用書法字體，文案多用豎形排版、從右向左的順序，因為古人是這樣寫字的。
- 可以選用的素材有印章，中國山水畫，墨跡，扇面，剪紙，園林窗格，古紋樣，祥云，京劇，卷軸等等。
4. 關鍵詞：青春、活力、年輕
總結：
- 很突出的一點就是模特都很年輕很有活力。
- 色彩的飽和度和純度比較高。
- 排版你可以隨便玩。
5. 關鍵詞：可愛、甜美
總結：
- 可愛風格的banner最突出的特點就是他的字體，多采用少年字體、手寫字體、卡通字體。
- 點綴物多使用卡通小元素，以手繪和矢量圖為主，比如星星，云朵，短線條等。
- 色彩上多使用暖色調，營造軟萌的感覺。
6. 關鍵詞：節日、促銷、熱鬧
總結：
- 色彩豐富，紅、黃、紫偏多，畫面飽滿，很少留白。
- 主標題很大，多用剛硬，棱角，夸張有視覺沖擊力的字體。
- 可以用到的點綴物有光效、鞭炮、舞臺、燈光、五彩的漸變、沖擊性的線條和多邊形等。
7. 關鍵詞：未來、科技
總結：
- 科技類的banner概括來講就兩個要點，科技感的文字+科技感的背景圖，高級一點的還包括科技感的小點綴。
- 用色以藍，黑色，紫等冷色調為主，畫面給人硬朗，空間感，速度和力量的感覺。
- 可以用到的點綴物有光效、金屬效果、線條、光點，宇宙等。
8. 關鍵詞：嚴肅、規矩、黨
總結：
- 因為我們偉大的毛主席喜歡紅色，所以黨喜歡紅色，所以政府類的網站也好，banner也好，大多都會采用紅色，點綴色多為藍色黃色，字體多選用端莊古典的襯線體或中國風味濃厚的毛筆字體。
- 可以用的背景和點綴物有紅旗、城市背景、黨徽、英雄雕塑、故宮、石獅子等。
9. 關鍵詞：手繪風
總結：
- 把手繪風格單拿出來是因為它真的很好用，而且很常用到。
- 手繪風格可以用在文案上。產品本身也可以用手繪的形式，如上圖左一，簡單的幾筆就讓整個畫面一眼就能看懂，而且充滿樂趣。手繪風格用的最多的是點綴物，通過不同手繪風格的點綴物營造不一樣的氛圍。
歡迎關注作者的微信公眾號：
