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