AXV

Shrift (tipografiya) va uning UX dizaynga ta'siri

Matn faqat so'z emas: u interfeysning ovozi

9-sinfUX/UI dizayn4-hafta · 10-dars

Bugungi dars rejasi

01. Tipografiya nima

Typeface va font farqi, shriftning 4 asosiy jihati.

02. Shrift turlari

Serif, Sans Serif, dekorativ va skript shriftlar.

03. Figma amaliyoti

Typography bo'limi: oila, uslub va o'lcham.

01

Tipografiya nima?

Harflarni o'qiladigan va chiroyli qilib tartiblash amaliyoti

Tipografiya: ta'rif

Tipografiya (shrift) - interfeys matnini tanib olinadigan, o'qilishi mumkin bo'lgan va ko'zni jalb qiladigan qilib tartibga solish amaliyotidir.
  • Tanib olinadigan: harflar bir-biriga o'xshab ketmaydi
  • O'qilishi mumkin: ko'z charchamaydi
  • Jalb qiladigan: brend kayfiyatini beradi

Shrift (typeface) va shrift turi (font)

Times New Roman typeface (butun oila) Regular Bold Italic Bold Italic Fontlar: og'irlik (weight), kenglik (width), uslub (style)

Qismlar ustiga bosing.

Atamalarni eslab qolamiz

Typeface

bosing

Bir xil dizayn uslubidagi shriftlarning butun oilasi.

Font

bosing

Oila ichidagi variant: og'irlik, kenglik va uslub bilan farqlanadi.

Tipografiya

bosing

Harf va matnni o'qilishi oson va jozibador tartiblash amaliyoti.

02

Shrift nega muhim?

Brendlash, qulaylik va hamma uchun ochiqlik

Shriftning muhimligi: 3 sabab

Brendlash

Shrift kompaniyaning ovozi va uslubini mustahkamlaydi. Yagona shrift ishonch beradi.

Qulaylik (usability)

O'qilishi oson, kontrasti to'g'ri shrift ma'lumotni tez anglatadi.

Inklyuzivlik (accessibility)

Ko'rish qobiliyati cheklanganlar uchun ham qulay bo'lishi kerak.

Shriftning 4 asosiy jihati

1. Oila font family 2. O'lcham mobilda 14-16 pt 3. Qalinlik 600-700 / 400 4. Interval qator va harf oralig'i

Har bir blok ustiga bosing.

Eslab qoladigan raqamlar

0
asosiy shrift turi
14-16 pt
mobilda minimal o'lcham
0
oddiy matn qalinligi
600-700
muhim matn qalinligi
03

To'rt xil shrift turi

Serif, Sans Serif, dekorativ va skript

Shrift turlari: daraxt

Shrift turlari Serif klassik Sans Serif toza Dekorativ sarlavha Skript qo'l yozuvi Har bir tur ustiga bosing: misol shriftlar chiqadi

Serif yoki Sans Serif?

Serif

Kitob, gazeta, jurnal. Adabiylik, saviya, ishonchlilik. Misol: The Atlantic uzoq o'qish uchun serif tanlagan.

VS

Sans Serif

Veb va mobil ilova. Soddalik, neytrallik. Misol: GOV.UK tez xizmat uchun sans serif tanlagan.

Shrift tanlash tavsiyalari

  1. Brendni aks ettiruvchi shriftni tanlang
  2. Sukut bo'yicha sans serif ishlating
  3. Shakl funksiyadan keyin keladi
  4. Foydalanuvchilar bilan sinab ko'ring

Chuqurroq bilish uchun pastga ↓

Jekob qonuni (Jakob's Law)

Foydalanuvchilar o'xshash saytlarda shakllangan kutishlarga ega. Shrift ham shunga mos bo'lsin.

Ayrim odamlar shrift orqali narx, sifat va brend qadriyatlari haqida tasavvur hosil qiladi.

Nega sans serif?

Bolalar, keksalar, ko'rish qobiliyati past va disleksiyali foydalanuvchilar uchun sans serif shriftlarni o'qish va ko'z yugurtirish (skanerlash) qulay.

aniqsoddao'qish oson
04

Figma amaliyoti

«E-kutubxona» interfeysiga shrift beramiz

Figma: Typography qadamlari

1. Matnni tanlang

Text elementini belgilang. O'ng tomonda Typography bo'limi ochiladi.

2. Shrift oilasi

Ro'yxatdan Inria Serif tanlang: sarlavha va bo'lim nomlari uchun mos.

3. Uslub (Style)

Light, Regular, Bold, Italic, Bold Italic. Sarlavhaga Bold, oddiy matnga Regular.

4. O'lcham

Font size maydoniga 24 px kiriting. Sarlavha katta, matn kichik.

Ierarxiyasiz sahifa

e-kutubxona

Yangi kitoblar

Bu haftada kutubxonaga 12 ta yangi kitob qo'shildi.

Ierarxiyali sahifa

e-kutubxona

Yangi kitoblar

Bu haftada kutubxonaga 12 ta yangi kitob qo'shildi.

Mobil ekranda o'qish

Yomon

Matn juda mayda: barmoq bilan kattalashtirishga to'g'ri keladi, foydalanuvchi sabri tugaydi.

Yaxshi

Mobil qurilmada o'qish uchun qulay minimal o'lcham 14-16 pt. Sarlavha 600-700 qalinlikda.

Telefon ekrani: shrift ierarxiyasi

E-kutubxona

Yangi kitoblar

Muallif: namuna

O'qish
Sarlavha: katta, 600-700 Matn: 14-16 pt, 400 Yordamchi matn: kichikroq

Mini-test

Times New Roman Bold Italic qaysi atamaga to'g'ri keladi?

Times New Roman - typeface, Bold Italic esa uning fonti.

Odatiy xatolar

Uzun matnni dekorativ yoki skript shriftda yozish: o'qish qiyinlashadi.
Hamma matnni bir xil o'lcham va qalinlikda berish: ierarxiya yo'q.
Foydalanuvchiga matn hajmi va kontrastni sozlash imkonini bering.

Amaliy topshiriq 30 daqiqa

OsonFigmada «E-kutubxona» sarlavhasini yozing: Inria Serif, Bold, 24 px.
O'rtaSarlavha, bo'lim nomi va oddiy matn uchun 3 xil o'lcham va qalinlik belgilang.
QiyinBitta ekranni ikki xil shrift juftligida (serif va sans serif) yasab, qaysi biri o'qishga qulayligini yozing.

Xulosa

Bugun o'rgandik

Typeface va font, shriftning 4 jihati, 4 shrift turi, Figma Typography.

Uyga vazifa

Ikki sayt shriftini solishtirish va Figmada matn ierarxiyasi.