讓平面設(shè)計(jì)師和前端都更輕松的5個(gè)工具！用用更健康！

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

第1個(gè)小工具：Bootstrap Magic

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

Bootstrap-magic

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

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

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

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

icomoon.io

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

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

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

第3個(gè)小工具：TinyPNG

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

Tinypng

如何把網(wǎng)頁(yè)中要用到的圖片壓縮到最小,這是前端攻城師們?cè)趯懢W(wǎng)頁(yè)時(shí)都會(huì)考慮的一個(gè)問(wèn)題。

查看tinypng的源碼，在meta上有段關(guān)于自己站點(diǎ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%同時(shí)保持充分的透明度!

這個(gè)網(wǎng)站使用起來(lái)非常簡(jiǎn)單，只需要簡(jiǎn)單的兩步就可以把你要壓縮的PNG格式圖片壓小很多，還基本不會(huì)影響圖片的質(zhì)量。前端攻城師們?cè)僖膊挥脫?dān)心圖片太大加載過(guò)慢的問(wèn)題了~

基本上手機(jī)上的Html5頁(yè)面的圖片都會(huì)用這個(gè)站壓一遍，例如下面這些項(xiàng)目中的圖片都是進(jìn)行壓縮處理過(guò)的，一般手機(jī)上看的頁(yè)面都會(huì)控制在2兆左右，以免影響觀看效果。

第4個(gè)小工具：微信官方設(shè)計(jì)團(tuán)隊(duì)出品的WeUi

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

WeUi

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

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

以前沒(méi)太注意這個(gè)東東，以后有仿微信朋友圈的項(xiàng)目可以采用這個(gè)樣式庫(kù)了哇。

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

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

Swiper

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

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