Jak používat sady uživatelského rozhraní v Adobe XD
Různé / / November 29, 2021
Pro ty, kteří se zajímají o web design, jsou k dispozici UI sady Adobe XD jsou skvělý způsob, jak začít nový designový projekt. S těmito sadami získáte přístup k některým užitečným zdrojům, které můžete upravit a použít pro svůj web nebo návrh aplikace.
Pokud jste se softwarem noví a nejste si jisti, jak používat sady uživatelského rozhraní Adobe XD, pak jste na správném místě. V tomto článku vám ukážu, jak můžete nainstalovat sady uživatelského rozhraní do softwaru a poté použít přiložené zdroje pro váš projekt.
Jak stahovat sady UI v Adobe XD
Nejprve se podívejme, jak si můžete stáhnout sady uživatelského rozhraní v Adobe XD přímo ze softwaru. Chcete-li začít, postupujte takto:
Krok 1: Klikněte na tlačítko nabídky hamburgeru v levém horním rohu softwaru.
Krok 2: V nabídce přejděte dolů na možnost Získat sady uživatelského rozhraní a poté klikněte na jednu ze tří dostupných možností.
Pro tento článek si vyberu sadu Google Material UI. V závislosti na vašem projektu si však můžete vybrat buď sady Apple iOS nebo Microsoft Windows. Tím se otevře oficiální webová stránka, ze které si můžete zdarma stáhnout sady uživatelského rozhraní.
Krok 3: Na následující webové stránce vyhledejte sadu Adobe XD UI a stáhněte si ji do svého systému.
Krok 4: Nyní otevřete stažený soubor v Adobe XD a uvítá vás spousta kreslicích pláten obsahujících zdroje uživatelského rozhraní pro příslušnou platformu.
Chcete-li zobrazit všechna jednotlivá kreslicí plátna, můžete podržet tlačítko Ctrl a pohybem rolovacího kolečka přiblížit/oddálit.
Pokud si místo toho chcete stáhnout drátěné modely, můžete kliknout na možnost drátových modelů v nabídce Získat sady uživatelského rozhraní.
Další sady uživatelského rozhraní můžete také vyhledat na webu společnosti Adobe kliknutím na možnost Další sady uživatelského rozhraní v nabídce Získat sady uživatelského rozhraní.
Web má několik skvělých možností na výběr, včetně této opravdu skvělé sady Movie Magic UI, která vypadá jako head-up displej.
Nyní, když víte, jak stahovat sady uživatelského rozhraní, pojďme se podívat, jak je můžete použít ve svých projektech.
Jak používat sady uživatelského rozhraní v Adobe XD
Chcete-li ve svém projektu použít sady uživatelského rozhraní, postupujte podle těchto jednoduchých kroků:
Krok 1: Přibližte si prvek uživatelského rozhraní, který chcete ve svém projektu použít, a kliknutím na jeho název jej vyberte.
Krok 2: Nyní zkopírujte prvek pomocí zkratky Ctrl+C.
Krok 3: Poté z nabídky otevřete nový projekt Adobe XD.
Krok 4: Zde vložte prvek uživatelského rozhraní pomocí zkratky Ctrl+V.
V tomto článku použiji prvek Mobile Dark ze sady Google Material UI. Prvek obsahuje vodítka, která vám pomohou umístit více vrstvy, ale pokud je nechcete používat, můžete je snadno odstranit následujícím krokem.
Krok 5: Chcete-li vodítka odstranit, klikněte na ikonu zámku v levém horním rohu a poté stiskněte Odstranit. Tento krok můžete přeskočit, pokud chcete použít vodítka k přesnému umístění více objektů do prvku.
Krok 6: Nyní se vraťte do sady uživatelského rozhraní a vyberte další prvek, který chcete přidat na tuto stránku. Ještě jednou klikněte na název prvku a zkopírujte jej pomocí zkratky Ctrl+C.
Vytvořím základní přípitek pro tento článek, pro který použiji jeden z dialogů.
Krok 7: Vložte nový prvek na předchozí prvek a poté jej zarovnejte podle vodítek.
Krok 8: Chcete-li nyní upravit každý prvek v toastu, dvakrát klikněte na textové pole a poté zadejte text, který chcete použít. Nejprve změňme název přípitku.
Dále změňte obsah těla dvojitým kliknutím na textové pole a zadáním čehokoli, co chcete přidat.
Stejným způsobem můžete také změnit text tlačítek. Jakmile skončíte s úpravami textu, můžete změnit barvu a neprůhlednost textu. Chcete-li změnit neprůhlednost, posuňte posuvník pod možností Průhlednost na panelu nástrojů doprava.
Chcete-li změnit barvu textu, klikněte na obdélník vedle možnosti Výplň a poté vyberte novou barvu z výběru barvy.
A není to jen text, který můžete upravovat tímto způsobem. Můžete také změnit barvu a krytí téměř všech položek v dialogovém okně, což je skvělé, pokud hledáte jedinečné barevné schéma.
Jakmile budete s výsledkem spokojeni, pokračujte a uložte soubor kliknutím na možnost Uložit jako v nabídce nebo pomocí zkratky Shift+Ctrl+S.
Zdokonalte svůj design pomocí sad uživatelského rozhraní
Nyní, když víte, jak stahovat a používat sady uživatelského rozhraní v Adobe XD, jsem si jistý, že během okamžiku začnete chrlit úžasné návrhy. Tyto sady uživatelského rozhraní jsou rozhodně velmi užitečné a pomohou vám dostat se přímo k vašemu projektu, aniž byste se museli starat o navrhování jednotlivých prvků uživatelského rozhraní.
Další: Dokončili jste projekt na Adobe XD a nevíte, jak jej exportovat do HTML? Podívejte se na další článek s jednoduchým návodem krok za krokem.