最近在知乎被邀請哭了，邀請我回答的問題大概集中在：
1.我想學UI，請問看什么書??？
2.我想學UI，請問哪個培訓機構(gòu)比較好？
3.我想學UI，請問如何入手？
4.我不是設(shè)計專業(yè)，但是我還是想學UI，請問如何系統(tǒng)學習？
5.我不管，我就是要學UI，請您給點兒建議。
.........
上述的問題，我一天能收到好幾個，那么今天我就詳細的寫一寫如何開始學UI吧。
如果你連這篇文章都看不完，你還告訴我你有恒心學好UI？
關(guān)于作者本人，大學時曾經(jīng)兼職某培訓機構(gòu)PS講師，對設(shè)計培訓行業(yè)了解一二。自己是非科班出身純自學無培訓經(jīng)歷工作三年的每個月還完信用卡就感覺身體被掏空的普通UI設(shè)計師。
好了言歸正傳：
一、你為什么想要學UI？
用戶界面（User Interface）是指一切可供用戶和系統(tǒng)進行交互操作的介質(zhì)的綜合。
在當下這個時間點，一提到UI，大家其實會不由自主的指向移動端app設(shè)計而忽略UI的其他形式。網(wǎng)頁、手機 app、pad app、車載系統(tǒng)，智能冰箱的控制窗口、智能電視的操作系統(tǒng)界面等等等等，其實都是UI的范疇。
各位現(xiàn)在勵志想學UI的同學們，不妨捫心自問一下，你為什么想學UI？
我綜合分析了幾個周圍朋友和私信我的同學的真實案例，答案無非只有以下幾種：
1.UI設(shè)計工資相對較高。
2.UI設(shè)計入門相對容易。
3.自我感覺UI設(shè)計還挺有趣的。
郭德綱有個段子說得好，一個人賣盆，結(jié)果賣了兩個月發(fā)現(xiàn)不掙錢，然后就去賣豬肉了，從此以后再也沒有賣過盆，這是正常人的擇優(yōu)手段。但是還有一個人賣盆，結(jié)果賣了兩個月發(fā)現(xiàn)不掙錢，于是就去賣肉了，然后用業(yè)余時間繼續(xù)賣盆，那這個人是真的喜歡賣盆，他對賣盆這個事情有著天然的興趣。
這樣吧不然，為了檢驗?zāi)闶遣皇钦娴南矚g設(shè)計，我這里先推薦諾曼的那四本《設(shè)計心理學》，這是相對來說不那么枯燥乏味的設(shè)計方面專業(yè)書了，算是一種科普性質(zhì)的，什么行業(yè)看了都沒錯。你先去啃下來，如果中途沒有打瞌睡并且能夠看個大致明白并且覺得還挺有意思的，那說明你可以具備一定的自驅(qū)力，可以去開始著手學UI。
自驅(qū)力是最重要的一點，為什么今年有一些三年工作經(jīng)驗以上的UI一下子就被淘汰了找不到工作？因為一個人的價值是和你的不可替代性成正比的，自驅(qū)力來源于興趣，本身不是喜歡這個行業(yè)的設(shè)計不求上進兩三年拿不出與工作經(jīng)驗相襯的作品，勢必要被淘汰。
二、UI設(shè)計師掙得多么？
每個行業(yè)都有掙得很多的頂尖人才，還是那句話，一個人的價值是和你的不可替代性成正比的，但是普遍來說中國的互聯(lián)網(wǎng)行業(yè)薪資構(gòu)成一定是產(chǎn)品≈技術(shù)>設(shè)計的，但是相對來說技術(shù)的行業(yè)門檻比較高，產(chǎn)品暫時拋開不論（手動微笑），而且在絕大多數(shù)非技術(shù)崗位互聯(lián)網(wǎng)從業(yè)者的心目中設(shè)計這件事情是一個純主觀的事情，很多人甚至到今天還在說哎呀XXX今天更新好丑，他們公司的UI簡直就是一坨屎這樣的言論背景下，在前幾年UI培訓確實是如火如荼的進行。
UI設(shè)計師到底掙得多么？答案是：“收入可觀”。
從騰訊CDC《2016用戶體驗行業(yè)調(diào)查報告》中能夠可以看出：
調(diào)查結(jié)果顯示：
用戶體驗行業(yè)從業(yè)者稅前薪資年收入主要在 5 ~ 15 萬；
管理類薪資較高,集中在 10 ~ 25 萬；
視覺設(shè)計、 交互設(shè)計、品牌設(shè)計的薪資相對較低，偏向 5-10 萬；
用戶研究，產(chǎn)品類的薪資居中，傾向于 10-15w。
從圖上可以得知，如果是一個下定決心打算進入UI設(shè)計/視覺設(shè)計行業(yè)的萌新，那請你做好一開始“不到5W一年”和“不到10W一年”的準備。
結(jié)論：從數(shù)據(jù)上來說，培訓出來月薪過萬這樣的例子我承認一定有，但是不多。更多的設(shè)計科班出身或者培訓行業(yè)出身的設(shè)計在工作的第一年，工資都不太喜人（一線大城市可能會相對稍微歡喜一些）。
結(jié)合上面那個賣盆的段子，不到五萬一年，你還想學UI么？（手動微笑+1）
三、學UI，應(yīng)該選擇培訓機構(gòu)么？
我的答案是分兩頭看，如果你是設(shè)計科班出身，并且對互聯(lián)網(wǎng)UI/視覺設(shè)計師的職責有清晰的認知，了解工作流程，那么我的回答是不需要。但如果你是一個學法律的學中文的，對互聯(lián)網(wǎng)公司和設(shè)計本身一竅不通的想學UI有志好青年，并且周圍幾乎沒有互聯(lián)網(wǎng)從業(yè)者圈子，那么，我的回答是需要的。
因為你要明白，市面上絕大多數(shù)培訓機構(gòu)能夠給予你的是：
0.了解互聯(lián)網(wǎng)大環(huán)境和app產(chǎn)品UI/視覺設(shè)計師的作用及工作流程。
1.一到多項工具的使用。（一般是Photoshop、AI、Sketch、Axure等等）
2.一到多次虛擬互聯(lián)網(wǎng)項目經(jīng)驗。（包括從但不限定為從無到有、模擬迭代等）
至于推薦就業(yè)之類的，你愛信信，反正我不信。
我大二的時候因為PS技術(shù)比較好，所以兼職在某培訓機構(gòu)教PS，先后帶過三個班，一個是攝影后期那個就不說了，其余兩個都是UI的基礎(chǔ)班，只不過一個側(cè)重移動端app，一個側(cè)重網(wǎng)頁設(shè)計而已（12年那時候還沒sketch）。
我可以拍著胸脯保證我教授的PS知識能夠完成市面上所有的app和網(wǎng)頁設(shè)計，這個按鈕是怎么實現(xiàn)的，漸變怎么拉，字行距間距怎么設(shè)置，布爾運算怎么操作這些你從我這里一學就會，包學包會，然而這并沒有什么卵用。這就好比一個你去學習素描，老師告訴你鉛筆分為幾種，每一種黑度不一樣，你手要怎么拿鉛筆，排線要怎么練，面是由線構(gòu)成的，好了，你畫吧。你能畫的出來才怪。
很多想入行UI的小白最大的誤區(qū)在于：我只要PS/sketch用得好，我就是個設(shè)計師了。
拜托你們醒醒好吧，你要明白PS也好sketch只是一款工具而已，它本質(zhì)上和屠夫手里的刀，獵人手里的弓箭，雕塑家手里的釘錘沒有任何區(qū)別。我現(xiàn)在把羅丹的工具從博物館偷出來給你再給你一塊質(zhì)地幾乎一樣的石頭，你敲一個思想者出來我看看？
四、Sketch和PS必須熟練掌握一款
好了書歸正傳，雖然學會軟件并不等于可以勝任UI設(shè)計的工作，但是學會一門軟件是很基礎(chǔ)的入門級的事情，市面上能用于UI設(shè)計的工具現(xiàn)在幾乎淘汰到了只剩三款，PS/Ai/sketch，而其中Ai由于是基于對象的矢量繪制軟件，在位圖設(shè)計當中有著天然的劣勢（當然也有很多人用，但是我個人是直接排除的，才不會告訴你我還見過firework流的UI呢）。
在Ps和sketch中，目前在UI設(shè)計工作中，我基本上完全會用sketch，Sketch實現(xiàn)不了的功能，偶爾會用PS輔助一下，Sketch實現(xiàn)不了什么功能呢，比如你現(xiàn)在想做一個彌散陰影（自行百度），sketch就實現(xiàn)不了，十分想吐槽sketch沒有類似于PS圖層“圖層樣式”的功能，不然基本上做UI就可以完全不打開PS了。
目前我的觀點是Sketch可以作為UI設(shè)計主打軟件，適合新手使用，入門簡單，學習成本極低，插件豐富，功能足夠強大，唯一美中不足就是只支持蘋果系統(tǒng)，但是我認為如果你是決心入行的話，rmbp還是買一個吧。Sketch/PS的教程視頻網(wǎng)上一搜一大把，這里我就不贅述了。學習一款軟件，最重要的是持之以恒，一兩個月絕對可以掌握，這部分外功沒啥好說的。
五、UI設(shè)計師的自我提升
好，從下文開始，我假設(shè)你已經(jīng)是一個經(jīng)過三個月努力，熟練掌握設(shè)計工具的萌新了。那這時候你該如何修煉自己的內(nèi)功呢？
UI設(shè)計師的自我提升step 1：看（Look）
“看是一個浸淫的過程，也是提高審美和觀察力的過程?！蔽覐拇蠖_始，給自己的任務(wù)是每天睡前看一小時：
http://www.ui.cn/ - UI中國
https://www.pinterest.com/ - Pinterest是我這幾年素材收集用得最多的一個網(wǎng)站
那，到底看什么呢？
作為新手來說，第一步應(yīng)該關(guān)心的是：這張設(shè)計稿有沒有什么技術(shù)難點是我實現(xiàn)不了的。
我舉個例子：（以下舉例圖片全部來自Pinterest - my board）
比如晚上睡覺的時候，無聊翻Pinterest，然后看到這張圖，作為新手來說，心路歷程大概應(yīng)該是類似這樣的：
知道一張設(shè)計稿里面每個元素是怎么繪制的，這是最初級的階段。
其次看什么呢？嘗試每看一張圖的時候不要像刷朋友圈一樣一晃而過，看的時候強行試著分析一下這張圖的優(yōu)點和缺點，同樣舉個例子：
比如這個UI界面，作為一個新手，自己嘗試分析一下這個頁面的優(yōu)缺點，比如：
優(yōu)點：
1.這個頁面給人一種性冷淡風干凈清爽的感覺（然后你去baidu/google"性冷淡風",得到關(guān)鍵詞“Normcore”，然后再繼續(xù)dig deep，去詳細了解這種設(shè)計風格。）
2.信息展現(xiàn)清楚，交互按鈕Add和Message也是清晰直接
3.圖一上面，用了一些漸變小紋理特別贊。
4.這種斜著切一刀帶來的設(shè)計形式感特別贊，要學~~~
缺點：
1.這個界面偏概念，隱藏了navigation bar和Status bar，在一般工作中這樣設(shè)計需要謹慎
2.雖然美觀，頁面展現(xiàn)信息較少，在工作中一定是不適用了。比如圖一，一屏信息只展現(xiàn)了人名+人簡介+Add和Message按鈕以及下面兩個人物列表。圖二更屌，只顯示了這個人的這么一點信息，換句話說，這個頁面所有呈現(xiàn)的信息約等于微博四分之一頁面信息，除非這個app功能特別少，只強調(diào)美感，不然應(yīng)該不太會這么設(shè)計：
分析是UI設(shè)計的基本功，不管是瀏覽設(shè)計網(wǎng)站看設(shè)計作品還是日常使用app和電腦瀏覽網(wǎng)站，都可以抱著這種分析設(shè)計的心態(tài)。如果你能根據(jù)你的設(shè)計分析寫一個學習筆記什么的，相信我你會進步得更快。
再然后看什么？嘗試找出這張圖第一時間吸引你眼球的元素。
如上圖的例子，那種斜著切一刀的感覺是不是顯得特別利落？
比如這兩張圖：
同樣是方形構(gòu)圖元素，第一張吸引我的是一種“品質(zhì)感”，第二張吸引我的是顏色。
包括第一張MARKET IT下面一條線的形式感設(shè)計和第二張最下面鞋上的VANS AQUA SHOES的形式感設(shè)計，都是可以學習和借鑒的。
總之，“看”是設(shè)計師每天都應(yīng)該做的事情，長期堅持多看多分析有助于設(shè)計感的培養(yǎng)，在熟練掌握軟件的前提下，眼高手就不會低。
UI設(shè)計師的自我提升step 2：臨?。–opy）
提到copy，大家可能會想到那句俗話說 Good designers copy. Great designers steal.
有的人說臨摹不就是抄么？咳咳，咱們讀書人的事情能叫抄么？叫借鑒。。
其實不太對，大家想這樣一句話，我說讓你抄同桌的作業(yè)和臨摹同桌的作業(yè)，區(qū)別在哪兒？
臨摹的意思是，盡自己所能，做到每一個像素分毫不差。
我給大家舉個例子，左面這張我自己作品里的一張圖，之前還沒有Sketch的時候用PS做的，后來學習Sketch的時候我又用Sketch臨摹了一遍，放在右邊：
其實仔細看是能看出區(qū)別的啦，但是臨摹，起碼要做到這種效果，每當你去臨摹一張設(shè)計稿的時候，可能要花大量時間，但是收獲巨大。
因為首先臨摹第一步是需要測量，測量和臨摹一個UI作品給我的幫助太大了，強烈建議每一位新手好好的，臨摹一兩款市面上很火的app，不管是什么，只要是你覺得界面還可以用著夠方便，微信微博也好，美團網(wǎng)易云音樂也好什么都好，找一款app嘗試測量和臨摹，你會看到很多更深層次很有趣的東西。甚至可以了解這個產(chǎn)品UI當時的心路歷程，總之臨摹這件事你試試就知道了這方面我就不展開了，以后有機會另起一文。
總之，不斷臨摹優(yōu)秀作品是我認為UI設(shè)計新手成長最捷徑的辦法（我認為沒有之一），因為很多時候光看是不夠的，有些時候你自認為很好實現(xiàn)的效果，到你手上實際去做的時候會發(fā)現(xiàn)根本就不是這樣的，不信的話，下面這九個圖標，你們可以選一兩個去臨摹一下試試：
臨摹，是將“別人的”轉(zhuǎn)化為“自己的”最優(yōu)秀的辦法。第一步先做到盡量一模一樣，然后再去求變和思辨，往這個方向努力一段時間，回過頭，你會發(fā)現(xiàn)自己的進步，除此之外，你還會發(fā)現(xiàn)，咦這些個app這種設(shè)計形式我都曾經(jīng)見過。。。
UI設(shè)計師的自我修養(yǎng)step 3： 嘗試分析 （Attempt to analysis）
嘗試分析一款app，基本上是從app的信息架構(gòu)入手的，這是一個UI偏UE和產(chǎn)品的工作，但是對UI設(shè)計師來說挺重要的，app的信息架構(gòu)怎么做，說白了就是花時間把整個app點一遍，然后分析app的信息層級，一般我用Xmaind7去做信息架構(gòu)圖，比如我是一個dota2玩家，所以我曾經(jīng)做過max+的產(chǎn)品架構(gòu)，放在下面給大家看：
做信息架構(gòu)的時候不光光是點完記錄下來就結(jié)束了，要帶著自己的想法去做，比如我圖上標綠色的地方是這個app的重點功能模塊，黃色的小問號是我初次做信息架構(gòu)覺得信息展現(xiàn)有問題的地方。
做信息架構(gòu)能給我們帶來什么？
第一，能夠讓UI設(shè)計師迅速了解一款產(chǎn)品。如果說你剛?cè)肼氁粋€新公司，那不妨入職第一天先從你公司信息架構(gòu)入手~
第二，能夠讓UI設(shè)計師在橫向?qū)Ρ葍煽罨蛘叨嗫町a(chǎn)品交互的時候提供必要依據(jù)。這點不展開了，推薦大家上手做網(wǎng)易云音樂和QQ音樂的信息架構(gòu)，做了你就知道我在說什么。
第三：方便UI設(shè)計師了解行業(yè)產(chǎn)品形態(tài)。比如你之前是一個旅行類app的UI設(shè)計師，現(xiàn)在你即將跳槽去一個互聯(lián)網(wǎng)金融p2p的創(chuàng)業(yè)型新公司，如何入手設(shè)計一款新的p2p類app呢？你只需要選擇市面上最火的兩三款p2p類app做一下信息架構(gòu)，你就會明白一個大致的方向，因為行業(yè)里大家都是這么做的，你就把好的地方繼承，不好的地方創(chuàng)新就是了。（心里話：說起來容易，做起來可完全不是這么一回事啊喂！Orz...)
第四：方便設(shè)計師做redesign。很多UI設(shè)計師都喜歡做作品集，那自己沒這么多線上作品怎么辦？于是就做redesign，站酷上UI中國上到處都是各種產(chǎn)品的redesign，有一些做得確實很好，在分析一款產(chǎn)品的信息架構(gòu)之后其實是很容易找出產(chǎn)品一些易用性問題的，那針對這樣的易用性問題進行優(yōu)化的redesign思維一定是有益的。
我在這里提供第二種制作信息架構(gòu)的方法，這種方法更偏交互，我把他稱之為點擊類信息架構(gòu)：
具體這是一張?zhí)貏e大的圖，我就不給大家展示全了，這里我著重想說的是這是另一種偏交互類的信息架構(gòu)方法，圖上那個S0，S1，S2是我自己編的詞，S1代表的是一次點擊就可以達到的頁面，S2表示的是兩次點擊可以達到的頁面，S3表示三次點擊可以達到的頁面，然后我把S1，S2，S3對齊排列，這樣就可以知道這個app的每個功能深度（深度的意思是指你需要通過幾次點擊才能達到，點擊次數(shù)越多當然就越深）。
比如分析的時候看到一個特別重要的功能被埋藏得比較深，那就說明這個app是有問題的，下次改版時候從UI方面著手看看能不能把他提前之類的。這當然是產(chǎn)品做的工作，但是UI設(shè)計師掌握這個沒啥不好。
UI設(shè)計師的自我修養(yǎng)step 4：回顧與總結(jié)（Review and summary）
看完一本書，聽完一個故事，一個項目結(jié)束之后，一個版本迭代完成之后，一份工作離職之后，都是需要總結(jié)的?？偨Y(jié)開發(fā)中出現(xiàn)的問題。比如開發(fā)和設(shè)計稿不一致，是不是設(shè)計這邊造成的，如果是，那我是怎么造成的，如果不是，那我有沒有挽回的余地?？偨Y(jié)設(shè)計中出現(xiàn)的問題，這些地方是不是還有優(yōu)化的空間?？偨Y(jié)溝通中出現(xiàn)的問題，是不是不該罵產(chǎn)品罵的這么狠。（我承認，我經(jīng)常和產(chǎn)品撕得天昏地暗2333333 Orz...）
總之，總結(jié)是特別重要的一點，尤其是看完一本書之后的總結(jié)和踩到坑之后的總結(jié)，多和開發(fā)成為朋友，他們會教會你很多。（不然我特么作為一個設(shè)計怎么知道滑動切換瞬間navigationbar不能變色。。。）
好了感謝大家看到這里，再見~
希望大家一起進步~
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
