web-dev-qa-db-ja.com

iPad向けの設計

iPad または他の iOS デバイスを持っている人が自分のサイトにアクセスできるようにしたいのですが。

一般にiPadまたはiOSと互換性のあるユーザーインターフェイスを設計する場合、どのような考慮事項を考慮する必要がありますか?

15
George Stocker

確認してください Jakon Nielsenの問題に対する考え下部にリンクされているビデオ は3分だけの長さで、直接役立つものではないにしても興味深いものです。

一般的な考え(個人的な経験以外にこれを裏付ける事実はありません):

  • 別のプラットフォームの設計にフォールバックする必要がある場合は、iPodの設計ではなく、PCの設計にフォールバックしてください。 iPadをすぐに入手できる場合は、iPadでデフォルトのAmazon.comを参照してみてください。デフォルトのiPod Touch/iPhone UIにフォールバックします。このUIには、右端にテキストが表示された水平方向の塗りつぶしボタンがあり、基本的に使用できません。
  • 小さなものをクリックするよりも、小さなものを見る方が簡単です。私自身の経験では、読み取り可能なほとんどのテキストはクリックできません。リンク(つまり、ウィキペディア)を拡大する必要があることがよくあります。
  • ポートレートとランドスケープの両方でデザインをテストしてください!
  • 手を動かすことは、マウスを動かすことよりもわずかに多くの物理的エネルギーを必要とします(正確さは劣ります)。
  • 複数のタブを使用することは、PCを使用する場合よりも困難です(おそらくiPhoneを使用する場合よりも簡単です)。ユーザーをサイトから遠ざけるリンクはおそらくそれだけです。すぐに戻ってくるとは思わないでください。
  • 偶発的なタップは偶発的なクリックよりも一般的です。
  • タイピング(検索の場合でも)は、キーボードよりも困難です。
  • 埋め込まれたYouTube動画は機能します。
  • IPadを購入するユーザーベースとその設計を覚えておいてください。
  • 更新:他のウェブブラウザがあります。ユーザーの95%はおそらくMobile Safariを使用していますが、他のいくつかのユーザーでテストする価値があるかもしれません。たとえば、Stack Exchangeサイトが Atomic Web Browser で機能しない(質問を投稿できない)ことを発見しました。

幸運を!

14
Robert Fraser

これは、一般的なUIの質問にさらに当てはまります。

「触る、クリックしない」と考えてください。あなた(または潜在的なクライアント)はhandsでアプリをどのように使用しますか?マウスで何かを指すことと、手で何かを指すことには基本的な違いがあります。おそらく、人々が簡単にアクセスできるように、最も重要な制御を側面で行うでしょうか?さまざまなワイヤーフレームを試し、使いやすさを評価してもらいます。プロセスの早い段階でのユーザーテストは、設計の改善に非常に役立ちます。

8
Scott M.

IPad向けに最適化/準備されたサイトを設計する際に注意すべきことについて ブログ を書きました。あなたはそれが役に立つかもしれません。

3
Jin

IPadはウェブを閲覧するために設計されました。大きな画面は、ウェブページ全体の幅を表示することを可能にします。したがって、iPadではWebページのデザインは問題ないはずです。

IPhone、iPod Touchの場合、異なるデザインを作成して、ネイティブのiPhoneアプリと同様のUIを作成することを検討できます。これを可能にするために使用できるツールがありますが、多くの作業になります。チェックアウト Sencha Touch 、これはiPadにも使用できます。

Sencha Touchのようなものを使用したくない場合は、ユーザーの操作がこれらのデバイスではまったく異なることを考慮する必要があります。それらはタッチベースであり、マウスベースではありません。例としては、ホバーエフェクトがタッチベースのデバイスでは機能しません。また、マウスのクリックは、iOSのブラウザーがキャプチャするタップの非アクションとは異なります。つまり、iOSで使用するJavaScriptをカスタマイズして、よりネイティブで直感的にすることで、ユーザーインタラクションを向上させることができます。

Appleはまた、iOS上のネイティブアプリ用に Human Interface Guide を作成しました。これはユーザーがネイティブアプリに期待するものであるため、これを検討することをお勧めします。これに準拠したWebページがあると、サイトを理解しやすくなります。

3
googletorp

画面サイズと考えられるさまざまなレイアウトを忘れないでください: 横向き/縦向きのiPad CSSレイアウト

2
Kostya

特に新しいサイトを設計するのではなく、既存のサイトまたはアプリケーションを適応させることに関して、私が追加したかった2つの問題-これらは些細なことのように見えるかもしれませんが、それでも:

  • サイトまたはアプリケーションがマウスオーバーアクション(ツールチップなど)で応答しないことを確認します。
  • 右クリックがないことを忘れないでください(Webではあまり一般的ではありませんが、Webアプリで見つかることがあります)
1
Dan Barak

指はマウスよりも正確でないため、要素はデスクトップアプリよりも大きくする必要があります。

最近、いくつかのグラフィックスアプリを使用していて、移動しているオブジェクトが見えにくくなるため、指でオブジェクトを正確に配置するのが非常に難しい場合があることを確認しました。 Appleが行ったように見える)これを修正する1つの方法は、指をいくつか移動した後にのみ移動を開始することです。そのため、移動するオブジェクトの上にはありません。

現在、複数選択は非常に面倒です。 Apple 1つのオブジェクトを1本の指でタップし、複数のオブジェクトを他のオブジェクトでタップして複数選択を作成するアプローチは好きではありません。4〜5個以上のオブジェクトが必要になると、バラバラになります。ドラッグ選択の方がうまくいく場合があります。たとえば、まず選択ツールのタブを押してから、複数のオブジェクトをドラッグ選択します。

1
Erik Engheim