我的本職工作是後端開發工程師，記不清從什麼時候開始對「設計」產生了興趣，可是對「設計」領域知識的學習由於從小就受到固有思維的影響，甚至受到很多不正確教學方法的誤導，在學習的過程中很容易讓人產生自我懷疑，特別是對天賦的自我懷疑，從而慢慢的主動放棄。
本文結合自己的學習經歷，從「什麼是設計」開始切入，引出何選擇設計工具，如何畫下設計的第一筆以及隨之而來的其他基礎設計問題。希望這篇關於學習設計最初級的心得體會能給那些曾經跟我有類似興趣的朋友們一些學習上的參考。
如果想成為一名高階的、或者藝術家級別的設計師肯定需要天賦。但是，對於大多數為了完成工作或者實現自己想法的基本設計能力完全可以通過自學學會的。
什麼是設計？
“設計是努力使現況接近期望的探索過程”，- by 著名建築設計師：姚仁祿。與百科詞條中對於“設計”的解釋相比，我更喜歡姚先生的版本，言簡意賅，直擊重點。
好的思想都是相通的，不管是建築領域還是網際網路領域，對我們學習 Web UI 設計同樣受用。
設計並沒有標準答案，通常也不是一步到位，好的設計作品大多是不斷演化而成的。
因此先認清現況是一個很有必要的步驟，能夠幫助我們制定出更合理的期望/目標，避免好高騖遠。
本文以「如何學習 Web UI 設計」為例子：
- 假定我們的現況/水平：新手
- 制定出具體的期望/目標：設計一個部落格網站
- 最後，也是最重要的過程就是：付出實際行動，一步步將這個目標實現
如何選擇設計工具
上一步已經確定了目標，下一個隨之而來的問題就是：選擇什麼樣的設計工具？
我很喜歡”隨之而來“這個詞，有些東西不需要刻意，只要你把當下想清楚之後，未來會主動找上門。設計工具有很多，Photoshop，Sketch，Adobe XD 等等甚至還可以直接用紙筆。
對於初學者的建議是：以最快的速度確定一款設計工具，哪怕是通過點兵點將、扔篩子的方式，重點是快速做出選擇，然後付出行動，動手操作。
初學設計的時候我也很糾結，看了很多工具對比文章，甚至去看國外分享的工具對比視訊。但是，當我真正開始動手去做一個實實在在作品的時候，發現設計的思想才是重點，工具之間無非就是有些軟體對某些操作比較方便而已，等你親自動手做過一次完完整整的設計作品之後就會發現，即使下一次做設計想換到其他工具也是很容易上手的。
如何在空白頁面畫下第一筆
我們將要設計的部落格網站最終需要在瀏覽器上顯示，由於顯示器螢幕有非常多的規格大小，小到手機上的瀏覽器、主流桌面瀏覽器、大到接近電視的超寬屏顯示器
面對這麼多的載體，會有很多問題隨之而來：
- 如何讓我們的網頁能夠在不同尺寸上都有比較理想的顯示效果？
- 頁面上的內容應該居中對齊，還是左對齊，右對齊？
- 如果是左對齊，應該距離左邊多少？
- 如果是右對齊，應該距離右邊多少？
- ...... 等等
這些問題可以通過開啟網格輔助線的方式解決，輔助我們做設計
隨之而來的其他問題
有了網格系統輔助我們做設計，可以大膽的畫下第一筆。
可是，第一筆之後又有很多問題隨之而來：
如果你第一筆寫的文字，文字的字型、字號、顏色等等問題隨之而來
如果你第一筆畫的是形狀，形狀邊框樣式，背景顏色，陰影等等問題也會隨之而來
一旦你開始第二筆，兩筆元素之間的間距、對齊方式等等問題立刻緊隨其後
這些問題是新手做設計最頭疼的問題，是最容易產生自我懷疑的設計階段。我在自學設計的過程中，也是參考了無數資料，做了大量練習，總體的解決思路無非下面一張圖所示：
以顏色為例：
-
如果你有經驗，這裡說的有經驗包括以下幾種情況
- 不管經驗是來自以往的設計經驗，還是衣服搭配等等，只要你可以確定出自己最想用的顏色，就可以嘗試用這種顏色及其衍生色做設計中的主要顏色
- 公司的產品已經有品牌色
- 來自其他的，任何可以讓你不需要糾結就能確定出顏色的都屬於有經驗
-
如果你沒有任何經驗
-
從現在開始，養成一個習慣：將平時看到的，自己喜歡的網站，收藏起來。收集資源是一個長期的過程，不一定等到要用了才去找
-
從上一步收集的資源中，挑選出你最想要的配色或者變體色
- 如果你不想參考任何其他網站的配色，那就用最簡單的白底黑字去設計，但是記住一點：並不是只有純淨的黑與白，黑白之間還有很多不同等級的灰度色可以使用
-
動手操作
設計是一門需要持續動手實踐的技能，意淫多少篇都不如親自動手實操一遍來的實在。
當你真正親自動手做一次設計之後就會發現，哪怕只是設計一個簡單的部落格網站，也會遇到設計過程中90%的常見問題，而且這些問題跟你選擇什麼樣的設計工具沒有任何關係，重點在思想。有了想法之後，通過不斷練習豐富自己的經驗，同時完善自己的設計思想。
我已經將文章開頭定下的「設計一個部落格網站」的目標實現了，點選下方的連結檢視完整實現過程
從 0 開始學設計、並將設計稿轉成 HTML + CSS + JS
同時學習「設計」與「前端開發」基本技能
本文同步發表在個人網站：Web UI 設計學習心得