Web前端工程师要掌握的工作经验
今天小编要跟大家分享的文章是关于Web前端工程师要掌握的工作经验。设计师与工程师的交流经常是鸡同鸭讲，牛头对不上马嘴，为了帮同学们搞定这个难题，小编整理了一个列表，帮同学们能跟工程师无障碍沟通，全是非常实用的知识点。
开发者一般不是令人惊艳的设计师，设计师也通常不是出色的开发者。虽然有很多例外，但这两行的门道对对方而言都是难以言说的谜，然而双方却要在这种情况下合作完成项目。作为在两个领域都工作过的人，北大青鸟web前端培训专家整理了一个列表，使设计师能够更好地辅助开发者开发应用和网站。下面来和小编一起看一看吧！
一、Photoshop
开发者经常需要处理设计师制作的Photoshop
PSD文件，因此任何对设计师有益的事情也会对开发者有益，包括绘制易于维护、易于理解的PSD文件。
1、有效地进行版本控制
设计师经常会面对各种装满了一堆没有清晰版本命名的PSD的文件夹。为了解决这个问题，设计师可以事先确定一种合适的版本命名格式(理想的格式应该使文件在字顺排序下自动有意义地排列)。
2、保持图层
不要轻易合并图层。需要导出时，通过组合，隐藏/显示图层的方式来进行，导出后再把文件恢复到原来的状态。不要轻易破坏有用的数据。电脑性能更不是合并图层的理由——若被此限制，你应该做的是买内存更大，性能更好的电脑。
3、对图层进行有意义的命名
虽然对图层命名比较繁琐，但这样做确实能够帮助理解，尤其是在重用文件元素的时候。命名时应确保文字图层的名称反应其内容。重复的图层也要进行有意义的命名，而不是简单的“副件”。
4、合理地对图层编组
应该把分散在不同图层的视觉元素编为一组。对单一设计的文件来说，编组整体上应该一致按照从左到右，从上到下的顺序。层次和顺序比按颜色编码图层更好，因为图层移动时，颜色还需要保持。
5、去掉不需要的图层
不再需要的旧版本、模版和参考材料以及临时复件应该从图层中及时删除。间歇性地浏览一下你的所有图层，及时删除不需要的东西。
6、使用图层复合
Photoshop的图层复合功能可以让你制作多组图层状态，如可见性，位置甚至图层风格。你可以用图层复合功能来灵活地在一份文件中整合设计中不同部分(比如网站的多个标签、应用的多个页面)。这样做可以不必保留重复的图层编组，从而减小文件大小。
7、保存矢量文件和可伸缩效果
在设计应用时，很可能会需要原设计两倍尺寸的图片来适应有双倍像素的新设备。确保在这种情况下你不需要重新绘制所有的图标。
二、助力开发者
还有一些特别与应用及网页设计相关的建议，每项都有相应的要求和限制。
8、学会在缩放时保存圆角
操作系统经常会统一圆角的角半径(iOS通常为12像素)。Adobe
Fireworks会保持圆角矩形的角半径，但Photoshop不会。因此确保你用直接选择工具来选取圆角的点并且以传统的方式缩放图像。
9、在72ppi下进行设计
一个像素就是一个像素，更多的像素只会生成更大的文件。不要通过改分辨率来蒙混过关。
10、对齐像素
确保相关的形状工具设置成对齐像素。根据你的需要使用像素网格等工具。一贯使用偶数尺寸来方便裁剪。
11、使用RGB模式
这点不仅对颜色显示重要，对开发者将颜色正确地写入代码也同样关键。
12、资源准备是你工作的一部分
很多(大多数)开发者除了基本的编辑功能外对Photoshop一窍不通。设计师需要适时地导出可能会在应用或网站上用到的裁剪图，因为毕竟他们是对文件和Photoshop最熟悉的人。这项工作虽然很痛苦，而且很耗时，但这是除“设计”外90%的工作。
13、谨慎地使用字体
不同的设备和操作系统的预设字体有所不同，因此不能确保这些设备都有你进行设计的电脑上的字体(事实上，你比一般人的设备上的字体都多)。基本上，将应用或网站上的文字以实际文本的格式呈现会有更好的效果，但这也使对字体的选择不仅基于视觉，还有可行性上的考虑。
还有一点值得注意，允许个人设计使用的许可也许不允许你将该字体完全使用在应用或网页上。在选定设计中使用的字体之前，确保和你的开发者或客户进行有效沟通。
14、确定设计尺寸
对移动设备应用来说，屏幕尺寸不是全部信息，你还需要考虑系统状态栏等的存在，以及他们如何在屏幕横排和竖排时影响尺寸(比如iOS设备的顶端状态栏会在横排的时候减小较小边的尺寸，在竖排的时候减小大边的尺寸)。和你的开发者确认一下应用是否为完整的全屏很必要。
15、使用平台风格
每个平台(操作系统)都有其独特的用户界面元素和交互风格(也会根据不同的设备有所不同)。在设计时注意这些风格，并且除了有特殊原因，不要进行与平台本身风格差别太大的设计。例如，在iPad上，你会发现这些需要注意的地方：
1、支持两种屏幕方向的强烈需求
2、双栏设计在两种屏幕方向上都可接受
3、将弹出框作为一种界面元素和分组机制
4、确定的文件浏览器的风格
5、在级别较高的导航栏中，返回按钮是向左指的图标
因此，在设计时要熟悉平台，因为你的设计要适应它。没有哪一种单一的设计可以适应所有的平台。。
16、对横排和竖排分别进行设计
不同的屏幕方向需要不同的交互设计风格，这不仅是因为屏幕宽高比，还因为用户以不同方向手持设备时外形、重量和平衡上的区别。只针对适应屏幕宽高比进行设计顶多是一个糟糕的妥协策略。
17、针对每种主流尺寸和情景进行设计
同一应用在手机、平板和电脑上的内容和交互都应有所不同。对移动设备而言，我们也需要考虑注意力持续时间、注意力分散、使用设备时的身体协调性减弱，以及用户在移动或危险情境下使用设备的可能性(例如走路时的障碍物、过马路时的交通情况以及驾驶安全性)。这些使用情景与设备的尺寸和本质有不可否认的关系，有效的设计应该充分考虑这些因素。
18、使用纯正的，至少实际的示例内容
好的示例内容标准有以下几条：
1、示例内容涵盖应用可能的长度，而不是仅仅为了原型设计的方便。
2、设计必需的数据缺省时的显示方案，尤其如用户照片等。
3、考虑不合需要的输入示例，比如需要进行裁剪的过宽或过长的图片。
4、包含极端或少见的名字示例，包括超长或不间断的姓和名。
5、地址不限制为当地的地址形式，而包括各种可能的长度和格式。
6、在设计的任何角落都找不到“Loremipsum”。
19、本地化考虑
当大多数人考虑支持其它语言时，他们想的是文本。而当设计师或开发者考虑本地化时，他们应该考虑的是布局。为了实现本地化，你的设计应该使所有文本支持与英文50%的宽度差异。在显示同等内容时，亚洲语言需要的空间比英语少接近50%，而欧洲语言会比英语多接近50%。这个问题在设计按钮和帮助文本时尤其重要。
20、考虑屏幕全局光源
作为设计师，你应该早就了解每个平台都有其不可改变的屏幕全局光源(例如在iOS上，是在中心的正上方，或90度)。所有高光和阴影效果都应该和平台的光源相协调。
21、明确导航和组织控件设计
向你的开发者明确展示你的设计中包含的标签、下拉菜单或者其它闭合机制。在进行这种控件设计时，要尊重平台的设计惯例。开发者在进行开发时需要明确了解信息层次，因此你要确保你的设计清晰地展示你的意图。图层复合在这种情况下非常有用。
22、导出图形时不进行压缩
在导出时以PNG
alpha通道格式保存，除非被明确告知其它保存方式。除非被明确要求，否则不要使用JPEG格式。不要考虑图像文件大小，因为开发者或他们的开发环境会对图像进行最优化。以透明背景导出每个元素，而不是纯色，即便你设计中的一部分背景确实是纯色的。
23、询问阴影的处理
和你的开发者沟通是否要将阴影效果包含在导出图中。通常情况下，开发者会用CSS或写代码来应用阴影，这样做事实上会比直接使用预先保存的阴影位图更方便容易。不要假定阴影效果应该包含在图像中，虽然在设计原型时用图层展示阴影效果。
24、理解按钮的构建方法
应用或网页上的按钮几乎都不是用单一的图片创建的，而通常是下面两种情况：
a：3部分图像，左端图像，右端图像，重复的单像素宽的中间部分(允许图像的横向扩展)
b：9部分图像，上中下-左端图像，上中下-右端图像，以及3个重复的上中下中间部分(允许按钮的横向和纵向扩展)
最后想法
任何软件都应该是平面设计、交互设计和开发三者合作的结果，这三部分都同等重要。知道另外领域的需求对我们自己的工作非常有帮助。
以上就是小编今天为大家分享的关于Web前端工程师要掌握的工作经验的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识的小伙伴们记得关注北大青鸟web培训官网。最后祝愿小伙伴们工作顺利！
如何成为一名卓越的前端工程师
首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。
现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。
Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
如何成为一个伟大的前端工程师？
最近，我收到了我的博客的一个读者发来的电子邮件，不管出于什么原因，我真的开始思考了。这就是它说:
你好，Philip，问你如何成为一个伟大的前端工程师可以吗?
任何建议吗?
我不得不承认，当我被问到这个问题时，我很惊讶，因为我从来没有把自己当成一个“伟大的”前端工程师。事实上，我在这个行业工作的头几年，我真的认为自己没有资格胜任任何一份工作。我只申请了他们，因为我没有意识到我知道的太少了，而且我只有他们，因为面试我的人不知道要问什么问题。
话虽如此，我最终在每个角色中都表现得很好，成为了团队中的一名重要成员。当我最终离开的时候(因为下一个挑战我也没有资格)，我通常被要求雇用我的替代者。现在回想一下，我是如何接近这些采访的，我对自己对知识的重视程度感到震惊——尽管我刚开始的时候还缺乏这个领域的知识。即使我从个人经验中知道成功是可能的，但我现在的自己可能不会雇佣我以前的自己。
我在网上工作的时间越长，我就越意识到把好人和真正优秀的人区分开来的不是他们所知道的;他们怎么想。显然，知识在某些情况下是至关重要的，但在一个变化如此迅速的领域，你如何去获取知识总是比你在任何时候所知道的更重要(至少是长期的)。也许最重要的是:你如何利用这些知识来解决日常问题。
这里有大量的文章讨论你需要知道的语言、框架和工具。我想采取另一种方法。在这篇文章中，我将讨论前端工程师的思维方式，并希望对这个问题给出一个更持久的答案:你如何变得伟大?
不要只是解决问题，要弄清楚到底发生了什么。
有太多的人写CSS和JavaScript tinker，直到他们找到了有用的东西，然后他们才继续前进。我知道这会发生，因为在代码审查期间我经常看到它。
我经常会问别人:“你为什么要加float ?”或者“这个溢出:隐藏真的是必要的吗?”他们会回答:“我不知道，但如果我把它拿走，它就不工作了。”
JavaScript也是如此。我将会看到一个setTimeout用于防止一个race条件，或者某人停止事件传播，而不考虑它将如何影响页面上的其他事件处理程序。
我知道有时候你需要一些有用的东西，而你现在需要它。但是如果你从来没有花时间去理解问题的根源，你会发现自己在同样的情况下一遍又一遍。
花点时间弄清楚为什么你的黑客行为现在看起来很昂贵，但是我保证它会在将来节省你的时间。对你所处的系统有一个更全面的了解，就意味着更少的猜测和检查工作。
学会预测浏览器的未来变化。
前端代码和后端代码之间的主要区别之一是后端代码通常运行在您所控制的环境中。相反，前端完全超出了你的控制范围。您的用户在任何时候都可以完全改变的平台或设备，您的代码需要能够优雅地处理它。
我记得在2011年阅读了一个流行的JavaScript框架的源代码，并看到了下面的代码(为了简单起见而修改):
visie6= !isIE7&!isIE8&&!isIE9;
在这种情况下，IE6是IE版本的最流行的版本，大概可以处理IE6的版本。但当IE10问世时，我们的大部分应用程序都彻底崩溃了。
我明白在现实世界中特征检测不工作100%的时间,有时你必须依靠车行为或白名单浏览器的功能检测错误返回假阳性(或否定),但任何时候你做这绝对至关重要的预测几乎肯定的将来不再存在这些缺陷。
对于我们中的许多人来说，我们今天写的代码将会比我们现在的工作更长寿。我在8年前写的一些代码现在仍然运行在大型的生产网站上，这是一种既令人满意又令人恐惧的想法。
阅读规格
总是会有浏览器错误，但是当两个浏览器以不同的方式呈现相同的代码时，人们通常会假设，没有检查自己，所谓的“好”浏览器是正确的，而“坏”浏览器是错误的。但事实并非总是如此，当你错了这个假设时，你所选择的任何变通方法在将来几乎肯定会被打破。
一个及时的示例是flex项目的默认最小大小。根据规范，flex项的初始最小宽度和最小高度值是auto(而不是0)，这意味着。
