零基礎如何自學UI設計?教你從零開始成為優秀互動設計師
編者按:無雞湯不吹水,一整篇全是可借鑑可實操的前輩經驗,從學習準備、繪畫技巧到軟體掌握、設計理論,共七個層級,步步進階,力求讓新手能通過自學,成為一名專業的UI設計師。也建議大多數自學成才的設計師閱讀,查漏補缺 >>>
下面是幾年經驗的總結和思考,雖然我並不算是最出類拔萃的UI設計師,但也希望對新人有益。關注微信公眾號pm6669999獲取免費學習名額。
第一點:學習準備——啟蒙
學習一項技能,尤其是已經有一定沉澱並在各行各業有廣泛應用的技能,就一定要對它先有充分的認知。在開始正式學習前,你需要花足夠的經歷去了解和查閱它的起源、發展、應用、未來。UI作為平面設計的一部分,再往上又從屬與美術學這一大類。因此,首先要先去了解整個美術史的發展。從人類起源各個階段中,美術經歷了什麼樣的變化,在各自的時代發揮了什麼作用,近代美術史又經歷了哪些波折,平面設計藝術是如何發展壯大走進千家萬戶,並且有哪些經驗成功過度到後來的UI設計中。那些享譽中外的藝術大師有何過人之處,他們為美術學發展做出了哪些貢獻,他們的名作到底有何動人之處。
我們看不懂博物館展覽那些畫作,不知道梵高畫了什麼作品,抽象派到底在鬧騰些什麼,更甚者連扁平化的推動有什麼深層次的原因都不明白。
瞭解美術史,學會入門的美術鑑賞,目的是以正視聽。學會用多個緯度去思考美學,學會用更深入的方法來看待問題,學會從更巨集觀的視角審視行業……這樣,你才能更客觀的去理解UI的發展歷程。這些知識和思想,將為你的職業生涯做出啟蒙,才更容易成為一個有內涵有深度的設計師,這當中還有諸多優點,就得靠你們自己慢慢體會。
下面推薦書目:
《藝術的故事》([英]貢布里希)
《西方美術簡史》((美)亨德里克・威廉・房龍)
近代設計史
《設計心理學3:情感設計》 (有1,2,3,都得看)
以上是我目前看過能想到的最基礎書目,如果有朋友覺得還有合適的請留言補充上來。前提是之前大家必須需要有一定的基礎,不然後這些書對小白言就是催眠曲。
哲學有三大哲學問題,“你是誰?”“你從哪裡來?”“你要到哪裡去?”,構成了哲人在探索人世真理時的基礎框架。我們也一樣,要在階段給自己提出三個問題,並花至少一個月的時間尋找答案:
設計是什麼?設計是如何產生的?設計可以做什麼?
第二點:繪畫技巧——洞察
曾經和很多同行爭論過,UI設計,到底需不需要手繪訓練。想必大家都知道,目前國內知名的UI設計師,追波上的大神們,很多都是草根出身,從其它行業空降來的,他們的出色是有目共睹的,似乎從某種層面上證實,不需要有繪畫基礎,也可以做好UI,也可以當大神?
我們來說說繪畫的問題。
美術高考主要考的三大項:素描、速寫、色彩。就是繪畫入門的三大基礎課題,我們學習的過程也是以這個順序逐步覆蓋的。如果你已經在第一部看完了那些書籍,就會知道,學習基礎繪畫的過程中,我們在紙張上對現實世界的物體進行細緻準確的描繪,也就需要我們更仔細的觀察事物。光照射的角度是如何的,在對應的形狀中表現出什麼明暗分佈,在透視原理下杯口厚度的弧形是怎麼變化的。隨著繪畫的深入你就會逐漸培養一雙洞察細節的眼睛,你會對所有設計和形體做出本能的反應,分析它們的美醜,找出核心所在。
我們看看下面這樣的案例:
這是一個很簡潔的小鳥,只用幾個細節就輕鬆的表現出來,但我相信,如果要原圖照抄,有90%以上的UI設計師是畫不出精髓的(不信你們試試)。越是這般簡單的圖形,在弧度、頭身比、重心偏向這類細節上就越關鍵,如果你沒有良好的觀察能力,那麼就連抄也抄不像,你只能做出曲線都歪歪扭扭的貝西貨並自己洋洋得意地四處上傳設計媒體求贊求認可。
前面提到的這批國內的大神,其實就是在遠超常人的勤奮中積累了觀察的經驗,以此可以複製一定的風格,並能發現設計中的細節而不斷做出改正。但這就完了麼?當然不是。
你們可以仔細去觀察這些沒有繪畫能力的UI設計師,他們的作品存在著很強的侷限性,雖然可以很好完成熟悉領域和流行風格的設計,但是形勢是很單一,並且缺乏真正的創造力。強大的手繪能力,除了提高洞察力以外,就是為你將來創作的多元化提供更多可能,看下面案例:
比如繪製這樣的圖形,私以為沒有手繪技能無異於天方夜譚,而GAME UI的最大門檻就在這裡。你的繪畫技巧會支撐你跨過更多的門檻,在設計的道路上有更多的選擇和可能,也會支撐你走的更遠。
那麼學習繪畫要到什麼程度呢?直到你覺得可以正確繪出靜物為止。不要覺得可以跳過,將來成為出色設計師的成本將遠低於不學習繪畫的其他人。
還有,最重點要掌握的一個繪畫技能,我覺得是結構素描。
你就可以在紙張上對想繪製的圖形做出快速、準確的打稿,效率和延展性遠勝上機鼠繪。
手繪將貫穿你整個職業生涯,在今後的學習工作中要保持這個習慣,相信我,每到一個合適的時機,它總會給你帶來意想不到的驚喜。
第三點:掌握軟體——手段
這一步就正式開始進入學習軟體的步驟。如果學習的是UI,那麼以下幾種軟體是必不可少的:
PS、AI、AE、APR……其餘的根據愛好自己補充。
這裡要先和大家談談,我們都知道美工對於設計師來說已經成為具有侮辱性的貶義詞,設計師們喜歡反駁,你丫才是美工,你全家都是美工。有點小理想的有志青年們都對這個稱謂充滿鄙夷,但我得給大多數人潑冷水,因為大多數設計師連一個合格的美工都夠不上。
我們知道美工代表的是一種技師的稱謂,有一定技巧但沒有創造力。可偏偏就是絕大多數人都沒有掌握足夠的技巧,這就是當前設計行業所需要面對的事實。很多設計師沒有經過前兩個步驟的薰陶的,所以在學習軟體的過程中很容易自滿,明明對軟體的掌握還很膚淺就已經恬不知恥的在簡歷中輸入”精通“二次(哎呀,好像在說我自己!)。他們的視角是狹隘的,只認為學會了PS這些工具,就學會了設計,也忽略了自己遠遠沒有達到美工門檻的界限。下面我來談談怎麼學習這些軟體。
首先可以在網上找些PS相關的設計教程學習,先熟練的運用軟體教程。
將視訊內容反覆的學習幾次,並且做好筆記把所有內容都背到滾瓜爛熟為止。這是整個UI設計行業裡最基礎的知識點,光、色、解析度、色彩模式,連這些都沒有掌握你就不要想精通設計軟體和掌握它們的原理。
然後你就開始去看別的視訊教程,不要浪費時間在搜尋免費的低質量視訊上。入門教程基本都是相同的,你要完整的看完和跟著學習幾個新手教程,直至對軟體使用有了初步的理解。
那軟體要學到什麼程度?學到你可以用它臨摹出任何使用這種軟體設計的圖形。一定要記住,設計軟體只是我們用來實現設計的一種手段,過度沉迷在軟體的研究中是本末倒置的,但如果你使用軟體連抄都抄不出來,那就是一種不需要反駁的恥辱。例如下圖:
這樣的作品,你有了足夠的觀察力,靠對軟體的掌握度就可以輕鬆臨摹,但很多已經從業數年時間的設計師連這種臨摹都做不到,原因在哪裡你們自己好好想想。軟體的掌握是為你實現更多設計方案提供可能性,不要讓軟體熟悉度這件最簡單容易的技能變成自己的短板,至少我們要成為一個合格的美工!經常自己做一些練習來測試自己對軟體掌握度在哪裡,就很容易發現問題,然後自己去查資料做研究。
好好去理解每個軟體可以實現什麼,優勢是什麼,極限在哪裡。然後你就再!也!不!會!跑去大神評論區裡問:好牛逼,請問這是PS做的嗎?請和我默唸這是本世紀設計界裡最愚蠢的評論,不要讓它們發生在自己身上。
再嘮叨一次,軟體只是一種手段,你還並不懂設計,少吹牛逼!
第四點:設計理論——實踐
廣義上來說,到這步才是真正開始學習設計,也是讓一、二兩點作用開始充分發揮的時候。
因為看過藝術史,所以你會知道,每個時代流行的藝術創作有各自的手法特點,有共性,所以可以被歸納和總結,也就可以教授,培養出相同的作家。換句話說,美術家是可以被量產的。在理論不斷被完善的今天,要做出好的設計一樣是可以通過理論學習——實踐產生,一定不要認為這是天賦上的差距,別人比自己就更有藝術細胞。那些能被歷史銘記的藝術大師,之所以偉大,是因為他們的開創性或者作品所包含的人文精神和偉大的靈魂,而不只是一幅出色的圖畫。
前面的幾點都為你提供了足夠的實踐基礎,所以在這部才能讓你正確看待自己的潛力,不會輕易停下追求進步的腳步。只有最偉大的設計師才需要較量天賦,而成為一個優秀的設計師靠的是努力。設計是勤行,不是設計人,不入設計門。
那麼理論知識我們該學習什麼呢?首先是基礎中的基礎:三大構成(基礎含義)
每個方向都需要閱讀相應的教材,重要性無以復加,你需要在觀看的時候一邊做練習。然後才是具體設計類的書籍,記得不要再買那些無用的通篇告訴你軟體操作的書籍。
還有個差點被我忽略,本來想單當一個步驟說得,後來想想還是歸納到這裡來,那就是對於字型的認識。UI設計師普遍對字型缺乏敬畏,尤其在扁平化盛行的今天,字型的作用更加突出。只有掌握了字型的奧義,才能設計出有力的排版,才能對可讀性和觀賞性文字元號有充分的瞭解。
這也是UI設計師必須掌握的基礎技巧之一。對柵格化有充分理解,就可以設計出足夠安全而和諧的頁面,書籍上面有介紹過。可以向上看。
第五點:邏輯取捨——平衡
作為UI設計師,是必須掌握前端的對應技能的,這不是可以完全無限制的發揮設計技藝的地方,你就要有取捨,要跟的上前端開發的邏輯,做出穩定可以被實現的設計稿。
學會HTML5 CSS3 JQ的入門,安卓、IOS的實現規範!
第六點:鑑賞模仿——超越
特地把這點放到後面,也是有理由的,前面的步奏都是一個設計師基礎素養的實現,而一個出色設計師還需要培養自己的套路和風格——站在巨人的肩膀上。
你要學會如何辨別優秀的作品,可以從多個渠道收集優秀作品和案例,首推使用:
Behance
花瓣網
www.pinterest.com
學會看優秀的案例,用它們給你提供設計的燃料,然後你要做的就是抄!抄!抄!用你學過的設計理論在實現中對案例進行分析,只有發現了它們的優點並自己動手實踐實現了,才對你的提升有實際幫助。你每天抄一個案例,BANNER、ICON、APP介面,那麼不出幾個月,你就能對現有的設計形式套路瞭如指掌,可以設計出安全不會有太大毛病的UI設計稿,你可以輕鬆完成這樣的:
而不會做出這樣的:
同時,必須提醒一點就是,我們在設計過程中對美的追求和實際實現、使用者需要很多時候是不一致的,這是一個坑,需要有足夠的經驗去判斷什麼樣的設計已經足夠了,什麼樣的是過度設計,沒有實際意義。你不止要在網上搜索優秀的案例,一定要持續關注這些那些最簡單,但是最受歡迎的網站和應用。例如:知乎、INS、微信、淘寶等等。去不斷討論、查閱,來理解為什麼是當前的呈現式樣,而不如自己的預期。
你要在練習和思考中進步,不要盲目的追求視覺表現,這樣的UI設計師是很難真正的成長起來。
設計的終極目的是解決問題,而不是盲目的表現自己對美的追求。所以我要新手不要去看那些只上傳飛機稿的網站。
當前主流設計平臺的趨勢就是,少數大神驅動龐大的底端設計群體,如果你已經在前幾個步驟得到提升,那麼這些網站的多數設計師已經在思想上沒法和你並駕齊驅,不要去這些地方混跡。這些網站不會有真正有價值對等的交流和見解,只有設計師在自己圈子裡找自信刷存在感的證明,你去掃兩眼評論,就知道不會有“落霞與孤鶩齊飛,秋水共長天一色”這種回答,只有“哎呀,我草,牛逼”,“請問這是用數位板畫的嗎?”,“請問這是AI做的嗎?”。這些大神的飛機稿和普通練習的迅速流傳,很可能會產生諸多的不良印象。
就拿我深深唾棄的追波來說,大量的作品沒有任何實踐價值,尤其為了吸引同行關注而過分秀技巧,秀動效。於是動效的風氣馬上在國內圈子瀰漫開,明明是連基礎排版、配色都做不好,PS都還沒捂熱,就追著趕著學習AE,開始玩轉交高大上互動特效了。
當你抄了兩三個月案例,就已經有足夠多的作品集了,你已經可以打包做簡歷去應聘了。屆時你的水準將超越絕大多有數年經驗的設計師了!
第七點:閱讀思考——擴充套件
整個UI設計圈,還有一個很致命的缺點,就是對其它行業知識的排斥,科班畢業生尤甚。因為學生時代大多討厭學習,有藝術生這個庇護傘,就可以合理安慰自己不學習不念書那是放蕩不羈愛自由。屎丟皮啊!!
藝術史還要教會你們的一點就是,真正的大師絕對不會只是孤陋寡聞而只專注在手中的筆桿和油墨,他們不斷在認識世界,不斷在研究感興趣的知識和見解。不要做一個只知有設計,不知有數理化的蟾蜍,只能在你自己的井裡蹦躂。
成熟的設計不只是你個性技巧的表達,還有你對解決問題所展示出來的理性和洞見。很多設計師和同層次的其它專業人員比較起來顯得太幼稚和粗淺,症狀也在這裡。不要只用設計的角度去看世界,去涉獵更多的專業,讓眼界更寬廣,有更多的角度去理解世界,得到的感悟將給你帶來難以估量的昇華和進步。
這是可以持續一生的事業和技藝,在正確的方法下,越積累越成熟,老而彌堅。請不要再用膚淺的思想認為它是吃青春飯的過度階段!
設計是一門需要沉澱的技藝,卻恰巧遇見了日新月異的網際網路文化。這讓大家對流行極具敏感度,而開始追趕潮流,輕視正統和法則。這整個流程需要或許需要1整年的時間,但我相信,只要有足夠的耐心,是可以讓一個新手成長成為一名合格的UI設計師,請放慢你的角度,不要急於求成。