2013年11月4日月曜日

"Android Design in Action: New in Android 4.4" 動画番組の概要 (日本語)

Android Design in Action 番組 "New in Android 4.4" にて、 Android 4.4 (KitKat) の公開と同時に行われた Android Design ガイドラインの更新の概要について、 New York オフィスの Roman Nurik, Adam Koch, および London オフィスの Nick Butcher が解説しています。

以下に、この番組の内容を日本語で要約して お伝えしたいと思います。 お役立ていただけましたら幸いです。

(なお、動画を視聴いただく際、YouTube の字幕機能をご利用いただくことで、話されている英語の字幕表示をご覧いただくこともできます (音声認識技術により生成されているため、一部正確ではない場合がある旨ご了承ください)。 こちらもあわせてご活用ください。)

Nexus 5 について [再生時刻 00:47]
  • リソース (レイアウト) の制作にあたって、下記の仕様をご理解いただけますようにお願いいたします。
  • 画面サイズは dp (Device-independent pixels) で言えば 640x360 dp です。 これは Galaxy Nexus と同じで、Nexus 4 よりは少しだけ横幅が狭くなっています。
  • Logical density (論理解像度) は 480 dpi です。 これは xxhdpi 解像度と分類されます。
  • Nexus 5 に限らず今後の xxhdpi 解像度端末への対応のために、xxhdpi (480 dpi) 解像度向けのリソース素材 (ビットマップ) を準備していただけるようにお願いいたします。

Branding: color [再生時刻 03:28]
  • 以前のバージョンの Android プラットフォームでは、システム UI (ステータスバー、デフォルトのボタンのハイライト等) に「青」が利用されていました。 これは場合によっては、各アプリ自身のブランド表現と衝突する可能性がありました。 KitKat (Android 4.4) では、ユーザーが端末を操作しているときの アプリのブランド表現をより尊重するために、システムのデフォルトの UI での「青」の利用を減らし、よりニュートラルな、彩度のない白黒のグレー階調が より多くの場面で採用されています。
  • Android Design ガイドラインに、 "Your Branding" という節が新しく追加されました。 従来、アプリ内の色の表現については、Android 標準の Holo テーマとのバランスが良く見えるようにしながらアプリ自身のブランドを適切に表現するカラーパレットを準備することが推奨されていましたが、今回それが より明文化された形でガイドラインに追記されています。 一つの例として Google Play Music アプリでは、ハイライトやアンカーリンクの表現に (従来の Holo テーマの青ではなく) オレンジ色が採用されています。
  • Holo テーマとの整合性が良いカラーパレットの制作を支援するために、 android-holo-colors.com というツールがコミュニティ有志の人により提供されています。
  • [参照] Your Branding - Android Design Guideline

Branding: icon [再生時刻 06:24]
  • Android Design ガイドラインの "Your Branding" 節において、アイコン表現についてのガイドラインが追加されています。
  • アイコンの制作においては、 visual styling と iconography を区別することが重要です。 visual styling とは、線の太さ、角の丸み具合、影やグラデーションの表現。 iconography とは、ここでは意味を図形で表現することを指します。
  • 新しいガイドラインは、visual styling についてはアプリ固有の表現を尊重すべきだが、iconography のうち Android プラットフォーム標準の表現が存在しているもの (例: 共有、更新、など) については Android プラットフォーム標準の表現に合わせたほうがよい、と定めています。 他のプラットフォームの iconography をそのまま Android プラットフォームに持ち込むことは、ユーザー体験の混乱につながります。
  • 例として、ここでは「アップロード」「Web で見る」「共有」という 3 種類の表現について考えてみます。 上段が iOS 7 プラットフォームで利用されているアイコン表現です。 これを何も考えずにそのまま Android プラットフォームでも全て利用してしまうのではなく、このうちの「共有」アイコンについて、Android プラットフォーム標準の iconography 表現にあわせて下段のようなデザインにしていただくことで、Android におけるユーザー体験の混乱を避けることができます。
  • Android プラットフォーム標準の iconography 表現にもとづいた制作については、 Action Bar Icon Pack の無料ダウンロード素材 (制作にご活用いただける Adobe Illustrator ファイルも含まれています) も是非ご活用ください。
  • [参照] Your Branding - Android Design Guideline

Touch feedback [再生時刻 08:55]
  • さきほどもご説明しましたが、KitKat では、システム標準の UI において青の利用が減り、よりニュートラルな色 (白黒グレー階調) が利用される場面が増えています。
  • たとえば、システム標準のボタンの "Pressed" 状態のハイライト表現は Android 4.3 においては青でしたが、Android 4.4 においては不透過度 10% (透過度 90%) の黒が採用されています。
  • これと同様に、アプリ内の Touch feedback をデザインしていただく際に、(従来一般的であった青ではなく) ニュートラルで subtle (控えめ) な表現、またはアプリ自身のブランド表現のカラーパレットを尊重した表現にしていただくことを推奨します。
  • [参照] Touch feedback - Android Design Guideline

Full screen [再生時刻 10:37]
  • Android Design ガイドラインに、 フルスクリーンモード (全画面モード) の利用についての新しいガイドラインが追加されました。
  • フルスクリーンモードには、大きく分けて「リーン・バック (Lean back; 遠景)」「イマーシブ (Immersive; 近景、没入)」の 2 つの利用シナリオがあります。
  • リーン・バック (遠景) のシナリオというのは、たとえば YouTube ビデオを見たりするときのことです。 このシナリオでは、コンテンツそのものを閲覧しているときには ユーザーは普通なにも操作を行うことはありません。 ユーザーが画面をタッチした時には、標準のシステム UI やアプリ自身のコントロール UI (Action Bar など) が表示されます。 コンテンツの閲覧を開始してしばらくすると、通常それらはフェード・アウトします。
  • イマーシブ (近景、没入) のシナリオというのは (再生時刻 12:42)、たとえばゲームや電子書籍リーダーのような利用シーンのことです。 このシナリオでは、ユーザーがコンテンツを閲覧している間、ユーザーはアクティブに画面を操作しています。 通常、ユーザーが画面をタッチしただけでは標準のシステム UI やアプリ固有のコントロール UI (Action Bar など) は表示されず、ユーザーが 画面の最上端や最下端をスワイプしたときにそれらが表示されます。 このようなアプリでは最初に全画面モードになったときにユーザーが混乱しないように、画面の最上端や最下端をスワイプできることについて吹き出しなどで説明を表示するというのもひとつのアイディアです。 一方で、 Google Play Books リーダーのように、フルスクリーンモードになってからもユーザーは (イマーシブな状態で) アクティブに画面を操作できるが、画面を軽くタッチすると各種のバーが再度表示される、というような実装方法もあります。
  • Android Design ガイドラインの、上記の 2 つのシナリオについての新しい推奨事項をご確認いただけますようにお願いいたします。
  • [参照] Full screen - Android Design Guideline

Translucent bars [再生時刻 14:50]
  • Android 4.4 (KitKat) では、システムバー (画面最上部の、時刻などを表示する領域) やナビゲーションバー (画面最下部の、ホームボタンやバックボタンなどを表示する領域) の背後の領域に、アプリがコンテンツを描画することができます。
  • この機能は、ライブ壁紙アプリのようなアプリだけではなく、通常のアプリにおいても利用できます。
  • このサンプルアプリでは、システムバー、ナビゲーションバー、Action Bar の背後に、地図が透けて表示されています。 このような表現により、ご提供いただくアプリのユーザー体験の没入感 (イマーシブ度) を向上させていただくことができます。
    • ちなみに、最近の Google Play Services において、Maps API の機能が大幅に強化されております。 その強化機能の一つに、Map の描画領域の中に padding を入れることができる (コンパスなど、Maps API が独自に提供している UI がシステムバーや Action Bar と重ならないようにする) という機能もあり、このような場面において利用することができます。
    • [参照] Google Maps Android API - Android Developers
  • このモードのとき、標準のシステムバー、ナビゲーションバーの背後には、画面の端にかけて透過度のグラデーションが控えめに追加されます。
  • このモードが 実際にどのようなアプリケーションで役立つのかという点については まだ実験段階である旨、ご了承いただけますようにお願いいたします。 どちらかというと、このモードはライブ壁紙のようなアプリのほうに適しており、一般の Action Bar を利用したアプリにおいては あまり利用すべきではないのではないか、という意見もあります。

Launcher icons [再生時刻 18:00]
  • 多くの (電話サイズの) 端末において、Launcher icon は通常 縦横 48dp の大きさで表示されます。
  • Nexus 5 のホーム画面においては、 Launcher icon は 48dp よりも約 25% 大きな約 60dp の大きさで表示されます。
  • このため、Launcher icon に関してのみ、端末そのものの論理解像度 (xxhdpi; 480dpi) よりも一段階高い解像度である xxxhdpi (640dpi) のアイコン素材 (192x192 px) をご提供いただくことをおすすめします。
  • これは従来、多くのタブレット端末 (Nexus 10 など) において、ホーム画面における Launcher icon においては端末そのものの論理解像度 (例: xhdpi) よりも一段階高い論理解像度 (xxhdpi) のアイコン素材をご提供いただくことが推奨されていたのと同様です。 今後、同様の配慮が必要になる電話サイズ (4 ~ 6 inch) の端末が増えてくる可能性がある点について、ご理解いただけますようにお願いいたします。
  • [参照] Iconography - Android Design Guideline

New gestures [再生時刻 19:55]
  • Android Design ガイドラインに、新しく 2 種類の標準的な推奨ジェスチャ操作が 追記されました。
  • Double touch ジェスチャ : ユーザーがコンテンツを二度続けてタップ (ダブルタッチ) した場合には、その部分のコンテンツを拡大表示してください。 これは例えば、Chrome for Android において既に提供されていますが、他にもニュースリーダーや雑誌リーダーなどのアプリにおいて推奨されています。
  • Double touch drag ジェスチャ : ユーザーがコンテンツをダブルタッチした直後にドラッグ操作を行った場合には、それはコンテンツの拡大 (上へのドラッグ)・縮小 (下へのドラッグ) 操作として対応してください。 これは例えば、Google Maps において既に提供されています。
  • これらのジェスチャ操作は、とくに端末を片手で操作している場合に 便利なジェスチャとして推奨されています。 実装をシンプルにするために、 Support Library が更新されましたので、ご活用いただけますようにお願いいたします。
  • [参照] Gestures - Android Design Guideline

Screen recording [再生時刻 22:40]
  • この機能そのものは UI/UX デザインとは関連がありませんが、高品質な画面録画を行うために 便利な機能が Android 4.4 (KitKat) において追加されました。 特殊なハードウェアは必要なく、シンプルな adb コマンドを用いて画面を録画していただくことができます。
  • デフォルトでは、 Ctrl-C が押されるまで、または 3 分間が経過するまでの間 録画されます。 録画時間は、 --time-limit オプションで変更できます。
  • また、開発者向けオプションの "Show Touches" をご利用いただくことで、ユーザーの画面上の操作 (タッチ位置) も同時に録画していただくことができます。
  • [参照] Recording a device screen - Android Debug Bridge

Scenes and transitions [再生時刻 24:40]
  • Android 4.4 (KitKat) には新たなアニメーション用 API が追加されました。 これは、 Scenes and transitions、 または Transitions framework と呼ばれています。
  • 開発者は、アプリ内で「シーン」を定義することができます。 2 つのシーンが切り替わる間のアニメーション表示が、プラットフォームにより自動的に計算され、それが高速に描画されます。
  • また、特定の ViewGroup 内への変更を自動的にアニメーションする機能も提供されています。
  • これにより、たとえば Mac の Keynote アプリの "Magic Move" エフェクトのような表現の実装がシンプルに できるようになっています。
  • Chet Haase が解説している DevBytes 動画番組を是非ご覧ください。
  • [参照] DevBytes: Android 4.4 Transitions - YouTube
  • [参照] android.transition - Android Developers