Material Design(Android)における半モーダルの解釈

先日、iOSにおける半モーダルビューの解釈という面白い記事があり、この半モーダルビューは Android ではどれが当てはまるんだろうと思ったので、個人的に解釈してみました。

これからの話は Material Design を適用した Android での話になります。
(エンジニア視点なので、モーダル・モードレスからずれていたらごめんなさい…)

Android におけるモーダル

そもそも Android の開発ではモーダルという言葉が出てこないです。
Android におけるモーダルてなんだ ? と思ったので、Android でのモーダルてこれじゃねと思ったのをいくつか挙げてみようと思います。

Dialog

モーダルといえばこれが一番思い浮かびやすいんじゃないでしょうか?
もちろん、Dialog にフォーカスが当たっていることがわかるよう背景が暗くなっています。

Sheet: Bottom (Standard)

実装するときは BottomSheet と呼ばれるものです。
よく見かける使い方として、音楽再生アプリや地図アプリで使われいるかと思います。
Google Keep や Google I/O のアプリでも使用されていましたね。

Sheet: Bottom (Modal)

BottomSheet にはもう一つ、ダイアログのように BottomSheet のみフォーカスが当たっている (後ろの View は操作できない) タイプがあります。
こちらは Google の ToDo アプリがほとんどの操作でこれが使われていました。

Backdrop

Material Design に新しく追加された Backdrop もモーダルと呼んでもいいでしょう。
手前にあるのが Primary な機能で後ろにあるのが手前の機能の補助的なもの (メニューのようなもの) になります。見た目に騙されてはいけないのが、手前のレイアウトをスワイプして後ろのレイアウトを表示させるのはガイドライン的にタブー。後ろのレイアウトを表示させるタイミングはハンバーガーアイコンのタップなどアクションが必要となります。

モバイル限定ですが、NavigationDrawer や Sheet: side だったり他にも色々ありますね。

Android における半モーダル

本題に入るが、iOSにおける半モーダルビューの解釈では半モーダルは以下のような特徴があるとなっていました。

・モードの完全遷移が起こらない
・モードを多重化しながらパラレルに対話可能
・モードを終了させずにモードからの一時退避が可能
・擬似的なマルチウインドウ・インターフェイスに応用可能
・スワイプなどインタラクションコストの低い操作方法によってモードの切り替えが可能

純粋に Material Design だけで判断した場合、Sheet: Bottom (standard) や Backdrop が半モーダルに該当するのではないだろうか。

半モーダルがどれほどの機能を持つのかについては言及がありませんでしたが Sheet: Bottom (standard) は以下のような場面で使うべきとガイドラインにあります。

・Standard bottom sheets display content that complements the screen’s primary content. They remain visible while users interact with the primary content.

あくまで補助する (ソートやコントローラといったメニュー的役割) ためにあるので、iOS のメールアプリで編集しながら受信トレイを確認するみたいな、タスクの切り替えができるマルチウィンドウ感覚で使うものではありません。

iOS のようにマルチウィンドウぽく使うべきではないが、半モーダルに該当するであろうものは Android にもある。

余談

iOS は標準のマップアプリ、Android は Google Map で例えば東京タワーについて検索してみると OS 毎のデザインの違いが良くわかって面白い。

iOS は半モーダルで地図と詳細の切り替えが可能。Android は地図の画面に戻るために詳細画面のタスクを閉じなければならない。

iOS と Android のデザインを分けるべきという話がよく出てくるが、ただ見た目のデザインだけでなく、画面の扱い方も違うため画面遷移なども OS によって分けるべきだと思いました。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

34

NUmero

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。