2007年12月23日星期日

编写 iPhone Friendly 的 Web 应用程序 (Part 1 - 布局入门)

用过iPhone的朋友应该知道,iPhone上面的一些应用程序是能够随机器转动自动适应的,也就是说竖着拿的时候就竖着显示,横着拿的话就横着显示,iPhone中至关重要的Safari浏览器当然也支持这一点了,因此我们考虑设计iPhone friendly的应用程序时,首先要考虑兼容这种情况,不能把页面定死在一个宽度上。且慢,我们不是说设计自己的应用程序吗?这和内置的Safari有何关系?iPhone被设计为不允许安装任何第三方应用程序(破解不在讨论范围之内),一切第三方应用程序必须以Web的形式来跑,小到一个国际象棋的游戏也如此,因此我们现在说的应用程序就是指Web,但是与传统意义上以提供信息为核心的Web又不同,我们所说的是以提供交互操作为主的应用。

好吧,在我们正是进入布局的讨论之前,先来赏析一下已有的iPhone应用:

Facebook iPhone Edition

Facebook的iPhone版。如果你已经习惯了在iPhone上使用过Facebook,第一次在PC上浏览这个页面会被它的“肥大”吓坏的。从这个页面我们能够得知,让页面自动适应iPhone屏幕的方法就是尽量使用百分比来定义宽度,特别是全页宽度一律用100%,如果是导航栏里面4个项目并排的就每个25%。

AppMarks

AppMarks可以说是一个应用程序的书签,当然也有人把它作为Safari的首页,那就相当于桌面了,因为你收藏的应用程序就在这个页面直接显示,以大图标的方式。AppMarks以前是可以直接在PC上浏览的,现在已经自动将非iPhone的请求重定向到介绍页了,不过这里有一个AppMarks Demo能在PC上看看。我们能够看得到图片是4个一行地排列的,共12个,然而横屏会怎样了?当然是变成6个一行,仍然能够在一屏内显示完,并且不会有不满行的图标。其实这是一个很tricky的做法,12是4和6的公倍数,因此虽然竖屏和横屏的显示方式不一样,但你不会觉得有什么缺陷。

Newsgator Mobile iPhone Edition

终于有一个ASP.NET写的iPhone应用了,其实和上面的Facebook看起来差不多,同样采用了宽度为100%的做法,同时页面上的元素要么向左对齐要么向右对齐。这听起来很废话,其实意思是,中间尽管留空,不要想把整个宽度为100%的块区都利用起来,说明性文字可以放左边,操作及视觉反馈放右边,这样无论屏幕怎么旋转都好看。如果中间塞满了内容,只会让Safari进行比例缩放操作,把页面整个缩小,这其实是不利于操作的。

GMail

这不是普通的GMail吗?怎样才能看到iPhone版?这就需要通过修改user-agent属性欺骗它了。iPhone上的Safari所用的user-agent如下所示:

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3

使用Firefox的User Agent Switcher修改一下user-agent就行了,然后你就能看到iPhone上看到的GMail了。仍然和上面的网站一样,可点击区域是一大个宽度为100%的块区。

小结

实际上,设计iPhone friendly的界面,在CSS的层面上来说一点也不难,甚至可以说是非常简单,因为基本上就是宽度为100%的块区,少数时候要用到按百分比划分的块区,但实际上我们也应该避免这种情况。为什么呢?别忘记了,iPhone的用户是没有鼠标的,他们必须通过手指来操作页面上的一切,因此可点击区域必须尽量大。

既然他们看不到鼠标指针,你也就不用考虑可点击区域必须是链接或者cursor: pointer,因为用户无法通过鼠标指针的改变来判断一个区域是否能点击。然而这同时也就引入了另一个问题,如何让用户了解一个区域能否点击呢?这时候你必须给出明确的视觉暗示,例如看起来是链接的文本,蓝色的文本有无下划线通常都挺诱惑人去点,这方面Facebook是一个例子。另一种做法是让界面看起来是菜单式的,好像AppsMarker和Newsgator那样,菜单右侧的符号让人挺熟悉不是吗?只要我点击这个菜单项,就会展开下一级菜单。最后一种做法就是基于用户已经熟悉的独创暗示来提示用户,习惯使用GMail的用户一看到邮件标题那个大大的蓝色区域,就知道点击是打开邮件,这是不需要任何指引的,最坏的情况下,用户不知道点击什么还是会点击邮件标题,之后他也就会用了。

到此为止,就已经把设计iPhone friendly应用界面的一些布局因素解释清楚了,我们下一步就要进入交互的环节,让我们的应用程序真正执行起来,并且是在客户端JavaScript环境中执行起来。如果你想继续关注本话题的话,欢迎订阅:

2 条评论:

  1. 没有鼠标的设计的确是非常有趣的。
    其实我是来测试评论的-。-

    回复删除
  2. 你就不要测试了,多多留言就是了。

    回复删除