百度首页 | 百度空间
 
查看文章
 
iphone 的交互设计
2007-07-26 21:40
(这是一篇来自“苹果开发者”网站的一篇关于如何设计适合iphone浏览的网页的指导性文章里面提到的一些重要的交互设计思想对我有一些启发希望大家也能从中受益,共同进步。)

“用iphone就像在用电脑一样”这是一个诱人的想法,但它不是。这里有一些用户与iphone交互的方式是独特的,而你在设计你的网页的时候应该考虑到这些因素,并遵循下面提到的这些原则。

Know the Input Device

了解输入设备

The finger is not a mouse.

iphone用户有他们自己的输入设备-两个手指。形态各异的手指从纤细的到粗壮的从尖的到圆的。然而网页是针对鼠标输入而不是手指输入设计的。现有的页面需要根据手指输入的特点进行改进。

手指不能像鼠标那样把控制范围精确到某一点。但它们有不同于鼠标的独特的能力。例如手指可以做张开和合上的动作,而鼠标是点击。这种不同暗示了它们传打给网页的信息是不同的。这里有具体的解释Know Which Events You Can Handle” 和 “Design for Double Tap.”


下表列出了iphone支持的手指动作和将产生的结果

手势 结果
双击 Zoom in and center a block of content以双击区域为中心放大  
按住 显示一个信息泡
拖动 移动视窗或面板
划过 向上或向下滚动 (方向取决于手指移动的方向)
两指张开 放大
   两指并拢  
缩小

一些其他需要注意的:

iphone里没有剪切复制粘贴的手势也没有文本选择的手势

手指的宽度决定了你不能把链接点放的太近,如果它们挨得太近 访问者将不能选中一个单独的链接。


Think Windowless 不要让窗口限制你

The finger is not a mouse.


计算机用户会频繁的缩放和移动网页浏览器窗口。iphone的safari浏览器没有窗口。它有一个固定的视窗,iphone也没有滚动条或缩放控制按钮。它可以自动缩放内容到合适的大小。它允许用户通过手势把网页的特定区域放大。在“Lay Out Content for iPhone Viewport” 和 “Adjust Text Size for Readability.”有更详尽的解释。

Design for Double Tap

Design for double-tap.

当用户在网页上双击的时候,iphone上的safari会自动找到离双击区最近的文本块或图片,如果是文本块safari会以它为中心放大这部分内容来适应视窗的宽度。如果是图片safari会以这个图片为中心把它放大到视窗的大小。如果文本和图片已经被放大了。双击后safari会将他们缩小。



类别:原创译文 | 浏览() | 评论 (0)
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码:
 

     

©2008 Baidu