设计师和开发人员构建网站指南之三：移动端适配、无障碍设计等

制作网页时，设计者和程序员要顾及众多方面，包括界面形象和操作规划。为了方便操作，我们制定了这个手册。受篇幅所限，将此手册分为三个章节，当前为最后一章。

本篇包含内容

三、移动端适配

四、无障碍设计

五、测试

六、开发交接

七、总结

三、移动端适配

现在，大约一半的网站访客借助手机设备浏览网页。这对网页设计人员产生了什么影响？这表明我们需要为网站开发适合移动平台的版本。

3.1 响应式设计

PC端和移动端有着不同的屏幕分辨率，进行适配优化尤为重要。

Image 可帮助您生成及管理图像的不同尺寸。

3.2 手势操作

触摸屏的操作依靠指头来实现，而非鼠标进行选择。因此，在构思操作流程时，需要遵循不同的准则。

按钮越大，点击越轻松。(Image : Apple)

四、无障碍设计

产品适合所有人使用。为生理有障碍的人设计，是设计师展现体谅之心和感受生活的一种途径。

4.1 弱视用户

部分网站的文字选用低反差样式，这种样式虽然较为时髦，不过辨识度不高，对于视力欠佳和对比敏感的人群不太适宜。

浅灰色的底色配上灰色的字样，辨识度很低，让人看不清，阅读起来很费劲。这种呈现方式很糟糕，让人感觉设计得不合理，失去了应有的价值。

低对比度文字在电脑上就难以辨认，在手机上更难看清。试想一下，在阳光灿烂时，用手机阅读低对比度的文字是多么不便。这告诫我们，设计必须保证信息能够被用户接收。

绝不能让视觉效果损害功能性。网页上的文字及关键部分首要任务是易于辨识。辨识度需要文字与背景有显著差异。为了保障视障群体也能浏览信息，国际万维网联盟的可访问性指南中明确指出

对比度建议

（音频对比页面）。针对主要文字内容和配图文字，推荐采用以下参照比例：

不好：这些文本行不符合对比度的建议，难以阅读。

好：这些文本行遵循对比度的建议上海网页设计，清晰可辨。

你可以使用的

色彩对比度检测器

（）来确定是否处于**范围内。

4.2 色盲用户

大约每二十个人中就有一个存在色觉障碍，具体表现为每十二名男士里有一名，或是每两百位女士里有一名，这种情况在全世界范围内大概占到了总人口的四分之一点五；同样，每三十人之中就有一个视力不佳，比例大约是百分之一；至于全盲的人群，比例则低得多，大约是千分之一点六，相当于每两百人里才有一名；我们常常忽视为这一群体提供便利，因为许多设计人员自身并没有经历过类似困境。

确保用户能够顺利使用，不要单纯依靠色彩来传递信息。依据W3C的说明，不应将颜色“当作唯一能看见的信号，用来指引行为，表明反馈，或分辨不同的视觉部分。

通过色彩来传递提示是表单中常见的做法。成功信息通常用绿色展示，而错误信息则采用红色。然而，色盲群体中红绿色盲最为普遍。虽然多数情况下用户能理解错误提示，例如看到“文字被标红”的说明。但对于色盲人士，这种依赖颜色的提示方式会让他们无法获取有效信息。色彩应当用于强调或辅助那些原本就清晰可见的内容。

这种样式只运用红色与绿色来标示字段是否存在差错，色觉障碍者难以辨认。

表格里设计师需要提供更明确的指引，比如提示邮箱格式有误，或者在关键位置标注提醒符号。

图标和标记能够标示出哪些项目数据不正确，可以更有效地向色觉障碍者传达内容。

4.3 盲人用户

图像与插画是网页不可或缺的元素。然而，视障人士需要借助屏幕阅读器等辅助工具来理解网站内容。屏幕阅读器通过图像的说明文字来“解读”图片。倘若这些文字缺失或不够明确，他们便无法顺利获取应有的信息。

想想两个场景，比如，一家很火的T恤铺子。那个网页上，关于当前售卖的物件，内容相当有限。用户能看到的，仅仅是价格和尺码的搭配。

第二个案例见于ASOS，该平台售卖T恤的展示页面配备了恰当的描述性文字，这种做法方便了借助听读设备的人士上海网站SEO，能够让他们心目中勾勒出物品的模样。

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

4.4 键盘适配

部分人群借助键盘完成网页浏览，而非依赖鼠标苏州网页设计，譬如罹患运动障碍者，他们在操控鼠标这类精细动作时会遇到障碍，为此，需对交互式组件进行Tab键适配，同时呈现键盘指引，以便让此类用户便捷地操作交互与导航功能。

键盘导航的基本规则：

可在W3C的“WAI-ARIA”文档里，查阅到关于键盘中断的详尽规范，具体内容可供参考。

五、测试5.1 持续测试

测试是用户感受设计环节中不可或缺的一环。和设计流程的其他阶段一样，这是一个不断推进的环节。从最初阶段搜集资料起，直至整个流程结束，都需要执行测试。

（Image : ）

5.2 页面加载测试

用户不喜欢速度缓慢的网页。这使回应速度成为站点的一个关键指标。依据 Group 的说法，存在三种回应时限。

我们绝不能让顾客在网页上苦等十分钟。即便只是几秒钟的耽搁，也会令人心烦意乱。人们总要被迫静候动作结束。

通常是什么导致加载缓慢？

（）这样的工具可以帮助您找出加载缓慢的原因。

5.3 A/B测试

在比较两个版本（比如当前版本和全新设计的页面）时，A/B测试是**方案。这种测试方式会将其中一个版本随机分配给数量相等的用户群体，接着观察并统计哪个版本能让用户更高效地达成预定任务。

（Image : VWO）

六、 开发交接

UX设计流程

这个流程包含两个关键环节，分别是构思模型和实施建造。构思环节结束后，准备进入实施阶段时，构思者必须编写一份说明，这份说明是关于构思如何具体执行的技术文件。这份说明能够保证实施过程不会偏离最初设想。

标准里的准确性非常关键，因为标准若不**，技术人员在实施时只能凭感觉判断，或者求助于设计者解答疑惑。不过，人工制定标准是个麻烦事，往往要耗费大量时间。

利用Adobe XD的规范特性（测试版），设计者能生成一个共享的网址。借助这个网址，开发者可以查看，评估并复制相关设计元素。设计者无需再投入精力，编写详细文档来向开发人员说明布局，文字格式或字体选择。

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

七、结论

此处提供的要点仅是初步探讨。需将这些建议同您的个人见解相结合，方能取得理想成效。应当把您的网站看作是一个持续演进的工作，通过审视顾客意见来持续优化使用感受。务必牢记，设计的根本目的并非服务于设计者本人，而是为了满足最终使用者的需求。