人人都是設計師！UI自學系列教程之新手入門必備篇（一）

編者按：今天這個UI自學系列教程，不聊軟件操作，不談精美效果的實現，我們來聊聊真正有助于你成為設計師的方法。今天第一篇，聊聊什么是UI，學會哪些軟件才能成為UI設計師，

Think Lee：UI=User Interface，這是大家都會說的廢話，Interface比較容易理解，界面，通常就是我們看到的網頁，APP的界面，圖標等等等等視覺元素。UI里的界面設計通常區別于平面設計，因為在Web端，移動端，或者其他手持設備或獨立設備上，視覺設計通常會受到技術限制和規則約定，例如說在iOS APP上，狀態欄/導航/Tab都有規定的高度，在Web上受、到用戶電腦分辨率的約束通常會把網頁內容寬度做一個范圍限定。所以，在Interface的部分，UI設計師尤其需要考慮到各平臺的設計規范與可實現性。當然，這東西難到也不難，只是各平臺亂七八糟的規矩太多加之設計趨勢天天變，總是感覺自己有點跟不上時代變化的感覺。

此處插入iOS設計規范，你感受一下：

• 《超實用的IOS 9人機界面指南（1）：UI設計基礎》
• 《超實用的IOS 9人機界面指南（2）：設計策略》

規范里不僅講了視覺規范元素規格等等，也會大量牽涉到交互上的設計原則，所以作為一個好UI，在Interface層面上你不單單要懂規范，你還要懂交互，交互是另外一個復雜的話題，以后再說。

接下來說User

User是什么，是你的設計作品的最終使用用戶。很久之前是沒有UI這個職位的，上古時代我們稱之為美工（可惜這么有歷史的詞現在倒成了貶義詞），或者視覺設計師，后來做Web設計的干脆叫網頁設計師。因為很久以前那時候還沒有UCD（User Center Design）這個說法，所以界面設計里并沒有加入User的部分，多數只是考慮視覺的美觀。而站在現在的角度來看，以用戶為中心的設計理念已經深入……深入人嘴（意思就是現在大多數人嘴里念念叨叨用戶體驗用戶體驗，其實他們并不知道什么是用戶體驗），好吧，人嘴就人嘴，你可以粗暴地理解其為：為人民服務。

那到底用戶體驗是什么？用戶體驗是產品設計者/團隊對產品用戶心理的一種把控。用戶體驗設計過程，是對用戶的視覺偏好/行為特征/操作習慣等等等等用戶心理特征通過各種調研方法得出的定量或定性的統計數據與結論，從而用來指導整體產品的功能/交互/界面等方面的設計。

到這里，美工/界面設計/視覺/網頁設計師，也就搖身一變變成了現在的UI。也就是說，單單考慮到美觀的視覺設計還不夠，同時還需要把你對用戶的感知和理解融入到設計中去。這就是UI的基本要求，當然……要求是要求，能做Interface的，一抓一大把，真有User理念的，不多

學會哪些軟件就能做UI了呢？

內行人一看就懂，這題目分明就是外行話，為什么外行，稍后再說

先說下此問題的答案：即便你把adobe系列全學會了，你也不一定能做UI

從上古時代的“網頁三劍客”到后來業界公認的PS/AI/DW，到最近一些小眾但是逐漸在變熱門的Sketch/Affinity系列，UI使用的軟件逐漸在向更專業化的方向發展，比如說PS CC 2015新增的“設計空間”就非常適合UI界面做布局配色。但是由于PS本身就不是一個專業的UI軟件，新加入的“設計空間”也稍顯雞肋。

大致總結下目前行業常用的軟件： Photoshop ， Illustrator，Dreamweaver，Sketch，Affinity photo，Affinity Design，Sketch，Axure，Mockups，Flash，After Effects。以上是我經常用的和經常見到別人用的UI行業軟件，至于軟件好壞怎么選擇這些東西略過不表。這篇文章只說軟件與設計的關系。

為啥Adobe全學會了還不能做UI？

我們舉個例子：

圖1：

圖2：

插句題外話，如果你覺得圖1很好看圖2很丑，那我可能要很遺憾地告訴你，設計行業不適合你，盡快想別的出路吧。

我從昵圖網隨便找了兩個網頁，好，大家比較一下圖1和圖2，我要說明什么呢？

首先，這兩個網頁都是用PS做的，與軟件版本無關，與你用的是Mac還是PC也無關。

其次，圖1和圖2對PS技術的要求是一樣的，而且PS操作技術要求相當低，初學PS不久的同學就可以輕松地畫出來

最后，舉個例子：

你和小明一起學PS，兩個人看同樣的PS教材，看同樣的視頻課程

你做出了圖1，小明做出了圖2

你屢次投簡歷失敗，還要為月薪兩三千的底層美工職位擠破頭，而小明已拿到了BAT月薪1.5W的UI Designer offer，轉眼迎娶白富美走上人生巔峰

為什么？

因為 會軟件≠會設計

許多同學把做UI理解成為”學會軟件了就會做UI“，于是趕緊跑上來問“UI都需要什么軟件技能？” “PS學到什么程度就能做UI了？” “達到一個UI設計師的水平需要學會哪些軟件？” 聽了一群外行和半吊子內行說要學PS/AI/DW等等，要學某某某大師的視頻課程，要上某某PS教學網站，要去培訓班系統學習。抱著對眾神百分百虔誠的信任然后趕緊花費大量的時間精力金錢去學PS學AI學DW學Flash（更有奇怪的培訓班還要教CAD和3Dmark，真心理解不了）。熬盡七七四十九個白晝與黑夜，“系統”地學完了一大堆UI常用的和不常用的軟件之后突然感覺自己瞬間打通任督二脈，不僅長出了三頭六臂順帶還精通了十八般武藝，然后擼起袖子做了個圖1……

你要知道，圖1和圖2之間的差距，與軟件無關。

中間相差的設計感，色彩感，排版規則，設計技巧等等，絕對不是靠學PS學AI學DW等等等等軟件學出來的，就像我開頭說的，Adobe全學會了你也不一定能做得了UI。

想起我好多年前剛開始做UI時候認識的一個朋友，年近三十，PS用了9年，快捷鍵耍得出神入化，但是依然在一個小縣城的婚紗攝影店拿著2000的工資做婚紗照的后期

我做設計的最初一年多，只會PS，是的，除此之外什么軟件都不用。AI還是后來才摸，DW壓根沒學（設計和Html的關系這是另外的話題，以后再說）

所以不知道到這里你明白了沒有：

不要把你的時間都堆在學軟件上面，鍋碗瓢盆油鹽醬醋備齊并不代表你就能立馬變成廚子。

【為了這7個指南也得存書簽！】

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發：《天貓高手來教你！零基礎如何系統地學習前端開發？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》

原文地址：zhuanlan.zhihu
作者：Think Lee

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量105萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com