it-swarm.cn

为iPad设计

我想让拥有 iPad 或其他 iOS 设备的用户访问我的网站。

设计总体上与iPad或iOS兼容的用户界面时,我需要考虑哪些因素?

15
George Stocker

查看 Jakon Nielsen关于这个问题的想法视频链接在底部 仅3分钟,如果不是直接有用的话,很有趣。

一般想法(除了个人经历,没有其他事实可以支持):

  • 如果您需要使用其他平台的设计,请使用PC设计,而不是iPod设计。如果可以很快使用iPad,请尝试在iPad上浏览默认的Amazon.com。它返回到默认的iPod Touch/iPhone UI,该UI具有水平填充按钮,最右边带有文本,并且基本上不可用。
  • 看到小东西比单击小东西要容易。以我自己的经验,大多数可读的文本都是不可单击的,并且我经常需要放大链接(即在Wikipedia上)。
  • 纵向和横向测试您的设计!
  • 与四处移动鼠标相比,四处移动鼠标会消耗更多的物理能量(且精度较低)。
  • 使用多个标签比使用PC困难(尽管可能比使用iPhone容易)。使用户离开站点的链接可能只是这样做。不要指望他们很快回来。
  • 意外点击比意外点击更常见。
  • 打字(甚至用于搜索)比键盘更难。
  • 嵌入式YouTube视频可以正常工作。
  • 记住购买iPad并为其设计的用户群。
  • 更新:还有其他Web浏览器。 95%的用户可能使用Mobile Safari,但可能值得在另外几个用户中进行测试。例如,我刚刚发现Stack Exchange网站在 Atomic Web Browser 中不起作用(无法发布问题)。

祝好运!

14
Robert Fraser

这更适用于您的一般UI问题:

想想“触摸,不要点击”。您(或您的潜在客户)将如何与他们的一起使用该应用程序?用鼠标指向某物和用手指向某物有根本的区别。也许在侧面进行最重要的控制,以便人们可以轻松地进行控制?尝试使用不同的线框,并要求人们评估其易用性。在流程的早期进行用户测试可以极大地帮助您完善设计。

8
Scott M.

我在设计针对iPad进行了优化/就绪的网站时写了 blog 关于要注意的事情。您可能会发现它很有用。

3
Jin

IPad旨在浏览网络。大屏幕可以查看整个网页的宽度。因此,该网页的设计在iPad上应该不错。

对于iPhone,iPod Touch,您可以考虑进行其他设计,创建类似于本机iPhone应用程序的UI。您可以使用一些工具来实现这一目标,但这将需要大量工作。查看 Sencha Touch ,它也可以用于iPad。

如果您不想使用诸如Sencha Touch之类的东西,那么您还需要考虑的另一件事是,这些设备的用户交互是完全不同的。它们基于触摸而不是基于鼠标。一个例子是悬停效果不适用于基于触摸的设备。同样,鼠标单击与iOS上的浏览器捕获的点击无动于不同。这意味着您可以通过自定义用于iOS的JavaScript使其更加原生和直观来改善用户交互。

苹果还为其iOS上的本机应用程序制作了 人机界面指南 。仔细研究一下是个好主意,因为这是用户对本机应用程序的期望。拥有符合此要求的网页将有助于他们了解您的网站。

3
googletorp

不要忘记屏幕尺寸和可能的不同布局: 带有横向/纵向模式的iPad CSS布局

2
Kostya

我想补充两个问题,尤其是关于改编现有站点或应用程序而不是设计新站点或应用程序的问题-这些问题看似微不足道,但仍然:

  • 确保您的网站或应用程序不会在鼠标悬停操作(例如工具提示)上回复
  • 请记住,没有右键单击(在网络上很少见,但有时在网络应用程序中可以找到)
1
Dan Barak

元素需要比桌面应用程序大,因为手指的精度不如鼠标。

最近使用过一些图形应用程序后,我发现很难用手指准确放置对象,因为它们会遮挡您正在移动的对象。解决此问题的一种方法似乎是Apple)只是在将手指移开一些之后才开始移动,因此它不再位于移动对象的顶部。

目前,多重选择非常麻烦。我不喜欢Apple)用一根手指点击一个对象,然后用另一根手指点击多个对象以创建多个选择的方法。一旦需要4-5个以上的对象,它就会崩溃。拖动选择可能会更好,例如先选择选项卡,然后拖动选择多个对象。

1
Erik Engheim