2020-9-9 資深UI設(shè)計者
構(gòu)圖、色彩和光影屬于設(shè)計中非常重要的3塊體系，但構(gòu)圖和色彩大多是偏感性的主觀理解，而光影則是理性的客觀判斷。因?yàn)檫@是自然界中真實(shí)存在的物理現(xiàn)象，因此大部分時候畫面的「添加光影」都是在還原真實(shí)，所以本文的很多知識都偏理論和科普，但理性認(rèn)知無疑是打牢光影基礎(chǔ)的第一步。
如果說「構(gòu)圖」和「色彩」是視覺設(shè)計的基礎(chǔ)，那光影便是「錦上添花」，當(dāng)各種視覺元素組合完成后，只有「光影統(tǒng)一」，才能讓所有元素真實(shí)的融在一起，最終形成真實(shí)立體、有層次的畫面，而「光影統(tǒng)一」便是這篇文章的核心原則。
其實(shí)我們看到的萬物色彩，都是物體表面的反射光，是「光」創(chuàng)造了色彩，同時也創(chuàng)造了「影」，只有經(jīng)過光照才會出現(xiàn)明暗，才有所謂的「光影」，所以我們先來說說一切的源頭——光。
發(fā)光的地方就是「光源」，當(dāng)我們對畫面「添加光影」時，一定要先留意光源在哪，像我每次畫設(shè)計草圖時，就會先把主光源的位置確定并標(biāo)示出來，只有清楚位置，「光影統(tǒng)一」才有了依據(jù)。
那常用的光源類型都有哪些呢？其實(shí)就2大類：照射光和環(huán)境光。2類光源往往同時存在，相互影響，塑造場景時必須同時考慮。
照射光就是畫面中的主要照明光，這是影響整體光影的核心光源，根據(jù)光線照射路徑的不同，又分成直射光、散射光和折射光。
直射光
直接照射的光源就是直射光，光線路徑呈方向明確的兩點(diǎn)一線，整體集中、聚焦。
直射光能在物體表面形成強(qiáng)烈的明暗對比，并且過渡偏硬，形成清晰的輪廓邊緣，最常見的直射光就是晴天陽光，它屬于自然光。如下圖所示，陽光直射形成的明暗強(qiáng)對比能呈現(xiàn)人物及建筑的輪廓，突顯立體感。
和自然光相對應(yīng)的是人造光，在人造光中，例如攝影棚里常用的閃光燈和常亮燈（不帶柔光罩）都算直射光，照射效果和晴天陽光類似，仔細(xì)觀察投影，邊緣都很生硬、清晰。
散射光
當(dāng)光束穿過某一介質(zhì)（云層、柔光布等），被其表面分散傳播的光便是散射光，散射光的光線路徑呈多方向發(fā)散狀，整體分散、無明確方向。
自然光中，陰天、雨天、霧天的光照都屬于散射光，當(dāng)陽光穿過大氣時，大氣層能讓光線朝不同方向發(fā)散，發(fā)散后的光線柔和，在物體上形成的明暗對比較弱，過渡也柔和。如下圖所示，不管人物還是景物，都無明顯的陰影輪廓，整體層次豐富而細(xì)膩，影調(diào)柔和，特別是暗部的細(xì)節(jié)都能保留完好。
而人造光中，如果給閃光燈和常亮燈裝上柔光罩，這時發(fā)出的光就會變成散射光。例如下圖中，人物和產(chǎn)品都顯的特別柔和、舒服。
折射光
當(dāng)光束從一個介質(zhì)射入另一介質(zhì)時，傳播方向發(fā)生偏折的光就是折射光。常見介質(zhì)有水、玻璃等，它們的折射角度也各不相同。
日常生活中，像泳池里的水波光影、玻璃杯投射的光線圖案都是與折射相關(guān)的自然現(xiàn)象。
而我們在設(shè)計Banner時，若將這些折射效果表現(xiàn)出來，就會給畫面增添很多細(xì)節(jié)，同時也會增加真實(shí)感，像水波光影在電商中用的就很多。
很多新手在做設(shè)計時，往往只注意照射光（主光源）對物體的影響，而忽略環(huán)境光，導(dǎo)致畫面總是不夠真實(shí)。簡單來說，畫面中除了主光源外的所有光線都算環(huán)境光，環(huán)境光的亮度一般很低，且沒有明確方向性，常見的環(huán)境光有2種：散射光和反射光。
散射光
和照射光一樣，環(huán)境光中也有散射光，但它們的不同在于：
像自然界中的夕陽西下，當(dāng)紅色的太陽光（照射光）減弱時，建筑的暗部便會顯現(xiàn)藍(lán)色的天空光（環(huán)境光），這時紅光和藍(lán)光會形成鮮明對比，極具沖擊和美感，這樣的畫面在攝影及設(shè)計中都非常常見，也是攝影界公認(rèn)的「黃金一小時」，這時的天空光就屬于環(huán)境光中的散射光。
生活中還有一個常見現(xiàn)象也能看到散射光影響，當(dāng)你走在戶外，觀察自己的影子，特別當(dāng)影子較長時（清晨或傍晚），這時離自己越遠(yuǎn)的區(qū)域顏色越淺，這是因?yàn)樵竭h(yuǎn)的影子所處區(qū)域就越開闊，受周圍散射光的影響就越明顯，因而顏色更淺。
反射光
環(huán)境光中還有非常重要的一類是反射光，當(dāng)光束射到介質(zhì)表面時，有部分自介面射回的光就是反射光?？梢院敛豢鋸埖闹v，世界萬物之所以出現(xiàn)明暗就是因?yàn)榉瓷涔獾拇嬖?。反射光一般?種情形：鏡面反射和漫反射。
鏡面反射。當(dāng)反射面非常光滑，這時平行射入的光線仍會向一個方向平行的反射出來，效果如同鏡子一樣，雖然這樣物體本身的明暗就會非常微弱，但人們透過反射面能看到周圍的環(huán)境信息，這就是鏡面反射光。
日常生活中像平靜水面、鏡子、拋光金屬等都會有鏡面反射光，例如我們在刻畫金屬材質(zhì)的元素時，常常會在表面加些近乎白色的高光，這就是由于鏡面反射而進(jìn)入眼中的刺目強(qiáng)光。
另外晴空萬里時，海面也常出現(xiàn)「波光粼粼」的閃光，同樣也是陽光射入水面的鏡面反射光。
漫反射光。當(dāng)反射面凹凸不平時，這時平行射入的光線就會向各個方向反射出去，這便是漫反射光（以下簡稱「漫射光」）。需要說明這里的凹凸不平也包括微觀結(jié)構(gòu)，例如有些墻壁看著光滑，但仔細(xì)看表面也有粗糙顆粒，這時反射出來的光線也是各個方向的漫射光。
漫反射在這個世界里無處不在，它是我們對物體形態(tài)及色彩產(chǎn)生明確認(rèn)知的基礎(chǔ)。
因?yàn)橛新瓷涞拇嬖冢矬w才會有清晰的明暗關(guān)系，我們才能看清這個世界，它賦予了物體縱深感和體積感，不管是產(chǎn)品還是環(huán)境皆是如此。
這里列舉一個設(shè)計中常用的漫反射現(xiàn)象，我們將一個白色茶杯放入一個綠色盒中，打上一束光，這時茶杯整體都帶有綠色調(diào)，這是因?yàn)楹凶颖砻娈a(chǎn)生了大量綠色的漫射光，這些光束射在茶杯上，進(jìn)而發(fā)生偏色現(xiàn)象，如下圖所示。
可見環(huán)境色對物體的視覺影響還是相當(dāng)明顯。再如下圖中，當(dāng)模特處于一個紅色空間時，受到環(huán)境中紅色漫射光的影響，模特也明顯偏向紅色，這時我們就說環(huán)境光影響了這位模特的「色彩平衡」，關(guān)于「色彩平衡」在后面還會細(xì)講。
當(dāng)然現(xiàn)實(shí)是復(fù)雜的，其實(shí)還有大量物體會同時存在鏡面反射光和漫射光，誰的強(qiáng)度大誰就更突出，例如起風(fēng)時的水面，就不全是鏡面反射，還有漫反射，這里就不再深究。
小結(jié)
以上提到的「照射光」和「環(huán)境光」便是設(shè)計中常用的2大光源類型，這2類往往是同時存在，一般照射光會直接影響物體的明暗結(jié)構(gòu)，而環(huán)境光則影響物體的色彩平衡及反光。
只有把這些光影都表現(xiàn)清楚，畫面才更有代入感。其中對于照射光的理解，絕不僅僅是考慮直射或散射這么簡單，還需分析照射方向、照射角度、照射形狀、光源距離、光源強(qiáng)度、光源軟硬、光源大小、光源顏色等因素，待會會針對這些因素展開講解。
前面介紹了光源類型，主要讓大家對「光」有個整體認(rèn)知，內(nèi)容偏科普，屬于「光影」的理論基礎(chǔ)，現(xiàn)在開始講「影」，這塊內(nèi)容更偏實(shí)戰(zhàn)運(yùn)用，教大家如何在設(shè)計中準(zhǔn)確表達(dá)光影。本文的「影」涵蓋兩塊內(nèi)容：物體的明暗和投影，其中物體是泛指，包含電商常用的兩大元素：人物和產(chǎn)品。
先說物體明暗，當(dāng)光源發(fā)出的光線射向物體時，由于光反射，物體會有對應(yīng)的明暗變化，記得在高中學(xué)習(xí)素描時，老師就曾提過光影的「五大調(diào)」，這正是人們對物體明暗關(guān)系的理論化總結(jié)。
但現(xiàn)實(shí)世界卻要復(fù)雜的多，因?yàn)槲矬w光影還與材質(zhì)密切相關(guān)，不同材質(zhì)的明暗關(guān)系截然不同，所以決不能撇開材質(zhì)談明暗，而設(shè)計中常用材質(zhì)有三大類：漫反射材質(zhì)、鏡面反射材質(zhì)和透明/半透明材質(zhì)。
不管現(xiàn)實(shí)世界還是電商視覺，漫反射材質(zhì)都是最常見的材質(zhì)，因?yàn)檫@類材質(zhì)的光影最有規(guī)律也最有代表性，明暗關(guān)系也簡單很多，剛剛說的「素描五大調(diào)」就是針對漫反射材質(zhì)，那我們就從這類材質(zhì)入手，詳細(xì)講講漫反射的光影到底如何呈現(xiàn)。
「漫反射材質(zhì)」是指表面產(chǎn)生漫反射光的材質(zhì)，日常生活中，漫反射材質(zhì)（以下簡稱「漫射材質(zhì)」）的物體占據(jù)大多數(shù)，像棉布、啞光紙、啞光塑料甚至人類肌膚等等都屬于漫射材質(zhì)。
而我們在刻畫漫射材質(zhì)的物體明暗時，需遵循3點(diǎn)原則：近亮遠(yuǎn)暗、先整體再局部以及細(xì)節(jié)刻畫。
近亮遠(yuǎn)暗
對于漫射材質(zhì)，首先一個大原則就是「近亮遠(yuǎn)暗」：
以畫面的主光源（照射光）為圓心，物體距離光源越近會越亮，越遠(yuǎn)則越暗。
對單個物體來說，距離近的就是亮面（受光面），而距離遠(yuǎn)的是暗面（背光面），如下圖所示。
在很多攝影或設(shè)計作品中，能看到不管人物還是產(chǎn)品，都會遵循這一原則：距離主光源越遠(yuǎn)則越暗。
先整體再局部
在「近亮遠(yuǎn)暗」的大原則下，先確定物體的整體光影，表現(xiàn)三大面（亮面、灰面、暗面），其本質(zhì)就是在固有色（物體在白色光下所呈現(xiàn)的色彩）的基礎(chǔ)上進(jìn)行深淺色調(diào)的變化。
然后再添加物體的局部光影，這個局部主要針對有塊面的物體（立方體），「局部光影」意味著亮面和灰面也要分別遵循「近亮遠(yuǎn)暗」原則（由于暗面是背光，不受主光源影響，所以不在遵循范圍內(nèi)），這樣光影才會更有層次。而沒有明顯塊面的曲面物體（球體）則把握好整體光影即可，或許聽著有些復(fù)雜，下面通過圖例強(qiáng)化理解。
細(xì)節(jié)刻畫
最后是刻畫光影細(xì)節(jié)，這里列出2個常見細(xì)節(jié)，這些細(xì)節(jié)雖不影響整體明暗，但會讓物體光影更加細(xì)膩和真實(shí)，屬于「加分項(xiàng)」。
物體表面最亮的地方就是高光，高光其實(shí)不是光，而是直接反射主光源的地方，如果要給漫射材質(zhì)的球體添加高光，那在亮面添加一個羽化的圓斑即可。
往往越光滑的物體高光就越清晰。但對漫射材質(zhì)而言，高光不會很清晰，不過模糊程度要看物體的固有色以及粗糙度，粗糙度越大的物體高光越模糊。另外高光的外形還和物體的本身結(jié)構(gòu)有關(guān)。
在表現(xiàn)高光時，還有一塊高光區(qū)也經(jīng)常被刻畫出來，那就是塊面物體的「倒角高光」。
「倒角」其實(shí)是個工業(yè)設(shè)計術(shù)語，三維設(shè)計也常提到，一般塊面物體的棱角通常會做些圓滑過渡，這種過渡結(jié)構(gòu)就是倒角，有了倒角，轉(zhuǎn)折才不會「鋒利」，這時若有光線照射到表面，倒角處便會形成高光線。
一般亮面和灰面轉(zhuǎn)折處的倒角高光最亮，而灰面和暗面的轉(zhuǎn)折處最暗，核心還是遵循「近亮遠(yuǎn)暗」原則。
電商設(shè)計中，若給塊面物體加上「倒角高光」，細(xì)節(jié)無疑更豐富，也更耐看。仔細(xì)看下圖，在塊面轉(zhuǎn)折處都有明顯的亮線勾勒，雖然不是很起眼，但這就是常說的「設(shè)計細(xì)節(jié)」。
當(dāng)2個物體相鄰時，它們相鄰的那面會有「重合陰影區(qū)」，并且物體離的越近，陰影會越深。這是因?yàn)橄噜徔臻g隨著物體間距越小，接受的環(huán)境光也會越來越少。
「重合陰影」是一個非常容易被大家忽略的設(shè)計細(xì)節(jié)，但若表現(xiàn)得當(dāng)，就能提升作品的精細(xì)度，如下圖所示。
說完漫射物體的明暗刻畫原則，接下來講講周圍環(huán)境對物體的影響，還記得剛剛講過的環(huán)境光嗎？環(huán)境中除了主光源外的一切光線都是環(huán)境光。
而「環(huán)境色」則是環(huán)境光中的一種情形：就是當(dāng)周圍環(huán)境有明確色彩時，這時產(chǎn)生的環(huán)境光會給物體帶來怎樣的影響？主要影響其實(shí)有2方面：物體的色彩平衡和反光，實(shí)際表現(xiàn)時也是從這兩點(diǎn)入手。
色彩平衡
「色彩平衡」是PS中的一項(xiàng)調(diào)色工具，主要是調(diào)節(jié)畫面的整體色彩。既可校正畫面的偏色，使色彩舒適平衡；也可反其道而行之，根據(jù)場景和需求讓畫面有意偏向某種顏色。例如下圖中的人物，受環(huán)境色影響就明顯偏向黃色。
所以當(dāng)物體處在一個有明確色彩的環(huán)境時，受環(huán)境四周的漫射光影響，整個物體都會偏向環(huán)境色，注意由于暗面受到的影響更大，因此暗面的偏色現(xiàn)象也會更加明顯?？傊矬w偏色程度是和其固有色、材質(zhì)及漫射光強(qiáng)度都息息相關(guān)。
反光
一般物體都是放置在地面上，而地面作為環(huán)境的一部分也會出現(xiàn)漫射光，這部分光線射到物體上就會形成一層微弱的亮面，這就是「反光」。
其中物體表面離地面越近的地方反光就越強(qiáng)，一般來說反光最強(qiáng)處就是物體暗面最靠近地面的地方。但不管如何反光都不宜過亮，更不能超過物體亮面。
上圖是環(huán)境為白色的情形，而當(dāng)環(huán)境有明確色彩時，這時反光面就應(yīng)呈現(xiàn)環(huán)境色，如下圖所示，物體的反光都是淺藍(lán)色。
另外能產(chǎn)生「反光」的不單單是地面，其實(shí)只要離物體較近且能反射光線的面都能讓物體產(chǎn)生「反光」。
例如下圖中，就能明顯看到白色瓶子的右側(cè)有一層綠色「反光」，這是因?yàn)榕赃叺木G色外盒反射出的綠色光線射在了瓶身表面。
再如戶外拍攝人像時，有時為了不讓暗部過暗，往往會在旁邊添上一塊「反光板」，這個反光板所起作用就是讓臉部的背光面產(chǎn)生反光，以達(dá)到提亮暗部的目的。
小結(jié)
綜上所述，周圍環(huán)境的漫射光影響著物體的色彩平衡；而地面（也可是離物體較近的面）的漫射光則為物體暗面添加了反光。
為何要單獨(dú)講解環(huán)境色影響？因?yàn)楝F(xiàn)在很多Banner都是在一個有色背景中添加人物或產(chǎn)品，其實(shí)就可理解成是將物體放入一個環(huán)境色中，這時若想和背景自然融合，就需要它們的色彩平衡及反光都偏向背景色，不然整體就會失真。
總之調(diào)節(jié)「色彩平衡」能讓物體融進(jìn)有色背景中；而添加「反光」可使物體更加通透，體積感也更強(qiáng)，下面展示2個融合不錯的案例。
在實(shí)戰(zhàn)案例中，我們會給2款產(chǎn)品分別添加一個藍(lán)色背景，然后用 「明暗原則」及「環(huán)境色影響」中提到的方法給產(chǎn)品加上光影，并將它們?nèi)谶M(jìn)背景中（由于投影在后面才會提到，所以當(dāng)前為保畫面完整性，關(guān)于投影部分只先添加，但不展開細(xì)講）。因?yàn)槲矬w的明暗、投影和光源屬性密切相關(guān)，因此這里先設(shè)定主光源來自畫面左上方、強(qiáng)度中等、軟硬適中、白光，下面看具體如何呈現(xiàn)。
在上述案例中，我們事先給主光源做了一個設(shè)定，為何要這么做呢？因?yàn)橹鞴庠吹暮芏嘁蛩囟贾苯記Q定了物體會呈現(xiàn)怎樣的光影，特別當(dāng)畫面有多個物體時，只有確定了光才能使它們「光影統(tǒng)一」。
例如剛剛通過左上角的主光源能判斷畫面屬于側(cè)光，那產(chǎn)品也是對應(yīng)的側(cè)光影，如果位置改變那光影也將發(fā)生改變，那光源的眾多因素究竟會讓物體產(chǎn)生哪些不同？下面一一細(xì)說。
照射方向
先說光源的照射方向，主要會影響物體的「明暗配比」，隨著方向不同，物體明暗也在發(fā)生微妙的變化，同時還會影響畫面的情感表達(dá)，所以照射方向是我們首先就要確定的因素，一般方向有7種。
而在實(shí)際運(yùn)用時，常用方向是4種：前側(cè)光、側(cè)光、側(cè)逆光、逆光，這4種我們分成2組來講。（其他方向由于使用較少，就不展開）
前側(cè)光/側(cè)光。當(dāng)光源的照射方向和視線方向成30°-60°夾角時稱為前側(cè)光；而當(dāng)夾角成90°時則為側(cè)光。如圖所示，前側(cè)光一般明多暗少；側(cè)光則是明暗對半。
下面再看產(chǎn)品在前側(cè)光及側(cè)光下的光影呈現(xiàn)，主要區(qū)別在于明暗比例的變化，但變化很微妙，區(qū)分沒有那么明顯。這里我是用PS對產(chǎn)品進(jìn)行的光影調(diào)整，因?yàn)槿粘９ぷ髦?，PS處理光影才是大家的常用方法。
前側(cè)光及側(cè)光是電商設(shè)計中最常用的布光方式，這樣不管人物還是產(chǎn)品，明暗比例都比較適中，既能保證物體的亮度，也能很好的凸顯物體形態(tài)和質(zhì)感，所以大量Banner的主體展示都會采用這種布光方式，下面看案例。
側(cè)逆光/逆光。當(dāng)光源的照射方向和視線方向成120°-150°夾角時稱為側(cè)逆光；而當(dāng)夾角成180°時則為逆光。如圖所示，側(cè)逆光和前側(cè)光剛好相反，物體是明少暗多；而逆光時的物體則幾乎全是暗面?？傮w來說，不管側(cè)逆光還是逆光，物體都以暗調(diào)為主。
再看看產(chǎn)品在側(cè)逆光及逆光下的光影該如何處理，雖然產(chǎn)品看著有些灰暗，但場景卻頗有氛圍和調(diào)性。
這也是一組常見的布光方式，和前測光/側(cè)光主要凸顯物體的立體感不同，側(cè)逆光及逆光主要是營造獨(dú)特的場景氛圍。
其中要特別注意物體背光面的暗調(diào)程度，根據(jù)需求提亮或壓暗，但多數(shù)時候都不會調(diào)的太暗，還是會保留物體該有的一切細(xì)節(jié)，避免色調(diào)過深而丟失了暗部層次，如下圖所示，元素的背光面依然都清晰可見。
逆光其實(shí)很有趣，當(dāng)光照強(qiáng)烈、光質(zhì)偏硬時，物體邊緣就會出現(xiàn)一圈非常明顯的高光，高光顏色和光源顏色一致，這就是「輪廓光」。光照強(qiáng)度越大、光質(zhì)越硬，輪廓光就越明顯。
輪廓光一直都是攝影師的最愛之一，如圖所示，它能勾出人物輪廓，進(jìn)而分離人物和背景，讓影調(diào)富有變化，提升畫面層次和細(xì)節(jié)。
在電商設(shè)計中也同樣常見，例如下圖中，仔細(xì)觀察人物和產(chǎn)品的邊緣，有些地方會有一層非常高亮的「輪廓光」，這處光影細(xì)節(jié)使畫面更具形式感和設(shè)計感。
還有一種情形也頗有藝術(shù)感，如果物體完全背光，這時背景偏亮而物體正面又無光時，就會形成「剪影」效果。在攝影中這是一種很有趣的拍攝方式，如圖所示，圖中的人物剪影會給觀眾留下豐富的想象空間。
在電商設(shè)計中，剪影同樣以表現(xiàn)人物或產(chǎn)品輪廓為主，突出整體造型，「剪影構(gòu)圖」會更強(qiáng)調(diào)畫面的形式感傳達(dá)。
光源強(qiáng)度/距離
光源強(qiáng)度和距離會影響物體明暗的反差大小，強(qiáng)度越弱或距離越遠(yuǎn)則物體明暗反差越??；而強(qiáng)度越強(qiáng)或距離越近則明暗反差越大。
原因很好理解，先說光源強(qiáng)度，當(dāng)光源增強(qiáng)時，周圍環(huán)境和物體的受光面會更亮，因此亮面和暗面的反差也會更大。還有距離同樣如此，所有人造光源的光照都有衰減性，而光源強(qiáng)度隨著距離拉近而升高，因而距離越近的光源，照射強(qiáng)度同樣增強(qiáng)。
需要注意，還有一類光源是自然光，自然光比較特殊，如果在室外環(huán)境下，任何時候的光照（晴天、陰天等）都不會有衰減現(xiàn)象，因?yàn)樽鳛楣庠吹奶柼珡?qiáng)，距離太遠(yuǎn)，衰減可忽略不計。
但若在室內(nèi)，陰天從窗外射入的自然光則會有衰減性，因?yàn)檫@時的光線以散射光為主，而這類光照要弱的多，再加上窗外射到室內(nèi)的輻射范圍有限，所以衰減性便會顯現(xiàn)出來，如下圖所示。
光源強(qiáng)度和距離對產(chǎn)品的明暗影響也同樣如此：左圖設(shè)定的光源強(qiáng)度弱、距離遠(yuǎn)，因而產(chǎn)品的明暗反差?。欢覉D設(shè)定的光源強(qiáng)度強(qiáng)、距離近，因而明暗反差更大。
如果選擇明暗弱反差，為避免畫面灰暗，我們需要提升畫面的曝光值，使整體明亮。
在實(shí)際運(yùn)用時，明暗弱反差降低了明暗對比，人物或產(chǎn)品都沒有很深的陰影，整體呈現(xiàn)清晰、柔和，同時也弱化了結(jié)構(gòu)和立體感，如圖所示。
而明暗強(qiáng)反差則讓人物或產(chǎn)品的明暗對比強(qiáng)烈，陰影明顯，質(zhì)感凸顯，更強(qiáng)調(diào)整體結(jié)構(gòu)和立體感，如圖所示。
光源軟硬
喜歡攝影的朋友對這個詞應(yīng)該再熟悉不過，是指光的性質(zhì)（簡稱「光質(zhì)」）變化，分成硬光和軟光。
一般直射光屬于硬光，而散射光和漫射光則屬軟光。光源軟硬會影響物體的明暗過渡，硬光的光照直接，會讓物體的明暗過渡更為生硬，有明顯的陰影輪廓，突出表面結(jié)構(gòu)和質(zhì)感；而軟光的光照柔和，能讓物體的明暗過渡更為自然，無明顯的陰影輪廓，突出表面層次和細(xì)節(jié)。
另外在同等的光照強(qiáng)度下，由于軟光的光線呈分散狀，所以相比硬光，明暗反差也相對較小，如下圖所示。
下面再展示產(chǎn)品在硬光和軟光下的光影刻畫，明顯左圖的影調(diào)更為硬朗。
在設(shè)計時，硬光常用來表現(xiàn)人物的強(qiáng)勁、硬朗和力量，常用于男性、運(yùn)動、健身等類目，另外也能凸顯產(chǎn)品的結(jié)構(gòu)和造型，提升質(zhì)感和立體感。
軟光則側(cè)重表現(xiàn)人物的柔美、清新和嬌嫩，常用于少女、兒童等類目；而用于產(chǎn)品則會讓其表面的層次細(xì)膩而豐富，更接近生活里的真實(shí)呈現(xiàn)。
光源顏色
最后是光的顏色（簡稱「光色」），光色變化會影響物體的表面顏色，由于人們對色彩的敏感度很高，所以眾多因素中，光色帶來的影響最為直觀。
一般來說，不管物體的固有色如何變化，表面呈現(xiàn)的都是光線顏色，只是明暗程度會有不同。如圖所示，當(dāng)紅光照在球體上，亮面會呈現(xiàn)紅色；而綠光照射則會是綠色。
若產(chǎn)品被有色光照射時，受光面同樣會出現(xiàn)對應(yīng)的光色，這時畫面會更生動，同時也提升了用戶的視覺印象。
在日常設(shè)計中，使用有色光算是「戲劇化用光」的一種手法，如圖所示，當(dāng)畫面出現(xiàn)光色變化和鮮明對比時，畫面會更有沖擊和氛圍，也讓場景帶有強(qiáng)烈的情緒感。
小結(jié)
以上便是影響物體明暗的4個光源因素：照射方向、光源強(qiáng)度/距離、光源軟硬以及光源顏色。
通過相關(guān)案例，細(xì)心的小伙伴該會發(fā)現(xiàn)，當(dāng)照射光的這些因素發(fā)生改變時，不單單是物體表面的明暗會有變化，其實(shí)投影也有明顯不同，確實(shí)物體的明暗和投影都是緊密相關(guān)，正因?yàn)橥队疤^重要，所以接下來單獨(dú)介紹。
前面提到本文的「影」會涵蓋兩塊內(nèi)容：物體的明暗和投影?，F(xiàn)在就說說投影，我們還是從最具代表性的漫射材質(zhì)入手。
何為投影？簡單說就是光線照射不到的地方。它是光影表現(xiàn)中非常重要的一環(huán)，有了投影，環(huán)境中的物體才有真實(shí)感，并和環(huán)境產(chǎn)生呼應(yīng)關(guān)系，給人帶來現(xiàn)實(shí)感。
而投影呈現(xiàn)，就屬于典型的看著簡單其實(shí)復(fù)雜的細(xì)節(jié)刻畫，新手往往覺得投影不就是添加黑色的模糊橢圓嗎，偶爾雖然可行，但這并不適用所有場景。設(shè)計師真正要做的，是能根據(jù)各類場景準(zhǔn)確表現(xiàn)出讓人舒服的物體投影。而物體投影，又分為表面投影和地面投影，投在物體表面的是表面投影；而物體投在地面的就是地面投影。
剛剛講「照射光影響」時提過，當(dāng)光源強(qiáng)度、軟硬等因素改變時，物體的投影也會有明顯不同，那接下來我們就看看物體投影到底受哪些因素影響？又會有哪些不同？刻畫時考慮的要素都有哪些？相信看完會刷新大家對投影的認(rèn)知，原來看似簡單的投影竟藏有這么多細(xì)節(jié)！
首先要考慮投影的方向，這是大前提，它和光源位置密切相關(guān)，核心原則是投影永遠(yuǎn)在光源相對的一面，屬于光源光線的延伸。如圖所示，當(dāng)畫面有多個物體時，要確保所有影子都和光源的光線方向保持一致，若不一致畫面就有違和感。
下面看案例，注意有時畫面的光源位置并不明顯，會在畫面外，例如右圖，這時就要事先設(shè)定一個光源位置，然后確保所有物體的投影都處在光源光線的延伸線上，這樣才合情合理。
確認(rèn)方向后就要開始繪制投影的輪廓，這是投影表現(xiàn)中最難的一步，很多畫面的投影看著很假往往就是輪廓出了問題，一個優(yōu)秀設(shè)計師要能準(zhǔn)確呈現(xiàn)出物體投在地面的真實(shí)形狀，而不是所有投影都是一個圓形或矩形。那怎樣才能準(zhǔn)確的勾出外形呢？我們需從以下3點(diǎn)來考慮：基本外形、發(fā)散程度和外形起伏。
基本外形
是指物體在光源照射下投在平面上的基礎(chǔ)形狀，關(guān)于形狀繪制有章可循，但需用到我們在高中「立體幾何」中所掌握的空間感。
總體來說，是先把光源的「位置點(diǎn)」和物體的各個「頂點(diǎn)」連成直線，再把每條直線延長至所在平面，這樣就能得到多個「交點(diǎn)」，最后把平面投影外圍的所有「交點(diǎn)」連接起來便會得到準(zhǔn)確輪廓，如下圖所示。
上方是單個長方體的投影外形，可能這樣的簡單物體還比較好呈現(xiàn)，那復(fù)雜物體呢？其實(shí)用同樣方法即可，如下圖所示，我們先用上述方法將2個長方體的投影輪廓分別呈現(xiàn)，再合并就好。只是這時的空間更復(fù)雜，頂點(diǎn)也更多，我們要有足夠的眼力和耐心。
需要說明，在單一光源下，當(dāng)畫面有多個物體組合出現(xiàn)時，所有物體的投影都是相加關(guān)系。即是說當(dāng)多個投影有交集時，這些交集區(qū)域不會產(chǎn)生更深的疊加投影。
但以上只針對單一光源產(chǎn)生單一投影時的情況，若畫面有多個光源并讓物體產(chǎn)生了多個方向的投影時，此時投影便成疊加關(guān)系。
如下圖所示，示意圖和案例中都有2個主光源，因此物體產(chǎn)生了2個相交投影，投影的交集區(qū)域最深，而非交集區(qū)域由于光源的相互影響則會變淺。
最后通過投影基本形的繪制方法我們還能得出一個結(jié)論：影子長短和光源光線的入射角有關(guān)。入射光線和垂直地面的法線夾角就是入射角，入射角越大投影越長，入射角越小則投影越短。
準(zhǔn)確的投影輪廓能讓產(chǎn)品呈現(xiàn)更真實(shí)，也更有美感，下面展示2個優(yōu)秀案例，當(dāng)然這些的前提是要光源為硬光，只有硬光才會有清晰的投影輪廓。
發(fā)散程度
接著要考慮投影外形的發(fā)散程度，「發(fā)散」是說投影輪廓離物體越遠(yuǎn)則開口越大。所有物體的投影都有發(fā)散現(xiàn)象，只是程度不同，這和光源的面積大小及光源距離有關(guān)。
先說光源大小，光源面積越大則發(fā)散程度越小；而面積越小則發(fā)散程度越大。
再說光源距離，距離物體越遠(yuǎn)則發(fā)散程度越??；而距離越近則發(fā)散程度越大。
例如太陽距離地球就非常遙遠(yuǎn)，因此室外物體的影子擴(kuò)散程度會非常小，像下圖中的樹木，投影都接近于平行。
其實(shí)距離遠(yuǎn)近是光源非常重要的一個分析維度，它影響的因素有很多，不光是投影發(fā)散，還會影響投影的深淺和虛實(shí)，后面再細(xì)說。
一般在電商設(shè)計中，擴(kuò)散程度較小的投影用的更多，畢竟生活中這類投影更加常見，呈現(xiàn)出來的影子也會比較自然和真實(shí)。
擴(kuò)散程度較大的投影雖然用的不多，但使用恰當(dāng)則會讓畫面充滿張力和氛圍，使人眼前一亮，如下圖所示。
外形起伏
投影的輪廓繪制還需考慮外形起伏，「起伏」是說投影不光要有二維平面的形狀變化，還要根據(jù)地面凹凸進(jìn)行縱向的起伏調(diào)整。
其中地面凸起主要指「墻面」；而地面凹陷則指「階梯」；最后還有地面凹凸不平的「肌理」呈現(xiàn)。
當(dāng)?shù)孛嫱蛊鹦纬深愃啤笁γ妗菇Y(jié)構(gòu)時，如果物體的影子長度大于墻面間距時，就會出現(xiàn)「投影上墻」現(xiàn)象，這是因?yàn)閴γ嬉矔霈F(xiàn)一塊光線照射不到的區(qū)域，如下圖所示。
在設(shè)計時，如果投影剛好出現(xiàn)在產(chǎn)品和墻面的中間區(qū)域時，最好都設(shè)計成「投影上墻」的布光效果，這樣兩個元素間（產(chǎn)品和墻面）就會產(chǎn)生呼應(yīng)和聯(lián)動，整體感更強(qiáng)。
當(dāng)?shù)孛姘枷莩霈F(xiàn)類似「階梯」結(jié)構(gòu)時，如果物體的影子長度大于階梯轉(zhuǎn)角的間距時，就會出現(xiàn)「投影下沉」，如圖所示。
這里要注意一個關(guān)鍵點(diǎn)，上圖中的主光源出現(xiàn)在物體背面，屬于側(cè)逆光，這時「階梯結(jié)構(gòu)」受光照影響也會出現(xiàn)暗面，和投影一樣，都屬于光線照不到的區(qū)域，因此在階梯轉(zhuǎn)角的背光面，不會出現(xiàn)物體投影，有時設(shè)計師會順手將物體投影疊加在轉(zhuǎn)角暗面，其實(shí)是錯誤呈現(xiàn)。
我們在觀察下生活中的真實(shí)投影，下方是我隨手拍的一張屋頂照片，上午9點(diǎn)，欄桿在屋頂投下了長長的影子，可以清晰看到，圈中擋板的背光面并沒有欄桿投影，就像被斷開了一樣。這是因?yàn)樵搮^(qū)域都是背光面，不可能出現(xiàn)投影疊加的反?，F(xiàn)象。
因此我們在設(shè)計時要額外注意，千萬不要犯這種「投影疊加」的常識性錯誤，仔細(xì)觀察下方作品中方塊轉(zhuǎn)角的背光面，都不會出現(xiàn)產(chǎn)品投影的疊加現(xiàn)象。
有時地面還會以「肌理」方式呈現(xiàn)，像常見的草地、水面、沙灘等等，如圖所示，它們的表面都是凹凸不平，因此投影外形也要根據(jù)肌理起伏進(jìn)行形態(tài)變化，這樣才不會顯得投影「太假」。
雖然投影的輪廓繪制我是從3小點(diǎn)依次展開，但實(shí)際設(shè)計時應(yīng)該一氣呵成，根據(jù)畫面的光源同時確定投影外形、發(fā)散程度以及起伏，最終是為營造出物體在環(huán)境里的真實(shí)存在感。
有了投影的「形」，現(xiàn)在我們要確定投影的「色」。很多新手在添加投影時不管周圍的環(huán)境色是什么，都會給影子直接填充黑色，最后導(dǎo)致影子在畫面中格格不入，像是多余的存在。
其實(shí)投影呈黑色的情況非常少見，由于受到周圍漫射光的影響，大部分時候都是跟著地面顏色走，這是總體原則。具體是會先給投影填上地面色，并將混合模式設(shè)成「正片疊底」，再將透明度調(diào)至合適數(shù)值即可。
仔細(xì)觀察下方案例，投影并非「黑色」，都是深色調(diào)的地面色，這樣投影才不至于突兀。
既然投影都是深色調(diào)的地面色，那到底「多深」才合適呢？這就需要我們調(diào)整投影的深淺。關(guān)于投影深淺，需從2個維度來調(diào)整：整體深淺和相對深淺。
整體深淺
整體深淺是指投影的整體明暗，和上節(jié)講的「物體明暗」一樣，都是受光源強(qiáng)度和距離的影響。其中「深淺」是說環(huán)境明暗的反差大小，因此所謂的「投影深」其實(shí)是由于環(huán)境的明暗反差很大，反之亦然。
如下圖所示，光源強(qiáng)度越強(qiáng)則投影的明暗反差越大（投影深）；而光源強(qiáng)度越弱則投影的明暗反差越?。ㄍ队皽\），因此投影的整體深淺是相對周圍環(huán)境而言的。
另外整體深淺還受光源的距離影響，由于光線有衰減性，光源距離越近則投影的明暗反差越大，而距離越遠(yuǎn)則投影的明暗反差越小。例如下方案例中，明顯左圖的明暗對比更強(qiáng)，投影更深。
相對深淺
相對深淺是指投影自身的明暗變化，即是說投影本身的明暗分布并不一致，哪怕整體很深的投影，但本身還是會有相對的深淺變化，具體則看投影所處區(qū)域的開闊程度：開闊程度越小投影越深；而開闊程度越大則投影越淺。
一般情況下，靠近物體底部的區(qū)域開闊程度最小，接受的環(huán)境光（散射光/反射光）也最少，所以投影最深；而離物體最遠(yuǎn)的區(qū)域開闊程度最大，能接受的環(huán)境光也最多，所以投影最淺。
綜上所述，整體是遵循著「近深遠(yuǎn)淺」的原則，投影靠近物體的區(qū)域更深；而遠(yuǎn)離物體的區(qū)域更淺。該理論看似復(fù)雜其實(shí)簡單，下面我再用一張示意圖進(jìn)一步說明。
若要表現(xiàn)投影的「相對深淺」，我們要重點(diǎn)呈現(xiàn)3個區(qū)域：
這3個區(qū)域會沿著投影輪廓呈直線分布，如下圖所示，在實(shí)際設(shè)計時，投影的暗角區(qū)往往是單獨(dú)的薄薄一層（作為點(diǎn)綴，面積不能太大），而本影區(qū)和半影區(qū)則會合并成另一層（色調(diào)由深到淺的漸變層），這樣刻畫產(chǎn)品投影時就是用這2個圖層來呈現(xiàn)。
再看電商作品中，物體的投影刻畫也是分2層呈現(xiàn)，注意物體底部的暗角區(qū)色調(diào)最深。
投影呈現(xiàn)的最后還要調(diào)整「虛實(shí)」：「虛」是說投影的邊緣模糊；而「實(shí)」是說投影的邊緣清晰。和深淺一樣，虛實(shí)也分整體虛實(shí)和相對虛實(shí)。
整體虛實(shí)
投影的整體虛實(shí)是和光源軟硬及距離有關(guān)，先說光源軟硬，上節(jié)曾說過「光源的軟硬會影響物體的明暗過渡」，那現(xiàn)在還可加一點(diǎn)，光源的軟硬同時也影響著物體的投影虛實(shí)。
當(dāng)光源為硬光時，光照直接，這時投影整體偏實(shí)、邊緣清晰、過渡生硬；而當(dāng)光源為軟光時，光照柔和，光線分散，這時投影整體偏虛、邊緣模糊、過渡柔和。
除了光源軟硬，還有光源距離，光源距離越近則投影越虛；而距離越遠(yuǎn)則投影越實(shí)。
這是因?yàn)楣庠吹木嚯x越近，相交的光線就越多，這時光線的相交區(qū)域也越大，如下圖所示，這樣投影便會形成更加柔和的邊緣。
從上圖能看到，光源的距離變化對物體的光影影響很大，不但影響了投影虛實(shí)，同時還決定了投影的擴(kuò)散程度和整體深淺，這和我們之前講的一致。
一句話總結(jié)：光源的距離越近，投影的擴(kuò)散程度越大、明暗反差也越大、邊緣則越模糊；而光源的距離越遠(yuǎn)，投影的擴(kuò)散程度越小、明暗反差也越小、邊緣則越清晰。
在實(shí)際運(yùn)用時，「實(shí)影」會讓產(chǎn)品的明暗過渡生硬，暗部細(xì)節(jié)缺失，對投影的輪廓要求也高，總體較難掌握，因此使用相對較少。但「實(shí)影」卻有著更強(qiáng)的表現(xiàn)力和沖擊力，形式更加鮮明，富有張力。
而「虛影」則用的更多，它讓物體呈現(xiàn)的更加細(xì)膩和自然，由于投影的邊緣模糊，所以對輪廓要求也低，無需非常精準(zhǔn)，哪怕結(jié)構(gòu)復(fù)雜的物體，也無需勾勒出具體形狀，因此若對投影表現(xiàn)沒有把握，可以優(yōu)先「虛影」，易操作也易出效果。例如下方案例中，不管什么樣的物體，在軟光的照射下，投影都是「模糊一片」，就算輪廓異常也不易察覺。
相對虛實(shí)
投影除了整體的虛實(shí)變化，自身也會有相應(yīng)的虛實(shí)過渡，這和「相對深淺」類似，整體遵循著「近實(shí)遠(yuǎn)虛」原則：投影離物體越近，則邊緣越清晰；若離物體越遠(yuǎn)，則邊緣越模糊。
注意虛實(shí)過渡其實(shí)是個非常柔和的變化過程。之所以出現(xiàn)「越遠(yuǎn)越虛」，是因?yàn)樵竭h(yuǎn)的區(qū)域受到的環(huán)境光（散射光/反射光）影響越大。
當(dāng)然在軟光照射下，有些畫面也會忽視投影的「近實(shí)遠(yuǎn)虛」，將投影直接處理成整體模糊，其實(shí)也不太違和，因?yàn)椤附鼘?shí)遠(yuǎn)虛」算是一個非常微妙的細(xì)節(jié)呈現(xiàn)，不影響全局，但若能做到，畫面層次將更加細(xì)膩，如下圖所示。
小結(jié)
以上就是關(guān)于投影呈現(xiàn)的5大要素：投影方向、輪廓、顏色、深淺及虛實(shí)。但要注意設(shè)計不是物理學(xué)，設(shè)計師也不只是為了還原現(xiàn)實(shí)，因此很多時候不用太較真。例如有些畫面的光源并沒那么明確，這時投影有些地方刻畫的差不多即可，出現(xiàn)一點(diǎn)失真也沒關(guān)系，關(guān)鍵是不要讓人覺得畫面別扭和違和。
實(shí)戰(zhàn)案例
還記得前面講「明暗原則」時畫的立方體和球體嗎？下面我們用剛剛講的知識給它們逐步加上投影，物體只有同時加上明暗和投影，才算真正融進(jìn)了環(huán)境里。首先還是先明確光源情況：來自畫面的左上方，強(qiáng)度中等，軟硬適中，白光。
在剛剛「物體明暗」的實(shí)戰(zhàn)案例中，我們曾給2款產(chǎn)品添過「物體明暗」和「投影」，但投影并未細(xì)講，現(xiàn)在再逐步剖析一下產(chǎn)品的投影刻畫，其實(shí)和剛剛講的立方體如出一轍，同樣先設(shè)定好光源：來自畫面左上方，強(qiáng)度較大，軟硬適中，白光。
前面展示的都是相對簡單的示意案例，現(xiàn)在將以2款產(chǎn)品作為主視覺，分別用側(cè)光和逆光來設(shè)計2張不同風(fēng)格的Banner，通過完整案例讓大家了解兩種布光方式的不同以及物體對應(yīng)的光影刻畫。
通過2個綜合案例，大家能看到不同光源所帶來的感受也會不同：側(cè)光使物體呈現(xiàn)的更加真實(shí)和立體；而逆光則營造出一種獨(dú)特的場景氛圍，因此我們要根據(jù)需求選擇合適布光。
另外刻畫投影時需要考慮的因素也有很多，例如影子的輪廓、深淺及虛實(shí)等等，但不用生搬硬套，還是前面那句話：核心是不要讓人覺得別扭與違和。
又又是一篇很長的文章，信息量很大，我們圍繞「光影」依次講了光源類型、物體明暗以及物體投影，當(dāng)然都是從漫反射材質(zhì)入手，相對簡單也有代表性，其實(shí)常見材質(zhì)中還有鏡面反射材質(zhì)和透明/半透明材質(zhì)，而這2類則要復(fù)雜很多，也較難呈現(xiàn)，這里就不展開。但不管材質(zhì)如何變化，正如本文開篇所說，「光影統(tǒng)一」都是核心原則，什么樣的光就會得到什么樣的影，雖然聽著簡單，但當(dāng)中要做的細(xì)節(jié)其實(shí)很多。
可能耐心讀完，有些小伙伴會覺得很多內(nèi)容過于理論和枯燥，好像不用這么麻煩也能做出差不多的「光影」，其實(shí)這種想法還是比較淺顯的?！腹庥啊购蜆?gòu)圖、色彩不同，它是現(xiàn)實(shí)中客觀存在的一種現(xiàn)象，若表現(xiàn)過于感性就會導(dǎo)致畫面違和、不真實(shí)，所以本文的大量內(nèi)容都是在理性推導(dǎo)后得出的結(jié)論，總之「理性學(xué)習(xí)」是培養(yǎng)「正確設(shè)計感」的必經(jīng)之路。最后為方便大家梳理邏輯和內(nèi)容，下面附上本文的內(nèi)容結(jié)構(gòu)和知識框架。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com