SlideShare a Scribd company logo
1 of 153
Download to read offline
ハッシュタグ

デザイナーが             ##aaaaddeessiiggnnss

コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
             第33回:全力でカスタムUUII
                   @@SSTTAARRTTUUPP  BBaassee  CCaammpp
                                    22001122..1100..44
ハッシュタグ

            ##aaaaddeessiiggnnss


  がんばって作ったデザインが、
実装後に残念な結果にならないために
秋葉ちひろ
•・ @@ttoommmmmmmmyy
•・ デザイナー/アートディレクター
•・ WWeebb系・アプリ系
•・ BBaaiidduuでSSiimmeejjiiの開発のフロント
  エンドの一部
全力でカスタムUUII

11..カスタムUUIIについて
どんなもの?


カスタムUUIIとは?
•・ チェックボックス
•・ ラジオボタン
•・ スライダー
•・ シークバー
•・ スライドバー  など
カスタムUUIIって使う?
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
デザインを
カスタマイズする理由
カスタムUUII


いつ使う?
•・ ユーザーに何か決めてもらうとき
•・ 現在のステータスを何かしら提示し
  たいとき
デザインをカスタマイズする


       デメリット
•・ いつも見ているものと違うとビックリ
  する(かもしれない)
•・ それが自分で操作できるのかがわから
  ない(かもしれない)
デザインをカスタマイズする


        メリット
•・ 端末によるデザインの違いがなくなる
•・ アプリのデザインとして統一感が出る
  (ブランディング)
だとしたらそれは…�

ただの制作者の
 エゴかも!!
注意!

ちょっと物知りの
クライアントさん
 カスタムUUIIにしてください


どういう感じにしたいですか?


 いや、クライアントさんが
 そうしたいって言ってるんで
 なんでもいいです…�
どういう感じにしたいですか?


 いや、クライアントさんが
 そうしたいって言ってるんで
 なんでもいいです…�


 AAnnddrrooiiddはメーカーによって
 デフォルトが違うから、
 そろえてほしい
 そうしたいって言ってるんで
 なんでもいいです…�


 AAnnddrrooiiddはメーカーによって
 デフォルトが違うから、
 そろえてほしい


 AAnnddrrooiiddはメーカーによって
 デフォルトのデザインが違う
 から、そろえてほしいそうです。
 AAnnddrrooiiddはメーカーによって
 デフォルトが違うから、
 そろえてほしい


 AAnnddrrooiiddはメーカーによって
 デフォルトのデザインが違う
 から、そろえてほしいそうです。


 なるほど、そのとおりですね。
 そろえてほしい


 AAnnddrrooiiddはメーカーによって
 デフォルトのデザインが違う
 から、そろえてほしいそうです。


 なるほど、そのとおりですね。


 なぜそろえてほしいのですか?
 AAnnddrrooiiddはメーカーによって
 デフォルトのデザインが違う
 から、そろえてほしいそうです。


 なるほど、そのとおりですね。


 なぜそろえてほしいのですか?


 ・・・・・・・。
クライアントさんにも
 ちゃんとした理由を
   考えてほしい
カスタムUUII


 使うのに適した場面その11
 •・ 設定がメインとなるアプリ
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
カスタムUUII


 使うのに適した場面その22
 •・ 世界観を出したいアプリ
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
スライダー


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

スライダー

ラジオボタン

ラジオボタン
カスタムUUII


      そもそもの段階で…�
 •・ 本当にやるべきかどうかをしっかり
   考える(コンセプトも含めて)
 •・ 予算面
!   気をつけること
    その11

ユーザーが「自分で決めれる」
ということがわかるものにしな
いといけない
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
!   気をつけること
    その22

ユーザーが「自分がどういう状
態か」ということがわかるもの
にしないといけない
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
!   気をつけること
    その33

あくまで脇役なので、必要以上
に華美�になってはいけない
また、デフォルトと離れすぎる
とびっくりする
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
!   気をつけること
    その44

世界観が必要なら、確実にその
方向�が必要
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
全力でカスタムUUII

22..状態とデザインについて
   •・ チェックボックス
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
状態とは?
 オフのとき

 オフ/押しているとき

 オンのとき

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

drawable-xhdpi

drawable-hdpi

drawable-mdpi
                 iimmgg
drawable-ldpi

layouts
                            JJAAVVAA
main.xml         hhttmmll
                  構造
values

strings.xml      ccssss
                 飾�り
res
drawable
                  xxmmll
drawable-xhdpi

drawable-hdpi

drawable-mdpi
                 iimmgg
drawable-ldpi               JJAAVVAA
layouts

main.xml         hhttmmll
                  構造
values

strings.xml      ccssss
                 飾�り
checkbox_stateful.xml
<?xml version="1.0" encoding="utf-8"?>


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




</selector>
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>
オフのとき


オフ/押しているとき


オンのとき


オン/押しているとき
チェックされているかどうか             押されているかどうか

   state_checked="false" state_pressed="false"




   state_checked="false" state_pressed="true"




   state_checked="true"   state_pressed="false"




   state_checked="true"   state_pressed="true"
チェックされているかどうか              ffooccuussされているか

   state_checked="false" state_focused="true"




   state_checked="true"   state_focused="true"
全力でカスタムUUII

22..状態とデザインについて
     •・ スライダー
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
オンになっているエリア



オフになっているエリア



 つまみ(通常時)


つまみ(押されたとき)
ccoorrnneerrss   ssttrrookkee
                  ##5599ccff

                 ssttaarrttCCoolloorr
                      ##5500ccff


                  eennddCCoolloorr
                      ##00ccff
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
つまみには注意が必要
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
なんかこう気持ち悪い
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
スライダー


    つまみのデザイン
•・ 透過をしたり、特別な形にするときは
  注意!
•・ バーの進み具合は、
  つまみのセンターに従ってくれない!
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
tthhuummbbOOffffsseettを
     使ってみる
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
スライダー


      つまみのデザイン
•・ tthhuummbbOOffffsseettを使うと、
  両端が切れてしまう…�
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
!   つまみのデザイン
    注意11

・できるだけギリギリで
 スライスする
!   つまみのデザイン
    注意22

・プレス時も外回りに影などを
 つけるのではなく、ギリギリ
 の範囲内でわかるようなもの
ssttrrookkee                      sshhaappee

ssttaarrttCCoolloorr     eennddCCoolloorr

                                            99--ppaattcchh
99--ppaattcchh
全力でカスタムUUII

22..状態とデザインについて
     •・ シークバー
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
<shape
 android:shape="ring"
 android:innerRadius="7dp"
 android:thickness="3dp"
 android:useLevel="false">
</shape>
<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>
             <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>
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
<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>
<animated-rotate>
 <bitmap
  android:src=
           "@drawable/rotate">
 </bitmap>
</animated-rotate>
!   かんたんシークバー

・回転するものを作っておく
全力でカスタムUUII

22..状態とデザインについて
    •・ スクロールバー
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第3回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
ccoorrnneerrss

           ssttaarrttCCoolloorr

          cceenntteerrCCoolloorr

               eennddCCoolloorr




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

99--ppaattcchh
!    スクロールバーの
      カスタマイズ

・基本的には99--ppaattcchhなどで
 伸びる表現が必要
・どの程度余白をとるかを指示
まとめ


カスタムUUII
•・ やればいいというものではない
•・ ユーザーのアクションを妨げない
•・ とはいえ、デザイナーとして可能な
 範囲を考えたい
ありがとうございました!


GGoooodd  LLuucckk!!
•・ @@ttoommmmmmmmyy
•・ ffaacceebbooookk  ::  秋葉ちひろ
•・ 次回は1100//2255(木)@GGMMOOさん

More Related Content

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

WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみたWordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみたYuji Nojima
 
新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみたHiromitsuuuuu Morikawa
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!Nishida Kansuke
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かきNishida Kansuke
 
AssetTouchAndTry20170608
AssetTouchAndTry20170608AssetTouchAndTry20170608
AssetTouchAndTry20170608Takashi Jona
 
コマンドなしでぼくはAndroid開発できない話
コマンドなしでぼくはAndroid開発できない話コマンドなしでぼくはAndroid開発できない話
コマンドなしでぼくはAndroid開発できない話Shinobu Okano
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたShinichi Sato
 

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

Wide2
Wide2Wide2
Wide2
 
WordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみたWordPress プラグイン Infinite Scroll を試してみた
WordPress プラグイン Infinite Scroll を試してみた
 
新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた新しいCSSの仕様を色々調べてみた
新しいCSSの仕様を色々調べてみた
 
㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!㉘HTML5+CSS3でアニメーション!
㉘HTML5+CSS3でアニメーション!
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
AssetTouchAndTry20170608
AssetTouchAndTry20170608AssetTouchAndTry20170608
AssetTouchAndTry20170608
 
コマンドなしでぼくはAndroid開発できない話
コマンドなしでぼくはAndroid開発できない話コマンドなしでぼくはAndroid開発できない話
コマンドなしでぼくはAndroid開発できない話
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 

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