译文：
在本文中，我将重点介绍将帮助您为网站创造出色的用户体验的主要原理，启发式方法和方法。我将从用户访问（如何定义网站的“骨架”）等全局性事物开始，然后逐步研究单个页面（在网页设计过程中应考虑的内容）。我们还将介绍设计的其他重要方面，例如移动注意事项和测试。
人们经常使用术语“信息体系结构”（IA）来表示网站上的菜单。但这是不正确的。虽然菜单是IA的一部分，但它们只是其中的一个方面。
IA是关于以清晰和合乎逻辑的方式组织信息的。这样的组织遵循一个明确的目的：帮助用户浏览一组复杂的信息。良好的IA会创建符合用户期望的层次结构。但是，良好的层次结构和直观的导航并不是偶然发生的。它们是适当的用户研究和测试的结果。
有多种研究用户需求的方法。信息架构师通常会积极参与用户访谈或卡片分类，他们会直接听到用户的期望或了解潜在用户如何对各种信息组进行分类。信息架构师还需要访问可用性测试的结果，以查看用户是否能够有效导航。
将根据用户访问的结果创建菜单结构，并测试卡片分类是否满足用户的心理模型。UX研究人员使用一种称为“树测试”的技术来证明它可以工作。这是在设计实际接口之前发生的。
导航是可用性的基石。如果用户找不到自己的网站，您的网站有多好都没关系。因此，您网站上的导航应遵循以下原则：
简化 导航的设计方式应尽可能减少访问者的点击次数。
清晰性 每个导航选项的含义都不应该有任何猜测。每个导航选项对访问者来说都是不言而喻的。
一致性 网站上所有页面的导航系统应相同。
设计导航时，请考虑以下几点：
根据用户需要选择导航方式。 导航应满足大多数应用程序用户的需求。给定的目标群体期望与您的网站进行特定类型的互动，因此使这些期望对您有利。例如，如果大多数用户不熟悉图标本身的含义，请避免使用汉堡包菜单导航。
确定导航选项的优先级。 确定导航选项优先级的一种简单方法是为普通用户任务分配不同的优先级（高，中，低），然后在布局中突出显示具有高优先级和频繁使用的路径和目的地。
使其可见。 正如雅各布·尼尔森（Jakob Nielsen）所说，识别事物比记住事物容易。通过使所有重要的导航选项永久可见，最大程度地减少用户的内存负载。最重要的导航选项应始终可用，而不仅仅是在我们预期用户将需要它们时。
交流当前位置。 “我在哪里？” 是一个基本问题，用户需要答案才能有效导航。无法指出当前位置是许多网站上的常见问题。考虑位置指示器。
链接和导航选项是导航过程中的关键因素，并直接影响用户的旅程。这些互动元素应遵循一些规则：
认识内部和外部链接之间的区别。 用户期望内部和外部链接的行为不同。所有内部链接都应在同一标签中打开（这样，您将允许用户使用“后退”按钮）。如果决定在新窗口中打开外部链接，则应在自动打开新窗口或标签之前提供高级警告。这可以采用添加到链接文本中的文本形式，表示为“（在新窗口中打开）”。
更改访问链接的颜色。 当访问的链接没有改变颜色时，用户可能会无意中访问相同的页面。
仔细检查所有链接。 通过单击链接并获得404错误页面作为响应，用户可以很容易感到沮丧。当访问者搜索内容时，他们希望每个链接都将其带到它认为将要到达的位置，而不是到达404错误页面或他们所期望的其他位置。
“后退”按钮可能是浏览器中第二受欢迎的UI控件（在URL输入字段之后）。确保“后退”按钮可以根据用户期望工作。当用户单击页面上的链接，然后单击“后退”按钮时，他们希望返回到原始页面上的相同位置。在无效情况下，单击“后退”会将用户带到初始页面的顶部，而不是用户离开的地方，尤其是在页面上。失去位置将迫使用户滚动浏览他们已经看过的内容。毫不奇怪，如果没有适当的“返回位置”功能，用户会很快感到沮丧。
面包屑是一组上下文链接，可充当网站上的导航辅助。这是辅助导航方案，通常会显示用户在网站上的位置。
尽管此元素不需要太多解释，但是有些事情值得一提：
不要使用面包屑代替主要导航。 主导航应该是引导用户的元素，而面包屑应仅支持用户。依靠面包屑作为导航的主要方法，而不是附加功能，通常表明导航设计不佳。
使用箭头而不是斜线作为分隔符。明确分隔每个级别。 建议使用大于号（>）或向右箭头（→），因为这些符号表示方向。不建议将正斜杠（/）用作电子商务网站的分隔符。如果要使用它，请确保没有任何产品类别会使用斜杠：
一些用户来到网站上寻找一个特定的项目。他们不想使用导航选项。他们想在搜索框中键入文本，提交搜索查询并找到他们要查找的页面。
设计搜索框时，请考虑以下几条基本规则：
将搜索框放在用户希望找到它的位置。 下图是根据A. Dawn Shaikh和Keisi Lenz的研究创建的。根据对142位参与者的调查，它显示了搜索字段的预期位置。研究发现，最方便的位置是网站上每个页面的左上角或右上角。用户可以使用常见的F形扫描图案轻松找到它。
在内容丰富的网站上突出显示搜索。
如果搜索是您网站上的重要功能，请突出显示它，因为它可能是用户发现信息的最快途径。
适当调整输入框的大小。
使输入字段太短是设计人员的常见错误。当然，用户可以在短字段中输入长查询，但是一次只能看到一部分文本，这对可用性不利，因为无法一次看到整个查询。实际上，当搜索框太短时，用户会被迫使用简短的，不精确的查询，因为较长的查询将很难阅读且不方便。Nielsen Norman Group建议使用27个字符的输入字段，该字段可容纳90％的查询。
在每个页面上放置搜索框。
在每个页面上显示搜索框，因为如果用户无法导航到他们要查找的内容，则无论他们在网站上的什么位置，他们都将尝试使用搜索。
内容策略最重要的事情也许就是将设计重点放在页面目标上。了解页面的目标，并根据目标编写内容。
以下是一些提高内容理解的实用技巧：
防止信息过载。 信息过载是一个严重的问题。它会阻止用户做出决定或采取行动，因为他们觉得自己掌握的信息太多了。有一些简单的方法可以最大程度地减少信息过载。一种常见的技术是分块 —将内容分成较小的块，以帮助用户更好地理解和处理它。结帐表格就是一个很好的例子。一次最多显示五至七个输入字段，并将结帐细分为页面，并根据需要逐步公开字段。
避免使用行话和行业专用术语。 页面上出现的每个未知术语或短语都会增加用户的认知负担。一个安全的选择是为所有级别的读者写信，并选择所有用户组都易于理解的单词。
尽量减少包含大量细节的长内容部分。 与有关信息过载的观点相一致，如果网站不适合主要的信息消费，请尝试避免文本较长。例如，如果您需要提供有关服务或产品的详细信息，请尝试逐步揭示详细信息。写下可扫描的小段以利于发现。根据罗伯特·冈宁（Robert Gunning）的书“如何摆脱商务写作中的雾气”，为了舒适地阅读，大多数句子应为20个单词或更少。
避免大写所有字母。 大写字母的文本（即所有字母都大写的文本）在很小的范围内都是很好的，例如首字母缩写词和徽标。但是，请避免所有大写字母（例如段落，表单标签，错误，通知）。正如Miles Tinker在他的《印刷的可读性》一书中提到的那样，所有大写字母都会大大降低阅读速度。同样，大多数读者发现所有大写字母都不太清晰。
结构正确的页面可以使每个用户界面元素在布局中的位置清晰可见。虽然没有一种万能的规则，但是有一些准则可以帮助您建立坚实的结构：
使结构可预测。 使设计符合用户期望。考虑类似类别的网站，以找出要在页面上使用哪些元素以及在何处使用。使用目标受众熟悉的模式。
使用布局网格。 布局网格将页面划分为主要区域，并根据大小和位置定义元素之间的关系。在网格的帮助下，将页面的不同部分以一致的布局组合在一起变得更加容易。
使用低保真线框可以消除混乱。 混乱会使接口过载，并降低理解力。每个添加的按钮，图像和文本行都会使屏幕更加复杂。在使用真实元素构建页面之前，请创建线框，对其进行分析，并清除所有并非绝对必要的内容。
人们更可能快速浏览网页，而不是阅读其中的所有内容。因此，如果访客想查找内容或完成任务，他们将进行扫描，直到找到需要去的地方。作为设计师，您可以通过设计良好的视觉层次结构来帮助他们。视觉层次结构是指以指示重要性的方式（即，他们的眼睛应首先聚焦，然后聚焦等）的方式排列或呈现元素。适当的视觉层次结构使扫描页面变得容易。
使用自然扫描模式。 作为设计师，我们对人们查看页面时的位置有很多控制权。要为访问者的眼睛确定正确的路径，我们可以使用两种自然的扫描图案：F形图案和Z形图案。对于诸如文章和搜索结果之类的文本密集型页面，F模式更好，而Z模式则适合于非文本页面。
在视觉上优先考虑重要元素。 设置屏幕标题，登录表单，导航选项和其他重要的内容焦点，以便访问者立即看到它们。
创建模型以澄清视觉层次。 样机使设计人员可以查看具有实际数据的布局的外观。与开发人员构建网页时相比，在模型中重新布置元素要容易得多。
Web设计师之间一直存在的神话是人们不会滚动。要明确：今天，每个人都在滚动！
有一些技巧可以改善滚动行为：
鼓励用户滚动。 尽管人们通常在页面加载后立即开始滚动，但页面顶部的内容仍然非常重要。顶部显示的内容设置了访问者对质量的印象和期望。人们确实会滚动，但前提是必须有足够的希望。因此，将您最引人注目的内容放在页面顶部：
坚持导航选项。 当创建冗长的页面时，请记住，用户仍然需要（当前位置的）方向感和导航（其他可能的路径）感。长页面可能会使用户出现导航问题；如果当用户向下滚动时顶部导航栏失去可见性，那么当他们深入页面时，他们将不得不一直向上滚动。一个明显的解决方案是粘贴菜单，该菜单显示当前位置，并且始终保持在屏幕上的一致区域中。
加载新内容时提供视觉反馈。 这对于动态加载内容的网页（例如新闻提要）尤其重要。由于滚动期间的内容加载应该是快速的（时间不应超过2到10秒），因此可以使用循环动画来指示系统正在运行。
不要劫持滚动。 劫持滚动是最令人讨厌的事情之一，因为它使用户无法控制，并使滚动行为完全不可预测。设计网站时，让用户控制他们在网站中的浏览和移动。
内容加载值得进一步说明。尽管即时响应是最好的，但在某些情况下，您的网站将需要更多时间向访问者交付内容。不良的Internet连接可能会导致反应缓慢，或者操作可能需要更多时间才能完成。但是，无论造成这种现象的原因是什么，您的网站都应该快速且响应迅速。
确保常规加载不会花费很长时间。 网络用户的注意力范围和耐心性很低。根据尼尔森·诺曼小组（Nielsen Norman Group）的研究，大约10秒是保持用户注意力集中在任务上的极限。当访问者不得不等待网站加载时，如果网站加载的速度不足以使他们感到沮丧，他们很可能会离开。即使使用设计最精美的加载指示器，如果加载时间过长，用户仍然会离开。
加载期间使用骨架屏幕。 许多网站使用进度指示器来显示数据正在加载。尽管进度指示器的意图很好（提供视觉反馈），但结果可能是负面的。正如卢克·罗布洛夫斯基（Luke Wroblewski）所提到的“根据定义，进度指示器提醒人们需要等待的事实。就像看着时钟在滴答滴答地响了—当您这样做时，时间似乎会变慢。” 有一个很好的替代进度指示器的方法：骨架屏幕。这些容器本质上是页面的临时空白版本，信息逐渐加载到该页面中。设计人员可以使用骨架屏幕将用户的注意力集中在实际进度上，而不是显示加载指示器，并为即将发生的事情创建预期。这会感觉到事情正在立即发生，因为信息逐渐显示在屏幕上，人们在等待时看到网站正在运行。
按钮对于创建流畅的对话流程至关重要。值得关注按钮的这些基本最佳实践：
确保可点击元素看起来像。 通过按钮和其他交互元素，考虑设计如何传达能力。用户如何将元素理解为按钮？表单应遵循以下功能：对象的外观告诉用户如何使用它。看起来像链接或按钮但不可单击的可视元素（例如，不是链接的带下划线的单词或具有矩形背景但不是按钮的元素）很容易使用户感到困惑。
根据按钮的操作为标签贴标签。 任何可操作界面元素上的标签应始终与它对用户的作用联系在一起。如果用户了解按钮的作用，他们会感到更加自在。如下面的示例中那样模糊的标签（例如“ Submit”（提交））和抽象的标签没有提供足够的有关操作的信息。
一致地设计按钮。 用户无论是否有意识地记住细节。浏览网站时，他们会将特定元素的形状与按钮功能相关联。因此，一致性不仅有助于外观精美，而且会使用户更熟悉。下图完美地说明了这一点。在应用程序的一部分（例如系统工具栏）中使用三种不同的形状不仅令人困惑，而且草率。
俗话说，一张图片值得一千个字。人类是高度视觉化的生物，能够几乎立即处理视觉信息。我们感知到并传递到大脑的所有信息中有90％是视觉的。图像是一种吸引用户注意力并区分产品的有效方法。与精心设计的文本块相比，单个图像可以向观看者传达更多信息。此外，图像以文字无法做到的方式跨越语言障碍。
以下原则将帮助您将图像集成到您的Web设计中：
确保图像相关。 设计中最大的危险之一就是传达错误信息的图像。选择强烈支持您的产品目标的图像，并确保它们与上下文相关。
避免使用他人的通用照片。 在设计中使用人脸是吸引用户的有效方法。看到其他人的面孔会使观众觉得自己正在与他们建立联系，而不仅仅是被出售产品。但是，许多公司网站因使用通用股票照片建立信任感而臭名昭著。可用性测试表明，此类照片很少能为设计增加价值，更多的是损害而不是改善用户体验。
使用无失真的高质量资产。 网站资产的质量将对用户的印象和对服务的期望产生巨大影响。确保图像大小适合所有平台上的显示。图像不应出现像素化，因此请测试各种比率和设备的分辨率大小。以原始宽高比显示照片和图形。
随着Internet速度的提高，视频正变得越来越流行，尤其是考虑到它们延长了在网站上花费的时间。今天，视频无处不在。我们正在台式机，平板电脑和手机上观看它。如果有效地使用视频，它是可用来吸引观众的最强大的工具之一，它传达了更多的情感，并确实给人们带来了产品或服务的感觉。
默认情况下，将音频设置为关闭，并选择将其打开。 当用户到达页面时，他们不希望页面会播放任何声音。大多数用户不使用耳机，会感到压力，因为他们需要弄清楚如何关闭声音。在大多数情况下，用户会在网站播放后立即离开。
保持促销视频越短越好。 根据D-Mak Productions的研究，短视频对大多数用户更具吸引力。因此，将商务视频保持在两到三分钟的范围内。
提供访问内容的另一种方法。 如果视频是消费内容的唯一途径，则这可能会限制看不见或听到内容的任何人访问信息。为了便于访问，请添加字幕和视频的完整记录。
号召性用语（CTA）是用于指导用户实现转化目标的按钮。CTA的重点是将访问者引导至所需的操作过程。CTA的一些常见示例是：
“开始试用”
“下载书”
“注册更新”
“咨询”
设计CTA按钮时，请注意以下几点：
大小 CTA应该足够大，可以从远处观看，但又不能太大，以免引起页面其他内容的注意。要确认CTA是页面上最突出的元素，请尝试进行五秒钟的测试：查看网页五秒钟，然后写下您记得的内容。如果CTA在您的清单中，请恭喜！尺寸适当。
视觉突出性 您为CTA选择的颜色对其是否显着具有巨大影响。使用颜色，可以使某些按钮比其他按钮更具视觉冲击力，从而使它们更加突出。对比色最适合用于CTA，并且适合于醒目的按钮。
负空间 CTA周围的空间量也很重要。白色（或负号）空间可创建必要的呼吸空间，并将按钮与界面中的其他元素分开。
面向操作的 文本为按钮编写文本，以迫使访问者采取行动。以“开始”，“获取”或“加入”之类的动词开头。
提示：您可以使用模糊效果快速测试CTA。模糊测试是一种快速的技术，可以确定用户的眼睛是否会到达您想要的位置。拍摄页面的屏幕截图，然后在Adobe XD中应用模糊效果（请参见下面的“慈善水”示例）。查看页面的模糊版本，哪些元素脱颖而出？如果您不喜欢所计划的内容，请进行修改。
填写表单仍然是网络上用户最重要的互动方式之一。实际上，通常将表单视为完成目标的最后一步。用户应该能够快速而又不会混淆地填写表格。表单就像对话，就像任何对话一样，在用户和网站这两个方面之间应该进行逻辑通信。
仅询问需要什么。 只问您真正需要的。您添加到表单的每个其他字段都会影响其转换率。始终考虑一下为什么要向用户请求某些信息，以及使用方式。
逻辑上订购表格。 应该从用户的角度逻辑地提问，而不是从应用程序或数据库的角度问。例如，在某人的名字前要求其地址是不正确的。
将相关字段分组在一起。 将相关信息分组为逻辑块或集合。从一组问题到下一组问题的流程将更像是一次对话。将相关字段分组在一起也可以帮助用户理解信息。
越来越多的设计师将动画作为功能性元素来增强用户体验。动画不再仅仅是取乐而已。它是进行有效交互的最重要工具之一。但是，只有在正确的时间和地点加入动画，设计中的动画才能增强用户体验。好的UI动画是有目的的；这是有意义的和实用的。
在以下情况下，动画可以增强体验：
有关用户操作的视觉反馈 良好的交互设计可提供反馈。当您需要将操作结果告知用户时，视觉反馈非常有用。如果无法成功执行某项操作，功能动画可以快速简便地提供有关问题的信息。例如，当输入错误的密码时，可以使用摇动动画。很容易理解为什么摇动是传达“不”的相当普遍的手势，因为简单的摇头在人际交往中如此普遍。
系统状态的可视性 之一Jakob Nielsen的10个启发式的可用性，系统状态保持的知名度在用户界面设计中最重要的原则之一。用户希望在任何给定的时间知道他们在系统中的当前上下文，并且应用程序不应让他们猜测—它应该通过适当的视觉反馈来告诉用户正在发生的事情。数据上载和下载操作是功能性动画的绝佳机会。例如，动画加载条显示了流程进行的速度，并设置了对动作处理速度的期望。
导航过渡 导航过渡是网站上状态之间的移动，例如，从高级视图到详细视图。默认情况下，状态更改通常涉及硬切，这会使它们难以遵循。功能动画使用户在这些变化时刻轻松自如，在导航上下文之间顺畅地运输用户，并通过在状态之间创建可视连接来说明屏幕上的变化。
品牌化 假设您有数十个网站具有完全相同的功能，并可以帮助用户完成相同的任务。他们可能都提供了良好的用户体验，但是人们真正喜欢的一种功能不仅仅是提供良好的用户体验。它与用户建立了情感联系。品牌动画在吸引用户方面起着关键作用。它可以支持公司的品牌价值，彰显产品的优势，并使用户体验真正令人愉悦和难忘。
如今，几乎50％的用户通过移动设备访问网络。这对我们的网页设计师意味着什么？这意味着我们必须为设计的每个网站制定移动策略。
必须针对台式机和移动浏览器的广阔前景优化您的网站，这两种浏览器的屏幕分辨率，支持的技术和用户群都不相同。
旨在实现单列布局。 通常，单列布局在移动屏幕上效果最佳。单列不仅有助于管理小屏幕上的有限空间，而且还可以轻松地在不同的设备分辨率之间以及纵向和横向模式之间进行缩放。
使用Priority +模式优先考虑跨断点的导航。 Priority +是Michael Scharnagl创造的一个术语，用于描述导航，该导航公开了被认为是最重要的元素，并在“更多”按钮后面隐藏了不重要的项目。它利用了可用的屏幕空间。随着空间的增加，暴露的导航选项的数量也会增加，这可能会导致更好的可见性和更多的参与度。此模式特别适合具有大量不同部分和页面的内容密集型网站（例如新闻网站或大型零售商的商店）。监护人在其部分导航中使用Priority +模式。当用户单击“全部”按钮时，将显示次要项目。
确保图像尺寸适合显示器和平台。 网站必须适应所有不同设备，各种分辨率，像素密度和方向的完美外观。管理，处理和传递图像是网站设计师在构建响应式网站时面临的主要挑战之一。为了简化此任务，可以使用诸如“ 响应式图像断点生成器”之类的工具以交互方式生成图像的断点。
在移动网络上，交互是通过手指点击而不是鼠标点击完成的。这意味着在设计触摸目标和交互时将应用不同的规则。
适当大小的触摸目标。 所有交互元素（例如链接，按钮和菜单）都应该是可点击的。尽管桌面Web非常适合其活动（即，可单击）区域较小且精确的链接，但移动Web需要更大，更大块的按钮，而这些按钮可以用拇指轻松按下。如果将水龙头用作网站的主要输入方法，请参考MIT触摸实验室的研究，为按钮选择合适的尺寸。研究发现，指垫的平均大小在10到14毫米之间，指尖的范围在8到10毫米之间，使10×10毫米成为最小的触摸目标尺寸。
互动性更强的视觉指示。 在移动网络上，没有悬停状态。在桌面上时，当用户将鼠标悬停在某个元素上时（例如，显示一个下拉菜单），可能会提供其他视觉反馈，移动用户将不得不点击以查看该响应。因此，用户仅通过观察就应该能够正确预测界面元素的行为。
不论一个人的能力如何，今天的产品必须对所有人开放。为有缺陷的用户设计是设计师实践同理心并学会从他人的角度体验世界的一种方式。
许多网站使用低对比度进行文本复制。低对比度文字虽然很流行，但也难以辨认和难以访问。低对比度对于视力不佳和对比度敏感的用户来说尤其成问题。
低对比度文本很难在台式机上阅读，但在移动设备上则变得更加困难。想象一下，在明亮的阳光下行走时，尝试在移动设备上阅读低对比度文本。这很好地提醒了可访问的视觉设计对于所有用户而言都是更好的视觉设计。
永远不要为了美丽而牺牲可用性。网站上文字和其他重要元素的最重要特征是可读性。可读性要求文本和背景之间有足够的对比。为了确保视觉障碍者可以阅读文本，W3C的Web内容可访问性指南（WCAG）提出了对比度建议。对于正文文本和图像文本，建议使用以下对比度：
小文本与背景的对比度应至少为4.5：1。7∶1的比例是优选的。
大文本（以14点粗体和18点普通字体及以上字体）与背景的对比度应至少为3：1。
您可以使用WebAIM的色彩对比度检查器快速确定您是否在最佳范围内。
据估计，全球人口中有4.5％患有色盲（每12名男性中就有1名，每200名女性中有1名），有4％的人视力低下（每30人中有1人），有0.6％的人是盲人（每188人中有1人）。很容易忘记我们是为这一组用户设计的，因为大多数设计师都不会遇到此类问题。
为了使这些用户可以访问设计，请避免仅使用颜色来传达含义。正如W3C所言，颜色不应该被用作“传达信息，指示动作，提示响应或区分视觉元素的唯一视觉手段。”
使用颜色作为传达信息的唯一手段的一个常见示例是表单中的警报。成功和错误消息通常分别用绿色和红色显示。但是红色和绿色是受色觉不足影响最严重的颜色-对于患有硬脑膜或黑眼症的人来说，这些颜色可能很难区分。您很可能已经看到错误消息，例如“标为红色的字段为必填项。” 尽管看起来似乎没什么大不了，但是对于以下颜色错误的人来说，这种错误消息以如下所示的形式出现可能会非常令人沮丧。设计师应使用颜色突出显示或补充已经可见的内容。
在上面的表格中，设计人员应提供更具体的说明，例如“您输入的电子邮件地址无效”。或至少在需要注意的区域附近显示一个图标。
图像和插图是网络体验的重要组成部分。盲人使用诸如屏幕阅读器之类的辅助技术来解释网站。屏幕阅读器依靠图像的替代文本来“读取”图像。如果该文本不存在或描述性不足，则他们将无法获得预期的信息。
考虑两个示例，第一个是流行的T恤商店Threadless。该页面没有太多关于所售商品的信息。唯一可用的文本信息是价格和大小的组合。
第二个示例来自ASOS。出售相似衬衫的页面提供了该商品的准确替代文字。这可以帮助使用屏幕阅读器的人设想该项目的外观。
为图像创建替代文本时，请遵循以下准则：
所有“有意义”的图像都需要描述性替代文本。（“有意义”的照片为传达的信息增加了背景。）
如果图像纯粹是装饰性的，并且不向用户提供有用的信息来帮助他们理解页面的内容，则不需要文本替代项。
某些用户使用键盘而不是鼠标来浏览Internet。例如，运动障碍者在使用鼠标所需的精细运动方面有困难。通过使交互式元素可以通过Tab按键进行聚焦并显示键盘焦点指示器，可以使该组用户易于访问交互式和导航元素。
以下是键盘导航的最基本规则：
检查键盘焦点是否可见和明显。 一些Web设计师删除了键盘焦点指示器，因为他们认为这很麻烦。这阻碍了键盘用户正确地与网站进行交互。如果您不喜欢浏览器提供的默认指示器，请不要将其完全删除。而是设计它以满足您的口味。
所有交互式元素都应该可访问。 键盘用户必须能够访问所有交互式元素，而不仅仅是主要的导航选项或主要的号召性用语。
您可以在W3C的“ WAI-ARIA创作实践”文档的“设计模式和小部件”部分中找到有关键盘交互的详细要求。
测试是UX设计过程的重要组成部分。与设计周期的任何其他部分一样，它是一个迭代过程。在设计过程中尽早收集反馈，并在整个过程中进行迭代。
用户讨厌网页加载缓慢。这就是为什么响应时间是现代网站上的关键因素。根据尼尔森·诺曼集团（Nielsen Norman Group），有三个响应时间限制：
0.1秒 对于用户而言，这是瞬间的。
1秒 这样可以使用户的思想流保持无缝，但是用户会感觉到轻微的延迟。
10秒 这是使用户的注意力集中在操作上的极限。10秒的延迟通常会使用户立即离开网站。
显然，我们不应该让用户在网站上等待10秒钟的时间。但是，即使是经常发生的几秒钟的延迟，也会使体验令人不愉快。用户将不得不等待该操作而烦恼。
通常是什么原因导致加载时间缓慢？
内容丰富的对象（例如嵌入式视频和幻灯片小部件），
未优化的后端代码，
与硬件有关的问题（不允许快速操作的基础结构）。
诸如PageSpeed Insights之类的工具将帮助您找到速度慢的原因。
当您难以在设计的两个版本（例如页面的现有版本和重新设计的版本）之间进行选择时，A / B测试是理想的选择。此测试方法包括向相等数量的用户随机显示两个版本之一，然后查看分析以查看哪个版本更有效地实现了您的目标。
一个UX设计过程中有两个重要步骤：原型设计和开发工作的解决方案。连接两者的步骤称为切换。一旦设计完成并准备好进行开发，设计人员就会准备一份规范，该规范是描述如何编码设计的文档。规范可确保将按照原始意图实施设计。
规范中的精度至关重要，因为如果规范不正确，开发人员在构建网站时将不得不依靠猜测，或者请设计人员获得问题的答案。但是，根据设计的复杂程度，手动组装规格可能很麻烦，并且通常需要花费大量时间。
借助Adobe XD的设计规范功能（测试版），设计人员可以发布公共URL，供开发人员检查流，获取度量和复制样式。设计人员不再需要花费时间来编写规范以将位置，文本样式或字体传达给开发人员。
与设计的任何方面一样，此处共享的提示只是一个开始。将这些想法与您自己的想法混合并匹配，以获得最佳结果。将您的网站视为一个不断发展的项目，并使用分析和用户反馈来不断改善体验。请记住，设计不仅针对设计师，还针对用户。
本文是Adobe赞助的UX设计系列的一部分。Adobe XD工具专为快速，流畅的UX设计过程而设计，因为它使您可以更快地从构思过渡到原型。设计，原型制作和共享-都在一个应用程序中。您可以在Behance上查看更多使用Adobe XD创建的鼓舞人心的项目，还可以注册Adobe体验设计时事通讯以保持最新状态，并了解有关UX / UI设计的最新趋势和见解。
Copyright © 2017-2023 soword.cn SOWORD科技言
网站地图 BUG反馈 联系我们 用户隐私
栖族科技开发服务中心
浙公网安备 33011002016917号
京ICP备19009350号-2
soword科技言免费资源网站，免费API接口，免费开发模板，免费开发工具，开发技术问题，汉化版免费开发工具，API接口，开发教程，免费教程
SOWORD科技言
