tomo.mobi

Representation design of material


マテリアルデザイン 深度について

前置き

マテリアルデザインを急速に勉強中・・・・
http://www.google.com/design/spec/material-design/introduction.html

ここでは、深度について学んだ事をメモしたいと思います。

ベクトルの方向

whatismaterial_environment_3d
右上を(0,0)としている。
お気づきのように、Z-indexが存在します。

Z-index

これが深度の影の付け方にとても関係します。
オブジェクトの種類によって深さが変わるのです。

  • キーライト:影の方向性を決める
  • アンビエントライト:深度を決める
  • キー+アンビエントライト:2つの組合わせ

whatismaterial_environment_shadow3

whatismaterial_environment_shadow2

whatismaterial_environment_shadow1

物質的なプロパティ

ルール、箇条書きします。

  • オブジェクトには1dpの厚みがあります。
    whatismaterial_materialproperties_physicalproperties_thickness_01_yes
  • アンビエントによるshadowは深度に関連します。
  • オブジェクトに配置されるコンテンツには厚みがありません。
  • オブジェクトに配置されるコンテンツは配置されたオブジェクトよりも大きくなる事はありません。
  • 多くのコンテンツをまたいで、アクションをおこすトリガーを設定しない。(結構あたりまえかも?)
  • 意味の違うオブジェクトが同じ階層に存在する事はほぼ無い
  • 深度の違うオブジェクトが交差する事はない。(情報の構造はしっかりすれば大丈夫。)
  • オブジェクトの大きさによって矩形が変わります。円 < 角丸四角 < 四字熟語
  • 同じオブジェクトであれば、切り離しても、元の通りにつなげる事が出来る

深度と影について

種類により深度が変わります。
もちろん、3Dなので、影のdpの深さも変わります。

Elevation (dp) Component
24 DialogPicker
23
22
21
20
19
18
17
16 Nav drawerRight drawerBottom Sheet
15
14
13
12 Floating action button (FAB – pressed)
11
10
9 Sub menu (+1dp for each sub menu)
8 MenuCard (picked up state)Raised button (pressed state)
7
6 Floating action button (FAB – resting elevation)Snackbar
5
4 App Bar
3 Refresh indicatorQuick entry / Search bar (scrolled state)
2 Card (resting elevation)Raised button (resting elevation)Quick entry / Search bar (resting elevation)
1 Switch

補足:2つのオブジェクトの深度の差には6dpあります。
whatismaterial_3d_elevation1
仮想の深度が2dp上の深度が8dp。

横から見るとこんな感じ。
whatismaterial_3d_elevation2
ちなみに、影の大きさは深度のdpに関連します。
そして、オブジェクトに深度を付ける事により、他の階層のオブジェクトから特別とされ、特に機能が単独であれば他に関与されない独立された動きを実現するようになります。(gmailのメール作成の丸いボタンのように。)
http://www.google.com/design/spec/what-is-material/elevation-shadows.html#elevation-shadows-elevation-android-

マテリアルデザインの深度はアプリの構造もユーザーに伝えようとしたデザインと言う事になります。

Published by tomoka , on 7月 27th, 2015 at 10:48 pm. Filled under: appNo Comments
この記事を読む

ほしのしまのにゃんこ✧

読み直して、書き直した・・・・(汗)

ほしの島のにゃんこあそんでます ニャ-(●ↀωↀ●)✧
にゃんこの仕草が可愛くて可愛くて・・・にゃんこが働いている・・・にゃんこが遊んでいる・・・とても癒されています。

ふと気がつき、アプリ内の文章にひらがなが多く漢字には送り仮名が振られている事に気がつきました。
明らかに子供用に作られているなぁと言う感覚。
子供用のアプリで流行ったのと言うと、「どうぶつ将棋」ぐらいしか思いつかない自分。
気になってアプリについて誰かが話しているページをさがしてみました。

ほしのしまのにゃんこを知らない人も居ると思うのでざっくりと紹介。
きっと、ティザーサイトを観た方が早いと思う。
こちら→http://colopl.co.jp/hoshinyan/

そして見つけたインタビュー記事→http://gamebiz.jp/?p=126928
ターゲットユーザーに子どもが入っていた!
「子どもは成長して、大人は童心に戻れるアプリ」
家でお母さんと子どもがタブレットで遊んでいる姿が目に浮かびます・・・・。

子ども向けに、
・演出を派手に
・子どもの親しみやすい食べ物を取り入れる
・モチーフキャラクターを親しみやすく呼びやすい「にゃんこ」にした
 ・たくさんいてもくどくないように無表情
などなど。

あとは、記事の中のあまり子どもよりにしすぎると、子どもも飽きてしまう。と言う部分に納得。大人も子どももゲームをやっていて新しい発見が無いとつまらなくなるんだろうなと言う事か・・・と思った。

また、ターゲットユーザー層を集めて、ゲームを遊んでもらいリリース前にヒヤリングはやるべきなのかも。年齢別や性別、環境で感じる事、考える事は違うのでリアルなターゲット層を10~20人集めてテストする事は今まで見えなかったゲームへの要望も出てくるだろうし、良いと思っていた画面遷移に問題が出来るかもしれないので、必要だと思いました。

とくに開発中、新機能のテストフェーズのような期間を定期的に入れて軌道修正しながら開発をすると効率よくターゲット層にマッチしたコンテンツが作れそうですよね・・・。

Published by tomoka , on 7月 12th, 2015 at 6:00 am. Filled under: 未分類No Comments
この記事を読む

iOSの画面デザインを作る時にやっている事

iphoneはストーリーボードでレイアウトを作成するとき、比率かえずにレイアウト配置してしまうと
解像度が変わった時に意図したレイアウトにならなくなりますよね。
なので、レイアウトをする時はどの解像度でみてもあまり変わらないように割合でレイアウトを考えていると思います。

なので、私はカンプを作成する時に、320px基準に考え8ptのグリッド線をひいて作成しています。
iphoneの画面をデザインするとき、横(短い方)を1として、デザインする横幅の基準を決めれば、
横幅基準で割合にてレイアウトすると解像度が変わっても縦の見える範囲が変わるのみでレイアウトが崩れる事はありません。

@3で作成するのだったら、画面に24*24のグリッドをひいてレイアウトしています。

なぜ、1マス24pxかというと、Xcodeでレイアウトする時に@1にした時に1マス8ptとして考えられ、
320pxを基準で考えている場合、8/320=0.25と、割り易い数字なので割合で比率を計算し易くなります。

しかし、8はあくまでも基準です。
細かいレイアウトは8の倍数と言うわけにはいかないからです。
グリッドを意識してレイアウトするとストーリーボードに落とし込む時に落とし込み易いと言う程度です。

ちなみに、設定の中にある、photoshopの良くご存知のこの機能です・・・
グリッド線

最初はみづらいなーと思う。(私も思った)
グリッド線の色で画面が染まる・・・・。
スクリーンショット 2015-07-05 6.11.46

グリッド線は[command]+[@]でon/off出来るので、[command]+[h]とあわせて、
ショートカットを覚えておくと良いです。

Published by tomoka , on 7月 5th, 2015 at 6:15 am. Filled under: 未分類No Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみた!

Xcodeでベクター(PDF)を使った開発方法
http://www.bravesoft.co.jp/blog/archives/987

やってみました。思った以上にベクターデータが汚くて残念。
ちなみに、前知識としてXcodeでのレイアウトは320pxを基準にしています。
スクリーンショット 2015-05-07 0.06.10

上から順番に・・・

1)アートワーク50px*50pxのベクターデータ(pdf)
2)キャンバス50px*50px 72dpiのpng
3)アートワーク50px*50pxにキャンバス50px*50px300dpiのpngを貼付けたpdf

それぞれを180*180のImage Viewに貼り込んでみました。
ベクターデータが一番きれいかなと思ったのですが、違った・・・!

でも、このやり方で素材を渡せば、@3で作った素材のクォリティーそのままで想像以上に汚くならず、しかも、素材の配置に手計算とかしなくても良いし、余計な手間がかからなくてすむかも。
※ちなみに、50px*50pxサイズの解像度違い300dpiと72dpiの画像貼り分けはほぼ変わりませんでした。
(やった後、そりゃそうだと思ったw)

pdfよりも300dpi相当の解像度の画像をpdfで圧縮した方がキレイになる事が分かりました。
300dpiだから@4相当です。

ちなみに、@3相当で作成するとベクターと同じ見栄えになります。
キャプチャ→サンプル画像はこちら

これから@3以上の@4、@5が出てきた時のことを考えるとベクターで素材を作るのがbestかもしれません。


Published by tomoka , on 5月 7th, 2015 at 12:22 am. Filled under: app,smartphone,未分類,調べものNo Comments
この記事を読む

iPhoneアプリの素材、pngやpdfの読み込みに関してやってみたい事

iPhoneアプリの開発の時にベクターデーターを読み込むとき横幅320pxデザイン幅でpdfにして素材を渡すのですが、ベクターデーターはもともとイラストレーターで作成するので600dpi以上はあるので拡大縮小に問題なくきれいにネイティブアプリでレンダリングしてくれますが、ベクターデーターで素材を渡す事のできない写真素材とかしずる感たっぷりのpng画像等に関しては320pxのデザイン幅で素材を渡すととっても残念な事になります。
なので、ちょっと考えてみたのですが、@3のサイズでデザインしたpng画像をイラストレーター上で320px幅のおおきさに縮小して320pxデザイン幅のpdf素材として、提供したらどうだろうと。
iPhone上で展開されれば、他のベクターデータと同じような解像度で表示できるのではないのだろうか。

また、png画像の解像度を300dpiぐらいに設定してレンダリングさせたら作成したサイズで表示されるのだろうか?
もし、72dpiで表示されたら4〜5倍の大きさで表示されてしまわないのだろうか。

私はデザイナーなのですぐに検証する事が出来ない。
端末によって液晶の解像度が違うのでdpiの違うpng画像をそのまま表示させたら、表示サイズが変わる可能性が高いと思った。だから、pdfにするのが良いのではとも思った。両方試してみたい。

気になったのでメモ。
検証できたら、このブログでお知らせします。

Published by tomoka , on 5月 2nd, 2015 at 9:41 am. Filled under: app,iPhone,smartphone,調べものNo Comments
この記事を読む

酒Bot GitHubにやっと上げた

酒BOTやっとGitHubに上げた
https://github.com/tomoka/sake_bot

Published by tomoka , on 5月 2nd, 2015 at 9:05 am. Filled under: いまさらNo Comments
この記事を読む

Slack BOT「日本酒ランダム検索Slack BOT」作りました♪

Slack BOTを作りました。
今回使ったツールは以下の通り。

BOTのフレームワークはhubotを使いました。
【参考】http://gihyo.jp/dev/serial/01/hubot

coffeeScriptで書きました。
【参考】http://coffeescript.org/

Herokuを使いました。
【参考】https://www.heroku.com/

バージョン管理はGitです。

コンテンツ内容はAPI検索です。以下のAPIを使いました。

  • Sakenote Database API
    http://blog.sakenote.com/2013/09/06/sakenote-api/
  • 楽天商品検索API
    https://webservice.rakuten.co.jp/api/ichibaitemsearch/

内容は、ボットに都道府県を投げかけると、投げかけた都道府県のお酒をランダムで1点紹介してくれます。また、「日本酒」「おすすめ」で呼びかけると全国からランダムで1点紹介してくれます。sakenote Database APIは都道府県からお酒の名前を検索するのに使い、楽天商品APIは検索したお酒の画像を表示するために利用しています(楽天で取り扱っていない日本酒の場合はsakenote内の詳細ページのURL表示をします。)おまけ機能で「説明」とボットに呼びかけるとボットの機能を説明してくれます。

スクリーンショット 2015-04-11 11.16.00

JSONの読み込みで手こずり、優秀なエンジニアさんに助けて頂きました。おかげさまで、sakenoteのAPIだけでなく、楽天のAPIも読み込めるようになったので大大大感謝!!!

日本酒の画像も表示できて大大大満足です。

coffeeScritpは今回初めて書いたのですが、こんなに斬新な仕様だとは思っていなかったので鮮烈でした。インデントはなれるまで私の場合は後数回は作らないと駄目だと思いました。また、機会があったらBOT作ってみたいなと思いました。

Published by tomoka , on 4月 12th, 2015 at 4:11 pm. Filled under: api,app,jsonNo Comments
この記事を読む

ネイティブアプリゲームのフォントサイズ

最近、ネイティブアプリのフォントサイズが気になって調べているので漠然とメモです。

普通に読ませるサイズは12dpi 。それよりウェイトが落ちる情報は少し小さく10dpi。見出し等には16dpi〜20dpiまであるようです。

個人的にはパラメータ等の表示は12dpiが多いけど、英数字だったら見やすいので10dpiにしても良いかなぁと、思いました。

Published by tomoka , on 3月 1st, 2015 at 11:51 pm. Filled under: appNo Comments
この記事を読む

surfaceViewのcanvase run()終了時のnull問題

Surfaceviewを使ったとき、端末のバックキーを押すタイミングでアプリが強制終了するのはthreadの破棄の設定だけでなくcanvasのdrawcolorの時にonDestroy( )のタイミングでcanvasにがnullとして返って来てしまう事にやっと気が付いた。

実装した対策は、そもそもthreadがnullになっていないかどうかを分岐して、threadがnullの時はholder.lockCanvas();からholder.unlockCanvasAndPost(canvas);の中に書いた描画を実行しないようにしました。

surfaceCreated()でフラグを立てる /* boolean canvasFlag = true;
surfaceDestroyed()でフラグを折る /* boolean canvasFlag = false;

if(canvasFlag){
holder.lockCanvas();
/*画面の初期化。というか描画の準備のために白で塗りつぶす。
c.drawColor(Color.WHITE);



holder.unlockCanvasAndPost(canvas);
}

Published by tomoka , on 6月 11th, 2014 at 7:26 pm. Filled under: Android,app,java,smartphoneNo Comments
この記事を読む

独自、tweenの実装

viewでのアニメーションはプラグインを使いつつなんとか実装できたのですが、surfaceViewでのアニメーションの実装がうまく行かず、tweenの式を調べて移植してみました。
とりあえず、tweenしてくれました。ので、メモ書き。。。。

実行部分
[Mole.Obj.java]
float moleScale /*変化させたい数値
long passed_time /*経過時間
int mole_max_count /*変化を続ける時間
/*
* 第1引数:経過時間
* 第2引数:変化させたい数値の初期値
* 第3引数:変化させたい数値の最終値
* 第4引数:変化し続ける全体の時間
*/
moleScale = (float) TweenAnimation.easeOutCirc(passed_time,1,2,mole_max_count);

移植したメゾット
[TweenAnimation.java]
public class TweenAnimation {
float t;
float d;
float c;
float b;
    
/*とある1つのみ。Tweenerとかでも使っているtweenの式*/
static double easeOutCirc(float t,float b,float c,float d) {
t /= d;
t–;
return c * Math.sqrt(1 – t*t) + b;
};
}

passed_timeは[Mole.Obj.java]ないにmoleUpdate()を作って、常に変化させてます。
long old_time; /*最初の時間
public void moleUpdate() {
//時間の更新のみ
passed_time = System.currentTimeMillis() – old_time;
}

Published by tomoka , on 6月 11th, 2014 at 7:13 pm. Filled under: Android,animation,app,javaNo Comments
この記事を読む

Java Universal Tween Engineのalpha

最近はJava Universal Tween Engineを理解しようと必死なのですが、
そのなかで、メモにしておこうと思ったことが1点。

alphaはTween.set()が必要です。

Timeline.createSequence()
/*
* public static final int POSITION_X = 1;
* public static final int POSITION_Y = 2;
* public static final int POSITION_XY = 3;
* public static final int ROTATION = 4;
* public static final int SCALE = 5;
* public static final int ALPHA = 6;
*/
  //alpha値の設定
.push(Tween.set(cont, 6).target(0))
.push(Tween.to(cont, 6, 2.0f).target(1).ease(Back.OUT).delay(1.0f))

.push(Tween.to(cont, 4, 2.0f).target(360).ease(Bounce.OUT))
.push(Tween.to(cont, 1, 1.0f).target(3000).ease(Expo.OUT).delay(0.5f))
.push(Tween.call(callBack).delay(1.0f))
.start(tweenManager);

Published by tomoka , on 5月 19th, 2014 at 9:03 am. Filled under: Android,animation,app,java,smartphoneNo Comments
この記事を読む

java-universal-tween-engineのcallback

APIを見つけてからやっと、コールバックをとる事ができた。
長かった。。。。。

//インポートクラス
import aurelienribon.tweenengine.Timeline;
import aurelienribon.tweenengine.TweenCallback; ←受け取るクラス
import aurelienribon.tweenengine.TweenManager;

//コールバックイベントの登録
TweenCallback callBack = new TweenCallback(){
@Override
public void onEvent(int arg0, BaseTween arg1) {
// 処理
Log.v(“tag222”,String.valueOf(arg0));
TweenCallbackObj(); ←コールバック受け取り後に起動するメゾット。
}
};

//タイムラインの登録。
Timeline.createSequence()
.push(Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.push(Tween.to(cont, ViewContainerAccessor.POSITION_XY, 0.5f).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.push(Tween.call(callBack).target(100, 200).ease(Bounce.OUT).delay(1.0f))
.repeat(5, 500)
.start(tweenManager);

Published by tomoka , on 5月 18th, 2014 at 1:03 pm. Filled under: Android,app,smartphoneNo Comments
この記事を読む