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

上一講以后很多人給我留言，有各種問(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è)錢包。。。。。那么是什么讓我們確認(rèn)了這是個(gè)錢包么？

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

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

一般來(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è)錢包，第一個(gè)需要建立的就是結(jié)構(gòu)：