Hogyan készítsünk mintakönyvtárat a Sketch-ben

Küzdött már valaha a webes tervezés következetességével? Ez túl gyakran történik, különösen akkor, ha méretarányosan dolgozik. Szerencsénkre a mintakönyvtárak segítenek!

A mintatár a felhasználói felület tervezési elemeinek gyűjteménye, amelyek újrafelhasználhatók oldalak készítéséhez. Ilyen például a navigáció, gombok, bekezdések, fejlécek és űrlapok. Azáltal, hogy a teljes oldalak helyett egyedi elemeket tervezünk, aktívan ösztönözzük az újrafelhasználhatóságot, következetes és könnyen karbantartható terveket eredményezve.



A mintatár bevezetése előtt meg kell győződnünk arról, hogy tervezőeszközeink képesek-e az újrafelhasználható elemek kezelésére. Az elmúlt két évben a tervezési eszköz a Sketch volt: könnyű, vektor-alapú eszköz, amely tökéletesen illeszkedik az interfészekhez és a mintatárakhoz. Miért tökéletes? Mondok egy példát.

Tegyük fel, hogy van egy gombeleme, amelyet többször használnak az egész weboldalon, majd döntsön úgy, hogy megváltoztatja. Általában át kell esnie és manuálisan módosítania kell a gomb minden egyes példányát. Sketch-kel nem. A szoftver tartalmaz egy Szimbólumok nevű funkciót: egy speciális fóliacsoportot, amelyben a szimbólumon végzett bármilyen változtatás automatikusan alkalmazandó az összes többi példányra. Tökéletesen használható újrafelhasználható elemekkel.

OK, elég, ha Sketch dicséretét énekelem. Merüljünk el a bemutatóban! Nincs másolata a Sketch-nek? Egyszerűen menjen át itt az ingyenes próbaverzió letöltéséhez.

01. lépés

Állítsa be a rajztáblát

Állítsa be a rajztáblát

Mielőtt elkezdenénk, győződjön meg arról, hogy rendelkezik az ingyenes Google betűtípussal Forrás Sans Pro telepítve. Hozzon létre egy új dokumentumot, majd helyezzen be egy új rajztáblát a Beszúrás> Rajztábla menüpont megnyitásával (billentyűparancs: A). A rajztábla egy rögzített vászon, amelyet képernyőméretként fogunk használni. Észre fogja venni, hogy az „Artboard 1” hozzá lett adva a bal oldali réteglistához. A jobb oldalon található Ellenőr panelen állítsa a szélességet 1280 képpontra, a magasságot pedig 2000 képpontra.

02. lépés

Készítsd el a rácsodat

Készítsd el a rácsodat

Most, hogy létrehozzuk a rácsunkat. Az Artboard 1 kiválasztásával lépjen a Nézet> Vászon> Elrendezés megjelenítése elemre (billentyűparancs: Ctrl + L). Ekkor megjelenik egy alapértelmezett rács. Most csak szerkesztenünk kell. Ha az Artboard 1 még mindig ki van választva, lépjen a Nézet> Vászon> Elrendezés beállításai elemre. Állítsa a teljes szélességet 1080px-re, az oszlopok számát 12-re, az ereszcsatorna szélességét 30px-re, az oszlopszélességet pedig 60px-re. Győződjön meg arról, hogy be van-e jelölve az ereszcsatorna. Kattintson a Közép gombra.

03. lépés

Gomb készítése

Gomb készítése

Most elkészült a rajztáblánk és a rácsunk, itt az ideje, hogy adjunk hozzá tartalmat. Ehhez az oktatóanyaghoz négy különböző típusú minta könyvtár elemet fogunk létrehozni. Kezdjük a gombokkal. A gomb hátterének létrehozásához lépjen a Beszúrás> Alakzat> Téglalap elemre (billentyűparancs: R). Az Ellenőrben állítsa a Szélességet 280 képpontra, a Magasságot pedig 44 képpontra. Állítsa a Sugárt 3 képpontra, a kitöltési színt # 1A9DD3 értékre.

04 lépés

Szöveg beszúrása és formázása

Szöveg beszúrása és formázása

Most a szöveg hozzáadásához. Lépjen a Beszúrás> Szöveg lehetőségre (parancsikon: T). Változtassa a betűtípust Source Sans Pro-ra, a súlyt félkövérre, a színt #FFFFFF-re, a méretet 16pt-ra, és kattintson a középső igazítás ikonra. Helyezze a szöveget úgy, hogy a háttér közepére kerüljön. Válassza ki mindkét réteget, és lépjen az Elrendezés> Csoportos rétegek menüpontra (billentyűparancs: Cmd + G). A kiválasztott csoporttal lépjen a Réteg> Szimbólum létrehozása elemre. Észre fogja venni, hogy a Sketch kéri, hogy nevezze el a szimbólumot, ezért írja be a gombot. A szimbólumokat lila réteg ikon alapján lehet felismerni.

05. lépés

Szimbólumok használata

Szimbólumok használata

A Szimbólumban végrehajtott bármilyen változás, hasonlóan az imént létrehozotthoz, a Szimbólum minden más példányára vonatkozik. Az egyetlen probléma az, hogy ha megváltoztatjuk a gomb szövegét a Szimbólumban, akkor az megváltoztatja az összes többi gomb szövegét. Ennek megakadályozása érdekében jelölje be a szövegréteget, és jelölje be a Szövegérték kizárása a szimbólumból jelölőnégyzetet az Ellenőrben. Most hozzunk létre egy duplikátum gombot. Lépjen a Beszúrás> Szimbólumok> gombra.

06. lépés

Szimbólumok működés közben

Szimbólumok működés közben

A szimbólumok működés közbeni megtekintéséhez változtassa meg az egyik gomb háttérszínét. Figyelje meg, hogyan változik a szín mindkettőnél. De ha megváltoztatja az egyik gomb szövegét, a másik szövege nem változik. Csak a stílusok vannak szinkronban, a szöveges karakterláncok nem. Ez azt jelenti, hogy létrehozhatunk például Regisztráció, Vásárlás most és Kapcsolatfelvétel gombokat, amelyek mindegyike azonos stílusú.

07. lépés

Mielőtt továbblépne, fontos tisztában lenni azzal, hogy a sketchben hogyan működik a mérés. Válasszon ki egy gombot, tartsa lenyomva az Alt billentyűt, és vigye az egérmutatót a második gomb fölé, hogy megmutassa a köztük lévő távolságot. Ez nem csak egy olyan funkció, amelyet a tervezők folyamatosan használni fognak, hanem tökéletes azoknak a fejlesztőknek is, akiknek rendszeresen ki kell számolniuk a pontos pixelméréseket.

08. lépés

Kezdje a címsorokkal

Kezdje a címsorokkal

Következő, címsorok. Mivel a fejlécek újrafelhasználható szövegelemek, fontos, hogy a Szimbólumok helyett a Szövegstílusok funkciót használja. Helyezzen be egy szövegréteget, és írja be az 1. fejléc szintet. Változtassa meg a betűtípust Source Sans Pro-ra, a súlyt félkövérre, a színt # 3A4654-re és a méretet 37pt-re. Válassza a Réteg> Megosztott stílus létrehozása lehetőséget. Az Ellenőrben észreveszi, hogy van szöveg kiemelve. A Sketch kéri, hogy nevezze el a szövegstílust, ezért írja be a H1 karaktert.

09 lépés

Fejlécméretek

Fejlécméretek

Ismételje meg az utolsó lépést a H1 – H6 elemek létrehozásához. A fejlécem betűméretei: H1: 37pt, H2: 31pt, H3: 25pt, H4: 21pt, H5: 18pt és H6: 15pt. Mivel az egyes címsorok szövegstílusok, a változtatások minden más példányra érvényesek lesznek. Jeremy Churchét használtam Írja be a Scale eszközt hogy meghatározzam a címsorok méretét. A Type Scale a moduláris skálát használja az arányos betűméretek kiválasztásához, a választott aránytól függően.

10. lépés

Szövegstílusok rendezése

Szövegstílusok rendezése

Az imént létrehozott szövegstílusok rendezéséhez lépjen a Beszúrás> Stílusos szöveg> Szövegstílusok rendezése menüpontba. Itt törölheti és átnevezheti a szövegstílusokat, de nem rendezheti azokat. Mivel a szövegstílusok betűrendben vannak rendezve, a hasonló elemeket ugyanazzal az első szóval nevezem meg: például a Rendezetlen és a Rendezett listát. A szimbólumok rendezéséhez kövesse ugyanezt a folyamatot. OK, megoldottuk a gombokat és a fejléceket! De mi van a képekkel?

11. lépés

Avatar készítése

Avatar készítése

Avatárok esetén helyezzen be egy képet és téglalapot, amelyek szélessége és magassága egyaránt 130 képpont. Adja meg a téglalapnak 65 képpontos sugarat. Csoportosítsa mindkét réteget, és helyezze a téglalapot a kép mögé. Kattintson a jobb gombbal a téglalap rétegre, és válassza a Use as Mask lehetőséget. Most van egy kör alakú avatárunk. Téglalapot használtunk sugárbeállítással a tényleges kör helyett, mert ha az avatár négyzetét szeretné megadni, egyszerűen szerkesztheti a sugarat egy új alak beszúrása helyett.

12. lépés

De mi van, ha cserélni akarok egy képet, hallom, hogy kérdezed? OK, lehet, hogy nem ezt kérdezte, de ez egy ügyes szolgáltatásra vezet, amely a megfelelő nevet képpótlásnak nevezi. Válassza ki az avatart, és válassza a Réteg> Kép> Csere lehetőséget. Válasszon egy másik fotót. A Sketch automatikusan átméretezi az új képet, és átkapcsolja a meglévõre. Ezt gyakrabban fogja használni, mint gondolná: ez egy másik nagyszerű időmegtakarítás!

13. lépés

Felhasználói fotók behúzása a Content Generator for Sketch alkalmazáshoz

Felhasználói fotók behúzása a Content Generator for Sketch alkalmazáshoz

A saját képek beszúrásának alternatívája a Tartalomgenerátor a vázlathoz plugin: Timur Carpeev. Egyszerűen hozzon létre egy alakzatot, és lépjen a Plugins> Content Generator Sketch Plugin> Persona> Photos lehetőségre. Húzza a felhasználói fotókat Felhasználói interfészek , és alakkitöltésként beszúrja őket. A Sketch plugin közösség remek.

14. lépés

Színminták

Színminták

Következő, színminták! Fontos a gyakran használt színek dokumentálása mintatárunkban. Helyezzen be egy téglalapot, amelynek szélessége és magassága 120 képpont, és adja meg # 1A9DD3 kitöltési színt. Ismételje meg ezt a lépést a # 3A4654, # 475361, # 8793A1 és # EFF0F1 színekkel. Van még egy bővítmény a színminták létrehozásához írta Jody Heavener. Lépjen a Bővítmények> Színtárak menüpontba, és írja be a fenti öt hexa értéket.

15. lépés

Színkönyvtárának építése

Színkönyvtárának építése

Válasszon ki egy színmintát, és kattintson a kitöltő színre az Ellenőrben. A színválasztó alján két rész látható: Globális színek és Dokumentumszínek. Az összes létrehozott Sketch dokumentum globális színeket menti, míg a dokumentum színei minden egyes dokumentumra egyediek. Színek hozzáadásával a dokumentum színei részhez saját színkönyvtárat épít.

16. lépés

Gyakran használt színek

Gyakran használt színek

A dokumentum színei mellett a Sketch automatikusan kiválasztja a dokumentumban a közös színeket, és jelzi, hogy milyen gyakran használták őket! Ez a szolgáltatás rejtve van, de a színválasztóból érhető el. Kattintson a színárnyalat és az átlátszatlanság csúszkáitól jobbra található területre. Megjelenik egy felugró ablak, amelynek címe: Gyakran használt színek ... A Sketch nem csak azt mutatja meg, hogy milyen gyakran használták a színt, de hol is.

17. lépés

Háztartás

Háztartás

Az utolsó lépésekhez kérjük, töltse le az erőforrás és kísérje meg a Source Code Pro betűtípust. Az erőforrásban a HTML minden elem mellett szerepel. Ez biztosítja, hogy a helyes HTML címkéket és osztályneveket használják a fejlesztéshez. A használati utasításokat adott esetben meg lehet adni. Remek példa erre a rácsrendszer, ahol hasznos információval rendelkezni az oszloposztályokról, az oszlopok beszámításáról stb.

18. lépés

Győződjön meg arról, hogy az emberek az elemekre ugorhatnak, hogy ne tegyenek

Ügyeljen arra, hogy az emberek az elemekre ugorjanak, hogy ne kelljen görgetniük

Az erőforrásban azt is észreveszi, hogy a fejléc rendelkezik az Ugrás… választóval. A mintatárak hosszúak lehetnek, ezért fontos, hogy a csapattagok képesek legyenek gyorsan átugrani egy elemet anélkül, hogy végig kellene görgetniük az egész oldalt. Erre példa található a A List Apart mintatár és Anna Debenham mintakönyvtára .

Ez az! Most már tudja, hogyan kell dolgozni a mintatárakkal: most csak annyit kell tennie, hogy inspirációt találjon egy saját könyvtárához. Nagyon ajánlom a látogatást Webhelystílus útmutató források Anna Debenham és Brad Frost írta, ahol rengeteg remek cikket, eszközt és példát találhat.

Szavak : Richard Child

Richard Child tervezési tanácsadó. Ez a cikk eredetileg a net magazin .

Tetszett ez? Olvassa el ezeket!