在開發(fā)過程中，

可能有人會好奇

GUI設(shè)計師工作中會遇到什么困難，

例如你們的設(shè)計思路是什么？

為什么會做這樣的設(shè)計？

實現(xiàn)過程中都經(jīng)歷了什么？

本次邀請了

葉子網(wǎng)絡(luò)4班的老學員-

豬場GUI設(shè)計師poemrain

來為大家分享光影在設(shè)計中的運用經(jīng)驗，

希望下面的內(nèi)容能夠拋磚引玉，

為大家?guī)硇﹩l(fā)。

poemrain

大家好，我是poemrain~

算算時間我是16年在葉子學習的，可以說是最早的一批葉子學員啦。畢業(yè)后我從2017年開始從事非對稱競技類的游戲GUI設(shè)計工作，主要參與了《第五人格》項目的GUI設(shè)計。今天受孫老師的邀請來給大家分享一些我平時工作學習中積累的經(jīng)驗教訓和設(shè)計思考～

“光影在電影和繪畫中是一種被廣泛應(yīng)用的設(shè)計要素，光影可幫助烘托畫面氣氛，聚焦畫面中心，拉開畫面空間關(guān)系。電影會有專門的燈光師職位，他們?yōu)殡娪爸械膱鼍昂腿宋镌O(shè)計光線，通過不同種類的光影組合，讓電影的每個鏡頭都變得更加豐富有細節(jié)?！?br/>

其實光影也能夠應(yīng)用于游戲的界面設(shè)計中。

下面給大家介紹幾種光影應(yīng)用技巧：

1

電影暗角法

最簡單的一種應(yīng)用

那么電影為什么會出現(xiàn)暗角，形成原因有很多，有人為造成的，也有自然形成的。自然形成的原因，大概是由于光與感光原件角度的差別所導致，中間光比較強，四周受光越來越少，最后在畫面呈現(xiàn)上，就形成了畫面從中間往四角逐漸變暗的效果。

這種效果的好處就是在于能夠突出中間的關(guān)鍵信息部分，所以有些電影或者攝影，都喜歡人為給畫面加上暗角。

所以UI設(shè)計中的電影暗角法，指的就是給界面的四周加電影式的暗角，即壓暗畫面四周區(qū)域。以下圖為例，界面中心是游戲信息區(qū)域集中的部分，四周是裝飾性背景，可以看出畫面在四周被壓暗，并且加了高斯模糊效果。

壓暗畫面四周的好處在于，弱化了四周破碎細節(jié)的對比度，使他們更整體，同時也突出了界面中心的重要信息。

對比觀察可以發(fā)現(xiàn)，左邊加過暗角的界面給人感覺畫面的主次關(guān)系是更加清晰的，視覺中心是集中在信息上的。

而右側(cè)的圖中，我們的注意力會被周圍過于清晰的多邊形分散過去，感覺總想看出來這到底是個什么。那么我們能不能去掉這些多邊形呢？也不是不可以，只不過沒有這些形狀后，四周都只有一種顏色，畫面又會顯得很空，很單調(diào)。

所以我們在保留周圍豐富的畫面細節(jié)的同時，給畫面四周加上暗角，降低細節(jié)的對比度和存在感，就能夠達到既突出中心信息，又保留豐富細節(jié)的目的了。

那么哪些界面適合用電影暗角法呢？

暗角法適用于信息集中在中心區(qū)域的界面，比如下圖這些類型的界面，四周有豐富細節(jié)，卻又不能讓他們搶了風頭，這時候就試試給他們加電影暗角，寫實風格的界面更適合這種方法，因為會在無形中讓畫面具有電影鏡頭感。

2

幾何形光影法

進階一點的用法

幾何形光影法指的是在畫面中設(shè)計運用有明確邊界形狀的光影，它能作為隱形的框體用在界面中。

以下圖為例，圖中每個圖標和一個價格按鈕為一組信息，可是圖標大小不一，如果只用距離間隔的方式來分組，可以想象整張界面看起來會很不整齊。

而這張界面中的每組信息都被一塊光影元素包裹起來，光影的形狀類似從窗戶照入，不僅讓人聯(lián)想到畫面之外的環(huán)境，也使得本來參差的信息區(qū)域變得干凈整齊。

多邊形光影法在這張界面中的設(shè)計使用方式，不僅幫助界面信息歸納成組，同時也起到了營造氣氛的作用。

下圖中用到的圓形光影也是一個很好的例子。

圖中人物被探照燈樣式的光影區(qū)域框出，作為整個畫面的視覺中心，人物裝備圖標沿著光影的弧線走勢，分列左右兩邊，有序排列。

這里的探照燈設(shè)計不僅符合游戲故事情境，同時還幫助畫面中繁多的信息劃分出了明確的區(qū)域，使他們能夠有效的分組排列。

融入環(huán)境的有形光影能作為隱形框體使用在界面設(shè)計中，它避免了通常意義上框體過于程式化的無趣感受，又能起到框體為信息分組的作用。

以下再列舉一些使用了光影分區(qū)的界面例圖：

3

其他光影用法

蠟燭光、月光等

光影有很多種類，比如有室內(nèi)的日光燈，閃爍的燭火，或者室外的神秘月光，又或者在傍晚照入房間的窗戶光等等。

光影除了能夠用于劃分信息區(qū)域，還能烘托界面氛圍，賦予界面時間感和空間感。

界面中的時間感指的是，光影的形狀、顏色等特征會暗含時間信息。比如清晨的光清冷，黃昏的光溫暖，而不同強度的光照射在物體上，所產(chǎn)生投影的形狀和顏色也會有區(qū)別。

畫面由于有了時間就有了一層故事性，我認為界面中的故事性不光指具體發(fā)生的事件、情節(jié)，也能指代一種生活感受，這種感受來自于每個人對生活和周身環(huán)境的一些習慣性印象，這種印象的產(chǎn)生是潛移默化的。而相似的環(huán)境氛圍特征能喚起人們腦海中的相關(guān)記憶，使人感覺在哪里見過，很熟悉很親切，便更容易接受。

不同環(huán)境的光影使得畫面帶給人的感受有差異，光影使畫面與觀者之間產(chǎn)生共情，從而增加界面的故事性和代入感。

以武俠國風手游《一夢江湖》(原名楚留香)為例，它的通用界面設(shè)計中就用到了月光的光影。

如下圖中所示，通用界面整體為暗色底，底部有柔和的反光，月光的光影被設(shè)計應(yīng)用在了通用界面的標題部分，月光的光暈柔和地在暗色底上舒展開。

這些電影帶給我們的印象通過潛移默化的方式深入我們的記憶中。當我們看到這張界面的時候，曾經(jīng)看過的這些電影鏡頭又從記憶中被喚起，覺得好像在哪里見過，很容易地就能夠接受，并與武俠類相關(guān)的信息產(chǎn)生聯(lián)想，正好契合了《一夢江湖》的游戲背景主題。

一些用光影烘托氛圍的界面案例：

4

光影應(yīng)用限制

以及判斷方式

光影在界面設(shè)計中的應(yīng)用也受到了一些限制，比如需要九宮切圖的界面就不適合設(shè)計光影元素。

光影能夠大面積應(yīng)用的情況通常出現(xiàn)在表現(xiàn)性界面中，即可以整塊切圖的界面。這種類型的界面通常對視覺表現(xiàn)的需求大于對它功能的需求，承載信息量不多，重點放在體驗和視覺上的有趣。

在設(shè)計這種界面的時候，我們就可以大膽的設(shè)計光影效果，怎么有氣氛就怎么做。但是功能性界面中也不是不能用上，只要在不影響光影效果的前提下，找到巧妙的切圖方式即可。至于光影在每張不同界面中的具體設(shè)計應(yīng)用方式，還需要多多分析具體的界面情況來做出判斷和調(diào)整。

總? 結(jié)

其實我認為美術(shù)相關(guān)的各設(shè)計領(lǐng)域有很多道理都是相通的，設(shè)計之間的界線沒有這么明顯，而可能在某個設(shè)計領(lǐng)域有新意的驚喜點，可能在別的設(shè)計領(lǐng)域是一種常規(guī)設(shè)計手法。

不止是在游戲界面的設(shè)計中，在別的設(shè)計領(lǐng)域，想要做出有新意的設(shè)計，我認為最主要的還是在生活中對自身所處世界保持好奇心。

創(chuàng)新的能力是一種觀察方式和觀察結(jié)果的長期積累。同一種事物，不同的人會看到不同的東西，有人看到的多，有人看到的少，而比別人多看到的部分，我認為就是創(chuàng)新的來源吧。

最后給大家分享一些我個人認為光影比較美的電影，大家可以保存下來空余之時看一看哦~

2020/05/28

葉子學堂讀書筆記

非常感謝poemrain小姐姐給大家分享了光影在游戲界面設(shè)計中的運用～啪啪啪～阿葉我為大家復(fù)盤一下今日份知識點噢～

1. 電影暗角法：最簡單的應(yīng)用；

2. 幾何形光影法：進階一點的用法；

3. 其他光影用法：燭光、月光等的運用；

4. 光影應(yīng)用限制以及判斷方式；

5. 總結(jié)部分呼吁大家保持好奇心，培育創(chuàng)新能力，同時還給大家分享了光影很贊的電影和動畫作品。

美好的時光總是很快～

咱們的第一期【三人行必有我?guī)熑~！】

就這樣結(jié)束啦～

大家喜歡類似的分享，

或者你也有不錯的文章希望投稿推薦，

歡迎給我們留言互動或者給我私信噢！