Rugalmas vázlatvázlat a vázlatban az AutoLayout és a Stack Csoportok segítségével

A szerkezeti, moduláris és méretarányos tervezési rendszerek fejlesztése

Az olyan eszközök, mint a CSS-ben lévő FlexBox, az iIS-ben az UIStackView és az Androidon a FlexboxLayout, már régóta adtak a fejlesztőknek a szükséges munkafolyamatokat a mai adaptív és reagáló nézetek sokaságának kezeléséhez.

A tervezők számára azonban a kedvenc tervezőeszközök némelyikének elrendezési folyamata mindig kézi, statikusabb, unalmasabb és általában matematikailag kevésbé pontos volt. De az Anima emberek csodálatos munkájának köszönhetően hamarosan megvan a szerkezete és rugalmassága, amelyre szükségünk van a rés jobb áthidalásához.

Az új Stacks funkcióval, amelyet a legújabb Auto-Layout beépülő modulba csomagolunk, most már van egy olyan munkafolyamat, amely jobban beilleszti az UI kimenetet, és lehetővé teszi, hogy nagyobb konzisztenciát és karbantarthatóságot érjünk el a tervezőrendszereink között. (Jogi nyilatkozat - Ez a koncepció még mindig korai szakaszban van. Nem minden elrendezésnek lesz előnye a rendszerből, tehát keverjük össze és igazítsuk, ahogy tetszik).

A bemutató

Az alábbi videóban összeállítottam a koncepcióknak megfelelő rugalmas rács elrendezést, hogy bemutassam a Stacks nagyszerűségét. Ez egy rajztábla, amely tükrözi az alapvető weboldal felépítését.

Még mindig a kutatás korai szakaszában a következő funkciók kerülnek beépítésre a sablonba:

  • Az asztali számítógép néhány kattintással elérhető.
  • Az izzótáblák átméretezhetők és a rács igazítása / eloszlása ​​nem szakad meg
  • Rács felépítése:
  • Test
     - Fejléc
     - Fő
     - —szakaszok
     - - - sorok csoportjai (testvére doboz méretező réteggel rendelkezik)
     - - - - sorok
     - - - - - oszlopok
     - - - - - - modulok
     - - - - - - - alkatrészek (beágyazott szimbólumok belső logikával)
     - Láb
  • Használjon beágyazott szimbólumokat, amelyeket a Sketch Resize tulajdonságok, az Autolayout rögzítés és a veremcsoportok kombinációja határoz meg, cserélhető komponensek moduláris rendszerének létrehozásához.
  • Az elrendezés az artboard szélességéhez igazodik (a tartalom maximális szélessége 1200 képpont, a mobilnak pedig beépített ereszcsatorna).
  • Változatos oszlopeloszlások és a csatornák könnyű összeomlása / módosítása.
  • A
    és a növekszik és összehúzódik a (z) -től függetlenül.
  • A magasság megváltoztatása
    értékre nyomja le az az ábrán, miközben a margók és a párnák érintetlenül maradnak, mint egy weboldal.
  • A magasság úgy állítható be, hogy befolyásolja a gyermekoszlopok magasságát
  • Az oszlopok (felső, középső, alsó, szakaszos) egymáshoz igazítása sor szintjén határozható meg.
  • Új oszlop hozzáadása (vagy törlése) a sorból automatikusan beállítja a testvérek oszlopának szélességét, hogy ennek megfelelően illeszkedjen.
  • Új gyermekmodul hozzáadásával az oszlop függőlegesen növekszik (a modulok tetszőleges számú tartalomtípust tartalmaznak, például képeket, szöveget, listákat, táblázatokat, csoportokat és szimbólumokat).
  • A modulok (bal, középső, jobb, szakaszos) igazítása oszlopszinten határozható meg.
  • szimbólumcsere-összetevők a tartalom cseréjéhez vagy az új rétegek rögzítéséhez a meglévő összetevőhöz.
  • Az asztali rajztáblát úgy állították be, hogy egy 8pt alapvető rácsot használjon.

A vázlatfájl

Itt van. Nyugodtan fejlessze bármilyen módon, és tudassa velem.
* FONTOS * - A fájl NEM működik, hacsak nem rendelkezik az automatikus elrendezés és a veremtámogatás legfrissebb kiadásával (.0.2.0 az írás megírásától kezdve).

https://cl.ly/2v2I373P2E1f

Néhány utolsó gondolat

Remélem, hogy ez néhány ember számára hasznos volt. Tudom, hogy mélyebben kutatom az Autolayout és a Stacks lehetőségeit. E verzió óta észrevettem néhány apró aprítást a matematikai kerekítéssel, de remélhetőleg ezek idővel rendeződnek. Az általam javasolt néhány kérés között azt hiszem, ezek értékes lehetnek.

  • Lehetőség van háttér hozzáadására halmozott csoporthoz (az oszlopok szülő sora) anélkül, hogy befolyásolná a verem logikáját. A HTML / CSS esetében ezt egyszerűen a vagy a „div” szinten hajthatják végre, ám a Sketch ezt a lehetőséget nem teszi lehetővé.
    Van egy megközelítés erre most, amely magában foglalja a háttérréteg egymásra rakását és a bg fel-balra / balra / 100% szélesség és magasság rögzítését, és míg a háttér növekszik a tartalom befogadására, nem zsugorodik, amikor a a tartalom eltávolítva. Úgy gondolom, hogy a zsugorodás már szerepel a csapat TO-DO listájában.
  • Töréspontok bevezetése az artboardban és a szimbólumok cseréje az artboard alapján (négy elem navigációja hamburger ikonnal, ha az artboard <400 képpont vagy még jobb, konténer lekérdezések megközelítésével.
  • Az említett töréspontokkal a vízszintes és a függőleges egymásra helyezett csoportok közötti váltás képessége olyan, hogy az oszlopok egymásra vannak rakva, ha nincs elég hely. És az oszlopok becsomagolására, ha meg vannak adva.
  • Lehetőség az oszloponkénti szélesség megadására.
    (Frissítés - Ennek az ötletnek a verziója éppen be lett építve a pluginbe a Súly szolgáltatás használatával.)
  • Annak ellenére, hogy ez nem feltétlenül tartozik az Anima csapatra, a Sketchnek támogatást kell bevezetnie a változók számára is, különösen olyan tulajdonságokkal, mint a távolság, a minimális és a maximális magasság, valamint más olyan értékek, amelyeket több rétegben egységesnek kell tartani. Ezeket a változókat tovább lehet használni a színekhez való leképezéshez és a Sass átadási folyamatának elősegítéséhez.

Nos, ennyi van! Csak kiáltást akartak adni az Anima csapatának. Hihetetlenül tehetséges, érzékeny és felhívó, ezért kérjük, mindenképpen támogassák kemény munkájukat! Csatlakozzon a Facebook oldalukhoz.

Ha bármilyen kérdése vagy (kedves!) Hozzászólása van, kérjük, nyugodtan küldje el alul, vagy keresse fel a Twittert.