Razvoj sistema oblikovanja. Kako se izogniti nepričakovani rutini.

Štiri preproste stvari, ki si jih morate zapomniti in slediti pred razvojem sistema za oblikovanje

Če razvijate sisteme oblikovanja, ste se verjetno naučili, da je zaporedje pomembno. Ko je bila komponenta ali simbol ustvarjen in ste ga pomnožili, preden ste mu dodelili potrebne lastnosti, je postalo možno, da rutina postane rutina.

Primer: komponento ste ustvarili iz ugnezdenih simbolov v njej. Če ste pravočasno pozabili določiti velikost param / omejitev, potem so vsi klonirani napačno prikazani.

Pospeši čas oblikovanja in razvoja do 50%

Material Design System for Figma je sestavljen iz 512 komponent uporabniškega vmesnika in 1171 materialov.

  • Edinstvena arhitektura za hitro prilagajanje
  • Opremljen s preprosto in jasno dokumentacijo
  • Namenjeno namiznim in mobilnim aplikacijam
  • Izdelano z naslednjimi smernicami za oblikovanje materiala
  • Maksimalno uporablja funkcije Figma „Instance“
  • Podpira Figma spletni API za integracijo v realnem času
  • Stranke podpirajo 7 dni na teden!

Več o tem → http://setproduct.com/material

Če še vedno dvomite, priporočam, da si ogledate pregled

① Oblikujte seznam ponavljajočih se elementov

Identificirajte in združite vse ponavljajoče se objekte v natančni postavitvi, prototipu ali konceptu. Ne samo na gumbih na seznamu. Oznake, ikone, vnosi, naslovi in ​​tako naprej. Če želite sestaviti dovolj prilagodljiv sistem, je vredno dodati ozadja in paramne v senci. Spodaj boste izvedeli namen teh dejanj.

Nekaj ​​ponavljajočih se sestavnih delov

Mine Določite vsa možna stanja

Zdaj začnite oblikovati seznam elementov, kjer je možen odziv sistema ali pa bo uporabnik verjetno sodeloval. Če vaša naloga zahteva opisovanje celo starih stanja, vam priporočam, da ta postopek ohranite pozneje na zadnjih stopnjah razvoja, ko so vse komponente vizualno znane, nato pa se lahko vprašate: »Katera od njih zahteva kloniranje dodatnih držav ? "

Nekaj ​​možnih stanj za vnose besedila

Prilagodite omejitve ali spremenite velikost parametrov

Pridobite si pravilo: "Ko delam na komponenti, vedno imam v mislih, kako lestvica". Se morda spomnite primera, s katerega sem začel to objavo? Spodnja vrstica je, da morate parametre omejitve / spreminjanja velikosti nastaviti takoj po pretvorbi okvira v komponento. V nasprotnem primeru se boste zataknili rutine, če jo boste morali v prihodnosti ročno prilagoditi za vsak element.

Ikone, ki spreminjajo velikost param, nastavljene tako, da se zaskočijo v desno

④ Najprej so bila dostopna imena, država - po

Ali je vaša komponenta gotova in jo boste klonirali za dodatna stanja? Odlično, toda za to najprej nanesite dostopno ime. Skrbite zase in za razvoj ekipe ter uporabljajte jasna poimenovanja. Upoštevajte, da klonirana komponenta obdrži ime nadrejenega. Če imate raje urejenost, pričakujem, da bo vaše besedilno polje zvenilo tako:

Besedilna polja / podčrtana / privzeto

Zdaj lahko komponento varno kloniramo. Nato odstranite primerek, uporabite vizualno potrebne spremembe in na koncu ostane le še:

Besedilna polja / podčrtana / aktivna

⑤ Nekaj ​​za sladico

Brez rutine. Moj postopek oblikovanja je zdaj vključen v sistem oblikovanja in prikazan v živo na YouTubu:

Spodnja vrstica ⤑ ohranite zaporedje ♛

To je vse o osnovah za danes. Brez dvoma je v razvoju oblikovalskih sistemov še veliko odtenkov, morda bom opisal pozneje. Prosimo, delite v komentarjih svoje lastne metode / korake, ko začnete sistem načrtovati iz nič. Na zdravje.

Kaj je naslednje? Hitro začnite svoj projekt oblikovanja materiala s to knjižnico Figma

Izdelano s sistemom za izdelavo prototipov Material za Figma
❶ Raziščite sistem → http://setproduct.com/material
Overview Pregled komponent → http://setproduct.com/material/components
❸ Več videoposnetkov → http://setproduct.com/material/videos
❹ Nakup in prenos → http://setproduct.com/material/download
❺ 1000+ materialnih ikon → http://setproduct.com/material/icons_pro