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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

它只是線條的顏色略輕于

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

04.陰影大師：陰影
陰影是物體上陰影的另一個(gè)術(shù)語(yǔ)，如我們?cè)谖恼马敳慷x的核心陰影。陰影可以賦予平面設(shè)計(jì)元素或文字的形狀和尺寸。
在這里，一個(gè)平面的白色印刷標(biāo)志的紋理陰影使它看起來(lái)有分層和復(fù)雜的效果。

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

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

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

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

08.更多版式陰影選項(xiàng)：嘗試凸起和嵌入式樣式
字體是一個(gè)你可以在陰影樣式中真正發(fā)揮創(chuàng)造力的地方。它們?cè)诤艽蟪潭壬鲜呛苋菀讘?yīng)用的（有些字體甚至帶有陰影樣式），并且可以給你的字體設(shè)計(jì)一個(gè)定制的外觀。讓我們?cè)倏磧蓚€(gè)選項(xiàng)：

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

2）壓印：人們使用各種詞語(yǔ)來(lái)描述雕刻或壓入表面的文字。凸版印刷是一種常見(jiàn)的印刷技術(shù)，它使用金屬印版將設(shè)計(jì)（無(wú)論是否使用油墨）壓入厚紙中——但這個(gè)詞也經(jīng)常用于復(fù)制這種外觀的數(shù)字效果。如這個(gè)標(biāo)志設(shè)計(jì)
 

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

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

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

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

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

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

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

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

網(wǎng)站地圖