nanisore oishisou

Webエンジニアあるまさんのゆるふわ奮闘記。

マテリアルデザインのモーションのドキュメントを翻訳してあげた

どうも! コーディング中にマテリアルデザインのページにMotionのページが追加されているのに気がつきました。5月ごろに追加されたみたいです(気づくの遅)。 https://material.google.com/motion/material-motion.html (マテリアルデザインが何だか知りたい人はGoogleで検索よろしく!!) 結構、マテリアルデザインのコンセプトって読んでみるとなるほどねーって感じで面白いんですが、英語なので読む気が湧かないじゃないですか。 だから今回は私が翻訳してあげました(ドヤ顔)。 忙しいのに翻訳してあげたんだから、みんな感謝してよねっ!(なぞのツンデレキャラ)

マテリアルモーション

マテリアルデザインの動きは、美しく流動的に、空間の関係、機能、および意図を説明するために用いられるものである。

動きはなぜ重要なのか?

動きは、どのようにアプリが構成されていて、何ができるのかということを示すことができる。

動きが提供するもの

  • ビュー間での焦点のガイド
  • もしユーザーがジェスチャーを完遂したら何が起こるのかのヒント
  • 要素間での階層的、かつ空間的な関係性
  • 裏で起こっていることから注意をそらすこと(コンテンツの取得や次のビューのロードなど)
  • 特色、洗練さ、喜び

マテリアルはどのように動くか?

マテリアル環境は、重力や摩擦といった現実世界の力から得たインスピレーションを描くものである。 これらの力は、ユーザー入力が画面上の要素に影響する際や、どのように要素が相互に作用するかということを映し出すものである。

マテリアルなモーションの特徴

レスポンシブ

マテリアルはユーザー入力には素早く正確に反応する必要がある。

ナチュラ

マテリアルは現実世界にある力からインスパイアーされた自然な動きを表現する。

認識力がある

マテリアルはユーザーや周りにあるマテリアルを認識していて、オブジェクトに引き寄せられたりユーザーの意思に適切に反応できる。

意図的

正しい時に、正しい場所へユーザーの焦点を誘導する。

よいトランジッションを作る要素は?

動きはスピーディーに

必要以上にユーザーを待たせるべきではない。

動きは明確に

トランジッションは、明確で簡潔で統一感があるべきである。 一度にやりすぎるのは避けるべき。

動きは調和的に

マテリアル要素は速さ、反応性、意図によって統合される。 アプリケーションのモーション体験は、そのアプリケーション内で一貫している必要がある。

動きの結果

動きを使うことによる利点は、次の、マテリアルモーションを採用したアプリと、していないアプリの2つの例を見ることで確認できる。

※上記の翻訳は、個人的な翻訳であり、正確さを保証するものではありません。 あと、専門用語で言うところのベタ翻訳だから読みづらいとか、そういう苦情は一切受け付けない。 ではでは、またねーーー!!