apeescape2.com
  • Pagrindinis
  • Darbo Ateitis
  • Įrankiai Ir Pamokos
  • Vikrus
  • Ns Dizainas
Ns Dizainas

Projektavimas skaitymui - žiniatinklio tipografijos vadovas (su infografika)

Šrifto pasirinkimą gali atlikti praktiškai bet kas - tiesiog spustelėkite vardą išskleidžiamajame sąraše. Ir vis dėlto, pasirinkdamas dešinė šriftas yra vienas iš labiausiai apgalvotų dizaino proceso sprendimų.

Tipografijos dizaineriai savo karjerą skirti laiškų formavimui. Šiose mažose formose ekspertai subalansuoja tokius dalykus kaip emocijos ir neutralumas, asmenybė ir praktiškumas, įskaitomumas ir lankstumas. Pasirinkus konkretaus dizaino šriftą, pateikiamas ilgas svarstymų sąrašas.



Tradiciškai grafikos dizaineriai visada studijavo tipografijos pagrindus spaudos dizaino atžvilgiu. Tačiau kai dizainerio vaidmuo dabar apima visų tipų skaitmenines laikmenas, tipografija yra didesnis prisijaukinamas žvėris. Norėdami patobulinti pagrindus, naudokite toliau pateiktus žiniatinklio tipografijos patarimus, kai pasirenkate šriftą ir suformatuojate, kad skaitymo patirtis būtų geriausia.

Skaitmeninės tipografijos iššūkiai

Kalbant apie spausdinimo dizainą, yra nedaug kintamųjų, kaip vartotojas sąveikaus su juo. Atspausdintas puslapis nepasikeis, priklausomai nuo to, kas jį laiko - spalvas galima griežtai kontroliuoti, o šriftas išliks statiškas. Kokia prabanga. Skaitmeninė tipografija yra daug sklandesnė. Kai ekrane pasirodo tipografija, yra daug veiksnių, kurie lemia jos rodymą, iš kurių yra:

  • Ekrano dydis: neįmanoma numatyti, Reaguojantis dizainas siekiama atsižvelgti į bet kokį nedidelį matmenų pasikeitimą. Bet tai reiškia, kad rinkimas kartais gali būti atliekamas veltui.
  • Ekrano skiriamoji geba: pikselių tankis vaidina didelę dalį teksto įskaitomumo. Dėl technologijos pažangos didelės raiškos ekranai tapo labiau prieinami masėms, tačiau dizaineriai turėtų nepamiršti senesnių technologijų išskirtinumų.
  • Ekrano kalibravimas: ryškumo lygiai lemia spalvų rodymą ekrane. Tinklalapio dizaino spalvos turi atitikti visų tipų ekrano nustatymus.

Geriausio šrifto pasirinkimas skaitymui ekrane

Skaitmeninis dizainas yra sunkiai suprantamas amatas - ne taip seniai mes apsiribojome tik keliais šriftais, kurie buvo suderinami su mažos rezoliucijos monitoriais.



Mes peržengėme savo šuolius šrifto parinktys . Jie buvo sukurti ekranui ir sukurti su tam tikrais niuansais, kurie pagerina įskaitomumą. Panašiai kaip spausdinti šriftai apgauna akis, kad padidintų įskaitomumą rašalo gaudyklės , tą patį padarys ir geri žiniatinklio šriftai.

Spausdinti dizaino šriftus ir interneto dizaino šriftus

Šriftai, skirti spausdinti, yra sukurti iš rašalo. Žiniatinklio šriftai yra sukurti iš kvadratinių pikselių.

Dizainas neturi apsiriboti visuotinai standartiniais šriftais („Times New Roman“ gali išeiti į pensiją dabar). Dizaineriams yra begalė variantų, leidžiančių saugoti internete prieinamus šriftus. „Google“ šriftai , Šriftų biblioteka ir „Adobe Typekit“ yra keletas, kurie siūlo lengvą integraciją ir platų pasirinkimo spektrą.



Formatavimas malonia skaitymo patirtimi

Šrifto pasirinkimas yra tik pradžia. Sprendimai dėl linijos ilgio ir aukščio gali padaryti skaitmeninį dizainą arba jį sugadinti. Yra paprastų patarimų - niekada nenaudokite visų didžiųjų raidžių ir nesumažinkite šriftų skaičiaus, tačiau daugybė formatavimo sprendimų priklauso nuo bandymų ir klaidų.

Sureguliuokite geriausio šrifto, kurį galite skaityti ekrane, formatą naudodami „Grid Lover“

Tinklelio meilužis leidžia vartotojams pritaikyti tipų formatavimą, kad būtų lengviau juos skaityti. CSS yra sukurtas šone, kad būtų lengva įdiegti.

Idealus teksto dydis priklauso nuo pasirinkto šrifto, nes tokie veiksniai kaip x aukštis ir skaitiklio atvirumas turės įtakos įskaitomumui. Tada teksto dydis nulems eilutės aukštį ir ilgį. Lengvas būdas patikrinti šių sprendimų santykį yra naudoti tokius įrankius kaip Tinklelio meilužis , kuris naudoja slankiklius kiekvieno matavimo išvaizdai pakeisti.

Fono spalvos pasirinkimas už teksto bloko yra toks pat svarbus, kaip ir pati šrifto spalva. Kontrastas tarp abiejų nulems kopijos skaitomumą. „WebAIM“ Kontrasto tikrintuvas padeda lengvai nustatyti spalvų derinių kontrasto santykį, todėl paletė atitinka pritaikymo neįgaliesiems standartus.

Niekada netaupyk testavimo

Vadovas yra naudingas kuriant ekrano patirtį, tačiau yra per daug veiksnių, kad žinotumėte, kada dizainas yra sėkmingas, nežiūrint į jį vietoje. Išbandykite tipografiją ekranuose ir ekrano nustatymuose, kurie patenka į tolimiausius vidurkio kraštus - pavyzdžiui, beveik pasenę išmanieji telefonai, didžiausi didelės raiškos monitoriai ir ekranai pasirodė akinamai ryškūs. Dizainai, kurie praeina ekstremaliomis sąlygomis, yra paruošti visiškam vartotojo prieigai.

Žiniatinklio tipografijos vadovas

Kuriant ekraną reikia atsižvelgti į daugelį dalykų, o tobulėjant technologijoms ir gaminiams sąlygos projektavimui nuolat keisis. Tačiau kalbant apie tipografiją yra tam tikrų dalykų, kurie, atrodo, visada pasitvirtina.

Čia pateikiamas išsamus tinkamo šrifto pasirinkimo ir formatavimo vadovas, kad būtų lengviau skaityti.

Žiniatinklio tipografijos vadovas.

Atsisiųskite šios infografijos PDF versiją. InfographicInfografiją sukūrė Bėždžionių Pabėgimas „);“ onmouseover = '' style = 'cursor: pointer;' data-url = 'https: //www.toptal.com/designers/typography/web-typography-infographic' data-img = 'img / ui-design / 61 / designing-readability-guide-web-typography-2. png '> Įterpkite šią infografiką į svetainę. • • •

Toliau skaitykite „ApeeScape“ dizaino tinklaraštyje:

  • Tipografijos anatomijos subtilybių išskyrimas
  • Šriftų klasifikavimo niuansų supratimas
  • Žodžiai svarbu - tikroji NX kopijavimo vertė
  • Sukurti vartotojo sąsajos stiliaus vadovą, skirtą geresnėms naudotojams
  • Svetainės pertvarkymo pagrindai - atvejų analizė

Suprasti pagrindus

Kas yra tipografija kuriant internetą?

Tipografija kuriant internetą yra panaši į spaudos dizainą, tačiau tam, kad būtų užtikrintas įskaitomumas visų tipų ekranuose, reikia tam tikrų aplinkybių. Šriftas, tipo dydis, spalva, linijos aukštis ir raidžių formos yra keletas tipografijos veiksnių, kurie turi būti kruopščiai subalansuoti, kad būtų malonu skaityti.

Kurį šriftą geriausia skaityti ekrane?

Geriausiai šriftus, kuriuos galima skaityti ekrane, yra su skiriamosiomis ir atviromis raidžių formomis. „Proxima Nova“, Džordžijos valstija ir „Fira“ turi savybių, kurias lengva skaityti įvairiuose ekrano ekranuose. Kiti veiksniai turi įtakos šrifto įskaitomumui, pavyzdžiui, tipo dydis, linijos aukštis, šrifto ir fono spalvų kontrastas.

Kokį šrifto dydį turėčiau naudoti svetainėje?

Šrifto dydis svetainėje turėtų atitikti jį rodantį ekrano dydį. Apskritai šriftas turėtų būti 12–16 taškų mobiliajame ekrane, 15–19 taškų planšetiniame kompiuteryje ir 16–20 taškų ant stalinio kompiuterio ekrano. Taip pat reikėtų atsižvelgti į tokius veiksnius kaip tipo dydis, linijos aukštis ir linijos ilgis.

Kas yra gera tipografija?

Geros tipografijos, kaip ir gero dizaino, nematyti. Pagrindinis tipografijos tikslas yra perduoti rašytinę žinutę. Tipas turėtų būti suprojektuotas taip, kad būtų skaitomas ir teiktų malonų skaitymo įspūdį. Tokie veiksniai kaip tipo dydis, linijos aukštis ir linijos ilgis yra tipografijos elementai, į kuriuos visada reikia atsižvelgti.

Kiek šriftų turėtų naudoti svetainė?

Svetainėje turėtų būti minimalus šriftų skaičius - iš viso ne daugiau kaip trys. Kai svetainėje yra per daug šriftų, vartotojas gali dezorientuoti tiek daug vizualinio dizaino pokyčių. Pasirinktuose šriftuose turėtų būti įvairių svorių ir stilių, kuriuos galima strategiškai naudoti kuriant vartotojo sąsają.

7.0 versijos „Android“, skirta kūrėjams: naujos funkcijos, našumo naujovinimai ir kiti dalykai, kurie jums nerūpės

Mobilusis

7.0 versijos „Android“, skirta kūrėjams: naujos funkcijos, našumo naujovinimai ir kiti dalykai, kurie jums nerūpės
Ar judrus talentas yra atsakymas įterptųjų sistemų projektavimą?

Ar judrus talentas yra atsakymas įterptųjų sistemų projektavimą?

Vikrus Talentas

Populiarios Temos
10 patarimų, kaip sklandžiai palaikyti „WordPress“ priežiūrą
10 patarimų, kaip sklandžiai palaikyti „WordPress“ priežiūrą
Node.js / TypeScript REST API kūrimas, 2 dalis: modeliai, tarpinė programinė įranga ir paslaugos
Node.js / TypeScript REST API kūrimas, 2 dalis: modeliai, tarpinė programinė įranga ir paslaugos
Rubino metaprogramavimas yra dar šaunesnis nei skamba
Rubino metaprogramavimas yra dar šaunesnis nei skamba
Patobulintas kokybės užtikrinimo testavimas - vartotojo srauto pamoka
Patobulintas kokybės užtikrinimo testavimas - vartotojo srauto pamoka
Verslo analitikas - verslo žvalgyba ir analizė
Verslo analitikas - verslo žvalgyba ir analizė
 
„ApeeScape“ greitas ir praktiškas CSS apgaulės lapas
„ApeeScape“ greitas ir praktiškas CSS apgaulės lapas
Pradinio patekimo į rinką iššūkiai
Pradinio patekimo į rinką iššūkiai
Persvarstyti TV platformos vartotojo sąsajos dizainą
Persvarstyti TV platformos vartotojo sąsajos dizainą
„Salesforce Einstein AI“: API pamoka
„Salesforce Einstein AI“: API pamoka
Prisitaikymas prie sėkmės - pokyčių valdymo vadovas
Prisitaikymas prie sėkmės - pokyčių valdymo vadovas
Populiarios Temos
  • ranka vs arm64 vs x86
  • kuri iš šių savybių apie pirkėją rodo, kad pirkėjas turi didelę derybinę galią?
  • nutekėjo kreditinės kortelės su pinigais
  • „Azure“ mašinų mokymosi studijos pamoka
  • kas sukėlė Graikijos ekonomikos krizę
  • yra korporacija, laikoma individualia įmone
Kategorijos
Inovacijos Investuotojai Ir Finansavimas Pelningumas Ir Efektyvumas Prekės Ženklo Dizainas Duomenų Mokslas Ir Duomenų Bazės Kpi Ir „Analytics“ Produkto Gyvavimo Ciklas Kita Mobilus Dizainas Tendencijos

© 2021 | Visos Teisės Saugomos

apeescape2.com