【轉】21個免費的UI界面設計工具、資源及網站

本文將介紹21個免費的UI界面設計工具、資源及網站，若是你在作用戶體驗設計、界面設計、產品設計、JS前段開發、手機產品設計以及iPad和平板電腦產品設計，不妨來看看。 AD： 2013雲計算架構師峯會超低價搶票中

咱們剛剛介紹了移動設計初探：觸屏網頁設計。本文將介紹一些UI界面與設計使用的元素、軟件和網站。內容很豐富，適合用戶體驗設計師、界面設計師、產品設計師、JS前段開發、手機產品設計以及iPad和平板電腦產品設計等使用。

內容導航

第 1 頁：原型界面製做工具Lumzy	第 2 頁：在線工具Mockingbird
第 3 頁：開源UI工具The Pencil Project	第 4 頁：JS開發工具包Dojo
第 5 頁：排版託管Mocklinkr	第 6 頁：在線排版工具MockFlow
第 7 頁：Serena Prototype Composer	第 8 頁：在線繪圖工具Cacoo
第 9 頁：UI工具DENIM	第 10 頁：網上應用線框Hot Gloo
第 11 頁：User Interface Design Framework	第 12 頁：設計資源網站Pattern Tap
第 13 頁：User Interface Design Patterns	第 14 頁：UI設計模式庫Patternry
第 15 頁：UI參考網站Mephobox	第 16 頁：Android Asset Studio
第 17 頁：移動UI設計工具Mobility	第 18 頁：Android UI Elements Set
第 19 頁：OSX Leopard GUI Set	第 20 頁：ALL In One Web Elements Kit
第 21 頁：iPad GUI Set

第 1 頁：原型界面製做工具Lumzy

Lumzy

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

Lumzy是一個網站應用和原型界面製做工具。使用Lumzy，您能夠輕鬆建立UI模型並即時發送到客戶電腦中。 Lumzy還具備團隊協做編輯工具。

第 2 頁：在線工具Mockingbird

Mockingbird

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

Mockingbird（中文名：百舌鳥）是一個在線工具，它使您輕鬆地建立UI界面模型，預覽UI，並能夠共享你的版面編排效果圖。

第 3 頁：開源UI工具The Pencil Project

The Pencil Project

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

爲設計圖表和用戶界面圖形原型開發的一個自由和開源工具。

第 4 頁：JS開發工具包Dojo

Dojo

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

Dojo提供了強大的性能並節省您的時間。這是適合經驗豐富前端開發者的JS開發工具包。

第 5 頁：排版託管Mocklinkr

Mocklinkr

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

自定義排版託管工具Mocklinkr，讓你不用再擔憂沒有漂亮版面

第 6 頁：在線排版工具MockFlow

MockFlow

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

MockFlow是一個在線工具，用戶界面設計和協做版面編排工具。

第 7 頁：Serena Prototype Composer

Serena Prototype Composer

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

Serena Prototype Composer是製做流程圖，模擬程序流程和用戶界面設計程序。

第 8 頁：在線繪圖工具Cacoo

Cacoo

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

Cocoo是一個用戶友好的在線繪圖工具，容許你建立一個如網站地圖，線框，UML和網絡圖圖等。 Cacoo能夠無償使用。

第 9 頁：UI工具DENIM

DENIM

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

一個早期非正式的網站和用戶界面設計工具

第 10 頁：網上應用線框Hot Gloo

 

Hot Gloo

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

網上應用線框

第 11 頁：User Interface Design Framework

User Interface Design Framework

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

一個免費提供網頁設計師使用的用戶界面設計工具。

 第 12 頁：設計資源網站Pattern Tap

Pattern Tap

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

能夠尋找一些設計資源與模式等。

第 13 頁：User Interface Design Patterns

User Interface Design Patterns

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

提供一些熱門的用戶UI界面設計模式參考圖，分類很詳細，若是設計網站或UI界面能夠上去找一些資源，很不錯。

第 14 頁：UI設計模式庫Patternry

Patternry

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

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

第 15 頁：UI參考網站Mephobox

Mephobox

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

UI設計界面資源欣賞參考網站。

第 16 頁：Android Asset Studio

Android Asset Studio

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

能夠在線生成圖表，只須要輸入參數便可

第 17 頁：移動UI設計工具Mobility

Mobility

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

移動用戶界面設計使用，能夠輸入參數進行測試，很方便

第 18 頁：Android UI Elements Set

Android UI Elements Set

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

能夠自由設定Android操做系統的用戶界面元素。

第 19 頁：OSX Leopard GUI Set

OSX Leopard GUI Set

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

該軟件包含一些經常使用的Photoshop原文件和PNG文件，這些元素都是用來設計GUI界面的素材，經過該軟件你能夠快速製做出一些出色的界面

第 20 頁：ALL In One Web Elements Kit

ALL In One Web Elements Kit

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

網頁佈局元素大集合,PSD文件。

第 21 頁：iPad GUI Set

iPad GUI Set

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

iPad平板電腦上設計佈局用的元素集合。

 

【編輯推薦】

1. 針對碎片時間進行移動產品設計
2. 支付寶產品經理談iPad上的設計工具
3. 移動終端設備遊戲設計初體驗
4. 移動設備客戶端交互適配設計
5. iOS操做系統多任務設計的繁與簡

原文連接：http://mobile.51cto.com/design-250037.htm