Googleのマテリアルデザイン仕様はもともとは、プラットフォーム上でのデザインの一貫性を提案する方法として、Androidプラットフォームを対象としていました。
01/06
Adobe Experience Design CCでマテリアルデザインカードを作成する方法
デザイナーがそれを突き刺し、その背後にある考え方を理解すると、マテリアルデザインは静かにウェブとモバイルデザインにおける最も影響力のある視覚哲学の1つになっています。 私たちが何を得ているかを見るために必要なことは、Pinterestのマテリアルデザイン検索を行うことだけです。デバイス、タブレット、さらにはウェブサイトでも何百もの例と実験が見られます。
マテリアルデザインの魅力的な側面は、アプリがモバイルデバイス上でどのように表示され、動作するかというGoogleの考えですが、そのコンセプトはどのプラットフォームのどの画面でも適用されています。 Googleが仕様の冒頭の段落で述べているように、「技術と科学の技術革新と可能性を備えた優れた設計の古典的原則を合成するユーザーの視覚言語を作成することに挑戦しました。 これは材料設計です。 この仕様は、材料設計の教義と仕様を引き続き発展させながら、更新される生きた文書です。
話題は、非常に一般的に言えば紙であり、マテリアルデザインの特徴はカードです。 サーフェス上のインデックスカードを考えると、正しい軌道に乗っています。 カードとは、写真、ビデオ、テキストリンクなどを含む要素ですが、ほとんどのインタラクティブデザインとは異なり、1つのテーマに集中することを意図しています。 カードには丸みのある角があり、表面の上にあることを示すかすかな影があり、それらがすべて同じ平面上にある場合は、「コレクション」と呼ばれます。
この「How To」では、仕様に基づいてカードを作成します。 さまざまなイメージングツールと描画ツールでカードを作成するのではなく、別の方向からカードを作成します。 私たちは現在、Macintoshのみの公開プレビューにあり、フリーであるAdobeのExperience Designのツールを使用します。 ここでダウンロードできます。
始めましょう。
02の06
Adobe Experience Design CCでプロトタイプのアートボードを作成する
Experience Design CC（XD）の開始画面からAndroidスクリーンを作成する明白な方法はありません。 XDを開いたときに使用していたのは、iPhone 6オプションを選択することでした。インターフェースが開くと、ツールバーの一番下にあるArtboardツールを選択し、右のPropertiesパネルの選択肢からAndroid Mobileを選択します。 その後、選択ツールに移動し、iPhoneのアートボードの名前を一度クリックし、アートボードを削除します。 もういや。
XDの現在のバージョンでは、iPhone 6の横に小さな矢印があり、クリックするとドロップダウンメニューが開きます。 そこからAndroid Mobileのバージョンを選択し、選択したAndroid Mobileのアートボードをインターフェイスで開きます。
カードのために適切なスクリーンスペースを確保するために、通常はSketch 3に行き、ステータスバー、Nav Bar、Appバーをコピーしてマテリアルデザインテンプレートからアートボードに貼り付けます。 Sketch 3.2にはMaterial Designテンプレート（ File> New From Template> Material Design ）が含まれています。もう1つは本当に良い無料のKyle Ledbetterのものです。 Sketchをお持ちでない場合は、 [ファイル]> [UIキットを開く]> [Googleマテリアル]のXDステッカーからコピーして貼り付けることができます。 Photoshop、Illustrator、After Effects、Sketchで使用するためにGoogleからダウンロードすることもできます。
03/06
Adobe XDのCCアートボードにマテリアルデザインカードを追加する
XDの最も有用な機能の1つは、 Apple iOS、Google Material、Microsoft Windows用のUIキットが含まれていることです。 多くの点で、「Rapid Prototyping」という言葉に「Rapid」という言葉が追加されています。また、Photoshop、Illustrator、Illustratorなどのデザインアプリケーションで一般的なUI要素を再作成する必要がないという点で、スケッチ。
必要なUI要素はカードでした。 そのためには、「 ファイル」>「UIキットを開く」>「Googleマテリアル」と選択し、キットを新しいドキュメントとして開きます。 私たちが必要とした要素は、カードのカテゴリにありました。
これらについて私たちが気に入っているのは、Content Blocksのスペックと、Typography仕様に書かれているテキストフォーマットとスペーシングスペックに示されているMaterial Design仕様に従っていることです。
私たちが望んでいたカードのスタイルは、左下のものでした。 単にマウスでマーキーし、クリップボードにコピーします。 残念ながら、XDには開いているドキュメント用のタブ付きインターフェイスは含まれていません。 私たちがやっていることは、開いている文書ウィンドウを少し下に移動して、作業中の文書ウィンドウを表示し、選択して貼り付けます。 開いているXDドキュメントをすばやく切り替えるもう1つの方法はCommand- 'を押すことです。
04/06
Adobe Experience Design CCでマテリアルデザインエレメントを編集する方法
XDのカードがクリップボードから到着したときに、気楽に作業を開始しません。 最初に行う必要があるのは 、カードを構成するビットとピースにアクセスする必要があるため、カードをグループ解除することです。 これを行うには、カードを選択し、オブジェクト/グループ解除を選択するか、 Shift + Command + Gを押します。
あなたのカードは3つの部分で構成されています：
- 画像の明るい灰色のボックス。
- テキスト用の中程度の灰色のボックス
- バックボックスは背景として使用されます。
最初の手順は、明るい灰色のボックスを削除することです。 その唯一の目的は、あなたが選択した場合、それをオプションにするイメージのプレースホルダーとして機能することです。
テキストの入ったボックスは実際には50％の不透明度を持つ暗いグレーです。 このボックスはテキストの背景として使用でき、色とボックスの不透明度を変更することができます。
すぐにはわかりませんが、明るいグレーのボックスは、その上隅が2ピクセルで丸められているという点でマテリアルデザイン仕様に従います。 イメージを追加する場合は、この点を念頭に置いてください。 また、イメージングアプリケーションやXDに追加できる丸いコーナーも必要です。
これがどのようにカードの静止状態であるかを見ると、影も必要です。 この仕様では、2ピクセルのカードが静止していることが明らかになっています。 これを追加するには、黒い背景形状を選択し、プロパティパネルでYとB（ぼかし）の値を2に設定します。
05/06
Adobe XD CCのマテリアルデザインカードにイメージを追加する方法
カードの幅が344ピクセルで、画像の領域が150ピクセル（ ライトグレーの高さの半分）であることを知っているPhotoshopで画像を開き、Photoshopの[ 名前を付けてエクスポート ]ダイアログで@ 2xオプションを使用してサイズに合わせて保存しましたボックス。 イメージはAdobe XDにインポートされました。
次に、薄い灰色のボックスをペーストボード上の画像の上にドラッグし、 [オブジェクト]> [マスクでシェイプ]を選択しました。 その結果、画像は形状の丸みを帯びたコーナーをピックアップしていました。 その後、イメージを最終的な位置に移動しました。
画像を配置した後、ミディアムグレーボックスの背景色を変更し、テキストとリンクテキストの色を変更しました。
06の06
Adobe XD CCグリッド機能の使用
カードが完成したら、マテリアルデザイン仕様に従って適切に配置する必要があります。 つまり、カードの両側に8つのピクセルがあり、カードはアプリバーの8ピクセル下にある必要があります。 これを行うには、アートボード名を一度クリックし、プロパティパネルで[グリッド]を選択します。 アートボード上にグリッドが表示されます。
デフォルトのグリッドサイズは8ピクセルで、マテリアルデザインでは同じグリッドサイズになります。異なるサイズが必要な場合は、グリッドエリアで値を変更します。 グリッドの色を変更する場合は、カラーチップをクリックし、結果のカラーピッカーから色を選択します。
グリッドが表示された状態で、カードをクリックして最後の位置に移動します。
終了するには、カードを選択し、[グリッドの繰り返し]ボタンをクリックし、カード間の間隔を8ピクセルに変更しました。