网站 UI 设计：初学者指南
已发表: 2020-10-27用户界面，或简称 UI，是网页设计中极其重要的一部分，它处理访问者如何浏览网站必须提供的许多不同页面和交互式材料。 在互联网的早期，UI 过去要简单得多，因为 HTML 是节目的明星，在艺术选择方面相对较少。 然而，在过去的几十年中，网站开发技术和互联网用户的期望呈指数级增长，这使得 Web 界面设计的外观和可用性变得至关重要。
对于那些希望增加流量和改善 SEO 的人来说，网站 UI 是其中最重要的因素之一。 拥有一个美观、易于使用的网站是保证访问者不仅可以点击不同的网页，还可以重新访问网站并将其推荐给其他人的保证方式。
良好 Web UI 设计的基础
虽然外观很重要，但网站的易用性是提高知名度和创建专用用户群的主要方式。 关键是结合不同的界面元素，使网页布局尽可能地保持不变和合乎逻辑。 用户在尝试浏览网站上的页面时不希望有太多的猜测或压力。 有必要明确界面元素在页面上的位置，有这些元素的描述
立即可以理解，并使每个页面上的元素放置尽可能相同。 虽然最后一个要求可能难以实现，但拥有一致的方式来遍历网站，如通用导航栏，是良好网站设计的重要组成部分。
需要特别注意的常见网页 UI 设计元素有：
- 工具提示
- 标签栏（专门针对移动用户）
- 步进器/滑块
- 搜索字段
- 侧边栏
- 纽扣
- 面包屑（链接路径）
- 日期/时间选择器
- 图标
- 通知
- 菜单（烤肉串、汉堡包、便当、烤肉、肉丸）
- 评论区
- 进度条
- 检查/单选按钮
- 手风琴
正确的界面元素组合可以极大地提升用户体验，但最好不要让一切都过于复杂。 例如，颜色可以有效地将人们的注意力引导到网页的某些部分，但如果它的代价是使页面难以阅读或分散其他元素的注意力，那么最终可能不值得。
UI 设计应该是相对无缝的，并提供一种信任感，即网站开发人员在他们制作内容的任何主题上都是权威。 它应该考虑到用户在浏览页面时正在寻找什么，这样他们就不必过多考虑网站的结构。 网站内容应具有逻辑结构，并具有合理的信息和服务层次结构。
复杂的任务需要压缩成用户可以轻松访问的简单结构。 例如，有一个下拉菜单，最相关的信息列在顶部，其他所有信息按重要性降序排列。 这将是一个很好的选择，而不是在侧边栏或导航栏中简单地放置一堆随机链接或功能。 例如：
（图片来源：中）
UI 元素应始终以最大化用户兴趣的方式彼此相邻放置。 如果网站安装了搜索功能，最好将搜索按钮放在用户选择或输入搜索词的位置旁边。 在这种情况下，颜色编码可以提供极大的帮助，但前提是它不会干扰页面布局的其余部分。
避免在一页或几页上放置太多信息也是一个好主意。 即使网站上有很多好的信息或工具可用，如果太多的信息或工具被压缩到太小的空间中，用户将难以导航，导致体验乏善可陈，并希望避免将来访问. 虽然如果一切都分布得更均匀，用户可能不知道某些网站功能，但通过使内容更易于理解将得到更多补偿。
在 60 秒内测试您网站的 SEO 和性能！
良好的网站设计对访问者的参与度和转化率至关重要，但网站速度缓慢或性能错误甚至可能使设计最好的网站表现不佳。 Diib 是世界上最好的网站性能和 SEO 监控工具之一。 Diib 利用大数据的力量帮助您快速轻松地增加流量和排名。 正如在企业家中看到的！
- 易于使用的自动化 SEO 工具
- 关键字和反向链接监控+想法
- 确保速度、安全性和核心生命体征跟踪
- 智能地提出改进 SEO 的想法
- 超过 250,000,000 名全球会员
- 内置基准测试和竞争对手分析
被超过 250,000 家公司和组织使用：
与
网站UI设计中要实现的东西
了解了 Web UI 设计的基础知识后，最好看看一些更高级的考虑因素，这些考虑因素可以极大地改善用户体验。
- 提供网站反馈选项：虽然有些人可以准确指出用户会喜欢或讨厌网站布局的哪些方面，但对大多数人来说，现实情况是他们将完全不知道有无数的问题.
实际上，网站改进的唯一方法是网站访问者的反馈流是否一致，说明他们喜欢或不喜欢他们的用户体验。 大多数访问者不会特意告诉管理员他们对该站点的看法，因此拥有一个易于查找且易于使用的反馈提交选项非常重要。 这是一个易于使用的网站反馈模板示例：
（图片来源：Mopinion）
你会感兴趣
如何成功扩展您的业务
网站加载速度：优化工具
网站健康检查：工具和提示
用户体验是什么意思？
- 牢记移动设备：在当今世界，越来越多的互联网搜索正在人们的手机和平板电脑上进行。 不幸的是，在 PC 上看起来完美无瑕的 Web UI 设计在移动设备上不一定看起来那么好。 在某些情况下，网站可能无法在手机上使用。 在这种情况下，网站分析将是无价的，因为它可以揭示是否有很大比例的访问者使用移动设备作为他们的主要网络搜索选项。 如果此信息未知，最好谨慎行事并创建一个 UI 布局，以牢记手机和类似设备。 有一些工具可以帮助您确定您的网站是否适合移动设备，例如 Google 的 Mobile-Friendly Test：
（图片来源：谷歌支持）
- 始终将设置更改放在正确的位置：虽然网站可以设计得很专业，但不可避免地会有完全掌握在用户手中的布局和设计选择。 这些可以包括传记信息、个人资料图片和消息传递选项等内容。 如果用户想要更改某些内容，这样做的选项应该是显而易见的并且随时可用。 这通常涉及在将发生更改的网页部分的角落添加一个熟悉的、易于识别的图标，例如在“关于我”部分的右上角放置一个铅笔图标。
- 为表单使用进度条：易用性对于使网站具有吸引力绝对是至关重要的。 在许多情况下，用户可能需要填写表格才能访问服务。 虽然设计表单以使其尽可能全面和相关应该是优先事项，但这还不足以最大限度地提高客户体验。 对于包含过多信息的表单，最好将它们分成多个部分。
人们不喜欢一次被太多任务压得喘不过气来，因此将提交请求分解为易于遵循且主题一致的块将说服人们坚持一个过程比他们坚持的时间要长得多。 提交表单的此部分还应附有一个进度条，指示用户在完成之前必须走多远。 这不仅会在完成每个部分时产生轻微的成就感，而且还会提示某人在完成任务之前还需要走多远。 例如：
（图片来源：运球）
- 采取保障措施以防止用户错误：特别是如果网站处理大量财务信息或非常耗时，如果他们犯的每一个小错误都可能导致严重后果，那么用户可能会感到不舒服或沮丧。 了解人们可能犯的错误并找到防止错误发生的方法或提供纠正错误的选项将显着提高访问者对网站的满意度。 当电子商务网站要求客户确认他们想要购买或者他们是否真的想要摆脱购物车中的商品时，通常可以在电子商务网站上看到这类保护措施。 更普遍的是，保护措施用于提醒用户他们尚未完全填写表单提交的所有必要部分。
- 留出大量空白：在网站设计方面，人们普遍认为“越多越好”； 然而，事实并非如此。 网页上的太多信息对于访问者来说可能是非常难以承受的。 当只显示最必要的信息并以合理的方式显示时，网站 UI 最好实现。 虽然有太多的空间会使网页看起来很空，但拥有适当大小的空间对于突出显示信息非常有用。 人们倾向于浏览信息而不是彻底分析信息，因此在正确的部分留下空白将使人们对网站上真正重要的信息有更好的印象。
网站UI设计中要避免的事情
虽然有很多方法可以增强 Web 界面设计，但也有很多事情是绝对应该避免的，以防止网站成为使用的噩梦。
- 不要让图标模棱两可：虽然对于某些事情肯定会是一个挑战，但始终确保图标尽可能容易识别。 网站将常用功能更改或融合为无法识别的边界并收到很多关于 UI 发生了什么的问题的情况并不少见。 至少，这是最好的情况； 很多时候，很多用户甚至不会费心去研究以前使用的图标发生了什么或者新图标应该代表什么。 如果图标更改与社交媒体共享等相关，最终结果可能会严重损害 SEO。 如果您的图标看起来太模糊，请尝试将它们设置为文本标签，例如：
（图片来源：Thomas Byttebier）
- 避免使重要动作过于模糊：与更改易于识别的图标类似，重要的网站功能应该非常明显。 如果一个网站的主要目的是让用户可以在一个开放的论坛上进行协作，那么让人们相互交流的能力尽可能突出。 这可以包括使主题发布或回复图标异常大或颜色对比以引起用户的注意。 如果人们不确定他们应该在短时间内在网站上做什么，他们很可能会很快放弃使用它。
- 不必更改默认设置：人们在使用程序或设备时通常不会注意到它们的默认设置，因为它只是假设一切从一开始就可以正常工作。 虽然有些人确实喜欢在设置方面拥有很大的灵活性，但大多数人只是想尽可能快速轻松地使用服务。 当有人开始使用网站时，他们必须不要被要求或觉得不得不乱搞设置选项，只是为了开始按预期使用所有东西。 即使从客观的角度来看，给予更多的选择似乎是一个加分项，但从用户的角度来看，情况并非如此。
- 避免太独特：创造力是一件好事，通常是许多努力取得成功的原因，但很多时候它被高度高估了。 许多人使用网站模板和类似的 UI 结构是有原因的：用户只是喜欢它。 只有这么多种方式可以将单个网页配置为在保持功能的同时看起来与其他人不同。 大多数网站的布局和图标都有些相似，因为它们已被证明最能满足用户的需求。
资源和其他提示
虽然完全有可能编制一个大大改进 UI 设计的东西的列表，但在网站上实际实现它们可能是非常具有挑战性的。 幸运的是，人们可以通过多种不同的方式来判断哪些有效，哪些无效。 第一步是查看已经建立的具有出色 UI 布局的网站，例如 Airbnb 或 Dropbox，并从它们的整体设计中汲取灵感。 例如，看看 Airbnb 的移动友好设计：
（图片来源：谷歌设计）
还有大量公司为其客户提供模板，这些模板考虑了大型网站用来吸引其用户群的许多不同参考点。 其中许多模板都适合移动设备，并且经常更新以尽可能吸引人并与时俱进。 此外，这些模板始终可以补充设计师自己的创意天赋，从而实现最大程度的灵活性和灵感。
我们希望您发现这篇文章很有用。
如果您想更有趣地了解您的网站健康状况，获得个人推荐和提醒，请通过 Diib 扫描您的网站。 只需 60 秒。
考虑到灵感，有许多公共资源可用于找出独特的格式和外观。 如今，Pinterest 是人们想要展示他们的创意作品的温床，并且可能有数百万种不同的图案和布局可以完全免费看到。 其他可能值得一看的地方是 Dribble 和 Ui Movement。 下图显示了 UI 运动的样子：
（图片来源：产品搜索）
Diib：支持您的 UI 设计的核心指标
如果从头开始开发网站设计过于繁琐，那么还有大量程序可以教如何正确设计 UI。 CareerFoundry 和 Treehouse 都很成熟，强烈推荐。 他们还提供了额外的资源来帮助进行超越 UI 的网站设计。 与往常一样，Diib 提供了一个专门编程的用户仪表板，以补充您的 UI 设计并跟踪您网站的技术 SEO 方面。 以下是我们知道您会喜欢的一些功能：
- 关键字、反向链接和索引监控和跟踪工具
- 用户体验和移动速度优化
- 跳出率监控和修复
- 社交媒体整合和表现
- 有反向链接的损坏页面（404 检查器）
- 技术 SEO 监控
单击此处进行免费扫描，或直接致电 800-303-3510 与我们的一位增长专家交谈。