前面慧都控件網(wǎng)已經(jīng)跟大家介紹了很多種類的UI工具包，有iOS的，有CSS的，有基于Bootstrap框架的，還有扁平化和復古風格的。相信不少有收藏癖的朋友已經(jīng)在電腦上囤積了很多UI工具包，卻從來沒有親身實踐過。那么這些UI工具包到底如何使用呢？下面就為你揭曉答案！

首先給小伙伴們簡單介紹一下這個UI工具包。UI kit，即”User Interface Kit”，意為”用戶界面工具包”。這是一個由用戶界面元素所組成的PSD文件。內(nèi)含花樣繁多的顏色、圖案和各種被用在設(shè)計中的asl文件。我們可以根據(jù)自己的需要使用其中的一些元素。通常情況下，高端的UI工具包內(nèi)含的元素比免費的UI工具包內(nèi)含的元素要多得多。

使用UI工具包不僅可以改善工作流程，更能大大節(jié)省時間省去思考如何設(shè)計的煩惱。這將更便于我們集中精力于我們的網(wǎng)站設(shè)計的功能實現(xiàn)以及可用性測試。

一、選擇一個UI工具包

網(wǎng)上有大量的UI工具包，不過此次例子我們使用Flat UI，這款UI kit擁有眾多好用的設(shè)計元素。

下面是近期慧都控件網(wǎng)推薦的一些UI工具包：

• App開發(fā)者福利：iOS7圖標模板和UI工具包匯總
• 推薦10款最新的免費用戶界面工具包（附下載)
• 直接拿來用：13款免費的CSS UI工具包
• 10個超酷炫Bootstrap HTML & CSS UI工具包
• 12款免費且精美的Web UI工具包（上）
• 12款免費且精美的Web UI工具包（下）
• 免費下載！22個最新的HTML&CSS3 UI工具包
• 驚艷！10個復古風格的UI工具包(PSD)
• 超贊！32款扁平化Photoshop PSD UI工具包（上）
• 超贊！32款扁平化Photoshop PSD UI工具包（下）

打開UI工具包PSD

雙擊打開flat-ui-free.psd，出現(xiàn)以下面板。

解釋一下圖層面板的三個編組內(nèi)容（點編組左邊的眼鏡可查看具體編組內(nèi)容）：

• Basic Elements –一系列零碎的UI元素集成
• Samples –實際應(yīng)用程序設(shè)計UI元素
• Background—背景

二、使用UI工具包設(shè)計元素

使用移動工具點擊”自動選擇-組”，然后打開文件夾Basic Elements。

接下來選中我們需要的元素。比如我們選擇menu, share, radio buttons和checkboxes，把它們移到新的ps文件里面。

三、調(diào)整UI工具包元素

選擇直接選擇工具（Direct Selection Tool ）

直接選取我們要調(diào)整的元素就可以開始調(diào)整啦！

四、改變UI元素的顏色

選中需要改變顏色的元素，雙擊該圖層的形狀圖層直接就可以換顏色啦！比如這里的菜單背景我們可以雙擊body圖層改變顏色為#00acc0。

五、矢量圖標

使用一些圖標會給網(wǎng)站帶來生氣。比如做一些小指引。我們現(xiàn)在看到Vector icons一欄，新建一個ps文件，使用圓角矩形工具（ Rounded Rectangle Tool ）繪制一個372*372px的方框。將UI工具包里面的Vector icons一欄下的打鉤圖標拖過來放在中央偏上，然后繼續(xù)使用圓角矩形工具繪制一個綠色的指示按鈕。這樣子我們就使用了矢量圖標。

六、導出UI元素

做完修改接下來就是導出了。選中需要導出的元素本身（記住不是編組而是元素本身的圖層），拖到新的ps文件里，讓文件的背景為透明，然后執(zhí)行”圖像—裁切”，按照下圖打鉤，裁切以后ctrl+shift+alt+s存儲為web所用格式，右上角勾選png-24（質(zhì)量比較高），就可以導出了。下面是以paginator為例。

結(jié)語

UI工具包對設(shè)計師和開發(fā)人員極其有用，如果你是一個自由職業(yè)者，使用UI工具包將節(jié)省你很多時間，因為你不需要花更多的時間來思考設(shè)計。可以來尋找更多的UI工具包。嘗試著用它們來豐富你的設(shè)計，然后用編碼實現(xiàn)吧。