UI知識,UI需要什么樣的美術能力:應用篇
我們生活在三維空間里,所以所有的物品都應該有厚度H(三維世界無非是多了一個z軸方向的縱深),哪怕是一張紙。
一個面片,哪怕只有一像素的高光,和陰影,也能直接從空間中脫穎而出。
這是一個概念,并不是一個必須要遵守的規(guī)則。特別是在UI設計里,很多風格比如扁平化,等等,都是可以忽略厚度,純拼顏色和構圖的。但是為了方便大家理解繪畫邏輯。所以我們今天的樣例,是有空間和結構概念的。
ABCD:分辨增加了不同方向的厚度。
首先不會選擇B,B增加的厚度部分,是沒有機會展示錢包內部的,直接封死了增加細節(jié)的范圍。
其他三個都ok,都可以繼續(xù)延續(xù)設計細節(jié)。
我選擇了C,別問我為什么,個人喜好而已,因為這個命題沒有其他icon與UI界面的透視方向等參考,所以,選擇隨意。一般來說整體UI的光源,透視方向應該統(tǒng)一。除非特殊需求和目的,或者資源限制。
我們首先在結構上增加這個錢包的“牛皮”厚度
得到一個這樣的結果。但是。。。。。。
如果任何物體都有厚度,那么它最少有兩個部分,就是受光部分,和陰影部分。
所以我也要為錢包的邊框,調整受光和背光,以增加它的視覺厚度。
這個時候,問題就出現(xiàn)了。
按照正常的光源方向,我應該在最上面的邊上看到高光。理論讓應該是這種打光方式。但是我沒有選,我選擇了打中光,因為按照正常的左上方式打光,錢包的邊線會不清晰。因為icon很多都很小,所以光源越復雜,有時候就越難辨析。我這里是主觀的選擇了打光方式。以避免放大縮小帶來的麻煩(icon制作一定要考慮尺寸大小,視覺可辨析度的問題)這是樣例,所以也就不會深究了。
我們逐步的增加了這個錢包面片的厚度。
1,純面片,一般適合扁平化與無透視的設計。
2,有一定厚度,但是沒有形狀復雜變形,這種結構多數(shù)都是為了打光考慮的,畢竟純面片是沒有打光機會的。
3,在稍微寫實一點的設計里,錢包的厚度,不會是純平面,是弧面的。
所以我們現(xiàn)在來增加它的弧面厚度。
弧面周圍都是陰影部分,高光都集中在最高處。所以選好范圍直接內陰影就行了。
給了兩個高光,因為一個是弧面是錢包正面的高光,一個弧面是錢包側面的高光,當你理解了錢包的形狀。你就很容易確定陰影與高光位置。那么你就更容易體現(xiàn)結構。