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

2023-12-14 17:24:15 來(lái)源/作者: / 己有:0人學(xué)習(xí)過(guò)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

這個(gè)時(shí)候,問(wèn)題就出現(xiàn)了。

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

按照正常的光源方向,我應(yīng)該在最上面的邊上看到高光。理論讓應(yīng)該是這種打光方式。但是我沒(méi)有選,我選擇了打中光,因?yàn)榘凑照5淖笊戏绞酱蚬猓X包的邊線會(huì)不清晰。因?yàn)閕con很多都很小,所以光源越復(fù)雜,有時(shí)候就越難辨析。我這里是主觀的選擇了打光方式。以避免放大縮小帶來(lái)的麻煩(icon制作一定要考慮尺寸大小,視覺(jué)可辨析度的問(wèn)題)這是樣例,所以也就不會(huì)深究了。

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

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

1,純面片,一般適合扁平化與無(wú)透視的設(shè)計(jì)。

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

3,在稍微寫實(shí)一點(diǎn)的設(shè)計(jì)里,錢包的厚度,不會(huì)是純平面,是弧面的。

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

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

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

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

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

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