• UID12
  • 登录2016-06-14
  • 粉丝113
  • 关注50
  • 发帖1415
  • 主页
  • 金币8616枚
社区居民
最爱沙发
忠实会员
喜欢达人
原创写手
极分享 发布于2015-12-20 20:15
0/1346

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

楼层直达

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

翻译 By @Easy

 

偶尔看到好文章,又懒得全文翻译,就选其中部分重点意译了。翻译时只求答意,不拘小节,偶尔还会加上自己的点(tu)评(cao),均放于方糖选译分类,不喜勿BB。

本文选译自 http://www.duetapp.com/blog/design-tips-for-developers/ 。以下正文。

 

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

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

开发你的美感

… 我最喜欢的站点是:

 

多花些时间

我在开发应用和网站时,会在设计上花掉和编码同样的时间。好的设计需要时间来完善。

在开始项目时,我一般对于整体布局有基本的想法。当我有想法的时候,我同时进行设计和编程。我会在开发细节功能的同时在浏览器里边设计那些细节。这可能不是最有效率的,但这样可以让我在工作时对项目进行上千次的小迭代。

 

创造的秘密就是知道如何藏好信息来源 – 爱因斯坦

好的艺术家抄,伟大的艺术家偷。- 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


0人打赏
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 80595/379   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 45812/191   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 45498/0   Python爬虫:常用浏览器的useragent

  • 42020/261   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 39013/145   省时省力的Android组件群来了,非常棒的原型参考

  • 30470/143   2016抢红包软件及源码

  • 29532/71   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 29454/2   超全!整理常用的iOS第三方资源

  • 24785/161   Android版类似UC浏览器:非常赞,产品级的源码

  • 23029/31   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 22730/26   Android工程师面试题大全

  • 22693/27   2016程序员跳槽全攻略

  • 22063/10   GitHub上排名前50的iOS项目:总有一款你用得着

  • 21063/21   码魂:程序员的牛B漫画

  • 19283/74   【持续更新中】Android福利贴(二):资料源码大放送

  • 19282/85   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 19145/43   一个绚丽的loading动效分析与实现!

  • 19103/10   2016年最全的Android面试考题+答案 精编版

  • 18867/3   吐槽那些程序员的搞笑牛逼注释

  • 17851/45   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 17752/104   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 17732/1   iOS 动画总结

  • 17716/82   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 17366/25   个人收集的Android 各类功能源代码

  • 16890/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 16846/22   Android福利第三波【Android电子书】

  • 16660/1   iOS中文版资源库,非常全

  • 16651/81   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 16615/54   基于瀑布流的美女图片浏览App,有注释的源代码

  • 16491/18   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 16484/10   女程序员的梦,众网友的神回复

  • 16187/23   珍藏多年的素材,灵感搜寻网站

  • 16187/11   年会上现场review代码是怎么样的体验!

  • 15792/19   65条最常用正则表达式,你要的都在这里了

  • 14980/16   基于Android支付宝支付设计和开发方案

  • 14391/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 14313/18   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 14131/47   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 13929/62   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 13815/0   GitHub iOS 库和框架Top100 

  • 13659/7   用程序员的姿势抢过年的火车票

  • 13626/7   一张图搞定iOS学习路线,非常全面

  • 13260/10   成为Java顶尖程序员 ,看这11本书就够了

  • 13220/10   微信支付终于成功了(安卓,iOS),在此分享

  • 13102/18   一张图搞定Android学习路线,非常全面

  • 12954/29   【持续更新中】Android福利贴(一):资料源码

  • 12858/4   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 12663/4   46 个非常有用的 PHP 代码片段

  • 12132/3   即时通信第三方库

  • 11558/9   流媒体视频直播方案

  • 11512/18   八个最优秀的Android Studio插件

  • 11366/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 11193/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 11137/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 11064/12   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 10503/1   基于node-webkit跨平台应用案例集之(一)

  • 10315/6   开箱即用!Android四款系统架构工具

  • 10113/11   十大技巧快速提升Android应用开发性能

  • 10098/4   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 10055/2   Android性能优化视频,文档以及工具

  • 返回顶部