设计主页 > 网站制作 > 前端开发 >

让前端开发与设计的效率大幅提升(原图已打包)

优设 / 佚名 时间:2016-06-08 09:00

与几年前的开发模式不同,今天当我们做前端设计或开发时,往往需要组合很多不同的技术、框架,并且使用不同的工具。要熟悉这些新东西,特别是熟练掌握它们并不容易,尤其记住那些命令和语法需要很长的时间。

很多人会在使用它们时借助书籍或在网上搜索,但这样却会使你的工作效率降低。我首先使用的是那些优秀的Cheat Sheet(小抄),它们往往只有一两页,但却归纳和设计得非常科学,能让我快速找到我所需要的命令、语法规则或工具的快捷键,从而大大提高了我的工作效率。下面要分享的便是我在工作中整理的,对于设计师和前端开发都非常有用的那些Cheat Sheet。

高清大图/PDF 打包下载:http://pan.baidu.com/s/1i5GZQYT

HTML5 & CSS

CSS Cheatsheet

这张Cheat Sheet 包含了CSS中常见的选择器、盒模型、背景、色彩、字体等语法,以及使用说明。

ccsds2016060715

HTML5 Cheet Sheet [TAGS]

HTML5引入了很多新的tag,下面这个Cheet Sheet将那些HTML 5中新增的标签独立成一个小节,让我们能够很快掌握如何使用它们。

ccsds201606076

HTML5 Cheet Sheet

由Antonio Lupetti设计的一张HTML5 Cheet Sheet,对HTML 5标签进行了概括,而且设计得很新颖。

ccsds2016060717

HTML元素索引

HTML Elements Index包含了所有HTML元素,并按照字母顺序进行索引。

xxxxx20160607

JavaScript & JQuery

JavaScript Cheet Sheet

ccsds201606077

jQuery API 快速参考网站

jQuery Quick API Reference这个网站包含了所有JQuery中的API,点击某一个API后会直接链接到官方说明文档。另外你还能根据JQuery的不同版本来进行查询,非常方便。

ccsds2016060713

流行前端库

Bootstrap 3 – Cheat Sheet

Bootstrap 可能是目前最流行的CSS框架了,下面是Bootstrap 3的一张Cheat Sheet,包含了对Grid系统以及不同Device下适配的说明。

ccsds201606075

Font Awesome图标参考

每次使用Font Awesome时总需要打开网站然后去查找所需要的图标,对于英文单词不是很熟悉的人来说,找一个图标往往要上下翻看好几遍,而且随着图标库的扩大搜索图标成了一件让人头疼的事。有了这张Font Awesome图标参考,你只需要将它打印出来,放在桌边,需要时便能很快找到你想要的图标了。

ccsds2016060712ns Cheatsheet

Bootstrap 3 Glyphicons Cheatsheet是另一套非常常用的图标集,特别是在使用Bootstrap时,经常会用到它。

ccsds2016060711

设计工具

Sketch Shortcuts Cheatsheet

Skech已经成为我最常使用过的一个UI设计工具,大到做一个完整的UI方案,小到加工一张图片,我都会使用Sketch来完成。下面是Sketch中常用的快捷键。。

ccsds201606072

Adobe CC Cheat Sheet

THE ULTIMATE ADOBE CREATIVE CLOUD KEYBOARD SHORTCUTS CHEAT SHEET包含了Adobe CC系列中所有产品的快捷键Cheat Sheet.(由于图片非常大,完整版请参考顶部提供的资源连接)

ccsds2016060714

Adobe Illustrator CS6 Shortcuts Cheatsheet

ccsds2016060716

Adobe Photoshop CS6 Shortcuts Cheatsheet

ccsds201606071