AlloyDesigner：来自星星的Web前端开发方式

千颂伊，你是否烦透了边量设计稿的尺寸，边写Web页面？

创新互联建站专注于网站建设|成都网站维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖成都岗亭等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身建设品质网站。

是否总在提测之后被设计师缠住做UI走查？”

那让【都教授】来教你如何用来自星星的Web前端开发方式吧！

用一次，就会爱上一被子！

来吧，千颂伊。

AlloyDesigner介绍

AlloyDesigner 的创意来自于“临摹”的灵感，使用AlloyDesigner后，你可以把设计稿拖进你的Web页面铺在页面的***层，然后就可以对着设计稿来构建DOM元素和CSS样式啦，这样子是不是直观了很多？通过AlloyDesigner直观地调整页面，迅速达到与视觉稿一致的目的。

AlloyDesigner的官网：http://alloyteam.github.io/AlloyDesigner/ 

这样开发出来的页面，妈妈再也不用担心我的页面被设计师走查了^_^，开发效率也大大提高，不再需要边量尺寸，边写页面啦，真正实现所见即所得。同时，AlloyDesigner还提供测距、取色、放缩、CSS助手等最实用的页面构建工具！ 

AlloyDesigner 重新定义了Web页面构建的模式，页面构建过程中，AlloyDesigner直接嵌入你的Web页面中运行，帮助你精准、高效的构建Web页面的UI！AlloyDesigner 是用 HTML5 开发的、直接嵌入在Web页面中运行的可视化Web构建工具，它可以作为浏览器的插件或与浏览器自带的F12开发工具进行整合，支持Chrome，IE7+等主流浏览器。

AlloyDesigner预计节省您40%的UI开发时间，每天多40%的时间一起喝杯咖啡如何？

如何使用？

AlloyDesigner安装使用方法有3种：

1. 安装位Chrome的插件；
2. 将AlloyDesigner添加到收藏栏；
3. 在html代码中引入AlloyDesigner的js文件：

AlloyDesigner使用指引：启动AlloyDesigner后，首先，将视觉稿图片加入页面，然后用AlloyDesigner将其在页面中拖拽定位，接着用AlloyDesigner提供的测距功能量出每个DOM元素的宽高、margin、padding等，如果需要提取颜色，可以用AlloyDesigner提供的颜色拾取功能进行拾取。

这种开发方法的便利在于，开发者的所有开发结果和修改都是实时的显示在浏览器中的，并且，可以完全摒弃PS类的切片工具，让开发者的环境只在代码编辑器和浏览器之间切换。

AlloyDesigner已经广泛的应用入公司的诸多Web项目的开发，大大提高了开发效率和开发质量。

未来展望

AlloyDesigner同时也方便产品经理、设计师、测试同学进行产品的UI走查，甚至未来可以根据你开发的页面和交互稿的差异程度打一个分数。

未来AlloyDesigner将会加入更多可视化的UI构建工具，比如通过拖拽直接修改DOM尺寸、边距、样式，提高开发效率，做成一个全面的可视化Web开发设计工具，有什么建议和想法就提给我们吧^_Q!

当前名称：AlloyDesigner：来自星星的Web前端开发方式
本文来源：http://www.shufengxianlan.com/qtweb/news29/502779.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联