UI知識，UI需要什么樣的美術(shù)能力：應(yīng)用篇

我們生活在三維空間里，所以所有的物品都應(yīng)該有厚度H（三維世界無非是多了一個z軸方向的縱深），哪怕是一張紙。

一個面片，哪怕只有一像素的高光，和陰影，也能直接從空間中脫穎而出。

這是一個概念，并不是一個必須要遵守的規(guī)則。特別是在UI設(shè)計里，很多風(fēng)格比如扁平化，等等，都是可以忽略厚度，純拼顏色和構(gòu)圖的。但是為了方便大家理解繪畫邏輯。所以我們今天的樣例，是有空間和結(jié)構(gòu)概念的。

ABCD：分辨增加了不同方向的厚度。

首先不會選擇B，B增加的厚度部分，是沒有機會展示錢包內(nèi)部的，直接封死了增加細(xì)節(jié)的范圍。

其他三個都o(jì)k，都可以繼續(xù)延續(xù)設(shè)計細(xì)節(jié)。

我選擇了C，別問我為什么，個人喜好而已，因為這個命題沒有其他icon與UI界面的透視方向等參考，所以，選擇隨意。一般來說整體UI的光源，透視方向應(yīng)該統(tǒng)一。除非特殊需求和目的，或者資源限制。

我們首先在結(jié)構(gòu)上增加這個錢包的“牛皮”厚度

得到一個這樣的結(jié)果。但是。。。。。。

如果任何物體都有厚度，那么它最少有兩個部分，就是受光部分，和陰影部分。

所以我也要為錢包的邊框，調(diào)整受光和背光，以增加它的視覺厚度。

這個時候，問題就出現(xiàn)了。

按照正常的光源方向，我應(yīng)該在最上面的邊上看到高光。理論讓應(yīng)該是這種打光方式。但是我沒有選，我選擇了打中光，因為按照正常的左上方式打光，錢包的邊線會不清晰。因為icon很多都很小，所以光源越復(fù)雜，有時候就越難辨析。我這里是主觀的選擇了打光方式。以避免放大縮小帶來的麻煩（icon制作一定要考慮尺寸大小，視覺可辨析度的問題）這是樣例，所以也就不會深究了。

我們逐步的增加了這個錢包面片的厚度。

1，純面片，一般適合扁平化與無透視的設(shè)計。

2，有一定厚度，但是沒有形狀復(fù)雜變形，這種結(jié)構(gòu)多數(shù)都是為了打光考慮的，畢竟純面片是沒有打光機會的。

3，在稍微寫實一點的設(shè)計里，錢包的厚度，不會是純平面，是弧面的。

所以我們現(xiàn)在來增加它的弧面厚度。

弧面周圍都是陰影部分，高光都集中在最高處。所以選好范圍直接內(nèi)陰影就行了。

給了兩個高光，因為一個是弧面是錢包正面的高光，一個弧面是錢包側(cè)面的高光，當(dāng)你理解了錢包的形狀。你就很容易確定陰影與高光位置。那么你就更容易體現(xiàn)結(jié)構(gòu)。