tomo.mobi

Representation design of material


snap easing

easing test
優良記事:http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml#article_105

sample
http://www.tomo.mobi/test/snap/starRing_snap2.html

今日はこんな記事を見つけました。
https://github.com/adobe-webplatform/Snap.svg/issues/230
個人的に少し感動してしまいました。tweening engineは扱えるeasingの数が多い方が良い。

Published by tomoka , on 10月 24th, 2015 at 1:22 am. Filled under: 未分類No Comments
この記事を読む

snapサンプル

モバイルの古いブラウザをフォローしたいのならば、svgのアニメーションにはsnap.svgが良さそう!もちろんGreenSockはとても使いやすいのですばらしく良いです。
場合によって使い分けするのが良さそうです。
Snap.svg
http://snapsvg.io/

snapのサンプルです。
transform=”matrix(1,0,0,1,0,0)”
にて、赤い針の回転を表現。
http://www.tomo.mobi/test/snap/
これだったらAndroidの少し古いブラウザでも大丈夫そう。

今のシェア率からみると傾向としては、まだもうすこし古いブラウザ残りそうだしね。
参考資料:https://developer.android.com/about/dashboards/index.html
なお、Android5~の標準ブラウザはmatrix3D()が描画出来るような感じです。
参考資料:http://caniuse.com/#compare=android+44
参考良質記事:http://uupaa.hatenablog.com/entry/2014/04/15/163346

で、snap.svgのライブラリを使ってサンプルを作ってみました。
スクリーンショット 2015-10-22 23.43.40
青枠の中をタップするとほぼ中央に表示された青い★が円状に広がるサンプルです。
http://www.tomo.mobi/test/snap/starRing_snap.html

Published by tomoka , on 10月 20th, 2015 at 12:01 pm. Filled under: 未分類No Comments
この記事を読む

transform:matrix3d()

ここにきてやっと気がついたけれども、<path/>の移動に、transform:matrix3d()は一部のスマホブラウザでは対応していない。3D対応で使っている記述がありました。ライブラリをもうちょっとよく読んで調べてみる必要があります。

PCに限らせるのだったら、古いバージョンにはSMILで対応するようなので、とても使いやすい優れたライブラリだと思いました(未検証)。ライブラリのカスタマイズも考えてみたいけれども、メンテナンスしにくくなる。でも、アニメーションにはTweenのライブラリは使いたい。

他にもいろいろと見てみよう。
http://snapsvg.io/
https://github.com/julianshapiro/velocity
(http://julian.com/research/velocity/#transforms)
http://d3js.org/
そもそも、スマホで実装するのはまだ早いのかどうか。
多少の重さは感じるけど、とりあえず、何か作ってみる。

以下ももうちょっと見てみよう。
https://w3c.github.io/web-animations/
https://drafts.fxtf.org/motion-1/

で、以下サンプルは前回transform:matrix3d()を使ってDOMの追加とstyleの設定を検証したデータでライブラリは使っていないです。アニメーションを実装する前準備で調べた事を使ったサンプルです。
http://tomo.mobi/test/greensock/star_position2D.html
とりあえず、transform:matrix3d()をtransform:translate()に置き換えた。
webkitのベンダープレフィックスも付けた。
scale()とrotate()の設定もいれて、やっと、matrix3d()と同じ表現になったけどstyleの設定が長くなってしまった。使うCSSを選別すればとりあえず実装には問題は無い。

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

SVGアニメーションgreenSockのcallBack

アニメーションを使うのだったら、callBackの確認は必要。
いまのところ分かっているのはTweenMaxのcallBackの設定。

TweenMaxのto()に”onComplete”でfunction関数の指定をします。
ちなみに、TweenLiteの場合も同じ。

var tween = TweenMax.to($box,1,{
     x: '-=50',
     y: '+=50',
     onComplete: callBackFunc,
     ease:Back.easeOut
     });
to.add(tween,2); //2はtimelineを2秒で進める指定

function callBackFunc(){
     alret('Complete!!');
     }

まだ、使い込んでいないのでTweenMaxとTweenLiteのAPIの違いがよくわかっていない。
ActionScriptの方が先に開発されていたことをこないだ知った。
Tweenerしか使った事が無かった。余裕無いなぁ。

Published by tomoka , on 10月 17th, 2015 at 11:57 pm. Filled under: 未分類No Comments
この記事を読む

SVG内の<path/>の位置設定

<path/>の位置を設定するときstyleのtransform:matrix3d()を使うと良いのですが、なんだかtransform:matrix3d()の仕様が複雑なのでメモ書きを残します。
参考文献:http://www.htmq.com/css3/transform_matrix3d.shtml

平行移動のみで、回転・拡大縮小をしない場合

var _x = Math.random()*400;
var _y = Math.random()*400;
var _z = 1;
path.setAttribute('style', 'transform:matrix3d(1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,'+ _x + ',' +  _y + ',' +  _z + ', 1)');

これも足して・・・。

Z軸回転のみで、拡大縮小・平行移動をしない場合
matrix3d(
Math.cos(角度値), Math.sin(-角度値), 0, 0, 
Math.sin(角度値), Math.cos(角度値), 0, 0, 
0, 0, 1, 0, 
0, 0, 0, 1 
)

拡大縮小も足した。
黒枠の中をクリックした時に雪の結晶がスタンプされるのですが、調節不十分なため座標がたまにviewBoxから外れる時があります。
http://tomo.mobi/test/greensock/star_position.html

やっぱり、何か作る材料をそろえるのが一番時間かかる。
もっと、まともな物を作れるようになりたいな・・・

Published by tomoka , on 10月 17th, 2015 at 10:51 pm. Filled under: 未分類No Comments
この記事を読む

SVGのViewBox

なんか一番大切な部分を忘れている。
SVGの描画領域のこと。

<svg width="400" height="400" viewBox="0 0 400 400" style="border:solid 1px #000"  onClick="creatObj();" />

大きさ以外に”viewBox”なる指定があります。
これは文字通り表示領域の指定です。

viewBox(min-x,min-y,width,height)

Published by tomoka , on 10月 17th, 2015 at 3:43 am. Filled under: 未分類No Comments
この記事を読む

SVGのDOM追加について

SVGはHTMLではなくXMLなので、DOMの追加には一癖あります。
setAttributeNSでxlinkを追加してあげる必要があります。
createElementNSで新規のDOMの追加をします。

var xlinkns = "http://www.w3.org/1999/xlink";
var svgns = "http://www.w3.org/2000/svg";
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
・
・
・
細かいパラメータの追加
・
・
・
circle.setAttributeNS(xlinkns, "href", "#circle");
・
・
・

上記のような感じです。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/types.html#InterfaceSVGURIReference
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/svgdom.html#RelationshipWithDOM2Events
とりあえず、次のSVGの記事ではもう少しまともな何かを作ってみます。

Published by tomoka , on 10月 15th, 2015 at 9:37 pm. Filled under: 未分類1 Comment
この記事を読む

SVGアニメーション

SVGの機能を使ってアニメーションさせる
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/animate.html

しかしながら、SMILは廃止の方向のうごきもあるらしい・・・・(?
http://postd.cc/the-state-of-svg-animation/

なので、参考記事に記載されているjavascriptで実装できるプラグインを試してみようと思いました。
GreenSock
http://greensock.com/

sample
http://tomo.mobi/test/greensock/sample1.html

設定や記述に関してはとりわけ特殊な事は無いです。
htmlのDOMと同じようにつかえるみたい。
※ただし、DOMを生成する時はhtmlとは違うので、生成する記述が少し違う。次回の更新時に記述方法を追記します。(書いたよ→http://www.tomo.mobi/?p=594)

htmlのぶぶんにid設定
jsでDOMを指定するため。

 <path id="android" d="
M49,89c0,2.2,1.8,4,4,4h4v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h8v14c0,3.4,2.6,6,6,6s6-2.6,6-6V93h4c2.2,0,4-1.8,4-4v-40H49V89z 

M39,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C45,51.5,42.4,48.9,39,48.9z 

M107.1,48.9c-3.4,0-6,2.6-6,6v28c0,3.4,2.6,6,6,6s6-2.6,6-6v-28C113.1,51.5,110.5,48.9,107.1,48.9z 

M87.3,25.5l5.2-5.2c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0l-6,6c-3.2-1.6-6.8-2.6-10.6-2.6c-3.8,0-7.4,1-10.6,2.6l-6-6c-0.8-0.8-2-0.8-2.8,0c-0.8,0.8-0.8,2,0,2.8l5.2,5.2c-6,4.4-9.8,11.49.8,19.4h48C97.1,36.9,93.3,29.9,87.3,25.5z 

M65,36.9h-4v-4h4V36.9z 

M85.1,36.9h-4v-4h4V36.9z
" fill="blue"/>

jsぶぶん。DOMでCSS操作。 TweenMax等はGreensockのAPI。

(function() {
var container = document.getElementById('container');
var android = document.getElementById('android');


TweenMax.set(['svg'], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set([container], {
	position: 'absolute',
	//top: '50%',
	top: '100px',
	left: '50%',
	xPercent: -50,
	yPercent: -50
})

TweenMax.set(android, {
	transformOrigin: '50% 50%'
})

var tl = new TimelineMax({
	repeat: -1,
	paused: false,
	repeatDelay: 0,
	immediateRender: false
});

tl.timeScale(3);

tl.to(android, 10, {
	x: 150,
	y: 150,
	scale: 3,
	alpha: 0,
	ease: Power1.easeInOut
},'+=1')
})()

しかしながら、自由度はSMILの方がやはり高い。
SVGパスのアニメーション化はやはり諦めるしか無いのか・・・・(涙
CSS+javascriptでのアニメーションだけでは、今までと進歩が感じられ無いと思ってしまうのは私だけかな。
Flashのパスアニメーションをおもわず思い出してしまう。

でもでも、モバイル端末(※スマートフォン)でのコンテンツ作りにかかせないと思うのでもう少し勉強続けたいと思います。

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

SVGについて

SVGのアニメーションをやってみようと試みる。
まずは、svgについて知らなくてはなのです。

以下のサイトで勉強させて頂きました。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm←pdf版もある!

avgの描画部分。
自由なパスが引ける為にはのd属性に指示子でコマンドを知る必要があるとおもう。
丸や四角等のパスに関してはに比べればそれほど難しい記述ではないです。

指示子の大文字と小文字には意味があります。
例:A(絶対), a(相対)※d属性”楕円弧曲線命令”の場合。
大文字が絶対値で小文字は相対値です。

また、描画させる値の設定にはいくつか決まりがあります。
それは、画像の形により違うのですが、同じパス内で始点と終点は同じ座標は指定できないようです。同じ座標を指定しても描画できませんでした。閉じるコマンドがあるので、閉じる時は”z”を指定です。

特に慣れていない自分用に、見ただけではよく意味が分からなかったコマンドに関してのみメモとして細かい設定内容を記述します。もう少し勉強が進んだら増やすかも?
名称未設定-1
** 円を角場合の指定について
(rx ry x-axis-rotation large-arc-flag sweep-flag x y)の内容をd属性に設定

** x-axis-rotationについて
名称未設定-2
どのぐらいx軸回転されるかを設定。

** large-arc-flag sweep-flagについて
以下の図がとても分かりやすい。始点と終点が決まっている重なり合った円の場合4とおりの接続方法がある。どの方法でつながるかを指定できる。
参考文献:http://www.hcn.zaq.ne.jp/___/SVG11-2nd/images/paths/arcs02.svg
スクリーンショット 2015-10-14 9.20.01

Published by tomoka , on 10月 10th, 2015 at 8:48 am. Filled under: 未分類No Comments
この記事を読む

デザインをリニューアルする事を考えてみる

私のブログは閲覧数も少なく特にリニューアルする事は考える事はないのですが、リニューアルする事を考える機会はたびたびあるのでメリットやデメリットについて、今一度考えた事をまとめてみようと思いました。

デザインのリニューアルをするとは

私がそろそろリニューアルを考えるべきでは?と思うのはサービスを開始した(改善を加えた)時期からみて、以下のようなの時期が適切なのではないかと思っています。

  • デザインのテイストが今の流行と大きくかけ離れてきたとき。
    • アプリの場合はなおの事デザインの移り変わりが早いので、すぐかけ離れてしまうため、リニューアル時期は注意が必要。
    • システムの改善だけではリニューアルは分かりにくい。アイコンを変えるとかでも目に見える変化が無いと手入れされていないサービスに見える。
  • 使い勝手が悪い箇所を改善することが、簡易的なカスタマイズだけでは対応できない。
    • サービスを開始した当時の使い方からユーザーの使い方が変わってきた。
    • ユーザーの求めている情報が変わってきた(サービスを開始時の流行とか年代とかが変わった)。
  • ユーザの興味がずれてきて、ユーザーが減りつずけ増える気配がない
    • 今のユーザーにとって魅力のあるコンテンツなのか内容の見直し
    • デザインのリニューアルで、今のユーザー層にアピール

デザインのリニューアルはしない

リニューアルする事によって、今まで滞っていた箇所を一気に改善できるし、目に見えて改革が行なわれるためユーザーにも分かりやすい変化なのでサービスが充実して行くイメージも強く押し出せ、とても良い事だと思います。でも、リニューアルしない事は悪い事ではないです。リニューアルしなかった時のメリット、デメリットを考えてみました。

メリット

  • 人によっては使いやすい、見慣れた画面。学習コストがかからない。
  • デザイン以外の部分のカスタマイズで開発費や宣伝費を押さえてリニューアルできる。

デメリット

  • デザインが古い=情報が古いように見える。
  • 変わりばえしない画面では特別な機能を追加しても目立ったアピールがしにくい。
  • 目に見えた変化が無いので、サービスが放置され手入れが行き届いていないように見える。

デザインのリニューアルをする

そもそも、サービスの提供をしてすぐにリニューアルを迫られるとしたならば、それはもともと、企画段階から見直す必要が出てきます。
しかしサービスを開始してからある程度運営したサービスだった場合。開始当時からユーザーの使い方も思想も時の流れに沿って変化するので、時が経てばたつほどユーザーとの操作性や必要とする情報のずれが大きくなります。

特にアプリの場合はデザインのはやり廃りも早く、OSのアップデートも早いためUIUXもめまぐるしい早さで更新されてゆきます。
使い方は常に変化してゆくき、削除が特に変化したと思います。過去は削除する項目を選択し削除実行するのが普通でしたが、今では横にスワイプしたり長押しする事で手軽に削除する事が出来ます。また、簡単に削除できるようになったので、削除した直後元に戻すかどうかを聞いてくれるため、誤って削除した時にはすぐにもどす事が出来ます。

結論

リニューアルは必ずしも必要な事ではないですが、ある程度、ユーザーの端末の操作性やサービスの使い方にずれが出てきて、起動回数や利用者が減ったりするのならば、現状を把握して今のユーザーにあった使いやすいUIをどのぐらいの度合いでリニューアルとして組み込むかを、サービスの露出の方法やアプローチの方向性も含めて対策として、方向性も含め、検討する事がリニューアルするメリットを十分に活かせて良いのではと思います。

Published by tomoka , on 8月 23rd, 2015 at 8:11 am. Filled under: その他No Comments
この記事を読む

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

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

アイコン作成に関して

例として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/style/color.html)

キーカラー

原色を500として、プライマリカラーとアクセントカラーを記載しています。
※バージョンがA***となっているのは、アクセント用のカラーを指します。

色の選択方法

プライマリカラーとアクセントカラーをバージョンにAがついた2つ目のパレットから選択し、それぞれの色から3色相を選択することで、プライマリカラーとアクセントカラーの色使いを制限します。

透明度と重要度

style_color_uiapplication_alpha2 style_color_uiapplication_alpha1

テキストやアイコンの表示を他のテキストに比べていかに重要であるか伝えるために、テキストやアイコンの不透明度を変更して表現します。特にテキストはテーマを黒と白で選んだ時の透過度が変わります。
アルファ値の設定は明度でも彩度でもないので、色のバリエーションを増やすのみは指定しやすいのかなと思った。

暗い色のテーマ

Light text (#FFFFFF) Opacity
Primary text 100%
Secondary text 70%
Hint and disabled text and icons 30%

明るい色のテーマ

Dark text (#000000) Opacity
Primary text 87%
Secondary text 54%
Hint and disabled text and icons 26%

プライマリーカラーとアクセントカラーの指定

ツールバーとステータスバーの指定

  • ステータスバーの設定 プライマリカラーの700
  • ツールバーの設定 プライマリカラーの500

アクセントカラーの指定

  • アクションボタン、スイッチボタンの色に適応します。
  • テキストの場合。linkを設定するテキストのみなどにも利用します。

ここいらへんは、いままでのデザインの作り方とは大きくは変わらない。
コンバージョンを求める箇所に利用とかは良くつかってきたよね・・・・

アクセントカラーの特殊(?)なつかいかた

アクセントカラーの色の落とし方

アクセントカラーが機能できない場面に陥ったとき。例としてですが、アクセントカラーとして機能する為にはコントラストを十分に引き出す方向でアクセントカラーを作ります。
例えば、プライマリカラーの500が背景に使われてしまった場合、HSB色空間(Hue、Saturation、Brightness)のSaturation(彩度)を黒53% または 白100% にて調節してつかう。
画像は背景にプライマリカラーの500を使った場合で 黒53%
※ここら辺の言葉の意味が少し分からなかった・・・>< 英語力無い。

テーマに関して

アプリに一貫したテーマを選択します。明るいテーマと暗いテーマを用意してあります。
テーマは、明るいと暗いによって、表面の闇、影のレベル、およびインクの要素の適切な不透明度を指定できます。ページにテンプレートが用意されています。
http://www.google.com/design/spec/style/color.html#color-themes

いい加減、次の投稿の時にはCSS整えよう。
と、心に誓う。

Published by tomoka , on 7月 28th, 2015 at 11:50 pm. Filled under: AndroidNo Comments
この記事を読む