来源：互联网
来自51CTO的文章，本文将介绍一些UI界面与设计使用的元素、软件和网站。内容很丰富，适合用户体验设计师、界面设计师、产品设计师、JS前段开发、手机产品设计以及iPad和平板电脑产品设计等使用。
Lumzy
官方地址：http://www.lumzy.com/
Lumzy是一个网站应用和原型界面制作工具。使用Lumzy，您可以轻松创建UI模型并即时发送到客户电脑中。 Lumzy还具有团队协作编辑工具。
![wps_clip_image-28742[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image2874231.jpg "wps_clip_image-28742[3][1]")
Mockingbird
官方地址：https://gomockingbird.com/
Mockingbird（中文名：百舌鸟）是一个在线工具，它使您轻松地创建UI界面模型，预览UI，并可以共享你的版面编排效果图。
![wps_clip_image-6961[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image696131.jpg "wps_clip_image-6961[3][1]")
The Pencil Project
官方地址：http://pencil.evolus.vn/en-US/Home.aspx
为设计图表和用户界面图形原型开发的一个自由和开源工具。
![wps_clip_image-18442[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1844231.jpg "wps_clip_image-18442[3][1]")
Dojo
官方地址：http://dojotoolkit.org/
Dojo提供了强大的性能并节省您的时间。这是适合经验丰富前端开发者的JS开发工具包。
![wps_clip_image-10342[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1034231.jpg "wps_clip_image-10342[3][1]")
Mocklinkr
官方地址：http://www.mocklinkr.com/
自定义排版托管工具Mocklinkr，让你不用再担心没有漂亮版面
![wps_clip_image-17292[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1729231.jpg "wps_clip_image-17292[3][1]")
MockFlow
官方地址：http://www.mockflow.com/signup/
MockFlow是一个在线工具，用户界面设计和协作版面编排工具。
![wps_clip_image-10909[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1090931.jpg "wps_clip_image-10909[3][1]")
Serena Prototype Composer
官方地址：http://www.serena.com/products/prototype-composer/index.html
Serena Prototype Composer是制作流程图，模拟程序流程和用户界面设计程序。
![wps_clip_image-17488[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1748831.jpg "wps_clip_image-17488[3][1]")
Cacoo
官方地址：http://cacoo.com/
Cocoo是一个用户友好的在线绘图工具，允许你创建一个如网站地图，线框，UML和网络图图等。 Cacoo可以免费使用。
![wps_clip_image-24884[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image2488431.jpg "wps_clip_image-24884[3][1]")
DENIM
官方地址：http://dub.washington.edu:2007/denim/
一个早期非正式的网站和用户界面设计工具
![wps_clip_image-2175[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image217531.jpg "wps_clip_image-2175[3][1]")
Hot Gloo
官方地址：http://www.hotgloo.com/
网上应用线框
![wps_clip_image-9454[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image945431.jpg "wps_clip_image-9454[3][1]")
User Interface Design Framework
官方地址：http://www.webalys.com/design-interface-application-framework.php
一个免费提供网页设计师使用的用户界面设计工具。
![wps_clip_image-13342[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1334231.jpg "wps_clip_image-13342[3][1]")
Pattern Tap
官方地址：http://patterntap.com/
可以寻找一些设计资源与模式等。
![wps_clip_image-18111[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1811131.jpg "wps_clip_image-18111[3][1]")
User Interface Design Patterns
官方地址：http://ui-patterns.com/
提供一些热门的用户UI界面设计模式参考图，分类很详细，如果设计网站或UI界面可以上去找一些资源，很不错。
![wps_clip_image-17721[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1772131.jpg "wps_clip_image-17721[3][1]")
Patternry
官方地址：http://patternry.com/
Patternry是用户界面设计模式库的目的是帮助解决常见的接口设计问题。
![wps_clip_image-484[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image48431.jpg "wps_clip_image-484[3][1]")
Mephobox
官方地址：http://box.mepholio.com/
UI设计界面资源欣赏参考网站。
![wps_clip_image-21002[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image2100231.jpg "wps_clip_image-21002[3][1]")
Android Asset Studio
官方地址：http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html
可以在线生成图表，只需要输入参数即可
![wps_clip_image-984[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image98431.jpg "wps_clip_image-984[3][1]")
Mobility
官方地址：http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/
移动用户界面设计使用，可以输入参数进行测试，很方便
![wps_clip_image-10653[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1065331.jpg "wps_clip_image-10653[3][1]")
Android UI Elements Set
官方地址：http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/
可以自由设定Android操作系统的用户界面元素。
![wps_clip_image-24812[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image2481231.jpg "wps_clip_image-24812[3][1]")
OSX Leopard GUI Set
官方地址：http://www.tutorialshock.com/freebie/mac-osx-leopard-gui-set/
该软件包含一些常用的Photoshop原文件和PNG文件，这些元素都是用来设计GUI界面的素材，通过该软件你可以快速制作出一些出色的界面
![wps_clip_image-29335[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image2933531.jpg "wps_clip_image-29335[3][1]")
ALL In One Web Elements Kit
官方地址：http://bestblogbox.com/freebies/all-in-one-web-elements-kit/
网页布局元素大集合,PSD文件。
![wps_clip_image-17025[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image1702531.jpg "wps_clip_image-17025[3][1]")
iPad GUI Set
官方地址：http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/
iPad平板电脑上设计布局用的元素集合。
![wps_clip_image-244[3][1]](http://www.iigrowing.cn/wp-content/uploads/21UI_D4B0/wps_clip_image24431.jpg "wps_clip_image-244[3][1]")
续篇：19个免费的UI界面设计工具及资源
