在UI設計中你不可不知的光影關係案例解析
??在前兩天的文章當中講述了光與影的關係，正確地認識光影並且利用好光影是設計師必備的能力之一。需要了解光影基礎的朋友可以回顧我們往期的文章。
??近期火到不行的「延禧攻略」為於媽洗白了不少，這部劇在徹底顛覆於媽之前的作品，以往的作品配色高度飽和，這次採用低飽度主導整個畫面，顯得具有歷史厚重感。
??在採訪當中，於媽就專門提到了在整個畫面對於光影的重視程度，當然光影只是整個劇當中美學構成的一部分，但卻起著主導的作用，光影是影視作品的外衣，用於烘托氣氛和塑造人物性格，此次更改說明中國的影視作品開始重視光影和色彩對作品的影響，而不是套用效果模板。
??而光影在UI設計當中仍然不例外地佔據著非常重要的地位，雖然在當前的UI設計當中似乎光影的使用並不像環境搭建或者遊戲場景中那麼顯而易見。但是卻滲透在了UI的細節設計當中。
UI這些年的風格變化
歷史發展
??現在的很多人對UI這個職業有些誤區，認為UI就是做APP界面的，UI按照字面翻譯是「用戶界面」（User Interface），很早就已經出現了，凡是在和用戶進行交互的主體都可以叫做UI。
直到2000年蘋果系統推出了Aqua，開啟了UI擬物化設計的大門。在接下來的10年里，擬物化設計備受推崇，人們枯燥乏味的操作感官一下子變得新奇，飽滿的視覺感受也一時間讓人們欲罷不能。
??還記得上高中時，我們痴迷於對手機主題的更換，特別是擬物設計更受人青睞。直到2010年後智能手機的出現，人們將擬物設計在手機上應用的淋漓盡致。但這樣的光景並沒有持續多久。人們發現，擬物設計似乎太過於厚重，時間一長便覺得負擔。所以人們開始簡化設計，去除繁重，漸漸地扁平化的設計就大面積替代了擬物設計。
??有人也許會問，既然已經扁平化了，本身就去除了光影、材質這些繁重的設計，我們還有必要學習光影嗎？
??人總是喜新厭舊的，極度扁平化也暴露出了缺點。例如：表現形式較為單一，同質化嚴重，點擊區域不明顯，誤導操作等等。所以人們也一直在扁平化中尋求變化，在視覺和交互上做出更漂亮更舒適的設計形式。比如這兩年流行的「漸變」和「彌散投影」。 設計師開始注重「空間感」的表現，而這些則需要利用到基本的光影知識和色彩知識了，我們這部篇文章只講光影。
「實際應用」光影不分家
??對材質的感受離不開光影。光影相生，陰影存在於光線的背面。
??UI當中的光影也要講究平衡，接下來，我們會通過幾個案例講解目前UI設計中光影的應用，以及如何找到光影的平衡關係。
應用領域
??【啟動圖標 & logo】
??圖標與logo的光影應用異曲同工。它們的共性都是既要簡潔又要有很強的辨識度。好的圖標設計，必須要和自身產品特點和用戶。純扁平的圖標和logo很難達到脫穎而出的效果。所以設計師們利用適當的光影和色彩來突出作品。
??下圖logo就採用了明顯的陰影效果，突顯形狀與層次。我們利用陰影效果來彌補了扁平化設計「過於扁平」帶來的弊端。
??【按鈕 & 指引圖標】
??對按鈕按鈕和指引圖標的操作幾乎佔到了80%的比例，一個產品的用戶體驗的好壞很容易在這兩個地方顯現出來。你需要告訴用戶那些地方是可點擊的，而不是用文字直白的表示「點擊」。而投影的使用，很容易表達這種指引效果。
??【卡片】
??卡片主要功能是展示信息，有的卡片充當了按鈕的功能。在卡片的設計上要盡量突出重點展示信息，不宜設計的太過花哨，但視覺上的舒適性必不可少。卡片添加陰影，也是在設計中經常用到的增加視覺體驗的一個方法之一。
??【導航圖 & 主題插畫】
??這裡是屬於平面設計的範疇，但設計本就相通。而事實上，UI當中的扁平化設計都來自於平面設計的流行元素。而平面設計中需要運用到的光影知識就更多了，遠近、深度、環境、材質、透視等的表現，都需要光影。
投影在UI中傳達的信息
??【遠近】
??利用陰影可表達元素的在z軸上的遠近程度，從下圖中可以看出，物體與地面之間的距離越大，陰影越大，並且陰影的邊界越模糊；反之，陰影越小，並且邊界越銳利。
??真正在設計中運用到的陰影是有些許改變的，在現代設計當中更強調呼吸感，運用最多的有以下兩種方式：
??1. 減淡投影
??從2016年開始設計師在UI投影上的設計，就開始採用更加微小的投影。用戶有時甚至看不到加深元素，但讓元素看起來是漂浮在界面上的。也流行著一個說法「微妙的陰影設計，應該給背景添加一個梯度，但不能給視覺上帶來刺激。」
??2. 透疊投影
??透疊投影在於不使用黑色投影，而以元素本身的顏色作為投影的設計方式，去除了黑色投影帶來的厚重感。給人的感覺像是光透過了元素產生的光影，而在現實生活當中的例子中，我們也了解到投影並不只是單純的黑色，它還會受到環境色和物體色的影響。
??這是圖片投影的方式，很好的展現了「輕透」的感覺。
??【方向】
??不同方向的陰影表現會讓元素表現出不同的光源方向，雖然在大多數的UI設計當中並沒有直接體現「光」的作用，但實際上我們通過陰影可以找到「光」的蹤跡。
??在上面提到的logo中，完全能夠感知光的方向。在光影產生的這種方向感上，設計師也在UI元素中尋求不一樣的表達方式，也表現了不一樣的層級關係。比如下圖音樂APP的卡片設計，讓卡片有種「插入口袋的感覺」。
??【質感】
??正如我們之前講到的透疊投影的運用，會使元素產生一種「通透」的質感。光影的「軟硬」程度也能表現元素的材質。雖然質感的表現在現代UI設計當中幾乎都捨棄掉了，但我們忽略了一個在UI設計當中佔有很大比例的遊戲UI，它需要大量的材質表現。
??總之，在設計當中對於光影的掌握是設計師的必備技能，不管是UI設計，平面設計都需要紮實這項基本功。特別對於非學院的、自學的朋友來說，網路上的培訓機構很少有對這些基礎知識的詳細講解，這需要自學的朋友們引起重視。先學會走路才能跑得起來。
??知更常青藤跟你一起學習，從基礎到案例到實戰，幫你搭建完整的學習體系。如果文章對你有價值，讓你得到了提升，請你相信作者，並且關注他，轉發文章讓更多的人看到有質量的內容，讓他繼續為你奮鬥。如果你有疑問或建議，請留言告訴我。
※我如何在不去設計學校的情況下成為設計師
※美國白宮為什麼是白色的？
TAG:知更常青藤 |