當(dāng)前位置:首頁>ps入門教程>ps基礎(chǔ)教程>設(shè)計(jì)知識>教程內(nèi)容

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

來源:站酷 作者:鐵木士 學(xué)習(xí):3529人次

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

1不會畫畫影響大么?

2做ui一定要會畫畫么?

3會畫畫就UI做的好么?

等等的問題吧

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

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

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

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

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

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

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

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

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

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

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

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

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

我首先翻轉(zhuǎn)了這個錢包,理由嘛:

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

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

我們來看下四個草稿:

一:只有外輪廓,無法判定是什么

二:有了一個扣具的輪廓,依然無法準(zhǔn)確判斷

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

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

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

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

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

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

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!