Jak zajistit, aby váš návrh uživatelského rozhraní plně reagoval s náčrtem - část 1

Nebo jak použít tekutinový plugin k tomu, aby váš návrh uživatelského rozhraní automaticky změnil jeho obsah…

Úvod

Myslím, že všichni znáte následující situaci: Vytvoříte návrh pro jeden pager nebo aplikaci a musíte změnit výšku druhého modulu, protože jste přidali text nebo prvek. Kromě toho chcete změnit velikost obrázku záhlaví. Co se stalo? Musíte mít na paměti všechny mezní hodnoty mezi jednotlivými moduly, vybrat je a podle toho upravovat výšky modulů nahoru a dolů…

To může být nepříjemné

Ne, to se mi nelíbí! Raději bych zasáhl „Aktualizovat“ a všechny prvky se automaticky pohybují podle změn. A to je to, co lze udělat s pluginem Fluid.

Přesně takhle:

Kouzlo :)

O doplňku Fluid Plugin

Fluid je velmi cool plugin a mám pocit, že je velmi podceňován, protože tam nemůžu najít mnoho článků nebo návodů. Ale velmi se mi líbí a je to nezbytné pro můj pracovní postup. Bylo tam před automatickým rozvržením a je ve skutečnosti docela podobné, ale má jiné uživatelské rozhraní a žádnou funkci automatické aktualizace, což je pro mě v pořádku.

Ale tekutina má oproti automatickému rozvržení velkou výhodu: matematické výrazy můžete použít k vytvoření relativních okrajů mezi elementy. To znamená, bez ohledu na to, jak dlouho je text nebo jak vysoký je obrázek nastaven, všechny prvky se pohybují svisle podle provedených změn.

Úžasná funkce, která by mohla zpočátku znít jako tichá technická. Ale věřte mi, není to tak složité a touto funkcí ušetříte spoustu času. Pojďme na to…

Výchozí bod

Zde je váš výchozí bod: Stáhněte si tento příklad souboru Skica. Pak si stáhněte Fluid Plugin zde nebo lépe použijte Sketch Toolbox a hledejte jej.

Krok 1: Uspořádejte vrstvy

Nejdůležitější věcí je uspořádání vrstev. Tento přístup je založen na tzv. „Předchozím sourození“. Musíte uspořádat vrstvy shora dolů. Protože jsou vrstvy v náčrtu (stejně jako ve Photoshopu) v inspektoru vrstev umístěny zdola nahoru, zatímco vizuální design je uspořádán shora dolů, je to trochu matoucí, ale na to si zvyknete.

Uspořádání vrstev

Takže po uspořádání vrstev zdola nahoru (obráceně podle toho, co vám rozvržení ukazuje, máte?;)) Můžete začít vytvářet některá pravidla…

Krok 2: Zajistěte vzájemnou závislost poloh prvků

Nejprve si přejete mít flexibilní výšku obrázku, takže vše pod obrázkem se bude pohybovat nahoru a dolů podle výšky obrázku. K dosažení toho, že tyto prvky potřebují relativní okraj k výše uvedenému obrázku (= předchozí sibling). Musíte tedy udělat: Vyberte skupinu „Text“, otevřete okno tekutin a přidejte skupině „Text“ následující připnutí:

Definování relativní marže k předchozímu sourozenectví

To znamená, že skupina „Text“ se pohybuje přesně pod skupinou „Záhlaví“ (to je 100%) plus marže 24 (to je 24). Prostě fušujte kolem hodnot a budete rozumět.

Poté stisknete Kopírovat v okně Kapalina a udělejte totéž pro níže uvedené skupiny vrstev. Opakujte to také pro všechny prvky uvnitř skupin, jako je tento:

Definování ještě více relativních marží

Dále chceme, aby se lišta s datem (německé datum, promiňte :) nalepila na spodní část obrázku, bez ohledu na výšku. Abyste toho dosáhli, musíte dát této liště následující připnutí:

Vytvoření prvku přilepeného na dno skupiny

Jakmile nastavíte všechny vrstvy a skupiny, které by mohly být pravděpodobně ovlivněny změnami nad sebou nebo pod sebou, máte rozvržení, které je vertikálně velmi flexibilní. Co znamená: Méně kliknutí a méně času na opakované pohyby vrstvy.

Poznámka: V tomto tutoriálu jsme definovali okraje pro každou malou vrstvu, abychom vytvořili nejflexibilnější rozložení, jaké kdy svět viděl :) Je zřejmé, že to může být velmi složité a matoucí. Většinou tedy dělám připínání mezi hlavními skupinami nebo moduly. Je to velmi rychlé a snadné, šetří čas a vůbec se nestává příliš složitým.

tadaa: Vaše dokončené rozvržení by se mělo chovat takto:

Závěr

Přestože je Fluid tak úžasný a výkonný plugin, má tu a tam nějaké drobné chyby a matoucí chování. Proto používám Fluid hlavně proto, aby moje rozložení svisle reagovalo. Je to pak změna velikosti podle obsahu a můžete si hrát s délkou textů a výšek prvků, aniž byste museli pohybovat jakýmkoli prvkem ručně. Pro různé šířky obrazovky doporučuji držet se automatického rozvržení. Jejich kombinace bude pokryta částí 2.

Pokud se vám tento tutoriál líbil, bude se vám líbit část 2, která spojuje tekutiny a automatické rozložení: „Jak spojit tekutiny a automatické rozložení a vytvořit design uživatelského rozhraní, který je svisle a vodorovně citlivý“

Doufám, že vám tento návod pomůže nebo vás inspiruje. Pokud ano, sdílejte to jednoduše kliknutím na the dole. Děkuji

Mimochodem. Rozvržení, které používám, je obrazovka podrobností z naší bezplatné aplikace pro iOS s názvem MYGIGS. Je to aplikace dvou vývojářů a já jsem vytvořil ve svém volném čase bez jakýchkoli investorů nebo rozpočtu. Rychlým a snadným způsobem vám ukáže koncerty a kluby v okolí a dalších městech. Je to zdarma, jen to chytněte :)