ピラミッドバー：シアンで頂点を迎える左右対称のバーグラデーション
ピラミッドバーは 9 本のバーを並べて「バーの形」を「ピラミッド」にし、バーが一段ずつ高くなって中央の最も高い 1 本に達し、反対側でまた低くなるようにしています。「電光の潮」パレットがロイヤルブルーからシアン、バイオレットへと列全体を横切り、各バーは真夜中のネイビーのベースの上で根元に向かって少し暗くなります。「アニメーション」はオンですが、形は崩れず、わずかなノイズが高さを呼吸するように揺らすだけなので、せわしないレベルメーターではなく落ち着いたイコライザーの頂点に見えます。
自分好みに仕上げる
頂点を谷に反転する
「バーの形」を「ピラミッド」から「谷」に切り替えると、最も高いバーが両端へ移り、中央に見出しを置けるくぼみができます。「波」にすると、列全体に転がるようなサイン波が描かれます。
段を広くする
「バンド」が 9 だと段の幅が広くなります。5 にするとピラミッドはどっしりした表彰台に、17 以上ではなめらかな階段になります。本数を奇数にしておくと、頂上にバーが 1 本だけ立ちます。
よくある質問
ピラミッドバーとソーラーバーの違いは何ですか？
ソーラーバーは「ノイズ」の形を使うため、バーの高さはランダムで、アニメーション中は変わり続けます。ピラミッドバーは位置で高さを決め、中央が最も高く端が最も低く、揺れはごくわずかです。中央に置いた製品写真の背景など、形そのものがデザインを支えるべき場面で選んでください。
使い方
出発点を選ぶ
ソフトメッシュ、日食の光芒、リソハーフトーンなど 28 のスタイルのいずれかから始めるか、グラデーションの種類と 24 のパレットのいずれかを選びます。
グラデーションを調整する
スケール、ゆがみ、渦巻き、柔らかさを調整し、グレイン、ガラスパネルやガラスタイル、ドット、グリッド、線のオーバーレイ、ブレンドした 2 枚目のレイヤー、ハーフトーンやピクセルソートなどの加工を追加します。アニメーションをオンにして、速度を個別に設定することもできます。
プレビューして使う
ランディングページ、カード、モバイル、新規登録のレイアウトでグラデーションを確認します。その後、無料の UX Pilot アカウントでログインすると、キャンバスで使用したりエクスポートしたりできます。