干貨講堂：讓碼農(nóng)、設計師和前端更輕松的5個工具

時間：2023-03-01 19:30:01 | 來源：建站知識

時間：2023-03-01 19:30:01 來源：建站知識

在這個開源的時代，你還在加班為每一個小功能的實現(xiàn)自己“碼碼碼”嗎?今天想早點下班的你，快來看看我最新發(fā)現(xiàn)的工具包吧!包含：UI設計、嗨創(chuàng)免費自主建站、矢量圖庫等。有了他們，這些功能你只需要直接用，或者用一點時間把他們優(yōu)化的比作者創(chuàng)造時更人性化就可以啦。設計師和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修改了色值后，直接就能看到效果了。設計師可以直接做好css樣式扔給前端開發(fā)哥哥啦!!!

第2個小工具：在線圖標字體生成器IcoMoon

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

icomoon.io

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

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

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

第3個小工具：TinyPNG

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

Tinypng

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

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

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

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

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

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

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

WeUi

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

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

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

第5個小工具：嗨創(chuàng)H5自助建站工具

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

嗨創(chuàng)www.h5create.com

免費好用的H5自助建站工具。免費、H5、網(wǎng)站建設，這是三個詞就足以亮瞎眼了。

據(jù)了解，這個平臺剛剛上線不久，小編注冊后發(fā)現(xiàn)功能還是相當強大的。操作臺有很多的模板供選擇，還可以DIY建站，這算是可圈可點的人性化的設計。除了自由拖拽、酷炫特效之外，微信營銷、新聞營銷周邊服務一應俱全?？磥磬藙?chuàng)的技術團隊一定有高人。嗨創(chuàng)后臺截圖：

暫時先介紹這幾款吧，后續(xù)發(fā)現(xiàn)繼續(xù)更新!敬請期待!