從零基礎如何自學 UI 設計?

發表於2016-06-08

看了這麼多答案,我也來講講我的自學設計之路。

2011年,大學一年級的時候,我的專業是軟體工程,但是我奇怪的被分到了物理電子工程學院,老師從來不教軟體,天天教電路基礎和大學物理,由於沒興趣,我從來不去上課,就和同學們開黑打dota,這樣打了一年。

2012年,大二了,我媽有一天和我講,說以後肯定不能幫我安排工作,我突然有了危機感,如果畢業了我還沒工作,會很丟人,我父母都是教師,別人家的孩子不是出國就是考上重點大學,壓力還是很大的。當時我還掛著4門課在學校。

當時喜歡研究各種手機越獄和雨滴之類的東西,然後有一天,我打完遊戲上網的時候看到了一張圖片

從零基礎如何自學 UI 設計?

當時我還不知道,《1126》,設計師叫羅子雄,現在是錘子科技的視覺設計總監,那時候我還沒有ui設計的概念,把這個都叫做主題,它太精緻了,給我帶來極大的震撼,不僅細節完美,而且還特別嚴謹,運用了黃金分割。如果你以為我看了這個作品就開始努力學UI那你就大錯特錯了,我根本不知道這是用什麼軟體做的,我開始學習了網頁設計,研究css樣式和html,學了半個月發現好像有點不對,這是幫助別人實現效果的啊。。。然後有一天看到邵飛老師的一個視訊教程,是教你畫圖示的,需要用ps這個軟體,我跟著做了一下,完全做不下來,我就百度如何學ps,找到了李濤老師的《ps高手之路》,這樣開始一步步學習ps,每天也不上課就看視訊學習。不得不說學軟體是個漫長的過程。所幸李濤老師的講解很幽默,也就跟著學下來了。

接下來要講的是我的臨摹之路,這個相當漫長,也最為重要。因為UI設計也是設計的一種,所以它第一個要求就是你設計的東西要美,如何能美?細節是最重要的,你需要觀察,仔細的觀察你和大神的作品之間的差別,然後再想辦法實現它。現在設計之所以浮躁的原因我想就是很多人不願意也沒有耐心去培養自己的審美了。

當時站酷上有一個視訊教程叫《十分鐘UI設計》,是騰訊的設計師omega和老程一起做的,裡面的內容特別好,大家可以去搜尋一下,我跟著裡面的教程做了很多練習,當時老程說,windows的圖示是很不錯的,當你能把一整套圖示都臨摹下來,你就出師了。

從零基礎如何自學 UI 設計?

這是我當時跟著臨摹教程做下來的,一個比一個有進步,每個都花了一天或者半天時間完成,當達不到原作效果的時候就繼續觀察,繼續改,現在一看還有好多問題,比如第一個鉛筆的投影是黑色的很難看,第二個檯球的邊緣太銳利,很不真實,如果當時不是瘋狂修改我想問題會更多。

2013年,大三了

當我臨摹了半年以後,我認為我的ps技術已經很不錯了,跟同學說話的時候也愛吹牛,說自己是ps大神,一天一個同學下午來我寢室,說你幹嘛呢?不知道今天晚上團裡要開荒?你的薩滿裝等多少了?天天日常任務也不做。。。我說我畫會圖示,他說???我說我以後想當設計師,他說你別逗了。。。我當時心想一定要堅持下來!

有一天在上站酷的時候,發現一個主題設計,再次深深震撼到了我,那時候ios7扁平風格盛行,很少有擬物的東西出現了,在看了很多千篇一律的設計以後很難被打動。

從零基礎如何自學 UI 設計?

牛mo王的《心隨我動》,參加了康佳首屆主題設計比賽,我立馬跑到他站酷的主頁牛MO王的個人主頁 膜拜了他,看了他當時發的所有文章,他也是自學,我覺得太厲害了,他當時寫了好多文章,告訴大家如何自學,感觸特別深。後來我找到了他的qq,沒想到他居然同意了,真的特別興奮。。。然後我問了他一個圖示方面的問題,令我沒想到的是,他居然開啟ps手把手教我如何調引數。。。一邊做一邊傳圖片給我,教我如何實現效果,他說好多東西其實非常簡單,但是沒有人告訴你的話自己很難想出來,到現在我都特別感謝他,叫他牛哥,雖然他不姓牛。。。我問他心隨我動這個主題是怎麼做出來的?他說只有積累到一定程度才可以。。。然後我默默努力,偷偷臨摹它,一天一個圖示。下面是我臨摹的《心隨我動》。

從零基礎如何自學 UI 設計?

做了快一個月,其實我在最後一天偷懶了,上面的哪個大的天氣widget是用的原來的圖摳下來的。。。然後我把臨摹的給牛哥看,他當時就說,哇,好棒,你進步好快!可能沒有誰像我一樣把它臨摹了一遍,在這些過程中,我的技法運用越來越熟練了,其實做這種ui,只需要你用好圖層樣式這一個ps功能就好!剩下的就是不斷調整內陰影,投影,還有漸變,一定要注意投影的顏色,不要用黑色!要用深色,比如說黃色就用深黃色當投影,藍色就用深藍色,這樣。推薦大家去站酷看看牛哥的文章,他的分享真的是很詳細也很實用,從字型選擇到ui入門都講的特別到位,在學習路上能有他這樣的老師帶路我想我很幸運,再次謝謝他!

當ps技術熟練以後,我就想著做一些自己的東西出來,然後照著照片用ps塗抹了一張定製耳機

從零基礎如何自學 UI 設計?

現在感覺陰影有一些深,線的感覺也不自然,有些發虛。

在大三後半學期,參加了小米的主題比賽,每個圖示都在網上搜尋好多的圖片做參考,然後自己繪製,差不多兩個月的時間,最後入圍了決賽。

從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?

自己做主題和臨摹是有很大不同的,每個圖示做多大?用什麼顏色?這些都需要自己控制,可以看出,這個作品在這兩個方面都很差。。。當時很迷茫,自己做的東西究竟是不是設計?字型要用什麼?排版怎麼才好看?因為平時積累的東西太少了,所以真的很質疑自己。我意識到需要多看設計方面的東西,所有的都需要積累,到需要用的時候才能用到。

第一次 接觸實際專案 是大三後半學期,我的一個老師要做一款ios應用,主打背單詞功能,我們兩個人他寫程式碼,我負責設計 ui 。我花了一天時間研究切圖,研究我做的圖片怎麼才能用在實際的app中,然後我模仿path做了幾個樣式出來,我們幹勁十足,前後做了好幾個版本,修改了十幾次。

從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?

這個軟體前前後後一共做了半年,對我實際專案的實踐是一個挑戰,靠這個軟體我還拿到了在京東實習的機會,大四後半學期在京東實習了半年。

期間還和同學做了一個網站叫野渡集市

從零基礎如何自學 UI 設計?

現在我工作已經一年了,在北京的美餐網,自己一路自學過來,毅力很重要,我想興趣更重要,我現在還在不斷學習,因為自己的設計知識還是很不足,到這個時候要多看看ios和google的設計規範,知道ios的最小點選區域是44pt,字型不要小於22畫素,36畫素適合閱讀,這些都是在以前自己很少注意到的。現在每天還在自學c4d和ae,加強自己動效方面的實力。

發一點現在的作品吧,我覺得很少有人能聽我囉嗦到現在。。

從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?

最後推薦大家一定要多上dribbble,看看國外的大神是怎麼做的,當我上dribbble以後才發現,很多國內的所謂大神不過是抄襲別人的作品而已。

2天收穫了500多個贊,我真的沒有想到,還是有好多同學提問或者私信我,我在這裡做統一的解答。

1.好多人問我用的是什麼軟體?是ps還是ai?

這個問題在我學ps的時候也特別困惑,我想說的是一門心思學好ps就行了,ps比ai更適合做ui設計,我都是用ps做的,當然用ai也能做出來但是會不方便,而且網上ps的教程會很多,ai就很少了,所以建議大家學好ps。

我現在工作以後使用sketch進行設計,因為公司是全mac辦公,用sketch能極大提高效率,sketch預設輸出一倍圖片,減少了標註的麻煩,而且設計稿可以讓ios工程師直接使用。(現在這個軟體只有mac能用到,這是它不好的一點,當然有條件的可以學習一下,很方便。)

這是用sketch設計的設計稿,雖然最後沒有用,但是可以看出來一個檔案搞定了好多設計稿(不會說話了。。。)

從零基礎如何自學 UI 設計?

2.我向大家推薦了使用dribbble來提高審美,並且瞭解ui設計的最新趨勢,但是說的不仔細,現在給大家分享一下我如何使用dribbble。

首先在dribbble裡有一個點贊功能,叫likes。

拿我舉個例子,在我的主頁,這個地方,進去有我喜歡的作品。

從零基礎如何自學 UI 設計?

這個有什麼用呢?比如我在瀏覽今天dribbble的推薦作品的時候,發現兩個超棒的作品,看下面的圖:

從零基礎如何自學 UI 設計?

我們可以發現,這是兩種不同的風格,也是現在最流行的兩種:

第一種設計是那種酷炫的,很有ios的風格,像自帶的應用日曆一樣,裡面有很多小的控制元件,很精緻。

第二種設計現在更多得流行起來,用大的色塊,大的按鈕,大的圓角,還有流暢的動效給使用者帶來非常愉悅的感覺,有的配合了卡通形象,更加增加了親切感,這類的app有marval,還有遊戲jellies(就是那個抓水母遊戲)。

我們點選作者的名字,到他們的主頁,看到他們更多的作品。

從零基礎如何自學 UI 設計?
從零基礎如何自學 UI 設計?

可以發現他們在自己的風格里面都做的特別棒,有很多值得我們學習和研究的地方,最好能看看他們的likes,看看他們都喜歡什麼作品

比如這個大神,應該是中國人但是原諒我不知道他是誰,低調的人太多了

這個是他的主頁,可以看出來他也是第二種風格的,我們看看他的喜歡

從零基礎如何自學 UI 設計?

這個是他的主頁,可以看出來他也是第二種風格的,我們看看他的喜歡

果然,可以看到更多的大色塊和卡通的設計。也讓我們發現更多的擅長此類設計的大神。

從零基礎如何自學 UI 設計?

果然,可以看到更多的大色塊和卡通的設計。也讓我們發現更多的擅長此類設計的大神。

接下來講講dribbble的搜尋

當有一天老闆需要我設計一個登入介面,但是我並沒有什麼好的靈感,

大家肯定早就注意到dribbble上有search按鈕了,我們搜尋“login”,出來以下結果

從零基礎如何自學 UI 設計?

這麼多的登入介面設計,這下不怕沒有靈感了,我忘了是誰說的了,世界上沒有純粹的設計,所有偉大的作品都是以前的作品的結合和再創造,我們學習別人的想法和設計語言。

dribbble還有很多psd可以下載的,比如iphone的各種展示模型,我們搜尋“mockups”或者“mockup iphone”就可以找到下載了。做展示的時候很好用。看下圖:

從零基礎如何自學 UI 設計?

我做介面設計的時間也不長,只是說一些自己的理解,尤其是工作以後,那些很炫很酷的介面往往是不能實現的,我們的設計不能出格,比如在ios上你使用安卓的材料設計語言就很錯誤,但是在遵守大的設計規範的時候如何才能讓你的設計出彩?這就需要我們對細節的處理,比如path裡掉下來的小卡片,或者是一個小的可愛的動畫,讓使用者能感覺到設計的精緻,現在我們也管這種小細節叫“情懷”。我們看好的作品不一定要把他實現,但是要學裡面的細節,有時一抹亮色或者一點光暈就能為你的設計點睛。

3.前面有些提到的素材有人說找不到,我幫大家把連結貼出來

【十分鐘設計第一季】史上最酷最接地氣兒的UI視訊教程

小課堂的設計作品-UI中國

相關文章