當(dāng)開始進行新項目時,一般都會起步于線框圖。本文收集了大量的線框圖設(shè)計工具和套件。
交互設(shè)計師必備哦!
在線設(shè)計模板
Wirefy 以內(nèi)容優(yōu)先為原則的線框圖在線設(shè)計工具。允許你運用標(biāo)準(zhǔn)元素設(shè)計出響應(yīng)式線框圖。
![Wirefy in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Lumzy 網(wǎng)頁設(shè)計和界面設(shè)計的原型設(shè)計工具。
![Lumzy in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Mockup Builder 另一款原型設(shè)計工具
![Mockup Builder in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Mobilizer 選擇設(shè)備,輸入網(wǎng)址,立即呈現(xiàn)出設(shè)備中的效果圖。
![Mobilizer in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Proty 實現(xiàn)快速交互線框圖的好工具,可定制化
![Proty in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Solidify 可點擊的原型設(shè)計工具??沈炞C用戶流程。
![Solidify in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
f
rame Box
![in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/f<em></em>rame_Box.jpg)
Mockup Designer 使用本地存儲的模型工具
![Mockup Designer in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
hhhhold 只需把其中的urls丟入代碼中,能實現(xiàn)快速安全的工作。
![hhhhold in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
ProtoFluid 簡化了液態(tài)布局的開發(fā),能夠構(gòu)建出精準(zhǔn)、動態(tài)的視角。
![ProtoFluid in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Moqups 一款漂亮的HTML5 應(yīng)用,能夠創(chuàng)建線框圖、模型、UI概念、原型圖等等。
![Moqups in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Pencil Project 提供了開源的GUI原型工具,免費下載
![Pencil Project in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
免費線框圖套件 Wiref
rame / Blueprint Kit by Kai Husen
![Wiref<em></em>rame / Blueprint Kit by Kai Husen in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Wiref<em></em>rame_Blueprint_Kit_by_Kai_Husen.jpg)
Flat UI Kit by webdesignerdepot.com
![Flat UI Kit by webdesignerdepot.com in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
iPad Sketch Elements AI
![iPad Sketch Elements AI in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Free Windows 8 Wiref
rame Templates for PowerPoint
![Free Windows 8 Wiref<em></em>rame Templates for PowerPoint in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Free_Windows_8_Wiref<em></em>rame_Templates_for_PowerPoint.png)
Sketchapp Wiref
rame IOS by Sam | Sneek
![Sketchapp Wiref<em></em>rame IOS by Sam | Sneek in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Sketchapp_Wiref<em></em>rame_IOS_by_Sam_Sneek.jpg)
Android Jellybean Wiref
rame Kit
![Android Jellybean Wiref<em></em>rame Kit in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Android_Jellybean_Wiref<em></em>rame_Kit.jpg)
iOS 7 Wiref
rame Kit by Blake Perdue
![iOS 7 Wiref<em></em>rame Kit by Blake Perdue in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/iOS_7_Wiref<em></em>rame_Kit_by_Blake_Perdue.jpg)
Flatstrap Sketch Freebie by Raphael Guilleminot
![Flatstrap Sketch Freebie by Raphael Guilleminot in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Sketchkit
![Sketchkit in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Free Photoshop Wiref
rame Kit
![Free Photoshop Wiref<em></em>rame Kit in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Free_Photoshop_Wiref<em></em>rame_Kit.jpg)
Wiref
rame Sketch
![Wiref<em></em>rame Sketch in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Wiref<em></em>rame_Sketch.jpg)
Sketching the iPad
![Sketching the iPad in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Spoon
![Spoon in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
The Ultimate Wiref
rame UI Kit
![The Ultimate Wiref<em></em>rame UI Kit in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/The_Ultimate_Wiref<em></em>rame_UI_Kit.jpg)
iPhone Wiref
rame Kit by Trent Ottosen
![iPhone Wiref<em></em>rame Kit by Trent Ottosen in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/iPhone_Wiref<em></em>rame_Kit_by_Trent_Ottosen.png)
UI8 Wiref
rame Kit by Creativedash
![UI8 Wiref<em></em>rame Kit by Creativedash in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/UI8_Wiref<em></em>rame_Kit_by_Creativedash.gif)
Tiny Wiref
rame Kit by Alexander Zaytsev
![Tiny Wiref<em></em>rame Kit by Alexander Zaytsev in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Tiny_Wiref<em></em>rame_Kit_by_Alexander_Zaytsev.png)
Android Wiref
rame Kit by Rodrigo Soares
![Android Wiref<em></em>rame Kit by Rodrigo Soares in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Android_Wiref<em></em>rame_Kit_by_Rodrigo_Soares.png)
iPhone Blueprint Wiref
rame Kit by Jd Uchima
iPhone 5 Wiref
rames by George Treviranus
![iPhone 5 Wiref<em></em>rames by George Treviranus in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/iPhone_5_Wiref<em></em>rames_by_George_Treviranus.png)
Printable iPhone 5 + iOS 7 Icon Wiref
rame by Jim Lears
![Printable iPhone 5 + iOS 7 Icon Wiref<em></em>rame by Jim Lears in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Printable_iPhone_5_iOS_7_Icon_Wiref<em></em>rame_by_Jim_Lears.gif)
Illustrator iPhone 5 Wiref
rame Mockup by Justin Graham
![Illustrator iPhone 5 Wiref<em></em>rame Mockup by Justin Graham in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Illustrator_iPhone_5_Wiref<em></em>rame_Mockup_by_Justin_Graham.jpg)
Lessington by Anatasof Wirapraja
![Lessington by Anatasof Wirapraja in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Nexus 4 Wiref
rame for .Sketch by Rodrigo Soares
![Nexus 4 Wiref<em></em>rame for .Sketch by Rodrigo Soares in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Nexus_4_Wiref<em></em>rame_for_Sketch_by_Rodrigo_Soares.png)
iPhone 5 Wiref
rame Template by Tji Sousa
![iPhone 5 Wiref<em></em>rame Template by Tji Sousa in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/iPhone_5_Wiref<em></em>rame_Template_by_Tji_Sousa.gif)
Mobile cooking app wiref
rame by Geckotree
![Mobile cooking app wiref<em></em>rame by Geckotree in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Mobile_cooking_app_wiref<em></em>rame_by_Geckotree.png)
Iphone Wiref
rame by Ashton Snook
![Iphone Wiref<em></em>rame by Ashton Snook in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Iphone_Wiref<em></em>rame_by_Ashton_Snook.png)
Shapes for Sketch by Thierry Teyssier
![Shapes for Sketch by Thierry Teyssier in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Flat iPhone Wiref
rame Freebie by Gavin Anthony
![Flat iPhone Wiref<em></em>rame Freebie by Gavin Anthony in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Flat_iPhone_Wiref<em></em>rame_Freebie_by_Gavin_Anthony.png)
Wiref
rame by Daryl Ginn
![Wiref<em></em>rame by Daryl Ginn in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Wiref<em></em>rame_by_Daryl_Ginn.jpg)
Galaxy S3 Wiref
rame by Bilal
![Galaxy S3 Wiref<em></em>rame by Bilal in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Galaxy_S3_Wiref<em></em>rame_by_Bilal.png)
Nexus 4 wiref
rame by Oleg Stirbu
![Nexus 4 wiref<em></em>rame by Oleg Stirbu in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Nexus_4_wiref<em></em>rame_by_Oleg_Stirbu.jpg)
iPhone Blueprint by Stafie Anatolie
![iPhone Blueprint by Stafie Anatolie in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Device Wiref
rames by Chris Thompson
![Device Wiref<em></em>rames by Chris Thompson in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Device_Wiref<em></em>rames_by_Chris_Thompson.jpg)
Ipad Retina Grid by Bryan Leung
![Ipad Retina Grid by Bryan Leung in 50 Free Wiref<em></em>rame Kits and Web Apps](/skin/gaoya/images/lazy.gif)
Web / UX Design Wiref
rame Template PSD by Irfan Mir
![Web / UX Design Wiref<em></em>rame Template PSD by Irfan Mir in 50 Free Wiref<em></em>rame Kits and Web Apps](http://uisdc.qiniudn.com/wp-content/uploads/2013/11/Web_UX_Design<em></em>_Wiref<em></em>rame_Template_PSD_by_Irfan_Mir.png)
How To Wiref
rame An iPhone App In Sketch