思った事などまとめてみます。YouTubeアニメーション、スタイルのページについてメモです。レイアウトのページ以降はまた次回に。Introductionhttp://www.google.com/design/spec/material-design/introduction.htmlメタファーは紙?カードは紙をイメージ、という話ですが、どうでしょうか?もし紙だったらテクスチャの質感や表示時に傾く、ゆれる演出が入るんじゃないかと思います。responseとか紙ですと均等に浮き上がったりしませんし、タップの広がりに連動して影も動くはずです。これは薄く重ねた表現ということで紙と言っているんではないかと思います。色のガイドラインの透明感にしてもプラスチックのようなものと考えるとよさそう。intentionalこの意図は携帯、タブレット、PCで統一するためかと思われます。ポイントとしては、外枠に線いれるのは今後なくなっていきそう。枠の太さに左右されないよう背景色で枠を見せてます。その分、色のコントラストがはっきりしていますね。Designでやると統一感がなくなってしまいそう。アニメーション基本http://www.google.com/design/spec/animation/authentic-motion.html動きの基本は2つです。Weight)加速して減速。等速移動をしてしまうと、開始時、終了時にどうしても目についてしまいます。意識させないアニメーションが大切。Frame)一定の下方向加速です。この場合は画面の外からですね。guidelineslinearはNG。タップ反応http://www.google.com/design/spec/animation/responsive-interaction.htmlマテリアルデザインで一番わかりやすいタップ位置から広がる演出など。人の行動に対してレスポンスを返す、といった内容になっています。Responsehttp://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-surface-responseオプションメニューの展開のような例があります。要は視線の動きにそった動きを作る事です。中心から拡大すると始点になにかあるのか意識させてしまう。基本はタップした位置から始まる。タップした時にはタップした場所をみているものなので。アニメーションは今どこを見ていて、次にどこを見せるか、というのが重要になります。動きで作るコンテンツファーストですね。トランジションに意味をつけるhttp://www.google.com/design/spec/animation/meaningful-transitions.html前後の画面で選択、詳細など関連性が強いとき、画面をひきつぐように見せる。なにがどこにいったか迷わせないため。遷移の切り分け方にも関わってきます。画面全体が切り替わることが少なくなりそう。Timinghttp://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing複数の同列の要素がある場合の表示方法。視線の流れに沿って考えるのが基本。やっていっていい時期ということでしょうか。Choreographyhttp://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-consistent-choreography並列要素に異なる動きをつけない。並列なものには順序がある。動きで目立たせようとしないこと。動きはコンテンツの中心にしない。guidelinesスタイルカラーhttp://www.google.com/design/spec/style/color.htmlポイントは基準となる色(500)があり、段階的にしている。段階は薄くなる方向と濃くなる方向がある。細かい差を使わない事。Applicationhttp://www.google.com/design/spec/style/color.html#color-ui-color-application主要な色は3色まで。このへんはデザインの基本的なことの話になってる。グレーの文字には透明度87%を使う。%まで指定は珍しいけど基本通り。ちなみにクックパッドandroidアプリのベースの文字色は#4a483fでした。ステータスバーの色は700(濃いめ)を。文字http://www.google.com/design/spec/style/typography.htmlフォントはRoboto。(アクセシビリティのため)サイズは段階的に。細かい差は作らず、同じサイズでboldで対比してみせるのもあり。行間の取り方にかなり余裕がある。改行は文にこだわりすぎない。文字間、大きなサイズになると狭く。アイコンhttp://www.google.com/design/spec/style/icons.html#周囲の余白の取り方は形による。