HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 程序员应该知道的13个设计技巧

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

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

  下边是我认为一个技术背景的人要变得擅长设计需要留意的东西:
  开发你的美感
  … 我最喜欢的站点是:        •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
  最后一招
  如果你不知道如何去做——简单总是好的。大量留白、更轻微的阴影之类。变得擅长设计是一个漫长的过程,会花掉你很多时间。也许不是你喜欢的方式,但一旦你掌握了它,你会有明显的提升。

【程序员应该知道的13个设计技巧】相关文章

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

2. 你应该知道的CSS文字大小单位PX、EM、PT

3. 你应该知道的HTML5五大特性

4. 年轻的程序员应该怎么做?

5. 15个程序员需要知道的Chrome扩展

6. 移动页面设计技巧!优秀网站案例分析

7. 给程序员应聘的26条建议

8. 13个风格独特的关于页面(About Pages)设计

9. 《实用技巧》—让你的网站变成响应式的3个简单步骤

10. 推荐13个CSS3快速开发工具

本文来源:https://www.51html5.com/a3666.html

点击展开全部

﹝程序员应该知道的13个设计技巧﹞相关内容

「程序员应该知道的13个设计技巧」相关专题

其它栏目

也许您还喜欢