tomo.mobi

Representation design of material


マテリアルデザイン プロダクトアイコン

まえおき:英語良く分かっていないのですが、原文を読んで、翻訳しながら解釈した内容を日本語で書いていますので比喩があるかもしれません。また、自分の感想を書いている箇所もあるので、文章全てがページに書いてある事と言う訳ではないです。

アイコン作成に関して

例としてgmailのアイコンの説明

gmailのアイコン等は実際に紙を折って影の着き方等を参考にし作成されました。
アイコンとして形を作成し、決まっている光の方向(左、145度(photoshop参考))から影をおとしマテリアルの原型をつくりスポットカラーが配置されました。

アイコンの形を作成する用のグリッド(ガイド)に形を落とし込み作成されました。プロダクトアイコンを作成するのにグリッドが手助けをしてくれます。位置決めなど、規則性を持たせることができ、アイコンをまとめる事によりシステムに統一した雰囲気が出てきます。

Gmailのアイコンのスポットカラーは「赤」だと思うのですが。このスポットカラーの矩形には影を付けずに存在する場所によって陰影がついているのみで、アイコン上にはっきりさせています。

キーラインの種類に関して

キーラインを統一する事で、アイコンがまとまります。
Square
Height: 152dp
Width: 152dp

Circle
Diameter: 176dp

Vertical rectangle
Height: 176dp
Width: 128dp

Horizontal rectangle
Height:128dp
Width:176dp

DP グリッド

androidの推奨するアイコンは48dpで作成する事です。ですが実際にアイコンを作成する時は400%の192dp*192dp(角の丸みは4dp)で作成することを推奨しています。
これにより拡大縮小しても、きれいなエッジラインをのこせるようになります。
1:1の大きさではなく、4:1の大きさで作成する。

幾何学

円、正方形、長方形、垂直、および対角線:プリセットの基準は、特定のキーラインで決定されます。この小さなパレットは、製品のアイコンを統一します。

アイコンの構造

アイコンを解剖するとグラフィック要素で構成されています。この構成はロゴの微妙な特徴を表しています。また、基本構成を意識する事によって、ロゴデザインの学習になります。

コンポーネント

重なっているコンポーネントは1つ前の上に配置されています。
コンストラクチャの視点
アイコンの構造を斜めから観た例
それぞれ番号に名称がついています
1. 仕上げ
2. Material 背景:背景要素
3. Material 前景:背景に影を落として上に配置。
4. 色
5. 影

背景:背景要素
全景:背景の上に素材を乗せている
色:ごく一部の素材の色(ポイントカラー。gmailでいうならば、「M」の形とっている赤の事。)
宙に浮いている:色だとしたら隅々までひかれる(gmailでいうならば、アイコンのポイントカラーがつく前の原型の事。)
色付きの縁:素材の上の淵に白いテクスチャーか明るい色をオリジナルで用意するか。
影の淵:素材の下の淵に暗い色または暗いオリジナル色
影:柔らかい影をまとった隆起した素材。
仕上げ:全ての素材の上に左上右下へ影を落とす。

テーマ別色選別方法

色彩、覆い、影の値

色合いと陰影が追加されたときの各色が異なって反応します。すべてのエッジの色合い、エッジシェード、および影の色は、その背後にある各色ごとに調整する必要があります。色の調和を確保するために、それぞれについて適切な値を利用してください。

プロダクトアイコンのパターン

物理的な物質はいろいろな環境に影響を受け、表面と触感でのセンスは規則を作ります。相互作用でたくさんのユニークな構成物になります。

色の要素は、平らな紙の上に存在してください。
色の要素をエッジまたはシャドウで飾らないでください。

レイヤー

紙のレイヤー要素は深さを作り、エッジと影と持ちます。
重なる数に注意してください。
あまりにも複雑になるとフォーカスが欠けてしまいます。

昇降

シンプルな素材の上の中心部から影を伸ばします。
消して他のシェイプをクロップしないでください。

折り目を入れたマテリアルエレメントは幾何学的な要素を失わずに深さの感覚を持たせます。
折り目は中心を通り、形をシンメトリーにします。
中心でなかったり複数の折り目は使用しないでください

折りたたみ

折りたたみ要素は、見た目よりもおおきく歪みます。改変または重要な要素を詐称避けるのでスポットカラーの場所には、避ける。

重ね

オーバーラップ材料要素は、ユニークなシルエットを作成します。すべての要素、エッジ、シャドウはシルエットの内部に閉じ込められています。1つ以上のオーバーラップを超えないようにしてください。あまりにも多くを持つことは、アイコンを複雑にし、フォーカスを欠いてしまいます。

アコーディオン

折り畳まれた要素は単一の素材に次元を追加させます。ただし、2つ以上の折り目を超えないようにしてください。あまり階層を多く持つ事はアイコンを複雑にし階層を分からなくします。

ゆがみ

プロダクトアイコンは歪ませたりしてはいけません。エレメントは幾何学的な形をしていなくてはいけなくて、歪ませたり、傾けたり、伸ばしたりしてはいけません。

プロダクトアイコンを読んで

アイコンを歪ませると言う視点に関しては、デザイン上そう言う事もあるだろうなとは思うけれども、そもそもプロダクトアイコンとはどういったアイコンの事をマテリアルデザインではさすのかと言う視点から見るとと言う話なのでとてもなっとく。

そして、プロダクトアイコンも構造から考える。全て構造化。
アプリケーションである事を分かりやすく伝えるために、androidにインストールするアプリケーションに関しては規約をそろえるということなんですよね。

次は、システムアイコン。

Published by tomoka , on 8月 6th, 2015 at 10:47 pm. Filled under: Android,app,マテリアルデザインNo Comments
この記事を読む

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

前置き

マテリアルデザインを急速に勉強中・・・・
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
この記事を読む

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
この記事を読む

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
この記事を読む

Twitterのapi

とうとう、古いapiが削除されてしまいました。。。。。
こうなる前に、改修しなくてはならなかったのですが、ここまで来てしまい今になって改修。

で、今回改修でとても便利なプラグインととても解りやすく、
親切な記事を見つけましたので、今後の事をふまえ、メモを残します。

twitter api1.1対応に関して(アプリ登録〜実装まで)
http://www.webopixel.net/php/666.html
※本当に親切に書いてあって、本当に助かりました!すばらしい @_@

記事に書いてあったオース認証のソース(GitHub)
https://github.com/abraham/twitteroauth

そして、改修したサイト。。。。。
http://tirol-bag.shop-pro.jp/
ほんとうに、すみません。いつも、お世話になっています。

そうそう、今回は久しぶりにphpを使ったのですが、自動リンクの記述を調べたので、今後の為にメモ。。。。

$str = "テキストテキストhttp://www.sample.com/sample";
$str = preg_replace("|http://\w+(?:-\w+)*(?:\.\w+(?:-\w+)*)+(?::\d+)?(?:/[\w\-~/%&=+#\.\?;]*)?|", '$0', $str);

結果
テキストテキストhttp://www.sample.com/sample

Published by tomoka , on 6月 30th, 2013 at 2:14 am. Filled under: app,twitter,いまさら,調べものNo Comments
この記事を読む

ライブ壁紙第一弾

アンドロイドアプリ制作をはじめて気がついたらもう一年。。。。
プログラムの知識が無い自分がとりあえず、動く物を作り事ができたので報告です。

つくったもの
ライブ壁紙

アプリのないよう
1)背景がカラフルに変わる。
2)上から星が降ってくる。
3)タップした位置に星が表示

アプリのスクキャプ
タイミング悪くきれいな色をキャプチャできなかったけれども。。。。
RGBの数値を0~255の間を行き来しているだけです。星の落下に関しては、一応落下速度をつけているので、何度かループをしているうちにばらつきがでてきます。

すくきゃぷ_0000_ベクトルスマートオブジェクトすくきゃぷ_0001_ベクトルスマートオブジェクトすくきゃぷ_0002_ベクトルスマートオブジェクトすくきゃぷ_0003_ベクトルスマートオブジェクト

今回はプログラムだけでなく、いろいろ勉強しました。
アフィン変換、ラジアン、自由落下、三角関数。。。。

実はここまで作れたのは、自分だけの力ではありません。
助けて下さったみなさまに心より感謝しております。

Published by tomoka , on 6月 9th, 2013 at 11:36 pm. Filled under: Android,appNo Comments
この記事を読む