@sheisjane ，在上面下載了很多漂亮上檔次的UI工具了，大家都知道，UI工具包里有很多好看的資源：比如按鈕、滑塊、面包屑、播放器、表單，甚至是一個(gè)”贊！”的小圖標(biāo)。但是這個(gè)UI工具包具體該怎么使用呢？總不能拿來藏著一直不用吧！ 首先給小伙伴們簡單介紹一下這個(gè)UI工具包。UI kit，即”User Interface Kit”，意為”用戶界面工具包”。這是一個(gè)由用戶界面元素所組成的PSD文件。內(nèi)含花樣繁多的顏色、圖案和各種被用在設(shè)計(jì)中的asl文件。我們可以根據(jù)自己的需要使用其中的一些元素。通常情況下，高端的UI工具包內(nèi)含的元素比免費(fèi)的UI工具包內(nèi)含的元素要多得多。 使用UI工具包不僅可以改善工作流程，更能大大節(jié)省時(shí)間省去思考如何設(shè)計(jì)的煩惱。這將更便于我們集中精力于我們的網(wǎng)站設(shè)計(jì)的功能實(shí)現(xiàn)以及可用性測試。 So~關(guān)于這個(gè)UI工具包如何使用，咱們現(xiàn)在就來大干一場吧！一、選擇一個(gè)UI工具包 網(wǎng)上有大量的UI工具包，不過此次例子我們使用Flat UI，這款UI kit擁有眾多好用的設(shè)計(jì)元素。
下面是一點(diǎn)點(diǎn)工具包的推薦。 Flat UI Pro（專業(yè)的設(shè)計(jì)框架）
Flat AP UI Kit Featherweight UI（一款免基于矢量和視網(wǎng)膜的免費(fèi)UI工具包） Flat Design UI Kit Vol. 1 FREE flat UI kit. UI Kit 好了，開始吧~ 打開UI工具包PSD 雙擊打開flat-ui-free.psd，出現(xiàn)以下面板。 解釋一下圖層面板的三個(gè)編組內(nèi)容（點(diǎn)編組左邊的眼鏡可查看具體編組內(nèi)容）：
- Basic Elements –一系列零碎的UI元素集成
- Samples –實(shí)際應(yīng)用程序設(shè)計(jì)UI元素
- Background—背景
二、使用UI工具包設(shè)計(jì)元素 使用移動(dòng)工具點(diǎn)擊”自動(dòng)選擇-組”，然后打開文件夾Basic Elements。
接下來選中我們需要的元素。比如我們選擇menu, share, radio buttons和checkboxes，把它們移到新的ps文件里面。 三、調(diào)整UI工具包元素 選擇直接選擇工具（Direct Selection Tool ） 直接選取我們要調(diào)整的元素就可以開始調(diào)整啦！ 四、改變UI元素的顏色 選中需要改變顏色的元素，雙擊該圖層的形狀圖層直接就可以換顏色啦！比如這里的菜單背景我們可以雙擊body圖層改變顏色為#00acc0。
五、矢量圖標(biāo) 使用一些圖標(biāo)會(huì)給網(wǎng)站帶來生氣。比如做一些小指引。我們現(xiàn)在看到Vector icons一欄，新建一個(gè)ps文件，使用圓角矩形工具（ Rounded Rectangle Tool ）繪制一個(gè)372*372px的方框。將UI工具包里面的Vector icons一欄下的打鉤圖標(biāo)拖過來放在中央偏上，然后繼續(xù)使用圓角矩形工具繪制一個(gè)綠色的指示按鈕。這樣子我們就使用了矢量圖標(biāo)。
六、導(dǎo)出UI元素 做完修改接下來就是導(dǎo)出了。選中需要導(dǎo)出的元素本身（記住不是編組而是元素本身的圖層），拖到新的ps文件里，讓文件的背景為透明，然后執(zhí)行”圖像—裁切”，按照下圖打鉤，裁切以后ctrl+shift+alt+s存儲(chǔ)為web所用格式，右上角勾選png-24（質(zhì)量比較高），就可以導(dǎo)出了。下面是以paginator為例。
結(jié)語 UI工具包對設(shè)計(jì)師和開發(fā)人員極其有用，如果你是一個(gè)自由職業(yè)者，使用UI工具包將節(jié)省你很多時(shí)間，因?yàn)槟悴恍枰ǜ嗟臅r(shí)間來思考設(shè)計(jì)?？梢詠韺ふ腋嗟腢I工具包。嘗試著用它們來豐富你的設(shè)計(jì)，然后用編碼實(shí)現(xiàn)吧~
