Elevation (エレベーション)

Indigo.Design システムでサポートされている 24 のエレベーションがあり、コンポーネントとパターン全体で使用されて、基になるコンテンツに影を表示します。Bottom Navigation や Floating Action Button などのコンポーネントは視覚的な階層を確立しますが、Registration または Login Form などの特定の要素をフロートさせることにも利用できます。Elevation は、マテリアルデザインエレベーション (英語) および Ignite UI for Angular Shadows と同じです。

Elevation のサポート

Elevation は単純なロジックに従っています。Elevation の数値が大きくなると、シャドウがより暗く表示されます。シャドウは umbra、penumbra、および ambient の 3 つが重なったシャドウカラーの組み合わせで値は Material Design の定義と一致します。

Figma では、エレベーションは ↳ Elevation という別のページに配置されます。ほとんどの場合、これらはコンポーネントのフレームまたはコンポーネント構造内の背景レイヤーに適用され、プロパティパネルで Effect スタイルとして使用できます。Sketch では、エレベーションは 🎨 Elevation という名前の別のページにあり、任意の図形に適用できる Layer Styles として使用できます。それらを使用するコンポーネントでは、このスタイルを正しいレイヤーに適用しました。これは、ほとんどの場合、マスクレイヤー、または特別に指定された Elevation 長方形です。Adobe XD では、エレベーションはライブラリファイルの左側の列にある同じ名前のアートボードに配置され、コンポーネントやパターン全体で使用されるコンポーネントとして存在します。

Note

コンポーネントのスタイルを変更して Elevation を変更することは Sketch と Figma で可能ですが、現在 Ignite UI for Angular では実装されていません。

Figma でスタンドアロン Elevation を使用

エレベーションを単独で使用するには (たとえば、コンテンツの一部を持ち上げて、残りの部分よりも多くのフォーカスを描画する場合)、それを効果スタイルとして別の背景レイヤーに適用するだけです。プロジェクト内でフレームを使用している場合は、フレームに直接適用できますが、エレベーションを表示するために必ず塗りつぶしのカラーも適用してください。

Sketch でスタンドアロン Elevation を使用

Elevation を単独で使用してコンテンツの一部を持ち上げて残りの部分よりもフォーカスする場合、コンテンツのサイズに一致する四角形に選択した Elevation Layer Style を適用します。

Adobe XD でスタンドアロン Elevation を使用

エレベーションを単独で使用するには、たとえば、コンテンツの一部を持ち上げて他の部分よりも焦点を合わせるには、そのうちの 1 つを Libraries パネルからアートボードにドラッグして、サーフェスとして使用し、その上に背景のカラーのレイヤーを含む残りのユーザーインターフェイスを追加します。ダイアログをデザインするときなど、角を丸くしたい場合があります。エレベーションをこれに合わせるには、[Layers] パネルから角を展開し、3 つの内部レイヤーを選択して、角の半径を目的の値に設定します。