网页设计的7个致命罪

加载缓慢,难以阅读和导航混乱的网站对用户或客户来说并不好。在这篇文章中,我们介绍了我们的顶级网页设计bugbears。该网页设计工具资源格局从未如此好过 - 所以没有理由陷入这些陷阱。随意加入Facebook的要么推特让我们知道你觉得烦人的设计怪癖。

01.在白色背景的浅灰色的文本

light grey text on white background website

对比度差会使您的文字难以阅读,为什么我们经常看到它?

许多人认为不幸的设计趋势近年来已经占据了:在白色背景上使用浅灰色文本。有时缺乏色彩对比甚至与一个小字体配对,使得即使对于视力良好的人来说,阅读副本也不舒服,并且对于那些具有任何视力障碍的人来说完全无法接近,这是很多人。

灰色文字而不是黑色背后的想法是太多的颜色对比会导致眼睛疲劳。这是事实,但重要的是要确保你在黑白相对于幽灵般的文字的视觉冲击之间取得适当的平衡。首先要知道的是W3C可访问性指南说明大多数文本都需要4.5:1的最小对比度,所以确保你点击它是一个很好的起点。

Lea Verou的对比度工具有助于获取有关颜色的数学信息,还有一些示例文本,因此您可以看到它的外观。它将接受任何格式的颜色:单词,hsla或十六进制值,它会告诉您是否符合可访问性指南。

着色(如上图所示)是一个很好的选择,通过眼睛判断,它有滑块,所以你可以调整的东西,直到它恰到好处。请记住,在不同的设备和照明情况下测试文本颜色很重要 - 高端屏幕上的可读内容可能在另一台设备上看起来非常不同。即使您已达到可访问性的最小对比度,还有其他因素会影响最终用户的文本实际显示方式 - 因此测试是确保您做到正确的唯一方法。

02.模态

modals website

模态正在接管网络 - 这里有一些你可以使用的东西

模态是一个用户体验近年来已经接管网络的恐怖事件,增加了关于访问许多网站的过程中关闭侵入性流行的管理工作。它在移动设备上尤其糟糕,并且可能使您的网站非常令人沮丧或者使用辅助技术的人完全无法访问。MODALZ MODALZ MODALZ由设计师阿德里安·艾格(Adrian Egger)提供有关使用模态冲击的冲动时刻的替代选项的建议。

“模态是不明智的设计师和开发人员的责任,”他写道。他建议您使用扩展元素,非模态对话框,或者使用新页面可能更合适,而不是模态。如果你无法抗拒,或者其他人坚持使用模态,他会有一些指示让它们尽可能地容忍,并且要避免一些特别的陷阱。

03.没有优化图像

essential image optimisation website

关于如何确保您的网站图像得到有效优化的最低限度

大图像是不必要的页面重量的最大来源之一,优化它们是您可以做的最简单的事情之一,以提高您的网站的性能。

Addy Osmani的免费电子书,基本图像优化,是学习如何做到这一点的绝佳资源。如果你没有时间阅读整篇文章,他有一个方便的“tl; Dr”在顶部,指向你建议的自动图像压缩资源,以及其他有效的工具,如果你不去自动化。

响应问题社区小组(RICG)主席Mat Marquis的书图像性能关于这个主题也是一个很好的阅读,也看看我们的4个基本图像优化技巧

04.不优先考虑表现

performance budget calculator website

如果您希望站点以特定速度加载,请确定每个页面资源的大小

有关这方面的统计数据各不相同,但总体情况是,如果您的网站加载时间超过几秒钟,人们就开始成群结队地离开。根据本文,大多数人会选择浏览与他们所寻找的内容无关的快速网站,而不是包含他们想要的信息的慢速网站。当然,这种对缓慢的不宽容会对转换产生巨大影响。根据这些数字,加载时间从2.4秒减慢到3.3秒可能会损失四分之一的转换次数。

考虑到这一点,很明显,如果您想要创造良好的用户体验并最大化转换率,速度必须成为首要任务。这里有一些很好的资源可以帮助你:

表现电邮
此简报非常适合与最新的所有与性能相关的工具和信息保持最新状态。

绩效预算计算器
确定您希望网站加载哪种连接的速度,此计算器会告诉您可以在每种资源上花费多少页面权重。有滑块,因此您可以调整CSS,图像,字体等之间的分配。

浏览器卡路里
使用此浏览器扩展程序查看竞争对手的网站,该扩展程序会汇总您访问的任何网站的网页资源报告,并将其与网络前100个网站的权重进行比较。

粉碎杂志的前端性能检查表
除了核对表之外,本文还提供了大量的性能资源以及有关优化站点入门的一般指导。

另请阅读我们的帖子提高页面性能的四个技巧

05.使用你不需要的大框架

React homepage

你真的需要这个简单的网站吗?

如果你花时间学习一个像React或Angular这样的大框架,你可能很想将它用于所有的项目,但是需要大量的样板代码并为一个简单的站点引入复杂的技术和一堆依赖项通常不需要它是不明智的。当静态网站更快更精简时,为什么会膨胀?

克里斯科伊尔已经写了他对这种情况的看法这里,他讨论了使用框架的好的和不那么好的理由。

有时,即使对于更复杂的项目,从头开始编写内容也是正确的调用,因为它可以为您提供更多控制,最终您可以获得更精简的代码库和更少的依赖项。本文解释了为什么MeetSpace背后的团队决定在没有框架的情况下构建。

06.小正文

google fonts examples

考虑更大的正文以提高可读性

我们倾向于设计小于理想的文本有很多原因:在页面的第一个屏幕上容纳大量内容的压力;认为较大的文字看起来不那么复杂;以及大框架中的默认字体大小,仅举几例。

在他的帖子中你的身体文字太小了Christian Miller解释了使用更大文本的许多好处 - 它提高了可读性,从远处开始工作得更好(可能是您的网站在智能电视上观看),它提高了视觉效果和可用性。使用更大类型的另一个有趣的副作用是它改进了文案,因为它鼓励你使用更少的单词。

您网站的理想字体大小可能比您想象的要大,而Miller对如何设计更大的文本提出了一些很好的建议。

07.不优先考虑用户

try my UI website

用户研究将帮助您了解人们对您网站的需求

一个可靠的方式来结束一个糟糕的网站是优先考虑客户想要说什么用户想知道什么。以下来自燕麦片和xkcd的条目可能已经过时,但它们仍能很好地表达一种持续至今的现象 - 完全没有考虑到为什么有人访问你的网站。

燕麦片,作者列出了大多数人去餐馆网站时想要的东西,例如菜单,带谷歌地图链接的地址和营业时间。然后他展示了一个网站,展示了我们经常得到的东西:你不关心的图像或动画,关于'氛围'的文字或地方的精神或历史,作为可下载PDF的菜单,以及隐藏的相关信息。

Xkcd卡通为大学网站做同样的事情:人们想要课程列表,联系信息和申请表格,但他们会得到照片幻灯片,总统的信和机构的使命宣言。

避免这种情况的方法是进行用户研究和测试,即使这只是与用户样本的非正式对话。找出有人访问您网站的主要原因,他们想要实现的主要任务,并确定优先级。我们的更好的用户测试提示会让你开始。

阅读更多:



翻译字数超限