iPhone X Apple 公式ヒューマン・コンピュータ・インタラクション・ガイドのマニュアル翻訳

Apple の記者会見が昨夜開催されました。新しい iPhoneX の具体的な解像度と適応スタイルについて疑問があるかもしれません。以下は AppleHuman-Computer Interaction からの抜粋です。ガイドライン a>このページでは iPhoneX を紹介しています。まずは iPhoneX について学ぶことができます。

iPhone Xの概要

iPhone のビジュアルエクスペリエンス

画面サイズ画面サイズ

ポートレートモードでは、iPhone の画面幅の比率は 375px x 3 = 1125px) となります。ただし、iPhone X の画面の高さは 4.7 インチの iPhone 6 などのデバイスよりも 145 ピクセル高いため、iPhone

縦長の寸法	景観寸法
1125px × 2436px (375pt × 812pt @3x)	2436px × 1125px (812pt × 375pt @3x)

iPhone でアプリケーションの画像を鮮明に表示するために、ベクトルグラフィックスを解像度に依存しない PDF 形式で提供できます。その他のカットについては、iPhone X と Plus の両方のモデルで @2x カット、@3x カットを呼び出すことができます。カットすると、最適な表示効果が得られます。その他のユーザーは、画像のサイズと解像度およびカスタムアイコン<を確認できます。 a i=5>。

レイアウトレイアウト

iPhone を設計するとき。

UINavigationBar、UItableView、UICollectionView など、システムが提供する UI 要素を使用するほとんどのアプリは、iPhone X に適応します。システムコントロール (UINavigationBar や UITabBar など) は自動的に画面の端まで拡張され、UITableView や UICollectionView などの要素は引き続き画面領域を埋め続けます。

自動レイアウトアプリケーションの場合、特にアプリケーションが自動レイアウトを使用する場合、iPhone X に適応するのは比較的簡単です。

iPhone X でアプリをプレビューする Xcode に付属のシミュレータープログラムを使用して、iPhone X でのアプリの適応を確認できます。ただし、広色域画像に関する現実世界の問題など、他の機能は実際のデバイスでプレビューするのが最適です。 ——それは新しいiPhoneがサポートする色域だからです。

新しい iPhone の全画面に注目してください。UICollectionView は通常どおり下までスクロールします。

コントロールを安全な領域に描画する一般に、UI コンテンツは、隅や上部の前髪、またはシステムボタンは下部にあります。最良の結果を得るには、システムが提供する標準のインターフェース要素と自動レイアウトを使用してインターフェースを構築します。すべてのアプリは、UIKit で定義された安全領域 (安全領域) とレイアウトマージン (マージン) に従う必要があります。これらのマージンは、画面の幅と高さ、およびコンテキストレイアウトに基づいて適切に埋めることができます。安全領域内にあると、UI コンテンツが UIStatusBar、UINavigationBar、UIToorBar、および UITabBar をカバーすることもできなくなります。

ステータスバーの高さに注意してください iPhone のステータスバー次に、この UI コントロールの Y 値を 20 に設定するときに、UI の状態を更新する必要がありますアプリケーション内のコントロールを使用して、ユーザーが使用するデバイスに応じて UI コンテンツの Y 値を変更します (iPhone X のステータスバーの高さは 44、他の iPhone のステータスバーの高さは 20)。

もう 1 つ注意すべき点は、録音や位置情報追跡などのアプリケーションがバックグラウンドで実行されている場合、iPhone X のステータスバーは下に移動しませんが、他の iPhone ではページ全体が下に移動します。

アプリが現在ステータスバーを非表示にしている場合は、iPhone X での影響を再検討する必要があります。 iPhone X は 4.7 インチ iPhone のトップステータスバーコントロールと比較してより多くの機能を提供します。ただし、上部のセンサーの存在により、上部のステータスバー領域には必要なコンテンツを完全に表示することができず、ステータスバーには多くの重要な情報が表示されるため、このスペースが非常に必要かどうかを慎重に検討してください。またバー。

画像を元の比率で再利用する場合は、アスペクト比の違いに注意してください iPhone X は 4.7 インチ iPhone と比べてアスペクト比が異なります。その結果、 4.7インチiPhone iPhone上で全体の写真が表示されている場合または、左右の枠表示の効果が現れます（iPhone 5の写真はiPhone 4Sの写真になります）。したがって、重要な画像が切り取られる可能性のある場所に表示されないように注意してください。

ボタンなどのインタラクティブなコントロールを画面の下部や隅に配置しないようにしますユーザーは、ホーム画面やアプリケーションにアクセスするために画面下部のスワイプジェスチャを使用します。ボタンなどのコントロールは、下側のスライドジェスチャで隠れてしまう可能性が高く、画面の隅の領域をクリックするのが非常に難しいため、ここではインタラクティブコントロールを表示しないようにしてください。

主要な表示機能を隠したり、特別な注意を払ったりしないでください。黒いバーを使用して、画面フレームの丸い角や下部のシステム機能ボタンを隠したり覆ったりしないでください。また、括弧、枠線、図形、ガイドテキストなどの特殊文字を使用しないでください。これらのシステム機能領域には特別な注意が払われます。

制限付き仮想ボタンを非表示にしてホームページ (仮想ホームボタン) に戻ることができます。仮想ボタンが自動的に非表示になると、ホームボタンが有効な場合、仮想ホームボタンは、ユーザーが画面に触れないと数秒後に非表示になり、ユーザーが画面に触れると仮想ホームボタンが表示されます。この機能を使用すると、ユーザーはビューをブロックせずに写真やビデオを閲覧できますが、この機能はユーザーの閲覧エクスペリエンスを向上させる目的でのみ使用されるべきであり、積極的にトリガーされるべきではありません。

「適応性とレイアウト」をご覧ください。

画面の色色

iPhone X の画面は P3 広色域ディスプレイをサポートしており、sRGB 色域よりも豊かで飽和した色を生成できます。

可以使用P3色域来增强视觉体验。使照片和视频的显示更加逼真，并使图表等数据更具有冲击力。详情请参阅颜色管理。

手势 Gestures

在iPhone X上，可以使用屏幕边缘手势来访问主屏幕，切换应用，访问通知中心和控制中心。

避免干扰系统范围的屏幕边缘手势。人们依靠这些系统手势来进行回到主页等功能。但是在极少数情况下，像游戏这样的全屏应用可能需要自定义的屏幕边缘手势，这会造成优先于系统的手势而执行 - 第一个滑动会首先调用开发者在游戏中设置的操作，而第二次滑动则会调用系统手势。这种行为（称为边缘保护）应该谨慎实施，因为它使得用户难以访问系统操作手势。详情见手势。

额外的设计注意事项 Additional Design Considerations

区分不同的身份认证方式。 iPhone X支持面部识别(Face ID)用于解锁手机以及身份验证，如果你的应用整合了Apple Pay或其他的系统身份验证功能，请勿在iPhone X上使用Touch ID，同样的，请确保在其他支持Touch ID的设备上不调用Face ID。详情见身份认证

不要复用系统提供的键盘。在iPhone X上，即使使用自定义键盘，Emoji表情和听写功能按钮也自动显示在键盘的下方。您的应用程序不能占据这些按钮的位置，因此避免在键盘中重复这些按钮，以免造成混乱。详情请参阅自定义键盘。

资源 Resources

你可以在这里下载到iPhone X的UI设计模板，Photoshop和Sketch适用，详情参阅资源。