不做囤貨黨！教你利用手上的UI資源（附免費UI工具包）

@sheisjane 如果您關注了優設哥的微博，肯定已經在上面下載了很多漂亮上檔次的UI工具了，大家都知道，UI工具包里有很多好看的資源：比如按鈕、滑塊、面包屑、播放器、表單，甚至是一個"贊！"的小圖標。但是這個UI工具包具體該怎么使用呢？總不能拿來藏著一直不用吧！

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

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

優設UI資源推薦：
超贊！35款新鮮、免費的優質扁平化UI素材
20個UI界面PSD下載（來自DRIBBBLE分享）
干貨！扁平風+IOS 7線型風界面組件PSD打包下載

So~關于這個UI工具包如何使用，咱們現在就來大干一場吧！

一、選擇一個UI工具包

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

點擊此處下載flat-UI.psd

下面是一點點工具包的推薦。

Flat UI Pro（專業的設計框架）

Flat AP UI Kit

Featherweight UI（一款免基于矢量和視網膜的免費UI工具包）

Flat Design UI Kit Vol. 1

FREE flat UI kit.

UI Kit

好了，開始吧~

打開UI工具包PSD

雙擊打開flat-ui-free.psd，出現以下面板。

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

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

二、使用UI工具包設計元素

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

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

三、調整UI工具包元素

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

直接選取我們要調整的元素就可以開始調整啦！

四、改變UI元素的顏色

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

五、矢量圖標

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

六、導出UI元素

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

結語

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

原文地址：1stwebdesigner
優設網翻譯：@sheisjane
本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

【優設網 原創文章 投稿郵箱：2650232288@qq.com】
 
================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量63萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：