19 tüpograafiaoskus, mida iga disainer peaks teadma

Üle 90% kogu veebiteabest koosneb tekstist. Ehkki disainerid kulutavad lehe graafika, liidese ja stiili üle otsustamiseks palju aega, on täiusliku tüpograafia valimiseks vaja sama palju aega. Eriti mobiilseadmete puhul nõuab mobiilse veebi tüpograafia erilist tähelepanu, kuna sellega kaasnevad 2 peamist väljakutset - saadaolev ruum ja tüpograafiline suurus. See artikkel edastab 19 tüpograafianõuannet, mis on vajalikud muljetavaldava kasutajaliidese avamiseks teie mobiilse veebidisaini jaoks koos rikkaliku kasutajakogemusega.

Andke ruumi

Mobiilne tüpograafia ei tähenda tähtede ekraanile paigutamist, vaid nende paigutamist viisil, mis muudab need kasutajatele loetavaks. Kasutage tühikut korralikult ja jätke tähtede, ridade ja lõikude vahele piisavalt ruumi, et kasutaja saaks sisu korralikult lugeda ilma, et oleks vaja suumida.

Boonusnõuanne: Kerning

Kerning ei kuulunud sellesse loetellu enne, kui sain aru, kui oluline see võib olla UI kujundamise vaatenurgast. Nii et me teame esimesest nipist, et ruumi pakkumine on vajalik, kuid Kerning võtab selle sisse sälgu. Kerning on tähemärkide vahelise ruumi kohandamise kunst, et sisu oleks eristuv ja samal ajal hõlpsasti loetav. Kerningit on 3 tüüpi, valida võib ka edaspidi.

Ehkki ülaltoodud pildil on see nähtav, on nende erineva tüübi erinevuste vahel palju rohkem teada. Uudishimulik? Lugege seda selle ajaveebi rubriigist “Kerning: ärge krampige oma stiili”.

Sobiv fondi suurus

Võite hoida oma töölauafonte suuruses 14 pikslit, kuid kui sama tehakse mobiilis, võib see sõltuvalt seadme eraldusvõimest põhjustada väiksemat või suuremat sisu. Kontrollige fondi suurust kõigist eraldusvõimest ja kasutage meediumipäringuid, et sellest tulenev mobiilse veebi tüpograafia oleks loetav kõigis erineva eraldusvõimega pihuarvutites.

Kasutage õigeid mõõtühikuid

Mobiilse veebi kirjasuuruse korral ei kasuta tüpograafia punkte (pt). Selle asemel kasutage ems-i või rems-i. Enamik disainereid eelistab seda, kuna need üksused muudavad sisu skaleeritavaks, kuna need põhinevad protsendilisel ja mitte staatilisel suurusel.

Valige kontrastsed värvid

Parem kontrast tagab parema loetavuse. Mõeldes mobiilse veebitüpograafia värvile, mõelge heleda ja tumeda võrdlusele. Kui lehe taust on tumedat värvi, kasutage erivärvilisi fonte. Näiteks valged fondid mustal taustal ja vastupidi.

Parema loetavuse tagamine

Täna on saadaval palju tasuta ja põnevaid fonte, kuid kui plaanite neid oma sisus kasutada, peaksite kontrollima iga tähestikku, et veenduda, kas kasutatav fondipere ja suurus muudavad selle sisu loetavaks. Pole mõtet neid lahedaid fonte kasutada, kui lugeja ei saa teie sisust aru.

Joondage tekstid õigesti

Joondamine on mobiilse veebi tüpograafias oluline tegur. Inimese ajule meeldib lugeda teksti väikse ekraaniga plokkidena. Tavaliselt on tekstid vasakul joondatud, mis tähendab, et ploki paremal küljel on kaltsakas serv. Reguleerige seda õigesti ja veenduge, et kasutate õigustatud joondamist, nii et see ei tähenda ebaühtlast tühikut.

Määrake juhtiv

Mobiilses veebis sisalduv tüpograafia nõuab järjepidevat juhtimist (ridadevaheline ruum). Kui see on liiga väike, on suure sisu korral ühe rea lõppu ja järgmise algust keeruline jälgida. Kui see on liiga suur, on tulemuseks ebavajalikud tühikud. Ärge katkestage liini sujuvat voolu.

Oma magusa koha leidmine

Kõigil fontidel on ilus koht. Kirjasuuruse ja esikombinatsiooni kombinatsioon, kus need tagavad parima loetavuse ja vähem moonutusi, mis on põhjustatud brauseri vaikimisi varjunimedest. Katsetage kasutatava kirjatüübiga ja leidke see magus koht.

Valge ruumi kasutamine

Valged ruumid on sageli kasutatavad. CTA-de või klõpsatavate linkide korral kasutage tühikut, et neid saaks indeksi või pöidla abil eristada ja neile klõpsata. Kuna kasutaja ei kasuta hiirt nagu töölaual, loetakse kursoriks pöial või indeks, mille paksus on umbes millimeeter. Mõelge sellele ja kasutage tühikuid tõhusalt.

Võtke ekraani laius kontole

Mobiilses veebis tüpograafia kujundamisel tuleb läbi mõelda, kuidas inimesed tekste loevad. Tavaliselt on mobiilseadmes kahte tüüpi laiust: vertikaalne ja horisontaalne. Seetõttu arvestage tüpograafia kujundamisel mõlemad laiused ja seadke vastavalt joondamine ja vahekaugus.

Muutke oma tüpograafia eristatavaks

Teie mobiiliveebilehe tüpograafial peaks olema eriline omadus, kas välimus või värv või täiendavad efektid. Eriti sisu osas, mida soovite, et kasutajad loeksid, valige hoolikalt pealkirjade kirjatüübid, mis eristavad neid ülejäänud osadest.

Kontrollige mastaapi ja proportsioone

Kontrollige erineva eraldusvõimega mobiilseadmete sisu. Samuti suurendage ja vähendage, et tagada teie mobiiliveebide tüpograafia skaala ja sobivus kogu ekraani laiusega. Teie sisu reageerimine on kohustuslik ja peate seda testima ning kirjutama meediumipäringuid juhuks, kui mõne lahutuse korral on häireid.

Võtke funktsionaalsus arvesse

Mobiiliveebisaidil on palju tekstielemente, mis võimaldavad kasutajal teatud toiminguid teha, näiteks sõnumi saata või helistada. Mobiiliveebi tüpograafia tuleks hoolikalt läbi mõelda, tagamaks, et kasutajad mõistavad, et konkreetne tekst on tegelikult CTA või täidab teatud funktsioone.

Kas lehe tekst on raske?

Kui teie leht on tekstiliselt raske, näiteks ajaveeb või uudisteartikkel, on vaja väga vähe suhtlemist. Kasutaja peamine eesmärk on lugeda ja tagada, et mobiilse veebi tüpograafia oleks vastavalt kujundatud.

Kas lehe koostoime on raske?

Kui teie leht hõlmab rohkem hõljumist ja klõpsamistoiminguid koos tippimise, redigeerimise jms, siis kohandage oma tekste vastavalt. Veenduge, et fondi suurus ei oleks väiksem kui 18 pikslit, et kasutajad mõistaksid, et mõni toiming peaks toimuma siis, kui nad teksti klõpsavad või kursorit hõljutavad.

Vastuvõtlik veebidisain

Nagu varem mainitud, tuleks mobiilse veebi tüpograafia ajal piksleid vältida. Neil on fikseeritud mõõtmete standard. Kasutage em või rem. Need põhinevad protsendil ja on skaleeritavad. Kui sisu vaadatakse erineva eraldusvõimega mobiilseadmes, kohandavad nad selle suurust vastavalt. Pidage meeles, et teie tundliku veebisaidi teksti sisu peaks olema skaleeritav ja kohandama nende suurust automaatselt vastavalt ekraani laiusele. Tundliku testimise tegemiseks võite kasutada LambdaTesti. Ühe klõpsuga saate kontrollida oma saidi reageerimisvõimet enam kui 44 erineva eraldusvõimega mobiilseadmes.

Mitme fondi sidumine

Mobiilse veebi tüpograafia kujundamisel võite kombineerida erinevaid fonte pealkirjade ja lõikude, siltide jms jaoks. Kuid veenduge, et need sobivad üksteisega. Alžeeria segamine pealkirjaks ja koomiksiks mõeldud MS lõiguks on halb mõte.

Kirjasuurus: raske või kerge?

Mobiilifondid on lauaarvutitega võrreldes suhteliselt väiksemad. Nende funktsionaalsuse arvestamisel tuleb olla ettevaatlik, et need oleksid loetavad või klõpsatavad. Fondi kaalu määramise võti on katsetamine. Ehkki praegu on mobiilse veebi julge ja suur tüpograafia suundumus, peaksite kasutama mitut fondi kaalu ja testima rakendust erinevate eraldusvõimetega, tagamaks, et kuskil pole häireid.

Pidage silmas tausta

Kui taust on staatiline ja ühevärviline, nagu varem mainitud, võite kasutada vastupidise kontrastsusega fondi värve. Kuid kui taust on pilt või video, oleks ideaalne valik katsetada erinevaid värve ja kontrollida, milline neist sobib korralikult ja muudab sisu loetavaks.

Tüpograafia on delikaatne käsitöö. Disainerid veedavad sageli elu tüpograafiliste oskuste teravdamisel. Kuna iga uus kirjatüüp toob kaasa uue väljakutse, oleme kindlad, et ülalnimetatud mobiili tüpograafia näpunäited on kasulikud järgmisel korral, kui loote uue mobiilse veebisaidi. Samuti pidage meeles brauseriteülese ühilduvustesti tegemist, et veenduda, kas kasutatavad kirjatüübid või stiilid töötavad kõigis brauserites korralikult. LambdaTesti saab kasutada brauseriteülese ühilduvustesti tegemiseks enam kui 2000 erinevas brauseris ja nende versioonides. Veenduge, et kirjatüüpi toetatakse kõigil vajalikel sirvidel, ja tutvustage oma kasutajatele rikkalikku kasutajakogemust, mida nad väärivad.

Algselt avaldati LambdaTest

Algselt kirjutas Arnab Roy Chowdhury

Lisalugemist…

Kui postitus teile meeldib, siis plaksutage ja aidake ka teistel seda leida.