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多个精心设计的组件和3000多个矢量图标，可以帮助您快速设计。以下是一些提示:

1)文本层次结构:导航栏中，主标题、副标题和文本应不同。您可以使用文本区域组件Mockplus设置文本大小，突出文本层次结构。

2）快速设计：您可以使用格式刷和自动数据填充快速完成您的设计。格式刷可以使整个文本以相同的格式呈现，自动数据填充可以自动填充文本数据和图像数据。

3)属性设置:您可以设置组件的颜色和透明度。

4)图像导入:专用图像组件可以将您想要的图像导入网页背景图像，也可以自由设计。

亲自尝试。

在线协作设计 - 从一开始就避免网页设计和错误

为避免网页设计不良和上述常见错误，设计师必须让开发人员、产品经理和其他产品团队成员从一开始就参与网站设计，并及时收集建议和反馈。

对此，一种方便的在线设计合作工具，如Mockplus iDoc，能为您提供良好的开端。

作为一名网站设计师，您只需点击即可通过Photoshop / Adob??e XD / Sketch（使用Mockplus iDoc插件)轻松引入具有资产细节的网站设计，及时收集其他团队成员的反馈和建议，创建与他人分享的互动原型。

作为网站的前端开发者，您可以简单地查看所有的网站设计并自由发表评论，轻松地搜索重复的元素和颜色，并快速检查和下载设计资产。

作为一名产品经理，您可以轻松检查设计过程，自由上传和预览文档，更顺利地管理网站设计项目。

总的来说，Mockplus iDoc您可以从一开始就有效地连接您的整个产品设计过程，并帮助您避免许多网站设计错误。

总结一下

网站的设计需要提供网站本身的功能。它还需要考虑美观和其他要求。我希望以上9个糟糕的网页设计实例对你有用，并帮助你了解什么是糟糕的网页设计，以及如何在未来避免它们。

翻译|空明@芝麻开发 校对|空竹@芝麻开发

原文链接：