(大家应该有了解过 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.我进行了若干次的翻译修正。
可以满足基本功能,不错
话说我翻译得怎么样?
在国内,估计网站设计师会考虑怎么兼容IE6而非IE10,IE6可不支持触控
不,他们正逐步K掉IE6。
我选择看原版……
嗯,我喜欢删节,嘿嘿。
盒盒,地板都没有了
没关系,盒盒,我有着博大的胸怀。
盒盒,那你把我的评论ID改成1吧
肿么改啊?盒盒!
改进后的XinBlog专为IE10设计,IE10以下版本均无法有好的效果。当然WEBKIT内核访问效果最形象逼真
哦不,你肿么把邮箱写出来了。
学习了!
!
大部分用户其实对触控的接受度并不高,还是习惯鼠标操作
你要是有了触控平板后还会这么想么?
我还没测试过我网站ie10的兼容性呢
说实话,我也没测试过呢。