先掌握科學(xué)有效的UI設(shè)計自學(xué)姿勢（超全面）

這可能是有史以來最值得閱讀轉(zhuǎn)發(fā)的一篇UI設(shè)計自學(xué)指南。作者是個全棧設(shè)計師，在臨摹了大量教程，掌握了PS、AI等軟件后才發(fā)現(xiàn)自己對于真正的設(shè)計一無所知，因此寫了這篇文章，希望能幫大家用正確的方式學(xué)習(xí)UI設(shè)計，不要本末倒置，在錯誤的路上浪費時間。 寫給UI設(shè)計初學(xué)者們 幾乎每隔幾天我便能在簡書或其他各類設(shè)計網(wǎng)站看到關(guān)于自學(xué)UI設(shè)計的分享文章。這些文章有一個共同的特點，就是描述作者如何從一個零基礎(chǔ)的設(shè)計小白，通過種種途徑，成長為一個熟練掌握PS或AI的設(shè)計達(dá)人的，亦或是分享了一堆有參考價值的設(shè)計類網(wǎng)站或工具等等。這些文章的點擊率很高，因為通過這些初學(xué)者眼中的“干貨”，能夠很容易地進(jìn)行模仿，并得到技能上的快速提升。 但我想問的是，這真的是學(xué)習(xí)UI設(shè)計的正確方式嗎，如果不是，那有沒有一篇能夠正確引領(lǐng)大家學(xué)習(xí)UI設(shè)計的文章呢？很可惜，我在網(wǎng)上搜了很久，沒有找到那篇我認(rèn)為是正確的文章。 導(dǎo)致這個問題，我覺得可能有以下兩個原因：

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

我也曾和很多設(shè)計初學(xué)者們一樣在自學(xué)的過程中有過困惑，走過彎路。今天，我仍在不斷地努力學(xué)習(xí)，去嘗試?yán)斫庠O(shè)計的真正含義。我也希望通過這篇文章，能給那些還在設(shè)計門外打轉(zhuǎn)，不得其門而入的學(xué)習(xí)者們一些不同的啟發(fā)。 我為什么自學(xué)UI設(shè)計 我之所以自學(xué)UI設(shè)計，其實源于一次失敗的創(chuàng)業(yè)實驗。稱它為實驗，是因為它并不算是一次真正的創(chuàng)業(yè)，我和我的合伙人并沒有放棄自己的工作，而是利用一些業(yè)余時間來做一個以實習(xí)生為主題的社區(qū)（那時還是“開心”、“人人” 這樣的SNS社交平臺大行其道的年代）。我那時是一家500強(qiáng)金融集團(tuán)的應(yīng)用架構(gòu)師，因此，便當(dāng)仁不讓地承擔(dān)起了我們這個團(tuán)隊中程序員的角色，負(fù)責(zé)完成了整個平臺的架構(gòu)以及開發(fā)工作。但始終困擾我們的是，找不到一名優(yōu)秀的UI設(shè)計師，能夠把這個平臺推到一個產(chǎn)品的高度。我們也曾經(jīng)通過朋友介紹或在淘寶上尋找，合作過幾位設(shè)計師，但由于種種原因（有技能問題，理念問題，投入度問題 等等）都無法達(dá)到我們的要求，最后也都不歡而散了。當(dāng)然，我們的這次創(chuàng)業(yè)也最終以失敗而告終。現(xiàn)在回想起來，失敗的原因有很多，但缺少一名靠譜的UI設(shè)計師，導(dǎo)致我們的產(chǎn)品遲遲不能推向市場，是這次失敗的一個非常重要的原因。 我始終覺得自己還是一個有著產(chǎn)品夢想的人（自我鼓勵一下^-^），因此，為了下一次重新啟航行時，不再重蹈覆轍，我便決定開始自學(xué)UI設(shè)計。 自學(xué)路上的困擾 我在自學(xué)UI設(shè)計的道路上，走得并不平坦，有過很多困擾和挫折。今天想來，其實最大的障礙正是源于自身對于UI設(shè)計本身的理解不夠全面和深刻所導(dǎo)致的。 概括起來，主要有以下幾個發(fā)面：

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

重新認(rèn)識UI設(shè)計 在意識到學(xué)習(xí)方法的錯誤之后，我便再次尋求了“度娘”的幫助，但這一次我要找的是那些優(yōu)秀設(shè)計師們自己對于設(shè)計的感悟，設(shè)計心得，推薦閱讀的設(shè)計類書籍 等等。我也放下了手中的PS、AI，靜下心來進(jìn)行大量的閱讀。通過這些閱讀，我也漸漸了解并重新認(rèn)識了UI設(shè)計。 經(jīng)過對設(shè)計知識的重新梳理，我將所需要掌握的基本設(shè)計技能歸納為以下10點（我將會在日后的《設(shè)計談》系列文章中對以下每一點進(jìn)行展開，并分享我的設(shè)計心得）

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

改變設(shè)計工具 自從我改變學(xué)習(xí)UI的方法之后，一直到今天，我每天都會堅持閱讀 Designer News 上的每日推薦文章，它能讓我了解國外優(yōu)秀的設(shè)計師門都在想些什么或做些什么。而這之中，給我?guī)碜畲蟾淖兊谋闶?，我放棄了原來使用?PhotoShop，而開始使用Sketch來進(jìn)行UI設(shè)計。因為我驚訝地發(fā)現(xiàn)越來越多的國外設(shè)計師，特別是在初創(chuàng)公司的設(shè)計師們開始使用Sketch作為他們的設(shè)計工具。 （ 下圖為2015年 Substraction.com 對4,000名來自不同領(lǐng)域的UI設(shè)計師的問卷調(diào)查后得到的UI設(shè)計工具使用情況 ，Sketch已經(jīng)大幅超越PhotoShop成為設(shè)計師們首選的UI設(shè)計工具）
2015 Subtraction.com Design Tools Survey – Interface Design 實踐證明，Sketch的使用確實給我?guī)砹藰O大的驚喜。

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

以上只是Sketch所帶來的眾多優(yōu)秀特性中的一小部分，網(wǎng)上已經(jīng)有很多關(guān)于Sketch的設(shè)計教程和指南，你能通過這些資料，快速的學(xué)習(xí)并掌握Sketch。我正看到越來越多如Sketch，Affinity Designer, Affinity Photo 等創(chuàng)新工具對設(shè)計工具領(lǐng)域帶來的變革，他們不再追求大而全，而更注重于以最簡潔、高效的方式服務(wù)于不同的設(shè)計目的。這也正是互聯(lián)網(wǎng)思維在設(shè)計工具領(lǐng)域的一個體現(xiàn)。因此，如果你是一個UI設(shè)計初學(xué)者，亦或已經(jīng)是一名UI設(shè)計師并正在使用PS、AI等工具，我都建議你嘗試使用Sketch，因為，它是一個能給你帶來巨大改變并代表著未來的優(yōu)秀設(shè)計工具。 尋找設(shè)計靈感 對于設(shè)計初學(xué)者來說，經(jīng)常會為找不到設(shè)計靈感而苦惱。而我想說的是，靈感不是與生俱來的，它需要你去不斷地尋找。如果沒有靈感，你將永遠(yuǎn)不能開始，更別說去完成一個設(shè)計了。下面是我使用的一些方法。 閱讀 我沒有上過任何設(shè)計學(xué)?；蚺嘤?xùn)班，因此我的大部分設(shè)計知識，都是從閱讀中獲得的。我?guī)缀醪蛔x那些30天速成系列的書或關(guān)于設(shè)計趨勢的文章，因為我知道技術(shù)的變化是非常快的，正如，我現(xiàn)在完全使用Sketch來做設(shè)計，而不用PS一樣。我更關(guān)注設(shè)計的本質(zhì)，書是獲得這方面知識的很好途徑。 下面是我書櫥中的一部分設(shè)計類書籍，我閱讀那些對設(shè)計有著深刻思想的人物傳記 如《喬布斯傳》，與設(shè)計相關(guān)的心理學(xué)書籍《設(shè)計心理學(xué)》、與色彩相關(guān)的《色彩設(shè)計》，與字體相關(guān)的《設(shè)計師的自我修養(yǎng)》等等。也正是通過這些書籍，讓我逐步理解了設(shè)計的內(nèi)涵，從而讓我徹底走出了之前學(xué)習(xí)設(shè)計時的誤區(qū)。
另外我也會讀一些網(wǎng)上的優(yōu)秀文章，Designer News 是一個我獲得高質(zhì)量設(shè)計文章的優(yōu)秀網(wǎng)站，在這里我可以看到最新的來自全球設(shè)計師的優(yōu)秀分享。當(dāng)然，我也在 優(yōu)設(shè)、推酷、Medium 等網(wǎng)站上閱讀那些具有思想性的設(shè)計文章，并且通過關(guān)注一些優(yōu)秀的設(shè)計師，從他們身上學(xué)到了很多經(jīng)驗和啟發(fā)，給我學(xué)習(xí)UI設(shè)計帶來了極大的幫助。 收集優(yōu)秀設(shè)計 另一個獲得靈感的方法是收集優(yōu)秀的設(shè)計作品。Ember是我用過的用來收集設(shè)計素材的最佳工具。更棒的是它支持訂閱功能，可以從Dribbble這樣的網(wǎng)站自動下載設(shè)計作品，并讓我非常方便地瀏覽和收集。(下圖為我的Ember應(yīng)用截圖)
除了Ember之外，我也使用Pintrest來收集手機(jī)上看到的優(yōu)秀設(shè)計，并按照分類添加大我在Pintrest上創(chuàng)建的Board中。(下圖為我的Pintrest主頁) 擁有工匠精神 你所做的每一件事情，它的背后都可以和藝術(shù)聯(lián)系在一起。只要是付出了努力，精心制作，并能反映出作者情感與靈魂的東西都可以被稱為藝術(shù)品。想一想你平時喜歡做的事情，閱讀，散步，美食或者看展覽。這其中的每一件都與一種藝術(shù)形式相關(guān)聯(lián)：寫作，環(huán)球旅行，烹飪、攝影。你會發(fā)現(xiàn)當(dāng)你當(dāng)你不斷完善某一項技能的同時，其他技能也會得到加強(qiáng)。對于設(shè)計來說，上面提到的 寫作、攝影、旅行等都是對設(shè)計能力的很好補(bǔ)充。 最后，希望能夠得到更多朋友的反饋，“喜歡”或是“點評”，你們的意見能夠幫助我驗證自己對設(shè)計的理解，并幫助我不斷完善它。