iPhoneアプリとゲーム開発者がiPhone Xスマートフォンを入手し、その経験を私たちと共有する







iPhone Xの主なものは、サードパーティのアプリケーションです。 拡張機能からTrueDepthセンサーに至るまで、新機能は創造性を刺激し、開発者のコ​​ミュニティにiPhone Xユーザー向けの革新的な新しいアプリケーションの起動を促します。 しかし、Appleは開発者にテスト用の新しいおもちゃを提供していますが、古いおもちゃを壊さないように注意する必要があります。



iPhone Xは、ここ数年で最も重要なiPhoneの変更です。 解像度が向上し、画面の形状が異なります。 彼は、ホームボタンを削除したり、新しいボタンを追加したり、古いジェスチャーを変更したりしました。 これらの各変更により、デザイナーや開発者に作業が追加される可能性があります...そして、ノッチがあります。 他のスマートフォンメーカーがAppleの例に従うことが予想されます。 しかし、デザインでこのことを回避する方法は？ アプリケーションを適応させるのはどれくらい難しいですか？ 一部の批評家が言うように、これはデザインが悪い例です。



調べるために、iOS用のアプリケーションとゲームのデザイナーと開発者と話をしました。最近、iPhone X用のアプリケーションを更新するプロセスを完了しました。業界で働いている人。

このレビューの開発者アプリ

iPhone Xでのアルトの冒険

解像度の向上

はじめに、異なる形状とサイズの表示に関連する変更と問題、およびAppleがそれらを解決する方法を検討してください。 iOSはさまざまな画面解像度のデバイスで実行されるため、Appleと開発者はユーザーインターフェイスをピクセルではなく「ポイント」で測定しますが、これは設計のかなり標準的な概念です。 iPhone Xディスプレイのポイントの幅はiPhone 7および8（375ピクセル）と同じですが、145ポイント高くなっています。 これは、iPhone XがPlusモデルではなく通常のiPhoneに対応しているためです。Plusモデルのように、拡張ランドスケープモードインターフェイスはここではサポートされていません。





丸みを帯びたエッジとノッチとしても知られるセンサーハウジングを備えたiPhone Xディスプレイ。 クリックして拡大します。



IOSアプリケーションは、各モデルの画面を明確に見るために、さまざまな資産解決をサポートする必要があります。 3レベルのリソース解決では、@ 1x、@ 2xまたは@ 3xの記号が使用されます。 Appleは解像度に依存しないため、PDF形式でリソースを作成することをお勧めします。 それでもビットマップ画像が必要な場合は、現時点で、解像度が@ 2xおよび@ 3xである必要があります。これは、RetinaおよびPlusモデルを備えた最新のiPhoneの標準サイズにそれぞれ対応していました。 iPhone Xは@ 3xを使用します。



私が話した開発者は誰も、新しい画面にリソースを適切に表示することに関して問題を表明していませんでした。 infltr写真編集ソフトウェア会社の共同設立者であるPhilippe Levy氏は、新しいアプローチも気に入りました。

infltrではベクターリソースを使用しています。それらはPDF形式です。 iPhone Xに変更を加える必要はありませんでした。すべてが驚くほど機能します。 @ 1x、@ 2x、@ 3x用にコンパイルするPDFリソースが1つだけ必要です。

Yak＆Coのアートディレクター、マークホワイト（ エージェントAのアドベンチャーゲームで知られるスタジオ）は、彼のチームもリソースの転送に優れていると言い、彼はこれから教訓を引き出しました。将来どのような解像度や画面フォームが表示されるかを実際に予測することはできないため、すべてを最も柔軟な方法で開発するために意図的に努力しました」と彼は言いました。



ただし、iPhoneの許可は以前のルーチンで変更されています。 iPhone Xには、開発者がこれまでに遭遇したことのない他の3つの変更があります。 これらは画面の丸い角ですが、他のiPhoneには正しい形状の角があります。 論争の的となっている切り欠き-Appleはこれをセンサーハウジングと呼んでいます-カメラやその他の機器を画面中央上部に導入します。 最後に、画面の下部に常に表示される新しいホームインジケータ。

ホームインジケータ

過去には、ほとんどの場合、iPhoneの全画面はアプリケーションに属していました-唯一の例外はステータスバーと通知でしたが、現在は状況が変わりました。 アプリケーションは、プロパティの一部を上部のノッチと下部のホームインジケータに提供する必要がありました。



Appleはすでに、iOS開発者が以前のiOSデバイスの混雑した画面領域を使用して潜在的な落とし穴を回避できるように、Auto Layoutという一連のルールとツールを提供しています。 会社はこれを次のように説明しています。

自動レイアウトは、制限に基づいてビュー階層内のすべてのビューのサイズと位置を動的に計算します。 たとえば、ボタンを画像ビューの水平方向の中央に配置し、ボタンの上部の境界線が常に画像の下部の8ポイント下に残るように、ボタンを制限できます。 ビュー内の画像のサイズまたは場所が変更されると、ボタンの場所が自動的に調整されます。

Auto Layoutを既に使用している開発者は、主にカスタムテンプレートに依存している開発者よりもiPhone Xへの移行がはるかに簡単でした。 「私のアプリケーションは、ほとんどすべての表示コードで自動レイアウトを使用しています」と、 Galley FoodsのリードプログラマーであるChris Anderson氏は言います。 -そのため、アプリケーションを新しい画面の縦横比に適合させるための最小限の作業しかありませんでした。 iOS 11のバージョンを再コンパイルし、「iOS 11の場合」という指示を出して、Appleが提供する安全なレイアウトの新しいシステムにアプリケーションを向けると、ほとんど何もする必要はありません。





Appleは、iPhone Xのポートレートモードで割り当てられたセーフエリアのように見えます。開発者は、重要なコンテンツとUI要素を緑のエリア内に維持するように警告されています





iPhone 8とiPhone Xのランドスケープモードでのセーフエリアの比較





iOS 11では、Appleはセーフエリアで自動レイアウト機能を拡張しました。 開発者は、コンテンツと重要なUI要素を安全な領域（ハードウェアやシステムソフトウェアに干渉しない画面の部分）に配置する必要があります。 他のiPhoneモデルでは、基本的に可視領域全体が安全でした。 ただし、iPhone Xはますます難しくなっています。 ポートレートモードでは、セーフエリアは可視エリアの上部と下部からオフセットされます。 上部にはステータスバーとセンサーハウジング用のスペースがあり、下部にはホームインジケーター用の広いスペースがあります。



ホームインジケータは、ほとんど常に画面の下部に表示される薄いパネルで、画面を下から上にスワイプしてアプリケーションを終了したり、マルチタスクインターフェイスにアクセスしたりできることをユーザーに思い出させます。 以前は画面の下の[ホーム]ボタンがこの機能を担当していたため、ある意味でインジケーターは新しいホームボタンと見なすことができます。 Appleでは、インジケータなどを自動的に非表示にすることができますが、これはビデオなどの受動的なフルスクリーンコンテンツを表示する場合のみです。



または、エッジ保護をアクティブ化できます。 その後、インジケーターはそれほど目立たなくなり、ユーザーはアプリケーションを画面からスワイプするために1回ではなく2回スワイプする必要があります。 これは、下から上へのスワイプがアプリケーションの基本機能の一部である場合に推奨されますが、可能であれば別のスワイプに置き換える方が良いことは明らかです。 ただし、インジケーターの存在にもかかわらず、画面の一番下に垂直スクロールビューを配布することをお勧めします。



画面の一番下にナビゲーションボタンなどのUI要素を配置した場合、それらが安全な領域外にある場合は移動する必要があります。 Galley FoodsのAnderson氏は、比較的簡単な移行にもかかわらず、これが彼のアプリケーションの最大の問題になったと言っています。

まず、私のアプリケーションでは、画面の下部に多くのボタンとアクションが添付されていました。 それらはすべて、インジケータ行がボタンを閉じないように、手動の介入を必要としました（自動レイアウトでも）。 第二に、間隔が正常に見えるようにするには、iPhone Xおよび他のiPhoneモデルのテンプレートを手動で調整する必要がありました。 そして最後に、ホームインジケーターを中心にデザインを最適に設計する方法についていまだに苦しんでいます。 ボタンを下部に取り付けると、ボタンの色を周囲の部分に広げたり、線の上で切り取ることができます。 両方のオプションは少し怖いです。 丸みを帯びたエッジでは、丸みの上部に多くのスペースを残す必要があります。 そのため、これらの余分な境界線は、見た目があまりよくありません。

開発者が文字通りAppleの設計ガイドラインに従うほど、移行が容易になります。 しかしアンダーソンは、彼の意見では、Appleが視覚的に魅力的な方法で下のバーを処理する方法についてより良い提案を提供できると言っています： -彼は付け加えました。

カッタウェイ

画面の上部で、開発者は切り抜きとステータスバーと戦わなければなりません。 後者は、マップサービスや着信コールなどのさまざまなバックグラウンドタスクに応じて高さを変更しなくなりました。 しかし、いずれにしても古いものよりも高いです。 アプリケーションはステータスバーを非表示にして上部のスペースをキャプチャできますが、丸みを帯びたエッジと、もちろんノッチを処理する必要があります。



BasecampのデザイナーTara Mann氏は、私が話したほとんどの開発者にとって、この切り抜きは問題を引き起こしませんでした。 「ネックラインが良く見えるほど、周囲のネガティブスペースが大きくなります。」



センサーハウジングを避けるために、安全な場所に固執し、Appleの設計ガイドラインに従う必要もあります。 Appleの標準の自動レイアウト手法に依存するアプリケーションの場合、ナビゲーションボタンがコーナーに取り付けられていても、前述の背景素材の拡大は簡単です。 ただし、ゲームでは、ほとんどの場合、元のUIが使用されます。そのため、問題が発生した場合は、開発者とゲームデザイナーが使用します。 一方、Ryan Cash（Snowman Studiosのディレクター）は、この問題はAlto's Adventureにあまり影響を与えないと述べました。

新しいセンサーハウジングを使用した設計は簡単でした。 アルトの冒険は世界をあらゆるアスペクト比でレンダリングでき、センサー本体は重要なゲームプレイ要素（アルト自身など）と交差しないため、差し迫った懸念事項はありません。 UIがエッジから離れるように画面のエッジの値を設定した後、すべてが見栄えし始めました。

しかし、マーク・ホワイトは、 エージェントAはいくつかの変更を行わなければならないと述べました。 実際、ゲームUIを異なる構造にする必要がありました。「 エージェントAは、プレーヤーが収集するアイテムでドックを使用します。 このドックは、いくつかのUIボタンとともに画面の端に取り付けられました」と彼は説明します。 「新しいルールに準拠するために、テンプレートを少し再考する必要があり、その結果、かなり単純化する必要がありました。」



彼は、開発者はすでにインターフェースを簡素化したかったので、その機会に喜んでいたと言います。

UI X全体のコーナー周辺の安全な領域やマージンなど、iPhone Xの新しいデザインガイドラインに準拠するために、テンプレートを再考する必要がありました。テンプレートは主にエッジアタッチメントに基づいています。 主な改善点の1つは、対応するボタンの代わりにジェスチャバックを実装したことです。 このことは直感的な性質のため、テスターに​​非常に人気があることに気づいたので、インターフェイスから「戻る」ボタンを完全に除外しました。



迷惑メールからユーザーインターフェイスをクリーンアップすることのもう1つの利点は、美しいグラフィックが前面に出て、強迫観念のUIボタンで閉じられなくなったことです。 新しいiPhone Xの推奨事項により、UXを再考し、より優れた、より美しいゲームになりました。

実際の結果に加えて、私は各開発者にノッチの騒々しい批判に対する態度について尋ねました。これは貧弱なデザインの例とも呼ばれています。 キャッシュによると、彼のスタジオは批評家の懸念を共有しておらず、彼らはAppleの選択がスマートデザインの例だと考えています。 「フェイスIDには前面カメラが必要ですが、表面全体をスクリーンで覆うという目標に反します」と彼は言いました。 「その設計は妥協であり、私はそれが良い選択だと思います。」



デザイナーとして、Mannはこれを合理的な妥協案として指定しました。

ネックラインはまったく気にしません。 もちろん、携帯電話はそれなしで優れていたはずですが、その存在はXでの作業を妨げません。実際に目立つのは、アプリケーションの下でOSをナビゲートするとき、画面であるためです。 私はおそらく、切り抜きなしでFace IDを3年間待つよりも、切り抜き付きのFace IDの外観を選択したでしょう。

そのため、いくつかのフォーラムやソーシャルメディアでのdりの叫び声にもかかわらず、私たちが話した開発者とデザイナーの大部分は、カットに対してまったく無関心のようです。

アスペクト比の変更

アップルは、特定の種類のビデオコンテンツを除き、アプリケーションの横に黒いバーを必要としません。ただし、明らかに、アスペクト比は変更できません。 しかし、iPhone X用に設計されたものは、iPhone 8ではどのように見えますか？



開発者が完全に独自のテンプレートを使用せずに、自動レイアウトと安全な領域に厳密に従う場合、アプリケーションは簡単に更新できます。 多くの場合、背景素材は、そこで使用されているデザインスタイルに従って上部領域と下部領域に拡張されます。 これにより、図に示すように、下のボタンが禁止ラインの上に自動的に移動し、ホームインジケーターがリリースされます。





開発者がAppleの標準UIツールを使用した場合、背景素材は自動的に拡大して画面いっぱいに表示されます。 クリックして拡大します。



背景グラフィックを使用する場合、いくつかの追加の考慮事項があります。 iPhone 8用に作成された背景は、画面いっぱいに拡大縮小する場合は左右にクリップされ、収まるように拡大縮小する場合は上部にクリップされます。 ただし、Appleは、iPhone Xのディスプレイに一致する背景グラフィックを提供することをお勧めします。この場合、リソースはiPhone 8の上部と下部から切り取られるか、さらに悪いことに、黒いストライプのあるフレーム（ピラーボックス）に配置されます。



明らかに、これは最良の選択肢ではありません。特に、iPhone 8のLCDスクリーンではこれらのストリップを真っ黒にすることができず、ケースと一体化するという事実を考慮すると。 したがって、アップルは、デザイナーが重要なグラフィックとUIを配置して、iPhone 8でトリミングした後もそれらが保持されるようにすることをお勧めします。





コンテンツを最新の状態に保つためにYak＆Coが行った変更の前後のiPhone XのエージェントA





Yak＆Coはこの機会にエージェントAをオフロードしました



エージェントAでは、ホワイトと他のゲーム開発者は、画面の高さの増加に適応するためにいくつかの変更を行う必要がありました。 ゲームはランドスケープモードであり、一部のシーンは元のバージョンではiPhone Xの画面を完全には埋めませんでした。 「約10シーンを調整して、それらを拡大し、新しい解像度で作成されたスペースを埋めました」と彼は言いました。 幸いなことに、「ゲームの約95％が3Dであり、3Dのほとんどが2Dスタイルでマスクされている」ため、ホワイトは複数のグリッドのスケーリングに30分しかかからなかったと言います。





iPhone 7のアスペクト比に関するアルトの冒険





iPhone Xアスペクト比でのアルトの冒険





適応時に、Snowman Studiosは誤って古い携帯電話でAlto's Adventureを中断しましたが、問題はUI要素を間違った場所に配置するよりも複雑でした。 キャッシュが説明するように：

根本的な問題は、32ビットデバイスで計算された画面の境界線の誤った値でした。 Alto's AdventureはUnityを使用しているため、UIKitを使用してObjective-CからC＃に値を変換する必要がありました。 メッセージ-[UIView safeAreaInsets]



はUIEdgeInsets構造を返しました。 UIKitのこの構造は「CGFloat」の4つの要素として定義され、「CGFloat」は32ビットデバイスでは「float」として定義されますが、64ビットデバイスでは「double」として定義されます。 同等のC＃構造体は、常に「double」を想定しています。 おっと！

開発者はすぐに問題を修正し、アップデートをリリースしました。

OLEDおよびHDR

一般に、開発者や設計者は、OLED画面上でアプリケーションの見栄えを良くするために多くの努力をする必要はありません。 Alto's AdventureはiPhone 7または8よりもiPhone Xの方が格段に涼しいように思えるので、Cacheにその方法を尋ねました。 キャッシュは、画面全体を画面全体に拡大してコントラストを上げることを意味していました。 「アップデートの準備時にグラフィックを最適化しませんでした」と彼は言い、 Alto's Adventureの開発者はより広い色域をサポートするための作業をまだ完了していないと付け加えました。



OLEDがアプリケーション設計者にもたらす新しいアプローチまたは考えられる結果についてMannに尋ねたとき、彼女は暗いトピックでより深い黒とコントラストの増加の効果に言及しました。 「これにより、クールな教室のテーマが作成されると思います」と彼女は言いました。 「現在、私たちのアプリケーションにはダークテーマはありませんが、多くのダークテーマアプリケーションは、OLEDを活用するために、より深い黒を使用してダークテーマを暗くすると信じています。」

Appleが開発者とデザイナーを準備した方法

通常、Appleは、Worldwide Developers Conference（WWDC）で夏の間に重要な考慮事項について開発者と設計者に教えます。 Appleは、セーフエリアなど、後にiPhone Xにとって重要であることが判明したいくつかの概念を紹介しました。 今年、同社はiPhone X ビデオチュートリアルのリリース後にオンラインで投稿しました。



Mannは、Appleが提供する他のリソースも彼女や他のBasecamp開発者に役立つと言っています。

Appleはプレゼンテーションに加えて、ダウンロード可能なデザイン要素の優れた選択を用意しています。 iOS UIのすべての要素のベクターバージョンがあります。 iPhone Xのリリース前であっても、iPhone Xのレイアウトを正確に設計することができました。 もちろん、Xcodeのシミュレーターを使用すると、アプリケーションをiPhone Xで実行することもできますが、デザイナーにとっては、iPhone XでUIのマーク付けを実際に開始して、この高い画面のロジックを感じるだけで良かったです。

重要な要素は、前述のシミュレータです。 Xcodeは、iOS開発者が通常アプリケーションの作成に使用する開発環境です。 「ポピー」のウィンドウのように見える仮想iPhoneでプレビューすることができます。 ウィンドウはポートレートモードとランドスケープモードに回転し、実際には物理的なデバイスに挿入されるはずの黒い挿入を表示します。 Philippe Levyuはシミュレーターを「優秀」と呼び、ドキュメントとビデオのおかげで準備が整ったと感じたと言いました。



「Appleは、iOSのGMバージョンが利用可能になり、アプリケーションを送信できるようになったときに、もう少し明確にしたかったのです」と彼は付け加えました。 -たとえば、infltrを最大限に活用するにはTrue Depthカメラを使用します。 しかし、カメラにアクセスするためのソフトウェアインターフェイスは、iOS 11.1でのみ利用可能になりました。 リリーススケジュールに関する不確実性のため、iPhone Xの更新はinfltrチームにとって「かなり緊張」していました。

おわりに

iPhone Xでの更新は、アプリケーション開発者にとって簡単に最も困難なものの1つになる可能性がありますが、Appleは準備が整っているようです。 WWDCとiOS 11では、エレガントなソリューションと重要な基本原則が定められていましたが、電話自体がいつ発表され、いつ販売が開始されるかを知ることしかできませんでした。



私たちとのインタビューに同意した開発者やデザイナーは一人もいませんでした。 App Storeの他のアプリケーションと同様に彼らのアプリケーションを見ると、カットアウトではなく、ホームインジケータがより多くの問題を引き起こしたようです。 インジケーターがサポートするジェスチャーは、基本的にControl Centerが他のiPhoneで開くジェスチャーに対応しているため、Appleがこのインジケーターを追加する必要性を感じた理由は不明です。



奇妙なデザインの問題から離れると、有能な開発者がiPhone Xのアプリケーションを更新するまで、元のテンプレートで過度の創造性を示さない限り、すべてがしばらく待つことになります。 そして、カットアウトについては、これはそのような妥協ソリューションを備えた最後の電話ではありません、それは大丈夫です。 どうやら、多くの人が恐れていたように、これは軟膏のハエではありません。 それに慣れる時が来ました。