无论您是充满创意还是不确定从哪里开始，这个网页设计初学者的快速入门指南都可以帮助您创建既美观又实用的网站布局。
无论你有多少设计专业知识，一个全新的网站都相当于一个作家的空白页——你可以做的事情太多了，甚至很难开始。因此，在开始使用 Lorem Ipsum 之前，请阅读这 10 条网站设计规则。即使您确切地知道自己想要什么，我们也保证您会在这些指南中找到有用的东西。滚动到文章底部，了解我们久经考验的关于如何设计网站的三步流程——从网站图标到 Web 字体、站点地图到十六进制颜色——并获取有关电子商务、企业设计的专业提示/机构/公司、投资组合或博客。
总之，这些指南和提示将帮助您将访问者留在您的页面上更长时间，并无缝地引导他们从 A 点到 B 点。
设计有效网站布局的 10 条规则
在开始构建您的网站之前（热切的海狸向下滚动以发现故障安全构建过程），请考虑将这十条规则作为有用的指导方针，使您的网站布局不仅更时尚，而且更有效。
规则一：避免混乱
布局杂乱无章的图像、按钮阵列，不仅使布局看起来不平衡。它们还会阻止访问者到达您希望他们采取的下一步，无论是登陆您的联系页面还是将产品添加到他们的购物车中。请记住，空白是您的朋友。
规则 2：将设计放在首位
“折叠”是指浏览器的底部边框*。折叠下方的任何内容都只能通过滚动才能到达，这意味着用户首先需要被迫这样做！始终将关键内容和信息放在此行上方。
*请注意，移动网站上的折叠更短，让您说服访问者继续滚动的空间更少。算一算。
规则 3：牢记希克定律
希克定律指出，增加选择的数量会增加个人做出决定所需的时间。通过限制用户体验每个阶段的选项，确保您的访问者的注意力不会被吸引到网络上的其他地方。一个号召性用语按钮比冗长的菜单选项有效得多。
规则 4：鼓励滚动，而不是点击
滚动允许您的网页布局的无缝延续。将其与点击进行比较，点击可以为体验增加加载时间。在移动设备上滚动也更直观。
最重要的是，滚动比点击更懒惰，这意味着用户在网站上停留的时间更长。最近Crazy Egg 的一项研究证明了这一点，它通过从点击切换到滚动显示了36%的转化率增长。
规则#5：保持照片真实自然
您知道网络访问者会“屏蔽”人造照片吗？模型业务团队的过度拍摄似乎很适合公司网站，但您或您的团队成员的更真实的图像会与观众产生联系。真实的生活，自然的股票图像是一个很好的选择。事实上，我们已经为您的网站策划了最佳库存图片类别，以便您可以轻松选择适合您品牌的外观。
规则 6：使用视觉提示
使用图像或图形来引导用户，例如人们看向按钮或箭头指向菜单选项的照片，是一种久经考验的技术，用于引导访问者进行重要操作。明显的？或许。有效的？确实。
规则#7：字体应该首先清晰，然后时尚
您是否曾经登陆过一个令人痛心的网站，却在试图阅读难以辨认的斜体衬线时发现自己的脖子伸长了？有很多漂亮的网络字体，但其中许多不属于网站。
清晰易读的文本不会让人分心，并确保关键信息在各种屏幕尺寸上都能阅读。与衬线或斜体相比，干净的几何无衬线字体或厚实的显示类型是网站的最佳字体。
规则 8：颜色是心理因素
颜色是为您的网站布局注入特定情绪和个性的即时方式。此外，正确的颜色选择还会影响用户对您网站的反应。您知道橙色可以向客户传达良好的价值吗？或者蓝色与智慧和想象力有关（使其非常适合创意机构）？阅读色彩心理学，并做出能够给访客留下正确印象的颜色选择。
规则 9：移动优先设计
大多数初次使用网页的设计师都认为他们的网站是在一个比例很大的桌面上浏览的，但实际上，全球大约一半的浏览会话是在移动设备上进行的。对于某些行业，移动用户的比例可能要高得多。
许多专业网页设计师会建议首先考虑移动设备设计您的网站布局，但至少对两者给予同等关注将确保您拥有一个在各种设备上都有效且美观的网站。
规则 10：为每个人设计
世界卫生组织 (WHO) 确定，全球至少有 22 亿人有视力障碍或失明，这意味着全球 28.5% 的人口存在某种形式的视力障碍。改善布局的颜色对比度，例如将黑色文本与白色背景配对，以及选择大型无衬线字体是两种简单的方法，可帮助您的网站设计尽可能易于访问和包容。
如何设计网站：初学者实用指南
记住这十个创建漂亮网站布局的实用技巧，您就可以开始设计您的网站了。
创建网站可能很有趣……但如果您不确定从哪里开始，也可能有点令人沮丧。在这里，从实用的角度发现我们久经考验的网站设计流程。
将此视为您创建任何专业网站设计的构建计划。将此页面添加为书签，即可立即查看您的网站。
第 1 步：建立您网站的身份
每个网站都需要统一的外观和风格，作为一种跨网站所有页面的品牌标识。这不仅为您的网站提供了精美和专业的外观，而且还有助于在访问者在网站上移动时保持他们的参与度。如果页面看起来彼此明显不同，这会对用户体验产生负面影响并缩短会话时间，因此花时间优化站点的整体标识是值得的。
有效的站点标识包括以下内容：
- 网站图标
- 标识
- 排版
- 配色方案
继续阅读以了解如何将每个融入您的网站标识中。
网站图标
图标是您网站的标识图形，在 WordPress.com 中的小部件中使用，并在保存到浏览器或手机时用作书签或主屏幕应用程序图标。浏览器选项卡上的网站标题旁边会出现一个小版本的图标，即收藏夹图标。
站点图标是方形的，至少512 x 512 像素，通常保存为PNG、GIF或ICO文件。Favicon 可以更小，但对于 Chrome 在 Android 设备上使用的高分辨率规格，图标至少需要196 x 196 像素。
使用正确的尺寸和文件类型上传您的站点图标非常重要，这样它才能无缝显示。通常，您使用的主题会告诉您这些信息，但根据经验，最好将图标上传为 PNG。有很多关于 Web 图像显示的规则。
标识
徽标是站点图标的更全面版本。例如，站点图标可能只使用简单的视觉图形，而徽标可能除了图形之外还包含一些文本，例如公司名称。
徽标需要适当调整大小以在不同设备上有效工作。需要注意的主要事项是某些设备（例如 Mac 和其他 Apple 产品）使用Retina Display技术。与旧设备相比，这项技术每英寸显示的点数更多，约为 300 DPI，从而产生更清晰、更清晰的图像。
为确保您的徽标在标准显示器上的显示效果与在视网膜显示器上的效果一样好，最简单的方法是将视网膜徽标的大小加倍。因此，例如，如果您的网站 CMS 提示您上传 100 x 100 像素大小的徽标，您应该上传 200 x 200 像素版本。
如果您要创建新品牌或新业务，请以此为契机，针对响应式网页设计优化您的徽标。这将说明您的徽标将出现在网络（和印刷品）上的所有位置，每个位置都需要不同的格式和复杂程度。一种选择是创建一个灵活的类型徽标，该徽标与您品牌的字体一起使用，以便为任何类型的媒体制作徽标变体。
无论您如何设计徽标，了解如何正确保存文件都很重要。徽标应始终保存为矢量，以便您可以重新访问它并进行更改，例如调整其大小或调整颜色。当您准备好上传到您的网站时，请确保将徽标文件另存为 PNG，以便清晰显示且没有像素化。
网页字体和排版
与印刷设计一样，网站的排版也遵循许多相同的指导原则。在您的网站上建立类型层次结构很重要，这些层次结构将由H-tags定义。“H”代表“标题”，H1 定义了最重要和最大的文本样式，H2 是次大和最重要的，并继续向下扩展到 H6。
您需要找到在设置为任何 H 大小时都清晰易读的网络字体。因此，大多数网页设计师喜欢使用超清晰的无衬线字体作为较小的标题，并尝试使用衬线、显示样式或斜体仅用于 H1 或 H2 文本。
您可以在您的网站上安装网络字体，这意味着访问者将在访问该网站时下载该字体，从而使您可以密切指定您网站上的排版风格。Google Fonts提供了大量免费的开源网络字体，但您也可以在一系列字体商店中找到更多免费和付费的网络字体。滚动浏览我们编辑的 101 种网络上最好的免费字体，找到您喜欢的字体。
可以说在网站上比印刷媒体更重要的是专注于使文本更清晰。这是因为移动设备可能很小，而且屏幕发出的光会使视力受损的读者难以阅读。您还可以通过增加字体大小、使用更清晰易读的字体（例如无衬线字体）以及增加字体颜色和背景之间的颜色对比度来提高易读性。
我们在为您的网站设计选择最佳字体和字体组合时考虑了网络显示因素，因此您可以轻松选择标题和正文字体以实现您的身份。
颜色
颜色有时会在构建过程结束之前被忽略，但它是一个强大的工具，不仅可以统一您网站的页面，还可以影响用户的情绪和感知。
对于网站，颜色定义为HEX 代码。HEX 代码是 RGB 颜色的编码版本，格式为#RRGGBB (#RedRedGreenGreenBlueBlue)。不确定如何将 CMYK 或 RGB 色板转换为 HEX？HTML 颜色代码允许您使用在线颜色选择器和颜色图表工具轻松查找和转换颜色代码。
您可能有现有的品牌调色板可供使用，但如果没有，您可以使用色彩心理学理论来帮助您做出颜色决策。不同的颜色对观众有强烈的心理影响，使您选择的调色板成为让用户在页面上停留更长时间的潜在重要方式。
了解不同的颜色如何影响访问者对您网站的看法和反应：
- 霓虹灯
- 橘子
- 蓝色
- 绿
- 白色
请记住，您的品牌颜色（可能是徽标中的颜色）不必是您网站上的唯一颜色。事实上，如果您的标志是亮橙色和黄色，您可能只想将这些颜色用作强调；明亮的黄色背景会使观众的眼睛疲劳，难以阅读任何文字。与排版一样，颜色选择会影响您网站的易读性并对用户体验产生巨大影响。
要查看一些适用于网络的调色板，请查看我们精心挑选的配色方案。这些不仅考虑了用户体验因素，还提供了有助于区分您网站的独特组合。
第 2 步：建立您网站的主页
金窝银窝不如自己家里的狗窝。这对于网站和生活来说都是如此。
主页或登录页面是您网站的焦点。它通常是来自搜索引擎的访问者的第一个接触点、位于站点地图中心的页面，以及访问者在浏览其他页面后经常返回的页面。主页应该为网站的其余部分设置风格基调，并使用号召性用语（例如按钮）、视觉提示（例如箭头）或菜单选项将用户引导到其他页面。
主页的一个很好的经验法则是遵守希克定律（参见上面的黄金法则 #3），确保仅向用户提供有限数量的选项来进行操作。
例如，您可能希望鼓励读者向下滚动，折叠上方的箭头或号召性用语可以作为提示。想要鼓励点击到不同的页面？突出的按钮或菜单选项应该是布局的焦点。对于以搜索为中心的网站，搜索栏应该清晰、醒目并且最好位于页面的中心。
主图是主宰登陆页面的图像。但是，如果您愿意，您可以将其替换为突出的排版、动画或视频。此图片的功能是让用户对您的网站有一个即时印象，以及培养更加身临其境的用户体验。它可能会使用特定的配色方案或样式来加强您网站的视觉标识。
英雄形象也可以巧妙地用作视觉提示。一个独特的颜色或图案区域可能会将眼球吸引到按钮上，或者更明显的是，肖像可能看起来或指向布局上的某个元素以引导用户
第 3 步：为其他页面构建模板
因此，您已经为主页创建了一个布局，并制定了您希望用户从主页获取的主要方向。现在您应该已经开始准备一些站点地图了。所有网站都是不同的，服务于不同的目的，但通常有一些所有网站都需要的核心页面。这些包括：
- 关于页面
- 联系页面
- 类别页面（提供特定类别帖子的页面，例如服装电子商务网站上的“男装”）
- 服务页面（适用于企业网站）
- 项目页面（用于博客和作品集）
- 产品页面（适用于电子商务网站）
- 新闻页面或博客帖子页面
如果您的网站有搜索功能，也会有搜索结果页面。
设计每个页面以适应不同的元素。类别页面会引入大量帖子预览，因此您可能希望将布局基于具有大量列和行的 Pinterest 样式网格。联系页面可能需要包含地图以及电话和地址详细信息。关于页面可能包括团队成员的个人资料图片以及介绍性文字。
网页设计师使用线框来确定元素应该如何在网站的不同页面上排列。线框是代表网页骨架的视觉指南。您可以使用线框软件来模拟这些，使用矢量软件例如 Adobe Illustrator，或者简单地手工绘制线框。无论您如何创建它们，它们都将作为您网站布局的基本蓝图。记下元素的尺寸也很有帮助，例如绘图上的图像和列，以便在构建站点时参考。
在构建您的线框图时，重要的是参考您建立的站点标识（在构建过程的第一步中）和主页布局（第二步）。这两者都将有助于决定您如何布局和设置其他页面的样式。保持页面之间的某些功能一致，例如排版、图像样式和配色方案。这将确保您的最终网站设计具有统一和一致的外观。
有关图片的指导，请查看您为主页选择的主图。这是否具有可以在其他图像中模仿的特定功能，例如黑白配色方案或肖像风格？
选择和编辑图像后，您还需要调整它们的大小以供 Web 使用。在Adobe Photoshop 中，转到“文件”>“导出”>“为 Web保存”，以JPEG、GIF或PNG格式保存具有特定像素尺寸的图像。如果您无法使用照片编辑软件，免费的在线调整图片也是一个方便的工具，用于调整和压缩批量图像。