SEO网站优化用户体验的设计参考点

　　有哪些适合应用在SEO网站设计的技巧?用户体验在SEO方面也是占据一部分内容的，如果用户对你的网站不满意，那么，你的网站也无法得到好的效果。下面看看哪些设计技巧我们可以参考。

　　一、交互设计

　　01、重复的动作或频繁的活动让人感到轻松

　　其重要性：相同输出的重复动作(例如，用相同的信息填充不同的表单)是一项艰巨的任务，不能帮助用户更快或更好地实现目标。用户可能也会尝试找到一种方法：例如，寻找可以帮助他/她更快/更好的竞争对手。

　　如何测试：

　　您应该首先分析您所有的产品流程并观察用户的行为。您需要确保，如果存在重复的操作，则有一种方法可以帮助它们：例如，可以使用以前输入的信息。

　　02、用户可以很容易地从错误中恢复

　　其重要性：

　　通常用户会做一些意想不到的意外动作，并让他们返回去尝试，这意味着他们不会感到沮丧，并且能够很容易地恢复并继续前进。

　　如何测试：

　　首先，要确保你的导航系统允许返回，并且可以取消操作。然后，在进行可用性测试时，创建用户最可能执行错误操作的场景，并检查是否可以轻松恢复。

　　03、用户根据他们的专业水平得到充分的支持

　　其重要性：

　　确保你产品中的新手用户有流畅的学习经验是很重要的。然而，一旦他们已经熟悉了产品，那就应该给帮助他/她更快地通过流动的工具。两种方案都提高了可用性和保留性。例如，专家用户的快捷方式、对新手用户的工具提示等。

　　如何测试：

　　首先，检查你是否有两个受众的工具。然后，与新手和专家用户进行可用性测试，看看这些工具是否被正确使用。

　　04、访问帮助并不妨碍用户的进步

　　其重要性：

　　当用户被困在产品的某一部分时，他们会寻求帮助。在线或离线帮助是很重要的，允许用户在他们离开的地方恢复工作。

　　如何测试：

　　创建测试场景，用户将请求帮助，并查看他们的工作流程和进度是否被中断。

　　二、视觉设计

　　05、可视化层次结构指导用户执行所需的操作

　　其重要性：

　　用户依赖于产品的层次结构和线索来知道该做什么，该去哪里 —— 理解这一点很重要，并正确地指导他们使用这个层次结构。

　　如何测试：

　　了解你的产品工作流程，以及它的关键动作是否被视觉层次结构所激励。

　　06、仅颜色本身不用于传达层次、内容或功能

　　其重要性：

　　拥有一个可访问的产品不是一个plus —— 这是必须的。对于视觉障碍的人，比如色盲，仅仅依靠颜色来传达等级、内容或功能意味着他们将无法使用你的产品，并且将成为被排除的人群。

　　如何测试：

　　会让你在网页的顶部放一个颜色过滤器，并测试不同种类的色盲。你也可以在图像编辑器上对你的产品进行屏幕截图，然后将其转换成灰度，看看你是否能轻松分辨出颜色。

　　07、不超过三种原色

　　其重要性：

　　这不是一个固定的规则 —— 有时，对于特定的情况，可以使用超过三种主要颜色。然而，要记住，组合三种颜色已经很困难了，所以大多数情况下都应该避免。

　　如何测试：

　　确保你在设计产品时使用的调色板没有超过三种颜色。

　　08、在视觉层次上的项目是最重要的

　　其重要性：

　　视觉层次结构允许用户快速扫描信息，根据他们的即时需求优先考虑内容。在视觉层次结构顶部附近的项目必须对业务最重要，对用户最重要。

　　如何测试：

　　屏幕捕捉你的数字产品，然后高斯模糊的屏幕截图半径在 5px 左右。在查看结果时，你将立即可视化层次结构，并注意哪些元素脱颖而出。这些对企业和用户来说是最重要的吗?

　　09、主动作与次要动作视觉上截然不同

　　其重要性：

　　有不同的主次操作意味着用户在与您的产品交互时不会感到困惑，并且不会犯错误。例如，“Submit”和“Cancel”必须明显不同。

　　如何测试：

　　在进行可用性测试时，要注意常见的错误，这些错误不是来自于用户的意图，而是来自于不同的主要和次要的操作。此外，在审查设计时，要确保颜色、大小、位置和其他元素对动作进行区分。

　　10、表单提交以直观的方式确认

　　其重要性：

　　必须让用户确认是否成功执行了操作。例如，在提交表单之后，一个 banner 颜色的明确确认消息将意味着用户可以转到下一个任务。

　　如何测试：

　　检查你的产品的所有区域，用户输入信息。在用户输入完成后，触发确认该操作是否成功的确认。确保反馈对于最终状态非常清楚。

　　11、互动元素不是抽象的

　　其重要性：

　　当使用新产品时，用户会得到一套基于他/她以前使用其他数字产品的经验 —— 例如，按钮应该是什么样子，以及他们应该如何工作。实现这些期望意味着你不会制造不必要的摩擦。

　　如何测试：

　　首先，检查你的产品，寻找没有使用公共模式的区域。例如，链接看起来不像链接。

　　12、警告信息是一致的

　　它是什么：

　　警告消息具有相同的视觉样式，并以相同的方式出现在相同的位置。

　　其重要性：

　　保持一致的警告信息意味着用户总是能够理解什么是立即值得注意的。与警报不一致意味着每当一个新的警报出现时，它就意味着额外的精神负荷。

　　如何测试：

　　确保警告消息具有相同的视觉风格，它们的定位相似或相同。

　　13、警告信息在视觉上是不同的

　　其重要性：

　　通过确保警报消息与其他屏幕元素明显不同，用户实际上可以注意 / 采取行动。

　　如何测试：

　　在检查了视觉差异化之后，看看用户如何对可用性测试中的警告信息做出反应。

　　三、信息架构

　　14、增长空间

　　其重要性：

　　每当出现新功能或内容时，你就不能重新设计产品的导航和信息系统。导航菜单和整体布局需要支持更多的类别 / 主题而不破坏。设计有增长空间意味着主要的设计和开发工作在界面上很容易扩展。

　　如何测试：

　　询问所有的利益相关者，在产品中，内容如何随着时间的推移而增长。你会支持更多的静态内容吗?架构需要支持视频吗?

　　15、导航是一致的

　　其重要性：

　　用户在你的产品中定位和导航的方式直接影响他们是否能够完成他/她的目标，不管他们的当前页面是什么。

　　如何测试：

　　检查你的信息架构文档，并确保导航在每个页面都可访问，并且它不会改变或消失。在进入视觉设计之前，尝试卡片分类或树测试，以确保你的信息架构路径尽可能直观。

　　四、排版

　　16、使用不超过两种不同类型的字体族

　　其重要性：

　　这不是一个固定的规则：有时可能会超过两个。但一般来说，匹配两个以上并不是一件容易的事。对于可用性和视觉目的，坚持两个可以简化你的排版层次，从而提高你的理解能力。

　　如何测试：

　　只需确保你的设计不超过两种类型的字体族。你也应该确保你选择的字体是正确匹配的。

　　17、用于文本内容的字体大小至少为 12px

　　其重要性：

　　同样，这并不是一个固定的规则 —— 理论上你可以用更小的尺寸来做非常具体的用途——但一般来说，在 12 px以下的尺寸下，可读性会大大降低。

　　如何测试：

　　检查你所有的内容，并确保它们的字体大小至少为 12 个像素。

　　18、不同的字体样式或组合用来分隔内容和控制

　　其重要性：

　　需要有明确的指标来说明什么是内容，什么是控制 —— 即用户可以与之交互的内容。这些指标可以是大小、颜色、定位、字体等。

　　字体很重要：

　　使用不同的风格或字体组合，意味着用户不会感到困惑，很容易识别出哪些是可以交互的。

　　如何测试：

　　识别产品中的所有控件，并确保它们从内容中脱颖而出。在运行可用性测试时，请注意用户在与控件交互时是否存在困难。

　　19、用大写字母表示标签、标题或首字母缩略词

　　其重要性：

　　限制使用大写字母可以促进理解 —— 对用户来说，更不容易理解。它应该专门用于强调或非常受限制的情况 —— 例如，首字母缩略词。

　　如何测试：

　　运行一个彻底的内容检查，并确保大写的单词仅限于标题、标签或首字母缩略词。

　　20、字体大小 / 粗细区分内容类型

　　其重要性：

　　它严重影响可读性和理解能力。在标题、副标题和段落之间明确区分，减少了消化内容的精神负担。它也有视觉上的好处 —— 它看起来和感觉更好。

　　如何测试：

　　当你在检查你的产品的内容时，确保标题，副标题和段落使用不同的字体大小和重量。

　　五、用户界面

　　21、多步工作流程的进度指示

　　其重要性：

　　特别对于多步骤的工作流程，用户很容易感到不知所措或不知道它要多久才能完成。一个进度指标帮助他/她找到他/她的位置，但更重要的是它创造了成就感并降低了跳出率。

　　如何测试：

　　检查你产品内的所有流量，在那里有不同的步骤来完成某件事，然后确保通过一个指示器来显示进度。

　　22、接近和对齐

　　其重要性：

　　用户有一种倾向于群体 —— 功能或上下文 —— 它们彼此接近。导航栏就是一个很好的例子。遵循此模式并将连接的项分组，意味着用户立即了解你的接口。

　　如何测试：

　　查找功能上类似的项，并检查它们(何时可能)组合在一起。

　　23、前景元素(如内容和控件)很容易与背景区分开来

　　其重要性：

　　对视觉障碍的人很重要。它还提高了用户的学习曲线和理解能力。清晰的区分促进了导航，给按钮带来了更多的关注，增加了一般的可用性。

　　如何测试：

　　屏幕截图你的产品和高斯模糊，屏幕截图半径在 3px 到 5px。当看到结果时，你能很容易地分辨出前景和背景中是什么吗?

　　当然了，并不是说每个网站都需要将没一点落实好，我们需要根据自己的网站来进行针对性优化，这样才合适。