【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

26,426 views

Published on

全力でカスタムUI
http://www.ladybeetle-design.com/androidappdesigns/

Published in: Design
0 Comments
61 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
26,426
On SlideShare
0
From Embeds
0
Number of Embeds
14,706
Actions
Shares
0
Downloads
143
Comments
0
Likes
61
Embeds 0
No embeds

No notes for slide

【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

  1. 1. ハッシュタグデザイナーが ##aaaaddeessiiggnnssコードから読み解く、AAnnddrrooiiddアプリのデザインの幅を広げるコツとTTiippss 第33回:全力でカスタムUUII @@SSTTAARRTTUUPP BBaassee CCaammpp 22001122..1100..44
  2. 2. ハッシュタグ ##aaaaddeessiiggnnss がんばって作ったデザインが、実装後に残念な結果にならないために
  3. 3. 秋葉ちひろ•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
  4. 4. 全力でカスタムUUII11..カスタムUUIIについて
  5. 5. どんなもの?カスタムUUIIとは?•・ チェックボックス•・ ラジオボタン•・ スライダー•・ シークバー•・ スライドバー など
  6. 6. カスタムUUIIって使う?
  7. 7. デザインをカスタマイズする理由
  8. 8. カスタムUUIIいつ使う?•・ ユーザーに何か決めてもらうとき•・ 現在のステータスを何かしら提示し たいとき
  9. 9. デザインをカスタマイズする デメリット•・ いつも見ているものと違うとビックリ する(かもしれない)•・ それが自分で操作できるのかがわから ない(かもしれない)
  10. 10. デザインをカスタマイズする メリット•・ 端末によるデザインの違いがなくなる•・ アプリのデザインとして統一感が出る (ブランディング)
  11. 11. だとしたらそれは…�ただの制作者の エゴかも!!
  12. 12. 注意!ちょっと物知りのクライアントさん
  13. 13.  カスタムUUIIにしてくださいどういう感じにしたいですか? いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…�
  14. 14. どういう感じにしたいですか? いや、クライアントさんが そうしたいって言ってるんで なんでもいいです…� AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい
  15. 15.  そうしたいって言ってるんで なんでもいいです…� AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。
  16. 16.  AAnnddrrooiiddはメーカーによって デフォルトが違うから、 そろえてほしい AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。 なるほど、そのとおりですね。
  17. 17.  そろえてほしい AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。 なるほど、そのとおりですね。 なぜそろえてほしいのですか?
  18. 18.  AAnnddrrooiiddはメーカーによって デフォルトのデザインが違う から、そろえてほしいそうです。 なるほど、そのとおりですね。 なぜそろえてほしいのですか? ・・・・・・・。
  19. 19. クライアントさんにも ちゃんとした理由を 考えてほしい
  20. 20. カスタムUUII 使うのに適した場面その11 •・ 設定がメインとなるアプリ
  21. 21. カスタムUUII 使うのに適した場面その22 •・ 世界観を出したいアプリ
  22. 22. スライダー OONN//OOFFFF
  23. 23. スライダースライダーラジオボタンラジオボタン
  24. 24. カスタムUUII そもそもの段階で…� •・ 本当にやるべきかどうかをしっかり 考える(コンセプトも含めて) •・ 予算面
  25. 25. ! 気をつけること その11ユーザーが「自分で決めれる」ということがわかるものにしないといけない
  26. 26. ! 気をつけること その22ユーザーが「自分がどういう状態か」ということがわかるものにしないといけない
  27. 27. ! 気をつけること その33あくまで脇役なので、必要以上に華美�になってはいけないまた、デフォルトと離れすぎるとびっくりする
  28. 28. ! 気をつけること その44世界観が必要なら、確実にその方向�が必要
  29. 29. 全力でカスタムUUII22..状態とデザインについて •・ チェックボックス
  30. 30. 状態とは? オフのとき オフ/押しているとき オンのとき オン/押しているとき
  31. 31. resdrawable-xhdpidrawable-hdpidrawable-mdpi iimmggdrawable-ldpilayouts JJAAVVAAmain.xml hhttmmll 構造valuesstrings.xml ccssss 飾�り
  32. 32. resdrawable xxmmlldrawable-xhdpidrawable-hdpidrawable-mdpi iimmggdrawable-ldpi JJAAVVAAlayoutsmain.xml hhttmmll 構造valuesstrings.xml ccssss 飾�り
  33. 33. checkbox_stateful.xml<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"></selector>
  34. 34. checkbox_stateful.xml<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" チェックされているかどうか android:state_pressed="true" 押されているかどうか android:drawable="@drawable/xxx"> その状態で表示する画像 </item></selector>
  35. 35. オフのときオフ/押しているときオンのときオン/押しているとき
  36. 36. チェックされているかどうか 押されているかどうか state_checked="false" state_pressed="false" state_checked="false" state_pressed="true" state_checked="true" state_pressed="false" state_checked="true" state_pressed="true"
  37. 37. チェックされているかどうか ffooccuussされているか state_checked="false" state_focused="true" state_checked="true" state_focused="true"
  38. 38. 全力でカスタムUUII22..状態とデザインについて •・ スライダー
  39. 39. オンになっているエリアオフになっているエリア つまみ(通常時)つまみ(押されたとき)
  40. 40. ccoorrnneerrss ssttrrookkee ##5599ccff ssttaarrttCCoolloorr ##5500ccff eennddCCoolloorr ##00ccff
  41. 41. つまみには注意が必要
  42. 42. なんかこう気持ち悪い
  43. 43. スライダー つまみのデザイン•・ 透過をしたり、特別な形にするときは 注意!•・ バーの進み具合は、 つまみのセンターに従ってくれない!
  44. 44. tthhuummbbOOffffsseettを 使ってみる
  45. 45. スライダー つまみのデザイン•・ tthhuummbbOOffffsseettを使うと、 両端が切れてしまう…�
  46. 46. ! つまみのデザイン 注意11・できるだけギリギリで スライスする
  47. 47. ! つまみのデザイン 注意22・プレス時も外回りに影などを つけるのではなく、ギリギリ の範囲内でわかるようなもの
  48. 48. ssttrrookkee sshhaappeessttaarrttCCoolloorr eennddCCoolloorr 99--ppaattcchh
  49. 49. 99--ppaattcchh
  50. 50. 全力でカスタムUUII22..状態とデザインについて •・ シークバー
  51. 51. <shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"></shape>
  52. 52. <shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"> <gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" /></shape>
  53. 53. <animated-rotate> <shape x android:shape="ring" android:innerRadius="7dp" android:thickness="3dp"pivotX="50%" android:useLevel="false">pivotY="50%" <gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" /> </shape> </animated-rotate>
  54. 54. <animated-rotate> <shape android:shape="ring" android:innerRadius="7dp" android:thickness="3dp" android:useLevel="false"> <gradient android:endColor="#300" android:startColor="#3300" android:type="sweep" /> </shape></animated-rotate>
  55. 55. <animated-rotate> <bitmap android:src= "@drawable/rotate"> </bitmap></animated-rotate>
  56. 56. ! かんたんシークバー・回転するものを作っておく
  57. 57. 全力でカスタムUUII22..状態とデザインについて •・ スクロールバー
  58. 58. ccoorrnneerrss ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorrssttrrookkee
  59. 59. sshhaappee99--ppaattcchh
  60. 60. ! スクロールバーの カスタマイズ・基本的には99--ppaattcchhなどで 伸びる表現が必要・どの程度余白をとるかを指示
  61. 61. まとめカスタムUUII•・ やればいいというものではない•・ ユーザーのアクションを妨げない•・ とはいえ、デザイナーとして可能な 範囲を考えたい
  62. 62. ありがとうございました!GGoooodd LLuucckk!!•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1100//2255(木)@GGMMOOさん

×