More than 5 years have passed since last update.

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

Posted at 2016-10-10

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

前提

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

Apple HIGより、一般的にはナビゲーションバーはタイトル、バックボタン、表示内容をコントロールするUIを含んでいる
- それ以外のコントロールを詰め込む事を避ける
Apple HIGより、セグメント化コントロールでそれぞれのセグメントは等幅
Apple HIGより、セグメント化コントロールは幅がひろいほうがタップしやすい
- セグメントの数は5以下にすべき

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

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

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

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

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

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

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