内行讲堂!让设计师和前端都更轻松的5个工具 - 优设网 - UISDC

内行讲堂!让设计师和前端都更轻松的5个工具

2016/06/29 8695评论区

5-useful-tools-easy-front-end-1

在这个开源的时代,你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更人性化就可以啦。设计师和h5开发人员现在都注意了,重要的事情只说一遍!发包了,快来收包!

第1个小工具:Bootstrap Magic

推荐指数:★★★★★

Bootstrap-magic

最近的简历库项目中用到了bootstrap,他是目前很受欢迎的前端框架,简洁灵活,使得 Web 开发更加快捷。Bootstrap Magic这个在线工具支持可视化定制Bootstap。通过使用这个网站,您还可以创建自己的bootstrap主题。

qdl201606296

从图中能看出bootstrap-magic上的颜色选择都是支持颜色选择器的,在对navbar修改了色值后,直接就能看到效果了。设计师可以直接做好css样式扔给前端开发哥哥啦!!!

第2个小工具:在线图标字体生成器IcoMoon

推荐指数:★★★★★

icomoon.io

使用icomoon您可以轻松地搜索和下载矢量图标或生成的图标字体。这个工具也可以用于图标集管理。这样的字体图标可以像平时我们用字体样进行各种控制,例如颜色,字号,文字阴影等等。

qdl201606295

Icomoon使用起来很简单,唯一需要注意的地方是,如果想修改按键和字体的对应,是在这里,看图中红框的地方。

5tools_20160629 (1)

类似的字体制作软件还有FontCreator,在线站点http://www.iconfont.cn 等等。至于具体怎么使用,官网上都有详细介绍,相信都是很简单的。下图最左侧的橙色搜索icon用的就是字体,右侧数字是一个倒计时应用的案例。

5tools_20160629 (2)

第3个小工具:TinyPNG

推荐指数:★★★★

Tinypng

qdl201606294

如何把网页中要用到的图片压缩到最小,这是前端攻城师们在写网页时都会考虑的一个问题。

查看tinypng的源码,在meta上有段关于自己站点的介绍:

<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!">

—— 使您的网站更快,节省带宽。tinypng优化您的PNG图像50-80%同时保持充分的透明度!

这个网站使用起来非常简单,只需要简单的两步就可以把你要压缩的PNG格式图片压小很多,还基本不会影响图片的质量。前端攻城师们再也不用担心图片太大加载过慢的问题了~

基本上手机上的Html5页面的图片都会用这个站压一遍,例如下面这些项目中的图片都是进行压缩处理过的,一般手机上看的页面都会控制在2兆左右,以免影响观看效果。

5tools_20160629 (3)

第4个小工具:微信官方设计团队出品的WeUi

推荐指数:★★★★★

WeUi

这是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计,令用户的使用感知更加统一。包含button、cell、dialog、toast、article、icon等各式元素。

这有什么好处呢?其实就是让你的应用跟微信官方版本更加统一,而没有违和感。当然更重要的是,这样的库在某些时候可以提高你的开发效率哦。

qdl201606293

以前没太注意这个东东,以后有仿微信朋友圈的项目可以采用这个样式库了哇。

第5个小工具:移动设备触控js框架Swiper

推荐指数:★★★★

Swiper

qdl201606292

Swiper 是一款免费、轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站 。其实类似这样的滑动插件的效果库非常多,但像他这样,文档能做的那么专业的就很少鸟。所以推荐推荐哦!我之前在儿童节的项目中用过这款滑动插件,效果还不错,见图片:

5tools_20160629 (4)

暂时先介绍这几款吧,后续发现继续更新!敬请期待!

「帮设计师提升效率的3篇好文」

一个可行性极高的工作流程,帮助大家从繁琐的设计工作中解脱出来:《畅快高效!超实用的设计工作流程+神器推荐》

如果经常收集资源但没时间整理,看看这篇:《超高效!轻松3步帮你掌握实用的设计资源整理术》

你简直无法想象一件顺手的兵器能节省多少时间:《大牛推荐!UI设计师工作必备的七个设计神器》

【技多不压身的设计师才有高薪资!】

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

原文地址:ued.qq.com

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/5-useful-tools-easy-front-end

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里