デ部NT用再構成版です。       元資料はぐぐってね。プログラマとデザイナが共有すべきUIに関するAndroidの10の機能・改             @youten_redo(ようてん)                       20...
自己紹介ようてん (@youten_redo)IT系リーマンです。Androidの仕事をしています。LTだいすきつくったアプリ                              他 どれもマイナーでごめんなさい             ...
本(元)資料のターゲット
分担を明確にする際に仕様:A社 プログラム   みんなA社       :B社   デザイン    :C社    便利かも      いらないかも                       3
使用タイミング仕様:A社 プログラム       :B社    ・選定時に              ・発注前に              ・要件説明時に              (・社内教育に)   デザイン    :C社         ...
逆ではあまり役立たないかも仕様:A社   デザイン   ×デザインありき         :C社   のUIをどう実現し               たらいいのか               ○Androidが得意  プログラム        ...
UIに関するAndroidの10機能プログラマは当然押さえておきたいデザイナもさらっとは理解しておきたいできればプログラマがデザイナに説明しておきたい                         6
注意「デザイン」の話ではありません。押しやすいボタン配置とか適切なフォントサイズとかマージンとかそういうのは他で。                     7
UIに関するAndroidの10機能1. センタリング・アライン・マージン/パディング2. 透過PNG3. 均等配置・比率配置・HTMLの<table>と桁揃え4. 通常時・押した時・無効時のボタン画像自動切り替え5. タイトルバーのカスタマイ...
抜粋1. センタリング・アライン・マージン/パディング2. 透過PNG3. 均等配置・比率配置・HTMLの<table>と桁揃え4. 通常時・押した時・無効時のボタン画像自動切り替え5. タイトルバーのカスタマイズ6. UI要素と画面遷移のアニ...
1. センタリング・アライン・マージン/パディング使えます
1. センタリング・アライン・マージン/パディン  グ使えます  センタリングや上下左右寄せ、マージン/パディングがほぼ全  てのUI要素に対して指定できます。文字列を中央に配置したい際に     ABCDEFGH左端から200ピクセルとかじゃ...
1. センタリング・アライン・マージン/パディン  グ使えます右寄せ+ちょっとマージンあけるというのも可能です。       ABCDEFGH   layout_gravity="right" layout_margin="10dip" なるべ...
2. 透過PNG使えます
2. 透過PNG使えます透過色がインデックスカラーで指定できる8-PNGも、各ピクセル毎に透明度が指定できるARGB32bitカラーの24-PNGも使えます。よって、素材は2次元のタイル張りではなくで、重ね合わせ前提が望ましいです。      ...
2. 透過PNG使えますたとえば、以下の様なUIの素材は ABCDEFGHこうじゃなくてこうがいいということです。                 ABCDEFGH                            15
4. 通常時・押した時・無効時のボタン画像自動切り替えできます
4. 通常時・押した時・無効時のボタン画像自 動切り替えできますボタンの画像は入れ替えが可能です。   Submit      Submit押された時の画像も入れ替えが可能です。   Submit      Submitその他、無効化時(ena...
4. 通常時・押した時・無効時のボタン画像自   動切り替えできますボタンの状態によって画像を入れ替えるのにコードを書く必要はなく、XMLだけでOKです。<?xml version="1.0" encoding="UTF-8"?><select...
7. タイマー使えます
7. タイマー使えますTimerというとプログラマの感覚では「指定msec.後に特定処理をキック」だと思いますが、それも含めた、一般的な「タイマー」は一通り使えます。「画面を表示してから3秒後に」みたいなタイマー使えます。       ABCD...
7. タイマー使えます「今○○時だったら、◇◇」みたいな時刻ドリブンのイベントできます。 時刻ごとに背景を変えるとか、メッセージを変えるとか。「バックグラウンドで1時間に1回」みたいな定期処理できます。 でもメモリ不足時などには勝手に終了してし...
8. フォントは少しカスタマイズできます
8. フォントは少しカスタマイズできますフォントのサイズ・色・透明度などが変更できます。 ふつうに使える • サイズ・透明度込みの色(#AARRGGBB) 分かりにくいけど使える • 影の色・影のサイズ・影の方向・横方向倍率 • 袋文字とかは出...
8. フォントは少しカスタマイズできますアプリ内にフォントを埋め込むこともできます。 英数字フォントやシンボルフォントにて、アクセントに使うのが妥当と思 われます。 日本語フォントはサイズが大きいので使い方には注意してください。 • 本体数百k...
9. ディスプレイサイズ・ピクセル密度と単位
9. ディスプレイサイズ・ピクセル密度と単位Androidは様々なディスプレイサイズ・ピクセル密度のデバイスに対応するために、それらの差分を吸収するための仕組みがあります。 実際のところは仕組みがあるだけで、きちんと対応するにはそれなりの 手間...
9. ディスプレイサイズ・ピクセル密度と単位種々のサイズを指定するのに、物理的なpx(ピクセル)ではなく、dp(dip, Density-independent Pixels)という画面密度に基づいた抽象的な単位を使うのが望ましいです。 たとえ...
論理的な配置なぜ物理的(○○ピクセル)じゃなくて、論理的(右からちょっと離して)にする必要があるのか?1つのレイアウトで、解像度(ピクセル数)の違う、複数のデバイスに対応する必要があるからです。                         ...
実際の解像度の例WVGA・FWVGA・qHDで今のところ(※)大半がサポートされます。 WVGA(480x800)の例  • Galaxy SII SC-02C:normal-hdpi FWVGA(480x854)の例             ...
1つのレイアウトで近しい解像度はカバー                          9patchのPNGまたはXMLベースで                          横方向に可変長に。「横480-540・縦800-960のUI」...
脱線
脱線11.音鳴らせるよ。 バイブも忘れないで。12.「OK/Cancel」確認ダイアログ簡単に出せるよ。 Undoが不可能な操作の前には出したい。13.「ウェイティング」「プログレスバー」ダイアログ簡単に出せるよ。 ユーザをちょっとでも待たせる...
まとめ
画像素材レベルと使い分け(レベル0・1)             固定サイズのpngやjpg(あるいはai      レベル0   やpsd)にて提供される。          レベル1             プログラマがレタッチソフトで切り...
画像素材レベルと使い分け(レベル2・3)            適切なセンタリング・アライン・マー     レベル2   ジン調整を前提とした素材群が提          レベル3            供される。               ...
まとめ1. まずお互いをよく知ろう  スキルの確認。Androidはまだまだ枯れた技術ではないし、  変化し続けている。2. 必要があれば勉強会を開催  「他社メンバをわざわざ教育なんて…」ではなくて、信頼に  よるコミュニケーション効率のUP...
Upcoming SlideShare
Loading in …5
×

(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能

2,707 views

Published on

Xi(Android)タブレットお披露目会 for Developer内のOpenデ部の1セッションとして発表した際の資料です。元資料のだいたい抜粋版です。

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,707
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
12
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

(デ部発表用抜粋版)プログラマとデザイナが共有すべきUIに関するAndroidの10の機能

  1. 1. デ部NT用再構成版です。 元資料はぐぐってね。プログラマとデザイナが共有すべきUIに関するAndroidの10の機能・改 @youten_redo(ようてん) 2011.10.01
  2. 2. 自己紹介ようてん (@youten_redo)IT系リーマンです。Androidの仕事をしています。LTだいすきつくったアプリ 他 どれもマイナーでごめんなさい 1
  3. 3. 本(元)資料のターゲット
  4. 4. 分担を明確にする際に仕様:A社 プログラム みんなA社 :B社 デザイン :C社 便利かも いらないかも 3
  5. 5. 使用タイミング仕様:A社 プログラム :B社 ・選定時に ・発注前に ・要件説明時に (・社内教育に) デザイン :C社 4
  6. 6. 逆ではあまり役立たないかも仕様:A社 デザイン ×デザインありき :C社 のUIをどう実現し たらいいのか ○Androidが得意 プログラム としているものを 組み合わせて高 :B社 い効果を狙う 5
  7. 7. UIに関するAndroidの10機能プログラマは当然押さえておきたいデザイナもさらっとは理解しておきたいできればプログラマがデザイナに説明しておきたい 6
  8. 8. 注意「デザイン」の話ではありません。押しやすいボタン配置とか適切なフォントサイズとかマージンとかそういうのは他で。 7
  9. 9. UIに関するAndroidの10機能1. センタリング・アライン・マージン/パディング2. 透過PNG3. 均等配置・比率配置・HTMLの<table>と桁揃え4. 通常時・押した時・無効時のボタン画像自動切り替え5. タイトルバーのカスタマイズ6. UI要素と画面遷移のアニメーション7. タイマー8. フォントのカスタマイズ9. サイズやピクセル密度の違うデバイスのためのしくみ10.アイコンとウィジェットのサイズ 8
  10. 10. 抜粋1. センタリング・アライン・マージン/パディング2. 透過PNG3. 均等配置・比率配置・HTMLの<table>と桁揃え4. 通常時・押した時・無効時のボタン画像自動切り替え5. タイトルバーのカスタマイズ6. UI要素と画面遷移のアニメーション7. タイマー8. フォントのカスタマイズ9. サイズやピクセル密度の違うデバイスのためのしくみ10.アイコンとウィジェットのサイズ 9
  11. 11. 1. センタリング・アライン・マージン/パディング使えます
  12. 12. 1. センタリング・アライン・マージン/パディン グ使えます センタリングや上下左右寄せ、マージン/パディングがほぼ全 てのUI要素に対して指定できます。文字列を中央に配置したい際に ABCDEFGH左端から200ピクセルとかじゃなくて ABCDEFGH layout_marginLeft="200px"中央という指定が可能です。 ABCDEFGH layout_gravity="center_horizontal" 11
  13. 13. 1. センタリング・アライン・マージン/パディン グ使えます右寄せ+ちょっとマージンあけるというのも可能です。 ABCDEFGH layout_gravity="right" layout_margin="10dip" なるべく論理的にデザインして欲しいですし、プログラマも論 理的に解釈すべきです。 12
  14. 14. 2. 透過PNG使えます
  15. 15. 2. 透過PNG使えます透過色がインデックスカラーで指定できる8-PNGも、各ピクセル毎に透明度が指定できるARGB32bitカラーの24-PNGも使えます。よって、素材は2次元のタイル張りではなくで、重ね合わせ前提が望ましいです。 14
  16. 16. 2. 透過PNG使えますたとえば、以下の様なUIの素材は ABCDEFGHこうじゃなくてこうがいいということです。 ABCDEFGH 15
  17. 17. 4. 通常時・押した時・無効時のボタン画像自動切り替えできます
  18. 18. 4. 通常時・押した時・無効時のボタン画像自 動切り替えできますボタンの画像は入れ替えが可能です。 Submit Submit押された時の画像も入れ替えが可能です。 Submit Submitその他、無効化時(enabled="false")や、2値トグルスイッチのon/off時画像など、いくつかの状態が定義されており、それらの状態にあわせて画像を入れ替えることが可能です。 17
  19. 19. 4. 通常時・押した時・無効時のボタン画像自 動切り替えできますボタンの状態によって画像を入れ替えるのにコードを書く必要はなく、XMLだけでOKです。<?xml version="1.0" encoding="UTF-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed state_pressed="true" state_pressed android:drawable="@drawable/button_image_pressed" /> <item android:drawable="@drawable/button_image_normal" /></selector> 18
  20. 20. 7. タイマー使えます
  21. 21. 7. タイマー使えますTimerというとプログラマの感覚では「指定msec.後に特定処理をキック」だと思いますが、それも含めた、一般的な「タイマー」は一通り使えます。「画面を表示してから3秒後に」みたいなタイマー使えます。 ABCDEFGH ABCDEFGH ロゴ ロゴ スプラッシュスクリーンに…「画面を表示している間、30秒に1回に」みたいなタイマー使えます。 周期的なアクセントに… … 20
  22. 22. 7. タイマー使えます「今○○時だったら、◇◇」みたいな時刻ドリブンのイベントできます。 時刻ごとに背景を変えるとか、メッセージを変えるとか。「バックグラウンドで1時間に1回」みたいな定期処理できます。 でもメモリ不足時などには勝手に終了してしまうので、必須 の処理にはあまり向いていません。 21
  23. 23. 8. フォントは少しカスタマイズできます
  24. 24. 8. フォントは少しカスタマイズできますフォントのサイズ・色・透明度などが変更できます。 ふつうに使える • サイズ・透明度込みの色(#AARRGGBB) 分かりにくいけど使える • 影の色・影のサイズ・影の方向・横方向倍率 • 袋文字とかは出来ないのが残念です。(影のサイ ズを大きくすると、勝手にブラーがかかってしまう) あまり期待できない • BoldとかItalicとかserif/sans-serifとか monospaceも定義はありますが、それらの指定に より見た目がきちんと変化するシステムフォントが 組み込まれていないこともよくあります。 Droid_Robot fontの例 23
  25. 25. 8. フォントは少しカスタマイズできますアプリ内にフォントを埋め込むこともできます。 英数字フォントやシンボルフォントにて、アクセントに使うのが妥当と思 われます。 日本語フォントはサイズが大きいので使い方には注意してください。 • 本体数百kバイトのアプリに、5Mバイトのフォントデータはアンバランスですよね …? • 固定文字列が大半なので、画像化した方がデータサイズ的にも優しかったりし ませんか? • ライセンス等、利用方法も本当に問題ない? 24
  26. 26. 9. ディスプレイサイズ・ピクセル密度と単位
  27. 27. 9. ディスプレイサイズ・ピクセル密度と単位Androidは様々なディスプレイサイズ・ピクセル密度のデバイスに対応するために、それらの差分を吸収するための仕組みがあります。 実際のところは仕組みがあるだけで、きちんと対応するにはそれなりの 手間がかかります。ディスプレイサイズやピクセル密度別のリソースをディレクトリ(フォルダ)ごとに指定することができます。 例 • drawable:共通のリソース置き場 • drawable-hdpi:高ピクセル密度端末用リソース置き場 • drawable-mdpi:中ピクセル密度端末用リソース置き場 • drawable-ldpi:低ピクセル密度端末用リソース置き場 26
  28. 28. 9. ディスプレイサイズ・ピクセル密度と単位種々のサイズを指定するのに、物理的なpx(ピクセル)ではなく、dp(dip, Density-independent Pixels)という画面密度に基づいた抽象的な単位を使うのが望ましいです。 たとえば「10dip」という指定をすれば、ldpiの端末でもmdpiの端末で もhdpiの端末でもだいたい見た目の大きさが同じぐらいになる様なサ イズを指定したことになります。ユーザが設定したフォントサイズによって自動でサイズが変わる、spという単位もあります。 テキスト部分にどうぞ。ピクセルそのものを指すpxもあります。 1pxにこだわりたいあなたへ。 27
  29. 29. 論理的な配置なぜ物理的(○○ピクセル)じゃなくて、論理的(右からちょっと離して)にする必要があるのか?1つのレイアウトで、解像度(ピクセル数)の違う、複数のデバイスに対応する必要があるからです。 28
  30. 30. 実際の解像度の例WVGA・FWVGA・qHDで今のところ(※)大半がサポートされます。 WVGA(480x800)の例 • Galaxy SII SC-02C:normal-hdpi FWVGA(480x854)の例 「3種とも分類が一緒」 =「1つのlayout.xmlで3 • 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までに限る 29
  31. 31. 1つのレイアウトで近しい解像度はカバー 9patchのPNGまたはXMLベースで 横方向に可変長に。「横480-540・縦800-960のUI」がカバー可能。 9patchと均等配置 縦方向に可変長なコンテ ンツ領域 縦方向に可変長な コンテンツ領域。 画面領域中央表示 による、固定サイズ のコンテンツ配置。 均等配置・適切なマージン設定により、 操作UI部分であっても横方向の可変 性を確保。 30
  32. 32. 脱線
  33. 33. 脱線11.音鳴らせるよ。 バイブも忘れないで。12.「OK/Cancel」確認ダイアログ簡単に出せるよ。 Undoが不可能な操作の前には出したい。13.「ウェイティング」「プログレスバー」ダイアログ簡単に出せるよ。 ユーザをちょっとでも待たせる際には、処理中であることを示す。 BACKキーでのキャンセルもできればがんばって。 32
  34. 34. まとめ
  35. 35. 画像素材レベルと使い分け(レベル0・1) 固定サイズのpngやjpg(あるいはai レベル0 やpsd)にて提供される。 レベル1 プログラマがレタッチソフトで切りABCDEFGH 出すことが前提でコストが高く、慣 れない作業でピクセルずれや補完 リサイズによるジャギーが発生しが ちになる。 正直オススメできない。 1枚絵をタイル切りした素材が提 供される。切り出しサイズによるマ ジックナンバー問題によりコードの 素材依存度が上がり、改造コスト が高くなる。 素材作成側のコストが低いため、 紙芝居デモ等初期検討向けには 有効。 34
  36. 36. 画像素材レベルと使い分け(レベル2・3) 適切なセンタリング・アライン・マー レベル2 ジン調整を前提とした素材群が提 レベル3 供される。 bauhaus93 最終的な調整がXMLでできる様に .ttfABCDEFGH なり、フォント等システムマターの問 題への対応コストが下がる。機種・ 解像度が1,2種程度に限定できる 際に有効。 9patchに対応、アプリへのフォント 埋め込みまで検討した最高レベル の素材。 ただしここまでやるには双方に相 当の知識が必要な上しっかりとし た意識あわせが必要。 多デバイス展開が戦略上必須で あれば採用を検討したい。 35
  37. 37. まとめ1. まずお互いをよく知ろう スキルの確認。Androidはまだまだ枯れた技術ではないし、 変化し続けている。2. 必要があれば勉強会を開催 「他社メンバをわざわざ教育なんて…」ではなくて、信頼に よるコミュニケーション効率のUP等、レベル差があるなら、 それをうまく利用するのが大事。3. 「どの期間・期日で」「どのレベルまでやるか」意識あわ せ 過剰品質は不幸の元。目的に合わせた選択を。 36

×