碼農如何學設計 - Web UI 設計學習心得

個人本職工做是後端開發工程師，記不清從何時開始對「設計」產生了興趣，但是對「設計」領域知識的學習因爲從小就受到固有思惟的影響，甚至受到不少不正確教學方法的誤導，在學習的過程當中很容易讓人產生自我懷疑，特別是對天賦的自我懷疑，從而慢慢的主動放棄。

本文結合本身的學習經歷，從「什麼是設計」開始切入，引出何選擇設計工具，如何畫下設計的第一筆以及隨之而來的其餘基礎設計問題。但願這篇關於學習設計最初級的心得體會能給那些曾經跟我有相似興趣的朋友們一些學習上的參考。

若是想成爲一名高級的、或者藝術家級別的設計師確定須要天賦。可是，對於大多數爲了完成工做或者實現本身想法的基本設計能力徹底能夠經過自學學會的。

什麼是設計？

「設計是努力使現況接近指望的探索過程」，- by 著名建築設計師：姚仁祿。與百科詞條中對於「設計」的解釋相比，我更喜歡姚先生的版本，言簡意賅，直擊重點。

好的思想都是相通的，不論是建築領域仍是互聯網領域，對咱們學習 Web UI 設計一樣受用。
設計並無標準答案，一般也不是一步到位，好的設計做品大可能是不斷演化而成的。
所以先認清現況是一個頗有必要的步驟，可以幫助咱們制定出更合理的指望/目標，避免好高騖遠。

本文以「如何學習 Web UI 設計」爲例子：

• 假定咱們的現況/水平：新手
• 制定出具體的指望/目標：設計一個博客網站
• 最後，也是最重要的過程就是：付出實際行動，一步步將這個目標實現

如何選擇設計工具

上一步已經肯定了目標，下一個隨之而來的問題就是：選擇什麼樣的設計工具？

我很喜歡」隨之而來「這個詞，有些東西不須要刻意，只要你把當下想清楚以後，將來會主動找上門。設計工具備不少，Photoshop，Sketch，Adobe XD 等等甚至還能夠直接用紙筆。

對於初學者的建議是：以最快的速度肯定一款設計工具，哪怕是經過點兵點將、扔篩子的方式，重點是快速作出選擇，而後付出行動，動手操做。

初學設計的時候我也很糾結，看了不少工具對比文章，甚至去看國外分享的工具對比視頻。可是，當我真正開始動手去作一個實實在在做品的時候，發現設計的思想纔是重點，工具之間無非就是有些軟件對某些操做比較方便而已，等你親自動手作過一次完完整整的設計做品以後就會發現，即便下一次作設計想換到其餘工具也是很容易上手的。

如何在空白頁面畫下第一筆

咱們將要設計的博客網站最終須要在瀏覽器上顯示，因爲顯示器屏幕有很是多的規格大小，小到手機上的瀏覽器、主流桌面瀏覽器、大到接近電視的超寬屏顯示器

面對這麼多的載體，會有不少問題隨之而來：

• 如何讓咱們的網頁可以在不一樣尺寸上都有比較理想的顯示效果？
• 頁面上的內容應該居中對齊，仍是左對齊，右對齊？
• 若是是左對齊，應該距離左邊多少？
• 若是是右對齊，應該距離右邊多少？
• ...... 等等

這些問題能夠經過開啓網格輔助線的方式解決，輔助咱們作設計

隨之而來的其餘問題

有了網格系統輔助咱們作設計，能夠大膽的畫下第一筆。

但是，第一筆以後又有不少問題隨之而來：

若是你第一筆寫的文字，文字的字體、字號、顏色等等問題隨之而來

若是你第一筆畫的是形狀，形狀邊框樣式，背景顏色，陰影等等問題也會隨之而來

一旦你開始第二筆，兩筆元素之間的間距、對齊方式等等問題馬上緊隨其後

這些問題是新手作設計最頭疼的問題，是最容易產生自我懷疑的設計階段。我在自學設計的過程當中，也是參考了無數資料，作了大量練習，整體的解決思路無非下面一張圖所示：

以顏色爲例：

• 若是你有經驗，這裏說的有經驗包括如下幾種狀況

  • 無論經驗是來自以往的設計經驗，仍是衣服搭配等等，只要你能夠肯定出本身最想用的顏色，就能夠嘗試用這種顏色及其衍生色作設計中的主要顏色
  • 公司的產品已經有品牌色
  • 來自其餘的，任何可讓你不須要糾結就能肯定出顏色的都屬於有經驗

• 若是你沒有任何經驗

  • 從如今開始，養成一個習慣：將平時看到的，本身喜歡的網站，收藏起來。收集資源是一個長期的過程，不必定等到要用了纔去找
  • 從上一步收集的資源中，挑選出你最想要的配色或者變體色
  • 若是你不想參考任何其餘網站的配色，那就用最簡單的白底黑字去設計，可是記住一點：並非只有純淨的黑與白，黑白之間還有不少不一樣等級的灰度色可使用

動手操做

設計是一門須要持續動手實踐的技能，意淫多少篇都不如親自動手實操一遍來的實在。

當你真正親自動手作一次設計以後就會發現，哪怕只是設計一個簡單的博客網站，也會遇到設計過程當中90%的常見問題，並且這些問題跟你選擇什麼樣的設計工具沒有任何關係，重點在思想。有了想法以後，經過不斷練習豐富本身的經驗，同時完善本身的設計思想。

我已經將文章開頭定下的「設計一個博客網站」的目標實現了，點擊下方的連接查看完整實現過程

從 0 開始學設計、並將設計稿轉成 HTML + CSS + JS

同時學習「設計」與「前端開發」基本技能