如何精准高效的实现视觉稿？------前端开发辅助工具AlloyDesigner使用介绍

AlloyDesigner：http://alloyteam.github.io/AlloyDesigner/

介绍：AlloyDesigner是腾讯开发的一款工具，其在页面构建过程中，直接嵌入开发的Web页面中运行，帮助我们精准、高效的构建Web页面的UI，配合浏览器的一系列配置，将Developer Tools所修改代码自动保存入开发环境中，极大的提高工作效率。

安装方式参考官网，推荐使用内嵌收藏栏的方式使用。

环境要求：

• Chrome V31+(正式版)

• 本地服务器开发

本次教程的环境：

• Chrome  55.0.2845.0 canary (64-bit)

• 本地服务器APACHE

使用教程：

1.安装：拖拽至收藏栏。

2.打开开发好的页面。

3.点击第一步拖拽托到收藏栏的链接，底部出现AlloyDesigner的工具栏。

工具栏说明：

 4.使用打开视觉稿功能，选择设计人员提供的视觉设计图，加载后如下图：

视觉图和开发的页面已融合进一个页面，鼠标左键拖拽或按方向键调整视觉稿位置，基本重合后，固定设计稿(工具栏按钮/ALT+F)。

固定后依旧可以通过ctrl+方向键控制效果图。

可以观察二者区别，针对修改要修改的区域利用Developer Tools对开发的网页进行调整。

可对浏览器进行一系列配置，Developer Tools所修改代码会自动保存入开发环境源码中。如下步骤5-7。

5.配置Workspace。依次Developer Tools → Settings → Workspace→Add folder，选择开发环境目录。然后给予Developer Tools访问文件的权限。

6.选择即将要修改的文件，右键选择“Map to file system resource...”（下图一），出现列表点击文件（下图二），映射到开发环境的文件里。

7.根据对比情况在Developer Tools 修改具体代码。

修改后，所修改代码已自动保存入开发环境中。

如果正在使用编辑器，会收到提示：

同时观察SVN，也可以看到文件已被自动修改。

按照这种方法，我们可以不断通过Developer Tools 修改代码，直到和视觉稿完全一致。

8.其他功能，如取色、测距、查看不透明度，可查看官网教程:http://alloyteam.github.io/AlloyDesigner/worddoc.html#h_3823

来自为知笔记(Wiz)