亿图线框图绘制工具亿图原型设计

亿图线框图绘制工具真正上手之前，我一直觉得画原型是件特别麻烦的事。以前用别的软件，光拖控件、调对齐就得花半天，改一版方案几乎等于重画一遍。后来换了这套工具，才发现原来做界面原型也能像写文档一样顺手。

平时给客户演示界面方案，最怕的就是静态图说不清楚交互逻辑。这个软件可以直接给按钮加跳转链接，导出成HTML后点哪儿走哪儿，客户拿着鼠标自己就能点一遍，比对着截图讲半天有效多了。

做移动端UI设计的朋友应该都有同感，手机界面上的返回键、滑动效果、弹窗提示，光靠画图根本表现不出来。它自带手机UI模板，状态栏、键盘、手势区域都给你备好了，直接往里填内容就行。

如果你也受够了每次评审会都被问"这个按钮点了会跳到哪"，不妨试试用它把整个流程串起来。接下来我把这阵子用下来的真实感受，包括一些操作上容易踩的小坑，都整理在下面了。

用亿图线框图绘制工具做高保真原型，比Axure省在哪？

先说最直观的差别：上手成本。Axure的逻辑确实强大，但新手上路光搞懂动态面板就够喝一壶。这个工具更像是画图软件和交互软件的中间态，不需要写任何代码，所有组件都是所见即所得。

举个例子，我想做一个带下拉筛选的列表页。在Axure里得先建中继器、设数据集、写交互条件，折腾半小时。在亿图里直接拖一个"列表"组件，双击进去改两行示例数据，右键加个"筛选"交互状态，两分钟搞定。

另外它和Office的操作逻辑非常接近，习惯了Word、PPT的人几乎不用看教程。顶部就是开始、插入、设计那几个页签，字体、颜色、对齐按钮都在肌肉记忆的位置上。

还有一点值得夸的是模板库。软件启动时有个模板选择页，里面按网站后台、移动应用、小程序界面分了类，每个类目下都有好几套现成的框架。我之前做后台管理系统的原型，直接套了一个带侧边栏的布局，把Logo和菜单改一改就能用，省了画栅格的时间。

不过说实话，它的交互能力确实比Axure轻量很多。如果你要做那种带复杂变量判断、动态数据联动的原型，还是得回到Axure。但日常80%的需求页面跳转、选项卡切换、弹窗关闭它都够用了。

做网页原型时，怎么把静态版式变成能点击跳转的网页？

这个功能我琢磨了好一阵才搞明白，其实路径藏得有点深。先选中你要加链接的图片或按钮，在右侧属性面板里找到"交互"一栏，点击后面的"+"号。

在弹出的窗口里选"链接"，然后选择你要跳转的目标页面。如果你还没画那个页面，可以选"新建页面"，它会自动生成一个空白画布并帮你建好跳转关系。

把所有需要跳转的按钮都设好之后，点左上角的"演示"按钮，就进入可点击的预览模式了。这时候鼠标移到带链接的区域会变成小手图标，点击就能跳到对应页面，和真正的网页体验一模一样。

导出的话，在"文件"菜单里选择"导出"，然后选HTML格式。它会生成一个文件夹，里面有个index.html文件，双击就能在浏览器里跑起来。发给客户看或者拿手机扫二维码都行，不需要装任何插件。

有个小提示：如果导出的HTML里图片显示不出来，多半是画布里用了外部粘贴的位图，建议把图片都嵌入到软件里再导出。在图片上右键，选"设置图片格式"，把"链接"改成"嵌入"就好。

手头有一套UI稿，想快速改成可交互原型，有没有省力的做法？

当然有。你可以直接把UI稿图片拖进画布里，然后在图片上面用矩形、文字、按钮组件把热区画出来。这些覆盖的组件设为透明填充、无边框，只保留交互链接就行。

这样就不需要照着稿子重新画一遍界面了，一个页面大概五分钟就能做完热区设置。我一般会把线框图和UI稿放在同一画布的不同页里，方便对照检查跳转逻辑。

如果你拿到的UI稿是Sketch或PSD格式，需要先转成PNG或JPG再拖进来。亿图目前不支持直接打开PSD文件，这一点得注意。

另外，画布左侧的"页面"面板里可以拖动页面顺序，调整演示时的先后流程。也可以右键页面名称，选择"设置为起始页"，这样点演示的时候会从那一页开始。

内置模板和预制图形，能不能大幅度缩短界面搭建时间？

这个软件最让我惊喜的就是模板库，特别是"手机UI"分类下的那套iOS和Android规范模板。状态栏、导航栏、标签栏都是现成的，而且是按真实系统的尺寸比例画的，直接用就不会出现状态栏过高或者底部按钮错位的问题。

做后台管理系统的话，有"数据统计"模板，里面预设了折线图、柱状图、饼图的样式，还带表格和筛选器。把示例数据换成自己的，再微调一下颜色，一个数据看板就出来了。

通信设备类的路由器后台、光猫设置界面也有对应模板，做这类项目时特别省事。不用从零开始画天线图标和信号格，直接拖出来改改文字就行。

不过顺手归顺手，模板里的文字和图片都是占位的，你得记得全部替换掉。我有一次忘了换按钮文字，演示的时候客户指着"确定"问"确定什么？"，场面一度很尴尬。

还有一个实用的小功能：在"符号"库里可以把自己常用的组件组合存成新符号。比如我经常画搜索框，就把放大镜图标、输入框、搜索按钮组合起来存成"搜索框-带历史记录"，下次直接拖出来用，还能整体改颜色。

同一个项目里又要画流程图又要画原型，它能同时搞定吗？

它确实内置了流程图功能，可以从左侧的"流程图"分类里拖出开始/结束、判断、处理等形状。但说实话，和专业的流程图软件比还是简化了一些，适合画那种页面跳转的流程图或者简单的业务流转。

我一般会在原型前面加一页"信息架构图"，把客户要的频道、子页面用树状图列出来。确认好结构后再开始画具体页面，这样后面不容易返工。

如果你要画那种带泳道、需要复杂逻辑判断的跨部门流程图，还是建议用亿图图示或者Visio。术业有专攻，原型工具还是专注画界面比较合适。

实操：从空白画布到可演示的登录页面，完整走一遍

下面用一个登录页的实例，把从新建文件到演示输出的完整流程列出来，方便你对照着操作。

整个流程走下来不超过十五分钟。第一次用的话可能要多花点时间找组件图标的位置，多用几次就顺手了。

同类软件对比，哪个更适合你的原型需求？

运行亿图线框图绘制工具，电脑需要什么样的配置？

这款软件对硬件要求不算高，但如果你画到一半出现卡顿或者闪退，可以先看看是不是配置不够。下面是我整理的实测参考数据，不一定代表最低极限，但照着配基本能流畅运行。

如果你用的是轻薄本或者办公本，低画质下跑一般的中小型项目没问题。但要是打开那种包含几十个页面、大量高清位图的项目文件，内存占用会明显上升，建议至少8GB内存。

常用快捷键与操作技巧

快捷键能提升不少效率，特别是当你连续画了几十个页面之后。这里整理了一些高频操作的快捷键，仅供参考。

另外，在画布空白处双击可以快速新建一个文本框，不需要专门去左侧找文字工具。这个隐藏技巧知道的人不多，但真的很好用。

关于亿图线框图绘制工具的常见疑问解答

问：我电脑配置比较老，运行亿图线框图绘制工具会卡吗？

老电脑的话，打开软件和新建文件的速度可能稍微慢一点，但正常绘制操作基本流畅。我试过一台2015年的i3笔记本，4GB内存，画小型的手机页面原型没有问题，只是导出HTML时等了十几秒。建议关闭其他占内存的软件再运行。

问：亿图线框图绘制工具导出的HTML文件，可以直接发给客户演示吗？

可以。导出的HTML文件是一个完整的网页包，包含所有页面和交互脚本。把整个文件夹压缩后发送给客户，对方解压后双击index.html就能在浏览器里查看。不过要注意，如果客户用IE老版本浏览器，可能部分效果显示不正常，建议用Chrome或Edge打开。

问：软件提示内存不足，怎么处理？

我遇到过两次，都是因为打开了多个大型项目文件。建议每次只开一个项目，如果确实需要参考另一个文件，可以导出为图片查看。另外在"视图"菜单里把画布缩放比例调低一些，也能减少内存占用。如果还不行，可能是你的电脑物理内存确实不够，升级内存是根本解决办法。

问：能不能导入Visio绘制的图形？

可以通过复制粘贴的方式把Visio里的图形粘过来，但格式可能会丢失一部分，比如某些连接点的属性。如果只是要静态的形状，一般没问题。要是Visio文件里含有公式或数据链接，那大概率是不能完美移植的。

问：画原型的时候，总觉得吸附功能很烦人，怎么关掉？

在"视图"菜单里找到"对齐"选项，取消勾选"对齐网格"和"对齐参考线"就行。我一般画到后期微调间距的时候会关掉吸附，前期摆放组件时还是开着方便。

问：为什么我导出的PDF里，有些按钮的阴影效果丢失了？

这是软件渲染引擎的兼容性问题。PDF格式对透明度和阴影的支持有限，尤其是你用了外发光或投影效果时。建议导出前把这些效果暂时关闭，或者改用导出图片的方式给客户看详细效果。