所有的趋势都值得吗？ 网页设计师最常见的 5 个用户体验错误

“当所有多余的东西都被丢弃，人类发现简单和专注时，优雅就实现了：姿势越简单，越清醒，它就会越美丽。” -保罗·科埃略

网页设计师的使命是创造引人入胜的用户体验，帮助网站访问者完成任务，并提高转化率。 在这个过程中，他们往往只注重美学，走捷径，最终依赖于各种常见的设计模式和趋势。 这样做的危险在于，它们可能会被流行趋势所左右，因此，由于趋势部署不当，会导致常见的用户体验错误。

当谈到网络时，人们不想学习东西，他们想做事情。 网络上有很多例子，设计师选择只关注视觉吸引力，这样做牺牲了可用性。 他们认为推动设计的“令人惊叹的时刻”本身就足以吸引用户。 但可悲的是，用户很难理解 UI，使用网站确实有困难，而且网站的跳出率飙升。

正如 Kate Rutter 所说，“丑陋但有用胜过漂亮但毫无意义。” 有效使用网页设计模式和趋势的关键是在美观和增值之间找到平衡。

让我们看看一些常见的用户体验错误。

网页设计常见的 UX 错误 1：大而固定的标题

在网站上可以看到越来越高的粘性标题。 具有固定位置并占用大量空间的“品牌块”和导航菜单。 它们始终粘在浏览器窗口的顶部（“粘性标题”），并且经常在内容滚动到它们下方时阻止内容。

大品牌网站上的一些标题高度超过 150 像素。 他们的价值在哪里？ 固定元素，例如粘性标题可以带来真正的好处，但网页设计师应该小心使用它们——有几个重要的用户体验问题需要考虑。

粘性导航标题可能太大而无法舒适

如果已经决定使用粘性导航标题，最好与用户一起测试。 过度使用内容并在粘性导航标题中填充内容是一个常见的 UX 错误。 使用固定的标题，浏览者应该仍然感到舒适。 未能找到适当的平衡可能会导致为主要内容留下少量空间，并为访问者带来令人窒息、幽闭恐惧的网站体验。

有时使用 CSS 有一个简单的解决方法：通过使粘性标题略微透明，人们在滚动时仍然能够通过它看到内容，这使得内容区域感觉更加充实。

下面是一个高粘性头球的例子： ATP 在 Roger Federer 上的球员资料页面。

该网站的置顶标头高度超过 180 像素！ 在某些笔记本电脑上，这超过了整个页面高度的 30%：这是可以避免的糟糕的用户体验。

不考虑移动设备上的粘性导航标题 UX 问题

有些人可能正在使用大型高分辨率计算机显示器，其中粘性导航标题可以加速交互，但移动设备呢？ 毫无疑问，大量的网站访问者会从移动设备访问该网站，因此固定标题可能不是最好的主意。 幸运的是，响应式设计技术可以为不同平台设计不同的解决方案，并坚持使用用于桌面浏览器的粘性导航标题（双关语）。

Coffee with a Cop 网站也有一个固定的标题，但要小得多——不到 80 像素高。

在这种情况下，标题导航可以说是高分辨率屏幕的正确解决方案，因为它可以实现更有效的导航。 在较小分辨率的屏幕上，标题也是固定的，但会占用大量空间。 移动设备上粘性导航标题的绝佳替代品是永远存在的汉堡菜单。 尽管这种模式不是通用的问题解决方案，但它确实释放了大量空间。

网页设计常见的 UX 错误 2：薄而轻的字体

如今，轻薄的字体在众多移动应用程序和网站上无处不在。 随着屏幕技术的进步和渲染的改进，很多设计师都在使用它们，因为它们优雅、干净、时尚。 然而，细字体会导致可用性问题，从而阻碍用户体验。

网站上所有文本的目标都是清晰易读，而细字体会严重影响可读性。 并非所有访问者都会在能够很好地呈现薄型的显示器上查看网站。 在配备 Retina 显示屏的 iPhone 或 iPad 上阅读某些灯光类型具有挑战性。

最重要的是，文本必须清晰易读。 如果用户无法阅读您的应用程序中的文字，那么排版的精美程度并不重要。

Apple 人机界面指南

苹果指的是移动应用程序，但同样的原则也适用于网站。 易读性是强制性的，而不是为了良好的可用性而可选的。 如果内容不可读，则将内容放在网站上是没有意义的。

在使用瘦类型之前，需要考虑以下一些常见的 UX 错误：

使用轻薄字体，因为它很时髦

字体不仅要好看，还要清晰易读。 为了达到适当的对比度和易读性，设计师应该在他们的设计中争取最佳组合：尺寸、重量和颜色。

最好在各种设备和屏幕尺寸上测试网站，以确保所有网站文本清晰易读。

这导致我们出现下一个常见的 UX 错误：

未在所有主要设备上测试文本易读性

轻薄型在许多设计师昂贵的微调显示器上可能看起来不错，但也必须考虑经常在更便宜、不合格的显示器上看到我们设计的普通用户。 最佳做法是检查字体在所有主要设备上的外观：台式电脑、笔记本电脑、平板电脑和智能手机。

例如，在测试移动设计时，让参与者在白天在移动设备上使用该网站——现实世界的用户并不总是拥有完美的浏览和照明条件。 如果在网站上使用细字体，有一个简单的方法可以适应移动用户：在移动设备上指定较粗的字体以获得更好的可读性。

网页设计常见的 UX 错误 3：低对比度文本

在现代用户界面设计中，使用低色彩对比度元素也变得很流行。 它源于极简设计趋势，因为通过减少某些区域的对比度，设计会显得“极简”。 设计师无法减少需要呈现的信息的复杂性，因此他们在设计中使用了低对比度。

我们已经介绍了细字体，但还有一个更大的陷阱：浅色字体与低对比度的结合，由于可读性差而严重阻碍了用户体验。 设计师应该尽其所能避免这种可用性陷阱。

正文中的文本对比度低

Cool Springs Financial 在其网站上使用 Helvetica 的精简变体作为正文。 虽然它看起来很优雅并且有助于提供美观的 UI，但在多个平台上很难阅读。 虽然低对比度不一定是坏事，但它会使文本难以阅读，从而对网站的可用性产生负面影响。

不测试文本对比度

有一个用于在 Web 上进行对比度检查的漂亮工具，称为 Colorable，它将帮助设计人员根据 Web 内容可访问性指南设置正确的文本对比度。 一旦设计师知道他们使用了正确的文本对比度，他们就可以在他们的网站上调整其他颜色，并进行快速的多设备/用户测试，以确保文本可读。

网页设计常见的 UX 错误 4：滚动劫持

另一个在网络上流行的高风险趋势是“滚动劫持”。 实现这一趋势的网站会控制页面滚动（通常使用 JavaScript）。 当人们遇到它时，他们不再能够控制页面滚动并且无法预测它的行为，这很容易导致混乱和沮丧。 这是一个冒险的实验，可能会损害网站的可用性，最坏的情况是引发“计算机狂暴”。

有些网站可以逃脱滚动劫持，但这并不意味着每个人都可以。 例如，许多网页设计师使用滚动劫持、视差效果和各种产品的高分辨率图像来跟踪 Apple 的网站。 Apple 有自己的目标市场、独特的概念和网站的独家内容。 由于每个站点都有独特的问题，它还必须有针对这些问题量身定制的独特解决方案。

不与真实世界的用户进行测试

在借鉴流行的想法或 UI 模式时，最好在真实用户身上测试网站原型，以避免 UX 问题。 例如，简单的可用性测试将揭示滚动劫持的实现是否可行。 如果没有测试，设计人员无法知道滚动劫持是否会起作用，而且做出假设通常代价高昂。

流行的个人博客网站 Tumblr 在其主页上使用滚动劫持。 虽然这样做可能会有风险，但可以肯定地假设他们非常了解目标受众以及他们想要呈现的酷炫时尚的用户体验。 当站点访问者开始滚动时，滚动被劫持，人们被带到下一个部分。

长滚动页面分为几个部分，可通过大量饱和颜色和窗口左侧突出的指示点来区分。 结果，Tumblr 的主页感觉就像一个巨大的垂直轮播，访问者可以控制，而不是一个令人不快的、有自己想法的实验性网站。

网页设计常见的 UX 错误 5：轮播

轮播——一种用于轮播各种内容的幻灯片——在网络上非常常见，尤其是在登录页面和主页上。 虽然它们可能很有用，但它们有许多可用性问题，因此有资格成为另一个常见的 UX 错误。 根据 Nielsen Norman Group 的说法：“人们经常会立即滚动浏览这些大图像而错过其中的所有内容。” 它可能会对用户体验产生负面影响，因为访问者可能在某些旋转幻灯片中看不到有价值的内容。

网站轮播可能无法为用户提供价值

如果做得好，轮播可以用醒目的大图像吸引用户。 问题是，旋转木马通常不会增加任何附加值，而只是用于装饰，只是因为其他人都在使用它们而被包括在内。 一种测试网站轮播是否有意义的方法：写下轮播为访问者提供的三个好处。 如果找不到三个有意义的好处，它不会增加任何价值。

上一个和下一个箭头的可发现性较低

如果无法发现下一个和上一个箭头，则网站轮播中的重要信息可能会保持隐藏状态。 这些控件还应该与移动设备兼容。

通常没有箭头来控制旋转木马； 仅包含幻灯片指示点以推进幻灯片。 但是，它们通常对比度低，可发现性低，并且缺乏足够大的可点击或可点击区域。 小的可点击目标可能会导致糟糕的用户体验、沮丧的网站访问者以及快速退出网站。

例如，Floresta Longo 基金会网站在其主页上有一个旋转的图像轮播。 它设置为自动播放并在五张照片中旋转。 然而，上一个和下一个箭头很小且透明，这使得它们很难被发现并且难以点击。 没有显示幻灯片访问者的指示器，也没有标签来表示图像所代表的内容。 这些图像不是链接，而是纯粹的装饰。 虽然这种类型的轮播可能对吸引访问者有一定的价值，但总的来说它还有很多不足之处。

结论

网页设计趋势，如果不仔细考虑和谨慎实施，可能会导致几个常见的用户体验错误。 UX 设计师应该运用他们最好的判断力，不要害怕创新，但为了确保网站的可用性，最好让他们与真实世界的用户一起彻底测试他们的设计。

在疯狂泛滥的网页设计趋势中，流行的事物来来去去。 在这种混乱中，美学、效率和可用性的平衡使用在区分已被证明是最强大并获得最多用户接受度的 UX 趋势方面发挥着重要作用。

网页设计师可以想出最酷的配色方案，最华丽的滚动动画，或者最梦幻的视差效果，但是如果人的交互因此受到影响，那么用户体验就会很差，人们会很快继续前进。 另一个网站只需点击一下即可。

进一步阅读 Toptal 设计博客：

• 响应式设计——最佳实践和注意事项
• 从浏览器接近网站设计过程
• 设计师编码——我们应该知道多少？
• UI 设计最佳实践和常见错误