零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)超實(shí)用新手指南

2018-01-26 1458 0
編者按:無雞湯不吹水,一整篇全是可借鑒可實(shí)操的前輩經(jīng)驗(yàn),從學(xué)習(xí)準(zhǔn)備、繪畫技巧到軟件掌握、設(shè)計(jì)理論,共七個層級,步步進(jìn)階,力求讓新手能通過自學(xué),成為一名專業(yè)的UI設(shè)計(jì)師。也建議大多數(shù)自學(xué)成才的設(shè)計(jì)師閱讀,查漏補(bǔ)缺 >>> 酸梅干超人:下面是我這幾年經(jīng)驗(yàn)的總結(jié)和思考,雖然我并不算是最出類拔萃的UI設(shè)計(jì)師,但也希望對新人有益。
第一點(diǎn):學(xué)習(xí)準(zhǔn)備——啟蒙 學(xué)習(xí)一項(xiàng)技能,尤其是已經(jīng)有一定沉淀并在各行各業(yè)有廣泛應(yīng)用的技能,就一定要對它先有充分的認(rèn)知。在開始正式學(xué)習(xí)前,你需要花足夠的經(jīng)歷去了解和查閱它的起源、發(fā)展、應(yīng)用、未來。UI作為平面設(shè)計(jì)的一部分,再往上又從屬與美術(shù)學(xué)這一大類。因此,首先要先去了解整個美術(shù)史的發(fā)展。從人類起源各個階段中,美術(shù)經(jīng)歷了什么樣的變化,在各自的時代發(fā)揮了什么作用,近代美術(shù)史又經(jīng)歷了哪些波折,平面設(shè)計(jì)藝術(shù)是如何發(fā)展壯大走進(jìn)千家萬戶,并且有哪些經(jīng)驗(yàn)成功過度到后來的UI設(shè)計(jì)中。那些享譽(yù)中外的藝術(shù)大師有何過人之處,他們?yōu)槊佬g(shù)學(xué)發(fā)展做出了哪些貢獻(xiàn),他們的名作到底有何動人之處。 在今天的UI設(shè)計(jì)群體中,我們作為專業(yè)的設(shè)計(jì)人員,可以和別人侃侃而談雷軍的創(chuàng)業(yè)心得,羅胖子的工匠情懷,滴滴快滴的商業(yè)模式以及BAT在傳統(tǒng)行業(yè)的布局等等,各種其實(shí)并不太相干的話題,卻說不出半點(diǎn)藝術(shù)見解。 我們看不懂博物館展覽那些畫作,不知道梵高畫了什么作品,抽象派到底在鬧騰些什么,更甚者連扁平化的推動有什么深層次的原因都不明白。 如果說最近很火的二月河說大學(xué)生不看《紅樓夢》是恥辱尚有爭議性,那么設(shè)計(jì)師無法理解前人藝術(shù)成就是絕對的悲哀,無法辯駁的事實(shí)。 了解美術(shù)史,學(xué)會入門的美術(shù)鑒賞,目的是以正視聽。學(xué)會用多個緯度去思考美學(xué),學(xué)會用更深入的方法來看待問題,學(xué)會從更宏觀的視角審視行業(yè)……這樣,你才能更客觀的去理解UI的發(fā)展歷程。這些知識和思想,將為你的職業(yè)生涯做出啟蒙,才更容易成為一個有內(nèi)涵有深度的設(shè)計(jì)師,這當(dāng)中還有諸多優(yōu)點(diǎn),就得靠你們自己慢慢體會。 下面推薦書目: 《藝術(shù)的故事》([英]貢布里希)(重點(diǎn)) 《西方美術(shù)簡史》((美)亨德里克?威廉?房龍) 近代設(shè)計(jì)史(一下搜不到這書的地址,回頭我拍張照片) 《設(shè)計(jì)心理學(xué)3:情感設(shè)計(jì)》 (有1,2,3,都得看) 以上是我目前看過能想到的最基礎(chǔ)書目,如果有朋友覺得還有合適的請留言補(bǔ)充上來。 哲學(xué)有三大哲學(xué)問題,“你是誰?”“你從哪里來?”“你要到哪里去?”,構(gòu)成了哲人在探索人世真理時的基礎(chǔ)框架。我們也一樣,要在階段給自己提出三個問題,并花至少一個月的時間尋找答案: 設(shè)計(jì)是什么?設(shè)計(jì)是如何產(chǎn)生的?設(shè)計(jì)可以做什么?
第二點(diǎn):繪畫技巧——洞察 曾經(jīng)和很多同行爭論過,UI設(shè)計(jì),到底需不需要手繪訓(xùn)練。想必大家都知道,目前國內(nèi)知名的UI設(shè)計(jì)師,追波上的大神們,很多都是草根出身,從其它行業(yè)空降來的,他們的出色是有目共睹的,似乎從某種層面上證實(shí),不需要有繪畫基礎(chǔ),也可以做好UI,也可以當(dāng)大神? 圖樣拿衣服!我們來說說繪畫的問題。 美術(shù)高考主要考的三大項(xiàng):素描、速寫、色彩。就是繪畫入門的三大基礎(chǔ)課題,我們學(xué)習(xí)的過程也是以這個順序逐步覆蓋的。如果你已經(jīng)在第一部看完了那些書籍,就會知道,學(xué)習(xí)基礎(chǔ)繪畫的過程中,我們在紙張上對現(xiàn)實(shí)世界的物體進(jìn)行細(xì)致準(zhǔn)確的描繪,也就需要我們更仔細(xì)的觀察事物。光照射的角度是如何的,在對應(yīng)的形狀中表現(xiàn)出什么明暗分布,在透視原理下杯口厚度的弧形是怎么變化的。隨著繪畫的深入你就會逐漸培養(yǎng)一雙洞察細(xì)節(jié)的眼睛,你會對所有設(shè)計(jì)和形體做出本能的反應(yīng),分析它們的美丑,找出核心所在。 我們看看下面這樣的案例:
這是一個很簡潔的小鳥,只用幾個細(xì)節(jié)就輕松的表現(xiàn)出來,但我相信,如果要原圖照抄,有90%以上的UI設(shè)計(jì)師是畫不出精髓的(不信你們試試)。越是這般簡單的圖形,在弧度、頭身比、重心偏向這類細(xì)節(jié)上就越關(guān)鍵,如果你沒有良好的觀察能力,那么就連抄也抄不像,你只能做出曲線都歪歪扭扭的貝西貨并自己洋洋得意地四處上傳設(shè)計(jì)媒體求贊求認(rèn)可。 前面提到的這批國內(nèi)的大神,其實(shí)就是在遠(yuǎn)超常人的勤奮中積累了觀察的經(jīng)驗(yàn),以此可以復(fù)制一定的風(fēng)格,并能發(fā)現(xiàn)設(shè)計(jì)中的細(xì)節(jié)而不斷做出改正。但這就完了么?當(dāng)然不是。 你們可以仔細(xì)去觀察這些沒有繪畫能力的UI設(shè)計(jì)師,他們的作品存在著很強(qiáng)的局限性,雖然可以很好完成熟悉領(lǐng)域和流行風(fēng)格的設(shè)計(jì),但是形勢是很單一,并且缺乏真正的創(chuàng)造力。強(qiáng)大的手繪能力,除了提高洞察力以外,就是為你將來創(chuàng)作的多元化提供更多可能,看下面案例: 比如繪制這樣的圖形,私以為沒有手繪技能無異于天方夜譚,而GAME UI的最大門檻就在這里。你的繪畫技巧會支撐你跨過更多的門檻,在設(shè)計(jì)的道路上有更多的選擇和可能,也會支撐你走的更遠(yuǎn)。 那么學(xué)習(xí)繪畫要到什么程度呢?直到你覺得可以正確繪出靜物為止。推薦去報(bào)一些高考培訓(xùn)的機(jī)構(gòu),和高三孩紙們一塊兒學(xué)畫,你會提升的相當(dāng)快,這個過程只需要兩三個月的時間。不要覺得可以跳過,將來成為出色設(shè)計(jì)師的成本將遠(yuǎn)低于不學(xué)習(xí)繪畫的其他人。 還有,最重點(diǎn)要掌握的一個繪畫技能,我覺得是結(jié)構(gòu)素描。 你就可以在紙張上對想繪制的圖形做出快速、準(zhǔn)確的打稿,效率和延展性遠(yuǎn)勝上機(jī)鼠繪。 手繪將貫穿你整個職業(yè)生涯,在今后的學(xué)習(xí)工作中要保持這個習(xí)慣,相信我,每到一個合適的時機(jī),它總會給你帶來意想不到的驚喜。
第三點(diǎn):掌握軟件——手段 這一步就正式開始進(jìn)入學(xué)習(xí)軟件的步驟。如果學(xué)習(xí)的是UI,那么以下幾種軟件是必不可少的: PS、AI、DW、Sketch……其余的根據(jù)愛好自己補(bǔ)充。 這里要先和大家談?wù)劊覀兌贾烂拦τ谠O(shè)計(jì)師來說已經(jīng)成為具有侮辱性的貶義詞,設(shè)計(jì)師們喜歡反駁,你丫才是美工,你全家都是美工。有點(diǎn)小理想的有志青年們都對這個稱謂充滿鄙夷,但我得給大多數(shù)人潑冷水,因?yàn)榇蠖鄶?shù)設(shè)計(jì)師連一個合格的美工都夠不上。 我們知道美工代表的是一種技師的稱謂,有一定技巧但沒有創(chuàng)造力??善褪墙^大多數(shù)人都沒有掌握足夠的技巧,這就是當(dāng)前設(shè)計(jì)行業(yè)所需要面對的事實(shí)。很多設(shè)計(jì)師沒有經(jīng)過前兩個步驟的熏陶的,所以在學(xué)習(xí)軟件的過程中很容易自滿,明明對軟件的掌握還很膚淺就已經(jīng)恬不知恥的在簡歷中輸入”精通“二次(哎呀,好像在說我自己?。?。他們的視角是狹隘的,只認(rèn)為學(xué)會了PS這些工具,就學(xué)會了設(shè)計(jì),也忽略了自己遠(yuǎn)遠(yuǎn)沒有達(dá)到美工門檻的界限。下面我來談?wù)勗趺磳W(xué)習(xí)這些軟件。 首先看李濤視頻的前三課:李濤Photoshop高手之路基礎(chǔ)篇。另有提高篇,同在云課堂。
只看前三課!重復(fù)強(qiáng)調(diào)一遍,先只看前三課,并且做好筆記把所有內(nèi)容都背到滾瓜爛熟為止(我看了至少五遍以上)。這是整個UI設(shè)計(jì)行業(yè)里最基礎(chǔ)的知識點(diǎn),光、色、分辨率、色彩模式,連這些都沒有掌握你就不要想精通設(shè)計(jì)軟件和掌握它們的原理。 然后你就開始去看別的視頻教程,這時候可以去淘寶買:PS教程 幾塊錢就有一打的高清入門視頻,不要浪費(fèi)時間在搜索免費(fèi)的低質(zhì)量視頻上。入門教程基本都是相同的,你要完整的看完和跟著學(xué)習(xí)幾個新手教程,直至對軟件使用有了初步的理解,然后再返回去看李濤的視頻剩下的內(nèi)容。 那軟件要學(xué)到什么程度?學(xué)到你可以用它臨摹出任何使用這種軟件設(shè)計(jì)的圖形。一定要記住,設(shè)計(jì)軟件只是我們用來實(shí)現(xiàn)設(shè)計(jì)的一種手段,過度沉迷在軟件的研究中是本末倒置的,但如果你使用軟件連抄都抄不出來,那就是一種不需要反駁的恥辱。例如下圖: 這樣的作品,你有了足夠的觀察力,靠對軟件的掌握度就可以輕松臨摹,但很多已經(jīng)從業(yè)數(shù)年時間的設(shè)計(jì)師連這種臨摹都做不到,原因在哪里你們自己好好想想。軟件的掌握是為你實(shí)現(xiàn)更多設(shè)計(jì)方案提供可能性,不要讓軟件熟悉度這件最簡單容易的技能變成自己的短板,至少我們要成為一個合格的美工!經(jīng)常自己做一些練習(xí)來測試自己對軟件掌握度在哪里,就很容易發(fā)現(xiàn)問題,然后自己去查資料做研究。 好好去理解每個軟件可以實(shí)現(xiàn)什么,優(yōu)勢是什么,極限在哪里。然后你就再!也!不!會!跑去大神評論區(qū)里問:好牛逼,請問這是PS做的嗎?請和我默念這是本世紀(jì)設(shè)計(jì)界里最愚蠢的評論,不要讓它們發(fā)生在自己身上。 再嘮叨一次,軟件只是一種手段,你還并不懂設(shè)計(jì),少吹牛逼!
第四點(diǎn):設(shè)計(jì)理論——實(shí)踐 廣義上來說,到這步才是真正開始學(xué)習(xí)設(shè)計(jì),也是讓一、二兩點(diǎn)作用開始充分發(fā)揮的時候。 因?yàn)榭催^藝術(shù)史,所以你會知道,每個時代流行的藝術(shù)創(chuàng)作有各自的手法特點(diǎn),有共性,所以可以被歸納和總結(jié),也就可以教授,培養(yǎng)出相同的作家。換句話說,美術(shù)家是可以被量產(chǎn)的。在理論不斷被完善的今天,要做出好的設(shè)計(jì)一樣是可以通過理論學(xué)習(xí)——實(shí)踐產(chǎn)生,一定不要認(rèn)為這是天賦上的差距,別人比自己就更有藝術(shù)細(xì)胞。那些能被歷史銘記的藝術(shù)大師,之所以偉大,是因?yàn)樗麄兊拈_創(chuàng)性或者作品所包含的人文精神和偉大的靈魂,而不只是一幅出色的圖畫。 前面的幾點(diǎn)都為你提供了足夠的實(shí)踐基礎(chǔ),所以在這部才能讓你正確看待自己的潛力,不會輕易停下追求進(jìn)步的腳步。只有最偉大的設(shè)計(jì)師才需要較量天賦,而成為一個優(yōu)秀的設(shè)計(jì)師靠的是努力。設(shè)計(jì)是勤行,不是設(shè)計(jì)人,不入設(shè)計(jì)門。 那么理論知識我們該學(xué)習(xí)什么呢?首先是基礎(chǔ)中的基礎(chǔ):三大構(gòu)成(基礎(chǔ)含義) 每個方向都需要閱讀相應(yīng)的教材,重要性無以復(fù)加,你需要在觀看的時候一邊做練習(xí)。然后才是具體設(shè)計(jì)類的書籍,記得不要再買那些無用的通篇告訴你軟件操作的書籍。 還有個差點(diǎn)被我忽略,本來想單當(dāng)一個步驟說得,后來想想還是歸納到這里來,那就是對于字體的認(rèn)識。UI設(shè)計(jì)師普遍對字體缺乏敬畏,尤其在扁平化盛行的今天,字體的作用更加突出。只有掌握了字體的奧義,才能設(shè)計(jì)出有力的排版,才能對可讀性和觀賞性文字符號有充分的了解。比如日本二十四節(jié)氣網(wǎng)站就是運(yùn)用字體的優(yōu)秀案例:日本二十四節(jié)氣網(wǎng)站(原網(wǎng)站好像打不開了,只有圖)。推薦書目: 《商業(yè)字體設(shè)計(jì)》(方茜)(一定要看?。。?《好字體》(向玫玫) 《文字設(shè)計(jì)的原理》([日]伊達(dá)千代,內(nèi)藤孝彥) 接著就是關(guān)乎排版,柵格化_百度百科。 這也是UI設(shè)計(jì)師必須掌握的基礎(chǔ)技巧之一。對柵格化有充分理解,就可以設(shè)計(jì)出足夠安全而和諧的頁面,下面書目: 設(shè)計(jì)的理論書籍教會你怎么設(shè)計(jì),你需要在不斷接受知識的同時,馬上對它們做實(shí)驗(yàn),不停的練習(xí),不停的產(chǎn)生問題并解決。在你的設(shè)計(jì)觀念足夠成熟前,絕對不要沒事上網(wǎng)看設(shè)計(jì)的XX法則,如何做好網(wǎng)頁設(shè)計(jì)你需要掌握的XX個技巧,完全就是設(shè)計(jì)界的雞湯文,它們看著其實(shí)挺有道理,但完全沒辦法給新人提供實(shí)踐指南,是用來遺忘的,即使看再多這類雞湯文,你也做不好設(shè)計(jì)。你的學(xué)習(xí)過程在每個方面都要系統(tǒng)而有調(diào)理,書籍比零碎的閱讀可以給你帶來更多的幫助和進(jìn)步。
第五點(diǎn):邏輯取舍——平衡 在這篇文章:《太及時了!視覺設(shè)計(jì)師怎樣讓前端100%實(shí)現(xiàn)設(shè)計(jì)效果?》已經(jīng)說很詳細(xì)了,作為UI設(shè)計(jì)師,是必須掌握前端的對應(yīng)技能的,這不是可以完全無限制的發(fā)揮設(shè)計(jì)技藝的地方,你就要有取舍,要跟的上前端開發(fā)的邏輯,做出穩(wěn)定可以被實(shí)現(xiàn)的設(shè)計(jì)稿。 學(xué)會HTML5 CSS3 JQ的入門,安卓、IOS的實(shí)現(xiàn)規(guī)范! 第六點(diǎn):鑒賞模仿——超越 特地把這點(diǎn)放到后面,也是有理由的,前面的步奏都是一個設(shè)計(jì)師基礎(chǔ)素養(yǎng)的實(shí)現(xiàn),而一個出色設(shè)計(jì)師還需要培養(yǎng)自己的套路和風(fēng)格——站在巨人的肩膀上。 你要學(xué)會如何辨別優(yōu)秀的作品,可以從多個渠道收集優(yōu)秀作品和案例,首推使用:
  • Behance
  • 花瓣網(wǎng) (又到了求粉的季節(jié),懶惰的可以只看我的花瓣 死翹翹的超人的花瓣個人主頁)
  • www.pinterest.com
  • SDC設(shè)計(jì)師網(wǎng)址導(dǎo)航 (其它的可以在導(dǎo)航里逛)
學(xué)會看優(yōu)秀的案例,用它們給你提供設(shè)計(jì)的燃料,然后你要做的就是抄!抄!抄!用你學(xué)過的設(shè)計(jì)理論在實(shí)現(xiàn)中對案例進(jìn)行分析,只有發(fā)現(xiàn)了它們的優(yōu)點(diǎn)并自己動手實(shí)踐實(shí)現(xiàn)了,才對你的提升有實(shí)際幫助。你每天抄一個案例,BANNER、ICON、APP界面,那么不出幾個月,你就能對現(xiàn)有的設(shè)計(jì)形式套路了如指掌,可以設(shè)計(jì)出安全不會有太大毛病的UI設(shè)計(jì)稿,你可以輕松完成這樣的: 而不會做出這樣的: 同時,必須提醒一點(diǎn)就是,我們在設(shè)計(jì)過程中對美的追求和實(shí)際實(shí)現(xiàn)、用戶需要很多時候是不一致的,這是一個坑,需要有足夠的經(jīng)驗(yàn)去判斷什么樣的設(shè)計(jì)已經(jīng)足夠了,什么樣的是過度設(shè)計(jì),沒有實(shí)際意義。你不止要在網(wǎng)上搜索優(yōu)秀的案例,一定要持續(xù)關(guān)注這些那些最簡單,但是最受歡迎的網(wǎng)站和應(yīng)用。例如:知乎、INS、微信、淘寶等等。去不斷討論、查閱,來理解為什么是當(dāng)前的呈現(xiàn)式樣,而不如自己的預(yù)期。 你要在練習(xí)和思考中進(jìn)步,不要盲目的追求視覺表現(xiàn),這樣的UI設(shè)計(jì)師是很難真正的成長起來。 設(shè)計(jì)的終極目的是解決問題,而不是盲目的表現(xiàn)自己對美的追求。所以我要新手不要去看那些只上傳飛機(jī)稿的網(wǎng)站。 當(dāng)前主流設(shè)計(jì)平臺的趨勢就是,少數(shù)大神驅(qū)動龐大的底端設(shè)計(jì)群體,如果你已經(jīng)在前幾個步驟得到提升,那么這些網(wǎng)站的多數(shù)設(shè)計(jì)師已經(jīng)在思想上沒法和你并駕齊驅(qū),不要去這些地方混跡。這些網(wǎng)站不會有真正有價值對等的交流和見解,只有設(shè)計(jì)師在自己圈子里找自信刷存在感的證明,你去掃兩眼評論,就知道不會有“落霞與孤鶩齊飛,秋水共長天一色”這種回答,只有“哎呀,我草,牛逼”,“請問這是用數(shù)位板畫的嗎?”,“請問這是AI做的嗎?”。這些大神的飛機(jī)稿和普通練習(xí)的迅速流傳,很可能會產(chǎn)生諸多的不良印象。 就拿我深深唾棄的追波來說,大量的作品沒有任何實(shí)踐價值,尤其為了吸引同行關(guān)注而過分秀技巧,秀動效。于是動效的風(fēng)氣馬上在國內(nèi)圈子彌漫開,明明是連基礎(chǔ)排版、配色都做不好,PS都還沒捂熱,就追著趕著學(xué)習(xí)AE,開始玩轉(zhuǎn)交高大上交互特效了。具體請看:《設(shè)計(jì)追波風(fēng)!值得每個設(shè)計(jì)師閱讀思考的深度剖析文》 當(dāng)你抄了兩三個月案例,就已經(jīng)有足夠多的作品集了,你已經(jīng)可以打包做簡歷去應(yīng)聘了。屆時你的水準(zhǔn)將超越絕大多有數(shù)年經(jīng)驗(yàn)的設(shè)計(jì)師了!

第七點(diǎn):閱讀思考——擴(kuò)展 整個UI設(shè)計(jì)圈,還有一個很致命的缺點(diǎn),就是對其它行業(yè)知識的排斥,科班畢業(yè)生尤甚。因?yàn)閷W(xué)生時代大多討厭學(xué)習(xí),有藝術(shù)生這個庇護(hù)傘,就可以合理安慰自己不學(xué)習(xí)不念書那是放蕩不羈愛自由。屎丟皮?。。?藝術(shù)史還要教會你們的一點(diǎn)就是,真正的大師絕對不會只是孤陋寡聞而只專注在手中的筆桿和油墨,他們不斷在認(rèn)識世界,不斷在研究感興趣的知識和見解。不要做一個只知有設(shè)計(jì),不知有數(shù)理化的蟾蜍,只能在你自己的井里蹦跶。 成熟的設(shè)計(jì)不只是你個性技巧的表達(dá),還有你對解決問題所展示出來的理性和洞見。很多設(shè)計(jì)師和同層次的其它專業(yè)人員比較起來顯得太幼稚和粗淺,癥狀也在這里。不要只用設(shè)計(jì)的角度去看世界,去涉獵更多的專業(yè),讓眼界更寬廣,有更多的角度去理解世界,得到的感悟?qū)⒔o你帶來難以估量的升華和進(jìn)步。 這是可以持續(xù)一生的事業(yè)和技藝,在正確的方法下,越積累越成熟,老而彌堅(jiān)。請不要再用膚淺的思想認(rèn)為它是吃青春飯的過度階段! 設(shè)計(jì)是一門需要沉淀的技藝,卻恰巧遇見了日新月異的互聯(lián)網(wǎng)文化。這讓大家對流行極具敏感度,而開始追趕潮流,輕視正統(tǒng)和法則。這整個流程需要或許需要1整年的時間,但我相信,只要有足夠的耐心,是可以讓一個新手成長成為一名合格的UI設(shè)計(jì)師,請放慢你的角度,不要急于求成。 
15
評論區(qū)(0)
正在加載評論...