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