iOSアプリ開発のためにヒューマンインターフェースガイドラインを参考にしつつApple製のアプリを観察する(ナビゲーションバーのセグメント化コントロール編)

  • 36
    いいね
  • 0
    コメント

こんにちは @yimajo です。
この記事ではiOSにインストールされているApple製のアプリのUIについて考察し、アプリ開発の参考とすることを目的としています。AppleのiOS ヒューマンインターフェースガイドラインをたびたび引用するので、省略してApple HIGと呼称します。

前提

Apple HIGに準拠している内容についてはリンクしていますが、基本的にはApple製アプリの共通点からHIGに書かれていないUIの一貫性を元に考察しています。もし違ったパターンがある場合はコメントをいただけると幸いです。

ナビゲーションバーに置くセグメント化コントロールについて

  • Apple HIGより、一般的にはナビゲーションバーはタイトル、バックボタン、表示内容をコントロールするUIを含んでいる
  • Apple HIGより、セグメント化コントロールでそれぞれのセグメントは等幅
  • Apple HIGより、セグメント化コントロールは幅がひろいほうがタップしやすい

具体例として、次の画像はiOS10 iTunes Store.appの「ミュージック」画面

IMG_5886.PNG

ナビゲーションバーに入り切らないセグメント化コントロールをナビゲーションバーを下に延長して配置

次の画像は同じくiOS10のiTunes Store.appのメニューをタップした画面

IMG_5887.PNG

比較のあまり良くない例として、次の画像も同じくiOS10 iTunes Store.appの「トーン」画面。着信音を購入する画面。

IMG_5888.PNG

  • ジャンルの位置が先程の「ミュージック」画面と違い統一感がない
  • タイトルに「着信音/通知音」と表示するためにセグメント化コントロールを下に置いている
    • ジャンルが左、タブバーが「着信/通知音」ならセグメント化コントロールを延長せずにそのまま置ける気がする
    • そうしてないのは通常のミュージックと着信音が明らかに違うものだから購入時に注意を惹くようにしているのだろうか

セグメント化コントロールの背景色を変更するなら

Apple製のアプリでセグメント化コントロールをカスタムにしている例がないので、tumblrの「メッセージ」画面でメッセージが0件の例

IMG_5889.PNG

悪い例の比較として国内のアプリから

IMG_5884.PNG

  • ナビゲーションバーにすでに「ニュース/運営から」と表示している
    • にもかかわらずナビゲーションバーを拡張し「ニュース」と「運営から」のセグメント名があり重複している
  • どちらが選ばれているかを注意しなければ判別しづらい
    • 情報が0件の場合は特に何が何だか分からない

参考