微软:4个建立友好触控网站的指引

(大家应该有了解过 Windows 8 与 Internet Explorer 10 的革命性改变吧?尤其是浏览器支持触控操作了。去年呢,微软撰文来指引我们如何“讨好”触控用户。那关于微软撰写的这篇文章呢,似乎只有一个概括版的中文版本,于是我运用我极不专业的英语水平给大家翻译全文过来了。欢迎批评指正!——译者注)

这篇文章提供了四个简单的指引,以确保您的触控用户可以最有效地使用您的网站。前两个确保触控用户可以访问您网站的全部功能,最后两个则使得触控更容易。

1.不要让悬浮物遮住了内容

鼠标可以悬停这些东西(指向它)而不用激活它(点击它)。然而,触控式屏幕的一次轻敲既是悬停动作也是激活动作。因此需要悬停的功能并不能为触控用户所用,取而代之地应该让用户能够使用点击(敲打)来完成操作。(说白了就是触控设备不能识别悬停这个动作。——译者注)

2.配置网站的触控手势

用户希望可以通过触控来平移与缩放网站。因而,用户的各种动作(如滑动、双指缩放、双击)可能会产生“相互作用”(指浏览器设置与网站功能的冲突。——译者注)。如果您的网站要提供特别的功能,您必须配置 IE10 只提供任何的您想要的默认行为。当用户触控了一个元素,-ms-touch-action 这个 CSS 属性决定了 IE10 提供的默认行为。

  -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit; 

下面这个表格描述了五个可能的值:

描述
auto 由浏览器决定元素的行为。这是 -ms-touch-action 的默认值。
none 任何默认行为都不被允许。
manipulation 只允许滑动、双指缩放和重击(panning, pinch zoom, and swiping)来前进、后退。
double-tap-zoom 只允许双击缩放(double-tap zooming)。
inherit 从父级继承 -ms-touch-action 属性值。

举个例子,一个帆布绘画的组件也许会这样使用:

canvas {
  -ms-touch-action: double-tap-zoom;
} 

在这个配置中,用户能双击缩放 canvas 元素,但是手指滑动却不会使得页面平移。

3.使用 HTML5 区分输入框类型

IE10 支持 HTML5 的输入控件,所有这一切都是触控优化。对于文本输入,可以通过区分特定的、适合的输入类型,进一步改善用户的触控体验。在 Windows 8 上,Internet Explorer 将显示一个专门定制的触控式键盘布局。

<input type="email"> 

触控式键盘会专门为输入电子邮箱显示“@”和“.com”按钮。

<input type="tel"> 

触控式键盘就会专门为输入电话号码显示小键盘。

<input type="url"> 

触控式键盘就会专门为输入网址而显示斜线和“.com”按钮。

(此文的中文概括版将此条说成“如果网站需要输入文字的,则设计者需要在触控屏中留足屏幕键盘的空间”,我认为是不对的,况且触控屏的键盘也不是让我们网页设计者设计的。——译者注)

4.为用户的手指留够空间

要建立 Windows 8 触控为上的体验,我们已经进行了大量的研究,为开发人员制定了一些有用的指引。一个手指的平均宽度为 11 毫米。(一张图还告诉我们婴儿的手指宽最小是 7 点几毫米,而一位篮球运动员的手指宽最大有 19 毫米以上。——译者注)如果要点击的目标变得更大,错失点击的机率就急速下降。

在理想的情况下,目标至少要有 11毫米(约 40px)的正方形,它周围至少要填充 2毫米(约 10px)。(可能是说把这些可点击的目标分隔开来。——译者注)

如果您只是想为触控用户而调整,可使用特征检测来检测一个在用触控设备的用户:(这应该是 Javascript 代码。——译者注)

if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {
  // 支持 multi-touch(多点触控,又称多重触控、多点感应、多重感应。——译者注)
} 

超越这些基本知识

您可以做更多的事情,创造触控为上的极致体验。例如,您可以选择为触控用户优化,支持自定义的多点触控互动或手势。这里有一点链接来引导你:(这些链接请参见英文原文。——译者注。)

我们将在未来撰写更多关于这些方法的博文,来确保您的网站在 IE10 触控下工作得更好。

原作雅各布·罗西(Jacob Rossi)(Internet Explorer 程序经理)

翻译闪闪的星(转载时务必保留译文链接或译者主页链接)

2013-2-16 P.S.我进行了若干次的翻译修正。

若无特别说明,本文系原创,遵循 署名-非商业性使用 3.0 (CC BY-NC 3.0) 协议,转载文章请注明来自【闪星空间】,或链接上原文地址:http://shansing.com/read/246/

18 条评论

  1. GW GW

    可以满足基本功能,不错

  2. 在国内,估计网站设计师会考虑怎么兼容IE6而非IE10,IE6可不支持触控

    1. 不,他们正逐步K掉IE6。

  3. 我选择看原版……

    1. 嗯,我喜欢删节,嘿嘿。

  4. 盒盒,地板都没有了

    1. 没关系,盒盒,我有着博大的胸怀。

      1. 盒盒,那你把我的评论ID改成1吧

  5. 改进后的XinBlog专为IE10设计,IE10以下版本均无法有好的效果。当然WEBKIT内核访问效果最形象逼真

    1. 哦不,你肿么把邮箱写出来了。

  6. 学习了!

  7. 大部分用户其实对触控的接受度并不高,还是习惯鼠标操作

    1. 你要是有了触控平板后还会这么想么?

  8. 我还没测试过我网站ie10的兼容性呢

    1. 说实话,我也没测试过呢。

发表评论»

NO SPAMS! 不要发垃圾评论哦!

表情