別著急學軟件！先掌握科學有效的UI設計自學姿勢（超全面）

優設網 ? 9年前掃碼分享

我是創始人李巖：很抱歉！給自己產品做個廣告，點擊進來看看。

ui-design-self-study-1

編者按：這可能是有史以來最值得閱讀轉發的一篇UI 設計自學指南。作者是個全棧設計師，在臨摹了大量教程，掌握了PS、AI等軟件后才發現自己對于真正的設計一無所知，因此寫了這篇文章，希望能幫大家用正確的方式學習UI設計，不要本末倒置，在錯誤的路上浪費時間。

寫給UI設計初學者們

幾乎每隔幾天我便能在簡書或其他各類設計網站看到關于自學UI設計的分享文章。這些文章有一個共同的特點，就是描述作者如何從一個零基礎的設計小白，通過種種途徑，成長為一個熟練掌握PS或AI的設計達人的，亦或是分享了一堆有參考價值的設計類網站或工具等等。這些文章的點擊率很高，因為通過這些初學者眼中的“干貨”，能夠很容易地進行模仿，并得到技能上的快速提升。

但我想問的是，這真的是學習UI設計的正確方式嗎，如果不是，那有沒有一篇能夠正確引領大家學習UI設計的文章呢？很可惜，我在網上搜了很久，沒有找到那篇我認為是正確的文章。

導致這個問題，我覺得可能有以下兩個原因：

這類文章的內容往往比較“濕”，理論性比較強，需要時間慢慢體會，不是拿來就能用的東西，因此文章的點擊率往往較低，隨著時間的推移，很快便淹沒在了那些新鮮出爐的設計干貨之中，而無法搜索到了。
那些真正優秀的設計師往往都早已過了初學者那個階段，他們也更樂于分享自己的設計觀點或杰出作品，卻很難站在一個初學者的角度來寫如何學習設計的文章了。

我也曾和很多設計初學者們一樣在自學的過程中有過困惑，走過彎路。今天，我仍在不斷地努力學習，去嘗試理解設計的真正含義。我也希望通過這篇文章，能給那些還在設計門外打轉，不得其門而入的學習者們一些不同的啟發。

我為什么自學UI設計

我之所以自學UI設計，其實源于一次失敗的創業實驗。稱它為實驗，是因為它并不算是一次真正的創業，我和我的合伙人并沒有放棄自己的工作，而是利用一些業余時間來做一個以實習生為主題的社區（那時還是“開心”、“人人” 這樣的SNS社交平臺大行其道的年代）。我那時是一家500強金融集團的應用架構師，因此，便當仁不讓地承擔起了我們這個團隊中程序員的角色，負責完成了整個平臺的架構以及開發工作。但始終困擾我們的是，找不到一名優秀的UI設計師，能夠把這個平臺推到一個產品的高度。我們也曾經通過朋友介紹或在淘寶上尋找，合作過幾位設計師，但由于種種原因（有技能問題，理念問題，投入度問題等等）都無法達到我們的要求，最后也都不歡而散了。當然，我們的這次創業也最終以失敗而告終。現在回想起來，失敗的原因有很多，但缺少一名靠譜的UI設計師，導致我們的產品遲遲不能推向市場，是這次失敗的一個非常重要的原因。

5mxtt20160407

我始終覺得自己還是一個有著產品夢想的人（自我鼓勵一下^-^），因此，為了下一次重新啟航行時，不再重蹈覆轍，我便決定開始自學UI設計。

自學路上的困擾

我在自學UI設計的道路上，走得并不平坦，有過很多困擾和挫折。今天想來，其實最大的障礙正是源于自身對于UI設計本身的理解不夠全面和深刻所導致的。

概括起來，主要有以下幾個發面：

對于學習UI設計的困難準備不足：由于在此之前，一直從事企業級應用的研發，因此，那時在我們的圈子里，設計師（我們更多稱為“美工”）屬于非常邊緣的輔助角色。我也想當然地覺得學習那些技能對于我來說是小菜一碟，幾周就能搞定。但實踐證明，我錯了，真正的UI設計遠沒有想象中那么容易掌握，直到今天，我都不敢說自己已經掌握了UI設計并能稱得上是一個UI設計師。而隨著我對設計本身理解的加深，對設計師的看法也完全轉變了，他們不再是我口中的美工，而是一個能夠左右產品優劣，驅動產品研發的關鍵角色。
認為學習UI設計 = 學習 PS、AI等工具：當決定學習UI設計后，我便開始在網上搜索如何學習UI設計，而“度娘”給我的答案便是大量的PS、AI等各種設計教程。我也是一路拼命下載，然后不分晝夜地學習。不久之后，我確實能夠按照這些學習指南P出一些圖，或是作出幾個圖標來了，但當我嘗試獨立去做一個完整的UI設計時，我突然發現我作出來的東西與那些我所見過的優秀設計仍是天差地別，即使是我完全模仿那些優秀作品做的設計，仍然感覺怪怪的，好像哪里出了問題，自己又說不清楚。這時，我才意識到我的學習方法可能錯了，簡單地說就是撿了芝麻丟了西瓜，雖然掌握了一些設計工具技巧，但卻對真正的設計一無所知。
審美能力不足：另一個我遇到過的困難便是自身審美能力的不足。其實我想說，這不僅是我一個人的問題，可能也是我們這一代，甚至是幾代人共同的問題。由于整個教育體系對于學生在美學教育上不夠重視，導致我們從小缺少藝術和美的熏陶，美術課往往會被語數外等主課霸占，從而成為擺設。由于缺乏對美的感知和判斷能力，導致我們很難準確評判自己作品的優劣，更不會知道如何去改善它。放到更大的角度，我們很難像蘋果那樣設計出偉大的產品來。

重新認識UI設計

在意識到學習方法的錯誤之后，我便再次尋求了“度娘”的幫助，但這一次我要找的是那些優秀設計師們自己對于設計的感悟，設計心得，推薦閱讀的設計類書籍等等。我也放下了手中的PS、AI，靜下心來進行大量的閱讀。通過這些閱讀，我也漸漸了解并重新認識了UI設計。

經過對設計知識的重新梳理，我將所需要掌握的基本設計技能歸納為以下10點（我將會在日后的《設計談》系列文章中對以下每一點進行展開，并分享我的設計心得）

色彩：需要理解色彩的基本原理以及配色方法。色彩很難把控，因為它很容易被過度使用。如果，你還是一個初學者，那么盡可能使用柔和的色彩，僅在需要強調的地方使用更醒目的色彩。
字體與排版：文字往往占據整個設計內容超過80%的區域，所以理解如何使用正確的字體和排版方式非常重要。請將內容的清晰易讀作為你定義字體和做排版的首要目標。
動效：動效能夠顯著增強一個應用的用戶體驗。他們能使你的應用更有生氣和迷人，前提是你所設計的動效快速、流暢，并且是符合用戶預期的。
圖標：優秀的圖標往往與我們每天見到的事物緊密關聯，比如相機、垃圾桶、云等等，能讓人一眼就識別出它所代表的功能。因此，使用那些具有良好辨識度的圖標，避免讓用戶產生混淆。
聲效：聲效在設計中用得很少，但恰如其分的聲效能夠提升用戶體驗。用戶不用看到你的應用，光聽到一個熟悉的聲音便能識別出你的產品來。
獲得設計靈感：設計靈感不是與生俱來的，你需要不斷地尋找它。有很多獲得設計靈感的方法，下文中我將分享我的一些經驗。
設計原則：流行轉瞬即逝，但設計中最本質的東西卻能永恒。設計大師們很早就認識到了這些，并將它們提煉為設計原則。你要做的是，理解這些設計原則，并將它們運用到你的設計之中。
用戶體驗設計：你需要了解你的用戶，這樣才能設計出符合用戶需求的產品。學習設計心理學，將有利于你設計出更人性化的產品。
基于不同平臺的設計：在不同平臺設計產品有很大的差異，你需要了解產品所在的平臺（如 IOS，Android），并符合它們各自的設計規范。
設計工具：設計工具有很多，對于UI設計，我建議使用Sketch3，因為它是專為UI設計而生的，能給你帶來更高的設計效率。

改變設計工具

自從我改變學習UI的方法之后，一直到今天，我每天都會堅持閱讀 Designer News 上的每日推薦文章，它能讓我了解國外優秀的設計師門都在想些什么或做些什么。而這之中，給我帶來最大改變的便是，我放棄了原來使用的 PhotoShop，而開始使用Sketch來進行UI設計。因為我驚訝地發現越來越多的國外設計師，特別是在初創公司的設計師們開始使用Sketch作為他們的設計工具。

（下圖為2015年 Substraction.com 對4,000名來自不同領域的UI設計師的問卷調查后得到的UI設計工具使用情況，Sketch已經大幅超越PhotoShop成為設計師們首選的UI設計工具）

4mxtt20160407
2015 Subtraction.com Design Tools Survey – Interface Design

實踐證明，Sketch的使用確實給我帶來了極大的驚喜。

小巧快捷：Sketch只有41M，相較1.6GB的Photoshop來說顯得非常的小巧。因此無論是安裝，還是啟動、運行，Sketch都非常快捷。
專為UI設計而生：Photoshop是一個圖片處理工具，它包含了大量圖片處理功能，而這些對于UI設計師來說是多余的，并會成為UI設計師們工作時的噪音，降低他們的設計效率。而Sketch則專注于UI設計，它的所有功能都只為UI設計服務，比如：使用統一的計量單位 Pixel 使你不必關注其他計量單位（cm，ml，picas），支持HSB、RGB顏色模型和色板功能，使用Symbol可以將方便的復用你的設計元素，針對任意設計元素或元素組導出不同分辨率的圖片等等。另外你不用再面對一個一半功能都不會去碰的工具欄，也完全不用去關心那些與UI設計無關的東西，這使你更容易學習和掌握這個設計工具。
強大的插件功能：雖然Sketch的核心非常小，但它卻提供了非常強大的插件功能。針對不同的設計場景，可以使用不同的插件。比如，你可以使用Sketch Palettes保存你的常用色板，并與朋友方便地分享。使用 Magic Mirror 可以將你的設計方便地展示到不同的實體模型（如: iPhone，iPad，書的封面等等）。也可以使用 Sketch Content Generator 來批量地產生內容，這能為設計師節省大量的時間。還有像Measure、Dynamic Button、Sketch Constraints 等許多非常優秀的插件可以幫助你大大提升工作效率，從而使你更能夠專注于設計本身。

以上只是Sketch所帶來的眾多優秀特性中的一小部分，網上已經有很多關于Sketch的設計教程和指南，你能通過這些資料，快速的學習并掌握Sketch。我正看到越來越多如Sketch，Affinity Designer, Affinity Photo 等創新工具對設計工具領域帶來的變革，他們不再追求大而全，而更注重于以最簡潔、高效的方式服務于不同的設計目的。這也正是互聯網思維在設計工具領域的一個體現。因此，如果你是一個UI設計初學者，亦或已經是一名UI設計師并正在使用PS、AI等工具，我都建議你嘗試使用Sketch，因為，它是一個能給你帶來巨大改變并代表著未來的優秀設計工具。

尋找設計靈感

對于設計初學者來說，經常會為找不到設計靈感而苦惱。而我想說的是，靈感不是與生俱來的，它需要你去不斷地尋找。如果沒有靈感，你將永遠不能開始，更別說去完成一個設計了。下面是我使用的一些方法。

閱讀

我沒有上過任何設計學校或培訓班，因此我的大部分設計知識，都是從閱讀中獲得的。我幾乎不讀那些30天速成系列的書或關于設計趨勢的文章，因為我知道技術的變化是非常快的，正如，我現在完全使用Sketch來做設計，而不用PS一樣。我更關注設計的本質，書是獲得這方面知識的很好途徑。

下面是我書櫥中的一部分設計類書籍，我閱讀那些對設計有著深刻思想的人物傳記如《喬布斯傳》，與設計相關的心理學書籍《設計心理學》、與色彩相關的《色彩設計》，與字體相關的《設計師的自我修養》等等。也正是通過這些書籍，讓我逐步理解了設計的內涵，從而讓我徹底走出了之前學習設計時的誤區。

3mxtt20160407

另外我也會讀一些網上的優秀文章， Designer News 是一個我獲得高質量設計文章的優秀網站，在這里我可以看到最新的來自全球設計師的優秀分享。當然，我也在優設、推酷、Medium 等網站上閱讀那些具有思想性的設計文章，并且通過關注一些優秀的設計師，從他們身上學到了很多經驗和啟發，給我學習UI設計帶來了極大的幫助。

收集優秀設計

另一個獲得靈感的方法是收集優秀的設計作品。Ember是我用過的用來收集設計素材的最佳工具。更棒的是它支持訂閱功能，可以從Dribbble這樣的網站自動下載設計作品，并讓我非常方便地瀏覽和收集。(下圖為我的Ember應用截圖)

2mxtt20160407

除了Ember之外，我也使用 Pintrest 來收集手機上看到的優秀設計，并按照分類添加大我在Pintrest上創建的Board中。(下圖為我的Pintrest主頁 )

1mxtt20160407

擁有工匠精神

你所做的每一件事情，它的背后都可以和藝術聯系在一起。只要是付出了努力，精心制作，并能反映出作者情感與靈魂的東西都可以被稱為藝術品。想一想你平時喜歡做的事情，閱讀，散步，美食或者看展覽。這其中的每一件都與一種藝術形式相關聯：寫作，環球旅行，烹飪、攝影。你會發現當你當你不斷完善某一項技能的同時，其他技能也會得到加強。對于設計來說，上面提到的寫作、攝影、旅行等都是對設計能力的很好補充。

最后，希望能夠得到更多朋友的反饋，“喜歡”或是“點評”，你們的意見能夠幫助我驗證自己對設計的理解，并幫助我不斷完善它。你也可以關注我，后續，我會陸續將文中提到的色彩、文字與排版、動效、圖標等內容以【技匠談設計】系列文章的形式分享給大家。感謝大家的支持和鼓勵 ^-^
jjqr