避開這3個誤區，來看設計師學編程的正確姿勢

前端作為一種偏視覺化的編程技術，確實是外行比較適合的編程語言。想找工作的設計師，有一定的編程基礎也會更受青睞。但是在我和很多設計師在打交道的過程中，發現大部分人對于學習編程存在一些誤區。

本文作者leadream，微信公眾號 codesigner，歡迎同學們關注喲

1. 《超多干貨！零基礎設計師該如何學習前端？》
2. 《成為全棧設計師！零基礎設計師自學編程前需要知道的知識》

比如很多人雖然想學但又認為編程太難有排斥心理；相對地也有一些人用CSS寫了一些樣式會覺得前端很簡單；還有些人不知道從何下手，就開始啃起了枯燥無味的w3school文檔（web技術中文文檔）。于此我覺得設計師想學會寫代碼一定要對編程有正確的認知，既要對技術保持一顆敬畏的心，又不能從潛意識里排斥它。

我做了兩年前端開發，同時也做過許多設計的工作。基于自己的經驗，對于設計師學編程這件事我有一些自己的想法和建議想分享給你。

術業有專攻

可能有些設計師想精通編程，成為一個全棧設計師，但我不太贊成這種想法。畢竟“術業有專攻”，每個人一生的精力有限，根據“一萬小時理論”（想要成為某個領域的專家需要持續學習一萬小時），要想成為設計大咖已經要花費很多時間了，想同時在技術這一領域有所造詣短時間也是達不到的。

但是因為前端經常做一些視覺化的開發，比如寫外觀樣式和交互動畫，加之CSS和HTML語法看起來比較簡單，常常會給設計師造成一種假象：前端不是很容易學嗎。可是，不同于以前網頁設計師僅僅做一些視覺還原的工作，現在的前端工程師要做的工作范圍極廣，寫寫樣式調調動畫只是其中一部分。從這個職位屬性的變化——從設計師到工程師——就可以看出來，一名合格的前端工程師除了能夠還原頁面視覺，還要有工程化的思維，對數據結構有深刻的認識，有時候還需要一些計算機網絡的知識，對后端也要有一定了解。這幾年前端技術發展飛快，各種框架及工具層出不窮，新技術不斷出現，想要追上卻力不從心。所以說，前端入門容易但想要學深學透卻“難于上青天”。

說了這么多，其實是想告訴你要明確學習編程的目的。如果你想從設計師轉行成為一個前端工程師，那么可能就要心無旁騖地去從計算機科學這門學科的基礎知識開始學習了。但我相信大部分設計師的目的是想成為“T”型人才——在設計領域是專家，而對于技術領域也有一定程度的涉獵。所以，學習編程對我們來說就是為了增加自己的附加值。

靠興趣驅動學習

明確了學習目的，那我們的學習方式也應該是有別于工程師的學習方式的。我認為設計師學習編程最快也是最有效的方式就是通過興趣驅動學習——沒有什么比看見自己用代碼寫出一個小demo更讓設計師開心了。

當然，除了滿足感我們還能得到一些切實的好處。我從四點分別講述，同時推薦一些編程語言或軟件。

1、了解一定的開發原理，和工程師溝通更順暢

推薦使用交互原型工具Framer進行一些動效設計，它將視覺設計和編程相結合，雖然代碼不能直接拿去用，但能夠讓你和開發工程師溝通起來更加順暢。

2、自己能夠編寫Ps 和Sketch 插件，通過代碼減少重復性工作

Ps和Sketch都支持插件擴展，同時支持多種語言風格書寫插件，所以你可以選擇自己熟悉的語言編寫。當遇到重復性的操作時，你就可以自己寫個插件提高工作效率了。

3、代碼也是一種藝術，編程就是換一個角度進行藝術創作

Processing是一款可視化編程軟件，很多設計師通過Processing創作出一些很棒的作品。在Processing里，代碼就是一支畫筆可以讓你畫出一些意想不到的作品，設計師玩了這個絕對會愛不釋手。

4、可以按自己的想法做出個人網站

能自己獨立完成個人網站需要很多知識積累。到這一步的設計師應該已經在代碼里摸爬滾打很長時間了，各種需要使用的技術都能懂一些。

需要注意的細節

最后，說一些細節問題，希望能給你在學習編程的路上一些指引。

1、永遠不要畏懼代碼

很多設計師會對代碼有一種潛意識的排斥，但其實是被自己的眼睛欺騙了。如果靜下心來，“摒棄前嫌”地看一段代碼，你會發現好像也可以看懂，它好像也沒那么難。

2、思維的轉變

編程的思維和設計的思維肯定是不同的，編程會更加注重抽象能力，很多具象的東西在代碼里就抽象成了數據。所以，最好的方式就是在寫代碼時把自己想象成一臺計算機。

計算機的特點就是能快速計算，所以代碼里所表現的一些過程其實就是很原始的方法，比如計算1到100的平均值，在代碼里就是把它們一個個加起來除以100。但是，最后肯定需要人為的地進行一些算法優化。

3、注意格式

正如在設計中將文字、圖案對齊一樣，將代碼對齊、按規范書寫將會是一個好習慣。誠然，一團亂麻的代碼沒有報錯也能正確執行，但是考慮到以后你可能會再次閱讀自己的代碼，還是把它對齊并按照規范寫吧，不然下次讀自己的代碼時你可能會想殺掉之前的自己。

更何況，簡潔優雅的代碼看起來簡直是一件藝術品。

4、數據類型及代碼結構

編程語言有很多種，但是它們的數據類型和代碼結構卻大同小異。比如數據類型無非就是數字（number）、字符串（string）、布爾值（boolean）、對象（object）等，而代碼結構無非就是條件、循環等。所以，在準備編程之前能夠了解一下這些基礎知識，將會在以后寫代碼時減少很多不必要的時間。

以上所述，都來自于個人經驗，未免有些錯誤或疏漏，僅供各位參考，但不可盡信。希望我的這些經驗能開啟你的編程之路或在你編程時給你一些切實的幫助，如果有任何問題也可以留言探討。

掃一掃關注作者的微信公眾號：

「技多不壓身的設計師才有高薪資！」

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

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

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