iPhone Xはアプリデザインを根本的に変えました。ユニークなフォーマットと新しいユーザーインターフェース要素を使って、デザイナーは印象的なアプリを作成するために、より多くの柔軟性と創造性を示す必要があります。このガイドでは、Sketchを使ってあなたのデザインをiPhone Xの要求に合わせる方法がステップバイステップで説明されます。
主な発見
- iPhone Xの画面の高さは812ピクセルで、新しいUI要素のスペースを確保します。
- ナビゲーションとタブバーは高くなり、レイアウトの調整が必要です。
- 安全領域を考慮することが重要で、コンテンツがディスプレイの角の丸い部分に落ちないようにします。
- ホームインジケーターは新しいインターフェース要素で、デザインの考慮が必要です。
ステップバイステップガイド
Sketchで新しいiPhone X デザインを作成することから始めます。Aを押して新しい要素を追加し、その後iPhone Xデザインをクリックします。
幅は375ピクセルのままで、高さは812ピクセルに設定されています。これにより、ユーザーインターフェースの設計により多くのスペースが得られます。画面の角の丸みがレイアウトに重要であることを考慮してください。
ホームコントローラーをコピーしてデザインを調整します。標準ライブラリを使用するのではなく、より正確な調整のために特定のiPhone Xライブラリを使用することをお勧めします。Sketchの設定に移動し、iOS 11ライブラリを有効にしてください。
インターフェースを一貫させるために、標準のナビゲーションバーを追加します。ナビゲーションバーの高さは88ピクセルで、iPhone 8の44ピクセルと比較してください。
iOS 11ライブラリでステータスバーを探して追加します。それは画面の上端に配置されるべきです。
タブバーも同様です：iOS 11ライブラリから3つのタブのバージョンを選択し、高さが83ピクセルでレイアウトに適合することを確認してください。
デザインの際には、要素が角の丸い部分に侵入しないように注意してください。プログラミングではこれを安全領域レイアウトガイドと言い、安全な表示のために必要なスペースです。
ホームインジケーターをデザインの重要な要素として追加します。これは下端の中央に配置するべきです。
基本要素を追加した後、全体のセクションをコピーして希望の位置に貼り付けることができます。コピー後に間隔を調整することを忘れないでください。
このプロセスをチャットコントローラーについて繰り返します。デザインのコピーを作成し、それに応じて名前を変更します。
タブのアイコンを交換し、表示を調整します。正しいシンボリズムとテキストを慎重に選択することが重要です。
間隔に注意し、特にチャットバブルとタブバーの間に16ピクセルの間隔を設けて、要素がうまく調和するようにしてください。
これらの手順は、新しいフォーマットにデザインをどれだけ迅速に適応できるかを示しています。ただし、不明点がある場合は、デザインをさらに洗練させるのに問題ありません。
次のレッスンでは、プロファイル領域での追加効果の使用、特にブラー効果の使用について学びます。
まとめ – 効果的なiPhone XデザインをSketchで
あなたのデザインをiPhone Xに適応させることで新しい可能性が広がります。新しい画面フォーマットとUI要素を正しく理解することで、印象的なユーザーインターフェースを作成できます。
よくある質問
iPhone Xの画面の高さはどれくらいですか？iPhone Xの画面の高さは812ピクセルです。
タブバーはどのように調整しますか？タブバーは83ピクセルの高さを持っているべきで、レイアウトでうまく機能します。
デザインを作成する際に注意すべきことは何ですか？安全領域に注意し、要素が角の丸い部分に侵入しないようにします。
Sketchでの調整はどう行うのですか？既存のコントローラー要素をコピーし、iOS 11ライブラリを使用して調整します。
ナビゲーションバーを調整する必要がありますか？はい、ナビゲーションバーの高さは88ピクセルで視覚的一貫性のために調整すべきです。
