双屏显示提升前端开发10%工作效率
双屏不是什么新鲜事,不过相信国内前端工程师还是用单屏的多,前端开发需要同时开启的屏幕太多了…你有没有迷失windows任务栏下n个窗口和ALT-TAB的频繁键盘操作中?利用双屏显示让你从中解脱出来!我也刚用上了双屏开发,效率提升感觉值能有10%,所以来鼓动下大伙都来用双屏吧。
windows的双屏显示有很多种模式,我用的模式是主屏辅屏模式,两个屏是独立的窗口,可以进行窗口全屏。桌面和任务栏之显示在主屏,可以把主屏的一个或几个窗口拖到辅屏上,并全屏显示。看下图,右边的显示器为主屏,拖了个FX到左边的辅屏在该屏幕中最大化。
数数我们前端开发在工作流程中并行的全屏显示需求有多少个:
1、视觉稿(JPG图/PSD图)
2、编辑器(HTML文件/CSS文件/JS文件)
3、浏览器(FX/IE6/IE7/…)
这些窗口不需要同时都在打开状态。但在我们的工作过程中,总是有两到三个窗口需要同时打开着,并频繁的在两个窗口之间进行切换。
在完成对项目中一张或多张页面的规划后,具体到单张页面的开发,页面可以被分成若干个小模块,开发就一个一个的完成这些小模块,从编写代码到浏览器测试通过。当进入到对小模块的开发阶段,双屏显示就发挥出了它的显示优势。小模块的开发可以分为以下几个阶段:
1、看视觉稿,编写HTML结构。 - 这个阶段,主屏编辑器里编辑HTML文件,辅屏用FX的一个TAB来显示JPG视觉稿。
2、看视觉稿,编写CSS结构。 - 这个阶段,主屏编辑器里编辑CSS文件,辅屏用FX的一个TAB来显示JPG视觉稿,放一把屏幕尺子量取尺寸。(这里会发生少量第三屏的需求,比如需要配合主屏开一个PS,在PSD文件里取色,也会在编辑器里切换到HTML文件上进行结构调整)
3、看FX下的效果,修正HTML和CSS代码。 - 这个阶段,主屏仍然是编辑器,辅屏FX下开启第二个TAB,用于显示HTML页面效果。主屏编辑器显示CSS代码为主,偶尔切换到HTML代码调整。
4、对比视觉稿和FX下的效果,继续修正HTML和CSS代码的像素级细节或者BUG。 - 这个阶段,是个三屏的需求,,我们需要在辅屏的FX下两个TAB,视觉稿和HTML页面来回切换来对比差异,并在编辑器里调整CSS代码,偶尔需要切换到HTML代码进行调整。
5、看IE下的效果,继续修正HTML和CSS的细节和BUG。 - 这个阶段,我一般放在整张页面完成时,而不是单个页面完成时就去做。看大家的习惯了。这里也是多屏的需求,需要在视觉稿、FX、IE6、IE7、代码之间进行切换。
我用的两个17寸普屏,不知道有没有用大宽屏开发的,想像下22寸或者24寸的屏幕,一个当两个来用也是可行的。而市面上流行的几百块钱一个19宽屏似乎当一个用多余,当两个用面积又不够点。
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:大米 来源: Koubei UED
- 标签: 双屏
- 发布时间:2010-01-11 12:17:51
- [68] Go Reflect 性能
- [68] 如何拿下简短的域名
- [67] Oracle MTS模式下 进程地址与会话信
- [62] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [56] 视觉调整-设计师 vs. 逻辑
- [49] 给自己的字体课(一)——英文字体基础
- [48] 读书笔记-壹百度:百度十年千倍的29条法则