我們剛剛介紹了移動設(shè)計(jì)初探：觸屏網(wǎng)頁設(shè)計(jì)。本文將介紹一些UI界面與設(shè)計(jì)使用的元素、軟件和網(wǎng)站。內(nèi)容很豐富，適合用戶體驗(yàn)設(shè)計(jì)師、界面設(shè)計(jì)師、產(chǎn)品設(shè)計(jì)師、JS前段開發(fā)、手機(jī)產(chǎn)品設(shè)計(jì)以及iPad和平板電腦產(chǎn)品設(shè)計(jì)等使用。

Lumzy

官方地址：http://www.lumzy.com/

Lumzy是一個網(wǎng)站應(yīng)用和原型界面制作工具。使用Lumzy，您可以輕松創(chuàng)建UI模型并即時發(fā)送到客戶電腦中。 Lumzy還具有團(tuán)隊(duì)協(xié)作編輯工具。 

#p#

Mockingbird

官方地址：https://gomockingbird.com/

Mockingbird（中文名：百舌鳥）是一個在線工具，它使您輕松地創(chuàng)建UI界面模型，預(yù)覽UI，并可以共享你的版面編排效果圖。 

#p#

The Pencil Project

官方地址：http://pencil.evolus.vn/en-US/Home.aspx

為設(shè)計(jì)圖表和用戶界面圖形原型開發(fā)的一個自由和開源工具。 

#p#

Dojo

官方地址：http://dojotoolkit.org/

Dojo提供了強(qiáng)大的性能并節(jié)省您的時間。這是適合經(jīng)驗(yàn)豐富前端開發(fā)者的JS開發(fā)工具包。 

#p#

Mocklinkr

官方地址：http://www.mocklinkr.com/

自定義排版托管工具M(jìn)ocklinkr，讓你不用再擔(dān)心沒有漂亮版面

#p#

MockFlow

官方地址：http://www.mockflow.com/signup/

MockFlow是一個在線工具，用戶界面設(shè)計(jì)和協(xié)作版面編排工具。 

#p#

Serena Prototype Composer

官方地址：http://www.serena.com/products/prototype-composer/index.html

Serena Prototype Composer是制作流程圖，模擬程序流程和用戶界面設(shè)計(jì)程序。 

#p#

Cacoo

官方地址：http://cacoo.com/

Cocoo是一個用戶友好的在線繪圖工具，允許你創(chuàng)建一個如網(wǎng)站地圖，線框，UML和網(wǎng)絡(luò)圖圖等。 Cacoo可以免費(fèi)使用。 

#p#

DENIM

官方地址：http://dub.washington.edu:2007/denim/

一個早期非正式的網(wǎng)站和用戶界面設(shè)計(jì)工具 

#p#

Hot Gloo

官方地址：http://www.hotgloo.com/

網(wǎng)上應(yīng)用線框 

#p#

User Interface Design Framework

官方地址：http://www.webalys.com/design-interface-application-framework.php

一個免費(fèi)提供網(wǎng)頁設(shè)計(jì)師使用的用戶界面設(shè)計(jì)工具。 

#p#

Pattern Tap

官方地址：http://patterntap.com/

可以尋找一些設(shè)計(jì)資源與模式等。 

#p#

User Interface Design Patterns

官方地址：http://ui-patterns.com/

提供一些熱門的用戶UI界面設(shè)計(jì)模式參考圖，分類很詳細(xì)，如果設(shè)計(jì)網(wǎng)站或UI界面可以上去找一些資源，很不錯。 

#p#

Patternry

官方地址：http://patternry.com/

Patternry是用戶界面設(shè)計(jì)模式庫的目的是幫助解決常見的接口設(shè)計(jì)問題。

#p#

Mephobox

官方地址：http://box.mepholio.com/

UI設(shè)計(jì)界面資源欣賞參考網(wǎng)站。 

#p#

Android Asset Studio

官方地址：http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html

可以在線生成圖表，只需要輸入?yún)?shù)即可 

#p#

Mobility

官方地址：http://www.fullcreative.com/2010/10/mobility-a-free-set-of-mobile-ui-design-elements/

移動用戶界面設(shè)計(jì)使用，可以輸入?yún)?shù)進(jìn)行測試，很方便 

#p#

Android UI Elements Set

官方地址：http://www.webdesignshock.com/freebies/free-photoshop-android-interface-gui/

可以自由設(shè)定Android操作系統(tǒng)的用戶界面元素。 

#p#

OSX Leopard GUI Set

官方地址：http://www.tutorialshock.com/freebie/mac-osx-leopard-gui-set/

該軟件包含一些常用的Photoshop原文件和PNG文件，這些元素都是用來設(shè)計(jì)GUI界面的素材，通過該軟件你可以快速制作出一些出色的界面 

#p#

ALL In One Web Elements Kit

官方地址：http://bestblogbox.com/freebies/all-in-one-web-elements-kit/

網(wǎng)頁布局元素大集合,PSD文件。 

#p#

iPad GUI Set

官方地址：http://www.teehanlax.com/blog/2010/02/01/ipad-gui-psd/

iPad平板電腦上設(shè)計(jì)布局用的元素集合。 

【編輯推薦】

1. 針對碎片時間進(jìn)行移動產(chǎn)品設(shè)計(jì)
2. 支付寶產(chǎn)品經(jīng)理談iPad上的設(shè)計(jì)工具
3. 移動終端設(shè)備游戲設(shè)計(jì)初體驗(yàn)
4. 移動設(shè)備客戶端交互適配設(shè)計(jì)
5. iOS操作系統(tǒng)多任務(wù)設(shè)計(jì)的繁與簡