Kaip sukurti slenkamą išteklius „Figma“.

Kad turinys būtų slenkamas „Figma“, reikia naršyti šoniniame skirtuke. Deja, jis automatiškai nepasirodo pagrindinėje vartotojo sąsajoje. Slenkamas turinys yra naudingas, kai norite pateikti daug informacijos savo dizaino rėmuose. Kai kurie pavyzdžiai apima nukreipimo puslapius, programų sąsajas arba iššokančiuosius langus.

Šiame straipsnyje bus paaiškinta, kaip padaryti „Figma“ dizainą slenkamą.

Slenkamo teksto pritaikymas formoje

Pradėkime nuo paprastos formos slenkamojo teksto kūrimo. Tai yra labiausiai paplitęs slenkamo teksto pavyzdys, o vėliau galite pridėti kitų savybių, pvz., spalvą, šriftus ir kontūrus.

Štai kaip tai daroma:

1. Sukurkite pagrindinę formą. Šiame pavyzdyje rekomenduojame padaryti vertikalų stačiakampį. Tai galite padaryti pasirinkę stačiakampio įrankį kairėje šoninėje juostoje arba naudodami komandą „R“. Laikykite kairę, spustelėkite drobės tašką ir nubrėžkite figūrą.
   
2. Dešinėje šoninėje juostoje, dizaino skirtuke, pažymėkite varnelę šalia parinkties „Klipo turinys“.
   
3. Pasirinkite teksto įrankį, kad sukurtumėte teksto laukelį ir įdėkite jį į slenkamą rėmelį. Įveskite arba nukopijuokite ir įklijuokite bet kokį naudojamą turinį.
   
4. Pasirinkite rėmelį ir eikite į prototipo skirtuką dešinėje sąsajos pusėje. Tada pasirinkite parinktį „perpildymo slinkimas“ ir pageidaujamą stilių. Čia pasirinksime „vertikalus slinkimas“.
   

Kai spustelėsite perpildymo slinkimo parinktį prototipo skirtuke, yra keli stiliai. Mes pasirenkame vertikalųjį, nes kaip pavyzdį naudojame vertikalų stačiakampį. Tai leidžia perskaityti tekstą iš viršaus į apačią. Kai kurie kiti stiliai apima:

• Horizontalus slinkimas – kai kuriuose pavyzdžiuose vartotojai gali slinkti tekstą iš kairės į dešinę. Ši parinktis yra tinkamesnė, jei kuriate kraštovaizdžio formato dizainą.
• Jokio slinkimo – jei norite užrakinti turinį vietoje, pasirinkite parinktį neslinkti.
• Abi kryptys – sukurkite dizainą su daugybe turinio ir slinkite tiek vertikaliai, tiek horizontaliai.

Savo dizaine turėtumėte naudoti slenkamąsias funkcijas, kad sumažintumėte skaitytojo pastangų (paspaudimų) sąnaudas sąveikaudamas su turiniu. Jie gali perbraukti arba naudoti pelės ratuką, užuot spustelėję ar bakstelėję per daugybę teksto.

Kaip sukurti slenkamus komponentus

Priklausomai nuo produkto, turėsite sukurti turinio rėmelį ir patį turinį. Procesas apima spalvų, šriftų ir galbūt kitų komponentų pridėjimą prie bendro dizaino. Šiuos elementus lengva pakeisti, tačiau norint pasirinkti tinkamą estetiką, reikia atidžiai apsvarstyti.

Kaip pakeisti slenkamojo dizaino šriftą

Pirmas dalykas, kurį turėsite padaryti, tai pakeisti slenkamojo dizaino šriftą. „Figma“ siūlo platų stilių pasirinkimą. Štai paprasčiausias būdas:

1. Slenkamajame rėmelyje pasirinkite turinį, kurį norite pakeisti.
   
2. Eikite į išskleidžiamąjį meniu, esantį viršutiniame kairiajame kampe, ir pasirinkite jį.
   
3. Slinkite per šriftus, kol rasite tą, kurį norite naudoti.
   

Jei prekės ženklas, kuriam kuriate, turi tam tikrą tipografiją, greičiausiai pasirinksite tą patį, kad jis atitiktų prekės ženklo įvaizdį. Jei turite daugiau judėjimo vietos, prieš pasirinkdami tinkamą, turėtumėte paeksperimentuoti su įvairiais pavyzdžiais.

Kai kurie svarstymai apima:

• Dizaino tikslas – tipografijos pasirinkimas turi atitikti jūsų dizaino tikslą. Jei norite aiškiai perteikti daug informacijos, rinkitės ne tokius dekoratyvius, bet elegantiškus šriftus.
• Kiti komponentai – jūsų šriftas yra vaizdinis elementas, kaip ir bet kuris kitas jūsų dizaino elementas. Jis turėtų atitikti rėmelį ir kitus įtrauktus komponentus.
• Bendra estetika ir prekės ženklas – bendras prekės ženklo pojūtis taip pat turėtų turėti įtakos jūsų pasirinktam šriftui. Pavyzdžiui, gėlių pristatymo paslauga neturės tokio paties šrifto kaip SAAS nukreipimo puslapyje.

Pasirinkus tinkamą šriftą gali prireikti šiek tiek eksperimentuoti, kai kurie konkretūs šriftų pavyzdžiai yra patikimiausios parinktys:

• Roboto – jei norite žaisti saugiai, naudokite Roboto. Tai laikomas universaliu ir neutraliu šriftu su daugybe programų. Kadangi tai labai lengva suprasti, daugelis renkasi „Roboto“ instrukcijoms ir nukreipimo puslapiams.
• Poppins – norėdami atrodyti draugiškai, bet šiuolaikiškai ir švariai, rinkitės Poppins. Šis šriftas yra labiau suapvalintas, todėl tekstas yra patrauklus ir lengvai skaitomas.
• Raleway – kurdami sudėtingą prabangos prekės ženklą, galbūt norėsite apsvarstyti Raleway. Paprastai jis yra plonas, tačiau turi skirtingus svorio skirtumus ir bendrą elegantišką išvaizdą.
• Lato – draugiškas, patikimas ir rimtas yra tinkami žodžiai šiam šriftui apibūdinti. Dizaineriai gali naudoti Lato antraštėms ir pastraipų tekstams, kai skaitomumas ir aiškumas yra svarbiausi dalykai.

Taip pat norėsite atsižvelgti į pasirinktą šrifto dydį ir teksto stilių. Paprastai pusjuodis šriftas naudojamas antraštėms arba segmentams pabrėžti, o kursyvas – kabutėms.

Rėmo formos spalvos keitimas

Be šrifto keitimo, taip pat norėsite pakeisti rėmelio formos spalvą. Vėlgi, tikslus atspalvis priklausys nuo prekės ženklo, kuriam kuriate, arba jūsų estetikos. Laimei, „Figma“ sąsaja leidžia lengvai pasirinkti spalvą.

Štai kaip galite pakeisti rėmelio spalvas:

1. Pasirinkite rėmelį, kurį norite redaguoti.
   
2. Sluoksnis bus rodomas dešinėje šoninėje juostoje. Eikite į skyrių „užpildyti“.
   
3. Pasirinkite „+“, kad pridėtumėte užpildą.
   
4. Atsidarys spalvų parinkiklio langas. Pasirinkite užpildymo spalvą ir gradientą. Taip pat galite įvesti šešioliktainį kodą, jei žinote tikslų atspalvį.
   

Kaip ir su kitais dizaino elementais, gali tekti eksperimentuoti su skirtingomis spalvomis ir kaip jos atrodo su pasirinktu šriftu.

DUK

Ar „Figma“ yra slenkamo teksto komanda?

Deja, nėra komandos, leidžiančios tekstą slinkti „Figma“. Tačiau, naudodami pirmiau minėtą metodą, procesą galite užbaigti vos keliais paspaudimais.

Kaip nuspręsti, kurios perpildymo parinkties noriu?

Tai priklauso nuo naudojamo teksto tipo, bendro dizaino ir funkcijos. Vertikalus stilius paprastai tinka perskaityti didelius tekstus.

Kokiai įrenginio sąsajai paprastai reikia slenkamojo teksto dizaino?

Geras pavyzdys būtų programėlės dizaino maketai. Vartotojai gali sukurti telefoną kaip bendrą rėmelį, o slenkamas tekstas gali būti programos sąsaja.

Ar „Figma“ yra geriausias pasirinkimas kuriant slenkamus dizainus?

„Figma“ yra vienas geriausių įrankių, leidžiančių kurti įvairias formas, įskaitant slenkamus dizainus. Dar geriau, Figma yra nemokama. Tačiau galite turėti tam tikrų asmeninių pageidavimų. Pabandykite eksperimentuoti su keliomis platformomis, pvz., „Adobe Illustrator“, kol rasite jums tinkamiausią įrankį.

Padarykite savo dizainą slenkamą ir patogų vartotojui

Padaryti bet kokį tekstą rėmelyje Figma yra paprasta. Tiesiog pasirinkite rėmelį ir pereikite prie klipo turinio parinkties. Baigę galėsite pasirinkti perpildymo slinkimo parinktis. Taip pat neturėtumėte pamiršti ir kitų svarbių dizaino elementų, tokių kaip rėmelio spalva ir forma bei teksto šriftas. Padaryti savo dizainą slenkamą yra puikus pasirinkimas nukreipimo puslapiams, programų sąsajoms ir iššokantiems langams. Tai leidžia lengviau perskaityti tekstus, o ne spustelėti, o tai galiausiai pagerina vartotojo patirtį.

Ar jums buvo lengva padaryti turinį slenkamą naudojant „Figma“? O kaip dėl tinkamo šrifto pasirinkimo? Praneškite mums toliau pateiktame komentarų skyriuje.