iPhone Xの全画面ディスプレイ、ボトム部分のデザイン処理(フロート処理のサンプル画像)
maxrudbergが、iPhone Xで導入されたホームボタンのない全画面ディスプレイについて、そのボトム部分のデザイン処理について、自身が考えたサンプルを公開しています。
ありがたいことにディスプレイデザインで参考になる「pt単位」でのガイド画像も公開してくれています。
例えば、iPhone 7までのディスプレイでの下部の端から端までのボタンは以下のようなデザインです。
📖 あわせて読みたい記事
iPhone 8のサプライヤー、顔認識が可能な3Dセンサー用レンズをまもなく出荷Apple、iPhone XのポートレイトライティングをPRする動画「Studio in your pocket」をYouTubeで公開!それをiPhone Xでは、フロート状にし、下に画像を表示させます。
バナー処理については、iPhone 7では以下の通りです。
iPhone Xでは、やはりフロート処理です。
iPhone 7でタイマーなどの進行状況を表すプログレスバーを以下のように表示します。
iPhone Xでは2通りの表示方法が考えられますが、共にフロートです。
以下は、iPhone Xのトップ部分のデザインの記事です。

















