2020-7-28 資深UI設(shè)計者
「空間陳列法」是說先構(gòu)建一個空間，然后將主體元素用合適的形式陳列出來。
這是隨著手機興起而真正流行起來的一招，因為PC時代都是寬大的橫屏設(shè)計，適合展現(xiàn)視野開闊的大場面，像大漠、海邊等等，而「空間陳列」作為小場景，在PC端就顯得不大氣，因此使用較少；而手機端卻剛好相反，瘦長豎屏就適合表現(xiàn)長焦特寫的小場景，像微距下的花鳥魚蟲等等，這時「空間陳列」就用的恰到好處。
如圖所示，同樣的產(chǎn)品展示圖，在PC端就顯得單薄，版面空缺，整體不飽滿；而在手機端則用的剛剛好，確實這種長焦特寫、微距放大的陳列小場景就是手機屏的最愛，所以在手機時代，空間陳列圖才會呈現(xiàn)井噴式增長。
其實合成、三維和攝影都可以實現(xiàn)「空間陳列」，但本書還是以合成為主，而合成的難點就在于如何將產(chǎn)品和空間進行自然融合，不能有違和感。
若想合的天衣無縫，第一步就是要做到「透視準(zhǔn)確」，而透視作為構(gòu)圖中的重要知識點，可以說是無處不在，在前面的章節(jié)里也多次提及。我們只有掌握透視的變化規(guī)律，才能準(zhǔn)確表現(xiàn)出元素的空間關(guān)系，如果透視不對，那空間將會失真，下面就來詳細講講這個理性知識點——透視。
日常生活中，當(dāng)我們看周圍事物時，會有遠近、高低、長短、寬窄等不同，這是由于距離、方位等差異在視覺中呈現(xiàn)的不同反映，這種現(xiàn)象就是透視。透視學(xué)的出現(xiàn)可以幫我們非常科學(xué)的表現(xiàn)各種空間感和立體感，它廣泛用于繪畫、建筑、環(huán)藝、設(shè)計等諸多領(lǐng)域，而常見的透視共3類：空氣透視、散點透視和焦點透視，這3類的側(cè)重點各有不同。
空氣透視又稱「色彩透視」，由于空氣介質(zhì)的存在（雨、雪、霧、煙等），使人們看到近處景物比遠處的輪廓更清晰、色彩更飽滿的視覺現(xiàn)象，例如下方海報中的「煙雨蒙蒙」，這種近實遠虛感就是典型的空氣透視，隨著鏡頭拉遠，山川也變得越來越模糊。
散點透視則是中國畫特有的一種透視類型，例如下方的《清明上河圖》就是這類透視的代表作，在這五米長的畫卷中，很難找出畫家的具體觀察位置，好似在移動中作畫，每到一處畫一部分，最后拼接起來，這種視點不斷移動的畫法就是散點透視，散點透視適合表現(xiàn)景色的波瀾壯闊，重在寫意，體現(xiàn)一種氣勢和意境。
而焦點透視才是本文重點，它是透視學(xué)中的核心理論，也是西方繪畫所遵循的透視原則，最早研究透視就是從這里開始，如果散點透視是「寫意」，那焦點透視則「寫實」，一切都以客觀還原為準(zhǔn)。
例如名畫《最后的晚餐》，所有視線都匯聚一點（稱為滅點），營造出一種立體空間感，這些就像自己身處畫面中央所看到的逼真景象。
而我們在設(shè)計中常說的透視也都指「焦點透視」，這是我們需要掌握的重中之重。記得高中學(xué)習(xí)素描時，老師就說畫靜物要「近大遠小」，其實就是對焦點透視最為形象的描述，例如草地上的奶牛，離我們越近就越大，越遠則越小，正是這種近大遠小的透視變化才使場景有了空間和層次。
在介紹焦點透視前，我們先說說透視中一個很重要的影響因素——觀察視角。視角即指人眼（稱為視點）在觀察事物時視線之間所形成的角度。
如下圖所示，其實就是人眼觀看角度的變化，常見有3種：當(dāng)我們平視前方時就是「平視視角」；仰頭看時則是「仰視視角」；低頭看時便是「俯視視角」。
其中平視時人眼和物體形成的假想連線稱為「水平視線」，這是判斷視角高低的參考線。
當(dāng)我們將產(chǎn)品放入空間時，就要根據(jù)陳列形式選擇合適視角，從下方的示意圖中能看到，三種視角給人的感受都不相同：
而上圖的仰視和俯視都屬于小視角，即產(chǎn)品視線和水平視線的夾角較小，這是設(shè)計中的常見視角，大概就是把頭微微抬起或低下時看到的場景，這時畫面最自然也最舒服。反之若視角過大，即頭抬的很高或壓的很低時，這時產(chǎn)品的形變就很夸張，顯得刻意、不舒服。
說完3種視角，現(xiàn)在正式講解焦點透視，一般根據(jù)物體滅點的數(shù)量不同，焦點透視又分3種：平行透視（一點透視）、成角透視（兩點透視）和斜角透視（三點透視），它們都有各自的透視效果和適用范圍，但若鋪開講會很復(fù)雜，因此下面就結(jié)合「空間陳列」進行介紹。
用立方體簡單說明，就是有一面與畫面平行，這時物體的厚度邊線若向內(nèi)延伸，最后都會匯聚到1個點上，因此又稱「一點透視」。這是最簡單也最易掌握的一種透視形式，其中匯聚點稱為「滅點」，而滅點所在的那條線則是「視平線」，即與人眼等高的一條水平線。
再來看看平行透視在生活中的場景呈現(xiàn)，如圖所示，將各種景物進行前后連線并延伸，最后都是匯到一點才消失。平行透視適合表現(xiàn)場景縱深，給人一種正式感和平和感。
電商中的產(chǎn)品展示也一樣，例如下方示意圖中，不管哪種視角，產(chǎn)品和立方體都是正對觀眾，讓人覺得擺放角度正正好。
總體來說平行透視只有1個滅點，變化并不多，視覺表現(xiàn)單一，沒有太多的空間變化，基本就是從正面來表現(xiàn)整個場景，因此上手簡單，只要確保前后連線都匯聚一點即可，這樣畫面各元素也會顯得整齊。但有時這種正視會讓畫面缺少層次感，顯得很平，此時可嘗試俯視視角或者強化背景的空間縱深。
下面展示平行透視在3種視角下的應(yīng)用案例，注意觀察不同視角下的產(chǎn)品呈現(xiàn)和透視變化，雖然微妙，但每種視角確實給人不一樣的視覺感受。
平行平視
當(dāng)畫面為平行透視和平視視角時，這時的觀察位置很正。如下圖所示，空間和產(chǎn)品都顯得有些平整，雖然場景的立體感較弱，但視覺舒服協(xié)調(diào)，表現(xiàn)起來也相對簡單。注意平視的「視平線」基本位于主體元素的中心處，即是說人眼此時正對前方物體的中心，這樣才會有平視效果。
平行仰視
當(dāng)畫面為仰視時，一般視角都不會太大，微微仰視即可，這樣視覺才舒服。如下圖所示，其實和平視比起來，小角度仰視的透視變化并不明顯，沒有夸張形變，但依然能體現(xiàn)空間和產(chǎn)品的高大。此時「視平線」位于主體中心靠下的位置，這時人眼明顯是從下往上看。
平行俯視
如果覺得畫面的層次感和立體感不夠，那就嘗試下俯視視角，如下圖所示，由于俯視時我們能同時看到物體的頂面和正面，這樣就能表現(xiàn)物體的厚度，立體感也明顯增強。而畫面的「視平線」則位于主體中心靠上的位置，這時人眼就是從上往下看，但同樣屬于小角度俯視。
平行透視的俯視還有一種特殊情形——正俯視，即視角為90°的俯視，這時我們是從物體的正上方低頭往下看，如下圖所示，當(dāng)產(chǎn)品平放桌面時，正俯視能清晰看到產(chǎn)品的全貌。
在空間陳列中這是一種常見視角，上手簡單，展現(xiàn)清晰。例如下方案例中，俯視下的產(chǎn)品擺放非常靈活，根據(jù)構(gòu)圖需求可以工整 ① 也可以隨意 ② ，并且產(chǎn)品多以正面展現(xiàn)為主，整體直觀、舒服。
以上都是產(chǎn)品的陳列案例，其實正俯視有時也會用于場景呈現(xiàn)中，如下圖所示，視點位于場景的正上方，有點類似無人機的俯瞰拍攝，這種看似「刁鉆」的視角能給畫面帶來獨特的戲劇效果，令人印象深刻。
空間平行透視
除了3種視角，這里還要介紹一種平行透視的常見形式——空間平行透視，這種形式即畫面的正前方有個類似方盒的縱深空間，而人物或產(chǎn)品就放置在空間里。
如圖所示，該形式也有視角的3種變化，但為了確保視覺的自然舒服，仰視和俯視也都是小角度的上下擺動，所以產(chǎn)品的透視變化并不明顯，場景呈現(xiàn)也沒有很夸張。
為何要將該形式單獨列出？因為它非常適合手機端的豎屏構(gòu)圖。
手機不像PC，無法通過寬屏來表現(xiàn)視野開闊的大場面，手機屏更適合長焦特寫的小場景，但這樣有時就會顯得左右擁擠不透氣，這時「空間平行透視」就剛好取長補短，通過「深度」刻畫將狹窄空間的縱深感體現(xiàn)出來，最終使觀者視線在前后維度上有了延伸和舒展。
該形式正是利用平行透視的縱深性，才緩解了手機屏的擁擠感。下面分視角列舉案例，要注意不管平視、仰視還是俯視，空間里的所有元素最后都要匯聚一點，這樣透視才合理，縱深效果也最好。
3種視角中，空間平視最常見，因為這種方方正正的空間展示最適合手機的豎屏構(gòu)圖，看著最舒服，上手也簡單，易于搭建。在平視下，由于沒有視角的高低變化，空間基本位于人眼的正前方，無任何偏移，擺放角度非常正，構(gòu)圖給人一種穩(wěn)定感，元素也沒有夸張形變，組合方便，真實自然。
對于「空間平行透視」，「深度」刻畫很關(guān)鍵，我們要根據(jù)版面構(gòu)圖選擇合適的深淺。例如下方案例中：① ② 的深度淺，空間相對封閉，適合展現(xiàn)小空間，給人溫馨感和趣味性；而 ③ 的深度深，空間開闊，適合展現(xiàn)大空間，這樣能讓視線更舒展，畫面更透氣。
在仰視下，我們是抬頭向上看，這時空間顯得高大，給人強烈的氣勢感。如下圖所示，視平線貼近地面，像是我們蹲著向上看，這種仰望視角，建筑和人物都很高大，再加上強烈的縱深感，雖然空間左右依然狹窄，但上下和前后維度卻變的非常開闊，畫面通透。
空間仰視能渲染氛圍，提升場景的戲劇效果，突出視覺沖擊力，但要注意仰視視角不能太大，否則夸張的仰視效果反而給人一種壓抑感。
在俯視下，視平線處于空間中心的上方，類似我們站在高處往下看，如下圖所示，這時空間顯得立體，遠近的各類元素也能得到清晰展現(xiàn)，層次分明。
俯視適合展現(xiàn)空間的全局觀，也讓各物體有著豐富的體積感。除非有特殊的構(gòu)圖需求，不然和仰視一樣，俯視視角不能過大，否則俯視就變成俯瞰，會產(chǎn)生遙遠的距離感，空間也壓縮的厲害，進而導(dǎo)致形變和失真。
還是拿立方體舉例，就是物體與畫面形成一定夾角，這時物體的所有邊線分別向各自方向進行延伸，最后會在視平線上形成一左一右2個滅點，因此又稱「兩點透視」。這類透視最接近我們?nèi)粘５挠^察角度，即是說大部分時候，我們看到的物體都屬于成角透視。
雖然成角透視只比平行透視多了1個滅點，但2個滅點的位置卻很靈活，這樣空間的透視變化也更加豐富。
例如下方是我們經(jīng)?？吹降木跋?，雖然都是典型的成角透視，但 ① 是2個滅點都在畫面外，這時建筑給人的感覺結(jié)構(gòu)平穩(wěn)，立體感強，側(cè)重寫實；而 ② 則是1個滅點在畫面內(nèi)，另1個在畫面外，這時空間右側(cè)的透視形變較大，產(chǎn)生縱深感，整個場景更有張力和沖擊。
其實還有第3種情形是2個滅點都在畫面內(nèi)，但由于空間會產(chǎn)生夸張形變和失真，因此總體少見，不再舉例說明。
再看看成角透視下的產(chǎn)品展示效果，如下圖所示，不同于單面展示為主的平行透視，成角透視則以展示物體的兩面為主，這樣立體感更強，構(gòu)圖也更穩(wěn)定。注意在成角透視中，畫面所有的豎向邊線都是平行，不會產(chǎn)生滅點。
相比平行透視，成角透視在表現(xiàn)上更復(fù)雜一些，一般都以2滅點在畫面外的情形為主，這時透視最舒服。注意要想畫面只產(chǎn)生2個滅點，那當(dāng)中的所有元素都需排列整齊，這也是成角透視的常用做法，此時畫面會顯得整齊統(tǒng)一。下面列舉3種視角下的電商案例，其中以仰視和俯視最為常見。
平視下的成角透視相對少見，因為使用成角透視就是為了凸顯物體的立體感，但平視由于視角很正，恰恰就會顯得立體感較弱，這時2種效果會有矛盾，影響場景的協(xié)調(diào)性。例如下方的2個案例中，產(chǎn)品看著就有些平整，和方形盒子以及立方體稍顯沖突，但整體視覺真實平和，沒有形變。
仰視下的成角透視就顯得剛剛好，如下圖所示，所有元素均用2個立面展示，加上透視形變，這時空間的立體感強，產(chǎn)品和立方體也都有明顯的體積感，視覺平穩(wěn)、飽滿，而且還能體現(xiàn)產(chǎn)品形象的高大，凸顯價值感。
注意2個案例中，視平線上都只有2個滅點，這是因為產(chǎn)品和立方體的排列都很整齊，反之若無序排列，就會產(chǎn)生多個滅點，這樣畫面會顯凌亂，視覺不舒服，所以在表現(xiàn)成角透視時，盡量確保所有元素都能整齊排列。
在成角透視中，俯視視角最常見。因為該視角下的物體可以展現(xiàn)3個面，能進一步強化元素的立體感和方位感，如圖所示，物體的空間關(guān)系明顯，層次分明，構(gòu)圖也平穩(wěn)。
一般成角俯視適合小場景陳列（若是大場景則垂直方向會發(fā)生嚴重形變，這就是后面要講的「斜角透視」），剛好這是手機屏的擅長，小空間配上小角度俯視會給人一種親切感，類似長焦鏡頭的特寫畫面，很好的拉近了觀者的心理距離，因此屬于手機端的常用構(gòu)圖。
空間成角透視
成角透視的優(yōu)勢在于畫面立體、穩(wěn)定和寫實，這些優(yōu)勢剛好適合空間的立體呈現(xiàn)，如下圖所示，成角透視即可用于室內(nèi)塑造 ① 也可用于外形搭建 ② ，類似我們站在空間側(cè)面看整體，此時空間立體、飽滿，結(jié)構(gòu)有張力。
但由于成角透視都是在畫面兩端形成滅點，所以該透視下的空間更適合橫構(gòu)圖，但手機屏卻是豎構(gòu)圖，對于橫向擁擠的豎長屏，成角透視就會有些施展不開，左右狹窄，無法像橫版那樣開闊的展現(xiàn)空間，也沒有平行透視那樣看著規(guī)整，因此使用較少。
物體與畫面存在一定夾角，并且在2點透視的基礎(chǔ)上，再加入了高度變化，這樣垂直方向的連線會向上或者向下匯聚，最終畫面形成3個滅點，又稱「三點透視」。相比成角透視，斜角透視其實就是讓本沒有交集的豎線有了交集，這樣垂直方向就有了強烈的匯聚感。
斜角透視的形變夸張，常用于大型物體的仰視或高處俯瞰，類似廣角拍攝。
如下圖所示，該透視能表現(xiàn)出建筑或空間的宏大感，并且越宏大透視就越強烈。這時畫面的夸張構(gòu)圖會顯得觀者渺小，給人一種壓迫感，也讓場景有著極強沖擊力，同時帶來了更加刺激的視覺感受。
其實只要觀者在場景中顯得很小，這時看到的畫面就會產(chǎn)生斜角透視，例如當(dāng)我們仰望高樓時，相對高樓而言，渺小的我們就會看到斜角透視。
但如果產(chǎn)品展示采用斜角透視時，就會有一種強烈的不真實感，因為相對產(chǎn)品來說，我們并不渺小，所以日常是不會看到這樣的場景，這種場景更像是「昆蟲視角」，如圖所示，斜角透視下，雖然畫面不真實，但會有種特別的戲劇效果。
另外斜角透視沒有平視視角，因為平視物體的豎向邊線依然平行，不會在垂直方向產(chǎn)生第3個滅點，因此仍屬于成角透視。總之只有在大角度仰視或俯視大型物體時，才會看到斜角透視。
這種形變強烈的夸張透視雖然生活中相對少見，但電商中用的還真不少。還記得我們在第2章講創(chuàng)意方法時提過的「獨特視角」嗎？其中一個方向就是使用斜角透視。
這種透視可以體現(xiàn)物體的巨大（仰視）或者場景的宏大（俯視），正是這樣一種不真實也不自然的視覺感受，反倒給人一種強烈的氣勢和沖擊，畫面極具張力的構(gòu)圖往往能脫穎而出，并在第一時間抓人眼球，吸引注意，所以成角透視特別適合大促主題的場景搭建和氛圍營造，下面分視角舉例。
斜角仰視
視能讓物體顯得高大，而斜角仰視則讓物體顯得「巨大」。如圖所示，2個案例中的產(chǎn)品都十分「巨大」，通過這樣一種「刁鉆」視角和夸張手法渲染出了產(chǎn)品氣勢，使產(chǎn)品顯得分量十足，同時也提升了視覺沖擊力，整個場景都變的大氣。其中 ① 由于版面有限，有個滅點沒有標(biāo)示出來。
斜角俯視
當(dāng)我們站在一個很高的地方俯瞰周圍，或者用無人機在高空航拍，這時看到的景象就是斜角俯視。如圖所示，盡管豎構(gòu)圖并不適合展現(xiàn)遼闊的大場面，但在斜角俯視的幫助下，2個案例依然體現(xiàn)了場景的宏大，視覺沖擊強，這種居高臨下感使人視野開闊。
平行斜角透視
斜角透視中還有一種特殊情形——平行斜角透視，就是當(dāng)空間或產(chǎn)品的一面與畫面平行時，此時不管透視多強烈，畫面也只有2個滅點。
如圖所示，當(dāng)立方體的一面正對視點時，側(cè)面便從2個主立面減為了1個，這時除了垂直方向的1個滅點外，原本視平線上的2個也就成了1個，雖然只剩2滅點，但本質(zhì)仍屬于透視強烈的斜角透視。
既然是與畫面平行，那和平行透視有何區(qū)別？
下面看張空間對比圖，能看到2者的形變差異還是相當(dāng)大：左圖為平行透視，像是我們在看一個小方盒，親切、自然、真實；而右圖則是平行斜角透視，更像是我們在仰望一個巨大空間的入口，充滿戲劇性，并有壓迫感。
其實對于手機端，「平行斜角透視」才是斜角透視中的常用形式，因為它的擺放角度很正，這種正面觀察很適合手機端的豎屏構(gòu)圖，而且前后的縱深刻畫也能緩解版面的左右擁擠，另外畫面縱向的匯聚感還能迅速吸引注意，給人一種巨大沖擊力和強烈氛圍感，其中仰視比俯視更加常見。
平行斜角仰視
近幾年這類透視越來越多見，因為它既適合豎構(gòu)圖，也能提升畫面的形式感和表現(xiàn)力，非常利于促銷主題的氛圍打造。
如圖所示，整個畫面就像是我們站在宏大場景的正中央仰望時看到的景象，各元素擺放很正，雖有壓迫感，但空間和產(chǎn)品都顯得非常高大，張力十足，能讓用戶牢牢聚焦，同時也產(chǎn)生了強烈沖擊力，更易在用戶腦海中形成記憶。
平行斜角俯視
在這類透視下我們會感覺自己擁有高高在上的「上帝視角」，元素擺放同樣很正，視野遼闊，場景宏大。但過大的俯視視角會對場景進行一定壓縮，再加上俯瞰產(chǎn)生的遙遠距離感，這樣就顯得元素有些「小氣」，無法體現(xiàn)仰視下的高大，因此畫面的刺激感沒那么強烈，總體相對少見。
以上便是焦點透視的3種類型，我們再來回顧下各自的使用情形，如下圖所示，這是一張3種透視的轉(zhuǎn)換示意圖，都是仰視視角，旁邊小人則是觀察者的大小示意：
希望通過這張示意圖能幫大家更好理解什么時候該用哪種透視，總之小場景搭建一般以「平行透視」和「成角透視」為主，而恢弘的大場景則以「斜角透視」為主。
當(dāng)然現(xiàn)實里的透視遠不會這么單一，根據(jù)物體不同的擺放位置以及不同的觀測距離，很多時候同一畫面也會存在多種透視，例如平行透視和成角透視就經(jīng)常組合出現(xiàn)。
電商設(shè)計也一樣，例如下方案例中，整個空間是平行透視，而里面的盒子則是成角透視，這時視平線上會有3個滅點，其實若產(chǎn)品的擺放再凌亂些，還會出現(xiàn)更多滅點，但這種無序組合會讓空間塑造變的復(fù)雜，看著也不規(guī)整，因此并不推薦。
但要注意不管畫面的透視多復(fù)雜，當(dāng)中的視平線卻只能有1條，并且無論水平方向有多少個滅點，最后也都會落在視平線上。
除了以上3種透視外，其實還有4點透視（超廣角透視）、5點透視（魚眼透視）等等，但都過于復(fù)雜，用的也很少，這里就不做展開。對于電商里的「空間陳列」，3種透視已夠用，它是我們塑造空間的基礎(chǔ)，如果一開始的透視錯了，即便配色、光影做的再出彩那也無用。
總有人說透視難掌握，其實只要我們在生活中多觀察、多留意身邊物體的透視變化和規(guī)律，及時總結(jié)，那這種理性還原就不難做到。當(dāng)然設(shè)計終歸還是理性與感性的雙重表達，所以透視雖要遵循，但切忌生搬硬套，視覺協(xié)調(diào)即可。
講完了焦點透視，我們知道了空間塑造的基本原則，下面就來說說都有哪些陳列場景。
相對PC來說，手機端受屏幕所限，陳列場景其實沒那么復(fù)雜，核心是要先構(gòu)建一個空間，然后讓產(chǎn)品以合適的視角及透視在空間里呈現(xiàn)出來，而這個空間場景則要和主題氛圍、產(chǎn)品氣質(zhì)都高度匹配。
一般來說，手機端常用的陳列場景有4類：盒子陳列、臺面陳列、自然陳列以及舞臺陳列，選擇哪類則要看哪個場景對產(chǎn)品的烘托效果最好。
在介紹每個場景前，我先說說關(guān)于產(chǎn)品組合的2原則，因為很多時候在空間擺放的產(chǎn)品數(shù)量較多，這時它們的組合形式就變的尤其重要，稍不注意就會顯得畫面雜亂無章，不夠協(xié)調(diào)，而且凌亂的擺放也會降低產(chǎn)品的品質(zhì)感，缺少吸引力。關(guān)于組合原則，核心有2點：大小合理以及三角構(gòu)圖。
大小合理
如果將多個產(chǎn)品擺一起，則要確保它們之間的相對大小符合現(xiàn)實中的真實差異，現(xiàn)實中尺寸大的產(chǎn)品就要相對大些，而尺寸小的產(chǎn)品就要相對小一點，這樣才會真實并經(jīng)得起推敲。
而有些設(shè)計師在組合產(chǎn)品時，也不管大小的真實差異，放進版面后就很隨意的放大或縮小，最后出來的組合要不就大小一樣，要不就比例失真，這些都會給用戶一種強烈的不協(xié)調(diào)感和不真實感。
下面再看一組對比圖，明顯大小一樣的左圖會有不適感，也缺少層次；而大小合理的右圖則更有美感也更舒服。
其實大小合理的最終目的是希望整體結(jié)構(gòu)錯落有致，就像右圖一樣，這種有高有低的組合才能體現(xiàn)韻律感和結(jié)構(gòu)美。所以如果可以選擇，那我們就選擇一些尺寸差異較大的產(chǎn)品，盡量避免出現(xiàn)大小差不多的情況。
當(dāng)然如果必須陳列大小一樣的產(chǎn)品，那也可以通過透視或者輔助元素來改善，例如空間里的近大遠小、立方體加高都能改變高度一樣的情形。
三角構(gòu)圖
當(dāng)我們選好不同大小的產(chǎn)品后，就要注意它們的組合形式，千萬不能亂堆一氣，不同的擺放會形成不同結(jié)構(gòu)，而每種結(jié)構(gòu)又會給人不同感受。我們在「圖形分割」中講過「正三角」具有很強的穩(wěn)定性，因此當(dāng)產(chǎn)品采用正三角構(gòu)圖時，會讓人覺得版面平穩(wěn)、視覺舒服。
如圖所示，所謂三角構(gòu)圖，其實就是將尺寸大的產(chǎn)品放中間，而尺寸小的產(chǎn)品放兩邊，這樣不但構(gòu)圖穩(wěn)定，而且畫面也有節(jié)奏和變化?？梢哉f「三角構(gòu)圖」就是空間陳列里最常用的構(gòu)圖方式，而本節(jié)展示的所有案例中，大部分也都是三角構(gòu)圖。
明確了產(chǎn)品的組合原則，知道了如何陳列才舒服，下面就正式講講空間陳列的4類場景。
盒子陳列
「盒子陳列」就是在盒子里面放產(chǎn)品，而盒子多以禮盒為主，使用場景和主題相對單一，基本用于送禮之意的專題頁。創(chuàng)意雖然普通，但卻不易出錯，是種相對安全的表現(xiàn)方式。當(dāng)然若能在盒里加些小心思，畫面也會很出彩，像我之前看過一個新年Banner，就是禮盒里裝著一個大家庭在吃年夜飯的溫馨場景，這樣的新組合便讓人眼前一亮。
另外若能提升禮盒刻畫的精致度，那畫面也會有不錯的設(shè)計感。而盒子外形也不只有方形，常用的還有圓形和異形。觀察視角則以小角度俯視居多，因為這個視角最接近我們?nèi)粘？炊Y盒的真實情形，盒內(nèi)產(chǎn)品在俯視下能看的一清二楚，展現(xiàn)也立體。
盒子陳列的難點在于當(dāng)盒內(nèi)要擺放很多產(chǎn)品時，如何能讓產(chǎn)品真實、自然的呈現(xiàn)，這需要我們既注意擺放的合理性，也能準(zhǔn)確表現(xiàn)透視，還要刻畫出產(chǎn)品的明暗變化，總之只有把握好產(chǎn)品的空間感、立體感以及光影感，畫面才會舒服協(xié)調(diào)。
方形盒是最常用的盒子類型，畢竟也是生活中最常用的禮盒外形，結(jié)構(gòu)感強而且易表現(xiàn)。如下圖所示，禮盒都是成角透視，且左右滅點都在畫面之外，這樣結(jié)構(gòu)最穩(wěn)定，立體感也強。注意盒里的產(chǎn)品呈現(xiàn)，特別是俯視視角下，產(chǎn)品越多越要注意它們是否協(xié)調(diào)統(tǒng)一，透視、光影等細節(jié)一個都不能少，把控不到位就會顯得凌亂，畫面別扭。
圓形盒比較少見，因為和立方體比起來，圓柱體的透視沒那么強烈，結(jié)構(gòu)感偏弱，但圓潤的外形能使畫面變的柔和，給人一種親和力和溫馨感，如圖所示，由于圓形盒沒有明顯塊面，所以不管透視還是光影，刻畫起來都相對簡單。
異形盒是指外形為不規(guī)則形狀的盒子，總體也很少見，但易出彩。形狀用的好便能打破「盒子陳列」的常規(guī)感，使畫面變的新穎有創(chuàng)意。
例如下方案例中，不管是心形、貓頭輪廓還是圣誕樹，都能成為畫面焦點并引人注意。另外盒子呈現(xiàn)均用了「正俯視」視角，其實除了小角度俯視外，這種視角也很常見，因為該視角下的產(chǎn)品陳列清晰完整，盒子外形也能直觀顯示，的展現(xiàn)了其外形的特別之處。
臺面陳列
在空間陳列的4類場景中，「臺面陳列」用的最多，適用范圍也最廣，可以說電商中的大部分主題和產(chǎn)品都能使用，算是一種真正白搭的表現(xiàn)方式。
「臺面陳列」就是在空間里搭建一個「臺面」，然后在上面放置相關(guān)產(chǎn)品。由于該手法還是以放大特寫的小場景為主，元素形變不能太大，因此畫面常用平行透視和成角透視，視角則很靈活，跟著構(gòu)圖走，3種（平視、俯視、仰視）都有。「臺面陳列」上手簡單，場景多變，其中的關(guān)鍵元素——臺面需要根據(jù)主題、場景進行靈活變化，常見有2類：桌面和幾何體。
桌面很好理解，就是桌子頂部的陳列面，所有產(chǎn)品都放置其上。由于桌子是家里常見家具之一，因此桌面陳列往往能傳遞一種「家」的溫暖和溫馨。
可能有人覺得「桌面」形式有些單一，其實遠沒那么簡單，我們不要固化思維，要能靈活變化桌子的樣式和裝飾，例如方桌還是圓桌？木桌還是大理石桌？光面還是鋪桌布？這些都是可變量，再加上視角和周圍環(huán)境的變化，總之形式可以很豐富。
如圖所示，桌面陳列尤其適合各類美食的組合呈現(xiàn)，這時整個場景貼近生活，頗有帶入感。
就是將各種幾何形體作為陳列產(chǎn)品的臺面，幾何體相對抽象，表現(xiàn)場景更多元，因此比具象「桌面」更加常用。
如圖所示，幾何體一般都是組合出現(xiàn)，特別適合多產(chǎn)品陳列，簡約大方，能烘托出產(chǎn)品的品質(zhì)感。同時通過高高低低的大小排列也能表現(xiàn)出畫面的結(jié)構(gòu)美以及層次感，總之是一種 「上手簡單、易出效果」的表現(xiàn)方式。
常用幾何體有「立方體」和「圓柱體」，它們適合陳列，高度調(diào)節(jié)方便，使用靈活。
如下圖所示，整體表現(xiàn)并不復(fù)雜，就是將各種產(chǎn)品放在幾何體上。但作為畫面的核心元素，這時幾何體的形態(tài)、排列、視角和透視就變的非常重要，我們要根據(jù)創(chuàng)意需求和產(chǎn)品氣質(zhì)選擇最合適的展現(xiàn)方式，而這些展現(xiàn)本身就有不錯的形式感。
幾何體陳列既能營造空間關(guān)系和簡約氣質(zhì)，也能讓用戶聚焦產(chǎn)品本身，因為它的外形簡單，不搶產(chǎn)品，不像一些復(fù)雜元素或場景，雖然視覺豐富但最后卻讓產(chǎn)品淹沒其中，這樣就本末倒置。
自然陳列
「自然陳列」需要先創(chuàng)建一個合適的自然環(huán)境，然后再將產(chǎn)品以合適方式融入其中。相對其他場景，自然環(huán)境顯然復(fù)雜一些，呈現(xiàn)手法常以「合成」和「插畫」為主。因為產(chǎn)品都是實物拍攝，為了風(fēng)格統(tǒng)一，自然環(huán)境會偏向?qū)憣嶏L(fēng)格，這樣2者結(jié)合才協(xié)調(diào)。
從下方案例能看到，「自然陳列」常用于季節(jié)感受或者產(chǎn)地溯源等主題，畫面通過「自然場景」?fàn)I造出天然健康的綠色氛圍。而場景中的元素繁多，呈現(xiàn)復(fù)雜，這就需要我們具備優(yōu)秀的整合能力。
對于「自然」塑造，視角以平視和小角度俯視居多，但畫面由于沒有太多的幾何型物體，所以透視沒那么嚴謹，核心是注意近、中、遠景的層次區(qū)分，還有光影的合理添加。如果這些把控不到位，就很可能出現(xiàn)場景雜亂、缺少層次、沒有帶入感的粗糙畫面，最終淪為各種素材的亂堆一氣。
以上列舉的都是以花草樹木為主的自然環(huán)境，確實綠色場景在「自然陳列」中用的也是最多，但除了綠色場景外，有時也會用到其他環(huán)境。如下圖所示，像海底 ① 、沙灘 ② 、海面 ③ 、冰山 ④ 也是適合陳列的自然場景，特別是夏季主題會經(jīng)常用到。
舞臺陳列
最后一類「舞臺陳列」常用于大促主題的氣氛營造，這類場景不挑類目，任何產(chǎn)品放在「舞臺」上，燈光一打，色彩再斑斕些，都能營造出熱鬧的促銷氛圍。
如圖所示，舞臺外形以圓形居多，因為圓形的透視感較弱，構(gòu)圖靈活，而且也符合大家對舞臺的第一印象。舞臺視角則很靈活，3種均很常見，核心是和產(chǎn)品視角保持一致。
關(guān)于「舞臺」塑造，還有2處需要注意的地方：
舞臺外形除了最常用的「圓形」外，還有半圓形、方形和六邊形等等；舞臺造型也可以很豐富，并不局限于常規(guī)的表演舞臺，各種造型都可嘗試，例如上方左四圖就是現(xiàn)代感十足的三維舞臺，總之我們要根據(jù)創(chuàng)意和風(fēng)格塑造相匹配的陳列舞臺。
另外就是燈光運用，可以說這是「舞臺陳列」和其他場景的最大區(qū)別，但燈光也不是越多越好，太多反而顯得眼花繚亂，其實能渲染出絢爛氣氛即可。而有光就有影，在燈光照射下，產(chǎn)品一定要有準(zhǔn)確的光影呼應(yīng)，這樣才不會顯得突兀。例如上方案例中，仔細觀察燈光下的產(chǎn)品呈現(xiàn)，能看到產(chǎn)品表面都產(chǎn)生了被燈光照射后的色彩、明暗等變化，這些細節(jié)刻畫才讓畫面更真實，融合更自然。
本次案例會用膠原蛋白口服液作主體元素，然后用這4類場景（盒子、臺面、自然、舞臺）來設(shè)計4張不同視角、不同風(fēng)格的Banner，讓大家看看在不同場景下，如何將產(chǎn)品融入其中。先展示案例會用到的3種產(chǎn)品視角， 下方案例會根據(jù)不同的場景視角選擇對應(yīng)素材。
「空間陳列法」的內(nèi)容量挺大，主要分成了「焦點透視」和「陳列場景」2大部分來介紹，其中焦點透視是立體「空間」的塑造基礎(chǔ)；而陳列場景則是產(chǎn)品「陳列」的具體環(huán)境。
常用場景有4類：盒子陳列、臺面陳列、自然陳列和舞臺陳列，每種陳列都有各自適用的主題和氛圍：「盒子」常用于溫馨的送禮主題；「臺面」則能根據(jù)不同主題靈活應(yīng)變，屬于百搭場景；而「自然」則適合季節(jié)或者溯源主題，體現(xiàn)天然清新感；最后的「舞臺」則用于氛圍濃烈的大促主題。不管哪種場景，都要確保產(chǎn)品和空間的視角、透視相一致，這樣場景才會真實協(xié)調(diào)。另外多產(chǎn)品陳列時，還要注意它們之間的大小比例以及擺放結(jié)構(gòu)，其中三角結(jié)構(gòu)最常用?？傊谑謾C時代，「空間陳列」是一種真正適合小屏豎構(gòu)圖的表現(xiàn)方式。
文章來源：優(yōu)設(shè) 作者：賢輩
藍藍設(shè)計( www.jghy.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://www.jghy.net