程序员应该知道的13个设计技巧

原文出处： duetapp   译文出处： 方糖气球（@easy）。欢迎加入技术翻译小组。

我是一个程序员，不是设计师。我没有受过设计师的训练。我也没有读过关于设计的书籍。尽管如此，在数年的开发过程当中，我学会了让本身的网站和应用看起来很专业。

下边是我认为一个技术背景的人要变得擅长设计须要留意的东西：

开发你的美感

… 我最喜欢的站点是：

• 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。… 下边是一些资源：

• 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，我相信你能发现它的，而后你会修好它。

显然这个流程是不完美的，你表明不了其余的每个用户使用它的方式，但个人经验是绝大部分问题经过这个方式能够找出来。…

 

排版比你想象的重要

 

Easy：因为此段内容都是英文排版相关，直接跳过。补充两个中文排版开源项目：

• typo.css
• yue.css

 

选择正确的图片和图库

… 几个高质量的免费图库

• Im Creator
• Pic Jumbo
• Gratisography
• Super Famous
• Unsplash

 

重视反馈

没法否定我在这个方面作得不好，但我认识到了反馈的重要性。我作的大部分东西在发布以前没有获得反馈。为了在测试阶段得到反馈，我开始关注这些资源：

• Criticue
• Reddit Design Critiques

 

最后一招

若是你不知道如何去作——简单老是好的。大量留白、更轻微的阴影之类。变得擅长设计是一个漫长的过程，会花掉你不少时间。也许不是你喜欢的方式，但一旦你掌握了它，你会有明显的提高。