カラーパレット
マテリアルデザインのカラーパレットの場合、Googleはバリエーションのある「2色」システムを好みます。
たとえば、この写真のように。原色は紫、二次色はシアンになります。次に、UIの他の要素には、紫とシアンのシェードバリアントを使用するため、すべてがブレンドされます。
この マテリアルデザインエディター は、カラーバリエーションをまとめるのに役立つ非常に便利なツールです。次のようなプロのUI / UXデザインエージェンシーからのインスピレーションを探すこともできます 粘土 、またはこのリスト 一流のウェブデザイン会社 2019年に。
レスポンシブグリッドレイアウト
レスポンシブグリッドレイアウトを理解することは、 画素密度 自動画面適応が機能します。ほとんどの場合、Androidフォンの平均DPIは300〜480DPIです。
これを念頭に置いて、300 DPI画面は通常、最大4列を表示できます。
一方、600 dpiの画面では、最大8列が表示されます。
各列の間には「溝」があり、基本的には各列を区切る領域です。したがって、360dpのモバイルでは、各ガターは約16dpになります。
画面のDPIを理解する
UIを設計するときは、システムUIであろうとアプリのUIであろうと、さまざまな電話サイズのさまざまなピクセル密度を考慮する必要があります。最も一般的な画面解像度とピクセル密度のグラフは次のとおりです。
したがって、経験則として、「グローバル」なテーマまたはアプリを設計する場合、単一のデバイス用のテーマの作成に焦点を当てない場合は、最低の密度から始める必要があります。これは、デザインを1xで開始する場合、ピクセル単位で測定するだけで、DP間で値が同じままになるためです。
ただし、3.5x用に設計する場合は、他の密度に適応させるためにすべての値を3.5で割る必要があります。そうすると、複数のDP値を計算する際の頭痛の種になります。
Android 10 UI / UXデザインに関する追加のヒント
ラジオ、ボタン、チェックボックスなどのテーマコンポーネントにカスタムカラーが必要な場合は、 ない ドローアブルを使用してさまざまな状態を表示します（ チェック、クリックなど） 。ドローアブルを使用すると、ネイティブのマテリアルデザイン効果が失われるためです。 （波紋のように） GoogleはAndroid9とAndroid10で大幅に更新しました。
マテリアルデザインを使用する場合、Googleには利用できる多くの機能が含まれており、それらはUI / UXでより自然に流れます。
たとえば、マテリアルデザイン要素が組み込まれたテーマコンポーネントのキーワードをいくつか示します。アプリまたはUI / UXは、ネイティブのシステム動作とUI状態を引き続き利用できます。
カスタムカラーのボタンandroid：backgroundTint = '@ color / red' -----カスタムカラーのラジオボタンandroid：buttonTint = '@ color / red' -----画像とアイコンandroid：drawableTint = '@ color /赤 '-----カスタムカラーのProgressBarandroid：progressTint =' @ color / red '
カードビューモードのようにコンポーネントの下に単純な影を表示するには、elevationプロパティを使用する必要があります。
android：elevation = '1dp'
タグと親プロパティをマージすると、制御と管理が容易なXMLファイルを提供するのに非常に役立ちます。
アニメーション化されたレイアウトの変更は、UXを本当に改善することができ、ほぼすべてのViewGroupがこれを尊重します。したがって、ビュー階層に変更があると、アニメーションが付属します。少しのノウハウで、デザインすることもできます カスタムトランジションエフェクト 。
android：animateLayoutChanges = 'true'タグ アンドロイド 開発 読んだ4分
