《网页设计综合指南》（三）：移动适配、无障碍设计等(2)

3.2 手势操作

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

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

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

交互需要更明显的视觉表达。PC端，用户将鼠标悬停在某个元素上（如显示下拉菜单）时，可以提供额外的视觉反馈；移动端，没有悬停状态，移动用户将不得不点击以查看该响应。因此，应该确保用户能够正确预测界面元素代表的含义。

四、无障碍设计

产品必须能够被任何人使用。针对有生理缺陷的用户进行设计是设计师去实践同理心和体验世界的一种方式。

4.1 弱视用户

许多网站的文本采用低对比度模式。虽然低对比度可能比较新潮的，但是难以识别。低对比度对于视力低下和对比度敏感的用户不友好。

浅灰色背景上的灰色文字很难阅读。体验会很不好，或者说设计的毫无意义。

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

永远不要为了美观牺牲可用性。网站上的文本和其他重要元素的最重要的是可读（用）性。可读性要求文本和背景之间有足够的对比。为确保视觉障碍人士能够阅读文本，W3C的网页内容无障碍设计指南（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/）来确定是否处于最佳范围内。

（编辑：ASP站长网）