如何學好 UI 設計？

12-18

寫在前面（不缺錢，找個培訓班因該能少走不少彎路，節省不少時間。我自己沒上過培訓班，但是別人這麼說，我也覺得對。但是如何甄別培訓班的水平，這是一個問題。）

一、學習基礎軟體操作
如果沒有PS 基礎，請百度搜索PS教程。
（李濤的ps教程不錯你可以看一下）（一邊看，一邊跟著做，動手很重要）（軟體可以是別的比如AI，方法是一樣的）
2013新版 - 40條網頁設計師需了解的Photoshop禮儀
附贈一個PS新手手冊，其實不僅僅是新手，這就像一個講禮貌的素質，會贏得更多尊重。

二、磨練技能，動手練習
找一些自己喜歡好看的圖標、APP、網站截圖下來，儘可能百分百臨摹複製出來。
（不懂就看教程，百度，進各種設計、UI群，問別人，問朋友。百度和教程是第一位的，盡量少問別人，問多了會煩的。尤其是重複的問題，新手有時候簡單的操作記不住不會，因此勤做筆記，一個一個步驟細緻一點，確保下次還能按照步驟重來一遍）

這裡臨摹幾套完整的APP很有必要，
1、熟練你的軟體操作能力
2、對基本界面布局的理解
3、發現很多不上手做就注意不到的問題

最直接的效果就是你可以開始上手做東西，而不是做一些四不像的半成品。（因為你已經做了好幾套成熟而完整的作品了，臨摹的也是你做出來的）（很有必要強烈推薦）

你平時都是怎樣進行設計技能練習的？ - 用戶界面設計

三、提高審美、拓展思路、開闊眼界
瀏覽各種設計類的網站（站酷，優設、UI中國。。。）看別人的學習經驗，下載收集設計類的素材。
學習 Photoshop 或者網頁設計，有哪些網站值得推薦？ - 網頁設計 (Web Design)

UI中國-專業界面交互設計平台
站酷 (ZCOOL)
優設-UISDC: 優秀網頁設計聯盟-SDC-網頁設計師交流平台
花瓣鍾正煒的花瓣個人主頁可以求粉么？
設計達人 | 愛設計，愛分享。
Iconfont-阿里巴巴矢量圖標庫超大圖標庫

可能這裡是別人的飛機稿，練習，項目上線以後才發布的稿件、很多是對新趨勢的嘗試，產品的改版、還是相對完整的作品。這也是有一定價值的。
而且網站還有更多的內容是別人的經驗總結（快速解決某些問題，掌握某些知識的利器），教程和各種精美實用的素材。（不建議花太多精力學習——某些過於炫技的東西）

四、規範自己的工作流程
下載各平台的設計規範（安卓，蘋果，WP）仔細研讀，並在練習中加以注意，應用。
Android L （5.0）界面（附PSD）
[ISUX轉譯]iOS 8人機界面指南（一）：UI設計基礎
研究單位問題-UI中國

以上一二三四應同時穿插進行，沒有優先順序和那個更重要。

經典重讀！不得不看的設計師十誡（附大量乾貨）

自己覺得差不多了，就可以開始對已有的APP，網站進行修改設計，發現優點與不足。變成自己的東西。自己嘗試做自己想法的東西，發表在你經常瀏覽的設計網站上，接受別人的提意見，贊同，表揚。

五、嘗試自己做相對完整——圖標、APP、網頁
這是對之前所學的總結，也是以後找工作的鋪墊
下面我的某個練習

準備找實習的工作（這是一邊工作一邊學習的過程，私以為這個階段學習比工資更為重要）

如何找實習的工作？

在這個階段——這是一個技術活，作品可以展示很多東西

1、創作的作品整理一下思路，可以附帶一些文字內容。
2、整理好你之前的臨摹的作品

簡歷應著重表現你單獨完成的APP、網頁的經歷
作品質量和數量體現-你學習的態度

實習的工作 目的不是薪水，是學習。

在實習中有了項目經驗，公司對你好，有的學，那就好好乾，對你不好，沒啥好學的，那就跳槽。
跳槽的重點，你仍然需要學習，所以盡量不要找只有一個你一個設計師的公司，沒有交流沒有學習不會愉快的。

更具體的方法和資料

以下為轉載 ——以下為轉載—— 以下為轉載—— 以下為轉載 ——以下為轉載 —— 以下為轉載 ——————————————————————————————————————

寫在之前：這篇教程內容比較多，如果你是新手，能堅持每個知識點都搞明白的話，起碼要半年的時間~~！、
如果你進來隨便看一看就走了，那不能怪別人，是你自己不努力~！~~已經有很多新人在這裡學完找到了高薪工作。

今天來談談這個話題，學UI第一階段到底要掌握哪些知識和技能。
我們先來劃分一下啊，學UI要分幾個階段來學：

初級階段——&> 中級階段——&> 高級階段

QQ群里大多數學生都還在入門階段，感到很迷茫，不知道從哪裡開始學起。網上的海量信息，全是教程，都不知道先看什麼，後學什麼。非常的無助。

小編擁有多年UI設計實戰經驗，大大小小也做了很多項目，借這個機會，給新人們指引一個方向，希望能幫助到大家。

入門階段，就像一張白紙一樣，乾乾淨淨，也很茫然。所以才會有那麼多的培訓學校，教給大家的都是最基礎的入門的知識。

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

答：你如果定性比較弱，需要人逼著才學的進去，又不差錢。那麼就報班吧，這樣入門比較快。選擇學校的時候先去聽聽，在問問大家，不要被忽悠~！~如果你自學能力還不錯，又差錢。那麼還是自學好了。

下面我們來講講自學，因為小編從業多年都是自學。誰叫咱是窮孩子，交不起16800的學費。

話說這錢可以買一台高配的MACBOOK PRO 15

上邊這2篇文章看完以後，是不是大致明白了一些什麼了。

先來說說UI設計入門階段，用什麼軟體。工欲善其事，必先利其器

對於入門階段的童鞋來說，不要糾結那麼多，先把Photoshop玩熟練再說吧。因為在日常工作中，用的最多的就是PS了，可以這麼說，做UI界面基本上用它就夠用了。所以入門階段的你，不要瞎操那麼多心了，專心學習PS吧.

軟體安裝（建議購買正版軟體，以下下載僅供學習使用）

Photoshop CS6下載
Photoshop CC（安裝文件+破解教程+破解補丁）
怎樣安裝Photoshop畫筆，形狀，動作，濾鏡等插件
psd 縮略圖查看插件

配置Photoshop參數，做UI更方便安裝字體

ios-android-wp 3大系統字體下載（包含中英文）設計師必備
ios在線預覽字體（ui設計師必備）

photoshop視頻教程

傳智播客網頁平面設計學院 Photoshop快速入門視頻教程
李濤-photoshop教程
李晨公開課視頻教程
7天精通Photoshop CS5 UI交互設計
杜娟教你如何優秀UI設計師
李鳳輝-UI設計教程
Photoshop CS5實例視頻195集
老賀-PS人物面部美化及商業修片技法
高志遠-Photoshop UI設計視頻教程-快速掌握水晶質感圖標
PHOTOSHOP CS 視頻教程完整版(有些老，但是講的還是可以）

還有這幾個也要看看的：

45個設計師需要熟記的ps快捷鍵
PS真正實用技巧
Ps改進UI設計的一些技巧（必看）
設計新手在PS中最常犯的6個錯誤
你的PS很卡嗎？來瞧下這10個加速技巧

好了，軟體也安裝好了，視頻看了不少了。接下來就是要做各種練習了。前邊UI到底是什麼一文裡面也說了，UI不光是畫ICON,還要做界面。還有一些交互知識。

入門階段，就先別想那麼多，先畫畫簡單的圖標，做一些簡單的界面吧。

這個時候，逮到什麼畫什麼，比如打開百度的首頁，這個界面不陌生吧，照著畫一個出來。有人說了，這有什麼好畫的啊。你還別不服。很多入門級的新人，還真是做不出來。

有人連字體都做不出來，宋體12號，這個地方選無，就好了。

然後輸入框的效果放大看看，用了內陰影。

然後是搜索按鈕，用到了什麼效果了。

漸變+描邊+投影+內陰影做的白色高光（一個圖層樣式完成）

小小的一個按鈕，盡然有這麼多學問在裡面。這就是UI的魅力所在。

UI設計要先把什麼搞明白，哪些PS技巧先學會

Photoshop的知識點太多了，用了10年都不敢說精通。每個不同的設計領域用到PS的知識點也不一樣。

比如做CG原畫的，做網頁設計，照相館處理照片的等等用到PS功能都不太一樣。

UI設計入門階段先要學會以下幾個功能，一定要玩的很熟練第一：圖層樣式

上面做的百度這個頁面，看著簡單，卻用到了好幾種的圖層樣式。那麼像下邊這樣的按鈕。

用到的就更多了。所以想打怪升級，還是要把圖層樣式玩的很熟悉，入門階段要分析的出來，用到了什麼效果。

看到什麼好的界面或是ICON，就立馬分析一下，它用到什麼圖層樣式？

相關的教程：

一個按鈕有話說（PSD下載）
還在擔心按鈕設計嗎？來看看這十條基本準則
教你畫一個開關
如何與像素打交道
透明導航設計講解

第二：圖層的混合模式

Photoshop的混合模式（詳細解答）

第三：形狀工具

玩轉PS形狀圖層UI設計師必看
虛線的畫法

第四：學會切圖（常用的切圖辦法就在這裡，先挨個學一遍，然後根據實際的情況選擇相應的切圖方法）

photoshop切片使用小技巧（切圖）
PhotoshopCC新功能生成圖像資源（切圖）
【詳細介紹android和ios平台的切圖】
做ui必備–PS切圖動作用法（必裝）
Android切圖小貼士

搞明白一些常規的界面尺寸和視覺規範移動端：

移動端界面設計之尺寸篇
ios視覺設計規範說明
IOS 7 Ui規範PSD
Android系統字體規範(含Android系統字體包下載）
android規範文檔3份PSD下載（新手必學）
ios7和ios6 2套icon模板下載(ui設計師必備）
WP7 控制項，WP設計師必備文件。（psd下載）

網頁端：

網頁UI是如何標註的？（附帶WEB UI視覺規範文檔）
網頁UI視覺設計規範
網頁設計基礎技巧
WEB設計指南！
界面設計速成
不要讓用戶思考

色彩的學習

設計中關於顏色搭配的一些小經驗

配色秘要：永遠不要使用純黑

PS教你做漸變大背景

PHOTOSHOP操作技巧開始做點什麼（臨摹階段）

先來點勵志的

開始練習！先學會技法。

還在擔心按鈕設計嗎？來看看這十條基本準則
解密IOS7毛玻璃效果
輕鬆打造iOS7風格圖標
PS強大的角度漸變
教你如何畫圈圈—–標識設計中輔助參考線入門

常規UI切圖(3種方法，各有各的好）移動端UI切圖必備工具和教程

好了，差不多了，這些都挨個學一遍。就入門UI了。

學UI 要學的真的很多，這些都是基礎的知識，這些掌握了，才能到達 中級階段，加油！少年~~！

整理編寫：TIGER

原文地址

學UI入門階段到底要掌握哪些知識（UI第一階段課程）

常常會聽到這麼一些忠告「多看多想多做」，這個我也很贊同，也是我經常會告訴新手的。

在我還是新人的時候，我更想得到咋看咋想咋做的方法，那麼我就憑自己多年的設計經驗，講解給大家聽，希望能幫助到一部分迷茫的人。

你有沒有發現一個問題，每天都在看各種設計作品，真到自己做的時候，一下子全都忘記了，腦子短路傻逼了。之前看到那麼多好的設計作品也都白看了，人家的還是人家的，跟你半毛錢的關係也沒有。有沒有這種感覺~？

所以今天要講的是個人的一些經驗，希望看過這篇文章的同學，看完之後有種豁然開朗的感受，找到學習方法或是解開多年心結。

強烈建議大家先準備一個小本子

問：幹什麼用了？

答：記錄你每天學會的知識點。也可以理解為學習日記。

看到了什麼好設計畫一畫。

想到了什麼好點子，寫一寫。

做會了什麼或是想要學點什麼，都記錄下來。

如果你保證每天學會5個知識點，一個月就是5*30=150，一年就是12*150=1800（這是保守的演算法，不要糾結一個月是31天還是30天，不是重點）

問：5個知識點？我不知道要學什麼？

答：你現在缺什麼，你想學什麼，工作中要用到的，或是找工作的時候，用人單位寫的招聘要求，你看看你都有哪些不會的，這些都是可以學習的知識點和學習的方向。小到一像素的投影，一像素的高光，虛線做法，這些都是要學習的知識點。

具體一點來說的話：

1、UI是什麼？（這個弄清楚了，也是一個進步）

2、IOS的圖標是多大的，我做多少像素的圓角了？

3、字體是做多大了？有沒有想規範了？

4、按鈕要做多大了才好點擊了？

5、各個欄目的高度，間距又是多大比較合適了？

6、常聽到的點9是什麼東東？

7、切圖是什麼意思？如何去切了？

8、布爾運算是什麼玩意？

9、PS形狀工具怎麼用？

10、移動端的ui規範文檔

11、圖層樣式怎麼用？

12、疊加，柔光是什麼意思?

13、PS CC 安裝好了先設置什麼，才好用？

14、紅色橙色黃色綠色青色藍色紫色黑色白色灰色這些你都知道怎麼搭配好看嗎？（這些就夠你研究很久了吧）

多看，多想，多練，沒別的方法，勤能補拙

多看書，多思考，多看優秀作品，思考，嘗試才能做出優秀的作品。

我們在做任何事情的時候最重要的就是細節，細節決定成敗，不管是內容，代碼，還是設計，細節都起著關鍵性作用。

當交互設計師完成一份自以為詳盡的交互輸出物，前端的開發結果總是不那麼另人滿意。交互會抱怨：為什麼會做成這樣呢，很多常識性的東西也會做錯。顯然因為領域不同，對「常識」的理解不盡相同，我們不能把希望寄托在前端工程師的可用性覺悟上。所以交互設計師必須站在對方的角度，在提交輸出物前補充交互細節，以免日後不必要的迭代。

1.列表項目為空時的顯示效果。比如「購物車」里沒有東西時，該如何顯示。否則開發會讓屏幕空白。

2.當頁面或應用會向後台下載數據較慢時，載入過程的提示。如果我們不說，技術不會考慮載入時的信息反饋，會讓頁面呈現假死的狀態。

3.當按鈕、圖標、鏈接等不可用時，怎樣呈現給用戶(a.消失 b.disable+文案改變c.disable+tip d.非模態或嵌入式提示 e.點擊後出現模態對話框)。如果我們不說，技術會採用最簡單且一般來說體驗最差的方式—模態對話框，甚至什麼提示都沒有。

4.應用或者一些偏操作的網路產品，對話框內的按鈕，如「確定」「取消」。需要有一個默認選中，支持鍵盤enter操作。

5.每個圖標都要加上tip，尤其是用戶可能不明白的拖動操作。

6.在文檔中規定系統出錯的提示該如何呈現，提示的文案中不能帶有技術性描述(如錯誤類型：XXX)。如果我們不規定，技術會自己添加一些出錯的模態浮層，使用技術性的語言。

7.文本長度超過標準被截斷時，該如何顯示。

8.滑鼠的響應範圍，如列表項目，radioBtn ，checkbox等。一般來說，響應範圍大點好。如果我們不說，技術只會使用默認設置，如radioBtn的響應範圍就只是前面那個點。

9.修改文本框內容，在獲取焦點時，是全選還是將插入點放在文本末尾。如果用戶很可能會重新輸入整個值，則應在獲取輸入焦點時選擇全部文本。如果用戶更有可能進行編輯，則應將插入點放在文本末尾。

10.下拉框，列表框的默認定位，比如生日。如果我們不說，技術會默認在「1900」年。

11.如果是客戶端，或是流式網頁布局，要提供多種解析度下的展示。

12.在移動客戶端，多點觸摸，手勢的操作和動畫過程，顯得尤其重要。

13.用戶操作成功或失敗的反饋，超時的反饋，系統崩潰的反饋等等。

14.移動客客戶端橫豎屏的不同顯示方式，網路狀況差時的交互反饋。

更多UI設計相關分享可以關注我的DevStore設計階段經驗分享

首先，應該明確一下這個UI（ User Interface ）設計的概念：
一般來說，UI設計包括兩個方向，分別是圖形（視覺）設計和交互設計：圖形設計主要管這個UI看起來是否美觀，是否有設計感等等；交互設計主要管這個UI用起來順不順手，上手容不容易等等。
不知道你說的是哪個方向，就都說說吧。
首先，要明確，你學這個幹嘛？你想把這個學到個什麼層次，是業餘隨便學學玩玩？是足夠找到一份工作？或者是改變中國UI設計的現狀？目標越明確，志向越高遠，投入的實踐越多，越是腳踏實地地去學習和實踐，學的越好。私以為學習任何東西都是這麼一個原則。
其次，方法上，入門的時候可以找一些公認的原理性的書籍看看，視覺方向我懂的不多，也許《設計中的設計》、《寫給大家看的設計書》可以用作入門。交互設計方向的話，《點石成金》、《認知與設計》是很不錯的教科書級別的東西。等到基本的原理都熟悉了以後，可以大量的模仿和總結一些優秀的設計，問問自己，這個設計最出彩的地方在哪裡？不足的地方有什麼？如果要改進，可以怎麼做修改？多總結多思考多實踐。再往後，就會開始要求你有自己獨創的東西，而不僅僅是要求你不犯基本的錯誤，或者做出「和別人差不多好的作品」，這就需要轉化你的人文和自然科學的積累，擴大大自己的視野，感興趣的不感興許的都多涉獵，多多體驗生活。只有大量的無意識的經驗，記憶和知識的積累，吸收，轉化和交叉，好的靈感迸發的可能性才會增加，也才會有更優秀的作品。

首先你要弄清楚自己是什麼基礎，還要先了解UI設計要學什麼內容？

是想選擇線上學習還是線下學習？學習最重要的是自己要有興趣，

【30秒職業性格測試看看你適不適合學UI設計】

https://rj.mbd.baidu.com/mxankzp

其次學好UI設計，除了掌握PS、AI等設計工具外，

還需要掌握Dreamweaver、HTML、DIV+CSS等網站技術工具，

同時還需要具備交互設計的思想。

最後，如果是想選擇培訓機構的話最好是看行業內口碑好的，

可以看一下培訓機構的教學歷史，10年以上的為佳，

當然最好是自己去實地考察下，好不好自己感受得到。

現在很多機構都會有免費公開課可試聽的，可以了解下自己所在地的一些UI設計培訓機構，

預約公開課試聽看看教學方式適不適合自己，選擇適合自己的教學方式是最重要的。

你可以去ui設計師網址導航找網站找學習方法，ui設計網站大全

多看優秀作品理解別人為什麼這樣設計為什麼要這樣配色提高審美能力多思考

多看作品，多臨摹。先超過原創

學習UI設計可以分以下四個階段學習

　　第一階段就是美術基礎，也就是素描手繪這塊，這個對於後期的UI設計有一個很大幫助。

　　第二階段就是軟體層次了，現在的UI設計師一般要掌握以下幾個軟體，比如PS AI AE AXURE 。

　　第三階段就是理論方面了。這個有內容就有點多了，比如配色，排版，字體設計，三大構成，消費心理學，溝通學，以及思維導圖，原型圖，還有交互邏輯，規範，切圖，了解程序，互聯網思維，用戶體驗，還有網路營銷都是需要學習的。

　　第四階段，理論軟體都會了，就是臨摹作品，及原創作品了。然後就是不斷的做項目，參與互聯網各種UI大賽及一些兼職網接單兼職，和去互聯網公司做UI設計工作等。之後不斷的逛一些比較不錯的設計網站，比如站酷網等。長期堅持下去就能把自己的設計水平慢慢提升。

有了以上四個步驟，也不一定能成為UI設計高手，因為上面的是需要學的知識，這些知識如果只依靠零散似的自學是很慢很慢的。更何況，UI這條路的競爭也很強了，同時還要有很強的耐心，要能吃苦，能堅持，有信心，和專一。這樣才能學會。

建議您多關注移動端UI設計，這是大勢所趨！如果在網路上看視頻比較吃力，建議您還是參加培訓。

太無私了學習

最高效方法===找個ui的工作，去做ui，在工作中提高效率去學習。平時多臨摹一些用戶量多的應用，還要多分析線上應用的邏輯，以及練手

多看優秀作品，多臨摹，多分析視覺層級

受益啦謝謝