Jak vylepšit Sketch?

Skica je v současné době jedním z nejlepších nástrojů pro návrh uživatelského rozhraní. Je to první návrhářský nástroj vytvořený s cílem uspokojit vznešené potřeby návrhářů produktů. Sketch byl mnohokrát tak pěkným překvapením, že jsem byl ohromen, jak je to intuitivní.

Mám rád Sketch kvůli flexibilitě, kterou poskytuje svým uživatelům. Můžeme použít vlastní pluginy, nastavit vlastní zkratky a vytvořit pracovní postup, který nám nejlépe vyhovuje. Jako nerdy klávesové zkratky se cítím jako doma se Sketchem. S klávesovými zkratkami můžeme dělat spoustu operací. Osobně ráda používám Runner (zadáním příkazů se cítím jako hacker ).

Přes veškerou velkolepost skici je stále ještě prostor pro zlepšení. Níže vidíte můj osobní seznam přání:

1. Vyberme barvy pro symboly

Přepisy symbolů byly v pracovním postupu Sketchu měničem her.

V dávných dobách jsme potřebovali vytvořit samostatnou verzi každé instance symbolu. Role symbolu byla v zásadě omezena na velmi jednoduchý prvek, jako je ikona jednoho stavu nebo tlačítko.

Vidíš tady vzor?

Pokud jsme například potřebovali lištu karet iOS, museli jsme mít více verzí každého stavu tlačítka. Pokud bychom měli 5 karet, pak jsme potřebovali alespoň 5 symbolů. Pokud jsme chtěli ukázat různá „oznámení“ pro každý prvek a každou obrazovku, pak jsme museli vytvořit samostatnou verzi symbolů s oznámeními. Zkrátka, každý další „stav“ symbolu by vás nutil vytvořit zcela nový, oddaný symbol.

Nyní můžeme vytvářet stále komplexnější symboly, které obsahují ještě flexibilnější prvky. Můžeme žonglovat instance v elementech, odkládacích ikonách, prvcích, stavech, oznámeních atd., Což je mnohem flexibilnější. Konečně můžeme téměř plně využít potenciál symbolů! Téměř…

Problém:

Abychom přepsali stavy nebo jednoduše použili různé barvy stejných ikon, musíme vytvořit více verzí stejné ikony pouze s jinou barvou výplně ... Mám pocit, že by to mělo být vyřešeno jinak.

Navrhované řešení (základní):

Můžeme si vybrat z našich „barev dokumentů“

K tomuto problému můžeme přistupovat stejným způsobem, jako jsou textové vrstvy zpracovávány symboly. Jsou upravitelné. To nám umožňuje jednoduše vybrat barvu výplně.

Navrhované řešení (pokročilé):

Další panel pro změnu nejen barev, ale i dalších hodnot

Jak můžete vidět zde, můžeme jít ještě dále a otevřít více možností pro nedestruktivní vydání symbolu symbolu (mám pocit, že zde mimochodem potřebujeme širší terminologii). V tomto modelu je začátek osy vnořeného symbolu v levém horním rohu. Mohli bychom dokonce změnit jeho místo a velikost, transformovat jej, změnit jeho neprůhlednost a prolnutí override. Ale počkejte chvilku! Není to tak snadné. Co když má symbol více prvků v různých barvách? Jsem rád, že jste se zeptal. Mohli bychom k němu přistupovat dvěma způsoby:

1. Následující menu se zobrazuje, pouze pokud je obsah symbolu jeden (kombinovaný) tvar nebo sada tvarů se stejnými barvami výplně.

2. Následující nabídku zobrazte pouze pro prvek, který má barvy z knihovny (to znamená, že barvy lze změnit).

Nutnost je matkou vynálezu, takže v současné době používám řešení: Používám čisté barvy jako masku, kterou mohu změnit, ale má svá omezení a vyžaduje další práci.

2. Přepněme režim prolnutí pomocí zkratky

Bylo by skvělé mít možnost rychle procházet režimy prolnutí.

Pokud chcete vidět, jaký efekt bude mít režim prolnutí, musíte:

  1. Klikněte na rozbalovací nabídku
  2. Vyberte režim prolnutí
  3. Klikněte na, zavřete rozevírací nabídku a podívejte se na výsledek.
  4. Chcete to změnit? Opakujte pro 16 režimů prolnutí

V tomto případě software Adobe dělá mnohem lepší práci tím, že nám umožňuje rychle procházet režimy podržením klávesy shift ++ (plus) pro přepnutí do následujícího režimu a posunem + - (mínus) pro přepnutí zpět do předchozího režimu.

V tomto případě software Adobe dělá mnohem lepší práci tím, že nám umožňuje rychle procházet režimy přidržením kláves Shift + (plus) pro přechod na další režim a Shift - (mínus) pro přepnutí do předchozího režimu.

3. Dejte nám možnost skrýt prvek symbolu ve výchozím nastavení

Jak náš projekt postupuje, vytváříme stále více pokročilých instancí symbolů. Uvažujme základní navigační panel iOS.

Toto je náš základní symbol:

Příklad flexibilního symbolu

Umožňuje nám vytvořit následující instance (jednoduše zapnutím a vypnutím prvků):

Problém:

Předpokládejme, že v projektu máme takových 40 případů. Během iterace návrhu zjistíme, že k tomuto symbolu musíme přidat další prvek, který bude viditelný pouze na některých konkrétních nových obrazovkách:

K symbolu jsme přidali nový prvek

Přidání nového prvku ovlivní všech 40 instancí:

Nový prvek byl přidán do všech našich instancí, což projekt trošku ins zničí

Řešení:

Protože je lepší skrýt tento nový prvek v jednom základním symbolu, než hledat ho ve 40 případech, bylo by skvělé mít tuto možnost (ve výchozím nastavení skrýt) v základním symbolu.

4. Možnost přiřazení zkratky pro „Set to Original Size“ (symbol)

Problém:

Představte si, že máte 20 příkladů symbolu. Pak se rozhodnete trochu změnit velikost kresleného symbolu. Obvykle se tím zmatují instance symbolů, takže musíte jít jeden po druhém, RMC, přejděte do samého spodku rozbalovací nabídky a zvolte „Nastavit na původní velikost“.

Bylo by mnohem jednodušší přiřadit této funkci klávesovou zkratku. Je zábavné, že v nabídce existuje taková možnost, ale týká se obrázků: Vrstva / Obrázek / Nastavit na původní velikost. Bohužel to pro symboly nefunguje.

Řešení: Sjednotte jej, např. Layer / Object / Set to Original Size. To by fungovalo jak pro symboly, tak pro obrázky (pak k tomu budeme moci přiřadit zkratku )

5. Více modifikátorů posunu

Jednoduše: přiřaďme více modifikátorů posunu (kromě Shift pro x10). Např. Shift + Fn pro multiplikátor x100. Bylo by skvělé stanovit naše vlastní nudge hodnoty. Pro to však existují pluginy.

6. V dialogových oknech přidejte zkratky CMD + písmeno:

CMD + D a CMD + C nefungují

Většina softwaru využívá tento jednoduchý trik, což usnadňuje život milionů lidí. Byl jsem trochu zklamaný, že Sketchu chybí tato jednoduchá funkce, ale jak vidím, stává se to i to nejlepší .

7. Mezerník pro přesunutí vytvořeného místa opravy

Co když chci změnit polohu vytvořeného bodu?

Adobe zde uvádí lepší příklad. V softwaru společnosti Adobe můžeme snadno změnit umístění čerstvě vytvořeného bodu přidržením mezerníku (zatímco stále držíte stisknutou LMB). Bylo by skvělé mít stejnou flexibilitu při práci s cestami v náčrtu.

8. Rozhodněte se, jak chceme, aby se naše symboly zmenšovaly

V současné době, pokud chceme změnit měřítko symbolu, je jedinou možností jeho natažení tažením myši nebo použití vstupů velikosti. Nemůžeme použít dialogové okno měřítka, takže to znamená, že jsme ponecháni bez možnosti měřítka symbolu úměrně (s proporcionální velikostí písma atd.).

To by prozatím bylo všechno. Doufám, že se k těmto nápadům budou vztahovat i další návrháři - dejte mi prosím vědět, co si myslíte v komentářích! Doufám také, že tým českého kódování to bude považovat za užitečný. Možná bych měl hádat, že na některých problémech již pracují, protože se zdají být blízké komunitě. Možná, že řešení a implementace nás překvapí - jako obvykle - pozitivním způsobem! Nemůžu se dočkat, až uvidím, jak budou vypadat další verze Skica, a držím jim palce. Mír ️

Článek byl původně publikován na blogu Netguru