网站设计师的10个糟糕网页设计实例和常见错误
摘要：不要像这个网站一样设计导航栏。如果你感到困惑，我将通过介绍十大糟糕的网页设计示例来向你展示一个好的网站应该是什么样子。
本文讨论了10个糟糕的网页设计示例和常见错误，以帮助网站设计人员更好地了解好的和坏的网页设计之间的区别。
在我们开始之前，我有一个问题：设计网站时，你的首要任务是什么？是吸引人的外观？还是酷炫的效果？
对于我来说，我喜欢优先考虑网站功能和用户体验。界面很重要，但是你网站的功能更重要。你应该以整洁和合乎逻辑的方式向用户提供你的想法或产品。特别是在建立品牌时，你需要让你的网站看起来值得信赖。
但是你如何建立一个值得信赖的网站？
关键在于设计。即使你是一个小型的创业公司，最好还是一个网页设计师来帮助你进行网站设计。当然，最好是网页设计师从一开始就可以通过良好的在线设计协作工具与开发人员协作。设计一个既美观又实用的好网站并不容易。网页设计中常见的错误有哪些？你怎么能有效地避免它们？如果你感到困惑，我将通过介绍十大糟糕的网页设计示例来向你展示一个好的网站应该是什么样子。
好的和坏的网页设计之间的差异
网页设计趋势一直在变化，因此其设计原则很难定义，但仍然存在经过了时间检验的黄金法则。我查了数百个网站并发现了几个设计原则，这些设计原则包括：
· 一个易于理解的导航
· 正确使用动画
· 好的配色方案
· 干净的布局
· 一个视觉上吸引人的界面
· 选择适合主题的设计
· 组织好设计元素和内容
上述原则只是网页设计的一些规则，但它们都清楚地表明，良好的网页设计应该美观，易于理解和易于使用。也就是说，一个好的网站应该提供出色的用户体验。
十大糟糕网页设计实例
1. Arngren网站 – 因缺失网格而导致的混乱设计
我不想苛求，但每次看到这个网站都会闪瞎我的眼睛。该网站将图片，内容和链接胡乱放置。这些元素聚在一起让该网站变得不可思议地混乱。
为什么Arngren是设计糟糕的网站？
1）最大的问题是该网站不使用网格。
2）令人难以置信的导航结构。
3）糟糕的排版使其难以阅读。
4）随机使用颜色。
网格可以使你的网站上的所有内容整洁有序。它将所有元素保持在适当的位置，并帮助你确定元素的大小，文本的大小和空间等等。通过网格，你可以创建一个一致而设计良好的界面。
下图是在网页设计中使用网格的一个良好示例 - 一切都井井有条。
2.排版设计 - 设计缺乏对比度
元素之间清晰而有力的对比可以帮助用户了解页面的核心信息。它可以帮助用户更好地阅读和理解信息。在这个网站上，背景颜色和文字颜色非常接近，从而导致非常微弱的对比度。微弱的对比度使文本变得模糊。此外，较小的字体大小使文本的可读性极差。
良好的网页设计应确保文本和图片具有高可读性。实际上，提高可读性并不难，只需利用一切 - 颜色，空间和大小，使它们具有高对比度。例如，良好的排版通过使用不同大小的字体来突出显示重要信息，颜色之间的对比也强化了视觉效果。
具有适当对比度的良好网页设计应像这样：
3.Theweddinglens网站 - 没有响应的设计
你应始终使用响应式设计框架，或采用其他更好的解决方案。你的网页需要像在网站上一样顺畅地在移动设备上运行。当这个网站在手机上加载时，它把整个页面显示为糟糕的纯文字界面。它没有可供查看的移动版界面，因此无法在手机上使用。我会放弃像这样的网站。
良好的网站设计 - 响应式设计示例：
4.PacificNorthwestX-RayInc网站 - 令人不快的配色方案
这种网页设计就像一个混合的调色板，其中包含大量冲突的颜色和文本颜色，并且还混合了背景颜色。所有这些都让用户很难阅读。此外，其导航栏非常复杂。
一个好的网页设计应该正确使用颜色，以创建一个美丽和简洁的界面氛围。它应该让用户的眼睛更轻松，让用户操作起来不费吹灰之力，就像这样：
有关颜色方案的更多信息：如何在UI设计中使用颜色来明智地创建一个完美的UI界面？
5. Gatesnfences网站 – 糟糕的导航和操
网站导航栏的最大特点是不言而喻的。当用户登录你的网站时，他/她应该了解他们接下来可以做什么以及要到达目的地应该采取什么行动。导航栏必须引人注目，并且通常应位于页面顶部。不要像这个网站一样设计导航栏。它只会让用户更加困惑。
此外，导航栏的内容和交互也需要清晰，因此不要使用水平滚动条或其他不寻常的动画设计。如果你这样做，你应该至少给用户一些提示，让他们知道你的网站是如何工作的。
网页设计中的良好导航栏应如下所示：
6. Uat网站 - 错误链接和错误的CTA（Call To Action）设置
杂乱的链接和死链接都是网站的巨大问题。你应该手动检查链接或经常使用网站链接检查器等工具。
此外，你需要确保链接的功能。特别是文本中的链接，你应该让它们足够明显并且易于点击。例如，不要在文本中添加大量文本链接。在小型移动屏幕上浏览文本时，用户很难点击正确的链接。
在下面这个网站上，每个移动的小图片实际上都是一个链接。先不说它一直在移动，文本本身也非常模糊，因此用户不知道显示的什么信息。
CTA设置也必须清晰。不要在同一级别为用户提供太多的CTA选择，因为这会花费用户更多时间来确定他们喜欢选择哪一个。看看这个例子：
太多同级别的CTA会让用户更加困惑。此外，你应该只保留一个CTA来突出显示重点。以下是设计良好的CTA。
7. Nmg-group网站 - 界面背景图像不清晰
你在网页上使用的图片可能是你网站的大门。漂亮的图片使你的网站更加美观和舒适。有些设计师甚至将整张图片用作背景图片。
在这个网站上，设计实际上是非常好的，但仔细观察你会发现文字和背景图像太过不堪重负。网站的背景图像被其他元素覆盖，因此整个界面实际上已被破坏。
在这里使用透明按钮将是更好的选择。也就是说，在设计网页中的按钮时，你应该放弃复杂的颜色，样式和纹理。相反，只是勾勒线框并使用文本来指示功能。下面是一个更好的示例。
8. Wateronwheels网站 - 不一致的风格
如果你想保持页面流畅和简洁，那么不要使用太多不同风格的元素。在此站点上，文本区域使用对比色和不同的字体大小来突出显示信息。但是第二级的文本也使用了高亮的蓝色，这实际上打破了统一而平衡的层级界面。
统一性对网页界面的整体美感和流畅性至关重要，请参见下图：
9. Greatdreams - 没有任何留白
整个网站看起来色彩鲜艳，形成鲜明对比，适合儿童果汁饮料的主题。但是很多太亮的颜色太混合了，根本没有空间。它看起来更像是一幅色彩缤纷的画作，而非在线商业网站。此外，夸张的颜色组合使文本的可读性变得非常差。而且，该网站没有任何导航，使得你一直滚动页面到底部去寻找相关信息。
具有留白的良好网页设计简单而干净：
以上是一些不良网站列表。但是也存在着其他网页设计错误：
1. 自动播放音乐（不通知用户）。
2. 长页面加载时间。加载所需的时间越长，用户离开你网站的可能性就越大。
3. 网页太长。你认为有多少用户有兴趣一直到页面底部？不要试图挑战用户的耐心。
3. 过期信息。未更新的信息会误导用户并使你的网站看起来不专业。
5. 隔离页面。用户不知道如何返回主页。这提供了糟糕的体验。
6. 缺少互动内容。如果你无法为用户提供表达情感和想法的方式，你的网站可能会慢慢死亡。
原型设计 - 开始网页设计的第一步
如果你犯了上面提到的一些错误，那也没关系。熟能生巧，你只需要更多练习。我的建议是从原型设计开始。
你可以使用更快更简单的原型工具 Mockplus来开始你的网页设计。Mockplus支持Web项目。现在我将向你展示如何在Mockplus中设计网页。
第1步：打开Mockplus并创建一个Web项目
在开始页面上，你可以选择独立项目或团队项目。选择后，在弹出窗口中选择Web项目。在这里，你还可以自由设置网站页面大小。
第2步：在Mockplus中自由设计
Mockplus拥有200多个精心设计的组件和3,000多个矢量图标，可以帮助你快速设计。以下是一些提示：
1）文本层次结构：导航栏中，主标题，副标题和正文中的文本应该不同。你可以使用文本区域组件并在Mockplus中设置文本大小以突出显示文本层次结构。
2）快速设计：你可以使用格式刷和自动数据填充快速完成你的设计。格式刷可以使整个文本以相同的格式呈现，自动数据填充可以自动填充文本数据和图像数据。
3）属性设置：你可以设置组件的颜色和透明度。
4）图像导入：专用图像组件可以将你想要的图像导入为网页背景图像，你也可以自由设计。
亲自尝试一下。
在线协作设计 - 从一开始就避免坏的网页设计和错误
为了避免坏的网页设计和上面提到的常见错误，设计人员必须从一开始就让开发人员，产品经理和其他产品团队成员参与网站设计，并及时收集他们的建议和反馈。
关于这一点，一个方便的在线设计协作工具，如Mockplus iDoc，可以为你提供一个良好的开端。
作为网站设计师，你只需点击一下，即可通过Photoshop / Adobe XD / Sketch（使用Mockplus iDoc插件）轻松导入带有资产详情的网站设计，及时收集其他团队成员的反馈和建议，并创建交互式原型以与他人分享。
作为网站前端开发人员，你可以简单地查看所有网站设计并自由发表评论，轻松搜索重复的元素和颜色，并快速检查和下载设计资产。
作为产品经理，你可以轻松地检查设计过程，自由上传和预览文档，以更顺畅地管理网站设计项目。
总的来说，Mockplus iDoc可以从一开始就有效地连接你的整个产品设计工作流程，并帮助你避免许多网站设计错误。
总结一下
网站的设计需要提供网站本身的功能。它还需要考虑到美观和其他要求。我希望以上9个糟糕的网页设计实例对你有用，并帮助你了解什么是糟糕的网页设计，以及如何在将来避免它们。
翻译|空明@芝麻开发 校对|空竹@芝麻开发
原文链接：
