Share
Să facem seriozitate cu privire la tipografia mobilă; știm cu toții că mobilul este masiv și putem de asemenea de acord că tipografia este foarte importantă în cadrul unui design. Tipografia este un element fundamental de design; personal, prefer să încep cu asta, deoarece creez orice design, deoarece ajută la stabilirea unei scene bune pentru restul designului. Deci, hai să vorbim despre modul în care putem face ca tipografia noastră mobilă să fie cât se poate de bună.
Când proiectăm pentru mobil, probabil că cel mai mare dușman al nostru este dimensiunea ecranului fizic. Unele smartphone-uri sunt super-mici, cum ar fi iPhone 4 / 4S vechi, dar încă utilizate pe scară largă. Potrivit UNITY, 15,9% dintre oameni folosesc încă acest model vechi. În SUA această cifră se traduce la aproape 24 de milioane de persoane. Da, sunt mulți oameni cu ecrane mici și mici. Apoi, avem, de asemenea, ecrane mai mari, cum ar fi noul iPhone 6 Plus, Galaxy Note 4 sau Nexus 6. Faptul că există un astfel de interval mare în dimensiuni de ecran este o restricție în sine, pentru că ceea ce arată bine pe un iPhone 4 nu va fi întotdeauna arata bine pe iPhone 6 Plus.
Poate doriți să vă uitați la analizele dvs. și să vedeți ce este cel mai popular dispozitiv al site-ului dvs., începeți să îl adaptați. Cu toate acestea, este general acceptat faptul că o abordare a dispozitivului agnostic vă va servi mai bine pe termen lung.
Uitați-vă la imaginea de mai sus pentru a vedea cum redă textul de dimensiuni egale pe fiecare dispozitiv. Nu am putut nici măcar să se potrivească complet cu "Rubrica 1" pe iPhone 5S, demonstrând că tipografia receptivă începe cu dimensiunea ecranului.
Unele alte obstacole în momentul proiectării pentru un smartphone includ iluminarea în mediul utilizatorului, precum și cât de strânse țin telefonul pe față.
Să începem cu latte. Pe măsură ce folosim telefoanele cu mâinile noastre, avem tendința de a le ține la lungimea brațului sau chiar mai aproape de fața noastră. Aceasta înseamnă că tipul poate fi mai mic pe un telefon deoarece distanța dintre ecran și ochii noștri este mai mică decât cea a unui laptop sau a unui monitor desktop.
Având abilitatea de a scădea dimensiunea fontului înseamnă, de asemenea, că putem include mai multe texte în aceeași cantitate de spațiu, oferindu-ne măsuri "mai liniștitoare". La rândul său, acest lucru ajută la diminuarea dimensiunii ecranului mai mic, dar numai puțin. Puteți vedea acest lucru în acțiune în imaginea de mai jos.
Tip mai mic pentru ecrane mai miciOamenii folosesc mereu smartphone-urile lor, pretutindeni. În metrou, în parc, pe canapele sau pe pat. Aplicația sau site-ul dvs. web ar putea fi utilizate în medii diferite cu iluminare diferită, ceea ce înseamnă că trebuie să fiți conștienți de contrast. Citirea în parc este posibilă - chiar și cu lumina directă a soarelui - dacă contrastul textului este suficient de ridicat pentru fundal. În acest scenariu, ajută textul mai mare. Este mai puțin necesară concentrarea pe contrast dacă citirea este efectuată pe un metrou, unde iluminarea nu mai strălucește, nici noaptea în pat.
Gizmodo a publicat un articol detaliat despre dispozitivul mobil (inclusiv tabletele și smartphone-urile) care domină în aer liber. Ei au realizat o comparație a culorilor lor în funcție de diferitele opțiuni de lumină solară. S-a dovedit că Samsung Galaxy S a depășit iPhone-ul 4 în lumina directă a soarelui, ceea ce este cel mai grav dintre cele mai grave lumini în aer liber. Consultați articolul complet dacă căutați mai multe detalii despre acest lucru.
Punctul meu este simplu, există atât de multe părți în mișcare atunci când vine vorba de proiectarea pentru lizibilitatea pe un dispozitiv mobil. Cunoașteți utilizatorii dvs., astfel încât să puteți stabili cel mai bine ce ar trebui să fie experiența lor de citire, să începeți cu tipurile de telefon și să terminați mediul lor.
Exista o multime de tutoriale acolo care vă ajută să determinați pixelii specifici textul ar trebui să se bazeze pe rapoartele de aur sau doar eyeballing ceea ce arată bine. Stabilirea unei scări tipografice bune pentru desktop este simplă. De fapt, este destul de ușor să o faci și pentru dispozitivele mobile. Typecast are un articol minunat care detaliază modul în care puteți găsi despre măsurătorile pentru tipografia dvs. mobilă și pe desktop: o scală mai modernă pentru tipografie web. Articolul clar explică de ce tipografia trebuie să răspundă. Dar vreau să devin mai detaliat decât să spun pur și simplu "Oamenii tind să citească diferit pe telefonul mobil" - este mult mai mult decât atât!
Vedeți, mobilul este cel mai mic fix mediu cu care am avut de-a face cu designeri. După cum am menționat anterior, oamenii citesc pe telefoanele lor peste tot, în medii mereu în schimbare. Pentru a optimiza cât mai bine experiența lor în lectură, trebuie să înțelegem psihologia a ceea ce face, de fapt, o bună experiență de lectură.
Aș vrea să cred că proiectarea celei mai bune experiențe de citire pentru mobil începe cu textul perfect al corpului. Indiferent de fontul pe care îl alegeți, trebuie să vă asigurați că este suficient de flexibil pentru a rezista dimensiunilor diferite ale ecranului, în aceeași dimensiune a fontului, și arata bine. Dacă alegeți Helvetica Neue pentru familia de fonturi ar trebui să vă asigurați că va arata bine pe un iPhone 4S în 16px precum și pe un Nokia și un telefon Galaxy.
De asemenea, luați în considerare greutatea fontului atunci când selectați un font, deoarece unele telefoane vor afișa texte obișnuite, îndrăznețe sau luminoase în mod diferit față de altele.
Așa-i, titlurile sunt la fel de importante! Aveți mai multă libertate creativă cu titluri, deoarece acestea pot sacrifica o anumită lizibilitate pentru impact, dar ia în considerare și amploarea acestora. O rubrică, așa cum este demonstrată în prima imagine cu dimensiunile ecranului mobil, este cu mult mai probabil să devină necitită din cauza faptului că este prea mare pe un ecran mic. O rubrică mare este, de asemenea, o pierdere de spațiu, deoarece ați putea împiedica utilizatorii să ajungă la carnea conținutului.
Un alt lucru pe care trebuie să-l aveți în vedere atunci când perfecționați textul corpului dvs. este ritmul vertical. Ritmul vertical este un termen referitor la distanța verticală și alinierea tipografiei și a altor elemente de pe pagină. Termenul ritm semnifică un model repetitiv. Un ritm verticat bun asigură experiența de lectură ușoară deoarece permite o configurație echilibrată care să îndrumă ușor ochii cititorului.
Luat de la http://modulargrid.orgDacă linia de bază este liberă sau strânsă, coerența acesteia este cea mai importantă. Dar este important să realizăm că linia de bază a dispozitivelor mobile poate reflecta dimensiunea ecranului mic. Nu vă fie frică să strângeți lucrurile, mai ales dacă ați redus dimensiunea fontului, dar ați descoperit un ritm vertical confortabil pentru a vă asigura că lectura este netedă pentru cititorul dvs..
Dacă aveți nevoie de ajutor pentru a începe să găsiți cele mai bune măsurători pentru ritmul vertical, Andre Morton are un generator de ritm vertical pe blogul său.
Există câteva reguli de bază pe care aș dori să împărtășesc cu voi atunci când vine vorba de proiectarea tipografie, în general, dar care dețin valabil mai ales pentru tipografie receptiv și mobile.
Nu trebuie să fiți nevoit să vă ajustați niciodată cerneala pentru site-uri sau aplicații de orice fel. Este un proces dificil și extrem de nesigur pentru web! Fonturile de calitate vor avea o imagine bună și dacă fonturile pe care le-ați ales nu au o corecție bună, ștergeți-le.
Atunci când nu există cârpă clară în partea dreaptă sau stângă a textului, atunci ar putea fi justificată (și textul nu trebuie niciodată justificat pe web). O cârpă proastă va cauza găuri și spărturi în spațiul alb; este mai ușor să citiți și să scanați textul atunci când există o cârpă clară. Cum se rupe textul dvs. la diferite dimensiuni ale ecranului? O remediere poate fi o ajustare foarte simplă, care fie elimină câțiva pixeli din elementul care conține textul, fie adaugă un pic la ea.
Nu este nimic mai înșelător ca încercarea de a atinge o zonă mică de pe telefon și de a nu putea, deoarece este prea mic sau mai rău, atingând pe altceva în loc. Poate că cel mai bun sfat aici este să ai cât mai puțini dintre ei! Când există doar o singură legătură în linie, este mai ușor să o atingeți, deoarece nu este nimic altceva de deschis accidental. Apoi, asigurați-vă că legătura este clară. Acest lucru se poate face într-o varietate de moduri, cum ar fi făcând legăturile îndrăznețe sau sprijinindu-se pe modelul standard subliniat. Uneori modificarea culorilor nu va fi suficientă dacă contrastul este prea mic (amintiți-vă cum am vorbit despre culorile ecranelor și problemele de iluminare?)
În cele din urmă, asigurați-vă că linkurile inline au o zonă de atingere mai mare decât este percepută. Acest lucru se poate realiza prin aplicarea afișare: inline-block; pentru a ancora elemente, dar asigurați-vă că există umplutură sau extra inaltimea liniei aplicați nu distorsionează textul principal.
Proiectarea tipografiei pentru dispozitive mobile are o mulțime de părți în mișcare pe care ar trebui să le cunoașteți. Sper că acest post v-a oferit câteva informații despre cum să vă îmbunătățiți design-ul pentru mobil. Spuneți-ne propriile sfaturi și trucuri în comentarii!
Accentsconagua