Atomic Design Methodology: Creëer een systematische gebruikersinterface en hergebruik.

Het echte probleem in het leven: "Mooie website ... maar waarom hoofdpijn overal?"

UI/UX, Product Manager Designer of zelfs bedrijfseigenaren hebben deze voorwaarde ooit meegemaakt? Bij het starten van het web of de app voor het eerst ziet alles er prachtig uit, maar wanneer de tijd verstrijkt ... wil je een nieuwe functie toevoegen of gewoon om een klein knopontwerp te repareren, is alles kapot, ellendig

De knop op de A -pagina ziet er in tegenstelling tot de knop op de B, de kleur die op de abonnementspagina wordt gebruikt, is een andere tint op de betalingspagina, ontwikkelaar moet zitten en een nieuwe code schrijven voor een component die er vergelijkbaar uitziet. Herhaaldelijk ... Eindelijk blijkt dat "geweldig web zelfs zonder bestelling" een nachtmerrie uit te breiden of te onderhouden die zowel tijd verbruikt als het ongelooflijk verspillen van budgetten.

Als u knikt, wordt u niet geconfronteerd met dit probleem. Dit is de "pijn" van het meest "goede" ontwerp.

Prompt: de afbeeldingen van de gebruikersinterface van de website aan de 2e kant van de website (voordat de linkerkant de knop, kaart en lettertypen toont die inconsistent zijn. Ziet er chaotisch uit. De rechterkant (na) toont de gebruikersinterface die alle componenten er ordelijk en prachtig uitzien.

Waarom komt dat probleem voor: het ontwerp dat alleen "pagina" uitziet, ziet er niet "System" uit

De wortel van alle chaos is meestal te wijten aan de verkeerde ontwerpmethoden. We worden meestal geleerd om "pagina's" te zijn (pagina-gebaseerd ontwerp), zoals "Home Design", "Product Design Page Details", "Ontwerp in contact met ons". Dit soort denken in het begin kan snel zijn. Maar op de lange termijn is het een goede ramp.

Omdat wanneer we ontwerpen, gebaseerd op de "pagina" als de hoofd, we verschillende elementen nieuw voor die pagina zullen maken zonder te denken dat deze elementen elders zullen worden gebruikt of deze problemen niet hebben gevolgd:

• Inconsistentie (inconsistentie): verschillende ontwerpers of zelfs dezelfde persoon op verschillende tijdstippen, kunnen op elke pagina een "blauwe knop" met tinten, maten of schaduwen maken.
• Redundant Work: Developer moet herhaaldelijk een code schrijven voor "Gebruikersprofielbox", hoewel deze slechts eenmaal moet worden gemaakt en opnieuw kan worden gebruikt.
• Het ontbreken van het midden van het centrum (geen enkele bron van waarheid): niemand weet dat de "hoofdknop" echt correct is. Hoe is het? Iedereen werkt volgens zijn eigen begrip.

Dit soort werk is niet anders dan het bouwen van een stad zonder een stadsplan. Iedereen bouwde het huis zoals hij wilde. Uiteindelijk groeide de stad op in druk en zonder richting.

Prompt: Cartoonontwerpers en programmeurs zitten werken na botsen. Elke persoon heeft zijn eigen "knop" gemaakt. Met een pijl die naar het computerscherm wijst dat dezelfde website weergeeft, maar er zijn veel versies die er anders uitzien

Als het overgaat, hoe zal het dan beïnvloeden: "technische schulden" die escaleert totdat het bedrijf het bedrijf heeft.

Uw website of applicatie systematisch laten groeien, niet alleen een kwestie van onaantrekkelijk, maar heeft het bedrijf direct in veel dimensies beïnvloed. Zoals accumulatie "technische schuld" (technische schuld) die enorm en duur is.

• Gebruikerservaring (UX) verergeren: inconsistent, waardoor de gebruiker verward is en zich ongepast voelt. Stel je voor dat als de knop "Bevestigen" in je bank -app je gezicht verandert telkens wanneer je drukt. Voelt u zich zelfverzekerd en durft u te blijven gebruiken?
• Stijgende kosten: elke keer dat het vereist of toegevoegd is, betekent dit de tijd van de ontwerper en de ontwikkelaar die verloren moet gaan met hetzelfde probleem. En duplicaatwerk deze keer is "kosten" die u moet betalen.
• De snelheid van ontwikkeling daalt: de release van elke nieuwe functie is een groot probleem. Omdat het zich zorgen moet maken over de vraag of het andere delen zal beïnvloeden of niet van wat ik in 1 week heb gedaan, kan het 1 maand worden
• Beschadigd merkimago: de website is het gezicht van het merk. Als het geen betrouwbaar systeem van het merk lijkt te zijn in de ogen van consumenten, zal het ook worden verminderd.

Ten slotte zal deze "schuld" escaleren totdat je niet kunt bewegen. Vechten met concurrenten of reageren op de markt die is veranderd, is langzamer. Totdat het helaas misschien zakelijke kansen verliest

Prompt: Intovraft -afbeeldingen vertoonden 4 negatieve effecten veroorzaakt door het vrijgeven van dit probleem: Sansai Watch -pictogram (tijdverspilling), Silver Bag -pictogram (hoge kosten), pictogram grafisch pictogram (UX) en het gebarsten merkpictogram. (Beschadigd merk)

Is er een manier om op te lossen: begin met het kijken naar de "chemicus" met atoomontwerp

De oplossing van dit probleem is om de manier van denken te veranderen van het kijken naar een "pagina" in een "systeem" en het krachtigste hulpmiddel om dit te begrijpen. Atomaire ontwerpconcepten uitgevonden door Brad Frost .

Atomic Design is een leenconcept van de chemie. Toegepast op het UI -ontwerp door de verschillende componenten in 5 niveaus te delen, zoals de atomen verzameld in moleculen en de moleculen verzameld als een complexer orgaan

1. Atomen (Atom): is de kleinste eenheid en kan niet worden gescheiden, zoals kleuren, lettertypen, pictogrammen of enkele knoppen. Het is de "grondstof", de meest basale.
2. Moleculen (moleculen): veel "atomen" samenbrengen om echte werkcomponenten te maken, zoals het gebruik van label (Atom) + inputveld (Atom) + knop (ATOM) samen in een "Form Search Form". (MOLECUUL
3. Organismen (organismen): zijn "moleculen" en/of "atomen" meenemen om even ingewikkeld en belangrijker te zijn, zoals het gebruik van logo + molecule + molecuulvorm samen om "header (header)" (organisme) te worden (organisme)
4. Sjablonen (sjabloon): is de introductie van veel "organisme" om de structuur samen te stellen om "de omtrek van het gezicht" te maken zonder enige echte informatie om erin te zetten, is een blauwdruk die bepaalt wat elke pagina zou moeten hebben.
5. Pagina's (pagina): De laatste stap is om "sjabloon" te brengen om "echte inhoud" te plaatsen (afbeelding, tekst, video) zodat we de webpagina of apps kunnen zien die de gebruiker echt zal ontmoeten. Waardoor we de nauwkeurigheid en efficiëntie van het ontwerpsysteem kunnen testen

Het begin van dit concept zal u helpen een systematisch ontwerpsysteem te creëren en eenvoudig uit te breiden. Maak het niet uit hoeveel tientallen honderden pagina's alles altijd in dezelfde regels zal blijven.

Prompt: Mooie infographic afbeeldingen tonen de hiërarchie van alle 5 atomaire ontwerp (atomen -> moleculen -> organismen -> sjablonen -> pagina's) met heldere UI -voorbeelden in elke stap, zoals atoom, molecuul is zoekvorm, header.

Voorbeelden van het echte ding dat vroeger werd bereikt: toen GE een revolutie teweegbracht in de organisatie met het ontwerpsysteem

Theorie kan er nog steeds ingewikkeld uitzien. Laten we eens kijken naar de feitelijke voorbeelden van wereldklasse organisaties zoals General Electric (GE). GE heeft enorme digitale producten. Elk team ontwierp de gebruikersinterface in verschillende richtingen. Resulterend in verwarring en veel verspilling van middelen

Problemen: gebrek aan geweld maakt het merk er uniek uit en neemt een nieuwe productontwikkeling langer dan nodig

Hoe het probleem op te lossen: het team van GE heeft hetzelfde principe voor atomair ontwerp gebracht om "Predix -ontwerpsysteem" te creëren. Ze creëerden "componentbibliotheek" die iedereen in de organisatie moet gebruiken. Beginnend met kleur, atomen (atomen) tot gegevenskaarten, grafieken, complexe tabellen (organismen)

Verbazingwekkende resultaten:

• Verminder het ontwerp en ontwikkel enorm omdat u niet iets nieuws uit het centrum hoeft te maken
• Maak een uniforme gebruikerservaring. In elk product van GE maakt het merk sterker en betrouwbaarder.
• Bespaar een enorm budget van het verminderen van dubbele functies

Dit is het bewijs dat de investeringscreatie in het begin, hoewel het er langzaam uitziet, maar de langetermijnbeloningen zijn enorm. En is iets dat de organisatie in staat stelt om duurzaam te groeien

Prompt: Schuif het voor en na van de GE -applicatie. De eerste kant toont de gebruikersinterface van 3 apps die compleet verschillend zijn. De na het weergeven van alle 3 apps die hetzelfde ontwerpsysteem gebruiken, waardoor het er consistent en professioneel uitziet. Met statistische getallen zoals "Ontwikkelingstijd -60%"

Als je wilt volgen, wat te doen: Checklist begint zelf atomair ontwerp te maken (kan onmiddellijk worden gebruikt).

Lees hier, je wilt het waarschijnlijk gaan doen, toch? Je hoeft niet te wachten! U kunt beginnen met het maken van het atomaire ontwerpsysteem voor uw project met deze 5 eenvoudige checklist:

1. Eigenschapsrekeningen maken (UI -inventaris): de eerste stap is om te onderzoeken wat u eerst hebt. Legt elke pagina van het web of uw app vast. En snijd alle componenten afzonderlijk: alle knoppen, alle soorten, kaarten, alle stijlen, alle onderwerpen.
2. Definie uw atomen: Uit de activa gemaakt Start Grouping en creëer eerst normen voor "Atom", zoals het definiëren van de hoofdkleurenset (typografieschaal), het afstandssysteemsysteem en de stijl van het pictogram Dit is het creëren van stijlgids die een belangrijke basis is.
3. Monteer het lichaam om moleculen te maken: wanneer er een stabiel atoom is, begon het samen te brengen als een "molecuul" dat vaak wordt gebruikt, zoals "de informatie invullen met de naam", "Knop met pictogram", "tagartikelen"
4. Creëer belangrijke organismen: ga naar het volgende niveau door een groter en het hart van het web te creëren, zoals koptekst, voettekst, zijbalk of de productbeeldkaart met een bestelknop.
5. Gebruik tools om te helpen bouwen: al dit systeem maken met handen kan te moeilijk zijn. Gebruik de Figma- of Sketch -ontwerptool om een "componentbibliotheek" te maken waar iedereen in het team herhaaldelijk kan bellen. Figma heeft een zeer krachtig hulpmiddel. In dit management en als je weer omhoog wilt gaan, kijk dan naar de geavanceerde technieken van Figma die je zullen helpen sneller te werken.

Prompt: Mooie en gemakkelijk -Begraaf afbeeldingen, met 5 stappen om het atoomontwerp te starten met pictogrammen in elk item (vergrootglazen, Bảng Màu, Moleculen, Structures en Figma -logo).

Vragen die mensen de neiging hebben zich af te vragen en de antwoorden die zijn gewist

Ik verzamel vragen die veel mensen afvragen over atomair ontwerp om duidelijk te beantwoorden. Hier

Vraag 1: Atomisch ontwerp is geschikt voor kleine projecten. Of alleen freelance?
Antwoord: Zeer geschikt! Eigenlijk, hoe kleiner het project zou moeten starten omdat het is om discipline en voorschriften te creëren vanaf het begin, waardoor wanneer het project in de toekomst groeit, u een sterke basis hebt. U hoeft niet tot hoofdpijn te komen, later is systematisch denken altijd nuttig, of het team klein of groot is.

Vraag 2: Zal dit het eerste project traag zijn?
Antwoord: Ja, het is een iets meer investering in de eerste periode. Maar wat je hebt geretourneerd, is een enorme snelheid van de lange termijn. Als een spreekwoord dat "stemde ermee in om in de eerste plaats langzaam te lopen om sneller te rennen en in het midden van de weg te struikelen." Het is "langzaam om snel te gaan" (ga langzaam gaan) dat is het meest waardevol

Vraag 3: Atomic Design and Style Guide of Design System anders?
Antwoord: Het is een heel goede vraag! Denk als volgt:

• Stijlgids: focus meestal op "atomen", zoals kleuren, lettertypen, logo, pictogrammen.
• Atomic Design: is "filosofie" of "methoden" in het gebruik van stijlgids om een lichaam te maken in een moleculen, organismen, sjablonen en pagina's.
• Ontwerpsysteem: is de meest "finale". Het is een gerecyclede componentset, met richtlijnen en volledige documenten. Atomic Design is een geweldig idee om een ontwerpsysteem te maken.

Vraag 4: Als er een oude website is die al rommelig is, kan ik dan een atoomontwerp nemen om zich aan te passen?
Antwoord: Absoluut! Je hoeft het niet allemaal tegelijk te ontmantelen. Begin met de stappen "UI Inventory" die ik eerst aanbeveel om alle algehele afbeelding te zien, maak vervolgens geleidelijk een standaardcomponent één voor één en vervang vervolgens het antiek in elk onderdeel. Kan eerst beginnen met het meest voor de persoon eerst.

Prompt: de stripfiguren staan op het kruispunt. Een rommelig en rommelig genaamd "pagina-gebaseerd ontwerp". Een andere manier is een soepele en geordende weg genaamd "Atomic Design". Het stripfiguur heeft een vraagteken op het hoofd. Breng de beslissing over

Samenvatting voor gemakkelijk begrip: stop met het bouwen van een huis ... en draai je om "LEGO naar" te bouwen

Als het atoomontwerp wilt samenvatten, is het gemakkelijkst een manier om de manier van denken te veranderen van "Build the Hole House" elke keer om "Standard Lego Quarter" te creëren met één set

Wanneer u een goede set hebt (atomen, moleculen, organismen), of klanten nu "huis", "Castle" of "Spacecraft" (pagina's) willen, kunt u hetzelfde logo ophalen. Snel, mooi en sterk geassembleerd in een nieuw item, met alles lijkt nog steeds deel uit te maken van hetzelfde LEGO -universum

De investering in het "systeem" vandaag is de aankoop van "snelheid" en "kwaliteit" de volgende dag. Het is het hart van digitale producten die klaar zijn om te groeien en zich aan te passen in de wereld die binnenkort roteert. En dit is de richtlijn die ons UX/UI altijd geldt

Oké ... het is tijd dat je begint met het maken van je eigen LEGO -set?

Prompt: krachtige laatste foto toont de ontwerper voor de laatste LEGO op de complexe en prachtige UI -structuur. De achtergrond is een grafiek die de groei van werkefficiëntie laat zien.

‍