激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

在UI設(shè)計中你不可不知的光影關(guān)系「案例解析」

發(fā)布時間：2023-12-28 12:48:57 瀏覽量：166次

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

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

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

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

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

UI這些年的風格變化

歷史發(fā)展

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

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

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

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

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

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

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

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

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

【啟動圖標 & logo】

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

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

【按鈕 & 指引圖標】

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

【卡片】

卡片主要功能是展示信息，有的卡片充當了按鈕的功能。在卡片的設(shè)計上要盡量突出重點展示信息，不宜設(shè)計的太過花哨，但視覺上的舒適性必不可少。卡片添加陰影，也是在設(shè)計中經(jīng)常用到的增加視覺體驗的一個方法之一。

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

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

投影在UI中傳達的信息

【遠近】

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

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

1. 減淡投影

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

2. 透疊投影

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

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

【方向】

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

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

【質(zhì)感】

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

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學(xué)您好！

您已成功報名0元試學(xué)活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定