iPhone Xの全画面ディスプレイ、ボトム部分のデザイン処理(フロート処理のサンプル画像)
maxrudbergが、iPhone Xで導入されたホームボタンのない全画面ディスプレイについて、そのボトム部分のデザイン処理について、自身が考えたサンプルを公開しています。
ありがたいことにディスプレイデザインで参考になる「pt単位」でのガイド画像も公開してくれています。
例えば、iPhone 7までのディスプレイでの下部の端から端までのボタンは以下のようなデザインです。
📖 あわせて読みたい記事
iPhone X、部品供給の不足から日産1万台未満という厳しい状況で、「ブラッシュゴールド」カラーは販売延期か?AppleスペシャルイベントでのiPhone X(Face ID)デモ失敗の気の毒な理由それをiPhone Xでは、フロート状にし、下に画像を表示させます。
バナー処理については、iPhone 7では以下の通りです。
iPhone Xでは、やはりフロート処理です。
iPhone 7でタイマーなどの進行状況を表すプログレスバーを以下のように表示します。
iPhone Xでは2通りの表示方法が考えられますが、共にフロートです。
以下は、iPhone Xのトップ部分のデザインの記事です。

















