想要学好网页设计，先要搞懂网页设计的基本原则

时间：2023-09-07 12:36:01 | 来源：网站运营

时间：2023-09-07 12:36:01 来源：网站运营

想要学好网页设计，先要搞懂网页设计的基本原则：

网页设计的基本原则

早期学习的网页设计原则

1. 明确设计方向

网页设计可以是一个极具创意的领域。话虽如此，但网页设计也要以目标为导向，以浏览者的体验为中心。

始终牢记一个目标，让设计团队调整每一个细节，都是为实现该目标的量身定制的设计。一个典型的例子是电子商务网站。品牌和设计师在设计风格、捕捉商店的视觉识别方面有很大的创新。但是，最终目标始终是一样的：销售。







这个目标将决定设计师如何处理网页设计过程中的一些关键决策。很多重点都放在帮助用户搜索商店并轻松找到目标商品上。在产品页面上投入了大量精力，以尽可能好的方式展示产品。结帐过程经过简化和仔细计算，因此购物者几乎无需思考即可购买商品。

谈到网页设计，决不能仅仅因为某个原因而做出决定。得有一个中心目标，所有细节都必须朝着这个目标努力。一切都取决于我们希望通过这个网站实现什么——期望的结果是什么。

2.了解留白的视觉效果和空间之间的平衡

谁不喜欢具有极其酷炫和强的视觉效果的网站？设计师经常尝试创造一些展示他们视觉能力的东西。很多时候，这些视觉效果增加了体验，独特而难忘。

但是一个关键的网页设计原则是视觉平衡与和谐是必要的。重要的是要知道什么时候更少的视觉效果可以使整个设计更好，让用户专注于正确的事情。有时，通过添加更多元素，我们会削弱设计的真正力量，或者只是让用户更难以识别他们所看到的内容。







这里有几个重要的概念。其中，我们发现了视觉层次结构和空白，这两者对于任何设计的成功都至关重要。它们一起使设计师无需一个字就能与用户交流。

一个好的结构可以让用户立即知道他们在看什么。层次结构清楚地表明了哪些元素是连接的，哪些不是，并突出了最重要的区域。空白提供视觉上的缓解，并有助于引导用户的眼睛通过设计。真正好的网页设计不需要额外的用户寻找正确的按钮来点击——人们一看就知道。

3. 了解比例、位置和间距规律

这些网页设计原则起初听起来有点技术性，但它们逐渐成为经验丰富的设计师的第二本能。这些与前面提到的视觉层次和空白概念密切相关，但侧重于网页设计的另外的方面。

总的来说，网页设计师都必须熟悉特定的设计规则和规律，这些规则和规律决定了比例、形状和邻近性如何影响设计。这些是久经考验的真实规则，充分利用了我们所知道的用户如何感知和处理他们所看到的内容。

格式塔理论是重要的定律之一。它基本上定义了六种关于人类如何感知视觉事物的不同认知规则——尤其是在涉及到元素组时。在网页设计的领域里，这意味着简单地将一堆按钮和箭头放在一起永远不会有好的结果。有一种正确的方式来安排这些元素，以便您帮助用户从整体上理解设计。







我们暂时不讨论这六条规则的细节，但了解这些规则对网页设计的作用很重要。它们是关于理解人眼并创造视觉元素，以发挥我们作为人的视觉能力。一个例子是格式塔原则，闭合性：人们的大脑会填补空白并努力创造一个完整的图像，即使他们正在看不完整的东西。例如的 IBM logo正是基于这一原因。

另一组重要的网页设计原则包括席克（Hick’s law）定律。这是一个非常简单的概念：用户显示的选项越多，他们做出决定的时间就越长。这是因为我们的大脑必须考虑和分析所有这些选项，以选择最佳选项——当选择太多时，这就成了一个问题。







餐厅试图减少菜单中菜肴的数量是有原因的。如果您必须从长达 6 页的菜单中进行选择，您可能会不知所措。一段时间后，您会感到疲倦，并感到喜悦从体验中流失。毕竟，你来餐厅不是为了压力山大——你是来享受一顿美餐的。关于网页设计，可以说完全相同。在用户的快乐消失之前，您可以要求用户付出多少脑力是有限度的。

最终，这些网页设计原则都将在设计中发挥作用。这在开始时尤其如此，当我们必须定义UI 布局时。以令人愉悦和有效的方式分配空间需要练习，但它确实成为网页设计师的本能。这一切都是为了优先考虑重要的事情，充分利用空间并在正确的地方留出空白区域。

4. 了解你的设计对象

就像专业的营销人员一样，网页设计师也需要确切地知道他们的用户是谁。这是一个至关重要的网页设计原则，没有它就不可能有好的设计。正是因为网页设计需要有预谋和深思熟虑，所以您想知道用户是谁，他们想要什么，他们处理什么问题以及他们的想法。

你对最终用户的印象越清晰，你就越有可能创造出成功的设计。在网页设计中，细节可能取决于最终用户而不是设计师。

这可能会让新设计师感到困惑，因为它比设计团队本身更重要。在大型团队中，有一整群人的工作是对用户进行研究，并创建一个关于用户是谁以及他们想要什么的特定数据库。这些信息是至关重要的，因为它将确定整个项目的基调和方法。设计一个专为少女设计的网站与设计一个专为老年人设计的政府网页完全不同。







这是一个通常被称为用户体验研究的小组。这基本上是在理解用户、他们的感受、他们的生活和他们的思维方式方面付出的巨大努力。它通常会产生更多有形的材料，例如用户角色、用户故事或心智模型。无论是谁创造了这些材料，它们在设计过程中自始至终都发挥着关键作用。这些是设计师为了清晰和方向而转向的东西。

经验丰富的设计师会改变思维方式。随着时间的推移，真正熟练的人学会在他们的创意工作和用户想要或需要的东西之间找到平衡点。归根结底，用户的观点永远是正确的，永远是优先的。毕竟，他们将使用该设计。首先，我们需要付出一点努力，把自己的观点放在一边，倾听最终用户的意见，但这是一项随着时间历练而发展起来的技能。

5.版式设计可以决定网页的成败

排版，不管你喜欢还是讨厌它，毫无疑问，强大字体的使用可以完全改变设计的感觉。从选择正文的可读性的字体（即使是非常小的尺寸）到为具有高影响力的标题选择引人注目的字体 - 它们的排版很重要。

有很多很棒的例子，这些网站通过他们选择的字体创造了一种整体氛围。它们可以帮助品牌推广，帮助创建视觉识别或简单地融入和支持其他视觉元素。有很多由艺术家手绘的独特字体以及在任何项目中免费且易于使用的字体。







无论网页设计的目标是什么，或者您选择什么样的视觉效果，在选择字体时总会有几个因素需要考虑。比如字体字号大小，它的字体间距或大小对比度是多少。

根据设计所针对的设备，字体的最佳选择可能会发生变化。例如，移动设计是优先考虑可读性而不是风格的正确地方。屏幕越小，帮助用户设法阅读关键信息并避免让他们费劲的看设备就越重要。

6. 移动友好的设计是必须的

基于移动设备的设计已经发展成为网页设计的关键部分。移动友好的设计原则不再是一种鸡肋，而是随着移动设备的使用不断增长的必要性。由于创建在小得多的屏幕上运行良好的设计是不可避免的，因此当今大多数设计师从很早就开始学习如何创建移动体验。

移动设计的真正诀窍是保持相同的品牌标识并保持设计的灵魂完好无损，即使在更小的空间中也是如此。缩小元素并重新排列它们只能带您到此为止——真正的移动友好型设计以不同的方式处理整个屏幕。







从布局开始，设计师将分配空间并优先考虑绝对必要的部分。其他所有东西都被存储起来，但大多数元素仍然很容易找到。一个典型的例子是汉堡菜单。说出你对它带来的可用性问题的看法，这些图标在移动设计中非常方便。如果用户想要在产品中导航，它会一直在视线范围内，但占用的空间很小。

许多设计团队采用移动友好型网页设计原则的一种方式是移动优先。这基本上意味着基于移动的设计是最先组合和创建的东西。所有主要功能和关键组件都包含在移动设计中，然后升级并成长为产品的基于 Web 的版本。

其他团队只是专注于响应式设计。这是一个非常重要的网页设计原则：今天的一切都必须是响应式的。即使您从移动优先的方法开始，您仍然需要确保用户可以从一个设备转到另一个设备并且仍然获得相同的体验。

7.导航和信息架构

所有网页设计团队都知道这是真的。导航设计和信息架构(IA)共同构成了产品的支柱。它们使人们能够了解产品、移动功能并找到他们需要的特定信息。这两个网页设计原则基本上为产品的其余部分奠定了基础。

首先，规划IA。这是设计师查看产品必须包含的所有内容的时候，从视觉元素、信息和支持主要功能的任何内容。这将创建一个长列表，该列表经过分类和组织以创建信息层次结构。层次结构有助于在产品中创建逻辑结构，以便用户可以找到信息，无论信息多小或多简短。

想想看。用户需要能够在网站中找到最小的信息，即使他们以前从未体验过。设计师如何做到这一点？答案在于以合乎逻辑和直观的方式组织内容。







导航起着类似的作用。创建一个供用户四处走动的导航系统不仅仅是在汉堡菜单中塞进一堆链接。导航需要体现信息架构，让用户不费吹灰之力就能轻松找到主要信息和功能。一些设计师说，用户甚至不应该为了导航而思考。

网页设计的这两个关键点可以创造或破坏任何产品。如果用户无法理解事物在哪里，他们就无法从产品中受益。如果他们无法达到某个重要功能，那么整个体验就会受到影响。设计师将投入大量时间来创建、测试和验证产品的这两个领域，正是因为这非常重要。

8. 必须将认知努力保持在最低限度

认知努力只是用户使用设计所需的脑力劳动的另一个术语。正如我们之前提到的，如果任何事情都需要付出太多努力，那么用户很可能会变得不知所措、沮丧和疲倦。它破坏了设计师为创造这种体验而投入的所有辛勤工作。一个值得记住的网页设计原则是，真正伟大的网页设计是直观且毫不费力的。

那么，我们如何将认知努力降到最低呢？一些策略出奇地简单，比如允许空白并确保设计不会太复杂。将时间投入到直观的导航系统中是让用户轻松体验的另一种好方法。







尽管一开始降低认知努力似乎是一项艰巨的任务，但大多数设计师在看到一个需要能量的设计时会本能地知道它。很多时候，一切都与细节有关。一个真正有帮助的标签。由于语言和字体的选择，易于阅读的副本。一种没有解释空间的形式。一条错误消息，告诉用户如何解决问题。

在设计师尽可能地消除使用设计所需的努力之后......他们继续前进。秘诀是进行多轮用户测试，以发现可以进一步改进的领域。这一切都是为了密切关注用户的行为，并了解哪些元素和区域让他们停下来。

9. 学习依赖设计规范

设计规范基本上是所有产品最终都会遇到的常见问题的可靠答案。这里的网页设计原则不一定是使用哪种规范。更多的是接受规范并看到它们的价值。有这么多设计团队依靠他们来交付出色的设计是有原因的。他们肯定能创造出一种既能完成工作又能创造出优秀的设计。







我们知道，许多网页设计师希望留下自己的印记并创造出独特的东西。但真正多才多艺的网页设计师认识到规则在设计游戏中所扮演的角色。它们帮助广泛的设计保持一致，帮助用户充分利用产品，并帮助设计师更快更好地创造。

10.了解可用性测试的基础知识

可用性测试是任何设计过程的关键部分，这是一个众所周知的网页设计原则。这是设计本身的一个强大方面，致力于向我们展示设计团队认为用户想要的东西与现实之间的差距。这是任何好产品的秘诀。这可能意味着一个运行良好的项目与一个延迟、可怕的成本和糟糕的绩效项目之间的区别。

让我们回到开头，回顾一下用户测试的 3 种主要类型。一是探索性测试。这是指在项目开始时进行的一轮测试，只要有最小的可行产品要测试。它旨在更多地了解用户的行为并验证设计的主要支柱（IA 和导航）。

其次是评估测试，通常在项目的中途进行。他们衡量可用性并努力指导团队改进领域。







最后，我们进行了对比测试。顾名思义，这是设计团队简单地测试两种产品的时候。通常，一种产品是团队的设计，另一种是竞争对手。这可以向我们展示竞争对手存在哪些设计缺陷，它们所代表的影响，并帮助我们避免同样的错误。

总结网页设计原则

网页设计的领域不断发展，变化。用户拥有的标准、设计师可用的技术、依赖设计团队销售和赚钱的企业……这个领域的一切都在快速发展。然而，当涉及到这些关键的网页设计原则时，有些事情仍然是正确的。其中一些想法自 1970 年代就已经存在，当时互联网刚刚起步。

这表明网页设计者可以依赖于他们的知识经验，相信他们的直觉，并参考用户研究资料进行指导。随着时间的推移，这些原则将成为设计师微调其作品的另一种方式，并将自然地应用到大多数作品中。