Entries

iPhone X対応におけるデザイン上の注意ポイント

iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。
iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。

ざっくりデザインガイドラインを読んでの、気になったところメモ。


画面サイズ
サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された

想定されるインパクト

  • 表示可能な情報量が増える
  • 縦スクロール系コンテンツのコンバージョンが増加
  • スクロールで隠れるナビゲーションの必要性が低下
  • 画面上部のボタンのコンバージョンが低下
  • ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする
  • グラフィック的なコンテンツでは、全体の構図が崩れる。



画像素材
iPhone Xは基本的に3倍解像度。@3x系の素材準備が必須となる。ただしこの辺はiPhone Plus以降のトレンドなのでトドメ感

想定されるインパクト

  • 画像素材のPDF / ベクター化が進む。
  • ビットマップでの生産コスト、配信コストの増加。
  • フォトショやイラレでの作成が、より現実的でなくなる(オートストレッチも参照)。



レイアウト
これが一番大きいかな。

画面端はコーナーがあり、画面上部にはセンサーエリアがある。このため、コーナー等の各種セーフエリアを回避したレイアウトが必要。基本的にはAutolayout対応が必須と考えた方が良い。

ラウンドコーナー周辺は、システム側の情報要素が自動で配置されるため、フル画面のゲーム以外では影響は少ないと考えて良い。

グラフィックとしてみた場合、だいぶレイアウトが悲惨な感じになる。

またStatusBarを隠すのが「非推奨」となった。これはコンテンツエリアの増加により、隠す必要が減ったためと思う。機能的には問題ないが、一部のアプリのビジュアルに影響が出ると考えられる。

想定されるインパクト

  • 工数増。互換性確認コスト増
  • グラフィックとしてのレイアウトの品質低下。
  • Autolayoutやってこなかったモノは本格的にツケを払う。



フルスクリーン系画像の用意
iPhoneとiPhone Xではフルスクリーン時のアスペクト比が違うため、
重要なフルスクリーンのグラフィックなどでは、2種類のアスペクト比で素材を用意する必要がある。

想定されるインパクト

  • ゲーム系などフルスクリーン画像で上下に黒い帯が入る
  • ゲーム系などフルスクリーン系で、画像をストレッチで埋めるため構図が崩れる
  • 画像を2種類の工数、コスト増加。



画面の隅におけるセーフエリアの拡大
四隅や画面下部など、コントロールを置くべきだないセーフエリアが増大した。

・ホームボタンなどが下エッジスワイプになったため。
・四隅にラウンドコーナーがあるため

などに起因する。

想定されるインパクト

  • グラフィックとしてのレイアウトの品質低下。
  • 横スワイプ系のジェスチャーにおける既存マナーとの衝突



四隅のシステム部分に混乱をもたらすビジュアル要素の禁止
地味にこれで審査に引っかかるコンテンツが多いかも
グラフィックを重要視する人はついやってしまうかもしれない。
おそらく、以下のようなものは審査で落ちる。

  • ・画面上部に黒いバーを引いて、ステータスバーエリアを同化して隠す。
  • ・ラウンドコーナーのあるエッジに黒い帯を引いて、通常iPhoneと同じスペースだけを見せる。
  • ・逆に、矢印などでラウンドコーナーを目立たせて、操作を誘発するようなビジュアルもダメっぽい。



色域
広がったらしいがあまり関係ない。
写真やビデオが高精細になると思っておけば良い。

ジェスチャー
iPhoneのシステムレベルの操作が、ジェスチャーになる。
HomeScreen, App Switcher, Notification Center, Control Centerなどがその対象。
自分のアプリでジェスチャーを実装する場合、これらのシステムレベルジェスチャーとの干渉をチェックする必要がある。
具体的にはエッジスワイプ系ジェスチャーに関しては慎重な確認が必要。


認証
顔認証とタッチ認証で処理が異なるので注意。
顔とタッチの差分を吸収するマネージャークラスなどを使うと良さげ。


以上、ファーストインプレッションで気になったところまとめ。
物質としてのiPhone Xは素晴らしいの一言なんだけれども、ユーザーインターフェースの破綻がここにきてマックスになりつつある。

機能的な対応そのものはautolayoutとかちゃんとやってれば動くだろうけど、UIとしての全体整合性がそろそろ。

どうするか悩ましいけど、市場規模が読めないので、総括としては各プレイヤー最低限の対応で逃げそう。このためiPhone Xのポテンシャルを発揮できるアプリは、体力のあるビッグプレイヤーに制限されそう。フラグシップとしてiPhone Xに完全対応することで、ストアオススメを狙うのは戦術的にはワンチャンあるかもしれない(短期的だけど)。

現状はAndroidのマテリアルデザインの方が、はるかに設計としては優れている。困ったらマテリアルデザインに矛盾しない範囲で、iPhone Xに対応するぐらいでもいいかもしれない(Appleごめん)。