程序员应该知道的 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

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

时间: 2024-11-08 23:31:23

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

JavaScript程序员应该知道的45个实用技巧

 在这篇文章中,我将分享一组JavaScript的技巧.窍门和最佳实践,这些都是JavaScript程序员应该知晓的,不管他们是使用在浏览器/引擎上,还是服务器端(SSJS--Service Side JavaScript)JavaScript解释器上 如你所知,JavaScript是世界上第一的编程语言,它是Web的语言,是移动混合应用(mobile hybrid apps)的语言(比如PhoneGap或者Appcelerator),是服务器端的语言(比如NodeJS或者Wakanda),并且

Java程序员应该知道的10个调试技巧

调试可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运行时上面. 在开始之前,推荐大家去看看Eclipse shortcuts这篇文章,它将会给你带来很多方便.在本文中使用的是Eclipse Juno版(Eclipse 4.2),在开始前给大家提3点建议! 1.不要使用System.out.println作为调试工具 2.把所有涉及到的组件日志级别激

JavaScript程序员应该知道的45个实用技巧_javascript技巧

如你所知,JavaScript是世界上第一的编程语言,它是Web的语言,是移动混合应用(mobile hybrid apps)的语言(比如PhoneGap或者Appcelerator),是服务器端的语言(比如NodeJS或者Wakanda),并且拥有很多其他的实现.同时它也是很多新手的启蒙语言,因为它不但可以在浏览器上显示一个简单的alert信息,而且还可以用来控制一个机器人(使用nodebot,或者nodruino).掌握JavaScript并且能够写出组织规范并性能高效的代码的开发人员,已经

分享Java程序员应该知道的10个调试技巧_java

可以帮助识别和解决应用程序缺陷,在本文中,作者将使用大家常用的的开发工具Eclipse来调试Java应用程序.但这里介绍的调试方法基本都是通用的,也适用于NetBeans IDE,我们会把重点放在运行时上面. 在开始之前,推荐大家去看看Eclipse shortcuts这篇文章,它将会给你带来很多方便.在本文中使用的是Eclipse Juno版(Eclipse 4.2),在开始前给大家提3点建议! 不要使用System.out.println作为调试工具 把所有涉及到的组件日志级别激活并使用 使

Java程序员应当知道的10个面向对象设计原则

(设计原则)底线是永远追求高内聚.低耦合的编码或设计. Apache 和 Sun的开源代码是学习Java和OOPS设计原则的良好范例.它们向我们展示了,设计原则在Java编程中是如何使用的.Java JDK 使用了一些设计原则:BorderFactory类中的工厂模式.Runtime类中的单例模式.java.io 类中的装饰器模式.顺便说一句,如果您真的对Java编码原则感兴趣,请阅读Joshua Bloch 的Effective Java,他编写过Java API.我个人最喜欢的关于面向对象设

20 件程序员必须知道的事

我最近看了一本叫做<the 97 Things a Programmer Should Know>的书.书是一本好书.不过,下面我将我认为最值得我们了解的 20 件事情列举给大家: 1 . 应用函数式编程原则 引用透明性是一个非常可取的特性.这意味着,不论何时调用它,对于同一组参数它永远给出同样的结果,这使它跟那些与其他系统相互交织的东西比起来更易于使用. 2 . 从用户的角度看问题 你不是用户.不要把你的想法强加到用户头上,每个人的想法都不尽相同.花一个小时去观察用户的行为比你花上一天的时间

做一个优秀程序员应该知道的15件事_其它综合

1. 懂得分享.尽可能使用开源,并且当你有能力的时候,要对其有所贡献.聚全社会之智慧,胜过某些"大"公司之短视. 2. 公平竞争.尝试其他技术.框架.方法和观点.不要总以为只有你的选择才是可行的.别的选择也有可能比你的要强得多.要以开放的心态,来检验其他人的选择. 3. 不要攻击他人.像第2条所说的,不要仅仅因为别人恰巧使用.Net.Java或PHP就去攻击他们(我在这方面有一次教训).有时,它们或许要比你所认为的更有效.只要别人不是一无是处,你就可以从他们那里学到很多东西. 4. 自

JAVA程序员应该知道的linux命令

常用命令 1.在compose Bar下可以对多个服务器同时进行操作.选择To All Sessions 2. 查看JAVA进程: ps -ef | grep java ps auxf | grep java 3.杀死JAVA进程: pkill java (在有反串改的时候可以用,杀死所有java进程) kill -9 进程ID ps -ef | grep "Dcatalina.base=/usr/oa/appserver" | grep -v "grep" | a

前端程序员应该知道的 15 个 jQuery 小技巧

下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高度相同 在新标签页/窗口打开外部链接 通过文本查找元素 在改变visibility时触发 AJAX调用错误处理 链式插件调用 通过使用jQuery中的animate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部的简单动画: // Back to top  $('.top').clic