在這個開源的時代，你還在加班為每一個小功能的實現(xiàn)自己“碼碼碼”嗎?今天想早點下班的你，快來看看我最新發(fā)現(xiàn)的工具包吧!有了他們，這些功能你只需要直接用，或者用一點時間把他們優(yōu)化的比作者創(chuàng)造時更人性化就可以啦。設(shè)計師和h5開發(fā)人員現(xiàn)在都注意了，重要的事情只說一遍!發(fā)包了，快來收包!

第1個小工具：Bootstrap Magic

推薦指數(shù)：★★★★★

Bootstrap-magic

最近的簡歷庫項目中用到了bootstrap，他是目前很受歡迎的前端框架，簡潔靈活，使得 Web 開發(fā)更加快捷。Bootstrap Magic這個在線工具支持可視化定制Bootstap。通過使用這個網(wǎng)站，您還可以創(chuàng)建自己的bootstrap主題。

從圖中能看出bootstrap-magic上的顏色選擇都是支持顏色選擇器的，在對navbar修改了色值后，直接就能看到效果了。設(shè)計師可以直接做好css樣式扔給前端開發(fā)哥哥啦!!!

第2個小工具：在線圖標(biāo)字體生成器IcoMoon

推薦指數(shù)：★★★★★

icomoon.io

使用icomoon您可以輕松地搜索和下載矢量圖標(biāo)或生成的圖標(biāo)字體。這個工具也可以用于圖標(biāo)集管理。這樣的字體圖標(biāo)可以像平時我們用字體樣進行各種控制，例如顏色，字號，文字陰影等等。

Icomoon使用起來很簡單，唯一需要注意的地方是，如果想修改按鍵和字體的對應(yīng)，是在這里，看圖中紅框的地方。

類似的字體制作軟件還有FontCreator,在線站點http://www.iconfont.cn 等等。至于具體怎么使用，官網(wǎng)上都有詳細(xì)介紹，相信都是很簡單的。下圖最左側(cè)的橙色搜索icon用的就是字體，右側(cè)數(shù)字是一個倒計時應(yīng)用的案例。

第3個小工具：TinyPNG

推薦指數(shù)：★★★★

Tinypng

如何把網(wǎng)頁中要用到的圖片壓縮到最小,這是前端攻城師們在寫網(wǎng)頁時都會考慮的一個問題。

查看tinypng的源碼，在meta上有段關(guān)于自己站點的介紹：

<meta name=twitter:description property=og:description content="Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency!">

—— 使您的網(wǎng)站更快，節(jié)省帶寬。tinypng優(yōu)化您的PNG圖像50-80%同時保持充分的透明度!

這個網(wǎng)站使用起來非常簡單，只需要簡單的兩步就可以把你要壓縮的PNG格式圖片壓小很多，還基本不會影響圖片的質(zhì)量。前端攻城師們再也不用擔(dān)心圖片太大加載過慢的問題了~

基本上手機上的Html5頁面的圖片都會用這個站壓一遍，例如下面這些項目中的圖片都是進行壓縮處理過的，一般手機上看的頁面都會控制在2兆左右，以免影響觀看效果。

第4個小工具：微信官方設(shè)計團隊出品的WeUi

推薦指數(shù)：★★★★★

WeUi

這是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，為微信Web開發(fā)量身設(shè)計，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。

這有什么好處呢?其實就是讓你的應(yīng)用跟微信官方版本更加統(tǒng)一，而沒有違和感。當(dāng)然更重要的是，這樣的庫在某些時候可以提高你的開發(fā)效率哦。

以前沒太注意這個東東，以后有仿微信朋友圈的項目可以采用這個樣式庫了哇。

第5個小工具：移動設(shè)備觸控js框架Swiper

推薦指數(shù)：★★★★

Swiper

Swiper 是一款免費、輕量級的移動設(shè)備觸控滑塊的js框架，使用硬件加速過渡(如果該設(shè)備支持的話)。主要使用于移動端的網(wǎng)站 。其實類似這樣的滑動插件的效果庫非常多，但像他這樣，文檔能做的那么專業(yè)的就很少鳥。所以推薦推薦哦!我之前在兒童節(jié)的項目中用過這款滑動插件，效果還不錯，見圖片：

好啦，今天1912的小編就先介紹到這里，希望你讀完這篇文章，在l平面設(shè)計方面獲益良多哦！