Atsaucīgs Flex Režģis Skicē, izmantojot AutoLayout un Stack Grupas

Projektēšanas sistēmu uzlabošana pēc struktūras, modularitātes un mēroga

Rīki, piemēram, FlexBox CSS, UIStackView operētājsistēmā iOS un FlexboxLayout operētājsistēmā Android, jau sen ir devuši izstrādātājiem nepieciešamās darbplūsmas, lai apstrādātu daudzos adaptīvos un atsaucīgos skatus, kas pastāv mūsdienās.

Dizaineriem izkārtojuma izstrādes process dažos no mūsu iecienītākajiem dizaina rīkiem vienmēr ir bijis manuālāks, statiskāks, nogurdinošāks un matemātiski mazāk precīzs. Bet, pateicoties pārsteidzošajam Anima ļaužu darbam, mums drīz būs struktūra un elastība, kas mums vajadzīga, lai labāk novērstu šo plaisu.

Izmantojot jauno Stacks funkciju, kas ir iekļauta jaunākajā automātiskā izkārtojuma spraudnī, tagad mums ir darbplūsma, kas labāk pielāgo UI izvadi un ļauj mums panākt lielāku konsekvenci un apkopojamību visās mūsu projektēšanas sistēmās. (Atsaukums - šī koncepcija vēl ir agrīnā stadijā. Ne visiem izkārtojuma veidiem būs labums no šīs sistēmas, tāpēc sajauciet un saskaņojiet, kā jums liekas.)

Demonstrācija

Zemāk esošajā videoklipā es esmu salicis koncepcijas pierādījuma elastīgā režģa izkārtojumu, lai parādītu Stacks lieliskumu. Tas ir artboard, kas atspoguļo pamata Web lapas struktūru.

Kamēr tas vēl ir agrīnā izpētes posmā, veidnē tiek iebūvēta šāda funkcionalitāte:

  • Dators ar mobilo tālruni dažu klikšķu laikā.
  • Artboards ir maināms un režģa izlīdzināšana / sadalījums nesadalās
  • Režģi strukturē:
  • Korpuss
     - Galvene
     - Galvenais
     - —sadaļas
     - - - rindu grupas (ir brāļu un kastu izmēru slānis)
     - - - - rindas
     - - - - - kolonnas
     - - - - - - moduļi
     - - - - - - - komponenti (ligzdoti simboli ar iekšēju loģiku)
     - Kājene
  • Izmantojiet ligzdotus simbolus, kas definēti, izmantojot Sketch Resize rekvizītu, Autolayout piespraušana un kaudzīšu grupas, lai izveidotu mainīgu komponentu modulāru sistēmu.
  • Izkārtojums pielāgojas dēļa platumam (satura maksimālais platums ir 1200 pikseļi, bet mobilajām ierīcēm ir iebūvētas notekas).
  • Kolonnu izvietojuma dažādība un notekcauruļu viegli sabrūkoša / modificējama.
  • un
    aug un sarūk neatkarīgi no
    .
  • Augstuma maiņa uz
    spiež
    uz leju artboard, vienlaikus saglabājot malas un polsterus neskartu, kā to darītu vietne.
  • augstumu var pielāgot, lai ietekmētu bērnu kolonnu augstumu
  • Kolonnu (augšējā, vidējā, apakšējā, izstieptā) izlīdzināšanu var definēt rindas līmenī.
  • Pievienojot jaunu kolonnu (vai izdzēšot to) no rindas, automātiski tiek koriģēts brāļu un māsu kolonnu platums, lai tās attiecīgi ietilptu.
  • Ja kolonnā tiek pievienots jauns pakārtots modulis, šī kolonna palielinās vertikāli (moduļi satur neierobežotu skaitu satura veidu, piemēram, attēlus, tekstu, sarakstus, tabulas, grupas un simbolus).
  • Moduļu (pa kreisi, centrā, pa labi, stiepšanās) izlīdzināšanu var noteikt kolonnas līmenī.
  • simbolu apmaiņas komponenti, lai aizstātu saturu vai piestiprinātu jaunus slāņus esošajam komponentam.
  • Darbvirsmas artboard ir izveidots, lai izmantotu 8pt bāzes līniju režģi.

Skices fails

Te tas ir. Jūtieties brīvi to uzlabot jebkādā veidā un dariet man to zināmu.
* SVARĪGI * - fails nedarbosies, ja vien jums nebūs jaunākā automātiskā izkārtojuma ar krājumu atbalsta versiju (.0.2.0 no šī raksta).

https://cl.ly/2v2I373P2E1f

Dažas nobeiguma domas

Es ceru, ka tas bija noderīgs dažiem ļaudīm. Es zinu, ka dziļāk izpētīšu Autolayout un Stacks iespējas. Sākot ar šo versiju, esmu pamanījis dažus mazus ķeksīšus ar matemātikas noapaļošanu, bet, cerams, tie tiks sakārtoti laikā. Starp dažiem pieprasījumiem, ko esmu ierosinājis speciālistiem, es domāju, ka tie varētu būt vērtīgi.

  • Iespēja pievienot fonu sakrautai grupai (kolonnu vecākajai rindai), neietekmējot steka loģiku. HTML / CSS gadījumā to vienkārši varētu izdarīt vai “div” līmenī, taču Skice pagaidām neļauj to izdarīt.
    Šobrīd pastāv pieeja, kā to izdarīt, kas ietver fona slāņa sagrupēšanu ar sakrautu grupu un bg piespraušanu augšpusē / pa kreisi / 100% platumu un augstumu, un, kamēr fons aug, lai ietilpinātu saturu, tas nesaraujas, kad saturs tiek noņemts. Es uzskatu, ka sarukums jau ir komandas TO-DO sarakstā.
  • Pārtraukumpunktu ieviešana artboardā un simbolu apmaiņa, pamatojoties uz artboard (4 vienību navigācijas maiņa ar hamburgera ikonu, kad artboard <400 pikseļi vai vēl labāk, izmantojot konteineru vaicājumu pieeju.
  • Ar minētajiem pārtraukuma punktiem spēja pārslēgties no horizontāli uz vertikāli sakārtotām grupām tā, lai kolonnas sakristu viena virs otras, ja nepietiek vietas. Un, ja kolonnas ir iesaiņojamas, ja tas ir norādīts.
  • Iespēja norādīt kolonnas platumu procentos.
    (Atjauninājums - šīs idejas versija tikko ir ieviesta spraudnī, izmantojot funkciju Svari)
  • Lai gan tas nebūt neattiecas uz Anima komandu, Skicē jāievieš arī atbalsts mainīgajiem, it īpaši tagad ar tādām īpašībām kā atstatums, minimālais un maksimālais augstums un citas vērtības, kurām vajadzētu būt konsekventām vairākos slāņos. Šos mainīgos var arī izmantot, lai kartētu arī krāsas un palīdzētu Sass nodošanas procesā.

Tas ir viss, ko es saņēmu! Vienkārši vēlējos vēlreiz izdvest komandu Anima komandai. Viņi ir neticami talantīgi, atsaucīgi un aicinoši, tāpēc, lūdzu, noteikti atbalstiet viņu smago darbu! Pievienojieties viņu Facebook lapai.

Ja jums ir kādi jautājumi vai (jauki!) Komentāri, lūdzu, rakstiet zemāk vai sazinieties ar čivināt.