Metodika atomového designu: Vytvořte systematické uživatelské rozhraní a opětovné použití.

Skutečný problém v životě: „Krásný web ... ale proč bolesti hlavy všude?“

UI/UX, návrhář produktového manažera nebo dokonce majitelé podniků někdy zažili tento stav? Při spuštění webu nebo aplikace poprvé vypadá všechno krásně dobře, ale když uběhne čas ... chtějí přidat novou funkci nebo jen na opravu malého designu tlačítka, je vše rozbité, mizerné

Tlačítko na stránce A vypadá na rozdíl od tlačítka na B, barva použitá na stránce předplatného je jiný odstín na stránce plateb, musí vývojář sedět a napsat nový kód pro komponentu, která vypadá podobně. Opakovaně ... Nakonec se ukáže, že „skvělý web i bez objednávky.“ Pro rozšíření nebo udržení noční můry, která oba spotřebuje čas a plýtvá rozpočty neuvěřitelně.

Pokud kývnete, pak se tento problém nesmíte potýkat. Toto je „bolest“ nejvíce „dobrého“ designu.

Promptova: Grafika uživatelského rozhraní webových stránek na druhé straně webu (před levou stranou zobrazí tlačítko, kartu a písma, která jsou nekonzistentní. Vypadají chaoticky. Pravá strana (poté) ukazuje uživatelské rozhraní, že všechny komponenty vypadají řádně a krásně.

Proč se tento problém vyskytuje: design, který vypadá pouze „stránka“, nevypadá „systém“

Kořen všech chaosu je obvykle způsoben nesprávnými metodami návrhu. Máme sklon být učeni jako „stránky“ (design založený na stránce), například „domácí design“, „podrobnosti o designu produktu“, „design v kontaktu s námi“. Tento druh myšlení na začátku může být rychlý. Ale z dlouhodobého hlediska je to dobrá katastrofa.

Protože když navrhneme, založený na „stránce“ jako hlavní, vytvoříme pro tuto stránku nové prvky nové, aniž bychom si mysleli, že tyto prvky budou použity jinde nebo nezpůsobí tyto problémy následovány:

• Nekonzistence (nekonzistence): Různí návrháři nebo dokonce stejná osoba v různých časech mohou vytvořit „modré tlačítko“ s odstíny, velikosti nebo stíny odlišnými na každé stránce.
• Redundantní práce: Vývojář musí opakovaně zapisovat kód pro „box pro profil uživatelského profilu“, i když by měl být vytvořen pouze jednou a lze jej znovu použít.
• Chybí střed centra (žádný jediný zdroj pravdy): Nikdo neví, že „hlavní tlačítko“ je opravdu správné. Jak to je? Každý pracuje podle vlastního porozumění.

Tento druh práce se neliší od budování města bez plánu města. Všichni postavili dům, jak chtěl. Nakonec město vyrostlo v přeplněném a bez směru.

Výzva: Návrháři a programátoři karikatury sedí po srážce. Každý člověk vytvořil vlastní „tlačítko“. Se šipkou směřujícím na obrazovku počítače, která zobrazovala stejný web, ale existuje mnoho verzí, které vypadají jinak

Pokud to bude vliv, jak to ovlivní: „Technický dluh“, který se eskaluje, dokud podnik nebude podnikat.

Nechte svůj web nebo aplikaci systematicky růst nejen neatraktivní, ale přímo to ovlivňuje podnikání v mnoha dimenzích. Stejně jako akumulace „technický dluh“ (technický dluh), který je obrovský a drahý.

• Uživatelská zkušenost (UX) se zhoršuje: nekonzistentní, což způsobuje, že uživatel byl zmatený a cítil se nevhodný. Představte si, že pokud tlačítko „Potvrdit“ v aplikaci Bank změní obličej pokaždé, když stisknete. Budete se cítit sebevědomě a odvážíte se pokračovat v používání?
• Rostoucí náklady: Pokaždé, když je to vyžadováno nebo přidáno, znamená to čas návrháře a vývojáře, který musí být ztracen se stejným problémem. A duplicitní práce tentokrát je „náklady“, které musíte zaplatit.
• Rychlost vývoje klesá: uvolnění každé nové funkce je velký problém. Protože se musí starat o to, zda to ovlivní jiné části nebo ne z toho, co jsem udělal za 1 týden, může se stát 1 měsíc
• Poškozený image značky: Web je tváří značky. Pokud se nezdá být spolehlivým systémem značky v očích spotřebitelů, bude to také sníženo.

Nakonec se tento „dluh“ bude eskalovat, dokud se nemůžete pohnout. Bojit se s konkurenty nebo reagovat na trh, který se změnil, je pomalejší. Dokud to nebude bohužel ztrácet obchodní příležitosti

Výzva: INTOVRAFT obrázky vykazovaly 4 negativní dopady způsobené uvolněním tohoto problému: ikona sledovaného sledování sansai (ztráta času), ikona stříbrné tašky (vysoké náklady), ikona ikony (UX) a ikona popraskané značky. (Poškozená značka)

Existuje nějaký způsob, jak opravit: Začněte se dívat na „chemika“ s atomovým designem

Řešením tohoto problému je změnit způsob myšlení z pohledu na „stránku“ do „systému“ a nejsilnějšího nástroje, který tomu porozumí. atomového designu vynalezené Bradem Frostem .

Atomový design je půjčující koncept od chemie. Aplikuje se na design uživatelského rozhraní rozdělením různých složek na 5 úrovní, jako atomy shromážděné do molekul a molekuly se shromáždily jako složitější orgán

1. Atomy (atom): je nejmenší jednotka a nelze ji oddělit, jako jsou barvy, písma, ikony nebo jednotlivá tlačítka. Je to „surovina“, nejzákladnější.
2. Molekuly (molekuly): Spojení mnoha „atomů“ a atomů “, které vytvoří skutečné pracovní komponenty, jako je použití označení (atom) + vstupní pole (atom) + tlačítko (Atom) dohromady do„ formuláře pro vyhledávání “. (MOLEKULA
3. Organismy (Organismy): je přinést „molekuly“ a/nebo „atomy“, aby byly stejně komplikované a důležitější, jako je použití loga + molekuly + formy molekuly dohromady, aby se stala „záhlaví (záhlaví)“ (organismus)
4. Šablony (šablona): je zavedením mnoha „organismu“, aby se struktura spojila, aby vytvořila „obrys obličeje“ bez jakýchkoli skutečných informací, které je třeba vložit, je plán, který stanoví to, co by měla mít každá stránka.
5. Stránky (stránka): Posledním krokem je přivést „šablonu“ k tomu, aby se „skutečný obsah“ (obrázek, text, video) umožnil vidět webovou stránku nebo aplikace, které uživatel skutečně splní. Což nám umožňuje otestovat přesnost a efektivitu návrhového systému

Začátek tohoto konceptu vám pomůže vytvořit systematický návrhový systém a snadno se rozšířit. Ať už je to bez ohledu na to, kolik desítek stovek stránek bude vše vždy ve stejných pravidlech.

Promptova: Krásné infographic obrazy ukazují hierarchii všech 5 atomových návrhů (atomy -> molekuly -> organismy -> šablony -> stránky) s jasnými příklady UI v každém kroku, jako je atom, molekula je vyhledávací forma, záhlaví.

Příklady ze skutečné věci, které bylo dříve dosaženo: Když GE revolucionizoval organizaci s designovým systémem

Teorie může stále vypadat komplikovaně. Pojďme se podívat na skutečné příklady světových organizací, jako je General Electric (GE). GE má obrovské digitální produkty. Každý tým navrhl uživatelské rozhraní různými směry. Což má za následek zmatek a mnoho plýtvání zdroji

Scházející problémy: Nedostatek násilí způsobuje, že značka vypadá jedinečný a trvá nový vývoj produktů déle, než je nutné

Jak vyřešit problém: Tým GE přinesl stejný princip do atomového designu a vytvořil „návrhový systém predix“. Vytvořili „komponentní knihovnu“, kterou musí každý v organizaci použít. Počínaje barvou, atomy (atomy) po datové karty, grafy, komplexní tabulky (organismy)

Úžasné výsledky:

• Snižte design a rozvíjejte obrovský, protože nemusíte z centra vytvářet něco nového
• Vytvořte sjednocený uživatelský zážitek. V každém produktu GE činí značku silnější a spolehlivější.
• Ušetřete obrovský rozpočet před snížením duplicitních funkcí

To je důkaz, že tvorba investic zpočátku, i když to může vypadat pomalu, ale dlouhé odměny jsou obrovské. A je to něco, co umožňuje organizaci růst udržitelně

Výzva: Slibuje před a po aplikaci GE. První strana ukazuje uživatelské rozhraní ze 3 aplikací, které jsou zcela odlišné. Po zobrazení všech 3 aplikací, které používají stejný návrhový systém, takže vypadá konzistentní a profesionálně. Se statistickými čísly, jako je „doba vývoje -60%“

Pokud chcete sledovat, co dělat: Kontrolní seznam začíná vytvářet atomový design sám (lze jej okamžitě použít).

Přečtěte si zde, pravděpodobně to chcete začít dělat, že? Nemusíte čekat! S tímto 5 jednoduchým kontrolním seznamem můžete okamžitě začít vytvářet systém atomového designu pro svůj projekt:

1. Vytváření účtů vlastností (Inventory UI): Prvním krokem je prozkoumat, co máte jako první. Zachytí každou stránku webu nebo aplikace. A všechny komponenty vyřízněte samostatně: všechna tlačítka, všechny typy, karty, všechny styly, všechna témata.
2. Určité atomy: Z aktiv vytvořených aktiv začnete seskupení a vytvořte standardy pro „atom“ nejprve, jako je definování hlavní sady barev (typografická stupnice), systém systému rozestupů a styl ikony Toto je vytvoření průvodce stylem, který je důležitým základem.
3. Sestavte tělo a vytvořte molekuly: Když je stabilní atom, začal ho spojit jako „molekulu“, která se často používá, například „vyplnění informací názvem“, „tlačítko ikonou“, „značky“, „články značky“
4. Vytvořte důležité organismy: Přesuňte se na další úroveň vytvořením většího a srdce webu, jako je záhlaví, zápatí, postranní panel nebo obrazová karta produktu pomocí tlačítka objednávky.
5. Používejte nástroje k vytvoření: Vytváření celého tohoto systému s rukama může být příliš obtížné. Pomocí nástroje návrhu FIGMA nebo náčrtu vám pomohou vytvořit „knihovnu komponent“, kde mohou všichni v týmu volat opakovaně. Figma má velmi výkonný nástroj. V tomto řízení a pokud chcete znovu jít nahoru, podívejte se na pokročilé techniky FIGMA , které vám pomohou pracovat rychleji.

Výzva: Krásné a snadné --s -to -nepochopitelné obrázky, zobrazující 5 kroků pro zahájení atomového designu s ikony v každé položce (zvětšovací brýle, bảng màu, molekuly, struktury a logo FIGMA).

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Shromažďuji otázky, které mnoho lidí přemýšlí o atomovém designu, aby jasně odpověděli. Zde

Otázka 1: Atomový design je vhodný pro malé projekty. Nebo samotné na volné noze?
Odpověď: Velmi vhodný! Ve skutečnosti, čím menší by se projekt měl začít, protože má vytvářet disciplínu a předpisy od začátku způsobující, když se projekt v budoucnu rozšiřuje, budete mít silný základ. Není třeba se dostat na bolesti hlavy Později systematické myšlení je vždy užitečné, ať už je tým malý nebo velký.

Otázka 2: Bude to první projekt pomalý?
Odpověď: Ano, je to o něco více investice v prvním období. Ale to, co jste se vrátili, je obrovská rychlost dlouhého období. Jako přísloví, které „souhlasilo s tím, že bude chodit pomalu na prvním místě lépe běžet rychleji a narazit uprostřed cesty.

Otázka 3: Atomový design a styl průvodce nebo designový systém odlišný?
Odpověď: Je to velmi dobrá otázka! Přemýšlejte takto:

• Průvodce stylem: Obvykle se zaměřte na „atomy“, jako jsou barvy, písma, logo, ikony.
• Atomic Design: je „filozofie“ nebo „metody“ při použití průvodce stylem, aby se tělo stalo do molekul, organismů, šablon a stránek.
• Design System: je nejpopulentnější. Jedná se o recyklovanou sadu komponent s pokyny a úplnými dokumenty. Atomový design je skvělý nápad vytvořit návrhový systém.

Otázka 4: Pokud existuje starý web, který je již chaotický, mohu si atomový design přizpůsobit?
Odpověď: Absolutně! Nemusíte to všechno demontovat najednou. Začněte z kroků „Inventář UI“, které doporučuji nejprve, abyste mohli vidět veškerý celkový obrázek, poté postupně vytvořte standardní komponentu jeden po druhém a poté nahraďte starožitnosti v každé části. Může začít nejčastěji před osobou jako první.

Výzva: Kreslené znaky stojí na křižovatce. Jeden chaotický a chaotický s názvem „Design založený na stránce“. Dalším způsobem je hladká a řádná silnice zvaná „atomový design“. Kreslený postava má na hlavě otazník. Sdělit rozhodnutí

Shrnutí pro snadné porozumění: Přestaňte stavět dům ... a otočte se a sestavte „Lego směrem k“

Pokud chcete shrnout atomový design, nejjednodušší je to způsob, jak změnit způsob myšlení z „budování celého domu“ pokaždé a vytvoření „standardní lego čtvrtiny“ s jednou sadou

Pokud máte dobrou sadu (atomy, molekuly, organismy), zda zákazníci chtějí „dům“, „hrad“ nebo „kosmická loď“ (stránky), můžete si vyzvednout stejné logo. Shromážděno do nové položky rychle, krásné a silné, se vším se stále zdá být součástí stejného vesmíru Lego

Investice do „systému“ dnes je nákup „rychlosti“ a „kvality“ příští den. Je to srdce digitálních produktů, které jsou připraveny k růstu a úpravě ve světě, které se brzy otáčí. A to je směrnice, kterou náš tým UX/UI design vždy drží

Dobře ... je čas, abyste začali vytvářet vlastní sadu Lego?

Výzva: Výkonný poslední obrázek ukazuje návrháře pro poslední LEGO na komplexní a krásné struktuře uživatelského rozhraní. Pozadí je graf, který ukazuje růst efektivity práce.

‍