スプリットスクリーン

スプリットスクリーンモードを使用する事で、同時に2つの事を効率よくできるようになりました。表示は、上下または左右で2画面表示する事ができます。

例えば、以下の動画のように上のスクリーンで映画のスケジュールを見ながら下のスクリーンでメールを打てるのはとても効率的ですね!スプリットスクリーンモードのON / OFFやリサイズなども簡単ですぐに使いこなせそうです。

以下の動画は、モバイルとタブレットそれぞれのスプリットスクリーンモードを紹介しています。




使用法

アプリが開く時は、デフォルトではフルスクリーンで表示されますが、スプリットスクリーンに対応している場合は、リサイズされ表示されます。

スプリットスクリーン(1デバイスで2画面表示)を使用可能な条件

・今開いているものと、新しく開始する動作(ページ)がお互いに関連している時

・スプリットスクリーンモードを使用する事で、そのアプリ内で効率よく使える時

・スプリットスクリーンモードが開始する事が明確な時(「新しいウィンドウで開く」ボタンを使うなど)

ユーザーの許可が必須

自動でスプリットスクリーンモードにすることは不可で、ユーザーが作動させる必要があります。



動き

スプリットスクリーンモードは自動で終わる事はできず、ユーザーがキャンセルをするか、他のアプリと両立できない場合だけ閉じられます。また、2つのスクリーンサイズの割合は仕切り線をドラッグする事でリサイズする事ができます。



レイアウト

表示は、スプリットスクリーンに適したサイズに変更する必要があります。なので、重要なコントロールとなるナビゲーションタブはメニューの中に入れるなどして対応します。

レスポンシブの場合は、それぞれのデバイスのサイズと動きに順応している必要があり、予想外な動きが発生しないことが前提です。例えば、縦向きでひとつのスプリットスクリーン内で動画を見ていて、横向きに変えた時に動画がフルスクリーンになるなどのユーザーにとっての予想外となる動きは避けます。

また、モバイルとタブレットによって違うレイアウトを使用する事も可能です。

  • アプリのモバイルとタブレットのレイアレイアウトが同じような場合は、リサイズされる時にモバイルとタブレット間で切り替わることが可能です。
  • アプリのモバイルとタブレットのレイアウトが異なる場合は、モバイルのUIをタブレットのスプリットスクリーン用に使用することは不可なので、タブレットのUIを小さくリサイズして一貫性のあるデザインにします。


以下の一番目の画像はモバイルとタブレットで同じデザインを使用していて、二番目の画像は違うデザインを使用しています。

一貫したデザインにするには

デバイスによってそれぞれサイズが異なるので、最初に一番小さいサイズからデザインすることをお勧めします。レイアウトする時は、要素を要約するか削除し220dpの横幅又は高さで対応できるようにします。

mei's design

はじめまして、meiです。 都内でデザイナーやってます。 アメリカのカリフォルニア州サンフランシスコで ビジュアルコミュニケーションデザインを専攻し大学を卒業後帰国。 英語を活かして、マテリアルデザインを勉強がてら共有していきたいと思います。

0コメント

  • 1000 / 1000