Ketchapp!スタッフブログ > 雑記 > 小ネタ > 意外と知らないiPhoneのユーザーインターフェース正式名称

意外と知らないiPhoneのユーザーインターフェース正式名称

お客さんとiPhoneアプリの話をしているとついついユーザーインターフェース(以下、UI)の正式名称で仕様を伝えようとすることがあります。
だけど、意外とUIの正式名称は浸透していないので、「これのことです・・・」って画面を見せることが多くあります。

 

これは単純に私が分かり難い表現を使っているのが悪いんですが、実はこのUIはこんな名前だよって、ことを広く知ってもらいたいので、私が知っていて、なおかつ良く利用するUIの正式名称を書いていこうと思います。

 

 

◆iPhoneのUI正式名称

◎ビュー

表示される画面全般のことを指します。
ボタンをタップすると、次のビューに遷移します。とか良く言ってます。

 

◎ナビゲーション関連

ビューを遷移させるために配置される各種ナビゲーションのUIです。
ちなみにiPhone独特のグラデーションはシステムが勝手に表現してくれるため、
一色指定するだけでも綺麗なUIが出来上がることが、iPhoneの魅力の一つだと思ってます。

 

・ナビゲーションバー(①)
 ⇒ヘッダーに良く見るアイツ。
  一画面前に戻るボタンを左上に表示することが多い。
  ※実はビューを重ねているので、重なりすぎると制御が煩わしいらしい。

 

・タブバー(②)
 ⇒フッター限定で高さが固定の良く見るアイツ。グローバルナビゲーションとメニューに良く使われます。
  またタブバーは普通の実装方法だとUIを変更することは難しく、
  背景色や選択されているアイコンの色(青い感じ)は共通になることも特徴。
  あと、デバイスフォントを入れられるし、バッチ表示(③)が出来ます。
  ※バッチ表示はホーム画面とタブバー以外は結構、実装がメンドクサイんですよ。

 

・セグメンテッドコントロール(④)
 ⇒サブメニュー的に扱われることが多い。UIを色々と変更することが出来ることも特徴。

ナビゲーション色々


・ツールバー
 ⇒ヘッダーかフッターに使われるバー。
  ビューを遷移させるよりも、情報の更新とか、動作の起点となることが多い。
  UIは比較的自由に変えられるのですが、アイコン+テキスト(タブバーの様な感じ)の表現が
  出来ないところがちょっと残念。※テキストのみであれば配置は可能です。

ツールバー

 

 

 

◎ピッカー

ドラム形式で択一選択させてくれるオシャレで粋なアイツ。
今までのホームページであれば、プルダウンの択一選択でしたが、ピッカー表示は滑らかに動き更に美しいUIなんで、
私は大好きですが、iPhone特有のUI故にAndroidでは力技でしか実装出来ません。

ピッカー表示

 

Androidだと力技でこんな感じ

 

 

◎アクションシート

下からニョロっと出てきて選択出来る機能です。
見ているビューの情報をメール送信やSafariで開かせたい時に良く使われます。

アクションシート

 

 

◎テーブルビュー

所謂、リストです。
ナビ系アプリだと、エリア選択や駅選択なんかにも利用されていて比較的見る機会も多いかもしれません。

テーブルビュー

 

 

◎アラートビュー

簡単に言えば、ダイアログです。
基本構成としては、タイトル、本文、選択肢の3要素で構成されています。
また、iPhoneでは選択させたいボタンを右側に活性状態で配置することを推奨しているため、「はい」とかの
選択肢が右に配置されることが多いのですが、私は少々違和感を感じています。

アラートビュー


 

 

 

◆iPad独自のUI正式名称

続いて、iPad独自のUIの正式名称です。
iPadではその画面サイズを生かした独特のUIがありますので、3つをピックアップして説明したいと思います。

 

◎ポップオーバービュー

ボタンをタップしたら、フワッとビューの上に出てくるビューです。
そのボタンに関するサブメニューを表示させる時や、補足情報を見せたい時に使われます。

ポップオーバービュー

 

 

◎スプリットビュー

ビューをRootビュー(赤枠)とDetailビュー(緑枠)の2つに分割表示して、項目を選択しやすくする表示方法です。
また横画面での利用の時は2つに分割され表示されますが、縦画面の場合はポップオーバービューになって表示されるという、ユーザビリティの優れたビューです。

スプリットビュー 【横】

 

スプリットビュー 【縦】



 

見せ方としては似ていますが、iPadの設定画面は恐らく通常のビューを2つ表示させているだけのはず。

iPad設定画面

 

 

◎モーダルビュー

ポップオーバーに似ている表示方法です。
ただ、ポップオーバーとは違い、そこで何らかのアクション(入力や選択)が完了するまでは、ビュー自体が閉じません。
※ポップオーバーの場合は、別の表示部をタップすると、ビューが閉じます。

モーダルビュー

 

ポップオーバーに似ているけど・・・


 

 

 

良く見る表示方法でも正式名称を知らないものが結構多かったのではないでしょうか。
iPhoneアプリにはその他の基本的な項目にもUIの正式名称がありますが、今回は割愛させて頂きました。
※基本項目のUIも知りたい方は「サルできテンプレート」が分かりやすくてオススメです。

 

 

ちなみに最近Twitterクライアントで良く見る下にフリックしてタイムラインを最新の状態に更新する機能は
Pull To Refresh』って言うらしいです。
 ※ウチのPG曰く、「ピュルッ、ドゥーーーン」だそうです・・・

Pull To Refresh

 

 

カテゴリー: 小ネタ   タグ: , , ,

この投稿へのトラックバックURL

コメントは受け付けていません。