UI dizaynda tipografik ierarxiya: sarlavha, matn va izoh
Tipografik ierarxiya foydalanuvchiga ekranda nimani birinchi oʻqishni koʻrsatadi. Sarlavha, asosiy matn va izoh uchun oddiy, amaliy qoidalar bilan tanishing.
Ilovaga yoki saytga kirgan odam sahifani odatda oʻqib chiqmaydi, koʻz yugurtiradi. Unga nima muhimligini bir qarashda tushuntirish kerak. Tipografik ierarxiya aynan shu ish uchun: matnning turli qismlari oʻzaro farq qilib, oʻqish tartibini belgilaydi. Quyida uchta asosiy daraja, ya'ni sarlavha, asosiy matn va izoh haqida gaplashamiz.
Ierarxiya nima uchun kerak
Hamma matn bir xil oʻlcham va ogʻirlikda boʻlsa, koʻz tayanch topa olmaydi. Yaxshi ierarxiyada foydalanuvchi sarlavhadan mavzuni tushunadi, asosiy matndan tafsilotni oladi, izohdan esa qoʻshimcha ma'lumotni biladi. Har bir daraja oʻz vazifasini bajarishi kerak va ular bir-biridan aniq ajralib turishi lozim.
Sarlavha: e'tiborni tortadi
Sarlavha sahifadagi eng yorqin element boʻlishi kerak. Buning uchun bir nechta vositadan foydalaning:
- kattaroq oʻlcham;
- qalinroq ogʻirlik (masalan, SemiBold yoki Bold);
- yetarli boʻsh joy, ya'ni ttepadan va pastdan masofa.
Sarlavhada geometrik va ochiq shakllar yaxshi ishlaydi. Masalan, [Montserrat](/fonts/montserrat) yoki [Poppins](/fonts/poppins) kabi sans shriftlar yirik oʻlchamda aniq va ishonchli koʻrinadi. Sarlavha qatorini qisqa saqlang va qatorlar oraligʻini juda katta qilmang, aks holda u bitta blok oʻrniga alohida soʻzlarga ajralib ketadi.
Asosiy matn: qulay oʻqilishi muhim
Asosiy matnning vazifasi koʻzni charchatmaslik. Mobil ekranlarda odatda 16 px atrofidagi oʻlcham yaxshi boshlangʻich nuqta hisoblanadi, lekin uni har doim real qurilmada tekshiring. Qator oraligʻini oʻlchamdan taxminan bir yarim barobar atrofida sinab koʻring va natijaga qarab sozlang.
Matn uchun ogʻirligi Regular boʻlgan, harflari aniq farqlanadigan shrift tanlang. [Nunito Sans](/fonts/nunito-sans) kabi yumshoq va ochiq sans shriftlar uzun matnda qulay boʻlishi mumkin. Qator uzunligiga ham e'tibor bering: juda uzun qatorni oʻqish qiyin, shuning uchun matn blokini cheklang.
Izoh: ikkinchi darajali, lekin oʻqiladigan
Izoh, rasm osti yozuvi, sana, yordamchi yozuvlar asosiy matndan kichikroq va ochroq boʻladi. Lekin ularni oʻqib boʻlmaydigan darajada kichraytirmang. Quyidagi qoidalarga amal qiling:
- oʻlchamni asosiy matndan biroz kichik qiling, keskin emas;
- rangni kulrangga yaqinlashtirsangiz ham, fon bilan kontrastni yetarli saqlang;
- muhim ma'lumotni (xato xabari, narx) izohga yashirmang.
Amaliy maslahatlar
1. Avval uch-toʻrt darajali shkala tuzing: bosh sarlavha, kichik sarlavha, asosiy matn, izoh. Undan keyin uni butun loyihada takrorlang.
2. Daraja oʻrtasidagi farq sezilarli boʻlsin. Farq 1–2 px boʻlsa, foydalanuvchi uni sezmaydi.
3. Ierarxiyani faqat oʻlcham bilan emas, ogʻirlik, rang va masofa bilan ham yarating.
4. Koʻpi bilan ikkita shrift oilasi ishlating. Koʻp hollarda bitta oila ham yetarli.
5. Dizaynni koʻzingizni qisib tekshiring: xiralashgan holatda ham eng muhim element ajralib tursa, ierarxiya ishlayapti.
Xulosa
Tipografik ierarxiya bezak emas, foydalanuvchiga yoʻl koʻrsatuvchi tizim. Sarlavha e'tiborni tortsin, asosiy matn qulay oʻqilsin, izoh esa xalaqit bermasdan yordam bersin. Shu uch darajani aniq belgilab olsangiz, interfeysingiz tushunarliroq va tartibliroq boʻladi.