寫在之前：這篇教程內(nèi)容比較多，如果你是新手，能堅(jiān)持每個知識點(diǎn)都搞明白的話，起碼要半年的時間~~！、
如果你進(jìn)來隨便看一看就走了，那不能怪別人，是你自己不努力~！~~已經(jīng)有很多新人在這里學(xué)完找到了高薪工作。 閱讀量破100萬的文章，太多人從這里起航！靈智飛揚(yáng)就是這么一個專為新人準(zhǔn)備的免費(fèi)學(xué)習(xí)UI的網(wǎng)站。 ?給靈智飛揚(yáng)打氣，加油 ?猛點(diǎn)這里?>> 虎哥還要推薦大家收藏這個?hao.xueui.cn?UI學(xué)習(xí)網(wǎng)址導(dǎo)航，虎哥整理，必須精品。這里面都是我常用的網(wǎng)址。 今天來談?wù)勥@個話題，學(xué)UI第一階段到底要掌握哪些知識和技能。
我們先來劃分一下啊，學(xué)UI要分幾個階段來學(xué)： 初級階段 ?→??中級階段 ?→??高級階段 QQ群里大多數(shù)學(xué)生都還在入門階段，感到很迷茫，不知道從哪里開始學(xué)起。網(wǎng)上的海量信息，全是教程，都不知道先看什么，后學(xué)什么。非常的無助。 虎哥擁有10多年UI設(shè)計(jì)實(shí)戰(zhàn)經(jīng)驗(yàn)，大大小小也做了很多項(xiàng)目，借這個機(jī)會，給新人們指引一個方向，希望能幫助到大家。 入門階段，就像一張白紙一樣，干干凈凈，也很茫然。所以才會有那么多的培訓(xùn)學(xué)校，教給大家的都是最基礎(chǔ)的入門的知識。  

很多人在群里會問，我是自學(xué)還是報班啊。這個問題回答的嘴都軟了。

答：你如果定性比較弱，需要人逼著才學(xué)的進(jìn)去，又不差錢。那么就報班吧，這樣入門比較快。選擇學(xué)校的時候先去聽聽，在問問大家，不要被忽悠~！~如果你自學(xué)能力還不錯，又差錢。那么還是自學(xué)好了。   下面我們來講講自學(xué)，因?yàn)榛⒏鐝臉I(yè)多年都是自學(xué)。誰叫咱是窮孩子，交不起16800的學(xué)費(fèi)。話說這錢可以買一臺高配的MACBOOK PRO 15。 ??? ? ?? 上邊這幾篇文章看完以后，是不是大致明白了一些什么了。 重點(diǎn)推薦上面這本《零基礎(chǔ)學(xué)UI》。詳細(xì)介紹>> 1.這本書老斷貨，虎哥搞了一些在靈智飛揚(yáng)官方淘寶店代賣：點(diǎn)我去搶購>> 2.或者打開淘寶APP掃描上面二維碼購買 凡是購買了本書的同學(xué)可加我們靈智飛揚(yáng)福利-書籍購買QQ群：317086090，群文件會有書中的PSD源文件下載。    

先來說說UI設(shè)計(jì)入門階段，用什么軟件。工欲善其事，必先利其器

對于入門階段的童鞋來說，不要糾結(jié)那么多，先把Photoshop玩熟練再說吧。因?yàn)樵谌粘９ぷ髦校玫淖疃嗟木褪荘S了，可以這么說，做UI界面基本上用它就夠用了。所以入門階段的你，不要瞎操那么多心了，專心學(xué)習(xí)PS吧。當(dāng)然最近2年也流行用SKETCH來設(shè)計(jì)界面，好處很多，壞處就一點(diǎn)，你得先有一臺mac電腦。目前國內(nèi)絕大多數(shù)公司還沒辦法給設(shè)計(jì)師們都配上高大上的mac電腦。所以新手朋友們還是先別糾結(jié)軟件的問題，先學(xué)會設(shè)計(jì)思路和設(shè)計(jì)方法，設(shè)計(jì)流程，搞出看的過去的作品，這樣才好順利轉(zhuǎn)行。  

軟件安裝（建議購買正版軟件，以下下載僅供學(xué)習(xí)使用）

1. Photoshop 2017?軟件下載?請到官網(wǎng)下載試用版，然后干啥自己百度
2. 怎樣安裝Photoshop畫筆，形狀，動作，濾鏡等插件
3. psd 縮略圖查看插件

 

插件安裝

1. UI設(shè)計(jì)師高效秘笈－工具預(yù)設(shè)（先來把你的PS給設(shè)置好了，新人必看）
2. 一個好用的PHOTOSHOP切圖插件（CutterMan插件下載）
3. 標(biāo)注神器馬克鰻，PxCook 像素大廚，Parker
4. 一鍵標(biāo)注神器－zeplin
5. ?IconTemplate?啟動圖標(biāo)生成插件
6. 安裝一個Ps Mirror可以在iphone上實(shí)時觀看效果。
7. PS 2015圓角神器 Corner Editor 來了（UI設(shè)計(jì)必裝神器）
8. PS 玩轉(zhuǎn)長投影（帶PS動作）（現(xiàn)在流行的長投影傻瓜模式）

 

配置Photoshop參數(shù)，做UI更方便

??  

安裝字體（虎哥整理的）

??  

photoshop視頻教程

1. PS基礎(chǔ)視頻教程
2. 李濤-photoshop教程

?

還有這幾個也要看看的：

1. 45個設(shè)計(jì)師需要熟記的ps快捷鍵
2. PS真正實(shí)用技巧
3. Ps改進(jìn)UI設(shè)計(jì)的一些技巧（必看）
4. 設(shè)計(jì)新手在PS中最常犯的6個錯誤
5. 你的PS很卡嗎？來瞧下這10個加速技巧

????   好了，軟件也安裝好了，視頻看了不少了。接下來就是要做各種練習(xí)了。前邊UI到底是什么一文里面也說了，UI不光是畫ICON,還要做界面。還有一些交互知識。 入門階段，就先別想那么多，先畫畫簡單的圖標(biāo)，做一些簡單的界面吧。 這個時候，逮到什么畫什么，比如打開百度的首頁，這個界面不陌生吧(老版本的界面了），照著畫一個出來。有人說了，這有什么好畫的啊。你還別不服。很多入門級的新人，還真是做不出來。   有人連字體都做不出來，宋體12號?，這個地方選無，就好了。 然后輸入框的效果放大看看，用了內(nèi)陰影。   然后是搜索按鈕，用到了什么效果了。 漸變+描邊+投影+內(nèi)陰影做的白色高光（一個圖層樣式完成）。小小的一個按鈕，盡然有這么多學(xué)問在里面。這就是UI的魅力所在。  

UI設(shè)計(jì)要先把什么搞明白，哪些PS技巧先學(xué)會

Photoshop的知識點(diǎn)太多了，用了10年都不敢說精通。每個不同的設(shè)計(jì)領(lǐng)域用到PS的知識點(diǎn)也不一樣。 比如做CG原畫的，做網(wǎng)頁設(shè)計(jì)，照相館處理照片的等等用到PS功能都不太一樣。  

UI設(shè)計(jì) 入門階段先要學(xué)會以下幾個功能，一定要玩的很熟練

第一：圖層樣式?

上面做的百度這個頁面，看著簡單，卻用到了好幾種的圖層樣式。那么像下邊這樣的按鈕。 用到的就更多了。所以想打怪升級，還是要把圖層樣式玩的很熟悉，入門階段要分析的出來，用到了什么效果。 看到什么好的界面或是ICON，就立馬分析一下，它用到什么圖層樣式？ 相關(guān)的教程：

1. 一個按鈕有話說（PSD下載）
2. 還在擔(dān)心按鈕設(shè)計(jì)嗎？來看看這十條基本準(zhǔn)則
3. 教你畫一個開關(guān)
4. 如何與像素打交道
5. 透明導(dǎo)航設(shè)計(jì)講解

 

第二：圖層的混合模式

1. Photoshop的混合模式（詳細(xì)解答）

 

第三：形狀工具

1. 玩轉(zhuǎn)PS形狀圖層UI設(shè)計(jì)師必看
2. 虛線的畫法

 

第四：學(xué)會切圖（常用的切圖辦法就在這里，先挨個學(xué)一遍，然后根據(jù)實(shí)際的情況選擇相應(yīng)的切圖方法）

1. photoshop切片使用小技巧（切圖）
2. PhotoshopCC新功能 生成圖像資源（切圖）
3. 【詳細(xì)介紹android和ios平臺的切圖】
4. 做ui必備–PS切圖動作用法（必裝）
5. Android切圖小貼士

  搞明白一些常規(guī)的界面尺寸和視覺規(guī)范

移動端：

? ?? ?

1. 移動端界面設(shè)計(jì)之尺寸篇
2. ios視覺設(shè)計(jì)規(guī)范說明
3. IOS 7 Ui規(guī)范PSD
4. Android系統(tǒng)字體規(guī)范(含Android系統(tǒng)字體包下載）
5. android規(guī)范文檔3份PSD下載（新手必學(xué)）
6. ios7和ios6 2套icon模板下載(ui設(shè)計(jì)師必備）
7. WP7 控件，WP設(shè)計(jì)師必備文件。（psd下載）

 

網(wǎng)頁端：

1. 網(wǎng)頁UI是如何標(biāo)注的？（附帶WEB UI視覺規(guī)范文檔）
2. 網(wǎng)頁UI視覺設(shè)計(jì)規(guī)范
3. 網(wǎng)頁設(shè)計(jì)基礎(chǔ)技巧
4. WEB設(shè)計(jì)指南！
5. 界面設(shè)計(jì)速成
6. 不要讓用戶思考

 

色彩的學(xué)習(xí)

??   設(shè)計(jì)中關(guān)于顏色搭配的一些小經(jīng)驗(yàn) 配色秘要：永遠(yuǎn)不要使用純黑 PS教你做漸變大背景  

PHOTOSHOP操作技巧

?? ? ?  

開始做點(diǎn)什么（臨摹階段）

先來點(diǎn)勵志的 ????   開始練習(xí)！先學(xué)會技法。 ? ?? ???? ? ??? ? ?? ? ? ??? ?

1. 還在擔(dān)心按鈕設(shè)計(jì)嗎？來看看這十條基本準(zhǔn)則
2. 解密IOS7毛玻璃效果
3. 輕松打造iOS7風(fēng)格圖標(biāo)
4. ?PS強(qiáng)大的角度漸變
5. ?教你如何畫圈圈—–標(biāo)識設(shè)計(jì)中輔助參考線入門

  常規(guī)網(wǎng)頁UI切圖(3種方法，各有各的好） ? ?? ?  

移動端UI切圖必備工具和教程

? ? 好了，差不多了，這些都挨個學(xué)一遍。就入門UI了。 學(xué)UI 要學(xué)的真的很多，這些都是基礎(chǔ)的知識，這些掌握了，才能到達(dá)?中級階段，加油！少年~~！ 最后要是想順利的轉(zhuǎn)行UI設(shè)計(jì)，必須要有拿得出的成套的作品。  

什么是成套的？

起碼要一套15-20頁的app界面，交互流程要順暢，這個需要自己好好研究研究。網(wǎng)頁界面1-2個，然后包裝一下。  

為什么要包裝了？

包裝其實(shí)反映了一個設(shè)計(jì)師的綜合的實(shí)力，考驗(yàn)一個人能不能從大的方向把握整體的風(fēng)格，版式形式感能不能貼切你的產(chǎn)品定位，配色和基礎(chǔ)的排版能不能做到整體一致性。視覺規(guī)范的統(tǒng)一性如何。等等。當(dāng)然，看著也是高大上的，把學(xué)到的東西串聯(lián)在一起，寫上設(shè)計(jì)思路和說明，更容易讓人理解你的設(shè)計(jì)思維。你不是一個單純的做圖仔，你是一個有腦子的，會思考的設(shè)計(jì)師。 包裝可以去參考虎哥的徒弟作品集，每一套作品都是自己命題原創(chuàng)作業(yè)，經(jīng)歷1-2個月的時間打磨出來的，可能很多人覺得哇，特么要這么久嗎？對的，真的要這么久，基本上都是從app的界面主界面開始做15-20個然后整體改了10多遍，然后包裝也改了5-10遍，才達(dá)到拿得出手的效果和質(zhì)量。真的不是隨便套個模板就搞出來了，沒有想象的那么簡單。往往很多東西看著簡單，真正自己做起來就不是那么回事了，畢竟大部分的人還是很普通的新手。 每個人的基礎(chǔ)不一樣，激發(fā)潛能的深度也不同，原創(chuàng)的設(shè)計(jì)作品確實(shí)不容易，希望大家努力吧~~！ 其實(shí)吧，你只要稍微努點(diǎn)力，就能甩掉全國90%的懶娃子。學(xué)習(xí)之一個長期的過程，需要堅(jiān)持！堅(jiān)持！還特么是堅(jiān)持！ 整理編寫：Tiger（虎哥） 誰的青春不迷茫？誰的職業(yè)路程更清晰？虎哥團(tuán)隊(duì)幫你來解答咨詢②群 ：238079364 zcool主頁>> 文章來源：www.lingzhifeiyang.com   轉(zhuǎn)載請注明：靈智飛揚(yáng) » 學(xué)UI入門階段到底要掌握哪些知識（UI第一階段課程） 登錄收藏

學(xué)UI就上靈智飛揚(yáng)！越努力，越幸運(yùn)！

“靈智飛揚(yáng)www.lingzhifeiyang.com?”最值得關(guān)注的UI學(xué)習(xí)平臺！ 每天發(fā)布高質(zhì)量的設(shè)計(jì)教程和分享設(shè)計(jì)經(jīng)驗(yàn)，服務(wù)于20萬UI設(shè)計(jì)師,幫助初學(xué)者快速轉(zhuǎn)型。 ，給大家提供更多免費(fèi)學(xué)習(xí)的機(jī)會。想成為設(shè)計(jì)師的你快來關(guān)注吧！ 【特色推薦】 “APP截圖站www.lingzhifeiyang.com”??海量APP截圖，讓你靈感爆發(fā)！國內(nèi)最好的APP截圖站。 “國內(nèi)最棒的UI設(shè)計(jì)導(dǎo)航站” 專為UI設(shè)計(jì)學(xué)習(xí)者打造的資源＋學(xué)習(xí)，雙用途的網(wǎng)址導(dǎo)航站。親愛的，你收藏了嗎？ 【靈智飛揚(yáng) 原創(chuàng)文章 ，也可以找各個群的管理】  給靈智飛揚(yáng)打氣，加油 ?猛點(diǎn)這里?>>