UI dizaynida tipografiyadan foydalanish bo’yicha to’liq qo’llanma

UI dizaynining sxemasida har bir element muhim hisoblanadi ammo uni takomillashtirishning eng yaxshi usullaridan biri bu-Tipografiyadir. Shunga qaramay, tipografiyani UI dizaynining eng qiyin qismi deb o’ylashadi. Shunday qilib, UI dizaynini samarali qilish uchun siz tipografiya fanining asoslarini o’rganishingiz kerak. Ammo, baribir UI dizaynida tipografiyani to’g’ri ishlatish usullarini bilmaydigan ko’plab veb-ustalar va dizaynerlar mavjud. Agar siz dizayner bo’lsangiz, matn bilan ishlashda katta imkoniyatga ega bo’lasiz va unga shunchaki mazmun sifatida emas, balki UI dizaynining asosiy xususiyati sifatida qarashingiz kerak.Web dizaynda 95% tipografiya mavjud bo’lib, siz yozuv maydonidan yuqoriga ko’tarilishingiz kerak.

Agar siz UI dizayni uchun tipografiyangizni optimallashtirishni xohlasangiz, grafikaning o’qilishi, hisobliligi va grafik muvozanatni o’ylab ko’rishingiz kerak, ammo foydalanish qulayligi tipografiyaning shubhasiz eng muhim jihatdir.

Tipografiya nima?

Vikipediyaga ko’ra, bu yozma tilni foydalanuvchi uchun jozibali, o’qilishi oson va namoyish etilganda tushunarli qilish uchun tashkil etish usuli va uslublari yig’indisidir. Tipografiya turlarini tizimlashtirishga piksel o’lchamlarini tanlash, shrift oralig’i, chiziq oralig’i, chiziq uzunligi, harflar oralig’i va harf juftlari orasidagi bo’shliqni o’zgartirish kiradi. «Tipografiya» atamasi protsedura tomonidan ishlab chiqariladigan belgilar, raqamlar va harflarning tashkil etilishi, uslubi va tashqi ko’rinishiga nisbatan ham qo’llaniladi. Xulosa qilib aytganda, tipografiya — bu ekrandagi yozma til bilan bog’liq bo’lgan narsalar va dizaynerning taktikasi hamda badiiy mahoratiga muhtoj jarayondir.

UI dizaynidagi tipografiyaning eng yaxshi amaliyotlari

Agar siz mukammal UI dizaynini yaratmoqchi bo’lsangiz, o’zingiz avvalo o’z tipografiyangizni mukammal o’zlashtirgan holda ishlab chiqishingiz kerak bo’ladi. Blogning ushbu qismida biz UI dizaynidagi tipografiya uslubini rivojlantirishga yordam beradigan ba’zi ko’rsatmalar haqida ma’lumot bermoqchimiz.

1. To’liq yozma xat shakllari

Ko’plab harflar bir xil ko’rinishga ega bo’lib, bir biridan deyarli farq qilmaydi. Bu esa interfeys matnini o’qishni chindan ham qiyinlashtirishi mumkin. Harflar bilan bir qatorda, berilgan topshiriq uchun shriftlarning turli atributlariga nisbatan raqamlar ba’zan e’tiborga olinmaydi.

2. Matn stillari

Iloji bo’lsa, ichki matn uslublaridan foydalaning, chunki ular mutlaq ravshanlikni saqlagan holda vizual ravishda farq qiladigan usulda kontekstni namoyish qilishga yordam beradi.

Ushbu uslublar tizim shriftlariga bog’liq va har bir shrift hajmini avtomatik ravishda o’zgartiradigan Dynamic Type kabi asosiy tipografik xususiyatlardan foyda olishga yordam beradi.

3. Prototiplash

Barcha turdagi dizaynlar bilan bir qatorda, tipografiya ham prototip dizaynida muhim ahamiyatga ega. Ajablanarli tomoni shundaki, mobil tipografiyasida har bir UI elementi bilan birgalikda samarali va toza mobil UI tomon harakat qilishi mumkin; ammo, mobil prototip dizaynida, matn mazmunli bo’lishni talab qilmaydi. Masalan, prototiplashning eng yaxshi vositalaridan biri bo’lgan Mockplusda siz matnni tarkibiy qismidan tortib chiqarish orqali loyihalash uchun foydalanishingiz mumkin. Mockplus ikkala satrli va ko’p satrli matn elementlaridan iborat. Shrift, shrift o’lchami, rang va hokazo kabi matnning xususiyatlarini tavsiflab berishingiz mumkin, bundan tashqari, matnni avtomatik to’ldirish funksiyasi sizga ko’p vaqtni tejashga yordam beradi. Bundan tashqari, siz uning haqiqiy o’qish qobiliyatini tekshirish uchun haqiqiy mobil qurilmada dizaynni o’rganishingiz mumkin bo’ladi.

4. Hajm juda muhim

Odatda, ko’plab dizaynerlarning ishida hajmi bo’yicha farq qiladigan matn tarkibiy qismlarini o’z ichiga olganligi kuzatiladi; masalan, tugma nusxasi, maydon yorliqlari, bo’lim sarlavhalari va boshqalar. Ba’zi shriftlar katta o’lchamlarga juda mos keladi, boshqalari esa kichik o’lchamlarda yoki harf shaklida ishlaganda mukammal ko’rinadi. Shunday qilib, siz katta sarlavhalar va kichik yorliqlarga murojaat qilishingiz kerak bo’lgan harflar mavjud bo’lsa, matnning miqyosi haqida o’ylashingiz kerak bo’ladi. Agar siz o’ziga xos tarzda paydo bo’ladigan yozuv shriftini tanlasangiz, har xil o’lchamlarga mos keladigan va o’qish qobiliyatliligi va qulayligini oshiradigan narsalar to’g’risida o’ylab ko’ring.

5. Harflar oralig’i

Harflar oralig’ini belgilayotganda, siz bo’shliqni moslashtirishingiz, agar matn kattaroq bo’lsa, matn hajmiga nisbatan kichikroq qilishingiz kerak.

Katta harflarni katta bo’shliqlar bilan birlashtirganingizda, shrift juda ochiq ko’rinadi va bu bo’shliqni qo’lda tuzatishga yordam beradi. Xatlar oralig’ini ushbu qo’lda sozlash faqat UI dizaynidagi sarlavhalar uchun qo’llaniladi.

6. Keng nisbat

Belgining kengligi uning balandligi bilan mutanosiblik sifatida tushuntiriladi. Odatda, harfni yaxshiroq aniqlash uchun sizga kengaytirilgan xat kerak bo’ladi va bu xatoning yaxshiroq aniqlanishi tufayli sodir bo’ladi.

7. O’qish qobiliyati

Bu butun o’qish tajribasi sifatiga taalluqli va siz matn bloklarini, kichik sarlavhalarni, paragraflarni, sarlavhalarni aniqlab olishingiz va sizga namoyish etilgan matnni tushunishingiz uchun qulaylik sifatida tavsiflanadi. Siz buni ba’zi bir so’l tipografiya sifatida ko’rib chiqishingiz mumkin, bu esa web-saytga tashrif buyuruvchilarning tarkibni o’qishga rag’batlantirish uchun matnni o’ziga jalb qiladi.

8. Sans Serif vs. Serif

Tarixga nazar soladigan bo’lsak, seriflar ko’proq tushunarliroq bo’lib,ular uzoq vaqt davomida bosmada ishlatilgan va katta matn bloklari uchun o’qish tajribasini yuqori darajada oshirmoqda. Serif matnni osongina o’qish imkonini beradi. Biroq, bu jarayon mobil va web ilovalarida bir xil emas. San-seriflarning ham ko’plab turlari mavjud bo’lib, ularning dizayn shakli sodda harflar ko’rinishini eslatadi. Internetda va xususan mobil telefonda siz ko’proq sans-seriflarni ko’rishingiz mumkin.

Shunday qilib, barchasi siz ishlayotgan loyihangizga va foydalanuvchilar sizning tarkibingizni qanday ishlatishiga bog’liq ravishda matn shrifti tanlanilishi lozim.

9. Ierarxiya

O’qish tartibini ierarxiya belgilaydi. Unda sarlavha asosiy matn va sarlavhadan qanday ajratilishi kerakligi aytilgan. Buni kontrastlar, chiziqlar, matn o’lchamlari, to’ldirish va hokazo effektlaridan foydalanish orqali amalga oshirish mumkin. Siz o’qishni ajoyib tarzda o’zlashtirish uchun ushbu usulni to’g’ri o’rganishingiz kerak.

10. Ko’rinish ssenariylari

UI dizayniga kiritmoqchi bo’lgan matningizni tugatmoqchi bo’lganingizda, bir nechta ssenariylarni tekshirishingiz kerak. Matnni qanday moslashtirish va shakllantirishni tushunishingiz kerak. Ogohlantirish xabari bunga misoldir. Asl matn ogohlantirish xati matnidan farq qilishni talab qiladi va bu yaxshi foydalanuvchi interfeysi qiyinchiliklarga duch keladigan, ammo oxirida benuqson bo’lgan degan ma’noni anglatadi.

11. Amaliy platforma

Bu, albatta, aniq ko’rinadigan qism bo’lsada, lodatda e’tiborsiz qoldiriladi. Agar siz mobil ilovani ishlab chiqayotgan bo’lsangiz, uni mobil platformalarda sinab ko’rish tavsiya etiladi. Agar sizning foydalanuvchi interfeysi javob beradigan formatda tuzilgan bo’lsa, matn bo’yicha qabul qilingan qarorning to’g’riligini bilish uchun bir-nechta o’lchovlar va qurilmalarda barcha testlarni o’tkazib ko’rish lozim.

12. Ritm va takrorlash

Bu UI dizaynining murakkab bir qismidir. Qayta takrorlanadigan har bir komponent dizayndagi birlikni taklif qilish uchun bajariladi. Ushbu takrorlash uslubi qutilar, fon, matn hajmi, to’ldirish, ranglar va chiziqlar orqali qo’llanilishi mumkin. Takrorlash ritmni hisobga oladi.

13. Chiziq balandligi

Siz yetakchilik haqida gap ketganda oltin nisbatdan foydalanishingizni tavsiya etamiz. Agar ko’proq tajribangiz bo’lsa, ushbu natijani qo’lda sozlashingiz mumkin. Shubhasiz, ushbu qoidadan ba’zi istisnolar mavjud va agar kerak bo’lsa, ushbu qoida har doim buzilishi mumkin.

14. Oq bo’shliq (probel)

Oq joy sizning tashrif buyuruvchilaringiz bir vaqtning o’zida o’qishlari kerak bo’lgan matn hajmini kamaytiradi. Bu o’qishni tezlashtiradi va sahifani bema’ni ko’rinishdan saqlaydi. Oq bo’shliq ko’z sxemasini kuzatishga imkon beradi va natijada tarkibning jozibali va nafisligini ta’minlaydi.

15. Matn blokining kengligi

Aytaylik, siz yupqa muz ustida o’qiyapsiz. Juda keng matnli bloklar o’qish uchun keyingi qatorni qo’shishda ko’zingizni charchatadi. Boshqa tomondan, agar chiziqlar keng bo’lmasa, ko’z o’qish chizig’iga o’tishga majbur bo’ladi va shu bilan o’qish oqimiga xalaqit beradi.

O’quvchilar keyingi bosqichga o’tish tushunchasi bilan ongsiz ravishda energiya olishadi. Barcha o’quvchilarni hayajonga solib, faol bo’lishlari uchun matn satrida atigi 50 dan 75 tagacha belgini saqlash kerak.

16. Matn — bu foydalanuvchi interfeysi

Tajribasiz va tajribali UI dizaynerlari o’rtasidagi farq ularning matn ko’rinishi bilan o’lchanadi. Mutaxassis dizaynerlar matnni foydalanuvchi interfeysi sifatida, mutaxassislar esa uni boshqa tarkibiy qism sifatida ko’rishadi. Ushbu zamonaviy raqamli davrda sizning matningiz funktsional tarkibiy qismni qo’llab-quvvatlashi kerak va bu uni foydalanuvchi interfeysiga o’xshash qiladi. Bu sizning UI dizayningizning har bir xususiyati siz yozgan matnlarga mos kelishi kerakligini anglatadi.

Xulosa

Maqsaddan qat’iy nazar, tipografiya har doim UIni boshqaradi. Agar siz uni to’g’ri sozlasangiz, sizning matningiz o’zlashtiriladi va agar siz uni noto’g’ri qo’ysangiz muvaffaqiyatsiz bo’ladi. UI dizaynining barcha amaliyotlari siz tanlagan shrift uchun amal qiladi. Muvaffaqiyatli UI dizayni mukammal tipografiya bilan ta’minlangan. Shunday qilib, moslashuvchanligi va kengayish qobiliyati yuqori bo’lgan matn sizning dizayningiz bilan suyuqlik to’qnashuvini boshqarishi mumkin. Yuqorida keltirilgan maslahatlarga rioya qiling va agar siz o’zingizni bozorda o’z ilovangizni namoyon qilmoqchi bo’lsangiz va malakali UI dizayneri sifatida poygada g’olib bo’lishni istasangiz, ulardan foydalaning.

Manba:

PDP.uz | Administration