Material Design輪読＃1　原則〜スタイル

Introduction

UI/UXデザイナーになるために必須となるMaterailDesignの概要を理解するために数項目ずつ学んだことを記録していくシリーズ＃1

原則

材料はメタファー(比喩)

光を反射したり影を落としたりする方法など、物理的な世界とのそのテクスチャ(質感)に触発されている。

グラフィック

色、画像などの印刷デザイン手法に基づいて、視聴者を体験に没頭させる階層、意味、焦点を作成。

モーション

注意を集中させ、遷移を通じて継続性を維持する。
環境を変換および再編成し、新しい変換を生成
⇨階層、焦点を変える

コンポーネント

ユーザーインターフェイスを作成するためのインタラクティブな構成要素。

• 表示：カード、リスト、シートなどのコンポーネントを使用してコンテンツを配置および整理します。
• ナビゲーション：ユーザーがナビゲーションドロワーやタブなどのコンポーネントを使用して製品内を移動できるようにします。
• アクション：ユーザーがフローティングアクションボタンなどのコンポーネントを使用してタスクを実行できるようにします。
• 入力：ユーザーがテキストフィールド、チップ、選択コントロールなどのコンポーネントを使用して情報を入力したり、選択したりできるようにします。
• コミュニケーション：スナックバー、バナー、ダイアログなどのコンポーネントを使用して、重要な情報やメッセージについてユーザーに警告します。

テーマ・色

テーマ

ボタンなどのマテリアルコンポーネントの色などはブランドに合わせて簡単に変更できる。

material_design_theming.mp4

209 KB

ファイルダウンロードについて

ダウンロード

色

UIに色を適用するための体系的なアプローチ。
プライマリーカラー(画面上の基本となる色)、セカンダリーカラーを基本とする。
全ての色には、一貫性とアクセス可能なコントラストを促進するために、その「上」に配置された要素に使用される補色がある。
補色とは？ 効果・意味・反対色との違いを解説

タイポグラフィ(読みやすく美しい文字にする手法)

インターフェイス内での明確な意味と意図されたアプリケーションがあります。

形

シェイプスタイル
⇨注意を向けたり、コンポーネントを識別したり、状態を伝えたり、ブランドを表現したりするのに役立つ。
全ての材料コンポーネントはサイズに基づいて形状カテゴリーにグループ化される。