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

上一講以后很多人給我留言，有各種問法：

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

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

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

等等的問題吧

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

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

那么我們怎么才能以最少的視覺元素，讓用戶快速識(shí)別信息內(nèi)容呢？

這是一只鳥，顯而易見，它身上什么才是主要信息？嘴？眼睛？翅膀？我畫什么才能讓人知道它是一只鳥呢？

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

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

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

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

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

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

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

一：只有外輪廓，無法判定是什么

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

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

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

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

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

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