这篇文章收集了一组前端开发相关文摘，分享提升网站用户体验的优秀
插件，展示前沿的
技术应用，共享精美的设计素材和优秀的
开发工具，希望这些精心整理的前端技术文章能够帮助到您。
JS 框架和工具
同系列文章
未经允许不得转载： &UI设计师和前端工程师该如何更好的衔接?_达内UI培训
400-111-8989
UI设计师和前端工程师该如何更好的衔接?
时间： 16:57
首先，作为一个设计师，尤其是师，请跟我一起大声念：必须掌握前端切图流程!
这可能意味着你得学会HTML+CSS，或者要长时间和IOS或者安卓开发人员交流他们是怎么把图片和文字排进屏幕内的。别老是抱怨你是设计怎么能去学码农的东西，设计人员对这些看似高深的源码有本能的畏惧和厌恶。无论你所在的公司在项目人员配置上如何贴心到位，但如果你自己没有掌握这些知识点，就不要妄想最后实现环节上能顺利收尾，因为你从出发点开始和程序员的认知就不对称，这些不对称是矛盾和偏差的根源。
现在很多小年轻们迷恋追波上大神们做的牛逼的动效，于是设计的时候光静态稿件不甘心，也来做个AE特效玩玩，压根没有考虑IOS或者安卓在实现这样的效果时，需要哪些运行机制，有没有这样的控件支持，会不会不流畅等等!自己用了一整晚的时间折腾这么酷炫高大上的动画，开发这些土鳖居然告诉我不能实现恩??撕逼ING.........
再普遍点的，是不是每次完你发现绝大多数元素和字体都不对，没有对齐，大小加粗等细节没有注意，但是开发拿设计稿就是没办法100%实现的借口的来搪塞你??
下面就来讲重点~~~
============重点=============
1、设计前请审核原型
在原型步骤就想好对应的图层结构，交互特效，并和开发人员做好交流，是否可以实现，功能的评估一定要细致，否则会浪费大量的人力成本。还有原型是挺严肃一玩意儿，但是大多数团队或者设计都没有认识到它们的价值，在这里不展开原型的细节了，这还可以再写一个长评，你们懂意思就好拉，画在纸上的手稿也比没有强。
2、熟悉设计环境规范
无论是WEB还是IOS、安卓、WP等等，都有对应的设计规范文档，我下面会帖出来。如果连最基础的设计规范都不知道就开始做设计，那么你要自己承担项目拖延和被整个开发组人员问责的后果。在你动手前，请好好的做完功课，并且在每次环境大升级时跟进关注(例如新的iPhone6、6+发布的尺寸变更等)。
前人已经栽好了树，你需要做的就是在既定框架内完成设计即可。你要牢记自己的设计是基于相应的运行环境的，没有足够的能力前，不要有认为这套体系下的设计都很“土”，你是一个要成“大神”的男人，打破限制和规范是你的嗜好和品位。如有以上想法，请对着镜子里的自己说：Naive(被你们这些可恶的人类发现拼错了，摔)!
例如WEB设计下，12PX以下的中文字体无法被正常显示，文本只支持本地客户端已有字库，IOS的TABBAR、TOPBAR等高度是不能被随意变更任意增减层级等等。这样的稿子如果被交付，并没有强有力的逻辑说服别人，只会让你的团队感受到你的不专业，增加矛盾隐患。SO，好好看看这些文章：
基础知识学起来!为设计师量身打造的DPI指南
ios&安卓设计标准规范
iPhone APP设计规范/iPad
3、制定项目设计规范
这也是提升效率和整体视觉和谐感的重点，你要在大框架下建立小体系，这是你展示自己个性的部分，记得也要用文档记录下来，在以后的改版和开发过程中，严格遵守规范的参数，减少沟(si)通(bi)成本。
例如：主色色值、按钮的大小边框、各文字类型颜色大小、模块间隔距离等等。
4、学会怎么切图
我一直认为做完PSD还是SKETCH文件，往开发那边一扔，任务搞定的想法，是相当不负责任的一种行为。因为设计不合理的部分导致导出切图的工作变困难，因你的烂摊子，开发效率降低，完全是因为你的失误，不要抱怨和找任何借口。
比如水平可平铺的背景是怎么最优化导出的?安卓适应多屏幕分辨率下，点九图是怎么进行标记和拉伸的，应该使用什么工具?需要应用透明背景的图片知道应该使用什么格式?你必须设计出自己独立也能完成切图工作的设计稿，再要求开发能够完整实现，而不是让他们又来找你抱(si)怨(bi)哪里哪里是不行的你得重做。
5、一定要有标注说明
标注的作用何其重要，开发人员对于元素的间距和文字大小还有透明元素的参数设置，是没有耐心一点点查看和检测的(没错，大部分情况会——凭!!感!!觉!!)，你不好好把这些制作成文件白纸黑字，那么这个最重要的还原环节上出差错的几率也是最多的，往后修改最困难的。
6、结果对比调适
开发完成视觉部分内容以后，要开始校对，那么尽可能给出参照物，参照物是什么呢?
高保真原型
只有同意平台下可运行的高保证原型可以最直观对比设计到实现之间有什么偏差，并以此检查参数设置上的错误，逐个调整。
在这里强烈推荐——Invision在线原型工具
ee Web & Mobile (iOS, Android) Prototyping and UI MockupTool
可以制作APP和WEBSITE，并分享远程连接在手机和别的电脑上预览，下面放我之前做过一个小项目的实例(最好翻墙访问比较快)：
传送门——InVision
或者PSPLAY，这个请访问官网看详情，也是可以在移动设备直接查看设计文件的工具，不过更适合设计过程中使用，但不妨结尾的时候做对比
传送门——Ps Play – 移动设计零阻力
企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说，两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理，希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。
平面设计与包装设计有着紧密的联系与差异，两者都是通过视觉传递设计信息以及都体现出了对美的追求，因此，我们需要充分了解平面设计与包装设计的差异与联系，在实践中才能对两者更好的运用。
平面设计真正开始工作时，遇到设计瓶颈才想回过头来温习设计理论知识。所以，初学平面设计，应该注意的就是运用好这些基础的设计理论。
每一种颜色并不仅仅包含一种象征意义，而且不同人因为其生活背景、文化层次的不同对同一种颜色产生不同的心理感受。
Copyright (C)
Tedu.cn All Rights Reserved 京ICP备号-56 达内时代科技集团有限公司 版权所有
选择城市和中心
达内北京亦庄大学生实训基地
达内北京网络营销中心
达内北京会计中心注册 | 登录
80后产品，人生乐趣是互联网、旅游、喝茶
零基础学产品，BAT产品总监带，2天线下集训+1年在线课程，全面掌握优秀产品经理必备技能。
设计师和工程师是两类不同的人。再好的想法最后也落地于执行。他们要如何合作？设计师如何保证自己的想法和设计细节在开发过程中被严格遵循？本文摘选自Quora问答，回答者为UX设计师Owen Otto.
设计最重要的是交付物的最终效果，所以和工程师配合好这件事就变得至关重要。以下是我的一些个人心得：
1.工程师的性格是哪种
一些人对设计并不感兴趣，他们只需要你把所有的细节罗列清楚，然后他们就可以专注于把细节翻译成代码。另一些人颇具设计思维和灵感，那就尽早的让他们参与设计并听听他们的意见。
2 扫一遍bug并在产品成型阶段审核
这样你就能知道哪里出了问题，并对代码所不擅长处理的设计细节了然于心，而这些东西就成为自己下次做设计时要注意的东西。
3.自己时不时敲敲前端代码
写写代码有助于你理解设计和代码的对应点，还能获得工程师们的尊敬。但这样却比较费时间，请酌情使用。
4.坐在工程师身边
坐在工程师身边能让你融入他们的谈话并建立良好的关系。同时能看到代码产出的每一步，尽早发现问题所在。
5.说明意义
设计师往往擅长将几句话的概括发挥想象构建出宏大的场景，我们也往往低估了将产品和设计的意义具体化的作用。如果能在适当的时间跟工程师讲清楚设计的意义所在，他们往往会得到激发， 并且用加倍的热情来完成之后的工作。
6.在用户调研阶段邀请工程师参与
当他们直观地看到用户如何使用，亲耳听到用户对于产品痛点的抱怨，这比事后用调研报告来说服他们要有用的多。
7.选择你的战场
事实上让每个像素都符合设计稿是不可能的。去掉或忽略不是那么必要的部分，将精力放在亮点上并加以抛光。在适当的时候妥协，把能量用在刀刃上。
8.不要抱怨
设计师往往爱抱怨没人听他们的主意。这在你开始变得弱势后，事情仿佛越来越顺着当初的抱怨发展下去。这是一个恶性循环。我们要做的就是打开心扉虚心采纳意见，表现出应有的风度，并相信自己的想法是团队取胜的关键。
来源：quora.com
赞赏是对原创者的最大认可
收藏已收藏 | 2赞已赞 | 0
80后产品，人生乐趣是互联网、旅游、喝茶
产品经理群
运营交流群
品牌营销群
文案交流群
Axure交流群
关注微信公众号
大家都在问
48个回答51人关注
7个回答7人关注
13个回答28人关注
18个回答21人关注
20个回答24人关注
30个回答53人关注前端是一个承上启下的职位，正因为其位置的特殊性导致其必须了解设计和后台的一些基本知识。本文并非教大家如何取代设计的工作，而是讲解前端如何更快更便捷的实现一些简单的设计任务，在没有设计师的情况下如何利用工具解决UI呈现的问题，让工作事半功倍。
Photoshop使用
大多数前端工程师都有过切图的经历，也就是将设计师制作的PSD等格式的图片按照需求切成项目需要的大小并实现页面的呈现，那么作为一名合格的前端工程师，我们有必要了解并熟练的掌握Photoshop的一些功能，下面介绍下几个实用的Photoshop技巧（以Adobe Photoshop CS5为例）。
1.调整图片大小
如果你在网络上找到了一张图片或者从设计师那里拿到一张图片用于网页中呈现，但是对图片的大小不满意的话，你只需要利用Photoshop进行调整即可，步骤很简单，如下：
（1）利用Photoshop打开图片并点击&图像& -& 选择&图像大小&
（2）修改你想要的宽度和高度
这里我们一般修改像素大小即可，修改的时候如果不勾选下方的&约束比例&，那么图像可能会被拉扯变形，勾上可以防止宽高比例的失调，即在原图比例的基础上缩放。
2.调整局部颜色
如果我们需要对图片的局部颜色进行更改，比如我想将下方图片的背景变为黑色，我们可以点击&选择& -& &色彩范围& -& 选中背景区域 -& 调整颜色容差即可
（1）选择范围
（2）点击确定后，填充颜色
当然除了使用&色彩范围&外，还可以使用&索套工具&或者&选择工具&来建立选区，这里就不做介绍了，建立复杂的选区也需要相对复杂的操作。
3.一键切图
切图应该说是前端经常要做的事情，在切图的过程中如果遇到图层过于复杂图片又过于渺小的情况，我们往往需要放大整个图片并隐藏额外的图层来选择我们需要的图形区域，这相当的浪费时间和精力。这里介绍下我们如何通过Photoshop的动作功能来实现一键切图的效果。
（1）下载动作请戳这里下载动作文件：
（2）载入动作
将刚刚下载的动作文件载入即可
（3）使用动作
载入完成后，打开任一psd文件，步骤如下：
a.首先我们选择&移动工具&，将&自动选择&勾选b.点击我们要切的图标，在图层面板中我们可以看到对应的图层已经被定位到c.按下F2，图标就成功切到了d.按下F3保存为web所用格式
关于Photoshop的技巧还有很多，以上只列出几个对于前端来说比较常用的三个，只要我们熟悉像这样的一些实用技巧，就可以节省很大的时间和精力。
工具及网站使用
1.图片压缩
如果你想要压缩一张图片，除了利用Photoshop修改品质外，我们还可以利用一些自动化工具进行压缩，比如glup、grunt等。
当你不具备以上开发环境和工具时，我这里推荐一个压缩图片的网站，地址为：。
其采用了智能的有损压缩技术，通过选择性地降低在图像中的颜色的数量，减少字节的存储数据量，其效果是几乎看不见，但它可以很大程度的减少图片的大小。
通过官网的实例我们来对比下两张图片压缩前后的变化：
同样的一张图片，压缩后比压缩前减少了近1/4的体积，但是图片清晰度任然和压缩前一样。
2.图标下载
很多时候当我们的团队中缺乏设计或者设计不在时，如果项目中需要一个logo或者图标，我们其实可以自己搞定。通过百度搜到的图片大都不符合我们的需求，这里我推荐一个比较好用的图标库easyicon，拥有海量的图标资源，地址为：
如下图所示，我们只需要输入我们需要的图标名称，便可以搜索出大量图标：
当我们选择需要的图标时，会出现详细的下载页，我们可以选择我们需要的图标格式比如PNG、ICO或者ICONS，同时我们还可以选择需要的图标大小进行下载，如下：
相信只需这一个网站就可以满足你的图标需求了。
3.字体下载
这里的字体主要指纯色的字体图标，现在很多网站的icon图标都是以字体的形式嵌入，这样我们可以一定程度的减少网页中图片的请求数量，同时也便于维护。这里我推荐几款比较热门的字体图标库：
（1）阿里巴巴矢量图标库：
通过淘宝的这个图标库，我们可以轻松的管理及下载我们需要的字体图标，同时还可以制作和上传我们的图标，对于喜欢的图标还可以进行收藏。
（2）icomoon图标库：
这是一个国外的网站，也提供了一系列的字体图标资源，同样具备了图标下载收藏等功能，不过有些字体图标需要收费。
（3）fontawesome图标库：
fontawesome是一个以导入CSS文件的形式加载的图标库，适合中后台项目的开发使用。
4.模板下载
这里的模板可以是PSD格式的文件，也可以是JPG等图片格式，一般很多设计师都会从这些网站上寻找素材和灵感，所以我们可以直接拿过来参考和使用，对于我们网站的原型制作很有帮助，当然这也是在缺乏设计师的情况下前端能够快速实现页面设计的捷径。
（1）UI中国：（2）UE设计平台：（3）UI制造者：（4）Hiiishare：（5）学UI网：
库框架使用
这里的框架主要指的是前端开发中的UI框架，合理的利用UI框架可以在美化页面的同时提高工作效率和开发成本。
1.适合PC端
（1）Bootstrap：
Bootstrap应该算得上是最早流行的前端UI框架之一，其面世之后不仅大大方便了前端开发人员的工作，同时也方便了后台开发人员构建前端页面。
（2）flat-ui：
flat-ui是一款免费的WEB界面工具组件库，其UI风格十分扁平化，相比Bootstrap其更简洁小巧。
（3）jQuery-ui：
jQuery-ui是jQuery的官方UI库，其在提高CSS样式美化的同时也提供了一系列的JS组件供开发者使用，同时也支持定制功能。
2.适合移动端
（1）Foundation：
Foundation是一款体积小并且提供响应式布局的移动端优先的UI工具库。
（2）Amazeui：
Amazeui是中国首个开源 HTML5 跨屏前端框架。其以移动优先为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
（3）MUI：
MUI是一款最接近原生APP体验的高性能前端框架，其不依赖任何第三方JS库，轻量是其重要特征。
随着目前富应用框架的热潮，很多前端JS框架都拥有自己的UI框架选择，比如Vue的vux、vue-starp，React的ant-design等，这些框架的诞生都可以很好的给我们提供快速一站式的前端解决方案，使前端无图化设计的应用日趋繁荣。
一个网站的实现离不开设计师的美化和产品经理的规划，前端只是承接这一步的重要一环，而不是可以替代这一步的一环，我们所能做的是在缺乏上一环的情况下尽可能的利用工具和知识来弥补不足，而最终是为了更友好的将内容呈现给用户。
阅读(...) 评论()前端工程师和设计师必读文章推荐【系列三十七】
　　《Web 前端开发精华文章推荐》自号发布第一期以来，历经五年半，总共发布了30多期。今天这篇是2017年第2期（总第37期），希望你能在这里发现有用的资料。
　　梦想天空专注前端开发技术，分享提升网站用户体验的优秀 jQuery 插件，展示前沿的 HTML5 和 CSS3 技术应用，共享精美的设计素材和优秀的
Web 开发工具，希望这些精心整理的前端技术文章能够帮助到您。
HTML5 & CSS3
Foundation 6 – 先进的响应式的前端开发框架分享最新最佳的12个 CSS 开发工具推荐 TouchPoint.js – 可视化展示 HTML 原型点击效果 分享15个优秀的 CSS 解决方案和工具 推荐8个实现 SVG 动画的 JavaScript 库 15款值得开发者一试的最新的前端框架 分享15款很实用的 Sass 和 Compass 工具 CssStats – 分析和优化网站 CSS 代码的利器 AOS – 另外一个独特的页面滚动动画库（CSS3） Waud.js – 使用HTML5降级处理的Web音频库 Httpster –世界各地最潮的网页设计案例聚合网站 JS 框架和工具
精心挑选10款优秀的 jQuery 图片左右滚动插件 推荐15款响应式的 jQuery Lightbox 插件 推荐15个最好用的 JavaScript 代码压缩工具 20个不可思议的 WebGL 示例和演示 LightGallery.js – 功能齐全的 JS Lightbox Chocolat.js – 响应式的 jQuery Lightbox 插件 jQuery.my – 实时的复杂的双向数据绑定Senna.js – 速度极快的单页应用程序引擎 Cropper – 简单的 jQuery 图片裁剪插件 AntiModerate – 渐进式图片加载的 JavaScript 库 2016年4月最佳的20款 jQuery 插件推荐 推荐15款制作 SVG 动画的 JavaScript 库 16款最佳的 jQuery Time Picker 时间选择插件 20款 JavaScript 开发框架推荐给前端开发者 Cleave.js – 自动格式化表单输入框的文本内容 12款简化 Web 开发的 JavaScript 开发框架 前端工具 - 15个最佳的 JavaScript 表单验证库 网站素材
分享20个华丽的模态窗口弹出效果示例前端开发者必备的20个文档和在线工具 分享20个最新的免费 UI 设计素材给设计师 前端开发者必备的20个在线工具和指南 15个最佳的用户体验和用户界面工具和资源 分享20个新颖的字体设计草图，带给你灵感 40款用于简洁网页设计的光滑英文字体【上】 40款用于简洁网页设计的光滑英文字体【下】 字体下载大宝库：12款好看的免费英文字体 2017年最新15个漂亮的 HTML 摄影网站模板 12个用于网站性能优化的最佳的图片压缩工具 15个最佳的代码评审（Code Review）工具OS.js – 开源的 Web OS 系统，赶快来体验 Postman - 强大的 API 接口请求调试和管理工具 同系列文章
Web 前端开发人员和设计师必读文章推荐【系列一】 Web 前端开发人员和设计师必读文章推荐【系列二】 Web 前端开发人员和设计师必读文章推荐【系列三】 Web 前端开发人员和设计师必读文章推荐【系列四】 Web 前端开发人员和设计师必读文章推荐【系列五】 Web 前端开发人员和设计师必读文章推荐【系列六】 Web 前端开发人员和设计师必读文章推荐【系列七】 Web 前端开发人员和设计师必读文章推荐【系列八】 Web 前端开发人员和设计师必读文章推荐【系列九】 Web 前端开发人员和设计师必读文章推荐【系列十】 Web 前端开发人员和设计师必读文章推荐【系列十一】 Web 前端开发人员和设计师必读文章推荐【系列十二】 Web 前端开发人员和设计师必读文章推荐【系列十三】 Web 前端开发人员和设计师必读文章推荐【系列十四】 Web 前端开发人员和设计师必读文章推荐【系列十五】 Web 前端开发人员和设计师必读文章推荐【系列十六】 Web 前端开发人员和设计师必读文章推荐【系列十七】 Web 前端开发人员和设计师必读文章推荐【系列十八】 Web 前端开发人员和设计师必读文章推荐【系列十九】 Web 前端开发人员和设计师必读文章推荐【系列二十】 Web 前端开发人员和设计师必读文章推荐【系列二十一】 Web 前端开发人员和设计师必读文章推荐【系列二十二】 Web 前端开发人员和设计师必读文章推荐【系列二十三】 Web 前端开发人员和设计师必读文章推荐【系列二十四】 Web 前端开发人员和设计师必读文章推荐【系列二十五】 Web 前端开发人员和设计师必读文章推荐【系列二十六】 Web 前端开发人员和设计师必读文章推荐【系列二十七】 Web 前端开发人员和设计师必读文章推荐【系列二十八】 Web 前端开发人员和设计师必读文章推荐【系列二十九】 Web 前端开发人员和设计师必读文章推荐【系列三十】 Web 前端开发人员和设计师必读文章推荐【系列三十一】 Web 前端开发人员和设计师必读文章推荐【系列三十二】 Web 前端开发人员和设计师必读文章推荐【系列三十三】 Web 前端开发人员和设计师必读文章推荐【系列三十四】 Web 前端开发人员和设计师必读文章推荐【系列三十五】 Web 前端开发人员和设计师必读文章推荐【系列三十六】
本文链接：前端工程师和设计师必读文章推荐【系列三十四】
文章来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
本文出处【http://www.cnblogs.com/lhb25/】
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！