アトミック デザインは、デザイン システムを原子、分子、有機体、テンプレート、ページと呼ばれる小さな再利用可能なコンポーネントに分割する方法論です。アトミック デザイン原則を利用することにより、次の手順に従って一貫性のあるデザインを実現できます。
1. スタイル ガイドを確立する: デザイン システムの視覚的でインタラクティブなパターンを定義するスタイル ガイドを作成します。このガイドには、タイポグラフィ、色、間隔、その他のデザイン要素に関するガイドラインが含まれている必要があります。これにより、すべてのコンポーネント間の一貫性が確保されます。
2. 原子、分子、生物を特定する: インターフェイスを分析し、ボタン、入力フィールド、アイコンなどの最小の独立した要素 (原子) を特定します。これらの原子は結合して、フォームやカードのような分子を形成します。生物は、ナビゲーション バーやヒーロー セクションなど、原子や分子で構成されるより複雑なコンポーネントです。
3. アトミック コンポーネントの作成: 各アトミック コンポーネントを個別に構築し、複数のコンテキストで再利用できるようにします。各コンポーネントは、確立されたスタイル ガイドに準拠しながら、機能的および美的要件を満たし、それ自体が一体となっている必要があります。
4. テストと反復: さまざまなコンテキストで各アトミック コンポーネントをテストし、必要に応じて調整を行います。それらがうまく連携し、全体的な設計ビジョンに準拠していることを確認します。必要に応じて、コンポーネントを再検討して繰り返します。
5. テンプレートとページを作成する: 基本コンポーネントの確実なセットを取得したら、それらを組み合わせてテンプレートとページを作成します。テンプレートは特定のページ タイプの構造とレイアウトを定義し、ページは実際のコンテンツが含まれるそれらのテンプレートの実際のインスタンスです。事前定義されたアトミック コンポーネントを利用することで、インターフェイス全体で一貫性のある一貫した設計を保証できます。
6. 一貫性を維持する: アトミック コンポーネントを定期的に確認して更新し、スタイル ガイドの変更や更新と一致していることを確認します。全体の凝集性を維持するために、原子コンポーネントに加えられた変更はシステム全体に一貫して伝播される必要があります。
アトミックな設計原則に従い、再利用可能なコンポーネントのシステムを構築することで、一貫性を提供し、冗長性を削減し、設計プロセスの効率を促進する一貫した設計を実現できます。
発行日: