20 款免费的线框图和原型绘制的应用

     <p>当人们全身心的投入到某个活动中时，他会对其他不相关的物体视而不见，我们把这种状态叫做“流”（Flow）。交互设计的过程，无非是把用户的使用 流或者工作流表达出来，方便研发团队理解。 产品设计师对于wireframe应该非常熟悉不过，无论项目大小，人员多少，都离不开交互框架的绘制，也就是我们说的wireframe design。</p>    <p>Wireframe是整合在结构层的全部三种要素的方法：通过安排和选择界面元素来整合界面设计；通过识别和定义核心导航系统来整合导航设计； 通过放置和排列信息组成 部分的优先级来整合信息设计。通过把这三者放在一起，wireframe可以确定一个建立在基本概念结构上的架构，同时指出了视觉设计应该前进的方向。</p>    <h3>Justinmind – 用于创建网站交互框图</h3>    <p><a href="/misc/goto?guid=4958323947078914192" target="_blank"><img class="aligncenter size-full wp-image-74851" title="0" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/d3fdd066822739bc18a7a6f15d674d64.jpg" width="600" height="250" /></a></p>    <h3>iPhone Mockup</h3>    <p><a href="/misc/goto?guid=4958323947976843482" target="_blank"><img class="aligncenter size-full wp-image-74852" title="1" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/6df00ff5757a6e9502693215629f302c.jpg" width="600" height="250" /></a></p>    <h3>Lumzy</h3>    <p><a href="/misc/goto?guid=4958323948774573390" target="_blank"><img class="aligncenter size-full wp-image-74853" title="2" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/e95db535e0d42b828cfe21a820e877c6.jpg" width="600" height="250" /></a></p>    <h3>Cacoo – 创建在线实时的协作系统的框图</h3>    <p><a href="/misc/goto?guid=4958323949577545255" target="_blank"><img class="aligncenter size-full wp-image-74854" title="3" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/ed2921febc7c02472148c73ec93fd5fe.jpg" width="600" height="250" /></a></p>    <h3>fluidIA</h3>    <p><a href="/misc/goto?guid=4958323950376044229" target="_blank"><img class="aligncenter size-full wp-image-74855" title="4" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/5493e2234b82fba67f81a5e49328a07e.jpg" width="600" height="250" /></a></p>    <h3>Serena Prototype Composer</h3>    <p><a href="/misc/goto?guid=4958323951162329819" target="_blank"><img class="aligncenter size-full wp-image-74856" title="5" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/b659ac1a48a49468c9803a54ca1bfa98.jpg" width="600" height="250" /></a></p>    <h3>MockFlow – 在线框图工具</h3>    <p><a href="/misc/goto?guid=4958323951961631244" target="_blank"><img class="aligncenter size-full wp-image-74857" title="6" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/7d176a2c3b37a3540b6a455a6e36ea70.jpg" width="600" height="250" /></a></p>    <h3>Website wireframes – Mockingbird</h3>    <p><a href="/misc/goto?guid=4958323952743833718" target="_blank"><img class="aligncenter size-full wp-image-74858" title="7" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/c77c3d7aa4a5889c3c4548e2303b1537.jpg" width="600" height="250" /></a></p>    <h3>DUB – DENIM</h3>    <p><a href="/misc/goto?guid=4958323953540028880" target="_blank"><img class="aligncenter size-full wp-image-74859" title="8" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/a292fb0bcd33e91bb208c5833810140f.jpg" width="600" height="250" /></a></p>    <h3>Future of Wireframing – HotGloo</h3>    <p><a href="/misc/goto?guid=4958323954332241363" target="_blank"><img class="aligncenter size-full wp-image-74860" title="9" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/1126fa54ef26a3ea0963885ec028e1f9.jpg" width="600" height="250" /></a></p>    <h3>Pencil Project</h3>    <p><a href="/misc/goto?guid=4958323955136657823" target="_blank"><img class="aligncenter size-full wp-image-74861" title="10" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/686ab7d91415030740ee43586844b895.jpg" width="600" height="250" /></a></p>    <h3>Mockup Builder – Free online web prototyping tools, software</h3>    <p><a href="/misc/goto?guid=4958323955931981330" target="_blank"><img class="aligncenter size-full wp-image-74862" title="11" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/fcc40f873ec6cefd9d31ad419ff7039e.jpg" width="600" height="250" /></a></p>    <h3>Tiggr Mobile Apps Builder</h3>    <p><a href="/misc/goto?guid=4958323956733770017" target="_blank"><img class="aligncenter size-full wp-image-74863" title="12" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/c715e8322ed6fdda779efc9fa8819a11.jpg" width="600" height="250" /></a></p>    <h3>Frame Box</h3>    <p><a href="/misc/goto?guid=4958323957529726945" target="_blank"><img class="aligncenter size-full wp-image-74864" title="13" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/94d8ea290d9b0aea741e3d1ab17889ed.jpg" width="600" height="250" /></a></p>    <h3>Mockabilly – App for creating mockups on iPhone</h3>    <p><a href="/misc/goto?guid=4958323958328306034" target="_blank"><img class="aligncenter size-full wp-image-74865" title="14" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/99e3943992884ed002d90e1a6420c6e5.jpg" width="600" height="250" /></a></p>    <p>Online UI Mockups and Wireframes</p>    <p><a href="/misc/goto?guid=4958323959124462240" target="_blank"><img class="aligncenter size-full wp-image-74866" title="15" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/e25451a69a479c6f0bf12cffe90271b6.jpg" width="600" height="250" /></a></p>    <h3>Wireframes and Prototypes for Web and Mobile Applications</h3>    <p><a href="/misc/goto?guid=4958323959915220524" target="_blank"><img class="aligncenter size-full wp-image-74867" title="16" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/8a7625608fcf6987a55c36e6971e9ac2.jpg" width="600" height="250" /></a></p>    <h3>Balsamiq Mockups</h3>    <p><a href="/misc/goto?guid=4958323960712134250" target="_blank"><img class="aligncenter size-full wp-image-74868" title="17" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/12cf4fdbc4f6eb854d57a4c9c408c07b.jpg" width="600" height="250" /></a></p>    <h3>Online Diagram Software and Flowchart Software</h3>    <p><a href="/misc/goto?guid=4958188078629748017" target="_blank"><img class="aligncenter size-full wp-image-74869" title="18" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/ea280d7a5a35d73339f1b3cb534b6301.jpg" width="600" height="250" /></a></p>    <h3>A GUI Design Software for clickable Wireframes</h3>    <p><a href="/misc/goto?guid=4958323962250423533" target="_blank"><img class="aligncenter wp-image-74870" title="19" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/a6f2c32cc37468998b4b55346f1bacde.jpg" width="600" height="250" /></a></p>    <h3>GUI Design Studio</h3>    <p><a href="/misc/goto?guid=4958323963044682180" target="_blank"><img class="aligncenter size-full wp-image-74871" title="20" alt="20 款免费的线框图和原型绘制的应用" src="https://simg.open-open.com/show/feb6fbdc751769d3e104705b59eb2140.jpg" width="600" height="250" /></a></p>    <p><br /> Source: <a style="color:#003399;" href="/misc/goto?guid=4958323963846201767">http://designmodo.com/free-wireframe-mockup/</a></p>