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

>>>  技術話題—商業文明的嶄新時代  >>> 簡體     傳統

  英文原文:Design Tips For Developers

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

  以下正文。

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

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

  開發你的美感

  … 我最喜歡的站點是:

  多花些時間

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

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

  

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

好的藝術家抄,偉大的藝術家偷。- 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 資源

  迭代,非常重要

  嘗試和失敗是非常有價值的工具。很多嘗試看起來不爽,和你的設計不搭。但是沒有關系,每次失敗時回滾到上一步再繼續。在我確定 Duet 的設計之前我迭代過上千次。

  關注可用性和易用性

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

  你只需要中一件事就可以確保 app 的可用性—— 保證你真的在用你開發的 app。經常用。如果有東西讓你覺得小不爽,修理它。相信你的自覺。如果一個流程不清晰或者太復雜,你能直觀的感受到。是不是步驟太多?是不是某個功能難以找到?是不是常用功能用起來要點太多次?或者是不是你有時候都會忘掉一些功能在哪里?不管可用性問題在哪兒,只要你一直用你的 app,我相信你能發現它的,然后你會修好它。

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

  排版比你想象的重要

type

  Easy:由于此段內容都是英文排版相關,直接跳過。補充兩個中文排版開源項目:

  選擇正確的圖片和圖庫

  … 幾個高質量的免費圖庫

  重視反饋

  無法否認我在這個方面做得很差,但我認識到了反饋的重要性。我做的大部分東西在發布之前沒有得到反饋。為了在測試階段獲得反饋,我開始關注這些資源:

  最后一招

  如果你不知道如何去做——簡單總是好的。大量留白、更輕微的陰影之類。變得擅長設計是一個漫長的過程,會花掉你很多時間。也許不是你喜歡的方式,但一旦你掌握了它,你會有明顯的提升。


ftqq.com 2014-07-13 18:09:28

[新一篇] 提高效率必須改掉的7種習慣

[舊一篇] 科技大佬的婚禮是什么樣?怎一個奢華了得
回頂部
寫評論


評論集


暫無評論。

稱謂:

内容:

驗證:


返回列表