UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

【デザイン】AppleのHuman Interface Guidelines

AppleのHuman Interface Guidelinesをざっくり読んでみた

developer.apple.com

Human Interface Guidelinesとは

Human Interface Guidelinesは、アプリケーション開発者に一連の推奨事項を提供するソフトウェア開発ドキュメント

Appleに限らないお話らしいけど、がっつりApple製品ならではのお話がある

iOSアプリエンジニアでなくても特に参考になった話をまとめる

適応性とレイアウト

人々は一般的に、お気に入りのアプリをすべてのデバイスで、どのような状況でも使用できることを望んでいる

iOSアプリでは、iPadでのマルチタスク中、分割ビュー、画面の回転時など、さまざまなデバイスで形状とサイズを自動的に変更するようにインターフェイス要素とレイアウトを構成できるので、どのような環境でも優れたエクスペリエンスを提供する、適応性のあるインターフェイスを設計することが重要

  • インタラクティブな要素に十分なタッチターゲットを提供する
    すべてのコントロールで、タップ可能な最小領域を44pt x44ptに維持するようにする

  • 可能であれば、縦向きと横向きの両方をサポートする
    ユーザーはさまざまな方向でアプリを使用することを好むので、その期待に応えることができる場合に最適

  • テキストサイズの変更に備える
    ユーザーが設定で別のテキストサイズを選択したときに、ほとんどのアプリが対応していることを期待している
    テキストサイズの変更に対応するために、レイアウトを調整する必要がある場合がある

  • iPadiPhoneの両方をサポートすることを目指す
    ユーザーは、どちらのタイプのiOSバイスでもアプリを実行できる柔軟性があることを高く評価している
    アプリの特定の機能にテレフォニーなどのiPhone固有のハードウェアが必要な場合は、iPadでそれらの機能を非表示または無効にし、他のユーザーがアプリの他の機能を使用できるようにすることを検討する

  • 全画面表示の場合、画面の一番下や隅にインタラクティブな操作領域を明示的に配置することは避ける
    ディスプレイの下端にあるスワイプジェスチャを使用して、ホーム画面やアプリスイッチャーなどの機能にアクセスする
    これらのジェスチャにより、この領域に実装したカスタムジェスチャがキャンセルされる場合がある
    画面の隅々は、人々が快適に到達するのが難しい領域になる可能性がある

  • 全画面表示の場合、画面の端まで伸びているボタンは、ボタンのように見えない場合がある
    画面の下部に表示される全幅ボタンは、角が丸く、安全領域の下部に位置合わせされている場合に最もよく見える
    これにより、ホームインジケーターと競合しないようになる

色は、活力を与え、視覚的な連続性を提供し、ステータス情報を伝達し、ユーザーのアクションに応じてフィードバックを提供し、人々がデータを視覚化するのに役立つ優れた方法である

明るい背景と暗い背景の両方で、個別に、または組み合わせて見栄えのするアプリの色合いの色を選択するときは、システムの配色を参考にする

  • コミュニケーションには慎重に色を使用する
    控えめに使用すると、重要な情報に注意を喚起する色の力が高まる
    たとえば、重大な問題についてユーザーに警告する赤い三角形が、重大じゃない他の場所で赤が使用されると効果が低下する

  • インタラクティブ要素と非インタラクティブ要素に同じ色を使用することは避ける
    インタラクティブ要素と非インタラクティブ要素の色が同じである場合、どこをタップするかがわからなくなる

  • さまざまな照明条件でアプリの配色をテストする
    照明は、部屋の雰囲気、時間帯、天気などに基づいて、屋内と屋外の両方で大幅に異なる
    アプリを実際の世界で使用した場合、コンピューターに表示される色が常に同じに見えるとは限らない
    晴れた日の屋外など、複数の照明条件でアプリを常にプレビューして、色がどのように表示されるかを確認するべき
    必要に応じて、ほとんどのユースケースで可能な限り最高の表示エクスペリエンスを提供するように色を調整する

  • 他の国や文化で色の使用がどのように認識されるかを検討する
    たとえば、一部の文化では、赤は危険を意味するが、肯定的な意味合いを持っている文化もある
    アプリの色が適切なメッセージを送信することを確認する

  • アプリ内のコンテンツを他の人が認識しにくくするような色は使用しない
    たとえば、色覚異常の人は一部の色の組み合わせを区別できない場合があり、コントラストが不十分な場合、アイコンやテキストが背景と混ざり合い、コンテンツが読みにくくなる可能性がある

他にもまだたくさんあるが、一旦ここまで