旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國統(tǒng)一咨詢熱線：010-5367 2995
首頁 > 今日必讀 > UI設(shè)計(jì)師教你怎么運(yùn)用光影

UI設(shè)計(jì)師教你怎么運(yùn)用光影

時間：2018-12-19來源：m.lb577.com點(diǎn)擊量：次作者：AAA小編
時間：2018-12-19點(diǎn)擊量：次作者：AAA小編
對于UI設(shè)計(jì)來說光影的運(yùn)用也是極其重要的一部分，當(dāng)你想要做出一定的效果時，是需要你對光影的運(yùn)用，在這AAA教育小編分幾點(diǎn)來告訴你如何運(yùn)用光影

使用光影設(shè)計(jì)：利弊兩面
關(guān)注現(xiàn)實(shí)生活中光影的相互作用能給我們帶來一些靈感，讓我們的設(shè)計(jì)看起來更逼真。除非你的地下室里有一臺3D打印機(jī)，否則我們大多數(shù)人都只能在二維空間里進(jìn)行設(shè)計(jì)。但我們都習(xí)慣了在三維空間中看到事物，有時會在日常生活中看到的東西和在紙上或屏幕上看到的東西之間產(chǎn)生視覺上的脫節(jié)。在你的設(shè)計(jì)中加入光和陰影元素，可以幫助瀏覽者縮小視覺上的差距，讓你的2D設(shè)計(jì)更加逼真，看起來幾乎是3D的樣子。

但是你在互聯(lián)網(wǎng)上肯定會注意到，光和陰影效果很容易做過頭。正如一名設(shè)計(jì)師在他的博客中所承認(rèn)的那樣，在我們的現(xiàn)代世界里，很容易添加一個又一個的效果，而不考慮它們對你的設(shè)計(jì)項(xiàng)目是否有必要或有益。 話雖如此，讓我們來看一些正反兩方面的觀點(diǎn)：光和陰影可以增加你的設(shè)計(jì)的深度、尺寸、透視、現(xiàn)實(shí)主義和視覺感興趣。這可以同時吸引瀏覽者關(guān)注你的設(shè)計(jì)，使它看起來像是從頁面或屏幕彈出。但是過度的效果會讓一個好的設(shè)計(jì)看起來很業(yè)余和俗氣。

總而言之，聰明地使用光影的秘訣包括記住兩件事：目的和微妙。首先確保你使用的任何效果具有特定的實(shí)用目的，并且對你的項(xiàng)目有意義，那么采取“少即是多”的方法將其應(yīng)用于你的設(shè)計(jì)。如果使用的是設(shè)計(jì)程序附帶的效果，則默認(rèn)設(shè)置總是比實(shí)際更具戲劇性（特別是對于陰影）；不要依賴它們，你需要運(yùn)用它們，使你的設(shè)計(jì)作品更柔軟、更輕、更微妙。

光和影的工作原理：
快速概述
在我們就如何將光線和陰影融入設(shè)計(jì)中提出建議之前，有助于對其解剖學(xué)有基本的了解。這是藝術(shù)家和攝影師為了創(chuàng)作光線充足的作品而學(xué)習(xí)的東西，但它也可以幫助平面設(shè)計(jì)師和網(wǎng)頁設(shè)計(jì)師創(chuàng)作逼真的光影效果。
 

在上面的圖表中，我已經(jīng)指出了一些關(guān)鍵的術(shù)語。我們在這里簡單地定義一下：

光源：如果你看到的是陰影或高光，則必須有光源。聽起來這個很淺顯，但是在大多數(shù)的設(shè)計(jì)項(xiàng)目中（除了包括太陽、月亮、燈等的插圖），光源都不可見。然而，如果你確定一個假想光源的位置，并設(shè)定你的效果，看起來好像它們都是由同一光源引起的，你最終會得到一個更現(xiàn)實(shí)、更一致的外觀，而不是僅僅是一些隨機(jī)的特殊效果。
高光：這是光線在物體上最亮的地方（離光源最近，面向光源）。

陰影/核心陰影：這是物體最黑暗的部分（離光源最遠(yuǎn)）。但是陰影并不是一團(tuán)黑色的顏色，它們的色調(diào)有所不同。在陰影的最深處，物體完全背離光源，被稱為核心陰影。
投射陰影：與核心陰影（在對象上）不同，這是由對象創(chuàng)建的。當(dāng)物體本身擋住光源時，它會在它所在的表面投射陰影。投射陰影指向與光源相同的方向，就在物體的另一邊。
這是一個非?；镜母攀?，它將給你一個正確使用光和陰影的起點(diǎn)。

現(xiàn)在，讓我們開始談?wù)?關(guān)于你一直在等待的設(shè)計(jì)提示：
 
01.使用顏色創(chuàng)建深度
色彩本身可以成為創(chuàng)造輕盈或黑暗幻覺的絕佳方式——無需訴諸預(yù)先包裝的效果。特別是將不同顏色的相同顏色分層，可以創(chuàng)建深度或距離的外觀。這是因?yàn)樵谖覀兊难壑?，光亮漸漸褪色，暗色漸漸增強(qiáng)。

下面的插圖完美地展示了這個想法。注意山脈是如何從靠近前景的地方開始變暗的，但隨后變亮并且看起來像是在背景中迷霧般的距離。

這里還有很多其他的燈光和顏色。設(shè)計(jì)師為每個面板選擇的色溫，對于增強(qiáng)對光線和黑暗的印象有很大作用。天空中細(xì)微的漸變也會產(chǎn)生不同時間和光線類型的印象（例如：日出的光與涼爽的白色月光）。談到漸變，下一個提示來談......

02.為背景圖添加漸變效果
在你的房子打開一盞燈，看看最近的墻壁…...這不是所有都是平坦的顏色，是吧？最靠近燈的部分可能看起來更亮或更暖，而你離燈越遠(yuǎn)，它看起來就越黑。你可能會認(rèn)為你在看一面墻，但仔細(xì)看，你可能會看到灰色、綠色、藍(lán)色或紫色的陰影。重點(diǎn)是很少有光線使物體或表面看起來像一個均勻的、不變的顏色。
創(chuàng)建這種動態(tài)顏色變化的一種方法，是在你的設(shè)計(jì)中添加一個漸變到背景或其他大區(qū)域。現(xiàn)在，漸變可能會讓你想起上世紀(jì)90年代的網(wǎng)站上一個可怕的多色背景，這使得文本不可能被閱讀——但這是一個糟糕的漸變案例。如果做得好，漸變可以添加一些微妙的顏色變化（如前面所提到的），幫助柔化/淡出陰影，或者在你的設(shè)計(jì)的某一特定區(qū)域（特別是徑向、圓形、漸變）中創(chuàng)建光線的外觀。

下面，一個網(wǎng)站的著陸頁面上的徑向漸變?yōu)槎鄠€目的服務(wù)。梯度的較輕部分使它看起來像一盞燈從上面照耀，并且也使有陰影的手機(jī)更可見。結(jié)合起來，這些效果使這里的場景看起來逼真——看起來你可以伸手去摸那部手機(jī)，它有形狀和尺寸。同時也要注意右上角的高亮顯示，以及陰影，使手機(jī)有了3D外觀。

03. 使用高亮顯示來吸引注意力
閃閃發(fā)光的東西總是吸引你的目光，不是嗎？在設(shè)計(jì)中，亮點(diǎn)可以像一個微妙的聚光燈， 使某些元素變得更加明顯——除了幫助設(shè)計(jì)項(xiàng)目看起來更真實(shí)，正如前面提到的。如果你想在你的設(shè)計(jì)中強(qiáng)調(diào)多個東西，一定要記得考慮你想象中的光源，讓你的亮點(diǎn)保持一致。查看以下產(chǎn)品包裝上的“801”標(biāo)志的簡單高亮顯示。

它只是線條的顏色略輕于

主要顏色的數(shù)字，但它給設(shè)計(jì)的焦點(diǎn)提供了更多的可見性和視覺興趣。

04.陰影大師：陰影
陰影是物體上陰影的另一個術(shù)語，如我們在文章頂部定義的核心陰影。陰影可以賦予平面設(shè)計(jì)元素或文字的形狀和尺寸。
在這里，一個平面的白色印刷標(biāo)志的紋理陰影使它看起來有分層和復(fù)雜的效果。

05.主陰影：投下陰影
記得文章前面的蘋果圖嗎？投影是蘋果本身遮擋光線而產(chǎn)生的陰影，從而在側(cè)面產(chǎn)生影子。陰影只是一種特定類型的投影，其中光源或多或少直接在頭頂上投射，這會在對象后面或下方投射陰影。這使得物體看起來像浮在表面之上。
 
從設(shè)計(jì)的角度來看，陰影可以幫助物品或信息“上升”到布局的頂部，使它們脫穎而出。它們對于提高淺色設(shè)計(jì)元素（尤其是文本）的可見性也很有用。例如：在這個網(wǎng)頁設(shè)計(jì)中，陰影有助于使特色內(nèi)容更加突出。
 

陰影在各種設(shè)計(jì)項(xiàng)目中非常普遍，但也經(jīng)常被濫用。典型的投影錯誤是把它們做得太大，太暗或太尖銳。在設(shè)計(jì)中使用陰影通常不應(yīng)該讓瀏覽者思考：“哦，看，有一個影子！”相反，他們應(yīng)該與設(shè)計(jì)的其余部分無縫融合。

06.調(diào)整不透明度
在現(xiàn)實(shí)生活中，陰影不是不透明的，光線不是白色或黃色的平面，它們是透明的，在你的設(shè)計(jì)中它應(yīng)該是一樣的。對于微妙而逼真的外觀，不透明度和透明度設(shè)置是應(yīng)用效果時最好的朋友。從一個真正低調(diào)的應(yīng)用程序開始，然后根據(jù)需要稍微構(gòu)建它是一個很好的做法；這會使你不太可能過度使用它。

07.在字體設(shè)計(jì)中結(jié)合光與影，達(dá)成令人瞠目的字體排版效果
印刷字體可以通過添加光和陰影效果，使字體突顯或者不突顯。尤其是在文字排版設(shè)計(jì)中，這確實(shí)能讓這些文字以醒目的方式活躍起來。
 
以這個字體的標(biāo)志為例：它使用了高亮和陰影的字母用漸變來創(chuàng)建一個輪廓分明的3D外觀。下面還有一個漂亮的投影（注意一個假想光源從左上角開始的一致使用：主要的亮點(diǎn)落在字母的頂部和左邊，而投影點(diǎn)向下和向右，遠(yuǎn)離光線，就像它應(yīng)該的那樣）。一些微妙的紋理把一切都拉到一起。
 

08.更多版式陰影選項(xiàng)：嘗試凸起和嵌入式樣式
字體是一個你可以在陰影樣式中真正發(fā)揮創(chuàng)造力的地方。它們在很大程度上是很容易應(yīng)用的（有些字體甚至帶有陰影樣式），并且可以給你的字體設(shè)計(jì)一個定制的外觀。讓我們再看兩個選項(xiàng)：

1）凸版：凸版是一種印刷工藝技術(shù)，它能在紙上（或其他材料的）表面上增加一種設(shè)計(jì)特征（通常是文字）。這通常是用某種金屬印版來完成的。你可以用一些很好的陰影（在字母形狀的邊界之外）和高亮（在字母本身）上復(fù)制這種效果。
 

2）壓?。喝藗兪褂酶鞣N詞語來描述雕刻或壓入表面的文字。凸版印刷是一種常見的印刷技術(shù)，它使用金屬印版將設(shè)計(jì)（無論是否使用油墨）壓入厚紙中——但這個詞也經(jīng)常用于復(fù)制這種外觀的數(shù)字效果。如這個標(biāo)志設(shè)計(jì)
 

陰影和高光被放置在相反的位置，就像一個浮雕的樣子：陰影在字母內(nèi)部，高光在外，標(biāo)記表面被按下的位置。
 
09.平面設(shè)計(jì)如何？
平面設(shè)計(jì)已經(jīng)變成了一種經(jīng)久不衰的潮流：從蘋果轉(zhuǎn)型到平板手機(jī)設(shè)計(jì)，再到谷歌的新平面標(biāo)志，至少在一段時間內(nèi)，它似乎還會停留在這里。平面設(shè)計(jì)的特點(diǎn)之一是缺乏表現(xiàn)深度，這通常意味著你不會看到很多陰影或高光。但是，如果你想保持平面設(shè)計(jì)的極簡主義，同時又添加一些動態(tài)的燈光或陰影，那該怎么辦呢?設(shè)計(jì)師們一直在調(diào)整這一趨勢，以實(shí)現(xiàn)這一目標(biāo)。以下是一些常見的方法：
• 顏色：使用顏色變化或漸變可以增加維度感或光/陰影的交互作用，同時在技術(shù)上仍然堅(jiān)持平面設(shè)計(jì)的概念。
這個404頁面設(shè)計(jì)層次更淺、顏色更深，以創(chuàng)建深度的外觀（這是我們在第1點(diǎn)討論的技術(shù)）。

• 長陰影：這種特殊的陰影風(fēng)格經(jīng)常與平面設(shè)計(jì)搭配，尤其是文本和圖標(biāo)。長陰影通常延伸到設(shè)計(jì)的邊緣。
 

10.對于網(wǎng)頁設(shè)計(jì)：讓事物看起來可點(diǎn)擊
對于網(wǎng)頁設(shè)計(jì)，用戶如何與網(wǎng)站互動是一個重要的考慮因素。用戶界面（或UI）應(yīng)該易于使用和理解，并且知道你可以點(diǎn)擊哪些內(nèi)容是很重要的一部分。這就是陰影和高光特別有用的地方，特別是在設(shè)計(jì)按鈕時。
 
注意下面的按鈕，是如何使用我們在整篇文章中討論過的許多功能（漸變、高光、陰影）的組合來創(chuàng)建形狀和尺寸。在這里高光尤其運(yùn)用得很好;，在左邊的按鈕上，邊緣上的細(xì)突出使得它看起來像按鈕略高于表面（它是可按下的），而上半部分的圓形突出顯示為凸起形狀。左邊的按鈕使用內(nèi)部陰影技術(shù)使其看起來被按下。
這些類型的設(shè)計(jì)可能很小且很微妙，但它們潛意識地幫助瀏覽者與你的設(shè)計(jì)進(jìn)行互動。

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽！怕錢不夠？可先就業(yè)掙錢后再付學(xué)費(fèi)！ 怕學(xué)不會？助教全程陪讀，隨時解惑！擔(dān)心就業(yè)？一地學(xué)習(xí)，可推薦就業(yè)！

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號：京ICP備12034770號

?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號： 京ICP備12034770號 監(jiān)督電話：010-53672995 郵箱：bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖