网页设计对初学者和新手并不那么宽容。借鉴数百年的平面设计理论和数千年的美学原则，网页设计需要一生以上的时间才能掌握。但是在你灰心之前，好消息是你不需要掌握网页设计来创建一两个漂亮的页面——你需要做的就是遵循正确的网页设计原则。
将下面的网页设计原则视为我们网页设计的“十诫”——除了其中只有九条，因为现在的事情比三千年前更加精简。如果你是一个有抱负的设计师，或者只是一个开始 DIY 网站的人，请牢记这些网页设计原则。
1. 视觉层次决定了人们首先（和最后）注意到的东西
——
视觉层次是平面设计的基石之一。从本质上讲，它指的是当您将一组视觉效果放在一起时（例如网页），吸引最多和最少关注的内容。通过操纵视觉层次，设计师理论上可以控制观众注意到每个单独元素的顺序，称为“视觉流”。
对于网页设计，视觉层次是至关重要的。网页设计师必须优先考虑最重要的元素——导航工具、页面标题、号召性用语、用户控件——同时确保不太重要的元素不会分散注意力。
虽然有许多技术可以吸引或排斥注意力（其中一些在下面的其他网页设计原则中有所介绍），但在实践中，设计师使用这三种主要策略来定义视觉层次结构：
尺寸——你可以想象，大元素吸引的注意力更多，而小元素吸引的注意力更少。
颜色——明亮、鲜艳的颜色比更柔和、更暗淡的颜色更容易被注意到（您也可以使用颜色对比，如下所述，以最大限度地提高效果）
位置——由于大多数人本能地从上到下阅读，因此首先注意到放置在屏幕顶部附近的元素。
在创建网页布局时，请按照您希望访问者注意它们的顺序列出所有元素，预先规划您的视觉层次结构。从那里，对每个应用适当的技术。
2. 用户不应该思考
——
2000 年，作家兼计算机科学家史蒂夫·克鲁格 (Steve Krug) 出版了他的开创性著作《不要让我思考》，这催生了早期的用户体验运动。这本书的核心课程——让你的设计尽可能简单易懂——仍然是网页设计的基本原则之一，即使在 20 多年后。
这个想法是，每当用户不得不停下来思考如何做某事或他们需要的按钮在哪里时，它就会使他们无法完成他们想要完成的事情。例如，如果您的用户想使用您的应用程序编写电子邮件，他们应该只专注于编写电子邮件，而不是试图找到“发送”按钮或想知道如何更改字体。
Krug 的思想还强调人类的本能，即选择第一个解决方案，不一定是最佳解决方案。然后，设计师需要让最佳解决方案易于注意到，以免用户走上意想不到的低效路线。
设计师应该始终寻找简化和简化设计的方法。视觉层次结构在让用户快速找到他们正在寻找的东西方面发挥着重要作用，但其他策略也很有用。
以雅各布定律（以另一位 UX 先驱雅各布尼尔森命名）为例，它建议使用用户已经从其他网站熟悉的图标和模式。例如，当今大多数网站都使用屏幕顶部的放大镜图标来指示搜索栏。在您的网站上使用相同的图标意味着用户不必考虑如何在您的网站上使用搜索功能，将其放在顶部意味着他们不必考虑在哪里找到它。
3.对比和运动吸引注意力
——
扩展我们吸引和排斥注意力的技巧，记住“对立面吸引”。对比是经验丰富的设计师最喜欢的工具，他们利用了颜色和尺寸之间的明显差异。
在并置中使用颜色对立是吸引注意力的好方法。这是突出 CTA 按钮的最有效策略之一；设计师会用与背景相反的颜色为 CTA 按钮着色，这是一种使其脱颖而出的简单方法。
同样，尺寸对立的物体在彼此相邻放置时效果很好。如果页面上有很多元素并且没有空间放大任何东西，请尝试在元素旁边放一些小东西——这有效地使它看起来更大，从而使其更引人注目。
同样，运动和动作也引起了人们的注意，这是我们狩猎采集时代的一个古老的进化黑客，设计师喜欢利用。您可以为特殊元素使用小动画以更快地引起他们的注意——例如，当有新通知时弹跳图标。
请小心过度使用动画。如果屏幕上有太多东西在移动，则很难集中注意力。相反，谨慎使用运动以保持有效。
4.留白让你控制视觉流动
——
白色空间，也称为“负空间”，是专业设计师、摄影师和所有视觉艺术家最喜欢的工具。白色空间只是指空白区域，或者屏幕中没有视觉元素的部分，除了背景。
网页中的空白与所有其他内容一样重要——如果您主动使用它，则更为重要。对于初学者来说，空白是控制页面平衡所必需的；太多的元素放在一起可能会让人感到困惑和分心，因此需要足够的空白来使布局更加全面。
此外，空白可以通过这个简单的网页设计原则影响视觉层次：对象周围的空白越多，对象得到的关注就越多。这意味着如果你用大量空白围绕一个元素，它会比你用其他视觉效果围绕同一个元素吸引更多的注意力。
最后，空白对于分隔和分组某些元素很重要。在两个对象之间放置额外的空白有助于区分它们，而在它们之间放置较少的空白可以连接它们。
当通过相似性分隔某些元素时，使用空白进行分组会派上用场。例如，假设您需要区分同一页面上的两个单独的导航菜单，例如一个用于您的博客类别的菜单，另一个用于您的整个站点。将一个菜单中的所有项目以最小的空间组合在一起有助于用户将它们连接起来，同时在两个菜单之间放置额外的空间可以防止读者将它们混淆为相同的。
5. 太多信息使用户超负荷
——
另一个流行的网页设计原则是限制您一次呈现给用户的信息量。人脑只能处理这么多，尤其是在短期记忆方面，因此它有助于将信息分解成更小的剂量——这也符合克鲁格关于不要让用户思考太多的建议。
米勒定律最好地证明了这一想法，该定律基于心理学家乔治米勒在 1956 年的工作。米勒发现，一般人一次只能在短期记忆中存储 7 条信息（给予或接受 2 条）。
不幸的是，很多网页有超过七件事要说。米勒自己的研究建议使用“分块”技术，或将相关信息组合成小的“块”，以便于消化。在电话号码中可以看到分块的例子：我们将区号放在一个块中，前三位放在另一个块中，最后四位放在最后一个块中。
特别是在网页设计中，它还有助于将您的页面划分为“屏幕”，指的是一次在屏幕上可用的所有信息。当用户在一个屏幕上消化完所有信息后，他们会向下滚动以找到一个包含新信息的全新屏幕。
或者，您也可以减少脂肪，只展示必要的部分。这部分是网页设计极简主义趋势背后的推动力，它鼓励网页以大量空白为特色，并且只包含绝对必要的元素，如控件。由于其减少加载时间的副作用，这种风格适用于网页设计。
6. 互动区域应该很容易到达
——
菲茨定律（经常被错误地写成“菲茨定律”）既是显而易见的，又经常被忽视。它指出，最可操作的区域应该是最容易访问的。
对于桌面网页设计，菲茨定律建议缩小用户必须移动鼠标的距离。通常，如果您有一起使用的功能，它们应该尽可能靠近放置，即评论文本框和“发布”按钮。
这种网页设计原则也催生了右键下拉菜单，完美诠释了菲茨定律。右键下拉菜单效率完美；控件直接出现在光标所在的位置，从而最大限度地减少移动距离。
对于移动网页设计，菲茨定律建议将最常用的控件放置在用户手指（尤其是拇指）最容易触及的屏幕区域。假设用户垂直拿着智能手机并使用他们的拇指进行交互，屏幕的热点位于底部的两个角落。您会注意到大多数移动应用程序的控件位于底部而不是顶部。
在桌面和移动网页设计中，菲茨定律建议使按钮和控件足够大，以便用户可以舒适地点击它们。更大的按钮可以减少用户移动光标或手指的次数——但不要让它们太大，否则会浪费屏幕空间。
7. 排版会影响用户对你的看法
——
在处理按钮、图标和图像等网页设计必需品时，排版经常被忽视。但正是因为排版更加微妙，才使它如此有用——文本的外观仍然会影响用户对你的看法，即使他们没有意识到这一点。
你的文字的字体、大小和风格传达了你是什么样的品牌或人，从有趣和随意到严肃和专业。但是排版不仅会影响您的印象；它也适合视觉层次结构，特别是对于按钮标签和 CTA 副本。
首先，您必须区分短格式文本和长格式文本。短格式文本是指你有一个词、一行或一个句子，它本身就很突出。这些是类似文本的页面标题、按钮标签、标语或快速说明。长格式文本用于阅读，例如博客文章和网页副本，或几句话以上的任何内容。
排版的基本网页设计原则是只对短文本使用华丽和艺术的排版，并使用更基本的排版，优先考虑长文本的易读性。因此，您可以为页面标题使用带有装饰的大型彩色字体，但对于长文本块坚持使用更标准化的字体和基本颜色，以使其更易于阅读。
无论如何，选择最能代表您的品牌的排版。最常见的选择之一是衬线字体和无衬线字体。带有衬线的字体看起来更正式和严格，而无衬线字体看起来更友好和随和。
8. 作文说明了很多关于你的事情
——
规划页面的组成是您在网页设计中最早采取的步骤之一，您的第一个决定将是在对称和不对称之间进行选择。多年前，人们认为大多数网站都是对称设计的，但最近，不对称风格越来越受欢迎。
基本上，对称的网页更容易扫描，但缺乏原创性的火花，因此观众往往会觉得它们乏味。然而，不对称的网页会突出并吸引用户的注意力，但会使浏览和查看所有内容变得更加困难。
对于品牌和访问者如何看待您的公司，对称的网站给人的印象是更有条理和有条理，而不对称的网站看起来更前卫和更具艺术性。您可以选择最适合您的品牌风格的任何一个，但如果您必须展示大量分散的物品，例如电子商务网站上的产品，对称性可以更容易组织所有内容。
同样，每次网站需要显示大量元素时，网格格式曾经是首选默认格式。毕竟，行和列是将所有这些项目组合在一起的最明智的格式。
然而，这是因为网格是如此传统，以至于使用更加分散和混乱的格式可以帮助您脱颖而出。现代设计师意识到他们可以通过稍微错开他们的行和列来将他们的网站与群体分开。虽然这种风格对于传统品牌来说可能会令人反感，但对于想要看起来前卫或前卫的品牌来说，它是一个完美的外观。
9. 一致性加强了每个设计选择
——
最后但并非最不重要的一点是，良好的网页设计是一致的。每次你重复一个聪明的网页设计选择，你都会加强它的影响。例如，假设您选择红色作为强调色，因为您想给人以热情和凶悍的印象。每次您在其他页面上使用红色作为强调色时，您都会显得更加热情和凶猛。
网页设计的一致性有利于页面的各个方面，影响导航、布局、配色方案、排版、图像和所有其他方面。这与品牌一致性的重要性不谋而合，使用相同的标志、颜色和口号可以增强品牌与每次新用途的关联。
但是，如果这还不足以让你相信一致性的重要性，那么相反的情况会更糟。考虑一下，如果您更改了每个新页面的控件图标和位置，您的用户会感到多么沮丧。这意味着用户必须一遍又一遍地弄清楚一切在哪里以及事情是如何运作的——这打破了早期的网页设计原则，即不让用户思考。
帮助您入门的网页设计原则
——
希望我们的网页设计原则列表不会让您不知所措。将如此复杂的学科塞进一小撮快速的外卖中并不容易。请记住，您应用和实践这些原则的次数越多，它们就越有意义；不久之后，他们就会成为你的第二天性。
如果您真的在努力创建您想要的网页设计，请随时为您的项目聘请我们的一位自由平面设计师 - 他们已经掌握了这些网页设计原则等等！
本文地址：
http://www.njanyou.cn/news/6073.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
如何将您的网页设计转换为代码
下一篇：
解开网页设计与网页开发：有什么区别？
