UI-dizayndagi geshtalt tamoyillari misollar bilan
Asoslar3 daqInnovialabs tahririyati
Qisqacha
Geshtalt tamoyillari miya elementlarni masofa, o‘xshashlik, umumiy ramka va yo‘nalish bo‘yicha qanday avtomatik guruhlashini tushuntiradi. UI’da ular foydalanuvchi qo‘shimcha izohsiz nima nima bilan bog‘liqligini va qayerga qarashni tushunishi uchun ishlatiladi.
Geshtalt oddiy so‘zlar bilan
Geshtalt tamoyillari — inson alohida elementlarni bir butunga qanday yig‘ishi haqidagi idrok psixologiyasi kuzatuvlari. Biz har bir tugmani alohida ko‘rib chiqmaymiz, darhol guruhlar, bloklar va bog‘lanishlarni ko‘ramiz. Interfeys bunga yo yordam beradi, yo xalaqit qiladi.
UI-dizaynda oltita tamoyil doimo uchraydi:
| Tamoyil | Mohiyati | Qayerda uchraydi |
|---|---|---|
| Yaqinlik | Yonma-yon turgan narsalar bog‘liq | Formalar, kartochkalar, menyular |
| O‘xshashlik | O‘xshash narsalar bir turga mansub | Havolalar, tugmalar, teglar |
| Yopilish | Miya yetishmayotgan qismni to‘ldiradi | Ikonkalar, karusellar |
| Uzluksizlik | Nigoh chiziq bo‘ylab harakatlanadi | Jadvallar, stepperlar, ro‘yxatlar |
| Figura va fon | Obyektni fondan ajratamiz | Modal oynalar, menyular |
| Umumiy hudud | Umumiy ramka yoki fon birlashtiradi | Kartochkalar, sozlamalar bo‘limlari |
Yaqinlik
Bir-biriga yaqinroq joylashgan elementlar guruh sifatida qabul qilinadi. Bu eng kuchli va eng ko‘p buziladigan tamoyil.
Xato misoli: formada maydon nomi o‘z maydonidan ham, yuqoridagi maydondan ham bir xil masofada turibdi. Foydalanuvchi «Telefon» qaysi maydonga tegishli ekanini tushunmaydi.
Tuzatish: nom va maydon orasidagi masofani «nom + maydon» juftliklari orasidagi masofadan sezilarli kichik qiling. Oddiy qoida: guruh ichidagi bo‘shliq tashqi bo‘shliqdan kichik.
O‘xshashlik
Rangi, shakli yoki o‘lchami bir xil elementlar bir turdagi va bir xil xatti-harakatli deb qabul qilinadi.
Xato misoli: havolalar va oddiy ajratilgan matn bir xil binafsha rangda. Foydalanuvchi matnni bosadi, hech narsa bo‘lmaydi.
Tuzatish: interaktiv elementlar uchun alohida vizual belgini biriktiring va uni bezak uchun ishlatmang. Barcha asosiy tugmalar bir xil ko‘rinishi kerak, ikkinchi darajalilar ham.
Yopilish
Miya tugallanmagan shakllarni to‘ldiradi. Shu sababli bir necha chiziqdan iborat minimalistik ikonkalar ishlaydi.
UI’dagi misol: gorizontal karuselda oxirgi kartochka ekran cheti bilan kesilgan. Foydalanuvchi ro‘yxat davom etishini tushunadi va svayp qiladi.
Xato: kartochkalar ekranga aynan sig‘adi va davomi borligi tushunarsiz. Tuzatish — keyingi kartochkaning bir qismini ko‘rinadigan qoldirish.
Uzluksizlik
Nigoh chiziqlar va tekislashlar bo‘ylab harakatlanadi va bir chiziqdagi elementlar bog‘liq deb kutadi.
Xato misoli: jadvalda sonlar markaz bo‘yicha tekislangan, shuning uchun xonalar «sakraydi» va qiymatlarni solishtirish qiyin.
Tuzatish: sonlarni o‘ng chetga, matnni chap chetga tekislang, yagona setkani saqlang. Stepperlarda ketma-ketlikni ko‘rsatish uchun qadamlarni chiziq bilan bog‘lang.
Figura va fon
Biz har doim asosiy obyektni ostidagi fondan ajratamiz. Chegara noaniq bo‘lsa, interfeys tekis va chalkash ko‘rinadi.
Xato misoli: ochiladigan menyu sahifa bilan bir rangda, soya va chegarasiz. U ostidagi kontent bilan qo‘shilib ketadi.
Tuzatish: soya, chegara yoki fonni qoraytirish qo‘shing. Modal oynalarda qoraytirilgan fon hozir faqat oyna muhimligini bildiradi.
Umumiy hudud
Bitta ramka ichida yoki bitta fonda turgan elementlar, hatto turli xil bo‘lsa ham, guruh sifatida qabul qilinadi.
UI’dagi misol: sozlamalarda har bir bo‘lim alohida kartochka: «Profil», «Bildirishnomalar», «Xavfsizlik».
Xato: hamma narsa atrofida ramka. Har bir element o‘z qutisida bo‘lsa, guruhlash ma’nosini yo‘qotadi, ekran esa shovqinli bo‘lib qoladi. Ko‘pincha ortiqcha chegaralarsiz yaqinlik va bo‘shliqlar yetarli.
Amalda qanday qo‘llash kerak
- Bo‘shliqlardan boshlang: shkala tuzing (masalan, 4, 8, 16, 24, 32) va guruh ichida kichik, guruhlar orasida katta qiymatlarni ishlating.
- Maketni xiralashtirib tekshiring: ko‘zingizni qisib qarang yoki skrinshotni xiralashtiring. Guruhlar va asosiy elementlar matnsiz ham o‘qilishi kerak.
- Bitta vizual belgi — bitta ma’no: havola rangi, tugma shakli, teg uslubi.
- Ramka va fonlarni faqat yaqinlik yetmagan joyda ishlating.