作为网页设计师最有可能犯的错误

已发表: 2016-06-07

所有的网页设计师都想要完美。然而，他们只是人类，错误总是会出现。很容易忽略一些细节。世界上没有不犯错误的设计师，避免错误通常是一段时间后发生的事情。

我们现在将讨论网页设计师经常犯的一些最常见的错误，那些你很可能已经至少犯过一次的错误。改正你的坏习惯，克服你目前犯下的障碍，这样你的工作就会比以往更好。

闪光灯的使用

在现代网站设计中，我们很少看到使用 Flash，即使它的功能非常惊人。我们面临着为访客提供令人印象深刻的动画体验的可能性，但有相关的包袱。

在网页设计中使用 Flash 会出现不同的问题。由于缺乏支持和使用的编程语言不同，您的加载时间更长，移动用户遇到问题。目前支持 Flash 的设备数量非常少。此外，我们预计未来不会增加支持。全新的库似乎更强大、更受欢迎，尤其是那些基于 JavaScript 的库，如 AngularJS 和 jQuary。

使用非常大的图像

网页设计的现代趋势是在整个网站中使用大图像。这肯定会让体验更加愉快，用户会看到一些很棒的东西，但是设计师和开发人员需要注意一些复杂性。

每当使用较大的图像时，页面加载会自动增加。对于网站访问者来说，这可能会导致非常糟糕的情况。好消息是我们确实可以使用各种不同的工具，这些工具对优化图像有很大帮助。您可能要考虑的包括：

GruntJS-ImageMin
图像优化

PrePros 等应用程序可以帮助在应用程序内部自动优化图像。问题是工具将有助于工作流，但不会解决与加载时间相关的巨大问题，至少不能完全解决。

许多设计师现在使用 SVG。他们使用代码在浏览器环境中制作动画和绘制图形。因此，我们最终获得了加速的页面加载和引人注目的各种元素。

我们还应该强调一个事实，即由于无响应因素，较大的图像会使网页设计复杂化。我们正在谈论一个设置了高度和宽度的设计元素。浏览器会缩放图像，但我们有相同的文件大小。

W3C 现在致力于将“ <picture> ”用作 HTML5 元素。这将允许根据查看屏幕的宽度调用不同大小的图像。发生这种情况时，观看者的体验会好很多，但在实施之前，您应该避免使用较大的图像。

使用固定宽度和高度

对固定尺寸进行编码时，会自动限制用户的适应。我们有变通办法，但我们必须始终考虑创建一个 100% 响应的网页设计模式。在 CSS 中设置的固定高度可以限制用户的可视区域。可以通过媒体查询调整来解决这个问题，但是添加的额外代码会导致性能问题。你真的不需要那个。在大多数情况下，您不应该使用固定尺寸。在现代网页设计环境中必须尽可能避免它们。

对设计拟合做出假设

网页设计师通常使用 Adobe Photoshop 或 Sketch 等软件。工作完成后，常见的假设是在响应式工作流中有一个特定的断点。被视为标准的屏幕宽度将涵盖许多不同的屏幕尺寸，但不能确定是否涵盖所有这些尺寸。我们在市场上有成千上万的移动设备。创建一个适用于所有事物的设计是非常困难的。

当您在特定宽度上工作时，您必须计划和前瞻性思维成为网页设计师的一项重要技能。您必须确保没有做出假设，并且在常规图形编辑器工作结束后您实际上会在浏览器中进行工作。

使用过多的效果和动画

即使在世界上一些最受欢迎的网站上，您也可以看到这个问题。如此多的网站提供了令人惊叹的体验，其中许多提供了真正独特和令人惊叹的东西。但是，这并不意味着添加尽可能多的效果和动画。将网页设计的原则与在功能和图形影响之间找到正确组合的目的相结合是非常重要的。

过度使用动画和效果有两个大问题：

页面加载时间增加
效果和动画对于旧电脑来说会有问题

目前流行的技巧和动画是那些添加淡入、向上或向下元素的。它们看起来很棒，并且会使网站看起来很棒，但这并不意味着您应该始终使用它们。查看对于大多数访问者将使用的设备而言，整体页面加载是否过多，并且永远不要忘记页面加载速度。这些非常重要，需要始终为游客提供出色的体验。

不正确的样式链接

这是一个比你现在想的要普遍得多的错误。链接需要始终做他们所做的事情。这意味着当链接的样式不正确时，人们不会知道它们是链接。我们需要始终考虑访问者，因此链接必须始终看起来像链接。您可以尝试而不是坚持标准的蓝色下划线，但您永远不应该过度使用它。

在 CSS 中不使用 DRY

如果您不知道这一点，DRY 的意思是“不要重复自己”。它是网页设计中的一种方法，实际上意味着帮助设计人员保持代码简洁和克隆。始终建议仅使用必要的代码进行网站样式设置。

使用传统 CSS 时，需要对在其他元素中使用的特定元素进行大量重复。选择器最终变得非常大，并且需要花费大量时间来实际编写。当您在设计中使用类而不是样式化 HTML 页面中的每个元素时，一切都会变得简单得多。

目前一个非常好的主意是使用像 Sass 这样的预处理语言。它们在必要的 CSS 技术方面非常有用。所使用的语言将加速开发和设计，因为它们包含变量、函数、混合、嵌套等特性。然后将生成的代码编译成 CSS 代码。 Web 开发人员和 Web 设计人员现在可以使用更少的代码行，并且可以轻松避免重复，这要归功于这些语言。

优雅降级

我们可以将优雅降级定义为一种构建 Web 功能的实践，该功能能够在现代浏览器中提供特定的用户体验级别，同时在旧浏览器中降级以降低用户体验级别。这听起来有点复杂，但作为一个例子，我们可以讨论 Internet Explorer 8 和 7 的支持。您会惊讶地发现大多数用户根本不会长时间更新浏览器。因此，您需要添加优雅降级，以便为两个浏览器版本提供适当的支持。

现代网站很容易开发，但在以后的某个时间点，您最终会注意到这样一个事实：在旧版浏览器中，由于特定的依赖关系，页面看起来非常糟糕。

渐进增强

这与上面提到的 Graceful Degradation 类似。不同之处在于，该过程是从每个 Web 浏览器支持的基本体验级别开始反向处理的。然后，设计人员/开发人员添加了可供使用它的浏览器使用的增强功能。

这个选项和上面的选项都很复杂。它们通常只由真正优秀的设计师使用。但是，对于现在可用的许多浏览器，我们需要认真考虑这些选项。网页设计师通常会让客户决定要支持什么。不过，您需要尝试使用这些方法，以便为在目标受众中特别活跃的用户提供真正出色的体验。

导航问题——非用户友好

任何网站最重要的部分之一就是导航。设计师必须能够让游客体验自然。目的是使导航变得非常简单和直观。当设计考虑到这一元素时，用户会自动理解这种体验是正确的。

每当用户体验不佳时，我们都会看到访问者感到沮丧。他们根本不会再次访问特定站点，而是会查看其他页面以解决他们的问题。设计者需要始终考虑可用性。设计必须看起来很棒，但你永远不应该忘记功能。易用性是必需的，如果缺乏这一点，整个设计将毫无用处。

缺乏对内容的关注

“形式追随功能”是二十世纪现代建筑工业设计阶段出现的一个非常普遍的建筑原则。这是您在网页设计中始终需要记住的原则。

就必要的功能而言，Web 和图形设计与现代建筑非常相似。对象形式必须首先基于预期的目的或功能。就网站而言，我们可以将其视为遍布互联网的信息数据库。用户将访问网站以获取特定数据。这是内容介入以提供该数据的地方。当访问者最终到达一个站点并且没有找到数据时，他会在其他地方寻找它，甚至不看设计。同时，如果设计使得定位或消化数据变得非常困难，也会出现同样的结果。

互联网用户现在希望访问信息，并且他们希望这种访问速度更快。形式胜于功能最终在网页设计中非常重要。不考虑这一原则意味着重点放在外观而不是提供的内容上。结果，网站不会真正流行。内容需要始终脱颖而出。

结论

从根本上讲，最常见的网页设计错误与试图提出真正美丽和独特的东西有关，而没有考虑访问者实际访问网站的原因。正因为如此，您希望始终有必要的耐心将真正好的设计与完整的功能结合起来。

始终创建功能强大的网站，并随着时间的推移不断学习新技术。世界上最好的网页设计师不断学习，并始终了解可以做和不能做的所有事情。您想创建您的网页设计，与客户交谈，然后确保访问者会欣赏所提供的内容。这说起来容易做起来难，但随着时间的推移，一切都会变得容易得多。

确保你总是花费尽可能多的时间来创造真正伟大的东西。网页设计中另一个未提及的错误是没有让自己有必要的时间来实际创建完美的网站设计。这通常是因为客户需要在最短的时间内完成工作。请确保您始终有足够的时间来创建您知道自己可以做到的出色网页设计。