UIトレースで学んだこと♯7 Facebookモバイル マテリアルデザインの教科書でした。
0. はじめに
こんばんは。時期が空いてしまいましたが、UIトレース７回目です。なぜ時期が空いてしまったかというと、「Facebookをトレースする前にマテリアルデザインを理解せねば」ということで、下記コースを受講していました。
Udemy大好きなんですが、https://t.co/jJl3AiwulF
— Araki Takashi (@Watazumi_py) December 15, 2020
Material Design×AdobeXDが同時に実践できるという俺得コースがとてもよかったです。注：英語です。
結果的に、上記を通じてマテリアルデザインの基本を理解することで、Facebookの凄みの一端を感じ取れたのでこの順番で取り組んでみてよかったと感じています。
今回のトレースからの学びはElevationについてです。
1. Elevation(高度)について
マテリアルデザインの基本概念として、Elevation（高度）という概念があります。
Facebookでは一つのパーツに見えるものも、視覚的に自然に見えるよう各パーツに丁寧に高度が設定されていることがトレースすることで実感出来ました。上の画像で、1が最も高く、４が最も低く位置されるように設定がされています。特に下部のところが細かく階段が設定されていて、トレースするまでわからなかった丁寧なUIがみて取れました。
2. Elevationの区切りについて
・区切る方法について
シャドウではなく、グレーラインで表現されていました。通常シャドウで表現することが多いと思っていたのですが、フラットさ（視線をスムーズに流すため）を崩さずに、Elevationを表現する方法として採用されていると推察します。
・グレーラインの差別化について
段階を表現するために、グレーラインの太さやopacityで丁寧に表現されています。ラインの太さも小数点以下のレベルで設定されています。
3. 最後に
今回はElevationに絞ってトレースからの学びをまとめました。
本当はもっと範囲を広くやろうと思っていたのですが、パーツ一つにUIの工夫が多く詰まっており、テーマを絞ることにしました。
今後も発見があるたびに記事を追加していこうと思います。
引き続きマテリアルデザインに注目しながらトレースを継続していきます。