程序員應該知道的13個設計技巧

時間 2019-11-13

標籤程序員應該知道設計技巧欄目快樂工作简体版

原文原文鏈接

原文出處： duetapp 譯文出處：方糖氣球（@easy）。歡迎加入技術翻譯小組。

css

我是一個程序員，不是設計師。我沒有受過設計師的訓練。我也沒有讀過關於設計的書籍。儘管如此，在數年的開發過程當中，我學會了讓本身的網站和應用看起來很專業。html

下邊是我認爲一個技術背景的人要變得擅長設計須要留意的東西：前端

開發你的美感

… 我最喜歡的站點是：程序員

awwwards.com– 多看每日和每個月上榜站點
unmatchedstyle.com – 評論頗有用
dribbble.com （ Easy注：我常常去，不少NB的app設計都在上邊
patterntap.com

多花些時間

我在開發應用和網站時，會在設計上花掉和編碼一樣的時間。好的設計須要時間來完善。web

在開始項目時，我通常對於總體佈局有基本的想法。當我有想法的時候，我同時進行設計和編程。我會在開發細節功能的同時在瀏覽器裏邊設計那些細節。這可能不是最有效率的，但這樣可讓我在工做時對項目進行上千次的小迭代。編程

偷

創造的祕密就是知道如何藏好信息來源 – 愛因斯坦bootstrap

好的藝術家抄，偉大的藝術家偷。- Pablo Picasso瀏覽器

這不是什麼新建議，可是多是這些技巧中最重要的。當你剛開始的時候，你沒有技能創造出有吸引力的設計。這就意味着你須要模仿知名的設計師，或者讓你深受他們做品的影響。sass

下邊是個人步驟：我會搜索那些和個人基本想法相似的，可是設計得很好的web應用。我會找出那些我認爲會在個人app中有用的元素，而後在個人app中從新創造它。不要直接copy html或者css，那樣學不到任何東西。只學習視覺，而後用本身的代碼實現。當你慢慢有經驗了，就能夠開始創造本身的東西了。前端框架

忘了PhotoShop

若是你和我同樣不知道怎麼用PS，用你的代碼直接在瀏覽器裏邊設計吧。我只用PS調整圖標以及給app截圖。（ Easy注：最近Sketch挺火的，不少設計師已經從PS徹底轉向Sketch了。

精通CSS

直接在瀏覽器中設計須要精通CSS。… 下邊是一些資源：

MDN - Mozilla開發者中心，我用它幹不少事，不僅是css
Less
Sass

前端框架是你的好朋友

從無到有的建立一個網站或者app是很難的，尤爲對於新手。因此如今我使用前端框架。最有名的是的Foundation和Bootstrap，也有不少其餘備選。

Foundation - 我最喜歡的前端框架
Bootstrap - 最流行的
Pure - 從未用過，可是看起來很酷
Polymer – Google Material Design全平臺實現的一部分，很酷的交互細節（這行是Easy加的，GFWED

圖標意外的重要

我用了很長時間才認識到圖標對於一個好的設計來講有多麼重要，這並不那麼顯而易見。圖標改善了導航，添加了色彩，傳情達意。圖標不必定能讓設計NB，但一堆爛圖標必定會讓你的設計SB。

根據項目的不一樣我使用icon fonts或者svg icons。icon fonts很是好用，尤爲是你在瀏覽器裏邊設計的時候。icon fonts讓你很容易給一個元素添加圖標，你只須要加個class就行了。

icon fonts大法好的另外一個緣由是你能夠像改變字體大小同樣改變這些圖標的大小。換顏色也同樣。

下邊是我喜歡的一些icon資源

Themify Icons
IcoMoon （ Easy注：icomoon是我最喜歡的，能夠選擇好圖標，自動生成css和sprite，甚至還能直接引用。嚴重推薦。
Freepik
Glyphicons

迭代，很是重要

嘗試和失敗是很是有價值的工具。不少嘗試看起來不爽，和你的設計不搭。可是沒有關係，每次失敗時回滾到上一步再繼續。在我肯定Duet的設計以前我迭代過上千次。

關注可用性和易用性

好的設計不止是app看起來如何。它還涉及了app的功能好很差，用起來容易不容易。即便不用專業培訓，一點小常識就能讓你在構建可用的app上受益不淺。

你只須要中一件事就能夠確保app的可用性—— 保證你真的在用你開發的app。常常用。若是有東西讓你以爲小不爽，修理它。相信你的自覺。若是一個流程不清晰或者太複雜，你能直觀的感覺到。是否是步驟太多？是否是某個功能難以找到？是否是經常使用功能用起來要點太屢次？或者是否是你有時候都會忘掉一些功能在哪裏？無論可用性問題在哪兒，只要你一直用你的app，我相信你能發現它的，而後你會修好它。

顯然這個流程是不完美的，你表明不了其餘的每個用戶使用它的方式，但個人經驗是絕大部分問題經過這個方式能夠找出來。…