网站设计终极指南：深入了解网站设计基础知识，UI 元素、可用性和可访问性等基本方面

随着现代技术变得越来越强大并受到当前浏览器的广泛支持，网站已成为设计师的画布。在这里，艺术家们展示他们的技巧和生动的想象力。我们考虑各种形状和大小的网站设计，在数字领域展现其华丽的美感和放大的氛围。

有效的网站设计不仅仅是漂亮的外表；还在于出色的用户体验和卓越的性能。无论你有多么华丽的设计，如果难以导航和检索重要信息，那么它就是失败的。网站设计是一个复杂的有机体，所有元素，甚至是那些看不见的元素，都共同作用以提供一个完美的地方。

让我们深入了解网站设计基础知识，并考虑关键 UI 元素、可用性和可访问性等基本方面。

网站设计的目标

设计网站可以追求不同的目标。然而，最受欢迎的是代表您的公司。除此之外，它还有助于

• 倡导品牌
• 表达个性
• 建立忠实的用户
• 与用户沟通
• 玩营
• 开展广告活动
• 推广产品
• 售货
• 提高意识

根据目标，网站设计可分为以下几类：

• 个人作品集
• 设计机构网站
• 企业网站
• 启动
• 电子商务
• 杂志
• 博客
• 教育网站
• 娱乐网站
• 移动应用网站
• 软件服务
• 登陆页面
• 实验网站

当目标明确并且项目的形状确定后，就可以决定要创建什么类型的网站设计了。它是静态页面、动态网站还是其他？

网站设计的 3 种主要类型

为了找到完成您的使命的最佳匹配，您需要决定哪种类型的网站设计最能反映您的想法并与受众产生共鸣。考虑三种类型的网站设计以做出明智的选择。

1、静态网站设计

静态网站设计是具有固定内容的HTML 和 CSS 模板。它向每个访问者提供相同的信息。尽管它缺乏动态效果，但它是一个相当受欢迎的选择。在静态网站设计中，内容仅占主导地位。没有什么可以分散用户对他们目标的注意力。

因此，此类网站设计独占一席之地，在某些领域占据领先地位。例如，它用于快速开展营销或广告活动。它还用于个人投资组合或小型初创公司，其团队希望向在线人群介绍自己或测试新产品的基础。

最后但重要的是，静态网站设计流行的一个重要原因是它们的开发成本较低。

2、动态网站设计

要创建功能更强大、更有意义、更令人印象深刻的在线演示文稿，您需要一个动态网站。与一切都保持静止的静态解决方案不同，这里各种微交互支持信息并确保令人愉快的用户体验。

动画、悬停效果、视差、可滑动轮播、鼠标轨迹、变形汉堡按钮、WebGL 和数字生成的 3D 场景：有许多有趣且引人注目的解决方案。

尽管动态网站充满了各种花里胡哨的东西，但这并不意味着它们很难实现。使用适当的工具，您无需编码和设计技能即可快速创建时尚、动态的网站，就像静态网站设计一样。

3、概念和实验网站设计

概念性和实验性网站设计突破了现代技术的界限。他们利用先进的功能来提供独一无二的体验。它可以是游戏、数字生成的游乐场或虚拟现实。因此，它们令人印象深刻。

有两个主要缺陷。首先是浏览器兼容性低。通常，只有所选浏览器的最新版本才能支持所有这些精彩的表演。第二个缺陷是它们需要大量资源才能顺利运行：即使使用适当的浏览器版本，也并非所有用户都可以享受该操作。

尽管如此，作为令人兴奋的概念，它们确保了该领域的进步并设定了新的标准，这些标准有一天将成为现实。

设计网站的重要元素

无论您要设计什么类型的网站，您都需要确保一切都经过深思熟虑。让我们考虑一下需要密切关注的用户界面的关键元素。

1. 网格

几乎每个网站设计，无论是不对称的还是混乱的，都有一个核心网格系统来完成对齐和定位的繁重工作。网格是大多数项目的基础。它们确保行为的稳定性、灵活性和可预测性。网络上有各种各样的预制网格系统。例如 Bootstrap。

根据项目的不同，您可以选择一个或另一个。尽管 Bootstrap 在网络上广泛使用，但在某些情况下，您可能会享受到鲜为人知的解决方案的好处，因为它们轻量级且简便。

2. 内容

您的网站就是为用户提供信息并将正确的信息带回家。因此，内容是重中之重。为了让它履行其使命，请遵循以下基本提示：

• 格式化所有内容。格式介于混乱和良好的可读性之间。它确保您的消息得到传递。因此，应该深思熟虑。
• 根据用户的喜好和浏览习惯调整写作风格。使用可以理解的语言。
• 开门见山。使用简短的短语。
• 避免长文本块。对内容进行分类。如果您别无选择，请添加图像、标题和 CSS 样式，将统一的流程分解为易于理解的块。
• 避免右对齐和两端对齐的文本。坚持左侧。
• 使用空白来加强视觉层次结构。

3. 呼吁采取行动

即使您不追求营销目标，您仍然有可能至少有一个号召性用语按钮。

每个网站设计都有一个使命。您可能希望收集电子邮件以发送定期更新，或者您可能希望通过表格与读者沟通，或者您可能希望获得反馈或评论。没有按钮就无法实现这一点。它们是现代用户界面的基本元素。

为了让它们为您服务，请遵循以下基本原则：

• 让他们脱颖而出。
• 将它们做成带有圆角的矩形，因为这是人们习惯的惯例。
• 使用动作词。
• 使用安全颜色。蓝色、绿色和红色是 CTA 的热门选择。
• 为各种状态添加 CSS 样式。
• 在按钮周围添加空间。

4. 链接

就像按钮一样，超链接对于用户界面至关重要。它们是通向重要页面的小途径。因此，它们应该是突出的、有意义的并且格式良好。要使链接可用，请遵循以下提示：

• 遵守流行惯例。每个人都知道链接是蓝色的并带有下划线。所以不要让访客感到困惑。
• 避免使用通用说明和短语。让它们变得有意义。使用动作词。
• 使它们简洁但切中要点。避免冗余。
• 在同一浏览器中打开链接，以便用户可以通过后退按钮返回。如果链接指向 PDF 文件或随附文档，请在新选项卡中打开它。
• 在视觉上区分链接和锚点以避免混淆。
• 使用鼠标光标添加视觉提示。
• 添加悬停效果，让交互设计更加直观。

5. 导航

尽管导航只是一个执行良好的列表，但它仍然可以具有有助于用户体验的有吸引力的功能。它甚至可以成为趋势的发起者。还记得五年多前风靡网络的汉堡按钮吗？

事实上，如今，六种流行的菜单类型为网站设计增添了时尚感。

• 整洁优雅的流线型标题导航
• 隐藏在汉堡按钮内的时尚滑出式导航
• 全方位的多级页脚导航
• 不容错过的全屏菜单
• 精致的超窄侧边栏导航
• 微妙的周边导航与垂直节奏和装饰线相结合

除了这些类型之外，设计师还提出了一些独特的想法，例如基于圆圈的导航或带有热点的交互式英雄区域。然而，无论您实现什么想法，重要的是要记住导航是用户体验的关键元素。这是决定用户是留下还是离开的决胜局。

• 使其干净、清晰。
• 提供良好的对比。
• 使其在整个网站中保持一致。
• 包含的项目不超过 7 个。
• 仅显示重要链接。
• 把它粘到顶部。
• 始终添加主页链接。
• 使其响应灵敏且适合移动设备。
• 确保整个布局的每个部分都可以使用它。

6. 颜色

每个人都知道色彩心理学以及每种色调对人类行为的影响。经过深思熟虑的调色板可以提高公司网站的效率。它可以营造气氛，让每个人处于适当的情绪，强化信息，增加可信度，甚至推动转化。根据色调的不同，某些颜色可能会使设计充满活力，或者相反，完全破坏它。因此，需要仔细规划。

要在设计中进行指甲着色，请问自己几个重要问题。

您的品牌颜色应该如何体现您的个性？

你的品牌是主动的还是被动的？如果你想显得更活跃，那么你应该坚持选择更明亮的选择。

您想让人们对某件事感到兴奋吗？如果是，那么您需要坚持使用更有活力的颜色。

谁是你的用户？现代色彩非常适合追求明星的初创公司。传统颜色非常适合注重稳定性和寿命的企业。

7. 视觉效果

你能想象一个没有图像的在线页面吗？在网站设计方面，视觉效果与文本共存。因此，图像、插图、图标和视频的使用应该经过深思熟虑。

遵循这些简单的做法。

• 使用有意义的图像。即使是用于装饰英雄区域的装饰选项也应该支持品牌并强化网站背后的主要信息。
• 使用定制和个性化的视觉效果，因为通用图像可能会让访问者望而却步。
• 使视觉效果响应灵敏且适合移动设备。确保它们在所有浏览器和屏幕尺寸上看起来都很好。最重要的是，它们在视网膜屏幕上应该看起来不错。
• 图像、图标，甚至 GIF 动画都应该易于访问。
• 请记住，图像和视频是天然的磁铁。因此，请确保它们不会掩盖重要信息。
• 实现视觉教具和文本之间的平衡。

8. 版式

市面上有很多很棒的网络字体，在这里你需要谨慎行事并保持理性。一般做法要求在一页内使用不超过三种字体。

造成这种情况的主要原因是单个页面中字体的多样性使内容看起来混乱和混乱。每种字体都有自己的个性，具有特定的情绪、基调和魅力。混合字体是一门艺术。它需要在类型系列之间找到平衡，以确保最佳的可读性并创建统一的体验。

如果您想打破常规并使用其他字体系列，请记住以下规则：

• 避免使用同一类别的字体，尤其是那些具有过度装饰性的字体。
• 为每种字体分配角色以定义排版层次结构。
• 提供对比。
• 造成字体粗细的明显差异。
• 选择具有高度可读字形的字体。

如果对混合哪种字体有疑问，请坚持只使用一种。使用一种字体系列永远不会出错。您所需要做的就是调整尺寸、重量和风格。它会让事情变得简单、简约、和谐、赏心悦目。

良好网站设计的原则

每个成功企业的黄金法则是客户永远是对的。网站设计也不例外。当您创建一个在线平台来推广品牌或特定产品时，您应该专注于目标市场。无论你心里有什么想法，如果你的听众不明白，那么你就搞砸了。为您的市场提供信息并在各个层面提供最佳的用户体验 – 这就是方法。

让我们考虑一下好的网站的原则，以便您可以创建一个以用户为中心的环境，与目标市场产生共鸣，宣传您的品牌并带来利润。

• 创建清晰的结构。
• 最大化“F”或“Z”阅读模式。顺序阅读流程在网络上不起作用。人们习惯于突然从一个区域转移到另一个区域。因此，请将标识、导航、号召性用语、图像、服务优势等基本元素放在顶部或左侧。
• 简化感知所呈现信息的过程。
• 使用大小、颜色和位置等视觉线索告诉读者什么是最重要的。例如，尺寸越大，色调越亮，重要性就越高。尺寸越小，颜色越柔和，重要性就越低。用它来赋予页面结构。
• 突出显示标题、按钮和链接等基本元素。
• 添加有关如何了解有关您的品牌或服务的更多信息的微妙提示。
• 确保内容有意义，无需呈现样式。使用标题级别和无序列表使正文易于理解。
• 把事情简单化。请记住，人们随时了解信息。此规则的例外是个人作品集和创意机构的网站，其中内容和令人惊叹的因素齐头并进以赢得客户。
• 提供锚点和焦点，引导用户顺利、高效地浏览内容。由于人们更喜欢扫描网页，因此这些元素将为他们提供实际价值。
• 减少认知负荷。向用户展示实现目标的路径，让他们更容易理解网站背后的想法。
• 使导航直观。所有关键内页都应该一键即可访问。最重要的是，每个页面都应该有一个快速返回的方法。
• 用户可操作性。例如，如果有弹出窗口，那么它们应该有明显的关闭按钮。
• 切勿在默认情况下或在页面加载时开始播放视频。
• 包括对沟通至关重要的元素。
• 在整个网站上坚持一致的数据呈现。
• 坚持传统设计。它确保信心、信任和可靠性。
• 创造最佳的用户体验。
• 优先考虑一项行动
• 发挥营销技巧：使用朗朗上口的口号，增添一点个性，并用你的魅力为一切增添情趣。
• 不需要用户做任何事情来测试您的服务。请勿强迫用户泄露其电子邮件地址或其他个人数据。
• 不要提供太多选择。众所周知的选择悖论，用户拥有的选择越多，他们做出决定的可能性就越小。更重要的是，客户最终可能会对选择感到不太满意。因此，缩小选项的数量。让他们分组并组织起来。
• 测试您的网站设计，以获得对重大问题的重要见解。在各个阶段检查它，并以全新的视角观察它。

网站设计的可用性

内容为王，但参与度为王。可用性是优秀网站设计和用户体验的核心。这是企业家经常忽视的事情，尽管它对每一个成功的营销项目都有影响。

• 它创造了一个舒适的环境，让用户可以得到他们需要的东西。
• 它创造了令人难忘的用户体验，从而吸引更多回头客并通过访问您的项目获得更大的满意度。
• 它为用户提供重要信息。
• 它有助于实现对于推广产品和宣传品牌至关重要的营销技巧，而不会感到咄咄逼人和专横。

因此，可用性应该是重中之重。考虑一些关于如何改进网站设计的有用技巧。

• 让导航清晰。
• 修复损坏的链接。
• 仔细检查内容；纠正语法错误和拼写错误。
• 确保性能。通过选择更好的托管提供商来减少服务器的正常运行时间。通过改进代码和优化图像来提高您的网站速度。
• 使布局响应灵敏且适合移动设备。
• 确保您的网站在所有浏览器上都能一致运行。
• 让所有人群都能接触到设计。
• 确保界面元素传达相应的含义。链接就应该是链接；按钮应该是按钮。
• 创建引导式用户体验。
• 提高可读性，使所有字母看起来清晰易读，正文易于扫描。创建最佳的信息层次结构。
• 让它值得信赖。为了确保可信度，请添加“关于我们”页面以及您的团队成员。
• 添加社交媒体图标以提供与您联系的各种渠道。
• 添加支持团队并与私人助理聊天，以快速有效地解决所有问题。
• 添加推荐或令人印象深刻的统计数据来量化和鉴定您的品牌。
• 添加交互功能，帮助用户快速获取重要信息并顺利浏览网站。
• 提供舒适的搜索。如果您有一个大型门户网站，例如在线商店或杂志，您应该采用高级搜索来快速找到访问者正在寻找的内容。
• 使内容具有相关性。

出色的可用性始于深入的研究、测试和持续的微调。准备好进行多次迭代和试验，并修复错误以产生最佳结果。

如果您觉得实施可用性提示具有挑战性，您始终可以使用专业工具解决此问题。例如，许多可用性工作都是由Slides为您完成的。所有现有的块不仅可以很好地协同工作，而且还有助于传递消息、查明关键元素并提供舒适直观的用户体验。

网站设计中的无障碍

一个普遍的误解是，建立一个包容性的网站设计是不可能的。得益于现代辅助技术，用户体验不会受到影响。您只需要确保您的网站设计满足可访问性要求。

让网站设计完全无障碍并不难。它不需要额外的预算或技能。尽管您可能需要花时间对现有网站进行调整，但这仍然很容易。请按照以下步骤弥合残疾人与您的网站之间的差距。

• 坚持深思熟虑的语义标记。它不仅为辅助技术和搜索引擎提供有用的信息，而且还确保了一个可以轻松改变用途的面向未来的基础。
• 确保 HTML 结构在没有 CSS 的情况下清晰且有意义。它应该有一个可见的层次结构。
• 不要依赖颜色。
• 使用不超过三种字体。
• 将正文大小设置为 16 像素，行高设置为 22-24 像素。另外，每行文本坚持 18 个单词或 50-80 个字符。
• 为前景中的元素提供足够的对比度以便于阅读。
• 使用形状、标签和尺寸来传达复杂的信息。
• 通过添加纹理使标签更易于访问。
• 根据情况改变鼠标光标，让体验更加直观。
• 使用不同样式的按钮来指示不同的状态。
• 添加悬停状态样式以更有效地突出显示链接。
• 添加焦点状态的样式。
• 切勿移除焦点指示器。链接、表单字段、小部件、按钮和菜单项——所有这些都应该是可聚焦的。
• 使表格清晰。使用标签来解释每个输入的目的。
• 避免在按钮中使用通用短语。CTA 应该不言自明且简单明了。
• 使按钮的区域足够大以便可以轻松点击。
• 为移动屏幕上显示的元素添加滑动导航。
• 使元素可通过键盘访问。
• 为所有关键元素分配 ARIA。
• 为图像添加 ALT。如果图像纯粹是装饰性的，则省略 ALT。
• 避免冗余。
• 使用不同级别的标题。
• 不要使用表格作为布局。仅将其用于显示表格数据。
• 仔细考虑网站设计中交互元素的顺序。
• 支持键盘导航。导航必须符合逻辑且直观。
• 避免自动导航。
• 避免自动启动的视频。
• 避免有害内容。
• 避免使用带有快速闪烁灯光、移动图案或闪烁显示的 GIF 动画，因为它们会导致人们光敏性癫痫发作或癫痫。

网站设计趋势

1、深色模式

深色模式是即是黑色模式。一整年，网站设计和移动设计都以它为特色。即使是流行的操作系统也已经利用了这一趋势。

整天处理各种显示器（笔记本电脑、平板电脑、手机、智能手表、电视、便携式游戏机），让用户厌倦了一切明亮而充满活力的东西。深色模式可以减轻眼睛疲劳，从而提供一个舒适的环境，让人们可以毫无压力地享受用户界面并获取所需的信息。它来得正是时候。

除此之外，它还有其他一些优点。它很好地适应了流行趋势。它有助于在视觉效果和文本之间建立平衡。而且有一种强大的精致感。

2、定制插图

插图是吸引访客、传达信息和增添人情味的好方法。在数字世界中，艺术品自然以其强大的个性和温暖的氛围脱颖而出。插图方法常常变得流行。今年，该领域出现了两个突出的子趋势，令我们感到高兴。

首先是使用不完美的插图。有些是荒谬的，有些是抽象的。所有这些都促进宽容，这是一个紧迫的问题。最重要的是，他们提供了可以提高参与度的深思熟虑。

第二个子趋势是动画插图。与传统的长序列不同，这些序列非常短。他们发表声明，澄清事情，在行动中展示特征，并给人留下深刻的印象。通常，精美的人物角色位于其核心，使网站的设计对受众来说更加熟悉和友好。

3、微交互

微交互是已成为经典的趋势之一。如果没有散布在整个网站中的大量微交互，我们无法想象良好的用户体验。它们传达状态、提供反馈、娱乐用户、强化信息、增强用户体验并加强直观探索。

微交互有不同类型；最受欢迎的是：

• 动画
• 滑动动作
• 汉堡按钮启动
• 有意义的悬停效果
• 鼠标交互

结论

每年，网站设计都变得越来越复杂。动画、移动插图、鼠标试验、另类导航、VR——有各种各样的怪癖。然而，经过时间验证且可行的解决方案仍然存在空间，例如可以快速有效地解决许多问题的静态网站设计。

无论您有什么想法，请记住不仅要投资于设计，还要投资于用户体验和可访问性。按照指南创建一个代表品牌、向所有人群传递信息、与目标市场产生共鸣并有效实现您的目标的网站设计。