原子設計方法論：体系的なUIを作成して再利用します。

人生の本当の問題：「美しいウェブサイト...しかし、なぜどこでも頭痛の種？」

UI/UX、プロダクトマネージャーのデザイナー、またはビジネスオーナーでさえ、この状態を経験したことがありますか？ Webやアプリを初めて起動するときは、すべてが美しい順序に見えますが、時間が経過したとき...新しい機能を追加したいとき、または小さなボタンのデザインを修正するためだけに、すべてが壊れ、悲惨です

Aページのボタンは、Bのボタンとは異なり、サブスクリプションページで使用される色は支払いページの別のシェードです。開発者は座って、似たようなコンポーネントの新しいコードを書く必要があります。繰り返し...最後に、「秩序がなくても素晴らしいウェブ」を拡張または維持するために、時間と予算を信じられないほど無駄にする悪夢を拡大または維持することがわかりました。

あなたがうなずいている場合、あなたはこの問題に直面していません。これは、最も「良い」デザインの「痛み」です。

プロンプト：ウェブサイトの2番目の側にあるウェブサイトのUIのグラフィックは（左側に一貫性のないボタン、カード、フォントが表示されます。混oticとしてください。右側（後）は、すべてのコンポーネントが秩序だった美しく見えるUIを示しています。

なぜその問題が発生するのか：「ページ」のみに見えるデザインは「システム」に見えない。

すべてのカオスのルートは、通常、間違った設計方法によるものです。 「ホームデザイン」、「製品デザインの詳細」、「私たちと連絡先のデザイン」など、「ページ」（ページベースのデザイン）であると教えられる傾向があります。最初のこの種の考え方は速いかもしれません。しかし、長い目で見れば、それは良い災害です。

メインとして「ページ」に基づいて設計すると、これらの要素が他の場所で使用されるか、これらの問題が発生しないとは思わずに、そのページのさまざまな要素を作成するからです。

• 矛盾（矛盾）：異なるデザイナーまたは異なる時期に同じ人でさえ、各ページで異なる色合い、サイズ、または影を備えた「青いボタン」を作成する場合があります。
• 冗長な作業：開発者は、「ユーザープロファイルボックス」のコードを繰り返し作成する必要がありますが、1回だけ作成する必要があり、再度使用できます。
• センターの中心に欠けている（真実の単一のソースはありません）： 「メインボタン」が本当に正しいことを誰も知らない。どうですか？誰もが自分の理解に従って働いています。

この種の作業は、都市計画なしで都市を建設することと違いはありません。誰もが彼が望むように家を建てました。最終的に、都市は混雑していて、方向性なしに育ちました。

プロンプト：漫画のデザイナーとプログラマーは、衝突後に座っています。それぞれが自分の「ボタン」を作成しました。同じウェブサイトを表示したコンピューター画面を指している矢印で

残っている場合、それがどのように影響しますか：ビジネスがビジネスを保持するまでエスカレートする「技術的な負債」。

ウェブサイトやアプリケーションを体系的に成長させるだけでなく、魅力のない問題だけでなく、多くの側面でビジネスに直接影響します。膨大で高価な蓄積「技術的負債」（技術的債務）のように。

• ユーザーエクスペリエンス（UX）が悪化します：一貫性があり、ユーザーが混乱し、不適切だと感じます。銀行アプリの「確認」ボタンが押すたびに顔が変わると想像してください。あなたは自信を持って使用し続けることを敢えて感じますか？
• コストの上昇：必要または追加されるたびに、同じ問題で失われなければならないデザイナーと開発者の時間を意味します。そして、今回の重複した作業は、あなたが支払わなければならない「コスト」です。
• 開発速度が低下します：各新しい機能のリリースは大したことです。それが私が1週間でやったことから他の部分に影響を与えるかどうかを心配しなければならないので、それは1か月になるかもしれません
• 破損したブランドイメージ：ウェブサイトはブランドの顔です。消費者の目には、ブランドの信頼できるシステムではないように見える場合、それも削減されます。

最後に、この「借金」は、移動できないまでエスカレートします。競合他社と戦ったり、変化した市場に対応することは遅くなります。残念ながらビジネスチャンスを失うまで

プロンプト：Intovraft画像は、この問題のリリースによって引き起こされる4つのマイナスの影響を示しました：Sansai Watchアイコン（時間の浪費）、シルバーバッグアイコン（高コスト）、アイコングラフィックアイコン（UX）、およびひび割れたブランドアイコン。 （破損したブランド）

修正する方法はありますか：アトミックデザインで「化学者」を見始めます

この問題の解決策は、「ページ」を「システム」に覗き込むことから、これを理解するための最も強力なツールから考え方を変えることです。ブラッド・フロストによって発明された原子設計の。

アトミックデザインは、化学からの借用概念です。さまざまな成分を5つのレベルに分割することにより、UI設計に適用されます。これは、分子に集められた原子や、より複雑な器官として収集された分子などです。

1. Atoms（Atom）：色、フォント、アイコン、単一のボタンなど、最小のユニットであり、分離できません。それは最も基本的な「原料」です。
2. 分子（分子）：多くの「原子」をまとめて、ラベル（Atom） +入力フィールド（Atom） +ボタン（Atom）の使用などの実際の作業コンポーネントを作成します。 （分子
3. 生物（生物）：ロゴ +分子 +分子形式の使用など、「ヘッダー（ヘッダー）」（生物）になるなど、「分子」および/または「原子」を複雑でより重要にすることです。
4. テンプレート（テンプレート）：多くの「生物」を導入して構造をまとめて「顔の輪郭」を作成するための「概要」を作成することです。
5. ページ（ページ）：最後のステップは、「テンプレート」を持ち込んで「実際のコンテンツ」（画像、テキスト、ビデオ）を配置して、ユーザーが本当に出会うウェブページやアプリを見ることができるようにすることです。これにより、設計システムの精度と効率をテストできます

この概念の始まりは、体系的な設計システムを作成し、簡単に拡大するのに役立ちます。何百ページものページに関係なく、すべてが常に同じルールに残ります。

プロンプト：美しいインフォグラフィック画像は、5つの原子設計（原子 - >分子 - >生物 - >テンプレート - >ページ）の階層を示しています。原子、分子は検索フォーム、ヘッダーなど、各ステップに明確なUI例を示しています。

かつて達成されていた本物からの例：GEが設計システムで組織に革命をもたらしたとき

理論はまだ複雑に見えるかもしれません。 General Electric（GE）などの世界クラスの組織の実際の例を見てみましょう。 GEには膨大なデジタル製品があります。各チームは、UIをさまざまな方向に設計しました。混乱と多くのリソースの無駄をもたらします

遭遇する問題：暴力の欠如ブランドをユニークに見せ、必要以上に新しい製品開発を必要とする

問題の解決方法： GEのチームは、「Predix Design System」を作成するために、Atomic Designに同じ原則をもたらしました。彼らは、組織内の全員が使用しなければならない「コンポーネントライブラリ」を作成しました。色から、原子（原子）からデータカード、グラフ、複雑なテーブル（生物）まで

驚くべき結果：

• センターから新しいものを作成する必要がないため、デザインを減らして巨大な開発
• 統一されたユーザーエクスペリエンスを作成します。 GEのすべての製品で、ブランドがより強く、より信頼性を高めます。
• 重複関数の削減から膨大な予算を節約します

これは、投資作成が遅くなるかもしれませんが、長期的な報酬は膨大であるという証拠です。そして、組織が持続可能に成長することを可能にするものです

プロンプト：GEアプリケーションの前後をスライドします。最初の側は、3つのアプリからのUIが完全に異なることを示しています。同じ設計システムを使用する3つのアプリすべてを表示した後、一貫性がありプロフェッショナルに見えます。 「開発時間-60％」などの統計数がある

フォローしたい場合は、何をすべきか：チェックリストは自分でアトミックデザインの作成を開始します（すぐに使用できます）。

ここを読んでくださいあなたはおそらくそれを始めたいですよね？待つ必要はありません！この5つのシンプルなチェックリストを使用して、すぐにプロジェクトのアトミックデザインシステムの作成を開始できます。

1. プロパティアカウントの作成（UIインベントリ）：最初のステップは、最初に持っているものを探索することです。 Webまたはアプリのすべてのページをキャプチャします。すべてのコンポーネントを個別にカットします：すべてのボタン、すべてのタイプ、カード、すべてのスタイル、すべてのトピック。
2. 原子の定義：メインカラーセット（タイポグラフィスケール）、間隔システム、アイコンのスタイルなど、「Atom」のグループ化を開始し、作成した標準を作成して作成しました。これは、重要な基盤であるスタイルガイドの作成です。
3. 体を組み立てて分子を作成します。 「名前を付けて情報を入力する」、アイコン付きのボタン」、「タグ記事」など、頻繁に使用される「分子」として安定した原子がまとめ始めたとき
4. 重要な生物の作成：ヘッダー、フッター、サイドバー、注文ボタンを使用して製品イメージカードなど、より大きくてWebの中心を作成して、次のレベルに移動します。
5. ツールを使用して構築を支援します。手でこのすべてのシステムを作成することは難しすぎる場合があります。 FigmaまたはSketch Design Toolを使用して、チームの全員が繰り返し電話できる「コンポーネントライブラリ」を作成するのに役立ちます。 Figmaには非常に強力なツールがあります。この管理では、もう一度上がりたい場合は、より速く作業するのに役立つFigmaの高度なテクニック

プロンプト：美しく、簡単な画像を理解し、各アイテムにアイコンを使用してアトミックデザインを開始するための5つのステップを示します（拡大メガネ、bảngmàu、分子、構造、およびFigmaロゴ）。

人々が不思議に思う傾向がある質問とクリアされた答え

私は多くの人々がアトミックデザインについてはっきりと答えるのではないかと疑問に思っているという質問を集めています。ここ

質問1：アトミックデザインは小さなプロジェクトに適しています。またはフリーランスだけですか？
回答：非常に適しています！実際、プロジェクトが最初から規律と規制を作成することであるため、プロジェクトがより小さくなるはずです。将来プロジェクトが拡大しているときに、強力な基盤が得られるようになります。チームが小さくても大きいかどうかにかかわらず、体系的な思考は常に有用です。

質問2：これにより、最初のプロジェクトが遅くなりますか？
回答：はい、最初の期間には少し多くの投資です。しかし、あなたが戻ったのは、長期の大きな速度です。 「そもそもゆっくりと歩くことに同意したことがあることのように、途中で走り、途中でつまずくのには」「速く行くのが遅い」（速くなるまでゆっくりと進む）ことが最も価値があることがあります。

質問3：アトミックデザインとスタイルガイドまたはデザインシステムが異なりますか？
回答：それはとても良い質問です！このように考えてください：

• スタイルガイド：通常、色、フォント、ロゴ、アイコンなどの「原子」に焦点を当てます。
• 原子設計：スタイルガイドの使用における「哲学」または「方法」は、分子、生物、テンプレート、およびページに体を作ることです。
• 設計システム：最も「最終」です。これは、ガイドラインと完全なドキュメントを備えたリサイクルコンポーネントセットです。アトミックデザインは、設計システムを作成するのに最適なアイデアです。

質問4：すでに乱雑な古いウェブサイトがある場合、アトミックデザインを採用して適応できますか？
回答：絶対に！一度にすべてを解体する必要はありません。最初にすべての画像を確認するために推奨する「UIインベントリ」の手順から始めてから、標準コンポーネントを1つずつ作成し、各部品のアンティークを交換します。最初に人の前で最も頻繁に始めることができます。

プロンプト：漫画のキャラクターは交差点に立っています。 「ページベースのデザイン」と呼ばれる乱雑で乱雑な1つ。別の方法は、「アトミックデザイン」と呼ばれる滑らかで整然とした道路です。漫画のキャラクターには頭に疑問符があります。決定を伝えます

簡単に理解するための概要：家の建設をやめて...そして「レゴに向かって」を作るためにターン

アトミックデザインを要約したい場合、最も簡単なのは、「標準レゴクォーター」セットを1セットで作成するために、毎回「家全体を構築する」から考え方を変える方法です

顧客が「家」、「城」、「宇宙船」（ページ）を望んでいるかどうかにかかわらず、良いセット（原子、分子、生物）がある場合、同じロゴを手に入れることができます。すぐに新しいアイテムに組み立てられ、美しく、強力で、すべてが同じレゴユニバースの一部であるように見えます

今日の「システム」への投資は、翌日「速度」と「品質」の購入です。すぐに回転する世界で成長し、調整する準備ができているのは、デジタル製品の中心です。私たちのUX/UIデザイン常に保持しているガイドラインです

わかりました...あなたはあなた自身のレゴセットの作成を開始する時が来ましたか？

プロンプト：強力な最後の写真は、複雑で美しいUI構造に関する最後のレゴのデザイナーを示しています。背景は、作業効率の成長を示すグラフです。

‍