现在该软件官方最新版本为8.1.0.，笔者使用的是7.0
软件及插件下载地址（7.0）:
QQ的界面如此“精致”，
它是如何被设计出来的呢？
AXURE
我想很多同僚或许都没有听说过Axure这个软件，嗯。。。根据某本教程，新人不知道这个软件很正常，所以让我们先百度一下。
Axure RP是美国Axure 公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理 。
以上是官方说法，是不是一脸懵逼？没事没事，下面有一份通俗版
这是一个做视觉设计的玩意儿，能够做app、web的视觉设计，功能很强大，受众不太大，据称可以当PS使（反正我没成功拿它把脸P好看），据传还有一位大牛用它做了一个动态挖掘机模型。
不知道各位同学的程序设计基础学习得怎样，不过在axure中，有些原理与C++的一些指令是相似的，甚至更容易上手。
软件界面就长这样
我想一定会有人认为我接下来要说各个区域是放什么的来凑字数……然而。。。各位想多了，各个功能区的功能各位就在实战中摸索吧（手动滑稽）。
接下来，我们就要使用Axure来做一个可视化的网页界面（受篇幅限制，只能说说做网页了）。就做一个登陆注册的吧。
首先，我们新建一个*.rp的文件，建完后界面是这样的。
接下来，我们就要向主页里加东西了。请注意，这里的东西和app 一样是拖动添加的。
我们先加入一个动态面板，注意是拖。
动态面板是个很有用的东西（很有用。。有用到我都不知道怎么说有用了），最重要的是动态面板里的东西是个整体！！！所以将来修改起来不太费劲。
接下来我们双击一下编辑区里的动态面板会出现如下界面（忽略里面的内容(^_^)）。
一开始里面会有一个我们可以重命名它，将来会更方便一点（如果你将来需要设置动作。。。你会看到一大堆动态面板／(._.)）然后双击进入，新打开的界面其实跟之前的是一样的，只要拖就好，注意元件不能出那个虚线的框，不然是看不见的
然后拖进去两个按钮，似乎现在圆角的按钮特别流行，直接就给你设成圆角了。。当然，你要想要方的或者更圆的只要拖动上面的黄色小三角就行。至于按钮长啥样css好看的文本框样式，就要你在属性面板的“样式“里自己设置了，反正自己喜欢就好哈
然后插入标签，就是网页上的文字啦～
文本框，这个东西就是在QQ登陆界面里那种能输入用户名和密码的东西。文本框的属性面板比较有意思
其中，文本有好多类型，这个可以用预览自己看一下。注意，有些浏览器并不支持全部类型。提示文字是在用户没有向文本框输入内容时会显示的，最大长度是指能输入几个字或字母、数字，其中汉字和字母与数字一样只占一个字符…我自己都觉得有点绕，实在看不懂就试一下吧
加入复选框和提交按钮
回到home界面，再次双击动态面板，复制css好看的文本框样式 【初学者】想学UI设计、HTML的看过来！，并粘贴一个css好看的文本框样式，将里面的无关内容全部删去
按照之前的方法，将元件放入；预览一下，你会发现你看不到注册界面；别着急，马上揭晓。
回到，单击一下注册按钮，可以看到，在交互界面中，有一个鼠标移入时，双击，会出现如下界面：
在最左边的框中找到动态面板的设置面板状态，勾选你的动态面板并选择状态为注册界面的那个stage。同样的，在那个节目也设置登陆界面的stage。
现在预览一下，你就可以看到注册界面里了；然而，如果你尝试一下，你会发现所谓的单选按钮并没有单选功能，还需要进行如下设置：框选你需要设置单选功能的全部按钮，在右侧属性面板中随便设置一个组名称：将这些单选按钮划入一个组,然后就可以了。
然后我们可以在保密协议的文本上设置一个单击的元件交互，与之前的设置动态面板其实是一样的，就是改成在最左侧选择“打开链接”，然后我们可以链接到page1。
在page1中，我们如果直接插入文本的话，将来修改会很不方便，所以，我们有另一个非常方便的使用方法——插入一个内连框架。
内连框架也是一个非常强大的功能，它可以内连电脑上的文件、其他网页、甚至内连百度地图都不在话下。内连的样子就跟百度文库里的文档的显示一样。
插入后双击内连框架，就能看到上图的画面，至于你想连什么，就看你自己了。
接下来介绍一个非常方便的工具的使用。
如果有同学学过flash，他应该会知道里面有个工具叫元文件，可以把一段编辑好的动画直接插到整个动画里，可以省去很多麻烦。这样的话有些经常重复出现的东西就不用一次一次重复做了。同样的，axure里面也有相似的东西。还记得左下角的工作区叫什么码？没错，就是母版。
对于一个网页经常重复的内容，比如开头或者页脚之类的，完全可以做一个母版，然后在把它拉进页面，这样的话即使有多个页面也会非常省事。点击母版菜单的左上角的➕，就可以新建一个母版了，然后与动态面板的每个面板一样，只不过没有了限制它的方框
另外，将母版拖到界面后，右击一些很有用的功能，具体怎么用，各位自己探索吧
OK，此次的内容就到这里了。想要得到你的网页，只需要点击生成即可。
最后我做出来的样子是这样的
不过在最后，我想让Axure更加明显的被看到，于是…………
我决定放一些刚刚做出的网页的HTML代码，这是主页一个页面的。。。。不包括其中大量的JS和CSS。。。。。大概三百多行？其中大概声明了三十多个JS和十个左右CSS，每个CSS或JS两百来行吧。。。于是DW和它的差距瞬间体现出来了。。而直接敲代码？兄弟，你确定没疯掉？
不想浪费时间的同学可以直接翻过。。。
另外，防止有人直接跳过后面的内容，再次特别感谢小楼一夜听春雨先生的书教导我学会了这个软件的使用方法，另外，如果各位有兴趣深入研究，也可以阅读以下他的axure教程，图书馆里就有。
不说了，代码呈上来！
排版：陈洁
文案：技术部
文章来源:http://mp.weixin.qq.com/s?src=11×tamp=1672448638&ver=4259&signature=4w00p2dyMZlg6HPXXL4RlgrclbtT4aedpEx7gvVTlP70wNj2cywmmI1fP0Pm-iyqDupkujpk0sXnnHEwOJH-BJutcRNUGXUCu2H*gAZwdD0pAB9ICMdGUxbI4YbWWH&new=1