无论您是为小型企业、产品、服务还是您自己的投资组合创建网站，熟悉网页设计基础知识都是必不可少的。有几个关键因素需要考虑，例如您网站的目的、识别受众、设计、可用性和品牌。
了解网页设计基础知识可以通过建立信誉和与访问者建立信任来帮助提升您的品牌或企业的声誉。尽管网页设计有很多方面需要考虑，但我们将介绍一些网页设计基础知识，您需要在您的网站上开始使用。
开始使用您的网站
—
定义目的
创建网站的第一阶段是确定网站的目的。您是在创建数字产品组合，向潜在客户展示您的业务服务，还是在线销售产品？您的网站的目标是什么？清晰是关键：如果用户不了解您的网站，他们就会离开。您的网站的目的应该是明确和直接的。
作家Elna Cain 的网站就是一个很好的例子。在登陆页面的首屏，浏览者很快了解到 Elna 是一位专门从事数字营销的自由撰稿人，并以她的经验、推荐和结果作为支持。用户可以立即知道她提供文案、代笔和博客写作。
一旦您确定了网站的意图，下一步就是确定您的目标受众。
确定您的目标受众
你的网站是为谁服务的？为您的目标用户设计是网页设计的典型基础之一。如果您是一名正在寻找新工作的产品设计师，您的投资组合网站的目标受众将是招聘经理和招聘人员。这将有助于确定您网站上的优先事项以及如何将用户吸引到正确的位置。
要确定您的目标受众，请对人口统计、位置和用户目标进行用户研究。考虑查看竞争对手的网站及其社交媒体页面，以分析他们的目标受众是谁，并将其与您网站的需求进行比较。还可以尝试研究您的目标受众，并根据他们的需求定制您的网站内容和副本。这增加了他们记住您的网站的机会。
Razer为计算机和视频游戏机创建游戏外围设备。Razer 的品牌、配色方案和对深色图像的使用都吸引了倾向于在较暗环境中玩游戏的游戏玩家。通过使用他们的游戏产品的图像以及他们的语言语气，宣传他们产品的“不公平优势”，该公司已经明确地定义了他们的目标受众。
Razer 齐心协力通过其社区门户与观众接触。在您的新网站上，考虑包括一个社区部分，或者至少是一个联系页面。
制定一个计划
现在您已经了解了网站的目的和受众，是时候制定计划了。您是通过聘请开发人员来创建网站还是试图找出 HTML、CSS 和 Javascript？如果你不是，不要气馁。Squarespace、Wix 和WordPress等服务提供无代码方式来构建支持桌面和移动平台的网站。
确定后，请计算出您的网络托管和域预算。并决定何时启动您的网站。如果您想了解有关如何创建网站、选择域和网络托管的更多信息，我们将为您提供服务。
寻找灵感
通过从其他网站寻求灵感，为您的网站生成创意！如果您感到困惑、不知从何开始，或者不确定您希望网站的外观如何，那么有很多网站可以满足您的需求。
您可以从查看Awwwards开始，它是许多不同类型设计师的首选灵感来源。它们拥有数十个屡获殊荣、令人眼花缭乱的网站。我们的发现页面上还展示了许多鼓舞人心的网页设计和模型。当然，看看其他艺术家和设计师的竞争业务和产品或投资组合也可能会激发您网站的创意。
Figgy & Plum 的登陆页面，如上图所示，是网页设计灵感的一个非常诱人的例子。这让我想在这家面包店吃饭。您的网站应该激励您的用户采取行动，无论是购买产品、产生潜在客户，还是联系您进行工作面试。
设计和外观
——
网格和布局
网页设计基础之一涉及使用网格进行设计。网格系统是基于测量和指南的布局。网格由列（用于放置内容的指定空间）和装订线（列之间的空白空间）组成。他们将页面分成多个部分以组织内容和层次结构。
在考虑网格和布局时，重要的是要考虑这将如何影响您的响应式设计。这意味着您的网页设计将如何适应不同的屏幕尺寸。以下是一些类型的布局：
固定布局是静态的，网站的容器不会移动。大小以像素为单位指定。这并不理想，因为如果屏幕变得足够小，用户将不得不水平滚动
流体布局使用百分比而不是像素来确定大小。这允许灵活的布局，当您使窗口变得越来越大时，它会进行调整。一个缺点是布局不知道什么时候太小太窄。
自适应布局是具有不同断点的网格。这意味着网站将保持不变，直到窗口变得足够小或足够大以达到布局设计的下一个尺寸。
响应式布局是流体和自适应布局的混合体。这种布局感觉就像一个流畅的布局，因为屏幕会随着用户使屏幕变大和变小而调整，但布局不是基于百分比。而是针对每个断点进行设计，通常针对每个可用的屏幕尺寸。这意味着您的网站在所有可用的屏幕尺寸下都看起来不错。
视觉层次
您的网站应结合广泛使用信息架构和强大的视觉层次结构，为您的用户创造无缝体验。如果您网站的信息易于消化且结构美观，它将帮助您的访问者更快地完成他们的用户任务。
有很多方法可以改善您网站的视觉层次。改善视觉层次的一些方法是使用颜色和对比度来吸引对特定文本和按钮的注意，在您希望用户关注的元素周围添加更多的负空间，并在布局中保持平衡和对称可以使事情变得简单和便于使用。
了解阅读模式还可以帮助确定将信息放在哪里。研究表明，许多访问者以 F 或 Z 模式浏览网站。通常，用户会以 F 模式扫描文本较多的页面。
这就是为什么最重要和最相关的信息出现在页面的左上方和顶部的原因。文本较少的简单着陆页通常以 Z 模式扫描。但随着时间的推移，这可能会随着屏幕尺寸的变化或移动设备成为主要设备而发生变化。为避免这种情况，请始终牢记您的用户，并研究您的用户以及他们如何使用您的网站。
导航
创建良好网站导航的基础是逻辑层次结构、简单性和多功能性。良好的导航是帮助用户找到他们需要的东西并去他们需要的地方的关键。
您可能会在任何网站上遇到几种类型的导航。一些移动应用程序和网站将使用它们的组合。
顶部导航是最常见的导航类型，显示在网站顶部或附近。如果您有很多页面，您可以使用下拉导航，当用户将鼠标悬停在菜单项上时会展开更多选项。
汉堡导航是通常隐藏在右上角或左上角的三个水平条。当用户单击汉堡图标时，将出现菜单。这是减少网站混乱的好方法。这是移动网站上的一个常见
功能，或者如果您想要一个干净或简单的网站外观。
页脚导航位于网站底部，包含很多关键信息。它可能不是您希望用户立即访问的关键内容，但它们对于在用户需要时为用户提供支持和其他关键信息很重要。通常，这些信息包括社交媒体图标、条款和条件、常见问题解答和博客等等。
底部导航与顶部导航相同，但只是在底部。随着移动设备使用的日益普及，底部导航选项可以让用户更轻松地用拇指点击。一些网站将两者结合使用。
颜色和字体
品牌对于用户如何识别您的网站是不可或缺的。您希望您的网站描绘什么样的形象？您希望您的访问者对此有何看法？品牌决定了这些问题的答案。一定要密切注意配色方案和排版。您网站的配色方案和字体选择应与您的品牌一致。
熟悉色彩理论的基础知识将对建立您的品牌和网站大有帮助。以下是一些使用色轮开始的常见配色方案：
互补色是两种相反的颜色。
类似颜色是彼此相邻的三种颜色。
三元色是在色轮上等距分布的 3 种颜色。
排版在不牺牲可读性的情况下封装您的品牌。选择正确的字体会增加您网站和品牌的整体风格。
确保检查您的字体是否是网络安全的。这意味着确保浏览器支持该字体。如果字体不是网络安全的，可能会导致您网站的文本无法在该浏览器上正确显示。查看我们的最佳网络安全字体列表。
既然您知道在哪里看，那么在选择字体时需要记住几件事：
衬线字体用于标题：通常衬线字体用于标题，因为它们在较小的尺寸下更难阅读。无衬线是正文的更好选择。
保持字体最小化：为您的网站选择一些字体。您在网站上使用的字体越多，您的网站就会显得越混乱！此外，字体过多可能会产生风格冲突。为了避免这种情况，请阅读我们关于字体配对的文章。内容
您网站的内容，包括副本、图像、视频和其他互动元素，是您网站的核心。它吸引人们并让他们保持参与。它给您的网站一种目的感，并激发用户采取行动，无论是联系您还是购买产品。
一些营销人员和网页设计师试图通过试图从人群中脱颖而出或高度关注时尚内容来重新发明轮子。相反，我建议您尽最大努力使您的内容真实可信。它应该感觉像你，并且忠于你的品牌。谈论您的产品、服务、案例研究或您提供的服务。
意象
网页设计基础的另一个强大工具是图像的使用。它可以吸引您的观众并引导他们访问您网站的内容。
DSKY的以下示例通过图像生动地概括了啤酒品牌的美感。它使用可爱、充满活力的插图描绘了自然环境中宁静、完美的时刻。这些图片共同创造了一幅数字壁画。这种效果会邀请访问者向下滚动并与登录页面的副本和内容互动。还值得注意的是，Perfect Moment 展示了他们的拉格啤酒的图片。
互动元素
交互性是网页设计基础的一个迷人元素。用户将如何与您的网站互动？添加交互式元素，例如图中的示例，将使您的网站更加有趣和脱颖而出。它也有利于用户参与。这些元素可能会激发访问者的好奇心，激发他们探索您网站的其他方面。他们将揭开哪些不为人知的秘密？
您网站的用户体验
——
作为一名 UX 设计师，我坚信可用性是网页设计基础最重要的方面。投资和研究您网站的用户体验需要时间，但它会带来巨大的回报。可用性将决定您的网站的成败。用户可能会与您的网站建立情感联系，为他们创造难忘的体验。如果您的网站难以使用或访问者迷路，他们就会离开。
为台式机和移动设备设计
为了吸引更多的受众，请为台式机、平板电脑和移动设备设计您的网站。在全球范围内，移动流量自 2015 年以来一直在稳步增长。它占全球流量的一半以上。因此，避免疏远移动用户至关重要。创建一个根据设备自动调整的响应式设计，如下图所示。
移动设备的网站基于桌面网站（首先设计为桌面），可针对移动设备规模缩小。针对移动设备优化的网站专为优先考虑移动设备而设计。
跨多个设备提供一致的体验和相同的功能是一种很好的做法。也有例外，其中包括仅限移动设备的功能，例如使用 Apple Pay 支付。针对多种设备进行设计可确保您的网站吸引尽可能多的访问者，并且还可以减少不必要的混乱。在此处阅读有关为桌面和移动阅读器定制您的网站的更多信息。
可访问性
您的网站应该可以访问并通过可访问性标准。这有助于建立更好的可用性，覆盖广泛的用户，并且具有包容性。
有许多工具可以测试颜色和字体的可访问性，例如颜色对比度分析器。您可以做的另一件事是向描述图像内容的图像添加替代文本。当图像无法加载或损坏时，这也可以提供帮助。为音频和视频录制提供字幕和转录也是创建可访问内容的另一种方式。
本文地址：
http://www.njanyou.cn/news/6078.html
Tag：
专业服务：
南京网站制作,
南京网站制作公司,
南京网站建设公司
联系电话：025-65016872
上一篇：
创意总监与艺术总监：有什么区别，哪一个更适合你
下一篇：
品牌管理的原则
