7.2 界面元素的布局

第二章里,我们曾经在直接操纵的概念当中提到了界面元素的尺寸及间距方面的设计问题。为触屏设备打造用户界面设计方案的时候,有两点基本的设计要素是必须考虑到的:

在iPhone时代之前,我也许会对触控元素的目标区域尺寸做出非常明确的建议。其实直到几年前,我们仍习惯于为触控目标设定一个比较大的“最小尺寸”,以避免因为触控元素过小所造成的可用性方面的问题。曾经,这个最小尺寸大致在1cm2到1.5cm2之间。想想看,这可是一个不小的按钮了,甚至比iPhone中的应用图标还要大。另外,在多个触控元素的间距方面,曾经的大致原则是,无论横向还是纵向,彼此之间至少要保持1cm的距离。过去的这些习惯性做法也是有一定道理的,因为当时的触屏技术在感应定位方面还无法做到非常精确,很多时候,一个交互对象的有效触控区域距离其本身会有一定程度的偏差。所以当时的用户界面设计方案必须将这些方面的因素都考虑进去。另外,大尺寸的触控目标区域也可以为用户带来某种心理上的保障,使操作感更加舒适稳妥。

如今,这种情况已经得到了一定程度的改善,但界面元素的触控区域尺寸及间距方面的问题依然是我们在打造交互体验的过程中所必须考虑到的。iOS设备所采用的电容触屏技术在感应定位方面具有高度的精确性。也许你已经注意了,当使用iPhone浏览网页的时候,即使页面一直保持在默认的缩小状态,你依然可以通过小指来准确地点击到那些已经被缩得很小的链接或按钮。在这种情况下,我们其实并不需要在触控元素目标区域的最小尺寸上做过多的纠结;相比而言,触控元素之间的间距才是界面布局方案当中的关键因素。

触控元素彼此之间的距离越近,用户误操作的可能性就越大。关于间距的把握,我们有一个大致的原则,也就是两个触控元素之间的距离应该与它们自身的尺寸成反比。

iphone control ui elements layout

图 7-11 两个触控元素之间的距离应该与它们自身的尺寸成反比

触控元素的尺寸越大,它们之间的距离就可以越近。反之,小尺寸触控元素之间应该尽量保持较大的间距,因为较小的元素对触摸的准确性要求更高,它们之间的距离必须足够远,才能有效地降低误操作的可能性。而大尺寸交互元素通常是很容易被触摸到的,减小它们之间的距离并不会对操作的准确性造成影响。

略有夸张的讲,如果界面当中只有一个交互对象,那么即使将它设计为1像素见方,单从触控操作的角度来说也是完全可行的。