面向Web设计人员和前端开发人员的工作流提示

没有单一的正确的工作流来建立一个网站。但是有一些方法可以改善你的工作流程，让你的工作变得简单一些。

不管你是设计还是编写代码，通常都会有一些可以简化的过程。这取决于你是独自工作还是在团队环境中工作。但是，如果您知道如何调整您的流程，您就可以通过较少的手工任务更快地完成项目，并且您的工作流可以通过DIY工具或自定义布局构建器大大提高。

在过去，我们已经讨论了响应性工作流，在本文中，我想分享常用的设计和开发工作流优化策略。我将为创造性的过程提供技巧和资源，帮助web设计人员和开发人员以更精确和精确的方式构建他们的项目。

从一个线框开始

从每一个web项目的框架开始。这可以帮助你充实内容、布局样式，以及页面元素的组织，比如图标，导航栏和CTA按钮。

最初的目标应该是用低保真线框图来构建一个粗略的布局，让他们快速和松散，可以节省很多时间。

如果你需要一些线框模版来启动，我推荐Noupe的图库，里面全是数字线框。

但我个人比较喜欢用铅笔在纸上快速写生。这是我对任何想要快速建立线框图的人的最高建议。在纸上抹除会更简单，你对整个画法的控制就更大了。

不要害怕浪费许多的草稿纸，谁都不会一次就做对，我也不认为其他设计师能做到。

如果可能的话，在进入模型之前，保证你的线框图已经精确。

这样一来，就可以减少对管道的猜测，而开发的每一个阶段都将进一步阐明您的原始概念。

计划与行为

一旦你大致了解了网站的外观，你就可以开始了解细节了。这可以从一个模型开始，但我更喜欢先构建一个高保真的线框。

这包括将样例小部件和web拷贝放入到看起来不错的线框中，并将用户引导到页面上。

这是一项艰巨的任务，对于每个项目都会略有不同。但你应该考虑你的用户想要做什么，并在整个过程中记住这一点。

同时考虑可用性和你的书面拷贝如何影响用户体验。

编写内容没有唯一正确的方法。但文章应该引人注目，并引导用户进一步进入网站。

在规划高保真线时，它帮助添加图像占位符和书面副本。通过这种方式，可以看到布局最终如何不使用填充内容。

但也要考虑大标题和自定义样式的页面拷贝的价值，你的标题文本将用户吸引到每个部分，你通常只有几秒钟的时间来吸引他们的注意力。

在设计页面文本时，始终围绕着两个概念:清晰的对比和大量的空白。

在此步骤中不需要选择字体或文本颜色，如果你的线框很容易浏览，那就一目了然了。

理解用户行为使构建帮助用户绕过站点拷贝变得更容易，这个高保真/轻模型可能是最重要的阶段，因为你一旦进入了完整的模型设计，你就会知道布局具有的可读和易于使用。

信任前段框架

有很多关于前端开发框架的讨论。这些主要包括诸如反应、角度和灰烬等库。

所有这些都可以在构建新站点时节省时间，假设您知道如何使用您的选择框架。我们的目标不仅仅是简化前端开发，还可以构建整个网站。看看这个线程再学一点。

任何框架的首要目标都是将复杂的功能分离，帮助你用更少的代码构建更多的函数。现代JS框架处理用户输入，并控制数据如何从后端转移到前端。

新的角度2的发布做得很好，引起了很多人的注意。

但我真的很欣赏余烬的细节。JS从盒子里出来，带有路由和异步行为的功能。余烬学习曲线很陡峭，但是有了正确的学习资源，可以快速移动，甚至享受学习过程。

在构建一个新项目时，框架的最大优点是模块化。

你就知道从哪里开始，如何扩展，以及如何用相同的结构组织新文件。架构与您编写代码的方式一样重要。

如果你想了解更多查看本指南,看看其他开发者实现前端框架为现代web项目。

测试和调试

现如今，浏览器的怪癖已经不那么常见了，但仍然存在。因此，测试仍然应该是你的开发工作流程的一个重要部分。

除了主要的浏览器bug之外，在某些浏览器中，在诸如Gecko和WebKit这样的浏览器引擎中，某些浏览器的渲染范围、模式、大小和相似属性之间的细微差别。

测试的一种方法是在开发计算机上拥有所有这些浏览器。在对代码进行大修改之后，只需检查所有浏览器中的工作。然而，这很快就会让人感到厌烦。

相反，尝试使用浏览器测试工具来节省时间和挫败感。以下是一些最受欢迎的选择:

·         BrowserStack

·         Browser Shots

·         Browserling

建议开发人员在他们的工作流中添加响应性测试工具。

这可以帮助你测试个主要断点在相应布局无需不断调整和切换浏览器。

这你推荐两个扩展是响应式WEB设计测试器和ViewportResizer。两者都是完全免费的，而且对实时测试非常有用。

另一个工具是，浏览器中的调试控制台。对于测试JavaScript代码和查找HTML/CSS代码验证潜在错误非常有用。

谷歌有一个完整的指南，告诉控制台窗口如何开始和每个面板都该做什么。

所有这些工具都对调试过程非常有价值，但是每个开发人员都将进入他们自己的工作流程，因此由您来决定哪些工具提供了最重要的价值。

结论

没有单一的方法可以在网络上建立一个工作流。但是，可以采用最佳实践和技术，使流程更流畅，更易于管理。

希望这些技巧可以帮助你在设计和开发方面塑造你的工作流程，现在构建和发布一个新的网站很容易，因此，如果你不断的发布新项目，这些小技巧可以在长期内创造一个不同的世界。