千颂伊，你是否厌倦了边测量设计稿尺寸边写网页？你是不是总是被设计师缠着，让你在测试后做UIwalk-through？”那就让【杜教授】教你如何使用来自星星的web前端开发方法！用一次，你就会爱上一床被子！千颂伊加油……AlloyDesigner引入的思路AlloyDesigner从“抄袭”中得到启发，使用AlloyDesigner后，你可以将设计稿拖入你的网页中，并放置在页面的顶层，然后你就可以针对设计稿构建DOM元素和CSS样式了。这样是不是直观很多呢？用AlloyDesigner直观的调整页面，可以快速达到视觉稿一样的目的。AlloyDesigner官网：http://alloyteam.github.io/AlloyDesigner/这样开发出来的页面，妈妈再也不用担心我的页面被设计者拿走了看了^_^，开发效率也大大提高了，再也不用边测量尺寸边写页面了，而且真正意识到所见即所得。同时同时，AlloyDesigner还提供了距离测量、颜色选择、缩放、CSS助手等最实用的功能。页面构建工具！AlloyDesigner重新定义网页构建模式。在页面构建过程中，AlloyDesigner直接嵌入到您的网页中，帮助您准确高效地构建网页UI！AlloyDesigner是使用HTML5开发，直接嵌入网页的可视化建站工具，可以作为浏览器插件使用，也可以与浏览器自带的F12开发工具集成，支持Chrome、IE7+等主流浏览器。AlloyDesigner有望为您节省40%的UI开发时间，每天多花40%的时间一起喝杯咖啡怎么样？如何使用？AlloyDesigner的安装和使用有3种方式：安装Chrome插件；将AlloyDesigner添加到收藏夹栏；将AlloyDesigner的js文件导入html代码：AlloyDesigner使用指南：启动AlloyDesigner后，首先在页面中添加可视化草稿图片，然后使用AlloyDesigner在页面上拖动定位，然后使用AlloyDesigner提供的距离测量功能测量每个DOM元素的宽高margin，padding等，如果需要提取颜色，可以使用AlloyDesigner提供的颜色拾取功能进行拾取。这种开发方式的方便之处在于，开发者所有的开发结果和修改都实时显示在浏览器中，可以完全摒弃类PS的切片工具，让开发者的环境只剩下代码编辑器和浏览器在设备之间切换。AlloyDesigner已广泛应用于公司多个web项目的开发中，大大提高了开发效率和开发质量。未来展望AlloyDesigner也方便产品经理、设计师、测试同学进行产品UI走查，甚至未来还可以根据自己开发的页面和交互稿的差异打分。未来，AlloyDesigner将加入更多的可视化UI构建工具，如直接通过拖拽修改DOM大小、边距、样式等，提高开发效率，使其成为一个综合性的可视化Web开发设计工具。如果您有什么建议和想法，请告诉我们Let'sgo^_Q！原文链接：http://levi.cg.am/?p=3377
