iPhone X向けのデザイン

iPhone X（またはiPhone 10）はすでに公式に発表されており、そのリリースは今年11月3日に予定されています。 このデバイスは、その特性の1つである1125×2436ピクセルの解像度を備えたSuper Retina Display（液晶ディスプレイ）を安全に誇っています。 さらに、画面上部に特別なノッチが設けられます。これは、新しいiPhoneのロックを解除するためのもう1つの未来的な機能です。これにより、デバイスは顔の特徴によってユーザーを識別します。



iPhone X向けのアプリケーションの設計は開発者にとっては困難な作業のように思えるかもしれませんが、その一方で、新しいiPhoneは彼らに最もワイルドなアイデアを実現する機会を与えます。 垂直モードのデバイスの画面幅はiPhone 6、7、8の画面幅と同じですが、画面の高さが145pt増加し、その結果、画面が視覚的に20％増加します。 @ 1xレイアウトを作成するには、375×812pxのパラメーターを持つアートボードが必要です。 iPhone Xで新しいRetinaディスプレイを使用した結果、@ 2x画像を（たとえば、iPhone 8のように）エクスポートすることはできませんが、@ 3xの場合は、iPhone 7-8 Plusの場合のように、ここですべては以前のままです。



新しいiPhoneのアプリケーションデザインを開発するときは、 UIだけでなく、デバイスの新しいユニークな機能（丸い角、画面上部にあるノッチ、ホームインジケーター）を常に念頭に置いてください。 ところで、iPhoneの新しいバージョンでは、ホームインジケーターは画面の下部にある小さな線になります。 ご想像のとおり、iPhone Xの物理的な「ホーム」ボタンはなくなります。 したがって、メイン画面またはマルチタスクモードへの移行、または1つのアプリケーションから別のアプリケーションへの移行は、画面にタッチすることで実行されます。









^画面の下部にある白い線は、新しい種類のホームインジケータです。



組み込みのiOSコンポーネントを使用してアプリケーションを作成した場合は、心配する必要はありません。アプリケーションはすでに新しいiPhoneに正常に適合しています。 これらのコンポーネントには、ナビゲーションパネル、テーブル、タブパネルが含まれます。 iPhone Xでは、そのようなコンポーネントは自動的に統合され配置されます。









^左側のiPhone 8のデザインアプリは、iPhone X（右側のもの）に自動的に適応します



アプリケーションでカスタムグリッドを使用する場合は、新しい画面構成に合わせて調整する必要があります。 それでも、アプリケーションで自動レイアウトを適用した場合、適応によって問題が生じることはありません。

さあ始めましょう

まず、新しいデバイスの設計を評価してください。これは、Appleの開発者がこの高価なデバイスの並外れた特性を無視するために一生懸命働いていないためです。



フルスクリーンアプリケーションの開発に焦点を当てます。 アプリケーションのすべての要素を画面の最後までスクロールさせ、ディスプレイの丸い端を越えてください。 Appleは、上部のくぼみと下部の丸い縁を他の要素で塞がないことをお勧めします。 したがって、画面の端に黒いフレームを配置しないようにしてください。このソリューションはiPhone 8で使用されており、古くなっています。



重要なコンテンツを中央に配置し、両側にインデントします。 重要なコンテンツが中央に配置され、両側に対称的なインデントがあることを確認してください。これにより、センサーやデバイスの角によってインターフェイスが切断されないようにします。 自動レイアウトを使用してアプリケーションを作成した場合、コンテンツは自動的に配置されます。その結果、画面のコーナー、センサー、ホームインジケーターがアプリケーションのデザインを覆い隠すことはありません。









ステータスバーの更新を検討してください。 新しいiPhoneでは、センサーがディスプレイの上部に配置されているため、ステータスバーも変更されました。現在は2つの部分に分かれています。 アプリケーションのインターフェースが何らかの方法でこのスペースを使用している場合（最近まで20ptでしたが、現在は44pt）、iPhone Xでは長くなるため、インターフェースを更新する必要があります。 また、通話中や、他のアプリケーション（ナビゲーションアプリケーションなど）を使用しているときにインターフェイスが変更されないようにしてください。これは、以前のバージョンのiPhoneで一般的な問題です。









^スプリット以上のステータスバー



新しいステータスバーを非表示にしないでください。 Appleは、ステータスバーが非表示になっているソリューションを使用しないことをお勧めします。 新しいiPhoneの画面は以前のデバイスよりも長いため、コンテンツを配置するためにより多くのスペースを使用でき、ステータスバーを非表示にすることなく効率を上げることができます。 たとえば、特にこのスペースはほとんどの場合他のインターフェイス要素によって使用されないため、ユーザーに関心のある情報をステータスバーに配置できます。



全画面画像を更新します。 アプリケーションが現在フルスクリーン画像を使用している場合、トリミングされる可能性があるため、iPhone X用に更新する必要があります。その結果、いくつかの重要なコンテンツが非表示になります。









画面の下部にコントロールを配置しないでください。 ユーザーがワンタッチで簡単にメインメニューに戻ることができるように、ホームインジケーターの周りの空きスペースは特別に提供されました。 このインジケータの隣または下部のディスプレイの隅に機能ボタンを配置することは、最良のアイデアとはほど遠いものです。 この場合、ユーザーが誤ってホームインジケーターに触れる可能性が高く、その結果、インターフェイスが不快であると見なされます。 もちろん、ホームインジケーターの隣にタブバーまたは他の機能ボタンを配置できますが、それらが互いに干渉しないように配置します。









ホームインジケータは常にユーザーに表示される必要があります。 IOSは、アプリケーションのホームインジケーターを非表示にする機能を提供します。ユーザーが数秒間画面に触れない場合、ホームインジケーターは自動的に非表示になり、画面をもう一度押すと再び表示されます。 多くの場合、このソリューションはビデオや画像の表示に使用されます。 また、新しいiPhoneでは、ホームインジケータの色がアプリケーションの背景色に応じて自動的に変化することにも注意してください。









より多くの色。 新しいSuper Retina Displayはさらに多くの色を提供します。P3カラーモデルがsRGBに取って代わりました。つまり、色がさらに明るく豊かになります。 このような革新は、ビデオや写真を見るときに特に顕著になります。

（初めて、iPhone 7でP3カラーモデルが使用されるようになりました。このアイデアはMarceloÁvalosに属します）



ジェスチャーをカスタマイズするときは注意してください。 iPhone Xにはホームボタンがないため、ユーザーはジェスチャだけで（これまで以上に）このデバイスと対話する必要があります。 指が画面に触れると、ユーザーはメインメニューまたは多機能モードに入ります。 さらに、ホームインジケータを左右に​​動かすと、ユーザーは多機能モードで開いているアプリケーションを切り替えることができます。 [通知]セクションまたはコントロールセンターに移動するには、画面を下にドラッグします。 ゲームには、標準のiOSジェスチャーをキャンセルする独自の特別なジェスチャーがあります。 また、「エッジプロテクト」で独自のジェスチャーを設定できます。これは、新しいiPhoneの機能です。これにより、iOSの標準ジェスチャーに加えて独自のジェスチャーを設定できます（ただし、一度だけ）。 ただし、この機能は、アプリケーションがユーザーにとって複雑すぎないように使用してください。



顔ID iPhoneの以前のバージョンでは、優れた機能-タッチID-が提供されました。これにより、ユーザーはデバイスのロックを解除でき、指紋を使用してロック解除された一部のアプリケーションのパスワードを設定できました。 このセンサーは「ホーム」ボタンに配置されました。 この機能はiPhone Xには含まれていないため、Apple開発者は、より安全で効果的な代替機能であるFace IDをファンに紹介することにしました。 このような機能を作成するために、開発者は、デバイスが所有者の顔の特徴を決定する真に息をのむようなアルゴリズムを使用しました。 間違いなく、この機能はアプリケーションインターフェイスに多くの新しいものをもたらします。 iPhone Xの幸せな所有者である（苦しんでいない）顧客と作業するときは、このイノベーションを使用してみてください。また、アプリケーションのメニューでTouch IDを参照しないでください-Face IDに置き換えてください。



カスタムキーボード 。 カスタムキーボードを開発する場合、絵文字ボタンとディクテーションボタンを特別に追加する必要はなくなりました。これらは、キーボードの下部のホームインジケータの横に既に自動的に追加されます。



拡大されたナビゲーションバー 。 iOS 11のリリースに伴い、元のナビゲーションバーのデザインにいくつかの変更が加えられました。たとえば、後者は長くなりました。 このようなイノベーションは、以前のモデルと比較して、iPhone Xが長くなり、新しいステータスバーがあればうまくいきます。 したがって、次のアプリケーションとその設計の開発中に、これらすべてを考慮してください。 さらに、スクロール中に画像を表示する機能が新しいナビゲーションパネルに追加されました。

TL; DR

• Phone Xは145pt長くなるため、375x667ptではなく375×812ptを使用して設計してください。
• iPhone Xは@ 3xを使用します。
• フルスクリーンアプリケーションを開発する-新しいデバイスの固有の特性を隠さないでください。
• 重要なコンテンツを中央に配置して、センサーとデバイスの角が目立たないようにします。
• 新しいステータスバーが長くなり、2つの部分に分割され、長さが22ポイントではなく44ポイントになりました。
• フルスクリーン画像を更新して、新しいデバイスに適宜表示します。
• デバイス画面の下部、ホームインジケータの隣にボタンを配置しないでください。
• ホームインジケーターを非表示にしないでください。このソリューションは、緊急の場合にのみ使用してください。
• P3のおかげで、より明るく彩度の高い色を楽しむことができます。
• ユーザーが通常のネイティブジェスチャと混同しないように、ステータスバーまたはホームインジケータの横にあるボタンにカスタムジェスチャを設定します。
• Face IDがTouch IDを置き換えたため、 UIを更新する必要があります。TouchIDへのすべての参照を削除します。
• カスタムキーボードを開発するときは、絵文字ボタンとディクテーションボタンを追加しないでください。
• 長いナビゲーションバーは、iPhone Xの細長いディスプレイに特に適しています。

アプリケーションを事前に確認する方法は？

この目的のために、Xcode 9シミュレーターを使用できます。これにより、アプリケーションのUIを更新する必要があるかどうかを事前に判断できます。