設(shè)計(jì)師必讀:應(yīng)用開(kāi)發(fā)的美學(xué)之道

0 評(píng)論 2428 瀏覽 1 收藏 8 分鐘

如何為應(yīng)用開(kāi)發(fā)做出好的美術(shù)設(shè)計(jì),除了摸熟 Photoshop 以外,還需了解一下一下四個(gè)步驟。

拜現(xiàn)今軟件進(jìn)步所賜,路上的小學(xué)生都知道 PS 大神是什么(小朋友說(shuō):PS 就是可以把我的照片變漂亮的東西)所以理所當(dāng)然,很多人都把「會(huì)操作 Photoshop」等于「會(huì)美術(shù)設(shè)計(jì)」給劃上等號(hào),以下提供筆者多年在中港臺(tái)與日本等地從事美術(shù)相關(guān)發(fā)包經(jīng)驗(yàn)中的見(jiàn)解,提供各位對(duì)應(yīng)用美術(shù)有興趣的朋友們參考。

概念——Step 1

一個(gè)合格(并容易受到用戶青睞的)圖標(biāo)(ICON)絕對(duì)不是單純的追求視覺(jué)上的漂亮美觀,而是「重視理念」能不能找出這個(gè)應(yīng)用(產(chǎn)品)的核心功能,讓用戶第一眼就知道「這是做什么的」再來(lái)能不能涵蓋品牌精神,涵蓋團(tuán)隊(duì)的夢(mèng)想,涵蓋產(chǎn)品想追求的高度(獲利)等視角也是延伸的學(xué)問(wèn)之一,在習(xí)慣用電腦作業(yè)的時(shí)代,依然有許多專(zhuān)業(yè)美術(shù)人員在設(shè)計(jì)圖標(biāo)時(shí)會(huì)選擇先把 MAC 關(guān)閉(當(dāng)然包括 Photoshop 等繪圖軟件)然后拿出常用的筆記簿,在上面記載各種密密麻麻的想法,其中有愚蠢的想法,有可愛(ài)的想法,有大膽的想法,有天馬行空的想法,也有「眼光獨(dú)具」的最佳創(chuàng)意,筆者的習(xí)慣是先在紙上用鉛筆畫(huà)出幾十個(gè)圖標(biāo),直到有一個(gè)「感覺(jué)對(duì)了」才會(huì)上電腦進(jìn) Photoshop 去執(zhí)行。

實(shí)踐——Step 2

在紙上作業(yè)中想出了一個(gè)好的構(gòu)圖或點(diǎn)子之后,接著就可以打開(kāi) Photoshop,然后把剛剛在紙上繪制的圖標(biāo)草圖去用各種方式構(gòu)成,這時(shí)光一個(gè)素材的選擇就可以有幾十種不同的表現(xiàn)手法,例如攝影圖片,手繪插圖(涂鴉式)電腦繪圖等等(還不含 2D 或 3D 的表現(xiàn)形式)所以要如何「表現(xiàn)」就是第二階段(上電腦)后的核心工作。

筆者相信多數(shù)個(gè)人開(kāi)發(fā)者在做美術(shù)的時(shí)候都會(huì)不知道怎么開(kāi)始,因?yàn)椴粫?huì)畫(huà)圖,所以很多人只能拿些現(xiàn)成的素材到 Photoshop 中試圖拼湊,但能夠做出原創(chuàng)的美術(shù)資源總是比較好的,如果不會(huì)美術(shù),不會(huì)畫(huà)圖,那建議你可以多往「攝影」方面去著眼,因?yàn)椤概恼铡故侨〉盟夭牡淖罴逊绞街弧?/p>

一般制作應(yīng)用所需的小 ICON(例如 UI 的功能鈕或選單鈕之類(lèi))都有基本或通用的 PS 文件可以套用(這部分的通用圖標(biāo)有很多,常用的其實(shí)就那幾種,即使外包請(qǐng)美術(shù)做一套也不為過(guò))其他部分都可以多用自己的攝影作品,尤其在截圖上,可以多利用利用 Photoshop 內(nèi)建的文字工具在截圖上方加入一段「產(chǎn)品特色」文字(你可以做一套英文版來(lái)通用全球,再做一套供國(guó)內(nèi)使用,繁體與簡(jiǎn)體轉(zhuǎn)換容易,臺(tái)灣與香港的付費(fèi)習(xí)慣更好,應(yīng)該值得你再做一套繁體版的上架臺(tái)灣與香港,本地化對(duì)收入總會(huì)有幫助的)

筆者在 Photoshop 上做圖標(biāo)時(shí),其實(shí)跟紙上作業(yè)差不多,通常一個(gè)應(yīng)用筆者會(huì)做出十個(gè)以上的不同圖標(biāo)(完全不同)然后讓朋友(建議多找非專(zhuān)業(yè)人士來(lái)挑選,因?yàn)槟愕膽?yīng)用要賣(mài)的對(duì)象是一般群眾,要找受眾面最廣的族群來(lái)幫你挑選圖標(biāo)最好)而且筆者通常會(huì)把圖標(biāo)列印出來(lái),貼在辦公室的白板上同時(shí)觀看,這樣更容易選出最適當(dāng)?shù)膱D標(biāo),雖然花了幾張 A4 紙與墨水,但如果這樣能讓?xiě)?yīng)用有更多的收入,那應(yīng)該是非常值得的,這是國(guó)內(nèi)外許多專(zhuān)業(yè)美術(shù)工作的必要流程,筆者已經(jīng)習(xí)慣這樣去做,傳統(tǒng)的觀念有時(shí)候真的很好,學(xué)生時(shí)代累積的基礎(chǔ)或在大公司工作的經(jīng)驗(yàn)總是不錯(cuò)的(小公司學(xué)經(jīng)驗(yàn),大公司學(xué)制度)

延伸—Step 3

最后,如 果你對(duì)你的應(yīng)用一開(kāi)始就有高度期望或計(jì)劃,除了送審用的圖標(biāo)外,如果事先跟請(qǐng)美術(shù)制作高清(可供印刷用的圖片)或直接以 AI/EPS 向量圖檔來(lái)制作,通常外包美術(shù)都會(huì)樂(lè)意的(尤其 iOS7 之后,圖標(biāo)的風(fēng)個(gè)趨向簡(jiǎn)約,這時(shí)候用 AI 及 EPS 向量格式來(lái)制作是最適合的,可以改用 Illustrator 來(lái)制作圖標(biāo))另外,設(shè)計(jì)好的圖標(biāo)可以延伸用在(客戶服務(wù)&支援網(wǎng)站)的設(shè)計(jì),也可以用來(lái)運(yùn)用在給國(guó)內(nèi)外各大推廣渠道的廣告 Banner 制作之上,甚至可以印在名片上使用(即使一人開(kāi)發(fā),也可以當(dāng)成公司或工作室來(lái)經(jīng)營(yíng))

學(xué)習(xí)應(yīng)用的 ICON/UI/UX 等美術(shù)設(shè)計(jì)別無(wú)他法,買(mǎi)書(shū)自學(xué)摸熟功能,接下來(lái)就靠自己慢慢從練習(xí)中體會(huì),過(guò)程跟學(xué)寫(xiě)代碼很類(lèi)似,都要下苦心砸時(shí)間,但學(xué)習(xí)美術(shù)更需要「體會(huì)」與「感覺(jué)」要花些時(shí)間去體會(huì)「美」是什么,如果有心想自學(xué)美術(shù),成為「同時(shí)會(huì)美術(shù)也會(huì)程序的通才」那么多去類(lèi)似很多人都知道的「500px.com」或「behance.net」等優(yōu)秀網(wǎng)站去觀摩別人的攝影與圖像作品對(duì)你會(huì)有幫助。

高度——Step 4

攝影是培養(yǎng)美學(xué)的重要關(guān)鍵(尤其對(duì)于多數(shù)程序員比較缺乏的手繪技能來(lái)說(shuō),攝影圖片能有效地輔助你作為應(yīng)用開(kāi)發(fā)時(shí)的美術(shù)資源之一)運(yùn)用攝影圖片來(lái)當(dāng)成你的 UI 或圖標(biāo)的方式也是一種表現(xiàn)風(fēng)格,妥善運(yùn)用攝影圖片在你的應(yīng)用截圖或圖標(biāo)也是很好的。

學(xué)攝影可以培養(yǎng)美感,培養(yǎng)對(duì)「美」的眼光與「鑒賞力」可以「有效」且「精準(zhǔn)」的知道什么叫做「合格」的美術(shù)成品,這樣可以減少很多不必要的美術(shù)修改費(fèi)用,更可以盡量避免「槍斃」你的美術(shù)伙伴與作品,對(duì)美術(shù)的「鑒賞力」可以降低美術(shù)的費(fèi)用支出,提高項(xiàng)目的開(kāi)發(fā)進(jìn)度,你不一定得會(huì)「畫(huà)圖」但一定要有足夠的「鑒賞力」

總結(jié):要獨(dú)立做好應(yīng)用開(kāi)發(fā)所需的美術(shù)設(shè)計(jì),買(mǎi)書(shū)摸熟 Photoshop(或其他你想用到的 2D 或 3D 軟件)接著大量觀摩別人作品的方式來(lái)「從生活中培養(yǎng)你對(duì)美學(xué)的鑒賞力」然后藉由攝影與其他方式來(lái)將素材運(yùn)用到開(kāi)發(fā)作品中,如此能讓你更容易做出吸引用戶下載的優(yōu)秀應(yīng)用。

本文作者 LeonHK ; ?轉(zhuǎn)載自:產(chǎn)品中國(guó)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!