Konstrukční nástroje docházejí. Zde je návod, jak je opravit.

Zřídka uběhne den, ve kterém trávím alespoň nějaký čas přemýšlením o designových nástrojích. Před několika lety jsem postavil konstrukční nástroj, který získal Marvel. Bylo to před dvěma lety, ale od té doby se krajina příliš nezměnila, ani moje vášeň pro její zlepšení.

Nedávno jsem tweetoval o designových nástrojích - o věcech, o kterých je známo, že se čas od času stanou.

Nebyl jsem jediný, kdo v ten den promluvil svou myslí, jiní se také přidali.

28. července 2017 nebyl pro návrhářské nástroje dobrý den.

V těchto vláknech Twitter je pochováno mnoho skvělých poznatků, ale po dlouhou dobu jsem chtěl věnovat čas tomu, abych se ponořil hluboko do toho, co je to, co si myslím, že je v zásadním rozporu o současném modelu designového nástroje. jako náznak tohoto směru si myslím, že bychom měli směřovat.

Všichni jen kreslíme obrázky. Je to šílené.

Téměř všechny oblíbené návrhářské nástroje exportují do obrázků. To je problematické z několika důvodů:

  1. S obrázkem nemůžete interagovat. Nástroje pro prototypování nám umožňují přidávat do obrázků přechody na obrazovce a jednoduché interakce. Protože však naše produkty nadále vyžadují pokročilejší přechody na obrazovce a mikrointerakce, obrázky prostě nemohou držet krok.
  2. Obrázky nejsou plynulé. Komunikace citlivých návrhových rozhodnutí prostřednictvím obrázků je obvykle obtížný úkol.
  3. Obrázky nejsou stavové. Aby bylo možné účinně komunikovat různé stavy pro uživatelské rozhraní, je často zapotřebí mnoho obrazů.
  4. Bitmapové obrázky závisí na rozlišení. S příchodem sítnicových zařízení se obrázky někdy mohou vykreslit špatně.
  5. Soubory obrázků bývají těžké a často je obtížné je ukládat, spravovat nebo sdílet.

Dokud návrhové nástroje budou i nadále exportovat obrázky, nebudou nikdy schopny vytvářet přesné reprezentace našich produktů. Tento nedostatek přesnosti brání komunikaci mezi designéry a vývojáři. Dokud designéři nadále používají ke komunikaci své práce žalostně neadekvátní médium, bude tato práce vždy otevřena nesprávné interpretaci.

To je velmi významný bod, protože téměř všechny nástroje pro návrh převádějí vektorové tvary na obrázky. Photoshop, Illustrator, Marvel, Adobe XD, Sketch a Figma jsou v tomto ohledu stejné. Obrázky však mohou komunikovat záměr designu pouze částečně. Protože naše produkty nadále přijímají a podporují komplexní interakce, hlasový vstup, video vstup, rozšířenou realitu, virtuální realitu, citlivost na teplotu atd., Hodnota, kterou tyto nástroje poskytují, se rychle sníží. Obrazový design je slepá ulička.

Naše konstrukční nástroje by měly manipulovat se skutečným produktem, nikoli jeho obrázkem.

Naše výrobky jsou interaktivní. Naše nástroje jsou statické.

Dotkl jsem se toho ve svém předchozím bodě, ale je to velmi kritické, takže jsem si myslel, že bych to trochu propracoval.

Přemýšlejte o množství jednoduchých interakcí, které jsou běžné u téměř všech našich produktů, ale prostřednictvím našich návrhářských nástrojů je nelze sdělit. Zde je krátký seznam z horní části mé hlavy:

  • Podržení tlačítka
  • Zaostření vstupu
  • Zaškrtávací políčko
  • Obsah s kartami
  • Posouvejte oblasti
  • Index záložek pro zaostřené stavy
  • Klávesové zkratky

Jistě, některé z těchto funkcí lze napodobit nějakým hackerským inženýrstvím, ale člověk se musí divit, co na Zemi je smysl? Proč designéři nemohou navrhnout pouze skutečný produkt ?! Nakonec jsou všechny makety jednorázové, přesto návrháři tráví měsíce vylepšováním k dokonalosti. To by bylo mnohem lepší strávit vylepšením skutečného produktu.

Nebudu příliš daleko po králičí díře „měli designéři kód“, ale nenavrhuji, abychom všichni psali kód. Jen říkám, že neexistuje žádný dobrý důvod, proč naše konstrukční nástroje nemohou podporovat přímou manipulaci s našimi živými produkty.

Framer odvádí na tomto oddělení lepší práci než většina ostatních a podporuje pokročilé a podrobné interakce. Zbytek balení je velmi pozadu.

Naše nástroje by měly podporovat paradigma rozložení webu

Před zhruba rokem bylo jediným způsobem vytváření rozložení na webu použití vlastností CSS zobrazení: tabulka a svislé zarovnání. Nyní máme Flexbox a brzy budeme mít mřížku CSS. Tyto tři motory rozložení fungují docela podobně a využívají tok DOM. Téměř všechny webové stránky jsou vytvořeny pomocí jednoho z těchto tří systémů rozložení.

Je tedy logické, že naše návrhové nástroje podporují stejný model rozvržení. Že jo?

Téměř všechny konstrukční nástroje tyto systémy rozložení ignorují, místo toho se rozhodly umístit každou vrstvu absolutně do své kreslicí plochy. To otevírá propast mezi tím, jak web funguje a jak fungují naše nástroje pro návrh, a přináší mnoho problémů:

  • Citlivý design se stává velmi obtížným, protože každá vrstva musí být upravena ručně pro každý bod zlomu. Alternativně lze zavést systém rozvržení založený na omezení, který však zvyšuje složitost, zvyšuje křivky učení a v konečném důsledku zabraňuje vývojářům přenášet rozvržení přímo na web.
  • Protože je každá vrstva mimo tok dokumentu, manipulace s obsahem se stává složitější. Například, pokud chcete přidat položku do seznamu, musíte ručně přemístit ostatní položky v tomto seznamu. Samozřejmě mohou být zavedeny funkce opakování a další fantastické funkce pro zmírnění bolesti, ale opět to přináší přidanou složitost a komplikuje něco, co nám DOM poskytuje zdarma.
  • Absolutní umístění přirozeně vede k pevným souřadnicím a rozměrům pixelů. To přináší neschopnost a opět je to obrovský odklon od toho, jak web funguje. Web je postaven na tekutinových jednotkách jako em, rem, vh, vw a%. Naše nástroje by měly tyto jednotky standardně podporovat.

Konstrukční nástroje by neměly potřebovat, aby se podobaly nebo odrážely web a jeho nuance - měly by být pouze webem.

Monolitický nástroj není cesta

Dobrý design se děje ve fázích. Dobře strukturovaný konstrukční systém má několik různých vrstev:

  1. Paleta stylů Kolekce barev, stínů, mezer, poloměrů ohraničení, řezů, velikostí písma, animací a dalších stylů, které tvoří vaši identitu značky. V současné době většina návrhových nástrojů podporuje pouze palety barev. Dokud nepodporují ostatní vlastnosti stylu, bude velmi náročné pracovat systematicky.
  2. Aktiva Patří sem prvky jako ikony, ilustrace a obrázky. Tam jsou některé fenomenální editory obrázků a Figmův vektorový nástroj je vynikající, ale pokud jde o podporu SVG, naše návrhové nástroje nechávají hodně být požadovaný.
  3. Knihovna komponent Komponenta je kolekce stylů a prostředků, která vykresluje data do jediného prvku v různých variantách. Mezi příklady patří tlačítka, vstupy, odznaky atd. Jak jsem již zmínil, Figma a Sketch nedávno tento proces omezili od hlavního toku výkresu - je škoda, že jsou to jen obrázky komponent a nikoli skutečné komponenty.
  4. Moduly Modul / skladba je soubor komponent, který poskytuje data do zapouzdřeného kusu uživatelského rozhraní v různých stavech. Příklady mohou zahrnovat záhlaví, nabídky karet, přihlašovací formuláře, tabulky atd. Protože moduly jsou jen složité komponenty, myslím, že Figma a Sketch to zvládnou také. Ačkoli mohou existovat určité zásluhy pro oddělení těchto dvou.
  5. Obrazovky Obrazovka je soubor modulů, komponent a dat, které tvoří kompletní uživatelské rozhraní, se kterým může uživatel interagovat.

Většina návrhových nástrojů poskytuje funkce, které podporují každou z těchto fází návrhu alespoň do určité míry. Problém je v tom, že všechny fáze jsou spojeny. Téměř všechny nástroje pro návrh nabízejí pouze jeden režim - režim kreslení. Vytvoříte sadu kreseb a začnete kreslit obrázky. Teprve nedávno mají nástroje jako Sketch a Figma abstrahovány komponenty / symboly od hlavního režimu kreslení - což je divné, protože ve vývoji front-end byly komponenty po mnoho let abstrahovány.

Při navrhování palety stylů nemusím vidět kreslicí plátna ani vektorové nástroje. Chci vidět nástroje pro výběr harmonických barev. Chci předvolby pro věci jako měřítko 8dp nebo výběr typových měřítek.

Navrhování ikony vyžaduje zcela jiný způsob myšlení než navrhování toku uživatele. Ideální by byl jednoduchý editor SVG, který mi umožňoval nakreslit nativní obdélníky, kruhy, čáry a cesty SVG a poté exportovat optimalizovaný kód SVG.

Při navrhování komponenty bych již neměl přemýšlet o jednotlivých stylech - jednoduše bych měl vybírat styly z mé předdefinované palety stylů. Nemohu jen začít ladit styly pro jednu součást, protože by to představovalo nekonzistenci a oslabilo účinnost mého konstrukčního systému. Jakmile je paleta stylů na místě, měla by být upravitelná pouze u zdroje.

Stejně tak při sestavování modulu bych měl být vystaven pouze mé předdefinované knihovně komponent. Na postranním panelu by neměly být žádné vlastnosti stylu. Žádné vektorové nástroje. Pouze knihovna opakovaně použitelných komponent, které mohu přetáhnout a sestavit moduly.

Totéž platí pro vytváření obrazovek. V tomto okamžiku právě používáme komponenty a moduly k vytvoření uživatelského rozhraní. Nemyslíme na styly nebo tvary ani na jiné kreativní snahy. Zaměřujeme se především na navrhování obsahu a toků uživatelů.

Každá z těchto fází návrhu by mohla probíhat v samostatných nástrojích úplně nebo jen v různých režimech ve stejném nástroji. Nemyslím si, že na tom záleží. Jedna věc je však jistá, že většina současných návrhářských nástrojů nedokáže tento proces ani uznat.

Naše nástroje by měly podporovat dobrý design

Designéři mají výjimečný luxus v tom, že do projektu mohou přidat nekonečný počet jedinečných stylů bez výrazných následků. Potřebujete trochu větší velikost písma? Jen to naraz. Nic velkého. Potřebujete mírně jasnější barvu? Jen to vyladím. To je super. Mohli byste dokonce vytvořit více kreseb ve stejném projektu, z nichž každý by používal mírně odlišné hodnoty pro podobné styly a pravděpodobně by to nevšimlo.

Váš návrhářský nástroj vám nikdy neřekne, že něco nemůžete udělat. Nikdy vás nebude tahat za použití barvy mimo značku. Nikdy vám nezabrání používat mezeru, která nepatří do vaší mezery. Nikdy vás nebude varovat, že 20% populace doslova nevidí ten světle šedý text, který jste právě navrhli.

A proč ne…? Protože designovým nástrojům je to jedno.

Nástroje pro navrhování jsou tak ostře zamilovány vizí pro neomezenou kreativitu, že ztratily ze zřetele to, co to znamená rozumně navrhovat, inkluzivně navrhovat, systematicky navrhovat.

Jednoduše řečeno, konstrukční nástroje nám umožňují dělat, co chceme, sakra. Tato úroveň neomezené tvořivosti je do určité míry užitečná, zejména ve fázi myšlenek. Jako návrháři uživatelského rozhraní však většina našeho pracovního postupu nevyžaduje větší kreativitu. Náš pracovní postup spíše vyžaduje opakované použití, opakování, známost a standardizaci; potřeby, které naše nástroje neuspokojují.

Tato neomezená svoboda je v rozporu s realitou vývoje webu. Protože vývojáři pracují se skutečným produktem, musí všichni pracovat se stejným kódem. Vývojáři nemohou do kódové základny jednoduše přidat izolované velikosti písma nebo náhodné hodnoty barev. Zaprvé by linter (varovná zpráva s upozorněním na špatně napsaný kód) pravděpodobně okamžitě začal křičet. Pokud ne, pak by se jejich přezdívaná zručnost pravděpodobně při revizi kódu zatkla. Pokud by se nějak podařilo proklouznout trhlinami, znatelný dopad na výkon by nakonec zazněl alarm.

Jedním z nejškodlivějších problémů, se kterým se setkávám v týmech produktů, je odpojení mezi týmy designu a vývoje. Vývojáři pracují už několik let s přísnými pokyny a omezeními. Pokud naše konstrukční nástroje nepřijmou stejná omezení, mezera se nikdy nezuží.

Měli bychom navrhovat živá data

Živá data byla do jisté míry začleněna do mnoha nástrojů, což je skvělé vidět. Adobe XD má některé opravdu elegantní funkce pro generování falešných dat, která se podobají typickým živým datům. Invision Craft také poskytuje některé skvělé funkce živých dat pro aplikaci Sketch.

Živá data by však neměla skončit s textem. Další prvky, jako jsou obrázky a video, mohou mít obrovský dopad na uživatelský dojem tím, že se výrazně prodlouží doba načítání. Pokud pracujete na webu, vývojářské nástroje prohlížeče vám umožňují omezit připojení tak, aby se podobaly různým rychlostem internetu. Poté uvidíte z první ruky, jak může nový obsah ovlivnit uživatelský dojem.

Umožňují nám naše designové nástroje tyto luxusní výrobky?

Jedním slovem: ne.

Čím blíže se dostaneme k navrhování skutečného produktu, tím užitečnější a působivější může být naše projekční práce.

Web je otevřený. Naše nástroje by také měly být.

Jednou z opravdu krásných věcí na webu je jeho otevřená přístupnost. Web lze zobrazit v libovolném webovém prohlížeči téměř na jakémkoli zařízení.

Jak se to porovná s designovými nástroji? Před několika dny mě můj bratr David požádal o revizi návrhu aplikace, kterou staví. Poslal mi soubor Sketch. Když jsem to otevřel, stalo se to ...

Většina konstrukčních nástrojů jsou zděné zahrady. Pokud jeden kolega pracuje ve Photoshopu, jiný kolega nemůže otevřít tento projekt v aplikaci Sketch. Nestačí, aby celý tým používal stejný nástroj - musí také používat stejnou verzi tohoto nástroje.

Marvel a Figma zde vykonávají dobrou práci a nabízejí bezplatné plány a inovativní funkce spolupráce.

Jaká je tedy budoucnost designových nástrojů?

Inovace v oblasti návrhářských nástrojů je nesmírně cenná a v poslední době toho bylo hodně. Na návrhářských nástrojích Airbnb Jon Gold a Benjamin Wilkins pracovali na React-Sketchapp, který vezme komponenty React a vykreslí je uvnitř Sketch. Jon a Ben také pracovali na novém nástroji, který vyzařuje mysl, který vezme náčrtky ubrousků a nějak je promění v komponenty React.

Adam Morse, Brent Jackson a John Otander pracují na sadě nástrojů ve skladateli, které v podstatě řeší všechny problémy v tomto článku a možná i ve světě.

Pracuji na Modulzu, novém konstrukčním nástroji a open-source designovém systému, jehož cílem je také vyřešit problémy, které jsem zmínil v tomto článku. Máte-li zájem, sledujte na Twitteru aktualizace.

Zatímco inovace v oblasti nástrojů jsou důležité, skutečnou výzvou je vzdělávání. Komunita designu prostě není připravena na systematický nástroj pro návrh. Mnoho designérů má malý až žádný zájem o systémy budov. Pro některé je JPG konečným cílem - Dribbble má rád.

Potřebujeme nějak inspirovat kulturu odpovědnosti. Vývojáři měli řadu let kulturu odpovědnosti. Mají nástroje pro udržení svého kódu pod kontrolou. Pokud se vývojář opakovaně odchyluje od svých přísných pokynů pro kódování, můžete si být jisti, že problém bude vyřešen.

Mezitím designéři často hromadí hory vrstev v naprostém nepořádku s malým ohledem na pojmenování, seskupování a uspořádání vrstev. Je to vlastně každý. Protože výstup (rastrový obrázek) není ovlivněn vstupem (vektorové vrstvy), není na návrháře, které mají být uspořádány, žádné skutečné zatížení. Designéři často omlouvají tento nedostatek organizace tím, že romantizují umění designu, malovat sami sebe jako kouzelníky, kteří potřebují, aby mohli hrát, na svých vlastních zařízeních.

Musíme také inspirovat kulturu inkluze. Měli bychom aktivně odrazovat od zanedbávání praktik, jako jsou ultralehké barvy textu, které ztěžují čtení textu pro mnoho lidí, nebo vysoce kvalitní písma, která způsobují pomalé načítání webových stránek, nebo prvky bez vzorů uživatelského rozhraní, které ztěžují pochopení věcí pro nevidomé. V současné době je tento typ zanedbávání povinností mezi komunitou designérů potlesk. Pokud máme uvítat inteligentní designový nástroj, musíme tuto kulturu převrátit.

Má-li systematický designový nástroj získávat naše srdce, musí se nejprve vzdělávat.