citiți dimensiunile fontului în UI Design: Ghidul complet. Navigați rapid la alte capitole: Introducere * iOS * Android * Web * principii

proiectarea unei aplicații pentru iPhone sau iPad și nu sunteți sigur ce dimensiuni de font să utilizați? Iată rezumatul rapid și murdar al dimensiunilor fontului presupunând (a) că utilizați fontul implicit al Apple, San Francisco (sau similar) și (b) că doriți să potriviți convențiile iOS.

instrucțiuni de tipografie pentru iPhone

Iată un rezumat rapid al stilurilor., A se vedea mai jos pentru referință vizuală și orientări mai detaliate.,

text Secundar 15pt culoare mai deschisa, precum și Terțiar text,
Subtitrări,
Segmentate butoane 13pt Sări peste un font de dimensiune între secundar și terțiar text controale Formă
(Butoane,
intrări de Text) 17pt a Evidenția cele mai importante butoane cu o medie de greutate font bara de Acțiune 10pt nu merge mai mică decât această

Să rupe acest jos element-cu-element si uita-te la exemple ilustrate., Vom acoperi nu doar dimensiunile reale ale fontului, ci și modul în care Apple se gândește la stilurile de text.

titluri

iOS are câteva titluri mari, cum ar fi” Inbox ” de mai jos – la 34pt, este vorba despre cel mai mare text pe care îl vei vedea pe un iPhone.

Dar odată ce alegeți, titluri morph să 17pt, dimensiunea implicită pentru text pe bază de acțiuni.,

observati ca titlul se micșorează la aceeași dimensiune ca implicit de text – dar ei folosesc o greutate mai mare și partea de sus-și-centru de plasament pentru a se distinge ca un titlu. Acesta a fost un pic de revelație pentru început-designer-Erik, așa cum m-am așteptat întotdeauna că titlurile vor fi mai mari decât textul normal (nu pur și simplu mai îndrăzneț).

Vizualizări listă

listele sunt pâinea și untul aplicațiilor de telefon. Nu ai știut niciodată câte lucruri erau de fapt liste până când ai început să le afișezi pe un ecran înalt și subțire. Să ne uităm la cele următoare.,

Într-o vizualizare listă – în acest exemplu particular, e-mailuri – iOS tratează numele expeditorului ca dimensiuni normale text (17pt), iar subiectul și previzualizare secundare, mai mici de text (15pt). Cred că acest lucru merită remarcat, deoarece, din nou, începând ca designer, instinctul meu a fost să fac contrariul: să fac corpul dimensiunea implicită și să fac numele expeditorului și mai mare. Observați o tendință aici? iOS nu stilizează dimensiunile fontului așa cum te-ai putea aștepta în mod naiv.,

Pe pagina de setări, opțiuni înșiși sunt scrise implicit stil de text, chiar dacă titlurile de secțiune (de exemplu, „AirDrop”) sunt mai mici (whoa!). Dar observați că, chiar dacă titlul este mai mic, este o greutate mai groasă a fontului, ceea ce înseamnă că îl puteți recunoaște în continuare ca titlu. Din nou: subtil.

notele de sub Setări („AirDrop vă permite să partajați instantaneu…”) sunt scrise cu font 13pt, care este cel mai mic pe care l-am văzut în oricare dintre aceste exemple UI.,

controale formular

să ne uităm la câteva controale rapid.

Acest lucru ar trebui să fi început să se simtă destul de simplu acum. Singura surpriză este butonul segmentat la dimensiunea 13pt (pare prea mic)., Bănuiala mea este că, din moment ce Apple știa că unele dintre aceste butoane ar avea multe opțiuni, tocmai au implicit o dimensiune mai mică a textului pentru control, chiar dacă există doar două opțiuni.

Căutare utilizează implicit mărimea și greutatea, deși culoarea este un pic mai ușor înainte de a începe să tastați în.

Modals

Acest mic pop-up este un super exemplu ilustrativ de modul în care Apple stiluri de text.

• titlul este dimensiunea implicită., Ceea ce credeți că nu ar fi de ajuns, dar ce am văzut înainte? O greutate mai groasă a fontului pentru a compensa faptul că nu este mai mare.
• textul explicativ este 13pt. Aș fi ghicit că ar fi 15pt, cum ar fi textul corpului de e-mail, dar poate că au vrut doar să se potrivească pe o singură linie?
• introducerea parolei este 13pt, ceea ce ar fi prea mic pentru o introducere normală a textului, deși bănuiala mea este că veți vedea doar o grămadă de cercuri negre, nu trebuie să fie dimensiunea implicită.,
• ” OK „și” Cancel „sunt dimensiunea implicită, dar din moment ce” OK ” este, sperăm, ceea ce veți apăsa, Apple atrage puțin mai multă atenție asupra acesteia, făcându-i o greutate mai groasă.

aceste dimensiuni de fonturi urmează un model clar și ilustrează câteva trucuri frumoase de stil de text, dar există unele inconsecvențe ciudate cu siguranță.

bara de acțiune

În cele din urmă avem bara de acțiune din partea de jos a ecranului. Acesta este cel mai mic text pe care l – am putut găsi în întregul UI-10pt. Aș sta departe de o dimensiune atât de mică cât mai mult posibil.,

iPad Tipografie Orientări

Ca de la ultimul update (Poate în 2020), ipad-uri au, în general, mai mici densități pixel decât iphone. Deoarece iPad-urile au mai puțini pixeli pe inch, orice dimensiune în „pixeli” sau „puncte” va fi puțin mai mare pe un iPad. Deoarece ținem iPad – urile puțin mai departe de ochii noștri decât iPhone-urile, Acest lucru se echilibrează frumos-puteți păstra majoritatea acelorași dimensiuni de font pe iPad și iPhone. Așadar, începeți orice lucrare de tipografie iPad citind secțiunea iPhone de mai sus.,acestea fiind spuse, cea mai mare diferență este cu titlurile. Deoarece aveți o pânză mai mare cu care să lucrați, o dimensiune ideală a fontului corpului rămâne ideală – dar aveți mult mai mult spațiu pentru titluri mai mari.

Deci, în timp ce unele aplicații încă mai folosesc iPhone-stil 17pt titluri…

Altele sunt mai mari.,

Deci, în general, pentru iPad, ai de gând să fie după o mulțime de iPhone stiluri, dar cu un pic mai mult spațiu pentru a fii creativ în cap.

San Francisco Guidelines

fontul implicit pentru iOS este San Francisco. Puteți descărca San Francisco gratuit. Nu este necesar să utilizați San Francisco atunci când creați o aplicație iOS, dar dacă doriți să aibă acel aspect iOS implicit, atunci SF este noul dvs. cel mai bun prieten.,Apple ar dori să fii o păpușă și să urmezi câteva reguli suplimentare atunci când folosești San Francisco.

în primul rând, utilizați SF Pro Display la dimensiuni de font 20 sau mai mari. Utilizați numai SF Pro Text pentru text corp și mai mici.,

Font Size	Font Family
19 or smaller	SF Pro Text
20 or larger	SF Pro Display

Second, San Francisco is designed to have different character spacing at different sizes., Deci, dacă doriți pentru a imita perfect „default iOS” uite, ai câteva opțiuni:

1. Parte-pentru a regla spațierea caracterelor în funcție de dimensiunea fontului în funcție de tabelul de mai jos
2. Utilizați stiluri de text direct de la Apple iOS UI Design Sketch (slash Photoshop slash XD) bibliotecă
3. Utilizați această Schiță la îndemână plugin pentru a avea în mod automat SF spațiere caractere setat corect, în funcție de dimensiunea fontului

Sau doar ignora faptul că Apple spune pentru a schimba spațierea caracterelor la sutime de un pixel. Trăiește liber sau mori, omule.,

Font Style	Font Size	Character Spacing
Bold title	34pt	0.41
Body text	17pt	-0.41
Secondary text	15pt	-0.24
Tertiary text	13pt	-0.08
Smallest text	10pt	0.,12

San Francisco este fontul implicit pentru iPhone și iPad. Deci, dacă îl utilizați, cel mai bine să știți despre aceste restricții. Cu toate acestea, puteți, desigur, să proiectați Aplicații iOS în orice font doriți. Aveți grijă ca altele să apară mai mari sau mai mici sau mai puțin lizibile, chiar și la aceeași dimensiune.,

Continua să-Capitolul 2: Android/Material de Design Dimensiunea Fontului Orientări

O Notă Finală 😎

Dacă aceasta este prima dată aici, s-ar putea fi, de asemenea, interesat în:

• a Învăța Design UI meu full-length curs video online pe design de interfață de utilizator
• Design Newsletter, un peste 40.000 de persoane newsletter cu design original articole care vizează oferindu-vă sfaturi tactice pentru a îmbunătăți UX/UI abilități.unii oameni au unele lucruri foarte frumos de spus despre newsletter.,
  laudă pentru Newsletter-ul de Design

  Vă mulțumim pentru newsletter-ul dvs. Este probabil cel mai bun buletin informativ pe care l-am primit de la 1999, când am început freelancing.

  Tricia Littlefield
  Fondator, TheSimpleWeb

  de Fiecare dată când primesc un mail de la tine, eu sunt ca ‘la Naiba, acesta este un lung e-mail! În nici un caz nu voi citi toate acestea”, apoi am început să citesc și sunt ca „La naiba, acest lucru este atât de ciudat brillant” și a citit totul.,

  Jean-Philippe
  UX Strateg, Independent

  Peste 40.000 de abonat.
  fără spam. Dezabonare oricând.