原文链接 Website Design: 10 Common Mistakes That You Will Avoid (After Reading This Post) -- 作者 anna-kwasny
网站设计是一件很有趣的事情。它就像构建一个全新的小世界，其按照我们所期望的方式运行。但是，尽管喜爱这种创造性的挑战，但是我们还需遵循特定的规则，你的网站不仅仅符合个人的喜好，也要受访问站点的人们欢迎。为了帮助你避免网站创造者经常陷入的困境，我们汇集了十条常见的网站设计错误，且我们应该怎么处理它们。
错误 1：图片上方太多文本
当设计网站时，每个人都喜欢好看的视觉。但是网站的视觉往往需要一些文字来支持。访问者能够很快知道页面是关于什么的。激发网站访问者的兴趣和好奇心同样重要。实现这一目标的最佳方法是将复杂的视觉效果和优秀的文字评论结合起来。然而，我们要注意。在照片上方放置太多的文本会造成阅读困难。
如果你在照片上放置文字，记住 -- 颜色对比是你最大的朋友。你需要与这部分工作建立良好的关系，因为它是每个网页设计过程的自然元素。幸运的是，有一些简单的方法可以实现准确的色彩对比，尽管必须在图片上放置大量文本。
可能的解决方案：
- 使用均匀的深色背景
- 调低照片的亮度（使其暗度约
40%） - 在你的照片上放一个黑色方块，然后将文字放在方块上
错误 2：一节诗歌中太多文本
为了让你的网站使用起来舒适和容易，你必须考虑到读者的注意力范围。一节诗歌中的最佳词数不应该超过 12 个。如果超出此限制，读者可能会分心，并放弃阅读。
值得记住：
- 一节诗歌保持字数
9-12个
错误 3：字体（种类）太多
我们知道，字体很漂亮。我们很欣赏它们多变的颜色！然而，网站的设计经常遵循规则：少就是多。在处理字体时，你有一个完美的机会来应用该规则。如果你得意忘形并使用太多不同的字体，你的网站看起来就会很乱并且更难阅读。
使用技巧：
- 页面中使用
2-3类型的字体。不要太多。 - 根据用途选择字体 --
1种用于标题，1种用于正文内容。 - 确保你选中的字体在一起看起来协调。
错误 4：颜色（种类）太多
如同使用太多字体那样，使用太多颜色也很糟糕。为了让你的网站更加现代化和专业，你需要通过合理的方式来衡量（颜色）。太多颜色会分散读者的注意力。他们可能不能够专注在你网站真正的内容上。太多颜色也会让你的网站看起来就是自制的且过时。
我们的建议：
- 网站中选择三种颜色：主色调、次色调和强调色。应用它们时使用
60 / 30 / 10的比例。 - 确保你选择的颜色搭配很好。
- 使用适合网站宣传的内容，服务或者产品类型的颜色。
错误 5：忽略对比度标准
我们已经提到过对比度的重要性，它是一个至关重要的问题，值得被我们拿出来单独讲。
如果你没有遵循全局对比的规则，你的网站不仅仅变得更难使用。而且，对于一些人完全无法阅读。创建对比度标准并不是为了让你作为一个网页设计者更加困难（即使有时候感觉如此）。实际上恰恰相反 -- 对比度标准是为了帮助设计师并帮助他们尽可能构建高质量、专业和可访问的网站。
很好，我们知道要遵守规则，但是，你如何知道可能存在的每种颜色组合以及它们之间的关系呢？嗯～你不需要知道。网络上总是有很多资源帮到你。检查你网站的对比度，你可以使用免费程序 Color Contrast Analyzer。
看这个例子，下面是以我们的一个站点测试产生的直观的表单：
当我们开始开发网站，我们犯了个将橙色背景和白色文字组合的错误。这看起来像个不错的主意。然而，如果你看下面的截图，你可以看到它不符合对比度的规则。
为了修复这个问题，我们将文本的颜色改为黑色。
首先，这种规则很难靠直觉。然而，一旦你习惯使用它们，你会看到自己的网页设计在人们眼中的不同之处。
我们的建议：
- 除非你已经有经验来应用对比度标准，否则请始终使用专业工具检查颜色组合。网上有很多选择（比如：Color Contrast Analyzer）
PS: 译者加 -- Color Contrast Analyzer 不了解，可以网上搜索下使用教程
错误 6：图标和按钮的样式不一致
它可能看起来像是一个细节，而且由于其重要性较小，很容易被忽略。但是，事实上，这样的细节可以决定整个用户体验。如果你使用不同风格的图标，整体印象可能会倾向于（给人）混乱和自制的感觉，而不是用专业的设计来打动用户。
为了避免该影响，请仔细查看你的图表。你希望它们是填充的还是线性的？选择你的风格并保持统一。
有用的资源：
- 你网站的建设者
- Freepik
- Flaticon
- Iconoir（开源）
- Boxicons（开源）
错误 7：字体和文本类型不匹配
字体选择对你的网站可读性和整体成功至关重要。毕竟，如果你因为字体选择不当而不能理解它的内容，那么漂亮、实用的网站有什么用？确保你的网站易于使用和阅读，总是要将字体样式和文本类型相匹配。
部分技巧：
- 长文本别使用浅色字体
- 长文本使用
300权重加粗
错误 8：正文格式不准确
正文中，避免使用全部大写和居中对齐。这会很难阅读。
错误 9：内容放置不准确
请记住这条规则：少即是多？当我们在讨论照片和图像上放置文本时，它当然适用。然而，有时候，如果你过于努力追求极简主义，你的设计最终可能会让人感觉空洞。它不仅看起来不专业和未完成，而且会让访客感觉到困惑。如果他们向下滑动页面，什么都没看到而是空白空间，他们可能会疑惑是否已经滑动到页面底部，而不会一直向下滚动。如果发现这种情况，你的大部分内容可能被忽略。并且，我打赌那是你不想要的。
可能的解决方案：
- 总是确保，当你滚动页面的时候在视野范围内有东西。
- 避免在章节之间有很大的空白
- 确保你的站点是响应式的。它可能在你的手提电脑（可行），但是在其他更大或者更小的屏幕中可能就搞砸了。检查不同参数并进行必要的调整。
错误 10：联系表单不直观
如果你的网站有联系表单，请从读者角度去看待它。什么信息应该放在什么位置是否清晰？这对你来说显而易见，因为你是它的创作者。但一定要向用户提供所有说明，并指导他们完成整个过程。
部分技巧：
- 输入字段添加标签。
- 每当用户完成一个字段，你应该校验表单。
最重要的一步
目前我们已经带你浏览 10 个常见的网站设计错误，从现在开始（希望）你需要避免的错误。文末，我们还有最后一条建议给到你。
我们知道有时候评判自己的作品很困难。特别是当它涉及到某种创造性的过程。这很容易让你迷失在自己的概念和想法的世界里面，而没有意识到除了你之外的任何人都不清楚它们。那就是为什么，当设计一个网站，你需要时不时回退一步，放松一下，并通过陌生人的眼光来看待你的创作。你可以请某人客观地查看你的站点，并就他们作为用户的体验向你提供一些反馈。网站直观吗？是否有使得用户困惑的地方？能很容易读取到内容？网站是否很干净并且看起来不错？整体印象如何？
问问自己或者身边人这些问题。你可能会找到自己甚至不知道的点。
最后 -- 祝读者好运！
