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

矫情吗；* 2022-08-06 02:04 233阅读 0赞

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

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

# 开发你的美感 #

… 我最喜欢的站点是：

*  [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][]

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

*  [typo.css][]
 *  [yue.css][]

# 选择正确的图片和图库 #

… 几个高质量的免费图库

*  [Im Creator][]
 *  [Pic Jumbo][]
 *  [Gratisography][]
 *  [Super Famous][]
 *  [Unsplash][]

# 重视反馈 #

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

*  [Criticue][]
 *  [Reddit Design Critiques][]

# 最后一招 #

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

[awwwards.com]: http://awwwards.com/
[unmatchedstyle.com]: http://unmatched..com/
[dribbble.com]: http://dribbble.com/
[patterntap.com]: http://patterntap.com/
[css]: /images/20220806/18864dc3dfd44f0baea36b05ec7bac3f.png
[MDN]: https://developer.mozilla.org/en-US/
[Less]: http://lesscss.org/
[Sass]: http://sass-lang.com/
[zurb-foundation]: /images/20220806/f738c1a2f66a46d8bfbacf4541d414ff.png
[Foundation]: http://foundation.zurb.com/index.html
[Bootstrap]: http://getbootstrap.com/
[Pure]: http://purecss.io/
[Polymer]: http://www.polymer-project.org/
[icons]: /images/20220806/1f64c2dfa10a4d089e9c4ed7d39d6fe4.png
[Themify Icons]: http://themify.me/themify-icons
[IcoMoon]: http://icomoon.io/
[Freepik]: http://www.flaticon.com/authors/freepik
[Glyphicons]: http://glyphicons.com/
[type]: /images/20220806/2a107b65b47f48c28c1e119238a28691.png
[typo.css]: http://typo.sofi.sh/
[yue.css]: http://lab.lepture.com/yue.css/
[Im Creator]: http://www.imcreator.com/free
[Pic Jumbo]: http://picjumbo.com/
[Gratisography]: http://www.gratisography.com/
[Super Famous]: http://superfamous.com/
[Unsplash]: http://unsplash.com/
[Criticue]: http://criticue.com/
[Reddit Design Critiques]: http://www.reddit.com/r/design_critiques/