プログラマとデザイナが共有すべきUIに関するAndroidの10の機能・改

@youten_redo（ようてん）2011.10.01

デ部NT用再構成版です。元資料はぐぐってね。

1

自己紹介

� ようてん （@youten_redo）

� IT系リーマンです。Androidの仕事をしています。

� LTだいすき

� つくったアプリ

� どれもマイナーでごめんなさい

他

本（元）資料のターゲット

3

みんなA社仕様：A社 プログラム：B社

デザイン：C社

分担を明確にする際に

便利かも いらないかも

4

仕様：A社 プログラム：B社

デザイン：C社

使用タイミング

・選定時に・発注前に・要件説明時に（・社内教育に）

5

仕様：A社

逆ではあまり役立たないかも

プログラム：B社

デザイン：C社

×デザインありきのUIをどう実現したらいいのか

○Androidが得意としているものを組み合わせて高い効果を狙う

6

UIに関するAndroidの10機能

� プログラマは当然押さえておきたい

� デザイナもさらっとは理解しておきたい

� できればプログラマがデザイナに説明しておきたい

7

注意

� 「デザイン」の話ではありません。

� 押しやすいボタン配置とか

� 適切なフォントサイズとかマージンとか

� そういうのは他で。

8

UIに関するAndroidの10機能

1. センタリング・アライン・マージン/パディング

2. 透過PNG

3. 均等配置・比率配置・HTMLの<table>と桁揃え

4. 通常時・押した時・無効時のボタン画像自動切り替え

5. タイトルバーのカスタマイズ

6. UI要素と画面遷移のアニメーション

7. タイマー

8. フォントのカスタマイズ

9. サイズやピクセル密度の違うデバイスのためのしくみ

10.アイコンとウィジェットのサイズ

9

抜粋

1. センタリング・アライン・マージン/パディング

2. 透過PNG

3. 均等配置・比率配置・HTMLの<table>と桁揃え

4. 通常時・押した時・無効時のボタン画像自動切り替え

5. タイトルバーのカスタマイズ

6. UI要素と画面遷移のアニメーション

7. タイマー

8. フォントのカスタマイズ

9. サイズやピクセル密度の違うデバイスのためのしくみ

10.アイコンとウィジェットのサイズ

1. センタリング・アライン・マージン/パディング使えます

11

1. センタリング・アライン・マージン/パディング使えます

� センタリングや上下左右寄せ、マージン/パディングがほぼ全てのUI要素に対して指定できます。

文字列を中央に配置したい際に

左端から200ピクセルとかじゃなくて

中央という指定が可能です。

ABCDEFGH

ABCDEFGH layout_marginLeft="200px"

ABCDEFGH layout_gravity="center_horizontal"

12

1. センタリング・アライン・マージン/パディング使えます

右寄せ＋ちょっとマージンあけるというのも可能です。

� なるべく論理的にデザインして欲しいですし、プログラマも論理的に解釈すべきです。

ABCDEFGH layout_gravity="right" layout_margin="10dip"

2. 透過PNG使えます

14

2. 透過PNG使えます

� 透過色がインデックスカラーで指定できる8-PNGも、各ピクセル毎に透明度が指定できるARGB32bitカラーの24-PNGも使えます。

� よって、素材は2次元のタイル張りではなくで、重ね合わせ前提が望ましいです。

15

2. 透過PNG使えます

たとえば、以下の様なUIの素材は

こうじゃなくて

こうがいいということです。

ABCDEFGH

ABCDEFGH

4. 通常時・押した時・無効時のボタン画像自動切り替えできます

17

4. 通常時・押した時・無効時のボタン画像自動切り替えできます

� ボタンの画像は入れ替えが可能です。

� 押された時の画像も入れ替えが可能です。

� その他、無効化時(enabled="false")や、2値トグルスイッチのon/off時画像など、いくつかの状態が定義されており、それらの状態にあわせて画像を入れ替えることが可能です。

Submit Submit

Submit Submit

18

4. 通常時・押した時・無効時のボタン画像自動切り替えできます

� ボタンの状態によって画像を入れ替えるのにコードを書く必要はなく、XMLだけでOKです。

<?xml version="1.0" encoding="UTF-8"?><selector

xmlns:android="http://schemas.android.com/apk/res/android"><item

android:state_pressedstate_pressedstate_pressedstate_pressed="true"android:drawable="@drawable/button_image_pressed" />

<itemandroid:drawable="@drawable/button_image_normal" />

</selector>

7. タイマー使えます

20

�Timerというとプログラマの感覚では「指定msec.後に特定処理をキック」だと思いますが、それも含めた、一般的な「タイマー」は一通り使えます。

�「画面を表示してから3秒後に」みたいなタイマー使えます。

�「画面を表示している間、30秒に1回に」みたいなタイマー使えます。

7. タイマー使えます

ロゴABCDEFGH

スプラッシュスクリーンに…

…

ABCDEFGH

ロゴ

周期的なアクセントに…

21

�「今○○時だったら、◇◇」みたいな時刻ドリブンのイベントできます。

�時刻ごとに背景を変えるとか、メッセージを変えるとか。

�「バックグラウンドで1時間に1回」みたいな定期処理できます。

�でもメモリ不足時などには勝手に終了してしまうので、必須の処理にはあまり向いていません。

7. タイマー使えます

8. フォントは少しカスタマイズできます

23

� フォントのサイズ・色・透明度などが変更できます。�ふつうに使える

• サイズ・透明度込みの色（#AARRGGBB）

�分かりにくいけど使える

• 影の色・影のサイズ・影の方向・横方向倍率

• 袋文字とかは出来ないのが残念です。（影のサイ

ズを大きくすると、勝手にブラーがかかってしまう）

�あまり期待できない

• BoldとかItalicとかserif/sans-serifとか

monospaceも定義はありますが、それらの指定に

より見た目がきちんと変化するシステムフォントが

組み込まれていないこともよくあります。

8. フォントは少しカスタマイズできます

Droid_Robot fontの例

24

� アプリ内にフォントを埋め込むこともできます。�英数字フォントやシンボルフォントにて、アクセントに使うのが妥当と思

われます。

�日本語フォントはサイズが大きいので使い方には注意してください。

• 本体数百kバイトのアプリに、5Mバイトのフォントデータはアンバランスですよね

…？

• 固定文字列が大半なので、画像化した方がデータサイズ的にも優しかったりし

ませんか？

• ライセンス等、利用方法も本当に問題ない？

8. フォントは少しカスタマイズできます

9. ディスプレイサイズ・ピクセル密度と単位

26

� Androidは様々なディスプレイサイズ・ピクセル密度のデバイスに対応するために、それらの差分を吸収するための仕組みがあります。

�実際のところは仕組みがあるだけで、きちんと対応するにはそれなりの手間がかかります。

� ディスプレイサイズやピクセル密度別のリソースをディレクトリ（フォルダ）ごとに指定することができます。

�例

• drawable：共通のリソース置き場

• drawable-hdpi：高ピクセル密度端末用リソース置き場

• drawable-mdpi：中ピクセル密度端末用リソース置き場

• drawable-ldpi：低ピクセル密度端末用リソース置き場

9. ディスプレイサイズ・ピクセル密度と単位

27

� 種々のサイズを指定するのに、物理的なpx（ピクセル）ではなく、dp(dip, Density-independent Pixels)という画面密度に基づいた抽象的な単位を使うのが望ましいです。

�たとえば「10dip」という指定をすれば、ldpiの端末でもmdpiの端末でもhdpiの端末でもだいたい見た目の大きさが同じぐらいになる様なサイズを指定したことになります。

� ユーザが設定したフォントサイズによって自動でサイズが変わる、spという単位もあります。

�テキスト部分にどうぞ。

� ピクセルそのものを指すpxもあります。

�1pxにこだわりたいあなたへ。

9. ディスプレイサイズ・ピクセル密度と単位

28

� なぜ物理的（○○ピクセル）じゃなくて、論理的（右からちょっと離して）にする必要があるのか？

� １つのレイアウトで、解像度（ピクセル数）の違う、複数のデバイスに対応する必要があるからです。

論理的な配置

29

実際の解像度の例

� WVGA・FWVGA・qHDで今のところ（※）大半がサポートされます。

�WVGA(480x800）の例

• Galaxy SII SC-02C：normal-hdpi

�FWVGA(480x854）の例

• Xperia acro SO-02C：normal-hdpi

�qHDの（540x960）の例

• AQUOS PHONE SH-12C：normal-hdpi

� 有名な罠3例

� IS03： ダブルVGA（640x960）でnormal-xhdpi

�001DL（DELL Streak）：WVGA（480x800）でlarge-mdpi

�SC-01C(Galaxy Tab)：600x1024でlarge-hdpi

� ※ただしGingerbreadまでに限る

「３種とも分類が一緒」＝「1つのlayout.xmlで3解像度に対応する必要がある」

30

１つのレイアウトで近しい解像度はカバー

�「横480-540・縦800-960のUI」がカバー可能。

�9patchと均等配置

�縦方向に可変長なコンテンツ領域

9patchのPNGまたはXMLベースで横方向に可変長に。

縦方向に可変長なコンテンツ領域。

画面領域中央表示による、固定サイズのコンテンツ配置。

均等配置・適切なマージン設定により、操作UI部分であっても横方向の可変性を確保。

脱線

32

� １１．音鳴らせるよ。

�バイブも忘れないで。

� １２．「OK/Cancel」確認ダイアログ簡単に出せるよ。

�Undoが不可能な操作の前には出したい。

� １３．「ウェイティング」「プログレスバー」ダイアログ簡単に出せるよ。

�ユーザをちょっとでも待たせる際には、処理中であることを示す。

�BACKキーでのキャンセルもできればがんばって。

脱線

まとめ

34

画像素材レベルと使い分け（レベル0・1）

ABCDEFGH

固定サイズのpngやjpg（あるいはaiやpsd）にて提供される。プログラマがレタッチソフトで切り出すことが前提でコストが高く、慣れない作業でピクセルずれや補完リサイズによるジャギーが発生しがちになる。正直オススメできない。

1枚絵をタイル切りした素材が提供される。切り出しサイズによるマジックナンバー問題によりコードの素材依存度が上がり、改造コストが高くなる。素材作成側のコストが低いため、紙芝居デモ等初期検討向けには有効。

レベル0 レベル1

35

画像素材レベルと使い分け（レベル2・3）

適切なセンタリング・アライン・マージン調整を前提とした素材群が提供される。最終的な調整がXMLでできる様になり、フォント等システムマターの問題への対応コストが下がる。機種・解像度が1,2種程度に限定できる際に有効。

9patchに対応、アプリへのフォント埋め込みまで検討した最高レベルの素材。ただしここまでやるには双方に相当の知識が必要な上しっかりとした意識あわせが必要。多デバイス展開が戦略上必須であれば採用を検討したい。

bauhaus93.ttf

レベル3

ABCDEFGH

レベル2

36

まとめ

1. まずお互いをよく知ろう

� スキルの確認。Androidはまだまだ枯れた技術ではないし、変化し続けている。

2. 必要があれば勉強会を開催

� 「他社メンバをわざわざ教育なんて…」ではなくて、信頼によるコミュニケーション効率のUP等、レベル差があるなら、それをうまく利用するのが大事。

3. 「どの期間・期日で」「どのレベルまでやるか」意識あわせ

� 過剰品質は不幸の元。目的に合わせた選択を。