使用邻近范围应用Fitts的用户界面法则

ZDNet软件频道 时间:2004-03-30 作者:Builder.com |  我要评论()
本文关键词:
MSDN Library上一篇讨论有关Fitts用户界面(UI)法则以及在Web上应用的文章,我觉得非常困惑。人们普遍认为一个用户界面是否简便取决于可点击对象的大小和他的邻近范围。

一天我在MSDN Library上看到一篇讨论有关Fitts用户界面(UI)法则以及在Web上应用的文章,我觉得非常困惑。人们普遍认为一个用户界面是否简便取决于可点击对象的大小和他的邻近范围。

然而这看上去像是常识,Fitts用户界面法则的原理在大多情况下并没有被采用,这在许多设计欠佳的普通网站是很明显的。例如,国际互联网的搜索引擎经常在结果页的底部列出一些数字目录用来描述其他的搜索结果。这些数字的字体一般都很小,可点击范围也不大。但是比较而言,"下一个"和"上一个"的点击范围就更容易点击。

根据Fitts的用户界面法则,这种设计存在缺陷。我们可以通过加入一些代码使得鼠标指针点击了可点击对象邻近的范围也可以触发点击事件的发生,这样就可以将原本不好的设计转换成具有友好用户界面的设计了。

搜索结果一般都以下面这种形式出现:
1 2 3 4 5 6 7 8 . . .

我们假设这些页码的每一项都是一个超文本链接(<a>)。如果我们把这所有的连接都包含在<SPAN>中的话,我们能对SPAN对象使用onmousemove事件来达到与单个链接相关的协作。

这是一段为页码制定链接的HTML代码:
<SPAN id="spnEasyLink" onmousemove="spnEasyLink_onmousemove(this)">
<a href="#" style="font-size: 8pt;">1</a>
<a href="#" style="font-size: 8pt;">2</a>
<a href="#" style="font-size: 8pt;">3</a>
<a href="#" style="font-size: 8pt;">4</a>
<a href="#" style="font-size: 8pt;">5</a>
<a href="#" style="font-size: 8pt;">6</a>
<a href="#" style="font-size: 8pt;">7</a>
<a href="#" style="font-size: 8pt;">8</a>
</SPAN>


你能从中看出,为了简便,每个链接都将包含的HREF设定为"#"。
这里是一段处理计算大小的JavaScript代码:
var m_maxFont = 48;
var m_minFont = 8;
var lastX = 0;
var timerID = -1;
function reset_easyLink() {
var element = document.all.spnEasyLink;
for (var i = 0; i < element.children.length; i++) {
element.children[i].style.fontSize = m_minFont + "pt";
}
}

function spnEasyLink_onmousemove(element) {
if (Math.abs(window.event.x - lastX) < 1) return;
clearTimeout(timerID);
lastX = window.event.x;
for (var i = 0; i < element.children.length; i++) {
var midX = element.offsetLeft + element.children[i].offsetLeft + (element.children[i].offsetWidth/2);
var pct = (midX - Math.abs(window.event.x - midX))/midX;
var fontSize = Math.floor(m_maxFont * pct);
if (fontSize > m_maxFont) {
fontSize = m_maxFont;
} else if (fontSize < m_minFont) {
fontSize = m_minFont;
}
element.children[i].style.fontSize = fontSize + "pt";
}
timerID = setTimeout("reset_easyLink()", 1000);
}


无论什么时候,只要鼠标移动到SPAN对象处,spnEasyLink_onmousemove()函数将会以百分比的形式计算单个对象的临近范围。首先,这个函数将先检测鼠标是否至少移动了一个像素点。如果没有的话就跳出此函数。

然后,如果timerID被改动过,我们将它清空。然后我们重新设定变量lastX。用for()循环对SPAN对象的每个子元素都考察到,并且根据鼠标所在坐标到它的距离以百分比形式计算出子元素的邻近范围。

而计算字体大小是通过将得到的百分比和48点的最大字体尺寸相乘,所得的乘积就是计算出的字体大小。如果得到的结果大于最大字体大小,那么字体就设置成最大字体。如果所的结果小于最小字体大小,那么就将字体设置成8点的最小字体。

最后,子元素的字体大小都设定好了,并且将timerID设置为将所有链接重新设置为最小字体大小。只要用户将鼠标指针移到SPAN对象的范围之外,后面的步骤就完成了。而reset-easyLink()函数的作用仅仅是将所有链接的字体重新设置为最小字体。

这种对<a>对象的动态重定尺寸的方法使得用户更加容易点击中目标。这种方法也为我们提供了一个明智的用户界面设计方案,从而与许我们在遵循Fitts的用户界面法则条件下节省很多空间。


责任编辑:李宁

欢迎评论投稿


百度大联盟认证黄金会员Copyright© 1997- CNET Networks 版权所有。 ZDNet 是CNET Networks公司注册服务商标。
中华人民共和国电信与信息服务业务经营许可证编号:京ICP证010391号 京ICP备09041801号-159
京公网安备:1101082134