Adobe XDでニューモーフィックデザイン(ソフトUI)を作成するにはどうすればよいですか?

May 09 2022
Neumorphism(New + Skeumorphism)は、UIデザインの最新トレンドです。フラットとスキューモーフィズムのテクニックを組み合わせたビジュアルスタイルです。

Neumorphism(New + Skeumorphism)は、UIデザインの最新トレンドです。フラットとスキューモーフィズムのテクニックを組み合わせたビジュアルスタイルです。Neumorphismの目的は、背景色、ハイライト、シャドウ、グラデーション、および形状を使用したデザインのスイッチとボタンに強度を与えることです。

ニューモルフィック要素には、上向きの明るいボックスシャドウと下向きの暗いボックスシャドウが含まれます。この影のために、UIコンポーネントが画面から飛び出しているように見えます。視覚化しながら、ユーザーは3次元形式のデザインを見ることができます。

興味深いですね?ソフトユーザーインターフェイスを作成する方法について説明しましょう。

入門

まず、デザインのカラーパレットを定義する必要があります。以下のカラーパレットの簡単に適用できる参照を共有します。

#193566、#ECF0F3、#FFFFFF、#D1D9E6、#707070、#97A7C3

次に、次の手順に従います。

  • 任意のサイズの新しいアートボードを作成します
  • 長方形ツールを選択し、長方形を描画します
  • キーボードのAltキーを押しながら図形をドラッグして複製します
  • 両方の長方形を選択して、角を丸くします
  • アセットパネルに移動し、アートボードに色(#ECF0F3)を適用します
  • 形状を選択し、同じ色(#ECF0F3)を長方形に適用します

2つの重要な要素を扱います。それらに「up」要素と「down」要素という名前を付けましょう。up要素が上向きに投影されているため、左上隅に光源があると想像してください。次に、左上隅に強調表示された領域があり、右下隅に影の領域があります。

同様に、ダウン要素の場合、平面からの深さにあると想定されるため、明るい領域は右下隅にあり、影は左上隅に表示されます。ベース形状。

これまで私と一緒に?

本物のデザイン

それをAdobeXDに変換しましょう。

  • レイヤーパネルに移動し、長方形の名前をベースに変更します。3つの同じ形状が必要なので、ショートカットCtrl+Tを使用してベースレイヤーを2回複製します。
  • 次に、2番目のレイヤーの名前を「light」に、3番目のレイヤーの名前を「shadow」に変更します。この後、レイヤーパネルは「ベース」→「ライト」→「シャドウ」のようになります。
  • 3つのレイヤーをすべて選択し、境界線を削除します
  • ライトレイヤーを選択し、ライトシャドウを追加します
  • プロパティパネルからシャドウオプションを選択し、不透明度100%の色として白(#FFFFFF)を選択します。次に、両方の軸で負の15にオフセットし、ぼかしを25に設定します。
  • 次に、シャドウレイヤーをクリックして、不透明度が50%の暗い色(#97A7C3)のシャドウを作成します。
  • シャドウを反対方向に同じ距離でオフセットし、ブラーを25に設定します。次に、レイヤーをグループ化し、後で使用するために「上」に名前を変更するか、後で使用するためのコンポーネントにします。

私たちはまだ設計の途中です。2番目の効果の作業を始めましょう。

  • 長方形を選択し、名前をベースに変更して2回複製します
  • 最上層から境界線を削除し、塗りつぶしの色を変更します(任意の色、その形状を使用してマスクするので問題ではないため)
  • トップレイヤーを非表示にし、2番目と3番目のレイヤーの名前をそれぞれライトとシャドウに変更します
  • レイヤーパネルからこれらのレイヤーの両方を選択し、サイズ5ピクセルの境界線を適用します
  • ライトレイヤーを選択し、左上隅のアンカーポイントを使用して展開します
  • シャドウレイヤーについても同じようにしますが、右下隅のアンカーポイントを使用します
  • 次に、明るいレイヤーを選択して境界線の色を白(#FFFFFF)に変更し、影のレイヤーを選択してその境界線の色を選択した暗い色合い(#97A7C3)に変更します。
  • ベースレイヤーの可視性を切り替えます
  • 3つすべてを選択し、右クリックして、シェイプオプションを使用してマスクを選択します
  • そして最後のステップとして、マスクグループの名前をdownに変更します

ボーナスのヒント:

複数のアートボードで使用するコンポーネントとしてそれらを追加することもできます。これらは、ボタンのテキストフィールドおよび画像プレースホルダーとして使用できます。それらを簡単に組み合わせて、さまざまな結果を得ることができます。

例を示しましょう。これは、ソフトUI要素を使用したサインインエクスペリエンスであり、AdobeXDでアニメーション化されています。

作成者: Falguni Rawat、アシスタントデザイナー

© Copyright 2021 - 2022 | hachiwiki.com | All Rights Reserved