新しいサービス、アプリ、参加したカンファレンス、読んだ本についてなど気ままに書いていきます。

インターネット業界で働くディレクターの雑記

サービス開発

iOS、AndroidのUIコンポーネントまとめ

投稿日:

component_main

スマートフォンのWebサイトやアプリの開発に関わっていると、日常的な会話の中でよく出てくるUIコンポーネント(構成要素、パーツ)の名前。

ディレクターであれ、デザイナーであれ、エンジニアであれWeb・アプリ開発に関わる人であれば、スムーズにコミュニケーションをとるために最低限押さえておきたいところでなのですが、Web、アプリ、iOS、Androidで呼び名や役割が異なるため、ごちゃごちゃになってしまうことも多いと思います。

photo credit: iPhone 6 vs iPhone 5S via photopin (license)

 

そこでiOS、Androidともにリファレンス用にまとめました。それぞれの役割と合わせて名前を覚えるきっかけになればと思います。

 

iOSのUIコンポーネント

まずは基本コンポーネントから。

ios component

 

①Status bar(ステータスバー)

ステータスバーは、時間やバッテリー残量、wifiやBluetoothのON/OFFなどの基本的なステータスを表示するバーです。デバイスの最上位に常に表示されます。最近はアプリ側の制御でステータスバーのカラーも指定できるようになっています。

 

②Navigation bar(ナビゲーションバー)

ナビゲーションバーは、画面階層を移動する際によく使われます。中央にはその画面のタイトル、左には戻るボタンが基本的には配置されます。右側にはアクションボタンであったり、検索ボタンであったり、シェアボタンであったり、様々なボタンが置かれます。

 

③Tab bar(タブバー)

タブバーは、iOSアプリケーションのメインメニューとして異なるタスクを切り替える時に利用されます。アプリケーションによってはAndroidのようなドロワーだったり、右上から下に開くものだったりがありますが、Appleは基本的にはタブバーの利用を推奨しています。

 

④Search bar(サーチバー)

サーチバーはその名の通り、検索するためのバーです。キーワードでもURLでもどちらでも検索ができ、各ページではそのページのURLを表示します。

 

⑤Tool bar(ツールバー)

表示しているビューに関連する、アクションボタンなどが置かれています。戻る、進むボタンやシェアボタンやブックマークなどから構成され、画面の最下部に表示されます。

 

また、他にも一時的に表示されるビューとして以下のようなものがあります。よく会話ででてくるもの一部ですが。

Action sheet(アクションシート)

ios actionsheet

下から、にゅるっと表示される画面です。シェアボタンだったり、削除していいかの確認だったり、様々なシーンで登場します。

 

Alert(アラート)

ios alert

キャプチャのような、ユーザーにパーミッションをとる時などに主に使われます。はい、いいえなどの選択肢とともに表示することが多いです。

 

AndroidのUIコンポーネント

android_UIcomponent

 

①Status bar

ステータスバーは、時間やバッテリー残量やネットワーク状態などのステータスを表示します。アプリのお知らせもここに表示されます。ちなみにステータスバーでのお知らせのアイコンはGoogleのレギュレーションでは白黒です。たまに色付きのアイコンが表示されている場合がありますが、基本的にはそれはNGです。

 

②Action bar

アクションバーには、アプリ名やページ名の他に、検索や絞り込みなどアプリのメインとなるアクションが並びます。

 

③Tab bar

タブバーは、画面を並列に移動するときなどに用いられます。スワイプで簡単に移動できるのが特長です。

 

④Navigation bar

ナビゲーションバーは、ホームボタン、戻るボタン、画面切り替えボタンなど、OSの操作用に用いられます。

 

また、この他にもAndroidのマテリアルデザインならではのコンポーネントがあります。

 

Navigation Drawer

ナビゲーションドロアーは、マテリアルデザインのメインのナビゲーションです。主要画面を移動する際に利用します。

drawer

 

 

Menu

メニューは、アクションバーの右端にある縦の3点リーダです。タップするとピロんとしたにメニューが表示されます。

menu

 

Androidのマテリアルデザインのコンポーネントやルールなどは、Googleのマテリアルデザインのガイドラインページに詳細がまとまっているので、都度そちらをご確認頂くのがよいと思いますが、かなり数があるので上記のような基本的なところは覚えておきたいですね。

 

 

Adsense

Adsense

-サービス開発

Copyright© インターネット業界で働くディレクターの雑記 , 2018 All Rights Reserved Powered by AFFINGER4.