UI設計教程!如何提升你的設計水平

設計師 平面設計 軟件 美術 早木網頁UI學院 早木網頁UI學院 2017-08-31

最近半年嘗試性的收了一個小徒弟,因為他今年畢業,我以為教起來會很順利,因為他是平面設計專業而且PS軟件基礎還不錯。但是實際上卻遇到了不少的問題不少的彎路。我把它們整理了下來,總結了一下。分享給剛入門的Ui設計師們希望能幫到初學UI的你。

推薦閱讀》《迅速提高設計能力的祕訣!》《設計師的6大瓶頸期》《UI設計的學習方法,如何學習ui設計》

一、提升你自己的設計審美

每個行業都有屬於自己的一套評判標準。初入行的新人卻很容易摸不清楚。審美水平的提升是進本不可能速成的,它是一個非常緩慢的過程。

正所謂:

人生不在於用腳步丈量萬水千山,而是用內心真正體會世間百態。

只有有了一個很好的審美水平,你才能清晰的判斷好或者不好。才能對自己的設計作品有一個非常清晰的認識。

我覺得UI設計有些像畫素描,在繪畫的過程中你的畫板可能會顯得空,顯得造型不準,顯得灰。但是在落下最後一筆之後,你一定要對你畫出來的作品有一個明確的判斷。哪裡的造型不準(間距),哪裡的顏色過於灰(配色),哪裡的地方顯得空(佈局)。這些都是應該一眼就可以看出來、可以自己去把控修改的,而不是別人告訴你如何去改,那樣實際上你就變成了一個所謂的設計工具。

這也就是我為什麼不喜歡線下速成培訓班的原因,在培訓班裡沒有足夠的時間去培養審美能力,老師告訴你如何去改去改,作品的效果雖然上去了,但實際上對個人的幫助微乎其微。

所以多看一些好的作品,有助你審美的提高,以及對自己作品的一個判斷把握

UI設計教程!如何提升你的設計水平

(圖片來自網絡)

二、設計工具切勿貪多嚼不爛

實際上我現在如果做UI一般是Sketch+Principle,之前幾年一直只是PS+AE。

如果你對設計軟件難以取捨我不妨這樣說。

設計軟件的選擇實際上取決於你想掌握什麼樣的設計技能。

分享一下我的學習路線

PS(美工技能)→AI(美工技能)→AE(動效技能)→DW(切圖技能)→Sketch(美工軟件更新)→Principle(動效軟件更新)→C4D(建模等技能學習)

希望對你有一定的參考。

新人來講,我覺得會個PS就足夠了。。。

UI設計教程!如何提升你的設計水平

如果有耐心有毅力,可以學一些初步的AE

UI設計教程!如何提升你的設計水平

三、適當的前端知識

四年前,我剛接觸UI設計的時候,還在嘲笑一些公司,為什麼會有切圖師這樣的職位。難道他們不知道cutterman這個插件可以自動切圖嘛。

後來我進了公司才知道,原來所謂的“切圖”,是指將UI設計通過前端HTML+CSS+JS進行靜態的切圖佈局,我們美工所謂的“切圖”,只是“摳圖”罷了。

這件事過後我就開始了自己的代碼之路,說真的,我是屬於一看見英文單詞就想打瞌睡的。

效率很低,但是至少現在我明白我的界面會通過怎樣的一種方式去實現,懂一些簡單的框架。這在工作中的溝通上對我的幫助是難以言喻的。

很多設計師會說,設計就是設計,不能學代碼。

但是Vue.js的作者也是設計師出身,各廠的大神很多也都是懂代碼的,希望新人在面對這個選擇的時候想一想,是自己真的想要一輩子專注設計,還是隻是為了偷懶而找的一個藉口。

UI設計教程!如何提升你的設計水平

(圖片來自網絡)

四、切忌設計上下限相混

跟其他一些設計師不同,我很提倡徒弟去臨摹一些飛機稿。

甚至是各種動效亂飛現在的技術實現起來很困難的設計稿,因為我認為,對於新人而言,提升眼界的一個最快的方式就是臨摹飛機稿。

只有當你飛到兩萬英尺的高空,你才能看到最廣闊的風景。

視覺效果極佳的飛機稿就是提升審美的一個相對的捷徑。

但是在實際落地的需求中大肆運用飛機稿去設計,那就是找死了。

設計分為上限和下限。決定著你設計水平的體現和實際項目的體現,切忌相混。

就如同車展的概念車和落地車,有可能你自己上限和下限的差距,比人跟豬的差距,都要大。

UI設計教程!如何提升你的設計水平

(圖片來自網絡)

五、多去關注一下行業狀況,跳出設計本身去思考問題

UI設計和平面設計不同,我們設計的是一個軟件產品,甚至有時候還包括著一些內部的跳轉架構。

只有你吃透了相關行業的運作,才能明白其中的邏輯關係,才能更好的去設計產品。

前些年UI設計群裡一直有人每天都在發“XXX20億融資O2O”之類的歸類新聞,有什麼用呢。

不如撇開這些快餐式的行業新聞,直接去看一看相關專業人員的分析。

看的越深,你就會越覺得,

設計只是一個產品內部的一個齒輪,外觀做的再漂亮,也不如和其他的齒輪有一個默契的配合。

有的人總喜歡噴別的設計師或者別的產品,做出來的東西一點都不好看。尤其是培訓班的設計師,自己的設計稿天花亂墜般酷炫,外面的產品是如此的普通。

但是,當你糾結於設計本身的時候,你是否發覺自己進了一個死衚衕。

UI設計教程!如何提升你的設計水平

(圖片來自網絡)

網上的屠龍寶刀,點擊就送,是不是醜?

但是這是一個洗腦式的營銷。

有的產品交互是不是不太合理?給用戶增加了不少的麻煩?

交互設計不全等於尊重用戶體驗,而是在體驗和變現之間尋求一個平衡。

六、適當的建立自己的設計素材庫

這點不多做贅述,但是請注意,你的素材庫一定是要有一個素材命名規範的

比如01-001-XXXXX

01代表移動端或者PC端

001代表設計素材的編號

XXXXX代表你對這個素材的簡略概況

這樣能讓你在擁有近五位數的素材的時候也能快速準確的找到你想要的那一張。

UI設計教程!如何提升你的設計水平

(圖片來自網絡)

七、細節處理

我上高中的時候,一個美院老教授來我們學校開講座,我問了一個問題。

如何畫好一幅素描?

老教授回答了六個字:“造型、空間、對比”

當時不理解,現在想了想,其實足夠。

對於新人設計師,我也想說:“字體、間距、關係”

字體指的是一個合適的字體以及合適的字號

我現在還見到有的設計師用宋體用楷體,理由是好看。

我現在還看到有的設計師在750*1334的設計稿上用很小的字體,理由是顯得精細。

這樣的設計稿如果給前端,簡直是一場災難。

間距指的是合適的間距,MD上講的是8px 16px 24px。

關係指的是你需要明白你設計稿顯示的主要信息是什麼,次要信息是什麼,不重要信息是什麼。

這樣,在你設計的時候,你是不是就可以把主要信息突出展示,不重要信息可以在空間擁擠的時候收起來?

---------------------------------------------------------------------

到此為止,不知道能不能給大家帶來一些啟發

總得來說這個教程適合設計入門的準UI設計師,如果您喜歡,我將不勝歡喜,歡迎加入UI設計學習群587751709

相關推薦

推薦中...