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

>>> 技術話題—商業文明的嶄新時代 >>>

簡體傳統

　　英文原文：Design Tips For Developers

偶爾看到好文章，又懶得全文翻譯，就選其中部分重點意譯了。翻譯時只求答意，不拘小節，偶爾還會加上自己的點(tu)評(chao)，均放于方糖選譯分類，不喜勿 BB。　　

　　以下正文。

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

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

　　開發你的美感

　　… 我最喜歡的站點是：

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

　　多花些時間

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

　　在開始項目時，我一般對于整體布局有基本的想法。當我有想法的時候，我同時進行設計和編程。我會在開發細節功能的同時在瀏覽器里邊設計那些細節。這可能不是最有效率的，但這樣可以讓我在工作時對項目進行上千次的小迭代。

　　偷

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

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

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

　　下邊是我的步驟：我會搜索那些和我的基本想法類似的，但是設計得很好的 web 應用。我會找出那些我認為會在我的 app 中有用的元素，然后在我的 app 中重新創造它。不要直接 copy html 或者 css，那樣學不到任何東西。只學習視覺，然后用自己的代碼實現。當你慢慢有經驗了，就可以開始創造自己的東西了。

　　忘了 PhotoShop

　　如果你和我一樣不知道怎么用 PS，用你的代碼直接在瀏覽器里邊設計吧。我只用 PS 調整圖標以及給 app 截圖。（ Easy 注：最近 Sketch 挺火的，很多設計師已經從 PS 完全轉向 Sketch 了。

　　精通 CSS

css

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

MDN - Mozilla 開發者中心，我用它干很多事，不只是 css
Less
Sass

　　前端框架是你的好朋友

zurb-foundation

　　從無到有的創建一個網站或者 app 是很難的，尤其對于新手。所以現在我使用前端框架。最有名的是的 Foundation 和 Bootstrap，也有很多其他備選。

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

　　圖標意外的重要

icons

　　我用了很長時間才認識到圖標對于一個好的設計來說有多么重要，這并不那么顯而易見。圖標改善了導航，添加了色彩，傳情達意。圖標不一定能讓設計 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，我相信你能發現它的，然后你會修好它。

　　顯然這個流程是不完美的，你代表不了其他的每一個用戶使用它的方式，但我的經驗是絕大部分問題通過這個方式可以找出來。…

　　排版比你想象的重要

type