UI/UXデザインツール『InVision Cloud』入門

2-7. iPhoneのステータスバーの表示を切り替える

InVision Cloudではプレビューの設定を変更することによってiPhoneのスキンやステータスバーの表示切り替えができます。デザインによってはステータスバーを非表示にしたり、Sketchですでにステータスバーを入れてデザインを作成している場合、この機能を使うことによって正しい表示を再現することができます。

  • UIデザイン
  • UXデザイン
  • プロトタイピング

公開日:2019/04/07最終更新日:2019/04/07

スポンサーリンク

1.デフォルトのステータスバー表示

ステータスバーの設定を何も変更しないと、以下の例のようにすこしずれた状態で表示されます。

この位置を変更することができるのが、ステータスバーの設定です。

2.スキンとステータスバーの設定

プレビューモードの右下にある「CONFIGURATION」をクリックします。

ここから表示されるのがスキンとステータスバーの設定です。

iPhone Skinを変更するとプレビューで表示されるデバイスが切り替わります。

Status Bar Styleを変更するとステータスバーの設定が変えられます。

3.ステータスバーを非表示にする

ステータスバーを非表示にしたいときは「Hide status bar (desktop viewing only)」をクリックします。

※注意書きにもある通り、InVisionをiOS Safariで開いた際はステータスバーが表示されてしまいます。iOSアプリではここの設定が有効になります。

4.デザインにステータスバーを追加する

Sketch上でステータスバーを付けずにデザインしていた場合は「My design starts below the status bar」を有効にすることで、上部にステータスバーを付け加えることができます。

ステータスバーの高さ分、デザインが下に移動します。

5.ステータスバーの色を変更する

ステータスバーの色は変更することができます。変更できるのは背景色のみで、文字の色は白か黒だけです。

背景色を「Transparent」に設定すると、このような見た目になります。

SketchやPhotoshopでデザインを作る際は、あらかじめステータスバーをどうするか考慮して作ると良いでしょう。

理解度チェック

スポンサーリンク

このレッスンの著者