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

上一講以后很多人給我留言，有各種問(wèn)法：

1不會(huì)畫(huà)畫(huà)影響大么？

2做ui一定要會(huì)畫(huà)畫(huà)么？

3會(huì)畫(huà)畫(huà)就UI做的好么？

等等的問(wèn)題吧

總結(jié)下來(lái)，我覺(jué)得有必要講一下，繪畫(huà)理論在設(shè)計(jì)中的實(shí)際用途。這樣才方便大家判斷，繪畫(huà)在設(shè)計(jì)中占的比重：其實(shí)吧，繪畫(huà)沒(méi)在UI設(shè)計(jì)中占多大比重，這個(gè)就像麻雀雖小五臟俱全一樣，占的比重小，但是挺重要，少了就是殘疾，多了，也不可能因?yàn)槟阋粋�(gè)器官過(guò)大，就對(duì)你身體有絕對(duì)的好處。相反可能影響你的健康。凡事都有度嘛。

除了網(wǎng)店那種商品展示之類的，UI里的基本沒(méi)有什么是直接使用照片的，都需要重新設(shè)計(jì)和繪制。

那么我們?cè)趺床拍芤宰钌俚囊曈X(jué)元素，讓用戶快速識(shí)別信息內(nèi)容呢？

這是一只鳥(niǎo)，顯而易見(jiàn)，它身上什么才是主要信息？嘴？眼睛？翅膀？我畫(huà)什么才能讓人知道它是一只鳥(niǎo)呢？

其實(shí)都不用，剪影是最低的信息辨識(shí)方式。你會(huì)發(fā)現(xiàn)大量的UI原件，信息內(nèi)容都是剪影轉(zhuǎn)化而來(lái)的，根據(jù)不同風(fēng)格，剪影外輪廓也會(huì)有不同的變形。風(fēng)格不在今天討論內(nèi)容里，所以先忽略變形這個(gè)問(wèn)題。我們今天只聊最基礎(chǔ)的繪畫(huà)原理。

這玩意，基本上就難以辨認(rèn)了吧？不是所有的物品剪影就能區(qū)分的，還是需要細(xì)節(jié)的。

其實(shí)這是個(gè)錢(qián)包。。。。。那么是什么讓我們確認(rèn)了這是個(gè)錢(qián)包么？

我先來(lái)假定一個(gè)命題，我們今天來(lái)制作一個(gè)錢(qián)包的icon。通過(guò)完成過(guò)程來(lái)熟悉繪畫(huà)知識(shí)的，應(yīng)用和理解。

我首先翻轉(zhuǎn)了這個(gè)錢(qián)包，理由嘛：

一般來(lái)講，不是特殊需求，一個(gè)物品的方向都是右側(cè)為主！為什么呢？因?yàn)橐话愎庠捶较蚨际亲髠?cè)打出的。這其實(shí)不光是人的視覺(jué)習(xí)慣，也是因?yàn)槭袌?chǎng)上的通用設(shè)計(jì)，導(dǎo)致了這個(gè)經(jīng)驗(yàn)式的設(shè)計(jì)習(xí)慣。這不是一個(gè)一定要遵守的規(guī)則，僅僅是常規(guī)參考而已。的根據(jù)實(shí)際情況來(lái)判斷物品方向和光源問(wèn)題。我們今天只單獨(dú)做一個(gè)icon，所以沒(méi)有整體UI設(shè)計(jì)的影響，不會(huì)考慮太多其他因素。

我們來(lái)看下四個(gè)草稿：

一：只有外輪廓，無(wú)法判定是什么

二：有了一個(gè)扣具的輪廓，依然無(wú)法準(zhǔn)確判斷

三：扣具上有了扣子，這回容易判斷一點(diǎn)了

四：多了縫線的細(xì)節(jié)

所以信息簡(jiǎn)化這個(gè)事情，是有極限的。你能用最少的視覺(jué)內(nèi)容，讓用戶分辨出信息，這是一個(gè)很理想的狀態(tài)。

但是僅僅是識(shí)別，還不能滿足UI的需求。比如做成這種草圖，能認(rèn)出來(lái)，多數(shù)情況下是不能直接使用的。

那么我們現(xiàn)在就來(lái)復(fù)雜化這個(gè)錢(qián)包，第一個(gè)需要建立的就是結(jié)構(gòu)：

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

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

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

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

首先不會(huì)選擇B，B增加的厚度部分，是沒(méi)有機(jī)會(huì)展示錢(qián)包內(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)一。除非特殊需求和目的，或者資源限制。

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

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

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

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

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

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

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

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

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

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

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

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

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

我們現(xiàn)在來(lái)加入牛皮扣：

首先這個(gè)絕對(duì)不ok，扁平化的牛皮扣可以這么做，但是有透視的不行。

因?yàn)榕Ｆた凼歉街阱X(qián)包上的，它必須遵守錢(qián)包的結(jié)構(gòu)，才能包裹住錢(qián)包。

同樣面片向上移動(dòng)就有了厚度，復(fù)制縮小，就留出了牛皮扣的邊框。當(dāng)你理解了空間，結(jié)構(gòu)，光原理，其實(shí)你就很容易的利用一個(gè)最初的形狀去做加減法，大大增加了繪制效率。

牛皮扣，也不可能是完全平面，所以我們給出了弧面的高光和陰影。

一個(gè)圓形，復(fù)制，移動(dòng)，等于扣子。

我們下面來(lái)為錢(qián)包增加細(xì)節(jié)，既然是錢(qián)包，那總應(yīng)該有點(diǎn)錢(qián)吧？

我們做了兩個(gè)面片，一個(gè)硬幣，但是看起來(lái)總有點(diǎn)問(wèn)題，問(wèn)題在哪呢？層級(jí)！

用陰影遮擋住錢(qián)幣以后，錢(qián)幣才看起來(lái)像是放在錢(qián)包里。UI中有很多層級(jí)問(wèn)題，都是通過(guò)陰影遮擋達(dá)到的。

先后級(jí)問(wèn)題，需要透視，光，結(jié)構(gòu)，等原理一起解決。

請(qǐng)注意第一個(gè)錢(qián)幣的陰影，與第二個(gè)修正之后的陰影，第二個(gè)更尊重錢(qián)包本身的結(jié)構(gòu)，也就看起來(lái)更舒服。

所以結(jié)構(gòu)影響光，陰影，陰影也必須跟結(jié)構(gòu)的透視關(guān)系是一致的。

我隨便在網(wǎng)上找一個(gè)牛皮材質(zhì)，覆蓋在錢(qián)包之上，因?yàn)槊靼店P(guān)系都已經(jīng)做完了，所以看起來(lái)直接就變成牛皮錢(qián)包了。

我只要更改材質(zhì)的顏色，就可以更改錢(qián)包的顏色。

那么下一步就是手繪修正了，把材質(zhì)的范圍，收到牛皮部分，調(diào)整高光大小增加細(xì)節(jié)。

差距大么？恩，貌似很大，因?yàn)檫@是一個(gè)網(wǎng)上的效果圖。感謝作者，省了我很多時(shí)間。

總結(jié)一下：

這一講，從剪影，到面片，到空間結(jié)構(gòu)。我們?cè)诎凑战Y(jié)構(gòu)原理，光原理，透視原理，不停的復(fù)雜化一個(gè)物品。

我的目的不是要講，怎么畫(huà)一個(gè)東西好看，我的目的是希望大家能夠通過(guò)這些簡(jiǎn)單原理，去分析你要做的東西，無(wú)論做加法還是減法，都需要尊重這些原理。

UI不是一個(gè)繪畫(huà)工作，了解繪畫(huà)原理是為了，拆解我們的工作過(guò)程，合理化，規(guī)劃設(shè)計(jì)流程。

其實(shí)UI里很少涉及到你需要大量手繪的部分。都是基本形狀的應(yīng)用。所以，繪畫(huà)原理也可以淺嘗即止。不需要每個(gè)UI都擁有原畫(huà)師級(jí)別的繪畫(huà)能力。