iPhone Xの全画面ディスプレイ、ボトム部分のデザイン処理(フロート処理のサンプル画像)
maxrudbergが、iPhone Xで導入されたホームボタンのない全画面ディスプレイについて、そのボトム部分のデザイン処理について、自身が考えたサンプルを公開しています。
ありがたいことにディスプレイデザインで参考になる「pt単位」でのガイド画像も公開してくれています。
例えば、iPhone 7までのディスプレイでの下部の端から端までのボタンは以下のようなデザインです。
📖 あわせて読みたい記事
iPhone X、iPhone 8 / 8 Plusが、音声通話で高域が明瞭に聞こえる音声コーデック「EVS」(Enhanced Voice Services)に対応!「iPhone X」「iPhone 8 / 8 Plus」、位置情報取得に「GPS」「GLONASS」「QZSS」に加えて、EU運用の「ガリレオ」をサポート!それをiPhone Xでは、フロート状にし、下に画像を表示させます。
バナー処理については、iPhone 7では以下の通りです。
iPhone Xでは、やはりフロート処理です。
iPhone 7でタイマーなどの進行状況を表すプログレスバーを以下のように表示します。
iPhone Xでは2通りの表示方法が考えられますが、共にフロートです。
以下は、iPhone Xのトップ部分のデザインの記事です。

















