iPhone Xの全画面ディスプレイ、ボトム部分のデザイン処理(フロート処理のサンプル画像)
maxrudbergが、iPhone Xで導入されたホームボタンのない全画面ディスプレイについて、そのボトム部分のデザイン処理について、自身が考えたサンプルを公開しています。
ありがたいことにディスプレイデザインで参考になる「pt単位」でのガイド画像も公開してくれています。
例えば、iPhone 7までのディスプレイでの下部の端から端までのボタンは以下のようなデザインです。
📖 あわせて読みたい記事
Bloomberg:iPhone 8では「Touch ID」のかわりに「3Dセンサーによる顔認識機能」を搭載か?iPhone Xの受話スピーカーからクラック音やノイズ音が聞こえる不具合が発生それをiPhone Xでは、フロート状にし、下に画像を表示させます。
バナー処理については、iPhone 7では以下の通りです。
iPhone Xでは、やはりフロート処理です。
iPhone 7でタイマーなどの進行状況を表すプログレスバーを以下のように表示します。
iPhone Xでは2通りの表示方法が考えられますが、共にフロートです。
以下は、iPhone Xのトップ部分のデザインの記事です。

















