Teginish uchun dizayn

Muallif: Peter Berry

Yaratilish Sanasi: 18 Iyul 2021

Yangilanish Sanasi: 13 Mayl 2024

Video: Детский ЭЛЕКТРОСНЕГОКАТ 2022 обзор Электроснегокат RED SNOW KIDS Детский ЭЛЕКТРИЧЕСКИЙ СНЕГОКАТ РФ

Tarkib

01. Bosh barmoq qoidasi
02. Men, robot
Veb: dastur ichidagi dastur
03. Tabletkalar, o'z burchaklaringizni oling
04. Pastki chiziq
05. Muvaffaqiyatsiz bo'lish uchun juda katta
06. Meni tiqmang
Bu sizga yoqdimi? Buni o'qing!

Ajoyib mobil dizaynlar o'zlarini kichkinagina ekranlarga poyabzal bog'lashdan ko'proq narsani qilishadi: ular bizning barmoqlarimiz va bosh barmoqlarimizga yo'l ochib beradi, bu bizning beg'ubor raqamlarimizga mos kelmaydi. Qo'l interfeyslarining jismoniy xususiyati dizaynerlarni vizual va axborot dizayni konventsiyalaridan tashqari, sanoat dizayni hududiga olib boradi. Sensorli ekranlar bilan bog'liq bo'lgan haqiqiy ergonomika mavjud. Sizning piksellaringiz nafaqat tashqi ko'rinishingiz, balki ularning qo'lingizda qanday his qilishlari.

01. Bosh barmoq qoidasi

Sensorli ekran dizayni qurilmada barmoqlarning tasodifan qayerga kelib tushishini ehtiyotkorlik bilan bilishni talab qiladi. Masalan, bitta qo'lingizda telefonni oling va agar siz telba tirnoqli telefonni ushlab turmasangiz, har doim bosh barmog'ingiz bilan tegizasiz. Telefonlar uchun teginish uchun dizayn bosh barmoqni loyihalashtirishni anglatadi.

Bosh barmog'i ajoyib. Bu bizning bosh barmoqlarimiz, mashhur g'iybatlarga bo'lgan muhabbatimiz bilan bizni hayvonlardan ajratib turadi, ammo ular cheklangan doiraga va moslashuvchanlikka ega. Bosh barmog'i eng katta o'lchamdagi telefonlardan tashqari butun ekranni supurishga qodir bo'lsa-da, ekranning atigi uchdan bir qismi haqiqatan ham qiyin bo'lmagan hududda - ekranning pastki qismida bosh barmog'iga qarama-qarshi tomonda joylashgan.

Ushbu teginish zonasida asosiy urish maqsadlarini joylashtiring. Masalan, telefonni o'ng qo'lida ushlab turganda, bosh barmog'i tabiiy ravishda ekranning pastki chap burchagidagi yoyga tushadi:

Bu asboblar paneli va navigatsiya odatda telefon interfeyslarining pastki chetiga tushishining muhim sababi - biz an'anaviy ekran interfeyslariga odatlanib qolgan narsalarning aksi. Ish stolidagi dasturiy ta'minot konventsiyalari menyularni ekranning yoki oynaning yuqori qismiga qo'yadi va veb-saytlar odatda sahifalarning yuqori qismida asosiy navigatsiyani joylashtiradi. Bizning cheklangan bosh barmog'imiz bu konvensiyani aylantiradi va navigatsiya va asosiy maqsadlar pastga tushadi.

Bosh barmog'ining ekranning pastki tomoni chapga va o'ngga qaraganda muhimroq. Telefonlarimizdan foydalanganda ko'pchiligimiz chap va o'ng qo'llar o'rtasida osongina aylanib chiqamiz. O'ng qo'lli foydalanuvchilar ko'pincha chap qo'llarini yoqtiradilar yoki (masalan, yozishda) chap qo'llariga o'tadilar, chaplar ham xuddi shunday o'ng tomonlarida yuradilar. Foydalanuvchilarning kamtarona ko'pchiligi chap qo'llariga qaraganda bir oz tez-tez o'ng qo'llari bilan yurishsa-da, bu dizaynerlarning ko'nglini olish uchun etarli darajada kuchli tendentsiya emas.

Biroq, ekranning pastki qismidagi bosh barmoq qoidasi qaysi qo'lni ishlatishingizdan qat'iy nazar amal qiladi va bu sizga tegish maqsadlarining vizual iyerarxiyasini qanday tashkil qilish haqida ko'rsatmalar beradi. Tez-tez ishlatib turiladigan tugmalar osongina urish uchun ekranning pastki qismini egallashi kerak, boshqa boshqaruv elementlari esa zarar etkazishi kerak. Masalan, bu iOS-da odatlangan narsa, masalan, tahrirlash tugmachalarini o'ng yuqori qismida, oson ko'rinadigan joyda, ammo tasodifiy o'zgarishlarni amalga oshirish uchun etarli bo'lmagan joyda.

Asosiy boshqaruv elementlarini ekranning pastki qismiga singdirish nafaqat bosh barmog'ining qulayligi, balki barmoqlarning ekranni yashirishi ham oddiy haqiqatdir. Pastki, uchib yuradigan qo'llar tarkibni qamrab olishi ehtimoldan yiroq emas. Tarkibni aniq ko'rinishda saqlash uchun uni o'zingizning ilovangiz boshqaruvidan ustun qo'ying. Bu ko'pchilik jismoniy qurilmalarga tegishli bo'lgan tanish, aql-idrok tartib: iPodlar, kalkulyatorlar, uyali telefonlar, hammom tarozilari, siz buni aytasiz. Tarkib tepada, boshqaruv elementlari pastda.

02. Men, robot

Ushbu yuqori / pastki oddiy qoida Android gadjetlarining pastki qismini quchoqlagan Android-ning "gotta be me" tizim tugmachalari bilan murakkablashadi. (Android 3 "Honeycomb" chiqarilishidan oldin, bu har doim jismoniy tugmalar edi; Android 4 "Ice Cream Sandwich" dan boshlab ular endi virtual tugmachalar edi.) Ushbu tizim bo'ylab tugmalar shu paytgacha tasvirlangan barcha sabablarga ko'ra ekranning pastki qismida joylashgan, ammo ular, shuningdek, ilovalarga xos boshqaruvlar uchun barmoqlarni bezovta qiluvchi raqobatni joriy etishadi. Boshqaruv elementlarini ekranning pastki qismiga qo'shish asboblar panellarini bir-birining ustiga qo'yishni anglatadi; afsuski, teginishdagi xatolar, ayniqsa ekranning pastki qismidagi steklangan boshqaruv elementlari uchun keng tarqalgan. Bosh barmoq katta ko'rinishga ega va ko'rinishni yashirishga moyil bo'lgan tirbandlik zonasida tugmalar to'qnashuvi muqarrar. Masalan, ushbu Android uy ekranining joylashuvi xatolarni taklif qiladi:

Sensorli interfeysda stacking boshqaruvidan doimo qochish kerak, ayniqsa ekranning pastki qismida. Afsuski, bu shuni anglatadiki, Android tugmachalari tizim tugmachalarini siqib qo'ymaslik uchun ekranning yuqori qismida boshqaruv elementlariga ega bo'lishi kerak. Bu juda yaxshi emas: bu navigatsiyani bosh barmoq zonasidan tashqariga chiqaradi va tugmani bosganingizda qo'l butun ekranni qamrab oladi. Ammo bu yog 'barmoqlarining xatolarini taklif qiladigan alternativadan yaxshiroqdir.

Android uchun ilova navigatsiyasi va boshqaruv elementlari yuqoriga ko'tarilishi kerak. Bu iPhone uchun konvensiyaning teskari tomoni, bu erda Home tugmasi Android tugmalari kabi bir xil raqobatni yaratmaydi. Natijada paydo bo'lgan farqni ko'rish uchun Android, chap va iPhone uchun Foursquare dasturini solishtiring:

Veb: dastur ichidagi dastur

Stekka qarshi ko'rsatma mobil qurilmalardagi veb-saytlar uchun shunga o'xshash muammolarni keltirib chiqaradi. Veb-saytlar va veb-ilovalar, albatta, boshqa dastur - brauzer doirasida ishlaydi. Ko'pgina mobil platformalarda brauzerda o'z tugmachalari va boshqaruvlari mavjud bo'lib, ular veb-navigatsiya uchun interfeys to'qnashuvlarini yaratishi mumkin. Bu shuni anglatadiki, veb-saytlar uchun ekranning pastki qismida navigatsiyani "mahkamlash" dan saqlanishingiz kerak, chunki bu veb-saytning asboblar panelini brauzerning ustiga qo'yadi. (Ushbu qo'llanma qulaylik bilan mustahkamlangan: pozitsiya: mobil brauzerlarda CSS-da bir xil darajada qo'llab-quvvatlanmaydi, bu esa asboblar panelini pastga yopishtirishda qiyinchilik tug'diradi.)

Android-dan farqli o'laroq, echim veb-navigatsiyani yuqori qismga emas, aksincha butun sahifaning pastki qismiga o'tkazadi. Chrome brauzeri ba'zi mobil brauzerlarda allaqachon ko'chmas mulkni iste'mol qilayotganligi sababli, siz qilishingiz kerak bo'lgan oxirgi narsa - bu veb-sahifaning yuqori qismini navigatsiya parametrlari bilan bosib, tarkibni yanada ko'proq siqish.

Uning ajoyib kitobida Mobile First, Luqo Vroblevski shunday yozadi: "Juda ko'p mobil veb-tajribalar ... suhbatni kontent o'rniga navigatsiya variantlari ro'yxati bilan boshlang. Vaqt ko'pincha mobil telefonlarda qimmatga tushadi va yuklashlar pul talab qilishi mumkin, shuning uchun odamlarni nima uchun kelganiga tezda etkazing. iloji boricha. "

Veb-tajribalar tarkibga olib kelishi va asosiy navigatsiyani ekranning pastki qismiga cheklashi kerak. Wroblewski bu uchun foydali dizayn namunasini taqdim etadi, uni Ad Age mobil veb-saytida ko'rishingiz mumkin, bu erda barcha navigatsiya ekranning yuqori qismidagi asboblar panelidagi Menyu tugmachasi orqasida joylashgan. Tugmani bosing va butun ekran navigatsiya parametrlari bilan darhol to'ldiriladi. Menyuning ko'rinishi bir zumda va ortiqcha qatlam paydo bo'lganday tuyuladi, lekin aslida bu sahifaning pastki qismidagi navigatsiya uchun langar havola.

Ushbu yondashuv bir nechta afzalliklarga ega, deb yozadi Wroblewski:

"Ushbu dizayn minimal miqdordagi navigatsiya elementlaridan foydalanadi (faqat yuqoridagi bitta havola), odamlarga kontent oxiriga yetganda burilish va o'rganish imkoniyatini beradi, boshqa menyu tarkibini takrorlamaydi va (eng yaxshisi hammasi uchun) ishlash uchun faqat oddiy langar havolasi kerak. To'g'ri: hech qanday chiroyli JavaScript-ni, qo'shimchalarni yoki alohida navigatsiya sahifalarini saqlab qolish kerak emas - faqat sahifaning pastki qismiga bog'langan langar. Bu HTML 0 ga o'xshaydi. "

"Yuqorida tarkib, boshqaruv pastda" oddiy qoida kabi ko'rinadi, ammo ko'rganingizdek, operatsion tizim yoki brauzer ushbu premium ko'chmas mulkni da'vo qilganda dasturlar dizaynerlari uchun turli xil natijalarga ega. Oxir oqibat, u shunday ishlaydi:

IPhone-da ekranning pastki qismiga ilova boshqaruvini qo'ying
Android-da, ilova boshqaruvini ekranning yuqori qismiga qo'ying
Veb uchun navigatsiyani sahifaning pastki qismiga qo'ying (ekranning pastki qismidan farqli o'laroq)

Ammo bu ko'rsatmalar telefonlarga xosdir; kattaroq sensorli ekranlar uchun nima bo'ladi? IPad bilan qoidalar yana o'zgaradi.

03. Tabletkalar, o'z burchaklaringizni oling

Bosh barmoq qoidasi iPad uchun hanuzgacha amal qiladi, faqat bosh barmoq zonasi boshqacha, chunki biz uni boshqacha tutamiz. IPad tutqichi sizning tutishingizga bog'liq. Tik turib, uzoqroq urish uchun ikki qo'lni ishlatishingiz kerak. Stolga o'tirib, ehtimol siz uni bir qo'li bilan qo'llab-quvvatlaysiz va boshqa qo'li bilan urasiz. Kresloga o'tirganingizda, siz uni tizzangizga qo'yib, boshqa qo'lingiz bilan urishga moyil bo'lasiz. Yotgan yoki yonboshlagan holda, siz biron bir narsani qo'lingiz bilan ushlab turasiz, ikkinchisiga urib qo'yasiz.

Ushbu ushlashlarning barchasida barmoqlar qurilmadagi har xil joylarga tushadi va har bir pozitsiya qurilmani har xil masofada ushlab turishiga olib keladi. Masalan, biz iPad-ni tik turgan holda eng yaqin tutamiz, yotayotganda yoki yonboshlaganimizda eng uzoqroq tutamiz.

Ushbu iPad-lar qanchalik xilma-xil bo'lsa, ularning barchasi uchun ikkita narsa to'g'ri keladi. Birinchidan, biz eng yaxshi kaldıraç uchun iPad-ni qurilmaning yuqori qismida ushlab turamiz va demak, bosh barmoqlar ekranning yuqori uchdan bir qismiga, burchaklarga yaqinlashishga moyil. Ikkinchidan, iPad-ning kattaroq ekrani telefon bilan iloji boricha bir qarashda hamma narsani qabul qilishni qiyinlashtiradi. Bosib chiqarish dizaynida bo'lgani kabi, tomoshabinlarning vizual e'tiborlari tabiiy ravishda planshetning yuqori qismiga qaratiladi va dizaynning axborot iyerarxiyasi buni aks ettirishi kerak. IPad-da, boshqacha qilib aytganda, ko'zlar va barmoqlar tabiiy ravishda qurilmaning yuqori qismini egallaydi. (Ba'zida pastki qism umuman ko'rinmaydi. Eng dangasa va ehtimol eng keng tarqalgan pozitsiyalarda - yotish yoki yonboshlash - pastki bezak adyol, kozok va yumshoq qorinlarga g'oyib bo'lishga intiladi.)

Telefonlardan farqli o'laroq, asosiy boshqaruv va tugmalar odatda iPad dasturlarining yuqori qismida bo'lishi kerak. Xususan, ular iPad-ni ushlab turganda, odatda, bosh barmoqlar siljiydigan yuqori burchaklarni tikib qo'yishi kerak. IPad uchun Instapaper va Twitter yaxshi joylashishni namoyish etadi:

Boshqaruvni yuqori markazga qo'yishdan saqlaningammo, bu degani, chunki siz ushbu tugmachalardan foydalanganda sizning qo'lingiz tarkibni qamrab oladi. Boshqaruvlar hech qachon o'zlari ta'sir qilishni maqsad qilgan tarkibdan yuqoriga ko'tarilmasligi kerak, shuning uchun ularni burchaklarga silkitib qo'yish foydali naqshdir. Masalan, Daily for iPad nashri sahifalarini skanerlash uchun yuqori markazda skrubberni taklif qiladi, ammo buni amalga oshirganingizda, qo'l eskizlarni yopib qo'yadi va bu narsa foydalanishni qiyinlashtiradi.

04. Pastki chiziq

Kundalikning noto'g'riligi yuqori burchakdagi ko'rsatmalardagi istisnolarni ochib beradi va nazorat ostiga o'tishi kerak bo'lgan holatlar toifasini ochib beradi. Har doim boshqaruv kontentni namoyish qilsa yoki ta'sir qilsa, ular doimo ushbu tarkib ostida yoki yon tomonida, hech qachon yuqorida ko'rinmasligi kerak. Masalan, Sydney Morning Herald-ning iPad ilovasida ekranning pastki qismidagi barmog'ingizni sahifa indikatori bo'ylab harakatlantirish orqali kunlik nashrdagi barcha maqolalarni tezda skanerlashning yangi usuli mavjud. Ushbu boshqaruv sarlavhalarning baland ro'yxatini ochib berganligi sababli, ushbu boshqaruv elementlarini ekranning pastki qismiga joylashtirish maqsadga muvofiqdir; ularni yuqori qismiga qo'yish sizning boshqaruv elementlariga tegizganingizda sizning qo'lingiz ro'yxatni yopishini anglatadi.

Xo'sh, u tepami yoki pastmi? Mana farq:

IPad-ning yuqori burchaklari navigatsiya tugmachalari va almashish, yoqtirish yoki yo'q qilish kabi harakatlar uchun bitta tegish vositalari uchun juda mos keladi.
IPad dasturlarining pastki qismi yuqoridagi tuvaldagi tarkibni ko'rib chiqadigan yoki oldindan ko'rib chiqadigan boshqaruv elementlari uchun eng yaxshisidir.

Shuning uchun kitoblar yoki jurnallar uchun sahifa eskizlari eng yaxshi qismga joylashtirilgan. Xuddi shunday, agar siz xaritaga sudrab borish uchun diqqatga sazovor joylar palitrasini o'z ichiga olgan xaritalarni yaratish dasturini ishlab chiqayotgan bo'lsangiz, u holda palitra pastki qismga o'tishi kerak, shunda siz xaritangizni doimiy ravishda butun qo'lingiz bilan yopishingiz mumkin.

05. Muvaffaqiyatsiz bo'lish uchun juda katta

Agar siz qurilmani ushlab turishingiz boshqaruv elementlarini belgilab qo'ysa, bu sizning boshqaruvingiz qanchalik kattaligini sizning barmoq o'lchamingiz belgilaydi. Sensorli dizaynerlar maqsadga erishish uchun maqsadlarni juda katta qilishlari kerak.

Maqsadlar haqida gap ketganda qanchalik katta bo'lsa? Xo'sh, barmoq uchi qanday o'lchamda? Bu erda barcha platformalar ko'rsatma beradi, lekin odatdagidek Apple eng ko'p fikr yuritadigan va barcha mobil platformalar uchun eng yaxshi ko'rsatma deb hisoblagan narsamda turib oldi: tegish nishonlarini kamida 44 ball yoki taxminan 1/4 "yoki 7 mm qilib oling. Internet uchun kamida 44 piksellik ko'rsatkich yaxshi ishlaydi.

Ish stoliga odatlanib qolgan dizaynerlar uchun bu katta va o'yinchoq kabi katta tuyg'ularni boshqaradi, lekin shunchaki u bilan o'ynang. Humongous tugmachalarni va ulkan tegish maqsadlarini urish nafaqat oson, balki vaqti-vaqti bilan chalg'itadigan mobil foydalanuvchi uchun ham ko'rish oson.

Barkamol dunyoda barcha maqsadlar kamida 44x44 bo'lishi kerak. Ko'p narsada bo'lgani kabi, ba'zan murosaga kelish zarur. Hatto iPhone-ning standart boshqaruvlari ham vaqti-vaqti bilan 44 pikselli qoidani buzadi.Masalan, klaviaturada tugmachalarning balandligi 44 ball, lekin kengligi atigi 30 ball - xuddi shunday, landshaft ko'rinishida tugmalar kengligi 44 ball, lekin balandligi 38 ball. Apple bu erda juda ko'p tanlovga ega emas; bu ko'rinishga to'liq QWERTY klaviaturasini kiritish juda muhimdir, ammo barcha tugmachalar shunchaki 44 x 44 tugmachalarga mos kelmaydi. Biror narsa berish kerak.

Agar cheklangan joy teginish nishonlariga siqishni qo'ysa, men topgan qoida bu erda eng yaxshi ishlaydi: agar tegish nishonining balandligi yoki balandligi kamida 44 ballni tashkil etsa, boshqa o'lchovni 30 ballgacha siqishingiz mumkin. . Bu degani: har qanday teging maqsadlari uchun amaliy minimal o'lcham 44 x 30 ga teng.

06. Meni tiqmang

Sizning sodiq muallifingiz ko'p yillar davomida g'ayritabiiy yoshlik yillarini Casio kalkulyator soatini bilagiga mahkam bog'lab, 1985 yilda iste'foga chiqarmaguncha o'tkazdi. Muammo shunchaki uning kichik boshqaruvlari yoki mening balo kelajak istiqbolimga ta'sirini kamaytirishda emas edi. Tugmalar bir-biriga juda yaqin edi. Siz beshni maqsad qilgan bo'lardingiz, lekin ikkitasi yoki sakkiztasini o'ylab toping, kim biladi - bu kalkulyatordan ko'ra ko'proq boylik g'ildiragi edi. Tugma kattaligi, boshqacha qilib aytganda, kranning aniqligini aniqlaydigan yagona omil emas; oraliqni ham hisobga olish kerak.

Kichik ekranlarni loyihalashda siz muqarrar ravishda interfeysni to'ldirish orqali ushbu muammo bilan shug'ullanishga intilasiz. "Men ularni biroz yaqinlashtiraman. Ushbu asboblar paneliga yana bitta tugmani qo'shaman." Kalkulyator-soatning gullab-yashnagan davridagi mashhur iborasini keltirish uchun: "Yo'q, ayting".

Tugmalarni bir-biriga qanchalik yaqinlashtirsangiz, ushbu tugmachalar kattaroq bo'lishi kerak. IPhone, Skype va Call Global App uchun bir nechta VoIP qo'ng'iroq dasturlarini ko'rib chiqing. Ikkala klaviatura tugmachalari bir-biriga yaqinlashadi, lekin ular ularni 44x44 minimal darajadan kattaroq qilib qoplashadi. Ularning yaqinligiga qaramay, tugmachalarni bosish oson.

Ikki ilova farq qiladigan joyda, ekranning pastki qismida joylashgan. Ikkala dastur navigatsiya yorlig'i satrining yuqorisida joylashgan tugmachalarni, yuqorida aytib o'tilganidek, hech qachon ideal emas. Ammo bu tugmalar Skype-da juda katta bo'lgani uchun (chapda), muammo yumshatildi. Call Global App-da, yorliq satrining yuqori qismini quchoqlagan tugmachalar juda oriq va ularning yaqinligi xatoliklar ehtimoli borligini anglatadi. Texnik jihatdan ular 44x30 minumumdan kattaroq bo'lishiga qaramay, bo'shliqning etishmasligi va ekranning pastki qismida xatolarga yo'l qo'ymaslik muammolarni keltirib chiqaradi. Tartib kattaroq tugmachalarni yoki ko'proq bo'sh joyni talab qiladi.

Bu asosiy dars: qarama-qarshi bo'lib tuyulishi mumkin bo'lsa-da, kichik ekranli interfeyslarning muvaffaqiyati katta elementlarga, jingalak tugmachalarga va havodagi bo'shliqqa tayanadi. Ekranlar mayda bo'lishi mumkin, ammo bizning barmoqlarimiz (va aksariyat hollarda bizning e'tiborimiz) bunday emas. Yog 'barmoqlarini hisobga olgan holda dizayn qiling.

Josh Klark - bu mobil dizayn strategiyasiga va foydalanuvchi tajribasiga ixtisoslashgan interaktiv dizayner. U Tapworthy: Buyuk iPhone dasturlarini loyihalashtirish muallifi. Josh's Outfit Global Moxie media kompaniyalari, dizaynerlik agentliklari va ijodiy tashkilotlarga teginishga yaroqli mobil ilovalarni yaratishda yordam berish uchun konsalting xizmatlari va treninglarini taklif etadi.