您好，开发人员和设计师！您准备好将网页设计技能提升到一个新的水平吗？在这篇文章中，我们将研究10条基本的Web设计规则，可以帮助您创建出色的用户体验。无论您是经验丰富的专业人士还是刚开始，这些原则都将成为制定视觉上吸引和用户友好的网站的坚实基础。

让我们开始开始ð

概述：

1. Prioritize User-Centered Design：通过了解用户的需求，偏好和行为来锻造连接。工艺界面，可以共鸣并迎合其独特的体验。

2. Effective Typography：选择可读字体和尺寸。使用字体传达层次结构并指导用户完成您的内容。

3. The Psychology of Colors：深入探究颜色的心理学。了解不同的颜色如何引起情绪，影响行为并塑造用户感知。

4. High-Quality Imagery：图像比单词雄辩。使用与您的品牌保持一致并增强用户体验的高质量视觉效果。

5. Unleash the Power of Icons：发现图标的影响。使用它们来增强用户理解，简洁地传达信息并将个性注入您的设计。

6. The Magic of Shadows：探索阴影的魅力。采用微妙的滴阴影来创造深度，对比和现实主义，为您的设计增添优雅。

7. Curves of Elegance Mastering Border Radius：发现边界半径的魅力。玩圆角以软化边缘，创建视觉兴趣并增加一丝优雅。

8. Use White Space Wisely：空间或负空间为您的设计空间提供呼吸的空间。它增强了可读性并指导用户的重点。

9. Visual Hierarchy：策略性地安排要素，以指导用户的注意力。使用大小，颜色和位置来建立清晰的视觉层次结构。

10. Nurturing an Exceptional User Experience (UX)： ux是设计的核心。工艺直观的导航，最大程度地减少摩擦，并确保每一次互动都使用户感到高兴，从而促进了无缝愉快的体验。

---

优先考虑以用户为中心的设计11

在网络设计方面，给网站一个个性的概念是建立独特而令人难忘的在线形象的有力方法。就像人们一样，网站可以传达不同的个性，这些个性引起用户的共鸣，唤起情绪并留下持久的印象。

这是您可以考虑的不同网站个性的概述：

认真/优雅：引导奢华和精致，该个性是根据薄衬线字体，金色或柔和的颜色以及大高质量的图像来表征的。

极简主义/简单：拥抱简单性，这种个性围绕着必不可少的文本内容，使用中小型sans-serif黑色文本，线条，线条以及几乎没有图像和图标

纯/中性：设计通过使用中性和小型字体以及非常结构化的布局来摆脱困境。大公司常见

大胆/自信：通过以大胆的排版具有搭配，并充满信心地使用大而明亮的彩色块

平静/和平：用于照顾的产品和服务，由
传播 平静的柔和颜色，软衬线标题和匹配的图像/插图

启动/upeat：广泛用于启动，具有中型的sans-serif字体，浅灰色文本和背景，以及圆形元素

嬉戏/娱乐：彩色和圆形设计，以诸如手绘图标或插图，动画和有趣的语言等创意元素为推动力

---

有效排版

在设计领域，有效的排版在传达消息，设置音调和指导用户中的内容方面起着关键作用。

1. 仅使用良好和流行的字体并安全地播放： serif，sans-serif
2. 可以每页只使用一个字体！如果需要更多，请限制2个字体。

serif typeface：

• 创建传统/经典的外观和感觉
• 传达可信度
• 有益长文

流行的衬线字体：

• Playfair Display
• Lora
• Roboto Slab
• Merriweather
• Cardo
• Aleo
• Cormorant

sans-serif字体：

• 现代外观和感觉
• 干净而简单
• 更容易为初学者设计师选择！

流行的sans-serif字体：

• Open Sans
• Roboto
• Lato
• Montserrat
• Inter
• Work Sans
• Poppins

字体尺寸和权重：

1. 选择字体大小时，限制选择！使用类型的规模工具或其他每个定义范围。
2. 使用正常文本的字体大小在16px和32px之间
3. 对于长文（如博客文章），请尝试20px甚至更大的尺寸
4. 对于头条新闻，您可以走得很大（50px+）和粗体（600+），具体取决于个性
5. 对于头条新闻，您可以走得很大（50px+）和粗体（600+），具体取决于个性
6. 牢记响应能力。将相对单元（例如“ EM”或“ REM”）用于字体尺寸，以确保它们适应不同的屏幕尺寸并在设备之间保持和谐的视觉平衡。
7. 旨在以50至75个字符的范围内的线长度，以实现最佳的可读性。太短的线条会使文字显得碎片，而太长的线可以使读者的眼睛紧张，并使其保持障碍。
8. 正确的线间距（线高）可提高可读性。将线高的高度设置为1.4至1.6倍的字体尺寸，允许内容呼吸并减少眼睛应变。
9. 中心不长文本块。小块很好

良好的设计：

不良设计：

在这两种设计中，我们都设计它的字体尺寸为16 px，线高为1.6，但区别在于，在良好的设计中，我们没有集中文本块，因为文本块很大因此，它比不良设计相对好。

---

颜色的心理

颜色对人类情感，看法和行为产生深远的影响，使它们成为设计和交流的强大工具。了解颜色的心理可以帮助您创造具有视觉吸引力和情感共鸣的体验。

这是对不同颜色如何影响我们的看法的一瞥：

红色：引起了很多关注，象征着力量，激情和兴奋。使其适用于行动和高影响力元素。

蓝色：与和平，可信度和可靠性有关。旨在传达专业精神和稳定的品牌经常使用。

黄色：散发出温暖，乐观和快乐。它可以促进积极性并引起人们的注意，但是过度使用可能会导致视觉压力。

绿色：象征着生长，和谐和自然。通常与健康，财富和可持续性有关。

紫色：代表奢侈，创造力和灵性。深色的阴影可以唤起优雅，而较浅的阴影散发着异想天开。

橙色：表示热情，活力和友善。它可以引起兴奋感并鼓励行动。

粉红色：传达甜味，嬉戏和女性气质。它通常用于针对年轻或浪漫的观众。

黑色：象征着精致，力量和形式。可以为设计增加神秘和优雅的气氛。

白色：代表纯度，简单性和清洁度。创建一种空间感，可用于突出其他颜色。

棕色：反映了泥土，稳定性和可靠性。通常与天然和有机主题有关。

多色：充满活力的组合可以引起嬉戏和多样性，而和谐的组合会产生平衡感。

1. 保持专注的调色板，以防止颜色过多的压倒用户。
2. 将主要颜色与您的网站的个性相结合，以唤起所需的情感反应。
3. 平衡的调色板至少包含两种基本颜色：主颜色和互补的灰色阴影。
4. 随着您的专业知识的增长，请考虑引入重音（次要）颜色以增加深度和活力（使用颜色工具精确）。
5. 通过制作所选颜色的更轻和深色的变化（色调和阴影）来增强多样性。
6. 使用您的主要颜色引起人们对页面上最重要元素的注意
7. 通过使用颜色突出特定组件或部分来提高设计影响，从而引起视觉兴趣。
8. 通过避免过于沉重或完全黑色的文本来选择可读性。试验较轻的音调以邀请可读性。
9. 达到平衡：避免使文本过于光线，以确保与背景的正确对比。杠杆工具以确认标准文本的对比度至少为4.5：1，较大文本（18px+）的3：1。
10. 确保您选择的调色板在各种平台和设备中保持一致。一致性促进了品牌识别和无缝的用户体验，无论用户是在台式机，平板电脑还是智能手机上访问您的网站。

看到我的主要颜色辐射温暖和开朗的黄色。并引起注意。

---

高质量的图像

在Web设计领域，使用高质量的图像可以将平凡的界面转变为迷人的视觉旅程。这些精心选择的视觉效果有能力唤起情绪，传达信息并创造令人难忘的印象。这是利用高质量图像的潜力来增强用户体验的方法：

1. 每个图像都应讲述一个故事或传达与您的品牌或内容保持一致的信息。周到的图像可以吸引用户并将其吸引到您的叙述中。
2. 选择与品牌价值观，个性和美学相符的图像。图像的一致性增强了品牌认可和回忆。
3. 高质量的图像传达了专业和对细节的关注。模糊或像素化的视觉效果可能会损害您网站的信誉。
4. 虽然高质量的图像是必不可少的，但可以优化Web的图像以确保它们快速加载。大型文件尺寸会减慢您的网站，从而影响用户体验。
5. 尽可能使用将您的网站与众不同的原始图像。自定义视觉效果可以增强品牌的独特性。
6. 确保图像响应迅速并适应不同的屏幕尺寸。响应式图像阻止失真并确保一致的体验。
7. 结合真实人的图像是唤起用户情绪并建立真正联系的令人信服的策略。

有关网络设计和开发的图像类型：

照片：通过摄影捕获的现实生活图像。他们可以通过结合这些视觉效果来描绘产品，人员，地方和事件，您的网站获得了一种真实和现实主义的感觉。

插图：手绘或数字创建的视觉效果，为您的设计增添了独特而艺术的风格。插图可以简化复杂的概念或有助于嬉戏的气氛。

英雄图像：大型，引人注目的图像在网页的顶部突出显示。英雄图像通常包括文本和召唤按钮。

产品图像：高质量的视觉效果从各个角度展示产品。产品图像对于电子商务网站帮助用户做出明智的购买决策至关重要。

交互式图像：具有交互式元素的图像，例如可单击的热点或悬停效果。他们吸引用户并提供其他信息。

背景模式：重复用于创建纹理或图案背景的图像。模式可以为网页增加深度和视觉兴趣。

装饰图像：用于视觉吸引力的图像，例如分隔线，边界或装饰品。它们在不传达特定内容的情况下增强了网页的美学。

库存图像：专业捕获的图像可用于许可。当您需要视觉效果但缺乏原始内容时，库存图像是一个方便的选择。

与图像相关的重要，有用且功能强大的工具：

免费的高质量库存图像： Unsplash

免费的高质量库存图像： Pexels

免费的美丽插图： DrawKit

最佳免费插图： unDraw

最终图像优化器允许您在浏览器中与不同的编解码器进行压缩和比较图像： Squoosh可以降低文件大小并保持高质量。

---

释放图标的力量

图标是那些小而有影响力的视觉元素，具有增强用户体验并有效传达信息的非凡能力。通过将图标策略性地集成到您的设计中，您可以解锁沟通可能性的世界。这是有效利用图标的力量的方法：

• 在设计领域，正确的图标集可以改变您的创作，为您的用户界面增加深度，清晰度和个性。幸运的是，有大量的免费图标包，每种包装都可以提供一系列视觉元素，可以将您的设计带到新的高度。
• 选择一个高质量的图标包并在整个项目中坚持下去，提供了许多有助于精致和凝聚力设计的好处。
• 将图标纳入设计时，文件格式的选择在确保最佳性能，可伸缩性和可访问性中起着重要作用。 svg（可扩展的向量图形）和图标字体提供了比位图图像格式的不同优点，例如.jpg和.png。
• 图标不仅是视觉元素；它们是您设计个性和版式的扩展。通过自定义其圆度，体重和风格，您可以创建一个无缝集成，与您的总体设计语言产生共鸣。
• 何时使用图标：使用图标为文本提供视觉帮助
• 图标可以将产品功能块转换为视觉吸引人和信息丰富的部分，捕捉用户的注意力并一目了然地传达关键信息。
• 保持图标中立性：将颜色与文本匹配。为了增强焦点：选择对比鲜明的颜色。
• 保留图标比例：避免扩大设计。考虑调整大小时，请考虑将图标放在形状中。

与图标相关的重要，有用且功能强大的工具：

最佳免费图标： Phosphor icons

免费图标，照片，插图，音乐： Icons8

最佳免费图标： Ionicons

以及更多...

---

阴影的魔力

阴影经常被忽视但影响力深远，具有将二维设计转变为身临其境和动态体验的能力。阴影的巧妙使用可以增加深度，对比度和优雅感，从而将您的设计提升到新的高度。这是对阴影的魔力以及它们如何增强您的作品的一瞥：

• 创建深度：阴影为您的设计增添了三维质量，使元素看起来好像它们漂浮在表面上方。这个深度创造了视觉兴趣并吸引用户。
• 用小剂量使用阴影，并抵制将它们应用于每个元素的冲动。
• 具有视觉吸引力和平衡构图的关键在于使用微妙的触感使用阴影。这是一个提醒：请点亮阴影，避免使它们过于黑暗。
• 考虑在设计中使用阴影时，请记住，它们的使用应有目的并与您网站的个性保持一致。
• 更少的阴影：严重 /优雅，更多的阴影：嬉戏 /娱乐< / strong> < / li>
• 对于值得突出的较小组成部分，请考虑利用小而微妙的阴影的魅力。
• 对于要增加注意力的较大区域，请考虑拥抱中型阴影。
• 当您寻求使元素真正出现在接口上方的上方时，请考虑有影响力的大阴影。

---

优雅的曲线掌握边界半径

边界半径是一种微妙而有影响力的设计元素，有能力改变您网站的外观。通过巧妙地合并圆角，您可以为设计注入精致和视觉吸引力。这是掌握边界半径艺术并创造真正优雅的用户体验的方法：

• 柔软的边缘：边界半径提供了一种优美的方式，可以使锋利的边缘柔软，为您的设计提供了友好且平易近人的氛围。在按钮，图像和容器中柔和地舍入，以营造出更具吸引力的氛围。
• 视觉兴趣：实验不同程度的曲率。较大的边界半径可以引起人们的注意并增加阴谋，而微妙的曲线则有助于和谐美感。
• 是时候注入嬉戏的感觉并脱离严肃的语气时，边界半径成为您的创造性盟友。
• 微妙的颜色流行：将边界半径与颜色整合，以增加影响。尝试彩色边框或背景色调以扩大视觉效果。
• 按钮悬停效果：在按钮悬停上增加边框半径略有增加，以创建与用户吸引的微妙，交互式效果。

---

明智地使用白色空间

白空间，也称为负空间，是设计元素之间的空地。与它的名称相反，白色空间不必是白色 - 它可以是分离和增强内容的任何颜色。通过若有所思地利用空白，您可以创建视觉令人愉悦且有影响力的设计。这是充分利用它的方法：

• 增强的可读性：文本和其他元素周围的充足的空白可提高可读性。它可以防止视觉混乱，使用户更容易专注于内容。
• 视觉呼吸室：白色空间为您的设计元素提供了“呼吸”的空间。它有助于防止人满为患，并确保每个元素都有自己的空间发光。
• 重点和重点：空白空间引起人们对重要元素的关注。通过在空白空间中围绕关键内容，您可以指导用户的眼睛最重要。
• 在各节之间合并充足的空白是一种设计方法，可增强清晰度，可读性和用户参与度。通过给每个部分的呼吸空间，您可以创建一个无缝且视觉上令人愉悦的浏览体验。
• 元素组之间的大量空白 是一种设计策略，可以促进清晰度，组织和精致的用户体验。通过有目的地在不同的元素群体周围创建空间，您可以轻松地增强视觉连贯性并通过内容引导用户。
• 设计中邻近的原则指出，相关或属于属于的要素应通过将它们彼此紧密近处进行视觉分组。该基本设计原则增强了组织，可读性和用户理解。
• 在结合大文字或大图标之类的突出元素时，在周围分配足够的空白是必不可少的。
• 小文本和图像，更少的空间。
• 基于16px的倍数采用一致的间距指南可以提高您的设计的凝聚力和效率。

---

让我们结合到迄今为止涵盖的所有关键原则，以创建一种全面且有效的设计方法：

视觉层次结构

视觉层次结构是设计的基本原则，可指导用户了解内容，强调关键要素并促进轻松的理解。 通过操纵大小，颜色，对比和间距等因素，您可以为用户创建一个清晰的路径。以下是视觉层次结构的工作方式的细分：

• 大小和规模：较大的元素自然引起更多的关注。使用大小来区分标题，子标题和重要内容与次要详细信息。

• 颜色和对比：鲜艳的色彩和高对比度吸引了眼睛。利用颜色突出焦点并指导用户获取关键信息。

• 版式：不同的字体样式和权重以建立层次结构。标头的大胆字体，正规字体的字体文本和斜体的重点有助于组织内容。

• 间距和对齐方式：适当的间距会分离元素并有助于干净的布局。一致的对齐有助于维持秩序并有助于可读性。

• z-Pattern阅读：遵循自然阅读模式（从左到右，从上到下）以指导用户了解内容。将关键元素沿此路径放置。

• 定位：将重要内容放在用户眼睛自然启动的顶部，左或中心。重要项目应在折叠上方或“金三角”之内，以获得最佳的可见性。

• 视觉元素：图标，插图和图形可以一目了然地传达含义。从战略上使用这些元素来支持您的层次结构。

• 空白空间：允许重要元素周围有充足的空白，使它们呼吸空间并使它们脱颖而出。

• 用户流：考虑用户的旅程以及您希望他们首先，第二和依此类推。将您的层次结构与所需的用户流对齐。

• 当他们引起大量关注时，请注意图像（较大的图像引起了更多关注）。

• 白空间会产生分离，因此从战略上使用白空间来强调元素。

• 用于文本元素，使用字体大小，字体重量，颜色和空间来传达重要性。

• 我应该强调哪些组件？推荐，召唤部分，高光部分，预览卡，表单，定价表，表中的重要行和列等。

培养出色的用户体验（UX）

恭喜！ð¥³我假设您已经阅读了上述所有原则。现在，我们将看到用例以及如何根据不同的网络个性应用它们。

我们先前讨论过的7个网络人物：

1. 认真/优雅：引导豪华和精致，该个性的特征是基于薄衬线字体，金色或柔和的颜色以及高质量的高质量图像。
2. 极简主义/简单：使用简单性，这种个性围绕着必不可少的文本内容，使用中小型的sans-serif黑色文本，线条以及很少的图像和图标。
3. 普通/中性：设计，通过使用中性和小字体以及非常结构化的布局来避开。在大公司中常见。
4. 大胆/自信：通过具有大型和大胆的排版，并具有自信的大型和明亮的颜色块，从而产生影响。
5. 平静/和平：用于关心的产品和服务，通过平静的柔和颜色，柔软的衬线标题和匹配的图像/插图传播。
6. 启动/乐观：广泛用于启动，具有中型的sans-serif字体，浅灰色的文本和背景以及圆形元素。
7. 嬉戏/娱乐：彩色和圆形设计，以手绘图标或插图，动画和有趣的语言等创意元素推动。

认真/优雅：

• 行业：房地产，高级时装，艺术和收藏品，珠宝，奢侈品或服务。
• 排版：衬线字体（尤其是在标题中），轻巧的字体重量以保持通风的优雅，并以散发出微妙和精致的小体字体尺寸互补。
• 颜色：黄金，柔和的颜色，黑色，翡翠绿，深蓝色或灰色。
• 图像：大，高质量的图像用于具有优雅且昂贵的产品。
• 图标：图标通常在这种风格中保持最低，但是可以巧妙地合并薄的图标和精致的线条，以增强设计的精致性并提供低调的优雅感。
• 阴影：通常没有阴影。
• Border-radius：没有边界 - 拉迪乌斯。

访问：evalendel

极简主义/简单：

• 行业：时尚，投资组合，生活方式博客，咖啡店/咖啡馆，极简主义公司，软件初创公司。
• 版式：箱形/平方sans-serif字体，小体字体尺寸。
• 颜色：通常在纯白色背景上黑色或深灰色。通常在整个设计中只有一种颜色。
• 图像：很少有图像，可用于为 设计。通常没有插图，但是如果只是黑色。
• 图标：通常没有图标，但是可以使用小简单的黑色图标。
• 阴影：通常没有阴影。
• Border-radius：没有边界 - 拉迪乌斯。

访问：Daniel

平原/中性：

• 行业：已建立的公司，金融机构，不想通过设计产生影响的公司。
• 版式：使用中性的sans-serif字体，文本通常很小，并且没有视觉影响。
• 颜色：使用安全的颜色，没有太亮或不得清洗。蓝色和黑人很常见。
• 图像：图像经常使用，但通常以小格式。
• 图标：通常没有图标，但是可以使用小简单的黑色图标。
• 阴影：通常没有阴影。
• Border-radius：没有边界 - 拉迪乌斯。

访问：facebook

大胆/自信：

• 行业：数字代理商，软件初创公司，旅行，强大的公司。
• 排版：箱形/平方sans-serif字体，大而大胆的排版，尤其是标题。大写标题很常见。
• 颜色：通常多种明亮的颜色。大色块/部分用于引起注意。
• 图像：通常显示许多大图像。
• 图标：通常没有图标。
• 阴影：通常没有阴影。
• Border-radius：没有边界 - 拉迪乌斯。

访问：ranks

平静/和平：

• 行业：医疗保健，所有专注于消费者福祉的产品。
• 排版：软衬线字体经常用于标题，但也可能使用sans-serif标题（例如，用于软件产品）。
• 颜色：柔和/洗净的颜色：浅橙色，黄色，棕色，绿色，蓝色。
• 图像：图像和插图通常是匹配的平静调色板。
• 图标：图标非常频繁。
• 阴影：通常没有阴影。
• border-radius：一些边界 - 拉迪乌斯通常是。

访问：Drugs.com

启动/upeat：

• 行业：软件初创公司和其他现代公司。
• 版式：中型标题（不太大），通常是整个设计中的一个serif字体。较轻的文字颜色的趋势。
• 颜色：蓝色，绿色和紫色广泛使用。许多光背景（主要是灰色）也很常见。
• 图像：图像或插图始终使用。 3D插图是现代的。有时模式和形状会增加视觉细节。
• 图标：图标非常频繁。
• 阴影：微妙的阴影是频繁的。发光正在变得现代。
• border-radius： border-radius非常普遍。

访问：Groww

嬉戏/娱乐：

• 行业：儿童产品，动物产品，食品。
• 版式：圆形和创意（例如手写）sans-serif字体经常使用。中心文本更常见。
• 颜色：多种颜色经常用于设计五颜六色的布局，遍布背景和文本。
• 图像：图像，手绘（或3D）插图以及几何形状和图案都非常常用。
• 图标：图标非常频繁，多次以手绘风格。
• 阴影：微妙的阴影很普遍，但并非总是使用。
• border-radius： border-radius非常普遍。

访问：Babymoo

---

恭喜！ð您已经达到了终点。我希望您获得了宝贵的知识。记住要继续练习和创新。保持出色的工作！

让我们在LinkedInð

上连接

- 您的学习旅程与它所揭示的可能性一样无尽。保持好奇心的活力，激情燃烧以及创造力在流动。当您接受每个挑战时，请记住，向前迈出的每一步都是迈向新视野的一步。继续探索，不断成长，并让您的创新精神在您所做的一切中明亮地发光。世界在等待您的独特贡献。继续学习，保持飞翔，永远不要停止相信自己潜力的魔力。

下次见，以获取更多惊人的指南。

快乐的编码ð»

请喜欢，分享并关注€。

随时在评论部分中提出任何问题：“我会及时彻底回答您的询问。您的疑问受到热烈欢迎，并会得到迅速而全面的答复。 €