iOS 7のフラットデザインでアプリを開発するための移行ガイドをAppleが発行

次の記事

iOS 7、古いiPhoneやiPadは取り残される

Apple - iOS 7

予想どおりAppleは、iOS 7にまったく新しいデザイン原則を導入した。自分のアプリを最新作に見せたいデベロッパは、その‘原則’に適応しなければならない。幸いにもAppleは今日(米国時間6/10)、iOS 7向けの設計や既存アプリの移行に関する、相当網羅的なガイドを発表した。これを読むと、縁なしボタンや半透明バー、全画面レイアウトなど、新しいUI成分の使い方を理解できる。

完全新装のiOS 7についてAppleは、“アプリがその目的と機能性をユーザに伝えるやり方を再検討するための、またとない機会だ”、と言っている。

iOS 7 UI Transition Guide_ Layout and Appearance

iOS 7向けにアプリを設計するときのAppleが掲げる三大テーマは:

服従(Deference)* UIはユーザによるコンテンツの理解やコンテンツとの対話を助けるが、コンテンツと競合しない。

明晰(Clarity) テキストはどのサイズでも読みやすく、アイコンは精密で明快、装飾は目立たず適切、そして機能性を重視したデザイン。

深遠(Depth)** ヴィジュアルレイヤ(層化UI)とそのリアルな動きがユーザの満足と理解を高める。

〔訳者注: *Deference, 三歩下がってコンテンツの邪魔をせずのような、控えめな態度。**Depth, はてブsecurecatさんのご忠告に従うと「奥行き」、ただここは、全体的に文学調・哲学調にしてみたかったので。〕

中でもAppleがとくに強調している新機能が動的タイプ(Dynamic Type)だ。それによりiOS 7の中ではテキストレイアウトの多くが自動化される。Appleはまた、iOS 7向けのアプリは新しいデザイン成分、とくに透明なステータスバー、ナビゲーションバー、タブバー、ツールバー、検索バー、スコープバー、デート(日付)ピッカーなどをサポートしてくれ、と言っている。

iOS Human Interface Guidelines_ Designing for iOS 7

さらにまたAppleは、アプリがiOS 7にふさわしい“くっきりとした美しいUIとなめらかな動き”を実現して、いかにもAppleふうのアプリになるためのコツを二つほど述べている。その第一は、全画面重視。はめ込み的なレイアウト(inset)やフレームを使わずに、アプリのコンテンツが“画面の端から端までを占領する”こと(上図)。第二は、物理的なリアリズム(ベゼル、グラデーション、ドロップシャドウなど)を廃すること。その理由は、それらはUIを重くし、コンテンツよりも目立ってしまうことがあるからだ。Appleは曰く、“UIはあくまでも脇役に徹するべきである”。そして、アプリは“明快さを優先し”、ホワイトスペースが多くて、色はUIを単純化するためにのみ、使うこと。

そのほか、Appleがデベロッパに多用してほしいと思っているUI成分は、半透明な背景とトランジションの強調により、複数のコンテンツの深度と階層を表現するやり方…層化UI…だ(下図)。

uikit_ui_elements_2x

このガイドはiOS 7のドキュメンテーションでありながら、必要ならば当分の間はiOS 6ふうのデザインを維持してもよい、と言っている。そのためXcode 5は、アプリの複数のバージョンの管理をサポートし、Auto Layoutを使った場合とそうでない場合を比較できる。

iOS Developer Library

以下に、Appleが主張するiOS 7向けアプリ開発の原則を、箇条書きにしてみた:

  1. アプリのコンテンツが半透明のUI成分(バーやキーボードなど)や透明なステータスバーの下に見えること。iOS 7では、ビューコントローラは全画面レイアウトを使う(ビューコントローラの使い方は、Using View Controllers)。
  2. カスタムバーののボタンアイコンのデザインを変える。iOS 7ではバーのボタンアイコンは軽くてスタイルも異なる。
  3. ふちなしボタンに備える…ボタンのバックグラウンド画像をやめて、レイアウトも再検討する。
  4. UI成分のサイズや位置をコード中で具体的に指定することをやめて、システム提供の値からそれらが自動生成されるようにする。レイアウトを変えたときにアプリが自動的に適応するためにAuto Layoutを使う(Auto Layoutの使い方は、Cocoa Auto Layout Guide)。
  5. アプリ中の、UIKitコントロールやビューの寸法・スタイル等が変わるとレイアウトや外見が変わるような場所を見直す。たとえば、スイッチは幅が広いし、テーブルのグループにはインセットがなく、プログレスビューは前よりも薄い。個々のUI成分に関する詳しい情報は、Bars and Bar ButtonsControlsContent ViewsTemporary Viewsを見よ。
  6. Dynamic Typeを使え。iOS 7では、アプリ内で今見ているテキストのサイズをユーザが調節できる。ユーザのそんなアクションにアプリが対応できるためには、Dynamic Typeを採用しなければならない。詳しくは、Using Fontsを。
  7. アプリ独自のタッチ処理を書いたときなどには、iOS 7の新機能であるControl Centerのジェスチャーやナビゲーションコントローラの‘スワイプして戻る’ジェスチャなどと衝突しないよう気をつける。
  8. ドロップシャドウやグラデーション、ベゼルなどの使用をやめる。iOS 7の美学はスムースさと層化(半透明化)にあるので、物理的な実物に見えるようなUI成分は重視されない。影つきとか、立体感とか、そういう物理的実物感は再検討を要する〔つまり、やめてほしい〕。
  9. 必要なら、アプリをiOS 6のベストプラクティスにアップデートする(Auto Layoutやストーリーボードなど)。それにより、アプリが非推奨APIを使っていないようにする。

iOS 7デザインガイド本体は、ここにある。

[原文へ]
(翻訳:iwatani(a.k.a. hiwa))

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

フォロー

新しい投稿をメールで受信しましょう。

現在350人フォロワーがいます。