20张小抄,让前端开发与设计的效率大幅提升(原图已打包) - 优设-UISDC

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

2016/06/07 5887评论区

shortcut-list-improve-development-efficiency-1

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

很多人会在使用它们时借助书籍或在网上搜索,但这样却会使你的工作效率降低。我首先使用的是那些优秀的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

开发工具

Sublime Text 3 (OSX) Cheat Sheet

PDF版本(PDF版本请参考顶部提供的资源连接)。

ccsds2016060718

Atom Editor Cheat Sheet

Atom是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程

ccsds2016060710

Markdown

Markdown Cheatsheet

Markdown因为其简洁高效的特性,而成为很多开发或设计文档的写作标准。下面这张Cheat Sheet包含了Markdown中常见的语法标准。

ccsds201606074

浏览器中的开发者工具

Chrome Devtools Cheatsheet

Chrome自带了非常强大的开发者工具,通过快捷键去控制它能让你的程序调试速度飞起来。

ccsds201606079

Firebug Cheatsheet

Firefox上强大的网站调试插件,Firebug Cheatsheet中包含了所有快捷键。

ccsds2016060719

操作系统

Command Line Cheat Sheet

这张Cheat Sheet包含了最常用的Linux命令行,及使用示例。

ccsds201606073

Git & GitHub

Git Cheat Sheet

Git已经取代SVN成为目前最流行的版本控制及分布协作工具。但用好Git并不容易,你需要掌握许多Git命令,下面这张Cheat Sheet能够帮你快速找到所需要的命令。

ccsds201606078

总结:

以上只是那些实用的Cheat Sheet中很小的一部分 ,我也建议你平时注意收集并使用那些Cheat Sheet,它们能极大提升你的开发或设计效率。

欢迎关注作者的微信公众号:

jjqr3

【牛总的精品教程合集】

MBE 风格图标:
《PS热门教程!教你5分钟快速绘制超火的MBE风格图标》

五分钟海报教程:
《PS教程!5分钟设计出极具格调的艺术海报(一)》
《PS教程!5分钟设计出极具格调的艺术海报(二)》

yestone-uisdc-2

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

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/shortcut-list-improve-development-efficiency

发表评论 加载中....

评论加载中....

uisdc

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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