appleのヒューマンインターフェースガイドラインを自分なりにまとめてみた
今回はappleが公開している「ヒューマンインターフェースガイドライン」を読んで、最低限知っておきたいことをまとめていきます。
Design Principles
1,整合性
・アプリの外観と動作が機能といかに統合されているか。
2,一貫性
・システムが提供するインターフェース要素、よく知られているアイコン、標準のテキストスタイル、統一された言語を使用する。
3,直接操作
・画面上のコンテンツを直接操作することで、ユーザーを惹きつける。
・ユーザーがデバイスを回転させたり、ジェスチャを使用して画面上のコンテンツに影響を与えると直接操作が行われる。
4,フィードバック
・行動を認め、人々に知らせ続けるための結果を示す。
・インタラクティブな要素...タップするとハイライトになる。
・進行状況インジケーター…長時間の操作の状態を伝える。
・アニメーション/サウンド…アクションの結果を明確にするのに役立つ。
5,比喩
・アプリケーションの仮想オブジェクトやアクションが慣れ親しんだ経験の比喩だとユーザーを惹きつける。
・ ユーザーは物理的に画面を操作するため、比喩はiOSでうまく機能する。
・下にコンテンツを表示する際は、ビューが邪魔にならないようにする。
・コンテンツをドラッグ＆スワイプする。
・スイッチの切り替え、スライダーの移動、ピッカー値のスクロールができる。
・本や雑誌のページをめくるアニメーションなど。
6,ユーザー管理
・iOSの至るところで、アプリではなく人が統制している。
・ アプリは一連の行動を提案したり、危険な結果について警告したりすることはできるが通常、アプリが意思決定を引き継ぐのは誤り。
・ 良いアプリは、ユーザーを有効にすることと望ましくない結果を回避することの正しいバランスを見つける
・ インタラクティブな要素を身近で予測可能なものに保ち、破壊的な行動を確認し、すでに進行中であっても操作を簡単に取り消すことができるようにすることで、アプリはユーザーをコントロールしているように感じさせることができる。
Loading
・空白の画面または静的な画面は、アプリをフリーズさせたように見せかけることがある。→混乱や不満を感じさせ、ユーザーがアプリを離れる要因になる。
・ローディングが発生している時はユーザーが分かるように明確にする。
→最低限、何かが起こっていることを伝えるバーなどを見せる。
→さらに明確な進捗状況を表示して、ユーザーの待ち時間を判断できるようにする。
Navigation
・ナビゲーションはユーザーが自然で慣れ親しんだものである必要がある。
・インターフェースを支配したりコンテンツから焦点を絞ったりしてはいけない。
・iOSのナビゲーションは3種類ある。
1,階層ナビゲーション
・目的の画面に辿り着くまで、画面ごとに1つ選択。
・別の目的の画面に行くには、自分のステップをたどるか最初からやり直して別の選択をする必要がある。
・設定とメールはこのナビゲーションスタイルを使用する。
2,フラットナビゲーション
・複数のコンテンツカテゴリを切り替える。
3,コンテンツ主導または経験主導のナビゲーション
・コンテンツ内を自由に移動するか、コンテンツ自体がナビゲーションを定義する。
・ゲーム、書籍、およびその他の没入型アプリは通常、このナビゲーションスタイルを使用する。
・一部のアプリは複数のナビゲーションスタイルを組み合わせている。
・たとえばフラットナビゲーションを使用するアプリでは、各カテゴリ内に階層型ナビゲーションを実装することができる。
・簡単にコンテンツにたどり着けるように、以下のことを意識しながらデータ構造を設計する。
→最小限のタップ数
→スワイプ数
→画面数
Onboarding
・アプリの起動時間のこと。
・新規ユーザー/戻ってきたユーザーを得る最初のチャンスである。
→すぐに動くようにする。
→アプリを使用するまでの時間を最小限にする。
・ゲームアプリの場合、一時停止したときやキャラクターが進行していないときに、気軽に役立つヒントを表示する。
・事前に設定情報をユーザーに尋ねることは避ける。
・再起動することをユーザーに勧めない。
・アプリの評価をユーザーに頻繁に求めない。
・アプリの再起動時に以前の状態に戻す。
Requesting Permission
・ユーザーは、
現在の場所
予定表
連絡先情報
通知
写真
などの個人情報にアクセスするためのアプリのアクセス許可をアプリに付与する必要がある。
3D Touch
・一部のデバイスでは、ボタン部分にさまざまなレベルの圧力を加えることによって追加の機能にアクセスできます。
Feedback
・不必要な警告ポップアップの表示は避けましょう。
iOSの画面サイズ
iPhoneXシリーズのセーフエリア
・iPhoneXシリーズにはに上下左右にセーフエリアがある。
・セーフエリアにテキストやオブジェクトを収める。
・ナビゲーションバーやステータスバーなどの外側のUIに被らない領域を確保する。
Button
・44pt x 44ptの最小タップ領域を確保する。
→これ以上小さくなると、ユーザーがボタンにタッチしにくくなる。
・否定的な情報は基本的に左に配置する。
→プラットフォームによっては必ずしも左が否定とは限りません。
・タイトルは長くしない。
・必要に応じて、枠線や背景を追加する。
Color
・アプリのロゴと調和するカラーパレットを選択する。
・インタラクティブ要素と非インタラクティブ要素の色を同じにしてはいけない。
→タップする場所が分かりにくくなってしまう。
・様々な照明の下で配色テストをする。
→時間帯、部屋の雰囲気、天気などによって画面の見方が変わる。
・iOSのデフォルトの色空間はStandard RGB（sRGB）
Typography
・iOSのシステムフォントは「San Francisco (SF)」
・San Francisco (SF)のフォントはこちらからダウンロードすることができます。
・強調させたいテキストは、
フォントの太さ
サイズ
色
を使って強調させる。
Launch Screen
・アプリの起動画面のこと。
・起動画面にテキストは入れない。
・できるだけ早くアプリの最初の画面に遷移する。
・起動画面とアプリ画面はほぼ同じデザインにする。
Statusbar
・ステータスバーはカスタムしない。
・コンテンツを全画面表示する際には一時的にステータスバーを隠すことも検討する。
Navigationbar
・コンテンツを配置しすぎない。
・戻るボタンを配置するときは標準の戻るボタンを配置する。
・ボタンとボタンの中のテキストは余白をあける。
まとめ
今回紹介したものは必要最低限をまとめたものになりますので、お時間のある方はぜひ一度appleが発表しているガイドラインを読んでみてください。
現在、ビジネスマンを4名募集中
マンハッタンコードでは7-9月でビジネスマン4名を募集中！
エンジニアであり、自分を売り込むビジネスマンとして『Let's make a never seen - 見たことない。を作る - 』を目指して成長できる環境が用意されています。
興味のある方は是非ご応募ください！
7-9月の採用LPはこちら↓
HPはこちら↓
最後まで読んでいただきありがとうございました。
TwitterとInstagramもフォローしていただけると嬉しいです！
https://twitter.com/MHTcode
https://www.instagram.com/manhattancode/
※この記事は2019/05/31に投稿されたもの修正したものです
この記事が気に入ったらサポートをしてみませんか？