Vieritettävän omaisuuden tekeminen Figmassa

Sisällön tekeminen vieritettäväksi Figmassa edellyttää sivuvälilehden navigoimista. Valitettavasti se ei näy automaattisesti pääkäyttöliittymässä. Vieritettävä sisältö on hyödyllinen, kun haluat esittää paljon tietoa suunnittelusi puitteissa. Joitakin esimerkkejä ovat aloitussivut, sovellusten käyttöliittymät tai ponnahdusikkunat.

Tässä artikkelissa kerrotaan, kuinka voit tehdä Figma-malleistasi vieritettäviä.

Vieritettävän tekstin sovittaminen muotoon

Aloitetaan tekemällä vieritettävä teksti yksinkertaiseen muotoon. Tämä on yleisin esimerkki vieritettävästä tekstistä, ja voit lisätä myöhemmin muita ominaisuuksia, kuten väriä, fontteja ja ääriviivoja.

Näin se tehdään:

1. Luo perusmuoto. Tässä esimerkissä suosittelemme pystysuoran suorakulmion tekemistä. Voit tehdä sen valitsemalla suorakulmiotyökalun vasemmasta sivupalkista tai käyttämällä "R"-komentoa. Pidä vasenta, napsauta kanvaspistettä ja piirrä muoto.
   
2. Laita oikeanpuoleisen sivupalkin suunnittelu-välilehden alla rasti "leikkeen sisältö" -vaihtoehdon viereen.
   
3. Luo tekstilaatikko valitsemalla tekstityökalu ja aseta se vieritettävään kehykseen. Kirjoita tai kopioi ja liitä käyttämäsi sisältö.
   
4. Valitse kehys ja siirry käyttöliittymäsi oikealla puolella olevaan prototyyppi-välilehteen. Valitse sitten "overflow scrolling" -vaihtoehto ja haluamasi tyyli. Tässä valitaan "pystysuuntainen vieritys".
   

Kun napsautat ylivuodon vieritysvaihtoehtoa prototyyppi-välilehdellä, tyylejä on useita. Valitsemme pystysuoran, koska käytämme pystysuoraa suorakulmiota esimerkkinä. Näin voit lukea tekstin ylhäältä alas. Joitakin muita tyylejä ovat:

• Vaakasuora vieritys – Joissakin esimerkeissä käyttäjät voivat vierittää tekstiään vasemmalta oikealle. Tämä vaihtoehto on parempi, jos luot kuvioita maisemointimuodossa.
• Ei vierittämistä – Jos haluat lukita sisältösi paikoilleen, valitse Ei vierittämistä -vaihtoehto.
• Molemmat suunnat – Luo suunnittelu, jossa on paljon sisältöä ja vieritä sekä pysty- että vaakasuunnassa.

Sinun tulee käyttää suunnittelussasi vieriviä ominaisuuksia, jotta lukijasi vaivaa (napsautuksia) minimoi vuorovaikutuksessa sisällön kanssa. He voivat pyyhkäistä tai käyttää hiiren rullaa sen sijaan, että klikkaisivat tai napauttaisivat läpi tonnia tekstiä.

Vieritettävien komponenttien suunnittelu

Tuotteestasi riippuen sinun on suunniteltava sisältökehys ja itse sisältö. Prosessi sisältää värien, fonttien ja mahdollisesti muiden komponenttien lisäämisen yleiseen suunnitteluun. Näiden elementtien vaihtaminen on helppoa, mutta oikean esteettisen tuotteen valinta vaatii huolellista harkintaa.

Vieritettävän mallin fontin vaihtaminen

Ensimmäinen asia, joka sinun on tehtävä, on vaihtaa vieritettävän suunnittelun fontti. Figma tarjoaa laajan valikoiman tyylejä, joista voit valita. Tässä on yksinkertaisin tapa:

1. Valitse vieritettävän kehyksen sisältö, jota haluat muuttaa.
   
2. Siirry vasemmassa yläkulmassa olevaan avattavaan valikkoon ja valitse se.
   
3. Selaa fontteja, kunnes löydät haluamasi fontin.
   

Jos suunnittelemallasi tuotemerkillä on tietty typografia, valitset todennäköisesti saman, jotta se on yhdenmukainen tuotekuvan kanssa. Jos sinulla on enemmän liikkumistilaa, sinun tulee kokeilla erilaisia ​​esimerkkejä ennen oikean valitsemista.

Joitakin huomioita ovat mm.

• Suunnittelun tarkoitus – typografian valinnan tulee vastata suunnittelusi tarkoitusta. Jos haluat välittää paljon tietoa selkeästi, pyri käyttämään vähemmän koristeellisia mutta tyylikkäitä fontteja.
• Muut komponentit – Fonttisi on visuaalinen elementti kuten mikä tahansa muu suunnittelussasi. Sen tulee vastata runkoa ja muita mukanasi olevia osia.
• Yleinen estetiikka ja brändäys – Brändin yleisen tunteen pitäisi myös vaikuttaa valitsemaasi fonttiin. Esimerkiksi kukkalähetyspalvelussa ei ole samaa kirjasinta kuin SAAS-aloitussivulla.

Vaikka oikean fontin valinta saattaa vaatia kokeilua, jotkin konkreettiset kirjasinesimerkit ovat luotettavimpia vaihtoehtoja:

• Roboto – Jos haluat pelata varman päälle, käytä Robotoa. Sitä pidetään monipuolisena ja neutraalina fonttina useilla sovelluksilla. Koska se on niin helppo ymmärtää, monet valitsevat Roboton ohjeita ja aloitussivuja varten.
• Poppins – Valitse Poppins saadaksesi ystävällisen mutta modernin ja puhtaan vaikutelman. Tämä fontti on pyöristetympi ja tekee tekstistä houkuttelevan ja helppolukuisen.
• Raleway – Kun suunnittelet hienostuneelle luksusbrändille, sinun kannattaa harkita Ralewayn käyttöä. Se on yleensä ohut, mutta siinä on erilaisia ​​painovaihteluita ja tyylikäs ulkonäkö.
• Lato – Ystävällinen, luotettava ja vakava ovat oikeat sanat kuvaamaan tätä fonttia. Suunnittelijat voivat käyttää Latoa otsikoissa ja kappaleteksteissä, joissa luettavuus ja selkeys ovat ensisijaisia ​​huolenaiheita.

Sinun kannattaa myös harkita valitsemaasi fonttikokoa ja tekstityyliä. Yleensä lihavointia käytetään otsikoissa tai osien korostamisessa, kun taas kursivoitua käytetään lainauksissa.

Kehyksen muodon värin muuttaminen

Fontin vaihtamisen lisäksi haluat myös muuttaa kehyksen muodon väriä. Jälleen kerran, tarkka sävy riippuu tuotemerkistä, jolle suunnittelet, tai estetiikasta. Onneksi Figman käyttöliittymä tekee värin valitsemisesta helppoa.

Näin voit muuttaa kehysten värejä:

1. Valitse kehys, jota haluat muokata.
   
2. Taso tulee näkyviin oikeaan sivupalkkiin. Siirry "täyttö"-osioon.
   
3. Lisää täyttö valitsemalla "+".
   
4. Värinvalitsin-ikkuna avautuu. Valitse täyttöväri ja liukuväri. Voit myös kirjoittaa heksadesimaalikoodin, jos tiedät tarkan sävyn.
   

Kuten muidenkin sisustuselementtien kanssa, saatat joutua kokeilemaan eri värejä ja niiden ulkoasua valitsemallasi fontilla.

UKK

Onko Figmassa vieritettävä tekstikomento?

Valitettavasti Figmassa ei ole komentoa tekstin vierittämiseksi. Voit kuitenkin suorittaa prosessin muutamalla napsautuksella yllä mainitulla menetelmällä.

Kuinka päätän, minkä ylivuotovaihtoehdon haluan?

Se riippuu käyttämäsi tekstin tyypistä, yleisestä suunnittelusta ja sen toiminnasta. Pystysuuntainen tyyli on yleensä hyvä suurten tekstien selaamiseen.

Mikä laitteen käyttöliittymä yleensä tarvitsee vieritettävän tekstisuunnittelun?

Hyvä esimerkki olisi sovelluksen suunnittelumallit. Käyttäjät voivat luoda puhelimen yleiskehykseksi, kun taas vieritettävä teksti voi olla sovelluksen käyttöliittymä.

Onko Figma paras valinta vieritettävien kuvioiden tekemiseen?

Figma on yksi parhaista työkaluista monenlaisten lomakkeiden tekemiseen, mukaan lukien vieritettävät mallit. Mikä parasta, Figma on ilmainen. Sinulla voi kuitenkin olla tiettyjä henkilökohtaisia ​​mieltymyksiä. Kokeile kokeilla muutamilla alustoilla, kuten Adobe Illustratoria, kunnes löydät itsellesi parhaiten sopivan työkalun.

Tee mallistasi vieritettävät ja käyttäjäystävälliset

Minkä tahansa tekstin tekeminen kehykseen Figmassa on helppoa. Valitse vain kehys ja siirry sitten leikkeen sisältövaihtoehtoon. Kun olet valmis, voit valita ylivuodon vieritysasetukset. Älä myöskään unohda muita tärkeitä suunnittelun elementtejä, kuten kehyksen väriä ja muotoa sekä tekstin fonttia. Suunnittelun tekeminen vieritettäväksi on erinomainen valinta aloitussivuille, sovellusten käyttöliittymiin ja ponnahdusikkunoihin. Se helpottaa tekstien selailua napsautuksen sijaan, mikä parantaa viime kädessä käyttökokemusta.

Oliko sisällöstäsi helppo tehdä vieritettäväksi Figmassa? Entä oikean fontin valinta? Kerro meille alla olevassa kommenttiosassa.