web-dev-qa-db-ja.com

マテリアルデザインでナビゲーションバーに高さ64ピクセルを使用する理由

マテリアルデザインのさまざまな実装を確認したところ、すべてに64pxの高さがあるようです。なぜでしょうか。に基づく計算は何ですか?なぜ65pxまたは50pxではないのですか?

4
bhantol

主な理由は、バーのボタンの適切なタッチターゲットサイズを確保するためです。 MD仕様では、これらを少なくとも48ピクセルにすることを推奨しており、ほとんどの場合、両側に8ピクセルが必要です。 enter image description here

ただし、マテリアルデザインのアプリバーは実際には常に64pxとは限りません。

モバイルデバイスでは56pxです。これは、16pxのパディングと40ピクセルのアイコンの高さで構成されています。
enter image description here

デスクトップでは64px: enter image description here

高密度バージョンは48pxですが、 enter image description here

または、目立つアプリバー128pxの場合: enter image description here

5
Meli

材料設計ガイドライン によると:

すべてのコンポーネントは、モバイル、タブレット、およびデスクトップ用の8 dpの正方形のベースライングリッドに揃えます。ツールバーのアイコンは、4 dpの正方形のベースライングリッドに合わせて配置されます。

要素は8の倍数を共有します enter image description here

4
Mike M