5 olulist viisi disainipiirangute kasutamiseks

Pidage meeles tehnilise disaini head ajastut, mil pidite looma liideseid - maksimaalselt - arvuti ja Maci jaoks? Mina ka mitte. See universum näib tänapäeva ekraanisõltlasest maailmas valgusaastate kaugusel.

Mobiiltelefonide ja tahvelarvutite kasutuselevõtuga on disainerite töökohad hüppeliselt kasvanud. Kavandate lõpututeks kohandusteks ja kontekstideks, mis on lõputu Sisypheani ülesanne.

Me tunneme teie valu Figmas, mistõttu ehitasime oma tööriista võimsate piirangute funktsiooniga. See võimaldab teil fikseerida oma disaini elemendid nende vanema raami eri külgedele. Kui määrate oma piirangud õigesti, siis sobib teie kujundus ekraani suurusega.

Need leiate siit, parempoolsete omaduste paneelilt, kui valite raami:

Erinevad piirangute võimalused

Piirangud on hämmastavad, kuid nendega on vaja pisut harjuda. Joonisel Figma laseme teil objekte fikseerida vasakule, paremale, ülalt, alt, keskelt, skaalalt, vasakule ja paremale või ülalt ja allapoole. Saate mängida lihtsa nupuga kaadris ringi, et näha, kuidas objektid reageerivad erinevat tüüpi piirangutele.

Kuidas reageerib raami suuruse muutmisel erinevate piirangutega nupp

Kas vajate abi, kuidas neid ellu viia? Kogusime viis viisi, kuidas piirangud võivad teie elu palju lihtsamaks muuta, alustades algajast kuni keskmise tasemeni.

1) Nupu nööpnõel nurgas

Paljudel mobiili kasutajaliidestel on toimimisnupud, mis asuvad iga kord samas kohas. Näiteks eelistavad Google'i materjalikujunduse juhised all paremat nuppu (tuntud ka kui FAB), mis julgustab kasutajat midagi ette võtma.

Piirangute abil saate selle nupu seada põhiraami alumisse ja paremasse nurka. See tagab, et nupp ei hõlju ekraani suurenedes ekraani ümber - see jääb täpselt sinna, kuhu soovite.

2) Komponentide võlu + piirangud

Figma komponentide funktsiooni kasutamisel võrkudega saate kasutada mõnda lõbusat kujundusmaagiat. Komponendid (mida muud rakendused kutsuvad sümboliteks) võimaldavad teil muuta oma kujunduse osi korduvateks peegelpilditeks. Kui muudate originaali, kajastuvad muudatused mujal, kus seda komponenti kasutasite. (Lisateavet komponentide kohta saate lugeda siit.)

Nüüd lisage sellele piirangud: kui olete oma kujunduse põhiosad raami külgedele piiranud, muutke raami komponendiks. Mitme ekraanisuurusega raami kopeerimine. Nüüd, kui muudate originaali atribuute, näiteks värvi või teksti suurust, näete neid kohe erinevas ekraanisuuruses.

3) piirangute ja võrede võlu

Olgu, pange sisse, sest me oleme natuke arenenumad. Figma abil saate objektide ruudule kinnitamiseks kasutada piiranguid. See on eriti mugav näiteks rakenduse allosas asuva navigeerimisriba puhul.

Figmas painduva navigeerimisriba tegemiseks looge raam, mis toimib telefoni ekraanina, seejärel pesa navigeerimisriba raami ekraani allosas.

Seadistage navigeerimisriba piirangud vasakule ja paremale ning alumisele poole. Kui navigeerimisriba raam on endiselt valitud, valige parempoolsest atribuutide paneelist paigutussüsteem ja määrake tüübiks “venitatav”.

Seejärel asetage iga ruudustiku kohale objekt - nagu ümmargune nupp. Seadke iga nupu piirangud keskele. Kui ekraani suurus muutub, kohandatakse teie nuppe vastavalt. Veel sügavamale võrkudesse sukeldumiseks lugege seda postitust.

4) tabeli lahtrid

Paindlike korduvkasutatavate lauaelementide kujunduste tegemiseks võite kasutada piiranguid. Disainerid vajavad inimeste või teabe loendite esitamiseks sageli tabeli lahtrit ning põhilahtrile piirangute lisamine muudab selle kohandamise lihtsamaks. Näiteks grupeerisin teksti ja avatari kokku (vajutades juhtnuppu g) ja piirasin need raami keskele vasakule. Seejärel grupeerisin teksti ja ümarate nurkadega ristküliku nupuks ja piirasin selle raami paremasse keskossa.

Nagu näete, reageerib komponent nüüd nii, nagu võiksite loota, kui iga teave kallistab kaadri külge, kuhu see kuulub, olenemata kaadri suurusest.

5) Lõbusad illustratsioonid

Lõpuks arvasime, et viskame lõbusate piirangute näite just peksmise jaoks. Võite lisada illustratsioonidele või joonistele horisontaalseid või vertikaalseid piiranguid, et lisada veel natuke huumorit. Võite muuta hot-dogi iseenesest lohakaks versiooniks või muuta hot-dogi moodi koera veel üheks. Mängisime sellega ühel disainerite hiljutisel sünnipäeval Figmas.

Suur tänu Chris Hamamotole, Johan Pragile ja Rasmus Anderssonile abi ja illustratsioonide eest selle postituse jaoks.