Atomdesign -Methodik: Erstellen Sie eine systematische Benutzeroberfläche und Wiederverwendung.

Das eigentliche Problem im Leben: "Schöne Website ... aber warum überall Kopfschmerzen?"

UI/UX, Produktmanager -Designer oder sogar Geschäftsinhaber haben diese Erkrankung jemals erlebt? Wenn Sie das Web oder die App zum ersten Mal starten, sieht alles schöne gute Bestellung aus, aber wenn die Zeit vergangen ist ... möchten Sie eine neue Funktion hinzufügen oder einfach nur ein kleines Button -Design beheben, ist alles kaputt, miserabel

Die Schaltfläche auf der A -Seite sieht im Gegensatz zur Schaltfläche in der B -Button aus. Wiederholt ... schließlich stellt sich heraus, dass "großartiges Netz auch ohne Bestellung" einen Albtraum erweitert oder aufrechterhalten, der sowohl Zeit verbrauchen als auch die Budgets unglaublich verschwendet.

Wenn Sie nicken, stehen Sie nicht mit diesem Problem konfrontiert. Dies ist der "Schmerz" des "guten" Designs.

Eingabeaufforderung: Die Grafiken der Benutzeroberfläche der Website auf der 2. Seite der Website (bevor die linke Seite die Schaltfläche, Karte und Schriftarten inkonsistent zeigt. Sieht chaotisch aus. Die rechte Seite (danach) zeigt die Benutzeroberfläche, dass alle Komponenten ordentlich und wunderschön aussehen.

Warum tritt dieses Problem auf: Das Design, das nur "Seite" aussieht, sieht nicht "System" aus

Die Wurzel des gesamten Chaos ist normalerweise auf die falschen Entwurfsmethoden zurückzuführen. Es wird uns in der Regel beigebracht, "Seiten" (Seiten-basierte Design) wie "Home Design", "Produktdesign-Seitendetails", "Design in Kontakt mit uns" zu sein. Diese Art des Denkens am Anfang kann schnell sein. Aber auf lange Sicht ist es eine gute Katastrophe.

Denn wenn wir entwerfen, basierend auf der "Seite" als Hauptdarsteller werden wir verschiedene Elemente für diese Seite erstellen, ohne zu denken, dass diese Elemente an anderer Stelle verwendet werden oder diese Probleme nicht verursachen: folgte: folgte:

• Inkonsistenz (Inkonsistenz): Verschiedene Designer oder sogar dieselbe Person zu unterschiedlichen Zeiten können auf jeder Seite eine "blaue Taste" mit Schatten, Größen oder Schatten erzeugen.
• Redundante Arbeit: Der Entwickler muss wiederholt einen Code für "Benutzerprofilfeld" schreiben, obwohl er nur einmal erstellt werden sollte und kann erneut verwendet werden.
• Mangel an der Mitte des Zentrums (keine einzige Quelle der Wahrheit): Niemand weiß, dass der "Hauptknopf" wirklich korrekt ist. Wie ist es? Jeder arbeitet nach seinem eigenen Verständnis.

Diese Art von Arbeit unterscheidet sich nicht vom Bau einer Stadt ohne Stadtplan. Alle bauten das Haus, wie er wollte. Am Ende wuchs die Stadt in überfüllter und ohne Leitung auf.

Eingabeaufforderung: Cartoon -Designer und -Programmierer sitzen nach dem Kollieren. Jede Person hat ihre eigene "Taste" erstellt. Mit einem Pfeil auf den Computerbildschirm, der dieselbe Website anzeigt, gibt es jedoch viele Versionen, die anders aussehen

Wenn Sie gehen, wie wirkt es sich aus: "technische Schulden", die eskaliert, bis das Unternehmen das Geschäft hält?

Lassen Sie Ihre Website oder Anwendung nicht nur unattraktiv wachsen, sondern wirkt sich in vielen Dimensionen direkt auf das Geschäft aus. Wie Akkumulation "technische Schulden" (technische Verschuldung) ist enorm und teuer.

• Benutzererfahrung (UX) verschlechtern: inkonsistent, wodurch der Benutzer verwirrt und unangemessen ist. Stellen Sie sich das vor, wenn die Schaltfläche "Bestätigung" in Ihrer Bank -App jedes Mal, wenn Sie drücken, Ihr Gesicht ändert. Wirst du dich selbstbewusst fühlen und es wagen, weiterhin zu benutzen?
• Steigende Kosten: Jedes Mal, wenn es benötigt oder hinzugefügt wird, bedeutet dies die Zeit des Designers und des Entwicklers, der mit dem gleichen Problem verloren gehen muss. Und doppelte Arbeit ist diesmal "Kosten", die Sie bezahlen müssen.
• Die Entwicklungsgeschwindigkeit nimmt ab: Die Veröffentlichung jeder neuen Funktion ist eine große Sache. Da es sich Sorgen machen muss, ob es andere Teile betrifft oder nicht, was ich in 1 Woche getan habe, kann es 1 Monat werden
• Beschädigter Markenbild: Die Website ist das Gesicht der Marke. Wenn es in den Augen der Verbraucher kein zuverlässiges System der Marke zu sein scheint, wird es ebenfalls reduziert.

Schließlich wird diese "Schuld" eskalieren, bis Sie sich nicht bewegen können. Es ist langsamer, mit Wettbewerbern zu kämpfen oder auf den Markt zu reagieren, der sich verändert hat. Bis es leider die Geschäftsmöglichkeiten verlieren kann

Eingabeaufforderung: Intovraft -Bilder zeigten 4 negative Auswirkungen, die durch die Freisetzung dieses Problems verursacht wurden: Sansai Watch Icon (Zeitverschwendung), Silbersack -Symbol (hohe Kosten), Icon -Grafik -Symbol (UX) und das Cracked Brand -Ikon. (Beschädigte Marke)

Gibt es eine Möglichkeit zu beheben: Betrachten Sie den "Chemiker" mit Atomdesign

Die Lösung dieses Problems besteht darin, die Art des Denkens zu ändern, wenn man in eine "Seite" in ein "System" und das leistungsstärkste Werkzeug geht, um dies zu verstehen. Atomdesign die von Brad Frost .

Atomdesign ist ein Ausleihkonzept aus der Chemie. Auf das UI -Design angewendet, indem die verschiedenen Komponenten in 5 Werte unterteilt werden, z.

1. Atome (Atom): ist die kleinste Einheit und kann nicht getrennt werden, z. B. Farben, Schriftarten, Symbole oder einzelne Tasten. Es ist der "Rohmaterial", das grundlegendste.
2. Moleküle (Moleküle): Viele "Atome" zusammenbringen, um echte Arbeitskomponenten zu erstellen, wie die Verwendung von Etikett (Atom) + Eingangsfeld (Atom) + Taste (Atom) zusammen in ein "Formularsuchformular". (MOLEKÜL
3. Organismen (Organismen): Es ist, "Moleküle" und/oder "Atome" so kompliziert und wichtiger zu sein, wie die Verwendung von Logo + Molekül + Molekülform zusammen, um "Header (Header)" (Organismus) zu werden
4. Vorlagen (Vorlage): Ist die Einführung vieler "Organismus", um die Struktur zusammenzusetzen, um "die Umrisse des Gesichts" zu erstellen, ohne dass eine wirkliche Informationen ein Entwurf ist, das festlegt, was jede Seite haben sollte.
5. Seiten (Seite): Der letzte Schritt besteht darin, "Vorlage" zum Einfügen von "echten Inhalten" (Bild, Text, Video) zu bringen, damit wir die Webseite oder Apps sehen können, die der Benutzer wirklich erfüllt. Dies ermöglicht es uns, die Genauigkeit und Effizienz des Designsystems zu testen

Der Beginn dieses Konzepts hilft Ihnen dabei, ein systematisches Designsystem zu erstellen und einfach zu erweitern. Machen Sie es, egal wie viele Hunderte von Seiten alles immer in denselben Regeln bleiben wird.

Eingabeaufforderung: Schöne Infografik -Bilder zeigen die Hierarchie aller 5 Atomdesign (Atome -> Moleküle -> Organismen -> Vorlagen -> Seiten) mit klaren UI -Beispielen in jedem Schritt wie Atom, Molekül ist Suchform, Header.

Beispiele aus der realen Sache, die früher erreicht wurden: Wenn GE die Organisation mit Designsystem revolutionierte

Die Theorie kann immer noch kompliziert aussehen. Schauen wir uns die tatsächlichen Beispiele von Organisationen der Weltklassen wie General Electric (GE) an. GE hat enorme digitale Produkte. Jedes Team entwarf die Benutzeroberfläche in verschiedene Richtungen. Was zu Verwirrung und viel Ressourcenverschwendung führt

Probleme auftreten

So lösen Sie das Problem: Das Team von GE hat das gleiche Prinzip für das Atomdesign gebracht, um "Predix -Designsystem" zu erstellen. Sie erstellten "Komponentenbibliothek", die jeder in der Organisation verwenden muss. Ausgehend von Farbe, Atomen (Atomen) bis hin zu Datenkarten, Diagramme, komplexen Tabellen (Organismen)

Erstaunliche Ergebnisse:

• Reduzieren Sie das Design und entwickeln Sie sich enorm, da Sie nicht etwas Neues aus dem Zentrum schaffen müssen
• Erstellen Sie eine einheitliche Benutzererfahrung. In jedem Produkt von GE macht die Marke stärker und zuverlässiger.
• Sparen Sie ein großes Budget bei der Reduzierung der doppelten Funktionen

Dies ist der Beweis dafür, dass die Investitionsschaffung zunächst zwar langsam aussieht, aber die langfristigen Belohnungen enorm sind. Und ist etwas, das es der Organisation ermöglicht, nachhaltig zu wachsen

Eingabeaufforderung: Folgen Sie vor und nach der GE -Anwendung. Die erste Seite zeigt die Benutzeroberfläche von 3 Apps, die völlig unterschiedlich sind. Nach dem Anzeigen aller 3 Apps, die dasselbe Designsystem verwenden, wird es konsistent und professionell aussehen. Mit statistischen Zahlen wie "Entwicklungszeit -60%"

Wenn Sie folgen möchten, was zu tun ist: Die Checkliste erstellt selbst Atomdesign (kann sofort verwendet werden).

Lesen Sie hier, dass Sie wahrscheinlich damit beginnen möchten, oder? Du musst nicht warten! Mit dieser 5 einfachen Checkliste können Sie das Atomic Design -System für Ihr Projekt sofort erstellen:

1. Immobilienkonten erstellen (UI -Inventar): Der erste Schritt besteht darin, zu untersuchen, was Sie zuerst haben. Erfasst jede Seite des Webs oder Ihrer App. Und schneiden Sie alle Komponenten separat aus: alle Tasten, alle Typen, Karten, alle Stile, alle Themen.
2. Auf jeden Fall Ihre Atome: Aus den Vermögenswerten starten Sie zuerst Standards für "Atom", z. B. das Definieren des Hauptfarbsets (Typografie -Skala), das Abstandssystemsystem und der Stil des Symbols. Dies ist die Erstellung von Style Guide, die eine wichtige Grundlage darstellt.
3. Montieren Sie den Körper, um Moleküle zu erstellen: Wenn ein stabiles Atom anfing, es als "Molekül" zusammenzubringen, das häufig verwendet wird, wie "die Informationen mit dem Namen", "Taste mit Symbol", "Tagartikel" auszufüllen, "Artikel" ausfüllen "," Tagikel "ausfüllen", "Artikel", "Artikel" ausfüllen ", werden" Artikel "einfügen"
4. Erstellen Sie wichtige Organismen: Gehen Sie auf die nächste Ebene, indem Sie ein größeres und das Herz des Netzes erstellen, z. B. Header, Fußzeile, Seitenleiste oder die Produktbildkarte mit einer Bestellschaltfläche.
5. Verwenden Sie Tools, um zu erstellen: Das Erstellen dieses Systems mit den Händen kann zu schwierig sein. Verwenden Sie das Figma- oder Sketch -Design -Tool, um eine "Komponentenbibliothek" zu erstellen, in der jeder im Team wiederholt anrufen kann. Figma hat ein sehr leistungsfähiges Werkzeug. In diesem Management und wenn Sie wieder aufsteigen möchten, schauen Sie sich die fortschrittlichen Techniken der Figma , die Ihnen helfen, schneller zu arbeiten.

Eingabeaufforderung: Schöne und einfache Bilder, die 5 Schritte zeigen, um das Atomdesign mit Ikonen in jedem Element zu starten (Vergrößerungsbrillen, Bảng Màu, Moleküle, Strukturen und Figma -Logo).

Fragen, die Menschen neigen, und die Antworten, die geklärt werden

Ich sammle Fragen, die viele Menschen über Atomdesign wundern, um klar zu beantworten. Hier

Frage 1: Atomdesign eignet sich für kleine Projekte. Oder freiberuflich tätig?
Antwort: Sehr geeignet! Je kleiner das Projekt beginnt, da es von Anfang an Disziplin und Vorschriften erstellen soll, wenn das Projekt in Zukunft erweitert wird, haben Sie eine starke Grundlage. Es ist nicht nützlich, immer nützlich zu sein, ob das Team klein oder groß ist.

Frage 2: Wird dies das erste Projekt langsam sein?
Antwort: Ja, es ist eine etwas mehr Investition in der ersten Periode. Aber was Sie zurückgekehrt haben, ist eine große Geschwindigkeit von langfristig. Wie ein Sprichwort, dass "sich bereit erklärte, in erster Linie langsamer zu gehen, um schneller zu rennen und mitten auf dem Weg zu stolpern."

Frage 3: Atomdesign- und Stilhandbuch oder Designsystem anders?
Antwort: Es ist eine sehr gute Frage! Denken Sie so:

• Stilhandbuch: Normalerweise konzentrieren Sie sich auf "Atome" wie Farben, Schriftarten, Logo und Symbole.
• Atomdesign: Ist "Philosophie" oder "Methoden" in der Verwendung des Stilhandbuchs, um einen Körper in Moleküle, Organismen, Vorlagen und Seiten zu machen.
• Designsystem: Ist das "Finale". Es handelt sich um einen recycelten Komponentensatz mit Richtlinien und vollständigen Dokumenten. Atomdesign ist eine großartige Idee, um ein Designsystem zu erstellen.

Frage 4: Wenn es eine alte Website gibt, die bereits chaotisch ist, kann ich das Atomdesign anpassen?
Antwort: Absolut! Sie müssen nicht alles auf einmal abbauen. Beginnen Sie mit den Schritten "UI -Inventar", die ich zuerst empfehle, um das gesamte Gesamtbild anzuzeigen, und erstellen Sie dann nacheinander eine Standardkomponente und ersetzen Sie dann die Antiquitäten in jedem Teil. Kann zuerst mit dem am häufigsten vor der Person beginnen.

Eingabeaufforderung: Die Zeichentrickfiguren stehen an der Kreuzung. Ein chaotischer und chaotischer als "Seiten-basiertes Design". Ein anderer Weg ist eine glatte und ordentliche Straße namens "Atomic Design". Der Cartoon -Charakter hat ein Fragezeichen am Kopf. Die Entscheidung vermitteln

Zusammenfassung für das einfache Verständnis: Hören Sie auf, ein Haus zu bauen ... und drehen Sie sich um, um "Lego in Richtung" zu bauen.

Wenn Sie das Atomdesign zusammenfassen möchten, ist es am einfachsten, jedes Mal die Art des Denkens aus "Build das ganze Haus" zu ändern

Wenn Sie ein gutes Set (Atome, Moleküle, Organismen) haben, ob Kunden "Haus", "Schloss" oder "Raumschiff" (Seiten) wollen, können Sie dasselbe Logo abholen. In einem neuen Gegenstand schnell, schön und stark zusammengebaut, scheint alles immer noch Teil desselben Lego -Universums zu sein

Die Investition in das heutige "System" ist der Kauf von "Geschwindigkeit" und "Qualität" am nächsten Tag. Es ist das Herz von digitalen Produkten, die bereit sind, sich in der Welt zu wachsen und sich in Kürze zu ändern. Und dies ist die Richtlinie, die unser UX/UI -Designteam immer enthält

Okay ... es ist Zeit für Sie, Ihr eigenes Lego -Set zu erstellen?

Eingabeaufforderung: Mächtiges Last -Bild zeigen den Designer für das letzte Lego auf der komplexen und schönen UI -Struktur. Der Hintergrund ist ein Diagramm, das das Wachstum der Arbeitseffizienz zeigt.

‍