web开发的概念_Web开发概念所有Web设计人员都应理解

关于设计师与开发人员之间的鸿沟 ，有很多话要说 。 当然，有许多设计师/开发人员混合体可以理解硬币的正反两面 ，但它们之间相距甚远。

创意项目得益于适当的沟通 。 但是，当设计师和开发人员不确定如何与他人交谈时，这可能会很困难。 我认为设计人员不需要知道如何编写正确JavaScript，开发人员也不必掌握排版选择。 但是我认为有些基本主题是双向的。

以下主题是我个人对所有设计人员都应该理解的重要Web开发思想的个人看法 。 我自己作为设计师/开发人员，我知道这对两个领域的研究都会造成混乱。 但是，值得始终努力学习，因为清晰的了解可以增进沟通，并使设计师对创意团队更有价值。

前端代码行为

网页设计师通常被认为具有前端技能和设计才能。 这是一个热门话题 ，主要是因为没有正确的答案 。

设计师应该做的事情，他们是舒服 。 如果那仅意味着进行视觉设计工作，那就这样吧。 但是，对前端技术的简短理解可以使同一位设计师在为开发人员创建资产时更加直观 。

我相信每个设计师至少应该了解前端开发的三种基本语言 （HTML，CSS和JS）以及它们的用法。 例如，大多数下拉菜单都依赖JavaScript，但是也只有CSS替代 。

当设计师制作下拉菜单时，他们可以考虑通过代码实现它的复杂性 。 了解哪些元素需要JavaScript的设计人员可以更好地了解他们要求开发人员构建的内容。

这是可能的， 而无需学习编写一行代码 。

CSS是用来样式化网站的 。 除了CSS动画外，它几乎都是静态的，并且CSS在页面上创建了大部分视觉效果 。 大多数动态功能都是使用JavaScript创建的。

如果您能够理解这种鸿沟，它将为设计工作做出有意识的努力。 这也将迫使UX运动设计人员考虑为接口动画做多少工作。

响应技术

每个Web设计师至少应该知道术语“ 响应式设计” 。 这使网站可以适应不同的屏幕尺寸 ，每个屏幕都属于不同的布局。 应用新布局时的设备尺寸由断点定义，这些断点添加在CSS文件（的一个）中。

断点由某个像素宽度 （和/或有时为高度）指定，即最小或最大，布局将在此宽度上适应该屏幕尺寸。 因此，响应式布局在1080px显示器上与在320px智能手机上看起来会有所不同。

要查看断点在实际站点上的工作方式，请访问Media Queries网站。

作为设计师的工作是要考虑每个断点如何影响模型 。 您可能需要设计几个组合，每个组合都适合不同的屏幕尺寸 。

了解了CSS断点定义了布局更改时的条件后，您将可以更轻松地将这些资产交付给开发团队。

用设计考虑模块化

开发人员始终希望尽可能多地重用代码 ，因为这种方法使开发工作不再那么冗长，并且减少了文件大小 -实际上，这是一项重要的代码优化技术。

模块化设计描述了一种利用“模块”创建网站的方法，该模块可以随时间重复使用 。 考虑按钮，表单输入，标题样式或带有精美样式的块引用。

如果以模块化方式设计元素 ，则开发人员可以更轻松地使用可重用CSS类对布局进行编码。 考虑在哪里可以合理地重用相同的颜色，纹理和页面元素始终是一个好主意，但是您需要对此保持聪明， 以免损害整体美观 。

最好注释一下在不同的模型中复制了哪些元素，以便开发人员可以使用重复代码标记网站的这些部分，从而使开发更快，更简单。

模块化设计与原子设计有关 ，这两种方法都非常适合开发人员。 但是， 可视化可以帮助您理解代码的工作原理，因此，如果您在努力使模块化设计可视化，请查看这篇文章以查看一些示例。

了解视网膜图像和SVG

通常，设计人员的工作是准备图像，捕获任何必要的照片并从头开始设计图标。 这意味着设计人员将完全负责交付开发人员最终将其编码到布局中的视觉资产 。 这就是为什么了解视网膜大小并将视网膜支持的资产与最终模型一起传递给开发人员的重要性。

如果您想了解有关视网膜设计工作流程的更多信息，我将强烈推荐此Smashing Magazine帖子 。 Retinize（恢复）它是Photoshop操作的免费集合，可以自动创建资产的视网膜版本 。

大多数设计师已经知道支持@ 2x图像 ，但是较新的iPhone 6+设备具有@ 3x分辨率 。 但是，有些项目不会担心@ 3x图像大小，因此在最终确定任何资产之前，请与项目负责人联系。

最后要考虑的是SVG在网络上的发展。 所有现代浏览器都支持SVG ，这是基于矢量的图像格式 。 这意味着SVG图标将自动缩放而没有任何质量损失 ，因此您不需要视网膜资产即可制作SVG图形。

但是，并非所有创意团队都愿意使用SVG进行网页设计。 它们肯定受浏览器支持，但是在某些情况下，实现起来也很棘手。 这就是为什么沟通对于成功的设计师/开发人员关系至关重要的原因。

讨论使用矢量图形的利弊，并确定对每个项目最合适的方法。 只需了解这些功能，您就可以与开发人员进行清晰的交流，甚至可以帮助他们编写布局代码以支持视网膜。

了解辅助功能

渐进增强和正常降级是处理同一问题的两种不同方式：可访问性。 并非所有用户都将使用支持网站100％动态功能的设备或运行浏览器。

这些用户仍然应该获得有效的体验 ，并且需要使用适当的编码来处理。 一些屏幕阅读器可能会忽略所有JavaScript和CSS代码，但该网站仍需要正常运行 。

我最近发表了一篇详细介绍渐进增强的文章，因为这是我偏爱的开发方法。 渐进增强功能从非常基本的功能开始 ，然后逐渐发展为更多的“高级”功能。

在任何一种情况下，都不太可能要求设计师设计模型。 但是，设计师必须理解这些术语及其含义，这一点很重要，因为它们确实会影响开发过程 。 对于可访问性非常重要的项目，尤其如此。

收盘时

我跳过了一些主题，因为我认为它们是可选的。 版本控制，错误处理和JavaScript动画是设计人员可能想要研究的一些更复杂的主题。

但说实话，本文中要解决的问题不仅仅可以帮助设计人员了解开发团队的要求。 通过仅浏览Web开发的表面，您将获得洞察力 ，可以帮助您交流想法并同情生产过程中发生的问题。

如果您正在寻找更多相关内容，请查看以下文章：

• 如何与开发人员有效沟通 （smashingmagazine.com）
• 帮助设计师和开发人员学习相互理解 （uie.com）
• 学习编码为您提供了作为UX设计器的优势 （jessicaivins.net）

翻译自: https://www.hongkiat.com/blog/web-dev-concepts-for-designers/