的网页设计已足够设计师和开发人员在构建网站时需要考虑很多事情，从视觉外观到功能设计。为简化此过程，我们准备了本指南。由于篇幅限制，本指南分为三个部分，这是第三部分。

本文包含内容

第三，移动端适应

3.1响应式设计

3.2手势操作

四，无障碍设计

4.1弱视用户

4.2色盲用户

4.3盲人用户

4.4键盘自适应

V.测试

5.1连续测试

5.2页面负载测试

5.3 A/B测试

6.发展移交

七，总结

第三，移动端适应

如今，大约50％的网站用户通过移动设备访问。这对网页设计师意味着什么？这意味着我们必须为网站进行移动端适配设计。

3.1响应式设计

PC和移动设备具有不同的屏幕分辨率，适应性优化尤为重要。

使用单列布局。单列布局在手机屏幕上的基本效果很好。单列不仅可以管理小屏幕上的有限空间，还可以轻松地在不同屏幕分辨率和宽高比之间进行缩放。

使用优先级+导航模式。 Priority +由Michael Scharnagl提出，用于展示重要的导航选项，而不太重要的导航选项位于“更多”按钮中。它充分利用了可用的屏幕空间。随着屏幕的增加，显示的导航选项也会增加，从而提高可视性和吸引力。此模式对于具有许多不同模块和页面的站点尤其有用，例如新闻站点或电子商务站点。

确保图像适合PC和移动设备。网站必须适应所有不同的设备和分辨率，像素密度和方向。图像适应是构建响应式网站的主要挑战之一。要简化此任务，您可以使用响应图像断点生成器等工具处理图像。

响应式图像断点生成器可帮助您生成和管理不同大小的图像。

3.2手势操作

移动端的交互是通过手指完成的，而不是通过鼠标点击完成的。这意味着在设计交互时应用不同的规则。

交互元素的大小应该是合适的。所有交互式元素（如链接，按钮和菜单）都应具有手势感知功能。 PC端站点适用于小而精确的交互区域（点击），但移动网页需要一个可以用拇指轻松完成的大触发区域。当网站经常需要用户操作时，请参阅MIT Touch Lab研究，为您的按钮选择合适的尺寸。研究发现，手指脸的平均大小在10到14毫米之间，指尖在8到10毫米之间，10倍和10倍; 10毫米是一个很好的尺寸。

按钮越大，点击就越容易。 （图片来源: Apple）

交互需要更明显的视觉表达。在PC端，用户可以在悬停在元素上时提供额外的视觉反馈（例如显示下拉菜单）;在移动端，没有悬停状态，移动用户必须单击才能查看响应。因此，您应该确保用户可以正确预测界面元素的含义。

四，无障碍设计

该产品必须能够被任何人使用。为身体不适的用户进行设计是设计师实践同理心和体验世界的一种方式。

4.1弱视用户

许多网站的文本使用低对比度模式。虽然低对比度可能更时尚，但很难识别。对于低视力和对比敏感的用户，低对比度不是用户友好的。

浅灰色背景上的灰色文字很难阅读。经验将非常糟糕，或者设计毫无意义。

低对比度文本在PC端难以阅读，在移动设备上变得更加困难。想象一下，在明亮的阳光下行走时，在移动设备上阅读低对比度文本。这提醒我们，设计是确保将信息传递给用户。

永远不要牺牲美学的可用性。关于网站上的文本和其他重要元素，最重要的是可读性。可读性要求文本和背景之间有足够的对比度。为了确保有视觉障碍的人能够阅读文本，W3C Web内容可访问性设计指南（WCAG）有一个[对比建议]（https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-to-contrast.html ）。对于正文和图像文本，建议使用以下对比度：

小文本的文本对比度必须至少为4.5：1。最佳对比度是7：1。

字体较大（第14个粗体，第18个字体或更高）的文本应至少具有3：1的对比度。

不好：这些文字行不符合对比度建议，很难阅读。

好：这些文字符合对比建议，并且清晰可辨。

您可以使用WebAIM的[颜色对比度检测器]（http://webaim.org/resources/contrastchecker/）来确定它是否在最佳范围内。

4.2色盲用户

据估计，全球人口中有4.5％患有色盲（12名男性中有1名，200名女性中有1名），4％患有低视力（30名中有1名），0.6％是失明者（该组中有188名患者） 。很容易忘记为这个用户群设计，因为大多数设计师都没有这个问题。

为了使用户能够正确访问它，请避免仅使用颜色来表达意义。如W3C所述，颜色不应被用作唯一的视觉传播方式，表示动作，提示响应或区分视觉元素。 “

通常仅使用颜色来表达表单中的提示信息。成功和错误消息分别以绿色和红色显示。但红盲和绿盲是盲人群中最常见的。在大多数情况下，您可以收到错误消息，例如“ldquo;此文字标记为红色”它似乎不是问题，但色盲用户无法收到此表单中的错误消息。应使用已经可见的信息突出显示或补充颜色。

错误：此表单仅依赖红色和绿色表示该字段没有错误。色盲用户无法识别。

在上表中，设计人员应提供更具体的说明，例如“您输入的电子邮件地址无效”或显示您需要注意的图标。

好：图标和标签显示哪些字段无效，更好地将信息传递给色盲用户。

4.3盲人用户

图片和插图是网页的重要组成部分。但盲人需要辅助技术，如屏幕阅读器来翻译网站。屏幕阅读器依赖图像的替代文本来“阅读”。图片。如果文本不存在或描述不清楚，他们将无法获得预期的信息。

考虑两个例子–首先，Threadless，一个受欢迎的T恤商店。此页面没有太多关于所售产品的信息。唯一可用的文字信息是价格和尺寸的组合。

第二个例子来自ASOS。销售T恤的同一页面提供了该项目的准确替代品。这有助于使用屏幕阅读器的人想象项目的外观。

为图像创建替代文本时，请遵循以下准则：

所有“有意义的”图像需要描述性的替代文字。 （“Makeful””照片指的是提供上下文补充信息）

如果图像纯粹是装饰性的，并且没有提供有用的信息来帮助用户理解页面的内容，则无需替换文本。

4.4键盘自适应

有些用户使用键盘而不是鼠标来浏览网站。例如，患有运动障碍的人难以使用诸如鼠标之类的精细动作。通过使交互式元素适应Tab键并显示键盘指示符，这些用户可以容易地访问交互式和导航元素。

键盘导航的基本规则：

检查键盘指示灯是否可见且明显。一些网页设计师会删除键盘指示器，因为他们认为它不漂亮。但是这会阻止键盘用户与网站正确交互。如果您不喜欢浏览器提供的默认指示器，请不要全部删除;相反，设计它适合你。

所有交互式元素都应该可以通过键盘访问，而不仅仅是主导航选项或主CTA。

您可以在“设计模式和小工具”部分的W3C“WAI-ARIA创作实践”文件中找到键盘交互的详细要求。

V.测试

5.1连续测试

测试是用户体验设计过程的重要部分。与设计周期的其余部分一样，这是一个持续的过程。它从早期的信息收集开始，需要在整个过程中进行测试。

（图片来源:极端不确定性）

5.2页面负载测试

用户讨厌加载慢速网站。这就是为什么响应时间是网站的一个重要因素。根据尼尔森诺曼集团的说法，有三个响应时间限制：

0.1秒对用户来说是瞬时的。

1秒可以平稳地保存用户的想法，但会感觉有点延迟。

10秒是用户关注操作的限制。 10秒的延迟通常会让用户立即离开现场。

显然，我们不应该让用户在网站上等待10秒。但是几秒钟的延迟常常让人感到不愉快。用户必须等待操作完成。

什么通常导致缓慢加载？

大量内容（如嵌入式视频和幻灯片小部件），

后端代码未优化

硬件问题（基础架构性能有限）。

[PageSpeed Insights]（https://developers.google.com/speed/pagespeed/insights/）等工具可以帮助您找出加载速度缓慢的原因。

5.3 A/B测试

当您在两个版本之间进行选择时，A/B测试是理想的，例如现有和重新设计的页面。该测试方法涉及将两个版本中的一个随机显示给相同数量的用户，然后分析用户更有效地完成目标的版本。

（图片来源: VWO）

6.发展移交

[UX设计流程]（https://blogs.adobe.com/creativecloud/ux-process-what-it-is-what-it-looks-like-and-why-its-important/）有两个重要步骤：设计原型和发展。一旦设计完成并准备进入开发阶段，设计人员需要开发一个规范来描述设计应该如何实现的设计。规范确保开发不偏离初衷。

规范中的准确性至关重要，因为在规范不准确的情况下，开发人员必须在开发过程中依赖猜测或让设计人员回答他们的问题。但手动编写规范很麻烦，通常需要很长时间。

借助Adobe XD的设计规范功能（测试版），设计人员可以向开发人员发布公共链接。通过链接，开发人员可以检查，测量和复制样式。设计人员不再需要花时间编写规范来向开发人员解释位置，文本样式或字体。

Adobe XD设计规范功能（测试版）

七，结论

这里分享的技能只是一个开始。将这些想法与您自己的想法相结合，以获得最佳结果。将您的网站视为一个不断发展的项目，并分析用户反馈，以不断改善体验。请记住，设计不仅仅适用于设计师–但对于用户。

原始链接：https://www.smashingmagazine.com/2017/11/comprehensive-guide-web-design/

在这篇文章中，每个人都是产品经理翻译团队@吉诺是比利翻译发布，未经本网站许可，禁止转载。

该地图来自unsplash，基于CC0协议