在前兩天的文章當(dāng)中講述了光與影的關(guān)系，正確地認(rèn)識(shí)光影并且利用好光影是設(shè)計(jì)師必備的能力之一。需要了解光影基礎(chǔ)的朋友可以回顧我們往期的文章。

• 設(shè)計(jì)師基礎(chǔ)，正確認(rèn)識(shí)光與影「綜合案例剖析」
• 設(shè)計(jì)師的光影基礎(chǔ)課「綜合案例剖析」
• 最有用的色彩陰影教程「綜合案例剖析」

近期火到不行的“延禧攻略”為于媽洗白了不少，這部劇在徹底顛覆于媽之前的作品，以往的作品配色高度飽和，這次采用低飽度主導(dǎo)整個(gè)畫面，顯得具有歷史厚重感。

在采訪當(dāng)中，于媽就專門提到了在整個(gè)畫面對(duì)于光影的重視程度，當(dāng)然光影只是整個(gè)劇當(dāng)中美學(xué)構(gòu)成的一部分，但卻起著主導(dǎo)的作用，光影是影視作品的外衣，用于烘托氣氛和塑造人物性格，此次更改說明中國的影視作品開始重視光影和色彩對(duì)作品的影響，而不是套用效果模板。

而光影在UI設(shè)計(jì)當(dāng)中仍然不例外地占據(jù)著非常重要的地位，雖然在當(dāng)前的UI設(shè)計(jì)當(dāng)中似乎光影的使用并不像環(huán)境搭建或者游戲場景中那么顯而易見。但是卻滲透在了UI的細(xì)節(jié)設(shè)計(jì)當(dāng)中。

UI這些年的風(fēng)格變化

歷史發(fā)展

現(xiàn)在的很多人對(duì)UI這個(gè)職業(yè)有些誤區(qū)，認(rèn)為UI就是做APP界面的，UI按照字面翻譯是“用戶界面”（User Interface），很早就已經(jīng)出現(xiàn)了，凡是在和用戶進(jìn)行交互的主體都可以叫做UI。

直到2000年蘋果系統(tǒng)推出了Aqua，開啟了UI擬物化設(shè)計(jì)的大門。在接下來的10年里，擬物化設(shè)計(jì)備受推崇，人們枯燥乏味的操作感官一下子變得新奇，飽滿的視覺感受也一時(shí)間讓人們欲罷不能。

還記得上高中時(shí)，我們癡迷于對(duì)手機(jī)主題的更換，特別是擬物設(shè)計(jì)更受人青睞。直到2010年后智能手機(jī)的出現(xiàn)，人們將擬物設(shè)計(jì)在手機(jī)上應(yīng)用的淋漓盡致。但這樣的光景并沒有持續(xù)多久。人們發(fā)現(xiàn)，擬物設(shè)計(jì)似乎太過于厚重，時(shí)間一長便覺得負(fù)擔(dān)。所以人們開始簡化設(shè)計(jì)，去除繁重，漸漸地扁平化的設(shè)計(jì)就大面積替代了擬物設(shè)計(jì)。

有人也許會(huì)問，既然已經(jīng)扁平化了，本身就去除了光影、材質(zhì)這些繁重的設(shè)計(jì)，我們還有必要學(xué)習(xí)光影嗎？

人總是喜新厭舊的，極度扁平化也暴露出了缺點(diǎn)。例如：表現(xiàn)形式較為單一，同質(zhì)化嚴(yán)重，點(diǎn)擊區(qū)域不明顯，誤導(dǎo)操作等等。所以人們也一直在扁平化中尋求變化，在視覺和交互上做出更漂亮更舒適的設(shè)計(jì)形式。比如這兩年流行的“漸變”和“彌散投影”。 設(shè)計(jì)師開始注重“空間感”的表現(xiàn)，而這些則需要利用到基本的光影知識(shí)和色彩知識(shí)了，我們這部篇文章只講光影。

「實(shí)際應(yīng)用」光影不分家

對(duì)材質(zhì)的感受離不開光影。光影相生，陰影存在于光線的背面。

UI當(dāng)中的光影也要講究平衡，接下來，我們會(huì)通過幾個(gè)案例講解目前UI設(shè)計(jì)中光影的應(yīng)用，以及如何找到光影的平衡關(guān)系。

應(yīng)用領(lǐng)域

【啟動(dòng)圖標(biāo) & logo】

圖標(biāo)與logo的光影應(yīng)用異曲同工。它們的共性都是既要簡潔又要有很強(qiáng)的辨識(shí)度。好的圖標(biāo)設(shè)計(jì)，必須要和自身產(chǎn)品特點(diǎn)和用戶。純扁平的圖標(biāo)和logo很難達(dá)到脫穎而出的效果。所以設(shè)計(jì)師們利用適當(dāng)?shù)墓庥昂蜕蕘硗怀鲎髌贰?/p>

下圖logo就采用了明顯的陰影效果，突顯形狀與層次。我們利用陰影效果來彌補(bǔ)了扁平化設(shè)計(jì)“過于扁平”帶來的弊端。

【按鈕 & 指引圖標(biāo)】

對(duì)按鈕按鈕和指引圖標(biāo)的操作幾乎占到了80%的比例，一個(gè)產(chǎn)品的用戶體驗(yàn)的好壞很容易在這兩個(gè)地方顯現(xiàn)出來。你需要告訴用戶那些地方是可點(diǎn)擊的，而不是用文字直白的表示“點(diǎn)擊”。而投影的使用，很容易表達(dá)這種指引效果。

【卡片】

卡片主要功能是展示信息，有的卡片充當(dāng)了按鈕的功能。在卡片的設(shè)計(jì)上要盡量突出重點(diǎn)展示信息，不宜設(shè)計(jì)的太過花哨，但視覺上的舒適性必不可少?？ㄆ砑雨幱埃彩窃谠O(shè)計(jì)中經(jīng)常用到的增加視覺體驗(yàn)的一個(gè)方法之一。

【導(dǎo)航圖 & 主題插畫】

這里是屬于平面設(shè)計(jì)的范疇，但設(shè)計(jì)本就相通。而事實(shí)上，UI當(dāng)中的扁平化設(shè)計(jì)都來自于平面設(shè)計(jì)的流行元素。而平面設(shè)計(jì)中需要運(yùn)用到的光影知識(shí)就更多了，遠(yuǎn)近、深度、環(huán)境、材質(zhì)、透視等的表現(xiàn)，都需要光影。

投影在UI中傳達(dá)的信息

【遠(yuǎn)近】

利用陰影可表達(dá)元素的在z軸上的遠(yuǎn)近程度，從下圖中可以看出，物體與地面之間的距離越大，陰影越大，并且陰影的邊界越模糊；反之，陰影越小，并且邊界越銳利。

真正在設(shè)計(jì)中運(yùn)用到的陰影是有些許改變的，在現(xiàn)代設(shè)計(jì)當(dāng)中更強(qiáng)調(diào)呼吸感，運(yùn)用最多的有以下兩種方式：

1. 減淡投影

從2016年開始設(shè)計(jì)師在UI投影上的設(shè)計(jì)，就開始采用更加微小的投影。用戶有時(shí)甚至看不到加深元素，但讓元素看起來是漂浮在界面上的。也流行著一個(gè)說法“微妙的陰影設(shè)計(jì)，應(yīng)該給背景添加一個(gè)梯度，但不能給視覺上帶來刺激。”

2. 透疊投影

透疊投影在于不使用黑色投影，而以元素本身的顏色作為投影的設(shè)計(jì)方式，去除了黑色投影帶來的厚重感。給人的感覺像是光透過了元素產(chǎn)生的光影，而在現(xiàn)實(shí)生活當(dāng)中的例子中，我們也了解到投影并不只是單純的黑色，它還會(huì)受到環(huán)境色和物體色的影響。

這是圖片投影的方式，很好的展現(xiàn)了“輕透”的感覺。

【方向】

不同方向的陰影表現(xiàn)會(huì)讓元素表現(xiàn)出不同的光源方向，雖然在大多數(shù)的UI設(shè)計(jì)當(dāng)中并沒有直接體現(xiàn)“光”的作用，但實(shí)際上我們通過陰影可以找到“光”的蹤跡。

在上面提到的logo中，完全能夠感知光的方向。在光影產(chǎn)生的這種方向感上，設(shè)計(jì)師也在UI元素中尋求不一樣的表達(dá)方式，也表現(xiàn)了不一樣的層級(jí)關(guān)系。比如下圖音樂APP的卡片設(shè)計(jì)，讓卡片有種“插入口袋的感覺”。

【質(zhì)感】

正如我們之前講到的透疊投影的運(yùn)用，會(huì)使元素產(chǎn)生一種“通透”的質(zhì)感。光影的“軟硬”程度也能表現(xiàn)元素的材質(zhì)。雖然質(zhì)感的表現(xiàn)在現(xiàn)代UI設(shè)計(jì)當(dāng)中幾乎都舍棄掉了，但我們忽略了一個(gè)在UI設(shè)計(jì)當(dāng)中占有很大比例的游戲UI，它需要大量的材質(zhì)表現(xiàn)。

總之，在設(shè)計(jì)當(dāng)中對(duì)于光影的掌握是設(shè)計(jì)師的必備技能，不管是UI設(shè)計(jì)，平面設(shè)計(jì)都需要扎實(shí)這項(xiàng)基本功。特別對(duì)于非學(xué)院的、自學(xué)的朋友來說，網(wǎng)絡(luò)上的培訓(xùn)機(jī)構(gòu)很少有對(duì)這些基礎(chǔ)知識(shí)的詳細(xì)講解，這需要自學(xué)的朋友們引起重視。先學(xué)會(huì)走路才能跑得起來。

知更常青藤 跟你一起學(xué)習(xí)，從基礎(chǔ)到案例到實(shí)戰(zhàn)，幫你搭建完整的學(xué)習(xí)體系。如果文章對(duì)你有價(jià)值，讓你得到了提升，請(qǐng)你相信作者，并且關(guān)注他，轉(zhuǎn)發(fā)文章讓更多的人看到有質(zhì)量的內(nèi)容，讓他繼續(xù)為你奮斗。如果你有疑問或建議，請(qǐng)留言告訴我。