お使いのブラウザは、バージョンが古すぎます。

このサイトは、Internet Explore8・Internet Explore9には対応しておりません。
恐れ入りますが、お使いのブラウザをバージョンアップしていただきますよう宜しくお願いいたします。

【iOS】あのUIは何て言うの?iOSのデフォルトUIコンポーネントをおさらいする

どうもこんにちはJBです。
アプリの開発&デザイン時に、関わる人たちがデフォルトのUIコンポーネントについてきちんと知っているとお互い話が通じやすいし、設計もしやすいですよね!という訳で、今回はiOSのデフォルトUIコンポーネントについてまとめてみたいと思います。

昔、「あの、あれだよ、あの青くてなんか切り替わるヤツ!」「Segmentted Controls?」「何それ」みたいな会話が繰り広げられて時間と労力を多少無駄にしました。
開発しない人も名前ぐらいは知ってた方が良いですね…と言う事をひしひし感じております。そんなわけでiOS8が出るか出ないかくらいの時期に空気を読まず、今回の記事です。
すべて網羅している訳ではないのと、色々端折っておりますのでその辺はあしからずですよ。詳しく知りたい方は、iOSのヒューマンインターフェースガイドラインをご覧ください!


それでは行ってみましょう!

バー系

UIコンポーネントでもないですが…まずは基本のバーについて。
当初は「Tab bar(タブバー)」と「Tool bar(ツールバー)」と「Navigation bar(ナビゲーションバー)」がもうごちゃ混ぜでした。今も多少混ざります。
iOSのバー要素

  1. Status bar
    ステータスバー。電波状況やバッテリー残量、日付などを表示。デバイスの上部に配置されます。
  2. Navigation bar
    ナビゲーションバー。情報階層移動に使う。よくあるのが左にBackボタン、真ん中に階層ラベル(必須ではない)のパターン。通常、ステータスバーの下に配置されます。
  3. Tab bar
    タブバー。異なるタスクを切り替える場合に使用。下に配置するのがデフォルト。
  4. Search bar
    検索バー。その名の通り、検索窓が入っているバーです。
  5. Tool bar
    ツールバー。表示ビューに関するアクション実行のボタンがあるもの。デフォルトでは画面下部に配置。

場所・機能などそれぞれ違うので、きちんと整理した方が良いですね!

それぞれ高さなどを知りたい場合は、こちらのサイトが便利です。
The iOS Design Cheat Sheet-Ivo Mynttinen / User Interface Designer

コントロール部品

UI部品です。それぞれ適宜装飾なども変えられます。意外と種類が少ないですね…。

Buttons

システムボタン
システムボタン。…何て言うか…ボタンです…。iOS7では囲みがないシンプルな形。アクションを開始します。

Segmented Controls

セグメント化コントロール
セグメント化コントロール。
関連性が高いものの、お互いに排他的な選択肢を持つビューを切り替える役割があります。App Storeの「有料・無料リスト」の切り替えなんかが代表的ですよね!

Switch

スイッチ
スイッチ。
ON/OFFなどの選択に使われ、基本TableViewで表示する事が多いです。アプリの設定画面などでよくお目にかかると思います!

Pikker

ピッカー
ピッカー。
ホイール状のUIで、いくつか用意された選択肢から選びます。上の画像は、日時の設定に特化した日付ピッカーです。

Slider

スライダー
スライダ。
一定範囲内で値やプロセスを設定できます。音量や画面の明るさ設定などが良い例。

Steppers

ステッパ
ステッパ。
あまり見た事がありませんが、一定の数値で増減する値を設定する時に使用します。

Progress View

プログレスビュー
プログレスビュー。
進捗状況をバーで表示します。メールの送信やSafariの読み込みなどで見かけます。

その他

他にも色々あります。が、割愛して一部ふんわり触れておきます。
その他の部品

  • 連絡先追加ボタン…連絡先を追加するだけのニッチなボタン
  • 詳細開示/Infoボタン…詳細情報やインフォを表示する
  • アクティビティインジケーター…タスクの進行中を表す
  • ページコントロール…並列ビューのページを表す

これ以外にも、一行だけユーザーがテキスト入力出来るテキストフィールド・文字を表示するラベルなどがあります。

一時ビュー

こちらもUIコンポーネントではないのですがね…。メインのビューとは異なるビュー表示に関して。使いどころを選べる様に、きちんと知っておきましょう!

Alert

アラート
アラート。
名前の通りです。モーダル(他の作業が出来ない)状態でポップアップしてきます。App StoreでのApple ID入力などもアラートです。

Action sheet

アクションシート
アクションシート。
iPhoneだと下からニュニュッと出てくるアレです。iPadだと「ポップオーバー」というフキダシ状のビューが重なります。アクションボタンを押した際に、タスクに関する選択肢を提供します。メールのキャンセル後やSafariのシェアなどの例が分かりやすいですかね。

Modal view

モーダルビュー
モーダルビュー。
タスク内で自己完結する機能を提供。…文字にしてもよく分からないですね…。メールの連絡先入力などが分かりやすいでしょうか?あの時はキャンセルまでモーダル状態ですよね!あんな感じです。

まとめ

いかがだったでしょうか?

開発の人と話していると、UI部品の名前がガンガン出てきます(メソッド名に部品名がついているので、そりゃ分かりますよね…)。
「開発はしないけど、これからアプリ制作に関わるよ!」という方は、スムーズに話が進む&共通認識を持てるようにこんな事も知っておいていいのではーと思いますよ!

それではー!

コメントをどうぞ

メールアドレスは公開されません。* が付いている欄は必須項目です。


お気軽にお問い合わせください。

日本VTR実験室では、お仕事のご依頼、ブログ・コラムのご感想などを受け付けております。
アプリ開発・コンテンツ制作でお困りでしたら、お気軽にご相談ください。
ご連絡お待ちしております。

お問い合わせはこちらから

03-3541-1230

info@nvtrlab.jp

電話受付対応時間:平日AM9:30〜PM6:00