10 个用于设计网页线框图的优秀工具

   <p>线框图是一个可视化的导图，可以用其来诠释出一个网站的龙骨，同时也可以称其为一个页面的示意图或屏幕的蓝图。线框图非常容易创建和进行有必要的修改。帮助设计师以低成本且高效率来进行迭代设计。</p>    <p>为了对线框图进行更好的设计与修改，我们会选择一些优秀的工具，当然少不了的就是Axure、MockFlow以及Balsamiq Mockups等。</p>    <p>在设计初期，你可以在纸上或白板上绘制基本的草图，来帮助完成一些用户界面和任务流程概念。这些类型的线框图可以很好满足小型的项目，使你可以直接 开始进入到开发的阶段。但是，对于大多数的项目，我们就必须借助一些设计软件的帮助，如Adobe Illustrator，Visio或 OmniGraffle。</p>    <p>这些线框图具有非常高的价值，因为它们便于修改，也可以使设计团队更容易的在项目中进行沟通和管理。</p>    <h2>一个线框图成品所显示的网页布局样板</h2>    <p><img class="size-full wp-image-147813 aligncenter" title="The-wireframe-diagram-illustrates-the-layout-of-a-web-page" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/7d662e7a4ee78b76e5616183a9a5b647.jpg" width="580" height="322" /></p>    <p>为了做出一个优秀的线框图和网页草稿，我们可以考虑从以下10个优秀的工具中做出选择，帮助你进行网页页面创作、线框图草图设计：</p>    <h2>Axure</h2>    <p><img class="size-full wp-image-147816 aligncenter" title="Axure" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/b3388f18afb26228ad37436687d0045d.jpg" width="540" height="378" /></p>    <p>Axure是一款非常适合设计师的工具，它能够创建线框图、设计流程图、进行交互设计、自动输出网站原型、自动输出word格式规格文件。拥有现成 的部件包括按钮，表单域，形状和动态元素，您可以选择在一个自己熟悉的环境下进行编辑，甚至你可以创建自己的自定义widget库。</p>    <p>感兴趣的童鞋可以试着学习使用一下</p>    <p>Windows版：<a href="/misc/goto?guid=4958345176606763966">http://axure.cachefly.net/AxureRP-Pro-Setup.exe</a></p>    <p>MAC版：<a href="/misc/goto?guid=4958345177397963232" target="_blank">http://axure.cachefly.net/AxureRP-Pro-Setup.dmg</a></p>    <p>Axure6.5汉化语言包下载地址：<a href="/misc/goto?guid=4958345178194963399">http://www.axure.us/283/</a></p>    <h2><a href="/misc/goto?guid=4958323951961631244">MockFlow</a></h2>    <p><img class="aligncenter" title="MockFlow" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/989704aaa90e676f41ef87ec296b474c.jpg" width="540" height="363" /></p>    <p>MockFlow是一款很优秀的工具，类似于 Axure ，不过它是一款完全基于Web浏览视窗的产品原型制作工具，可以帮助你对自己的软件用户界面以及在网页重构时进行设计和实时协作。它配备了大量的内置组件 和图标，如按钮（Button）、图片（Image）、文字面板（Text Panel）、下拉式菜单（Droplist）、进度条（ProcessBar）等等。</p>    <h2>Balsamiq Mockups </h2>    <p><img class="size-full wp-image-147817 aligncenter" title="Balsamiq-Mockups" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/a1b832dd21c596910468e06eb9d695f7.jpg" width="540" height="403" /></p>    <p>使用Balsamiq Mockups就像是进行数码绘画，但有略有不同。你可以轻易的进行调整和重新编排，最终的结果就像是一幅赏心悦目的涂鸦，除了真实的纸笔，目测它是最方 便的工具了。软件带有75个预置控制可供选择，你可以用它设计出一个超级简单的对话框。也可以用它设计出任何一个成熟的应用程序，无论是一个简单的网站， 还是一个富互联网应用都可以用它来完成。</p>    <h2 a="" pencil project<=""></h2>    <p><img class="size-full wp-image-147818 aligncenter" title="Pencil-Project" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/c176585cb3e9de8f555de6ff8cb505c6.jpg" width="540" height="302" /></p>    <p>作为一款免费的Firefox插件，这款工具具备一些关键的功能，如内置的模板，支持多页文件，以及多个导出选项。虽然简单但是非常实用，适合绘制一些简单的界面（这当然不包括那些爱好用wrod绘制高达的软件使用者）。</p>    <h2><a href="/misc/goto?guid=4958323954332241363">HotGloo</a></h2>    <p><img class="size-full wp-image-147820 aligncenter" title="HotGloo" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/7f9b8c1e1bd1fca46380433882c00d87.jpg" width="540" height="303" /></p>    <p>这是一个完全基于Web的设计工具，有很多实用的功能，包括让各个项目可以进行拖放以及便于对整个设计进行规块化管理。同时它也支持实时协作。</p>    <h2><a href="/misc/goto?guid=4958522889081166365">Mockingbird</a></h2>    <p><img class="size-full wp-image-147821 aligncenter" title="Mockingbird" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/306f8b1d69e29afde660c31483cde728.jpg" width="540" height="323" /></p>    <p>这个工具也是基于Web，可以把多个版面编排在一起，以帮助你连接多个实体模型。（在这里提一下，开发这个工具的是一男一女两个印度人）</p>    <h2><a href="/misc/goto?guid=4958323090055339163">Cacoo</a></h2>    <p><img class="size-full wp-image-147823 aligncenter" title="ProtoShare" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/8208740344c89a8120f178dcab527366.jpg" width="540" height="351" /></p>    <p>这是一个很酷的在线绘图工具，可让你绘制不同类型的图表，如网站地图，线框，UML图和网络图。</p>    <h2><a href="/misc/goto?guid=4958522889248493987">ProtoShare</a></h2>    <p><img class="size-full wp-image-147824 aligncenter" title="ProtoShare" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/8208740344c89a8120f178dcab527366.jpg" width="540" height="351" /></p>    <p>ProtoShare是一个十分便捷的在线原型制作工具，侧重于团队协作。团队成员可以通过这个工具对工作进行审查，并及时提供反馈，对线框图或内容进行建议.</p>    <h2><a href="/misc/goto?guid=4958522889364091079">iPlotz</a></h2>    <p><img class="size-full wp-image-147825 aligncenter" title="iPlotz" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/b88189e0685b93d8ec9e058144788c6d.jpg" width="540" height="341" /></p>    <p>iPlotz是一个很棒的工具，可以让你快速允许您为网站和应用软件快速的创建可点击的原型，导航，页面排版和线框图。</p>    <h2><a href="/misc/goto?guid=4958522889480527852" target="_blank">OmniGraffle</a></h2>    <p><img class="size-full wp-image-147828 aligncenter" title="OmniGraffle" alt="10 个用于设计网页线框图的优秀工具" src="https://simg.open-open.com/show/aac632dbf46dd6403cfa2f7592ff3d18.jpg" width="540" height="290" /></p>    <p>这是一个Mac OS的应用程序，拥有的各种工具，可以让你建造出优秀线框模型、绘制图表、流程图、组织结构图以及插图。如刚才所言，我们需要注意，OmniGraffle只支持苹果的设备，在其<a href="/misc/goto?guid=4958522889480527852" target="_blank">主页页面</a>就有提供下载。</p>    <blockquote>     <p>编后语：在国内，未亲自试用过的软件，其下载链接不敢随便提供。如果针对这些软件，大家有更好的资源，也希望大家可以提供一些，互相交流。</p>    </blockquote>    <p>Via：<a href="/misc/goto?guid=4958522889615615070">smashinghub</a></p> 本文转载自: 雷锋网    <a href="/misc/goto?guid=4958343043986323584" rel="nofollow" target="_blank">http://www.leiphone.com/</a>