Webデザイナーのためのアトミックデザイン入門

アトムは単なるHTML要素ではなく、 所属スタイルも：フォント、色、寸法、その他のCSSスタイルルールブラッド自身の言葉で、原子 “一目ですべての基本的なスタイルを実演”.

アトム - 例

これが私たちのウェブサイトからの例です。お勧めの投稿の見出しは、説明するかもしれません 一種類の原子;彼らは 同じHTMLコードとCSSコード とすることができます 簡単に区別 他のコンテンツから.

Hongkiat.comはアトミックデザインを念頭に置いて設計されていないことに注意してください。 デモ用.

アトミックデザインの本質は、 これら5つの段階を使用して下から上にUIを設計する, 後でアトミックデザインコンポーネントを識別しない.

分子

A 分子 形成される 原子団による. 分子はアトミックデザイン階層の次の段階を構成します。既に存在している、より単純なUI要素について考えてください。 複数のHTML要素からなる, 検索フォームやサイドバーのおすすめの投稿など.

分子に組織化されている 目的を与える 各原子に。より大きなグループ（分子）では、原子は サポートと補完 お互いに、彼らはする必要があります 一緒に働く 使えるデザインをつくるために.

たとえば、タイトル（1つの原子）は もっと強調する 推奨ポストブロック内の作者の名前（別のアトム）より（大きいフォント、太いウェイトなど）。このように、二つの原子は “意味した” に チームとして働く 最良の結果を得るために.

分子 - 例

前の例を使用すると、Hongkiatのサイドバーでは、1ブロックの推薦記事が分子と見なされることがわかります。推奨されるポスト分子は 3つの原子で構成されている：サムネイル、タイトル、そして作者の名前アトム.

3.生物

有機体は、 分子のグループ、原子 （時には 他の生物）. Webデザインでは、生物は より複雑なUIコンポーネント それを表す 決定的なセクション ページのヘッダー、フッター、サイドバーなど.

生物はどちらかで構成することができます さまざまな種類の分子, たとえば、サイドバーは検索バーとさまざまな種類のウィジェットで構成されます。 同じ分子が数回繰り返された, 例えば、一握りの関連する投稿ブロックがお互いの下にあります。そして、それはこれら二つの組み合わせかもしれません.

生物 - 例

Hongkiatのウェブサイトでは、サイドバーは有機体かもしれません。それはで構成されています 検索バー （一種類の分子、一度だけ表示） いくつかのおすすめの投稿 （他の種類の分子、何度も表示されます）.

ただし、サイドバー生物は、 分子 （検索バー） 他の生物 （いくつかのおすすめの投稿があるおすすめの投稿ウィジェット）。アトミックデザインは フレキシブルモデル, 規則はそれほど厳密ではないので、この場合は分子と生物の両方として同じビルディングブロックを定義できます。.

4.テンプレート

アトミックデザイン階層の次の段階は テンプレート. ご覧のとおり、これがアトミックデザインのときです。 化学アナロジーの使用を中止する. ブラッドは、現時点で用語を控えています。 わかりにくい クライアントや他の利害関係者のために、そしてそれは本質的にデザイナーが販売する必要がある2つの最後の段階（テンプレートとページ）です.

テンプレート 有機体で構成されています。彼らです ページレベルのオブジェクト しかし 最終コンテンツなし. テンプレートの目的は 構造を表す 基礎となるコンテンツの.

テンプレートは、原子、分子、有機体の違いを表示します。 “レイアウトのコンテキストで一緒に機能する”. それらは基本的に ページの骨格.

テンプレート - 例

例として、 ホームページテンプレート プレースホルダ画像とLoremイプサムテキストブロック.

以下は、Atomic Designの本の一例です。 TimeIncマガジンのホームページテンプレートです。原子、分子、そして生物はすべてその場所にありますが スケマティックコンテンツのみ.

5.ページ

ページ数 アトミックデザイン階層の最終段階を表します。ページは “テンプレートの特定のインスタンス”. ページステージでは、テンプレートは 実際のコンテンツが入力されている 実際のUIに表示されるのと同じように（コピー、マイクロコピー、画像、ビデオなど）.

ページはデザイナーがどのように 最終的なユーザーエクスペリエンス のようになります デザインをテストする 実際のユーザーと、そして それがどれだけうまく機能するかを測定する ユーザビリティ、コンバージョン、アクセシビリティ、およびその他の指標の観点から.

ページとテンプレートのバリエーション

ページステージのもう一つの目的は作ることです テンプレートのバリエーション 可能。基本となるテンプレートのバリエーションについて説明します。 テンプレートは同じです しかし人口が多い 内容は（わずかに）異なります. たとえば、異なるユーザーグループに異なるコンテンツを表示したい場合（訪問者とログインユーザーの場合など）、ある見出しが他の見出しよりもはるかに長い場合などです。.

テンプレートのバリエーションを使用することは、作成したい場合に非常に重要です。 一貫性と回復力 ユーザインタフェースより小さな成分（原子、分子、有機体）は さまざまなシナリオでうまく機能する.

たとえば、ボタンは次のようにクリック可能に見えなければなりません。 周囲の要素が何であれ. それが特定のバリエーションで実用的に見えないならば、あなたはそれがなるまでボタンアトムを再設計する必要があります すべてのユースケースに適合.

ページ - 例

以下に、前のTimeIncホームページテンプレートのページステージを見ることができます。違うよね？これだけ 1つのテンプレートバリエーション, しかし。効果的なUIを実現するには、設計チームは慎重に検討する必要があります。 何が変わるのか 実際のサイトで。それから、そのテンプレートのバリエーション（ページ）のデザインをテストする必要があります。.