商丘做网站,商丘网站优化,商丘网络推广,商丘网络公司
当前位置:首页 > 新闻资讯 > 网站设计 >

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

发表日期:2018-04-15 09:58聚圣源浏览次数: 本文关键词:内行讲堂,设计师,轻松seo5个工具

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

  第1个小工具:Bootstrap Magic

  推荐指数:★★★★★

  Bootstrap-magic

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

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

  推荐指数:★★★★★

  icomoon.io

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

  第3个小工具:TinyPNG

  推荐指数:★★★★

  Tinypng

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

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

  

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

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

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

  推荐指数:★★★★★

  WeUi

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

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

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

  推荐指数:★★★★

  Swiper

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

  

商丘建站公司:内行讲堂!让设计师和前端都更轻松的5个工具

 

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

如没特殊注明,文章均来自网络! 转载请注明来自:http://www.jushengyuan.com.cn/news/wzsj/5083.html

网站设计案例推荐

热门文章

揭秘2017年最新的网站快速排名设...

网站在前期的时候都是很难上排名的吗,那么是因为你的网站基础优化都没做好,怎么可能会有排名呢,首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...

日期:2017-06-30 浏览次数:5385

终于等到你!2017年2月设计圈实...

随着情人节的结束,2月份的设计圈干货大合集悄然更新。新的工具新的资源,依然是以往的分量,依然是相同的味道。和过去的合集相似,免费的素材、工具、服务占据了列表中9成的...

日期:2018-04-01 浏览次数:649

现代404页面设计趋势分析与案例...

每个网站都是由不同功能不同类型的页面构成的,当用户打开错误链接的时候,网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时,还应当引导用户继续浏...

日期:2018-02-27 浏览次数:646

商丘建站公司:内行讲堂!让设...

你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你,快来看看我最新发现的工具包吧!有了他们,这些功能你只需要直接用,或者用一点时间把他们优化的比作者创造时更...

日期:2018-04-15 浏览次数:632

商丘网站维护:如何写出一个完...

本文对如何写出一个完美的错误信息,进行了3个重要组成部分的分析。 每个系统都会有无法正常工作的时候。可能是用户的错误或系统的失败。在这两种情况下,以正确的方式处理错...

日期:2018-05-27 浏览次数:626

相关文章

刚刚过去的6月,网页设计师们特...

如果要深究近期网页设计趋势的变化,这些变化更多是关于用户模式,色彩和排版设计的。但是不论是其中哪种,都牵涉到一些微妙的设计技巧和复杂的影响因素,将它们纳入6月的设计...

日期:2018-01-05 浏览次数:67

下个阶段的设计师,为什么光做...

王镇雷:刚做设计的时候,师傅教我们设计师不要过多的影响业务,把专业的事交给专业的人(产品经理/运营)去考虑。举个简单的例子,当设计界面时,我们只确定框架,如这里是一...

日期:2018-01-05 浏览次数:65

新手进阶手册!成为交互设计师...

毕业后加入百度成为一名交互设计师已经整整两年了,这里把一些想法体会,工作职场的相关经历写下来,以供新人参考。 最早接触交互设计时觉得学交互设计非常酷炫,例如像钢铁侠...

日期:2018-01-05 浏览次数:74

作为UE设计师,该如何合理地进...

实际上,需求分析这是个老生常谈的话题了,道理大家都懂,但是具体如何落实到工作中又是另当别论了。 UE设计一般指游戏设计或游戏相关设计,还有网站的ue设计,其实就是User Ex...

日期:2018-01-05 浏览次数:67

作为体验或界面设计师,你可知...

本文将表述我对这个问题的回答作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性? 过去的5年中,我通过自己的工作坊和课程,在四十多个国家,为几百个顶...

日期:2018-01-05 浏览次数:71

随机推荐

超全面!可能是最详细的垂直电...

电商Banner图颜色搭配设计的秘籍...

学会这5个PS小技巧,让工作效率...

为真实的需求而设计...

众多新闻客户端 评论交互哪家强...

超全面!腾讯设计师做了100个弹...