小屏幕可视区域打造出成功的用户界面设计方案(2)

移动版本的网站

毫无疑问，当我们在移动设备中浏览网站页面时，类似的问题也会出现。我们可以将网页理解为应用中的应用，因为它需要通过浏览器这个应用程序进行输出呈现。移动平台当中的很多浏览器都会将一些常规的控制元素放在底部工具栏里，这在某种程度上又有可能与页面当中交互元素产生视觉上的冲突。所以，对于移动版本的站点来说，一个最基本的设计原则就是不要将重要的控制元素或导航结构通过CSS的position:fixed定位方式固定在用户界面底部。

不过，与Android应用中的解决方案有所不同，对于Web页面来说，将控制元素与导航结构放在界面顶部的做法同样会产生很大问题。毕竟当前绝大多数的主流触屏手机仍属于小屏幕设备，而传统Web页面的横向全局导航结构通常由若干包含着一到两个词语的导航项组成，这对于手机屏幕来说显得太拥挤了，我们必须另想办法来解决导航栏布局的问题。

Luke Wroblewski在Mobile First一书中提到：“在很多移动版本的站点中，用户首先会看到一大坨导航结构，而不是内容。在移动应用的上下文环境当中，时间永远是宝贵的，流量搞不好是要花钱的有木有，你必须尽最大努力让用户在首屏中得到他们最想获取的信息。”

确实是这么回事。移动版本的站点，在布局方面，应该使主要内容尽量多的占据着首屏当中的空间，而导航结构则应该以某种缩略的形式出现在相对次要的位置。Wroblewski通过一个实例来倡导这个设计模式，也就是Ad Age的移动版站点。其首屏当中，除了网站标题及最新内容列表之外，右上角的菜单按钮是界面当中唯一一个交互控制元素。当用户点击这个按钮时，导航列表才会出现在屏幕当中。看上去，整个导航列表好像是另外一个界面，但它实际上是被放置在页面最下方的，而菜单按钮只是个锚点而已。

Wroblewski继续发言：“这个设计方案在首屏当中使用了最小化的导航机制（只有一个按钮链接），用户可以集中精力去阅读每个分类当中的最新文章。当他们浏览至当前页面的底部时，还可以直接通过导航列表来探索更多的内容。最棒的是，顶部的菜单按钮只是一个锚点，整个导航机制不涉及到任何会导致交互流程复杂化的元素，例如JavaScript、覆盖层或是独立的导航页面等。”

“内容在上，控制在下”的规则看上去蛮简单的，不过一旦涉及到实际的上下文环境，例如操作系统或浏览器的用户界面特性，设计师们要考虑到的情况就变的复杂了。截至目前，我们可以将讨论过的话题归纳为几点设计原则：

对于iPhone中的客户端应用，尽量将重要的交互对象及导航结构放在界面底部。

对于Android中的客户端应用，尽量将重要的交互对象及导航结构放在界面顶部。

对于移动版本的网站页面，尽量将导航结构放在页面底部（注意，不是当前用户界面的底部）

这些设计原则仅限于手机的上下文环境当中，而对于屏幕规格较大的触屏设备，例如iPad来说，规则就要发生变化了。

平板电脑

拇指热区的相关规则同样适用于平板电脑，不过，由于持机方式不同，热区的位置也有所变化。iPad的拿法在很大程度上取决于整个人的姿态。我们在站着的时候，需要一手持机一手操作；坐在桌前的时，我们往往会用一只手像支架一样从侧面架住iPad，而另外一只手用来戳戳点点；坐在椅子上的时候，我们通常会将它放在膝上进行操作；而躺着或是半卧着的时候，又会将它立在腹部，一手支撑，一手操作。

每一种持机方式几乎都对应着一种特定的热区规则，而且在每一种姿态当中，设备与我们身体的距离也有所不同。例如，站着的时候，我们会把iPad端的比较近，而躺下的时候就相对较远了。

虽然听上去有些复杂，不过在这些上下文情景当中的交互行为还是存有一些共同特征的。首先，用来持机的那只手通常会握住机身的上半部分，因为这样最符合杠杆原理；相应的，拇指热区基本会位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相对较大，用户很难像使用iPhone那样瞄上一眼就能看到界面当中的几乎全部内容。正像对待普通的印刷品或是Web页面那样，用户通常会首先将目光聚焦于iPad界面的顶部区域，所以我们的设计方案也要相应的在这一点上符合用户习惯。换句话说，在操作iPad的过程中，无论是目光还是手指，它们的主要活动区域都是设备的上半部分。而机身的下半部分不仅会在很多时候被用户视而不见，而且在某些特定的环境中它真的是不可见的，例如当我们躺在床上的时候，这部分很可能被衣物或被子遮挡住，实在是悲催。

所以，与手机界面不同，在iPad及同类平板设备的应用当中，主要的交互控制对象应该被放置在界面的左上角或右上角，以便拇指可以很容易的触摸到。Instapaper和Twitter在这方面做的都不错：

需要注意的是，应该尽量避免将交互元素放在屏幕顶端正中间的位置，否则用户在进行操作的时候，手掌会将很大一部分内容遮住。实际上，任何会对下方内容产生直接控制作用的交互元素都不应该被放在这个位置。在The Daily的iPad应用当中，内容正上方有一个滑块，用户可以通过拖动它来前后切换文章页面。意图不错，不过当你执行这个操作的时候就会发现，自己的手掌会遮挡住文章内容，而手指则会挡住缩略图，体验弱爆了。单凭这一个地方的疏忽，这个设计方案就足够作为反例登场了。