在這個(gè)開源的時(shí)代，你還在加班為每一個(gè)小功能的實(shí)現(xiàn)自己“碼碼碼”嗎？今天想早點(diǎn)下班的你，快來看看我最新發(fā)現(xiàn)的工具包吧！有了他們，這些功能你只需要直接用，或者用一點(diǎn)時(shí)間把他們優(yōu)化的比作者創(chuàng)造時(shí)更人性化就可以啦。設(shè)計(jì)師和h5開發(fā)人員現(xiàn)在都注意了，重要的事情只說一遍！發(fā)包了，快來收包！
第1個(gè)小工具：Bootstrap Magic
推薦指數(shù)：★★★★★
Bootstrap-magic
最近的簡(jiǎn)歷庫項(xiàng)目中用到了bootstrap，他是目前很受歡迎的前端框架，簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。Bootstrap Magic這個(gè)在線工具支持可視化定制Bootstap。通過使用這個(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使用起來很簡(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)頁中要用到的圖片壓縮到最小,這是前端攻城師們?cè)趯懢W(wǎng)頁時(shí)都會(huì)考慮的一個(gè)問題。
查看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)站使用起來非常簡(jiǎn)單，只需要簡(jiǎn)單的兩步就可以把你要壓縮的PNG格式圖片壓小很多，還基本不會(huì)影響圖片的質(zhì)量。前端攻城師們?cè)僖膊挥脫?dān)心圖片太大加載過慢的問題了~
基本上手機(jī)上的Html5頁面的圖片都會(huì)用這個(gè)站壓一遍，例如下面這些項(xiàng)目中的圖片都是進(jìn)行壓縮處理過的，一般手機(jī)上看的頁面都會(huì)控制在2兆左右，以免影響觀看效果。
第4個(gè)小工具：微信官方設(shè)計(jì)團(tuán)隊(duì)出品的WeUi
推薦指數(shù)：★★★★★
WeUi
這是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，為微信Web開發(fā)量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。
這有什么好處呢？其實(shí)就是讓你的應(yīng)用跟微信官方版本更加統(tǒng)一，而沒有違和感。當(dāng)然更重要的是，這樣的庫在某些時(shí)候可以提高你的開發(fā)效率哦。
以前沒太注意這個(gè)東東，以后有仿微信朋友圈的項(xiàng)目可以采用這個(gè)樣式庫了哇。
第5個(gè)小工具：移動(dòng)設(shè)備觸控js框架Swiper
推薦指數(shù)：★★★★
Swiper
Swiper 是一款免費(fèi)、輕量級(jí)的移動(dòng)設(shè)備觸控滑塊的js框架，使用硬件加速過渡（如果該設(shè)備支持的話）。主要使用于移動(dòng)端的網(wǎng)站 。其實(shí)類似這樣的滑動(dòng)插件的效果庫非常多，但像他這樣，文檔能做的那么專業(yè)的就很少鳥。所以推薦推薦哦！我之前在兒童節(jié)的項(xiàng)目中用過這款滑動(dòng)插件，效果還不錯(cuò)，見圖片：
暫時(shí)先介紹這幾款吧，后續(xù)發(fā)現(xiàn)繼續(xù)更新！敬請(qǐng)期待！
「幫設(shè)計(jì)師提升效率的3篇好文」
一個(gè)可行性極高的工作流程，幫助大家從繁瑣的設(shè)計(jì)工作中解脫出來：《暢快高效！超實(shí)用的設(shè)計(jì)工作流程+神器推薦》
如果經(jīng)常收集資源但沒時(shí)間整理，看看這篇：《超高效！輕松3步幫你掌握實(shí)用的設(shè)計(jì)資源整理術(shù)》。
你簡(jiǎn)直無法想象一件順手的兵器能節(jié)省多少時(shí)間：《大牛推薦！UI設(shè)計(jì)師工作必備的七個(gè)設(shè)計(jì)神器》
【技多不壓身的設(shè)計(jì)師才有高薪資！】
- 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
- 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計(jì)師》
- UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
- 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
- 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
- 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
- DPI指南：《基礎(chǔ)知識(shí)學(xué)起來！為設(shè)計(jì)師量身打造的DPI指南》
- 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》
原文地址：ued.qq.com
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論！每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后，在評(píng)論區(qū)留言，系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今，是國內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái)，提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 737 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓