Constellationの既定のデザイン

デザインには、問題を解決する多くの方法があります。 モーダル内のNext ボタンの場所が一つの例です。 ボタンを右下に置き、本のページを開く必要のある企業もあります。 一部の企業は、それを下の中央に配置してより自然な読み取りフローを提供します。また別の企業は、重要な入力や情報がモーダルの一番上に表示される場合は、左揃えでボタンを配置します。 これらのソリューションはすべて、一貫性と読みやすさを解消するために機能しますが、小さな意思決定では、チーム間の計画時間と実装リソースの両方を消費します。 デザイナーに代わり、既定のデザインでこれらの問題の多くを解決します。 より簡単に言うと、既定のデザインにより、モーダル内の実際の内容と、アプリケーションを通したユーザーのフローでモーダルが意味をなすタイミングに焦点を当てることができます。

次の図は、ユーザーのワークフロー中にモーダルがどのように表示されるかを示しています。

Constellationデザインシステムでは、さまざまなツールやコンセプトを既定として使用しています。 アプリケーションデザイナーやデザイナーと緊密に連携する人は、デザイントークン、テーマ、パターン、コンポーネントという用語に精通している必要があります。

デザイントークン

デザイントークンは、複数のチャネルやテクノロジーにわたって重要なデザインとUXの原則を伝えるために使用されるツールです。 トークンは、ウェブ、デスクトップ、モバイル、ツール、アプリケーション全体でスタイル要素を統一するために使用されます。 Pega Platformアプリケーションはネイティブ要素とウェブデザイン要素が融合するため、Pega Platformアプリケーションではデザイントークンを使用することが重要です。

Constellationデザインシステムには、次の4種類のデザイントークンが含まれています。

一部のデザイントークンは、カスタムブランディングを可能にするために、アプリケーションをカスタマイズするときに編集できます。 たとえば、base.palette.brand-primaryなどのミーニングフルトークンや既定のカラーファミリーなどの基本トークンの変更などです。

テーマ

テーマは、ブランド基準に従ってアプリケーションのスタイルを設定するために使用されるシンプルな設定です。 

次の図は、テキスト、色、ボタンのブランディングを含むテーマの3つの例を示しています。

パターン

パターンは、反復と拡張が可能な、コンポーネントとユーザーフローの組み合わせで、一貫したエクスペリエンスを実現します。

次の図は、アプリケーションで再利用できるパターンの3つの例を示しています。

Constellationデザインシステムのパターンには、以下のようなものがあります。

• コンテンツを検索して選択するワークフロー（検索、選択、検索結果など）
• システムメッセージと応答（エラー通知、空の状態、ワーニングなど）
• メインナビゲーションとブレッドクラムによる情報の操作
• ワークステージの移動

コンポーネント

コンポーネントとは、特定の機能を実行するUI要素と組み合わせです。

次の図は、一般的なUI要素であるテキストフィールドを示しています。

ビジネス目標に焦点を当て、あらゆるコンテキストで完全に機能する可能性のある複雑なコンポーネントをウィジェットと呼んでいます。 たとえば、ユーザーがアプリケーションに初めてログインしたときに受け取るメッセージを定義できる、ホームページウェルカムウィジェットがあります。

以下のインタラクションで理解度をチェックしてください。

真のデザインシステムは、包括的で、簡単にアップグレードでき、既定のエクスペリエンスを生み出します。 デザインパターン、UIコンポーネント、技術的な動作、視覚的な取り扱いが相互に補完し、特定の方法で使用して一般的なビジネス問題を解決し、ユーザーのスピードとワークフローを改善し、アクセシビリティやローカリゼーションなどの法的要件を満たします。

ただし、これはデザインシステムに柔軟性や創造性がないことを意味するものではありません。 配置、コンテンツの表示、実行する作業の流れ、アプリケーションのブランディングに関する多くの最終的な意思決定は、システム上で作業するデザイナーが決めることができます。 デザイナーとしてアイデアを整理し、フローを最適化し、ユーザーが目標を達成し、ビジネスのニーズに応えるという、真に重要なことに集中することができます。 

次の図は、デザインシステムのさまざまな部分の関係を示しています。

以下のインタラクションで理解度をチェックしてください。