Mobil interfeysni loyihalashtirishning 10 tamoyili

Muallif: Randy Alexander
Yaratilish Sanasi: 25 Aprel 2021
Yangilanish Sanasi: 16 Mayl 2024
Anonim
Mobil interfeysni loyihalashtirishning 10 tamoyili - Ijodiy
Mobil interfeysni loyihalashtirishning 10 tamoyili - Ijodiy

Tarkib

Qanday o'lchashingizdan qat'iy nazar, mobil ulkan va o'sib bormoqda. Bulutli hisoblash, hamma joyda keng polosali ulanish va arzon mobil qurilmalarning yaqinlashuvi jamiyatlarimizning barcha jabhalarini o'zgartira boshladi. Tahlilchilarning taxmin qilishicha, 2015 yilga kelib mobil telefonlar Internetga kirishning asosiy vositasi sifatida statsionar kompyuterlarni ortda qoldiradi.

Ushbu tez o'zgarib turadigan landshaft bilan hamqadam bo'lish uchun dizaynerlar va ishlab chiquvchilar - va ular bilan ishlaydigan odamlar mobil telefon haqida loyihaning asosiy maqsadi sifatida o'ylashni boshlashlari kerak; ish stoliga yo'naltirilgan loyihaga keyinroq o'ylab topilgan narsa emas.

Mobil aloqa boshqacha

Garchi ular tez-tez hisoblash moslamalari sifatida birlashtirilgan bo'lsa-da, smartfonlar va statsionar kompyuterlar bir-biridan juda farq qiladi: kichik ekran va katta ekran, intervalgacha va ishonchli ulanish, past va yuqori tarmoqli kengligi, batareyadan quvvat oladigan va ulangan va hokazo. Ushbu ro'yxatni hisobga olgan holda, mobil qurilmalarni "haqiqiy" kompyuterlarning kam quvvatli versiyalari deb o'ylash istagi paydo bo'lishi mumkin. Ammo bu xato bo'ladi.


Aslida, buning teskari tomoni: smartfonlar aslida ko'p jihatdan ish stollariga qaraganda kuchliroq. Ular juda shaxsiy, har doim yonida, doimo biz bilan, odatda bog'langan va to'g'ridan-to'g'ri murojaat qilishlari mumkin. Bundan tashqari, ular joylashuvni, harakatni, tezlashishni, yo'nalishni, yaqinlikni, atrof-muhit sharoitlarini va boshqalarni aniqlay oladigan kuchli sensorlar bilan emaklaydilar.

Mobil va ish stoli hisoblash moslamalari o'rtasidagi ko'pgina farqlarni hisobga olsak, mobil telefonlarni loyihalashtirish ish stoli dizaynidan farqli ekanligi shubhasiz. Men o'zimning ustaxonalarimdan ish stoli dizayni va rivojlanishini yaxshi biladigan odamlarga mobil platformaning noyob kuchini ishga solishda yordam beradigan mobil interfeyslarni loyihalashtirishning 10 tamoyillari ro'yxatini tuzdim.

01. Mobil fikrlash

Mobil va ish stoli o'rtasidagi farqlar sababli, boshlashdan oldin o'zingizni mobil tafakkurga qo'shishingiz kerak.

  • Diqqatingizni qarating: Ko'proq yaxshi emas. Xususiyatlaringizni shafqatsiz tahrir qiling. Siz bor narsalarni tashlab ketishga to'g'ri keladi.


  • Noyob bo'ling: Ilovangiz nima bilan ajralib turishini bilib oling va uni kengaytiring. Mobil ilovalar dengizida ko'plab baliqlar mavjud. Agar sizning ilovangizda alohida narsa bo'lmasa, nima uchun uni kimdir tanlaydi?
  • Maftun bo'ling: Mobil qurilmalar juda shaxsiydir. Ular bizning doimiy hamrohlarimiz. Do'stona, ishonchli va qiziqarli dasturlardan foydalanish zavq bag'ishlaydi va odamlar tajribaga juda qo'shilib ketishadi.
  • E'tiborli bo'ling: Ilova ishlab chiquvchilari ko'pincha qiziqarli narsalar, dasturning o'zlarining aqliy modeli yoki shaxsiy biznes maqsadlariga e'tibor berishadi. Bular boshlash uchun yaxshi joylardir, lekin agar siz hech qachon jozibali tajriba yaratishga umid qilsangiz, o'zingizni foydalanuvchilaringiz o'rniga qo'yishingiz kerak.

02. Mobil kontekstlar

Bir qo'lida sumka, ikkinchisida smartfon bo'lgan aeroport orqali gavjum professional poyga tasviri aksariyat odamlar mobil kompyuterlar konteksti haqida o'ylayotganda tasavvur qilishadi. Bu, albatta, bitta kontekst, ammo bu yagona emas. O'zimizni foydalanuvchilarimiz o'rniga qo'yishni boshlash uchun biz uchta asosiy mobil kontekstni ko'rib chiqishimiz kerak: zerikkan, band va yo'qolgan.


  • Zerikkan: Uyda divanda o'zlarining smartfonlaridan foydalanadiganlar juda ko'p. Shu nuqtai nazardan, uzoqroq foydalanish seansiga yo'naltirilgan ajoyib va ​​yoqimli tajribalar juda mos keladi. Shunday bo'lsa-da, uzilishlar ehtimoli katta, shuning uchun sizning ilovangiz foydalanuvchingiz to'xtagan joyni tanlashi mumkin. Misollar: Facebook, Twitter, Angry Birds, veb-brauzer.
  • Band: Bu "aeroportda ishlaydigan bo'lsa ham" ssenariysi. Mikroto'lqinli vazifalarni tez va ishonchli tarzda bir qo'lingiz bilan notinch muhitda bajarish qobiliyati juda muhimdir. Shuni esda tutingki, foydalanuvchi shu nuqtai nazardan tunnel ko'rinishini oladi, shuning uchun ulkan maqsadlar va qalin dizayn muhim ahamiyatga ega. Misollar: TripIt, elektron pochta, taqvim, bank ishi.
  • Yo'qotilgan: Tranzitda, notanish muhitda yoki tanish muhitda bo'lgan, ammo atrofdagi noma'lum narsalarga qiziqqan foydalanuvchilar yo'qolgan toifaga kiradi. Shu nuqtai nazardan, chizilgan ulanish va batareyaning ishlash muddati katta tashvish tug'diradi, shuning uchun siz oflayn rejimda biron bir darajadagi yordamni taklif qilishingiz va geolokatsiya va boshqa batareyalar cho'chqalarini ishlatishda tejashingiz kerak. Odatiy misollar: Xaritalar, Yelp, Foursquare.

03. Global ko'rsatmalar

Turli xil ilovalar turli xil yondashuvlar, dizaynlar va texnikalarni talab qiladi. Ya'ni, cho'ntak o'lchamidagi sensorli displeyning o'ziga xos xususiyati bir nechta global ko'rsatmalarni taklif qiladi; ya'ni har doim muhim bo'lgan narsalar.

  • Javob berish: Javob berish juda muhimdir. Buni etarlicha ta'kidlay olmayman. Agar sizning foydalanuvchingiz biror narsa qilsa, sizning ilovangiz darhol o'zaro aloqani tan olishi kerak. E'tibor bering, javob berish tezligi bir xil emas. Muayyan operatsiyalar vaqt talab qilsa yaxshi bo'ladi. Faqat foydalanuvchi bu haqda ishlayotganingizni bildirganingizga ishonch hosil qiling.
  • Polsha: Polsha juda qimmatlidir. Smartfonlarga bo'lgan munosabatimizning "doimiy hamrohi" xarakteri tufayli, kichik detallarni mukammal qilishga katta e'tibor berish e'tiborga olinadi va qadrlanadi. Menimcha, bu mashinaning "yaroqliligi va tugashi" kabi. Dvigatel kuchli va kuzovning uslubi ajoyib bo'lishi mumkin, ammo agar shosseda shovqin ko'p bo'lsa yoki shovqin-suron bo'lsa, harakatlanish shahar aholisi uchun yomonlasha boshlaydi.
  • Bosh barmoqlar: Sensorli ekran interfeyslari paydo bo'lishi bilan, har doim har doim "barmoq bu" va "bu barmoq" haqida gapirishadi. Aslida, bosh barmog'i biz nimani loyihalashtirishimiz kerak. Agar foydalanuvchi o'z smartfoni bilan ikki qo'li bilan aloqa qilmasa, ekranda barmoq olish deyarli mumkin emas. Va hatto ikkita qo'lni ushlab turganda ham, u ikki barmog'i bilan yozishi mumkin. Bosh barmog'i sukut bo'yicha.
  • Maqsadlar: O'ng barmog'ingizga qarang. Maslahat emas, balki yuz - bu sizning telefoningiz ekrani bilan aloqa qiladigan qism. Meniki - bu shisha qopqoqning taxminiy kattaligi va shakli. Ko'p narsalar uchun juda yaxshi, ammo mening smartfonimning mayda hududlarini nishonga olish to'g'risida gap ketganda. Bosh barmoq bilan do'st interfeys elementlari uchun sehrli raqam 44 pikselga o'xshaydi. Istisnolar juda ko'p, ammo bu yaxshi - ahem qoidalari. Shuningdek, siz maqsadlaringizni bir-biriga nisbatan qaerga qo'yganingizni bilishingiz kerak. Masalan, Backspace tugmachasini SMS-ilovaga to'g'ridan-to'g'ri Yuborish tugmachasiga qo'shib qo'yish noto'g'ri fikr bo'ladi.
  • Tarkib: Sensorli interfeyslarning inqilobi shundaki, ular bizning tarkibimiz bilan bevosita aloqada bo'lishimizga imkon beradi. Bu abstraktsiyalarni (masalan, sichqoncha va trekpad) olib tashlaydi va bizning miyamiz qanday ulanganiga ko'proq mos keladi. Buning ahamiyatini bilish uchun uzoqdan qidirishim shart emas: mening ikki yoshli bolam iPad-ni qiyinchiliksiz boshqarishi mumkin, ammo noutbuk u uchun sir. Iloji boricha interfeys xromini (tugmachalar, yorliq satrlari, belgilash katakchalari, slayderlar va boshqalarni) minimallashtirish va kontentingizni oldinga va markazga qo'yish orqali sensorli interfeysning intuitiv kuchidan foydalaning.

  • Boshqaruv elementlari: Boshqaruv elementlarini qo'shishingiz kerak bo'lsa, ularni ekranning pastki qismiga qo'yishga harakat qiling (boshqacha aytganda tarkib ostida). Qo'shish mashinasi, hammom shkalasi yoki hatto kompyuter haqida o'ylab ko'ring - boshqaruv elementlari displey ostida. Agar ular bo'lmaganida, biz ulardan foydalanishda tarkib bilan nima sodir bo'lishini ko'ra olmagan bo'lar edik, bu haqiqiy dizayn dizaynini an'anaviy veb yoki ish stoli dasturlari bilan taqqoslang, bu erda navigatsiya va menyu satrlari deyarli har doim tepa. Bu sichqoncha kontekstida mantiqan to'g'ri keladi, chunki ko'rsatgich deyarli ko'rinmas. Qo'lingizning uchida joylashgan "go'sht ko'rsatgichi" bilan shunday emas.
  • O'tkazish: O'tkazishdan saqlaning. Sizga ishontirib aytamanki, "katlam ostida" mobil telefonlar uchun mavjud. Bundan tashqari, aylanmaydigan ekranga ega bo'lish, aylanuvchi ko'rinishga qaraganda ancha mustahkam va ishonchli "tuyg'u" ga ega, chunki bu taxmin qilish mumkin. Albatta, ba'zi ekranlar aylanishi kerak, ammo iloji boricha undan qochish yaxshidir. Agar siz kashfiyot muammosi bo'lishi mumkin deb hisoblasangiz, aylantiriladigan tarkibni asl holatiga o'zgartirib, ko'rinmaydigan joyda ko'proq tarkib borligini aniq, ammo samarali ko'rsatishingiz mumkin.

04. Navigatsiya modellari

Mobil ilovalar uchun juda ko'p yangi navigatsiya modellari mavjud (Path-ning radial burchakli navlari yodda), ammo agar siz keng tarqalgan navigatsiya modellaridan birini ishlatmoqchi bo'lsangiz, ilova uchun eng ma'qulini tanlang.

  • Yo'q: bitta ekranli yordamchi dasturlar (masalan, iPhone-dagi ob-havo ilovasi)
  • Yorliqlar paneli: Uchdan oltitagacha alohida tarkib sohalari (masalan, iPhone uchun Twitter)
  • Tafsilotlar: Kontent iyerarxiyasi ro'yxati va tafsilotlari (masalan, iPhone-dagi Sozlamalar ilovasi)

05. Foydalanuvchi kiritish

Yozish hatto eng yaxshi qurilmalarda ham hidlanib qoladi, shuning uchun siz foydalanuvchilaringizga buni engillashtirish uchun qo'lingizdan kelganini qilishingiz kerak. Masalan:

  • Ommabop smartfonlarda (matn, raqam, elektron pochta manzili, URL va boshqalar) o'nga yaqin klaviatura o'zgarishi mavjud. Kirish maydonlarining har birini ko'rib chiqing va ma'lumotlarni kiritish uchun eng foydali bo'lgan klaviaturani ko'rsating.
  • Avtomatik tuzatish shunchalik quvnoq bo'ladiki, unga bag'ishlangan veb-sayt mavjud. Har bir kiritilgan maydonni ko'rib chiqing va qaysi avtomatik kirish parametrlarini yoqishingiz kerakligini aniqlang (masalan, avtomatik to'g'rilash, avtomatik kapitalizatsiya va avtomatik to'ldirish).
  • Agar sizning dasturingiz ko'p yozishni taklif qilsa, siz men kabi semiz barmoqlar uchun landshaft yo'nalishini qo'llab-quvvatlashingiz kerak.

06. imo-ishoralar

Zamonaviy sensorli interfeyslarning o'ziga xos jihatlaridan biri shundaki, ular imo-ishora asosida foydalanuvchi o'zaro ta'sirini qo'llab-quvvatlaydi. Imo-ishoralar qanchalik salqin bo'lsa ham, bir nechta narsani yodda tutishingiz kerak:

  • Ko'rinmas: Imo-ishoralar ko'rinmas, shuning uchun kashfiyot masalasi. Ularning mavjudligini foydalanuvchiga qanday ochib berishni hal qilishingiz kerak. Men ko'rgan eng aqlli yondashuv Apple-ning chakana savdo do'konlarida o'rnatilgan reklama planshetlarida. Sahifa birinchi marta yuklanganda, har qanday aylantiriladigan joylar tezda "teskari aylantirish" ni asl holatiga o'tkazadi. Bu zudlik bilan foydalanuvchidan qaysi joylar siljishi mumkinligini aniq ko'rsatmasdan surish yoki siltash harakatini taklif qiladi.
  • Ikki qo'l: Multi-touch imo-ishoralari ikki qo'lda ishlashni talab qiladi. Buni, ayniqsa iOS-dagi mahalliy Xaritalar ilovasida yaqqol sezmoqdaman. Chet elda bir qo'lida qahva, bir qo'lida telefoni bilan sayohat qilsam, bu bezovta qiluvchi cheklov. Android ushbu muammoni xaritada kattalashtirish / kichraytirish tugmachalarini qo'shish orqali hal qiladi (demak, siz kofeingizni London atrofida tuyoqlash paytida zavqlanishni davom ettirishingiz mumkin).
  • Yaxshi: Ko'p hollarda, imo-ishoralarni men "yaxshi" deb bilaman, ammo tanqidiy emas. Klaviatura yorliqlari kabi bir qator - quvvat foydalanuvchilari ularni yaxshi ko'radilar, ammo ko'pchilik odamlar ular borligini bilishmaydi.
  • O'zgartirish yo'q: Imo-ishoralar uchun keng tarqalgan so'z birikmasi hali mavjud emas, shuning uchun ko'pgina ilovalar bir barmoq bilan ishlatilishi mumkin bo'lgan ko'rinadigan boshqaruv elementlarini o'tkazib yuborishlari juda tez orada.

07. Yo'nalish

  • Portret eng mashhur yo'nalish hisoblanadi, shuning uchun avval ushbu holat uchun optimallashtiring.
  • Agar sizning dasturingiz ko'p yozishni taklif qilsa, odamlar kattaroq klaviaturadan foydalanishlari uchun manzara yo'nalishini qo'llab-quvvatlashingiz kerak.
  • Yo'nalish kutilmaganda o'zgarganda, bu yaxshi ... yo'naltirilgan emas. Agar ilova uzoq vaqt davomida ishlatiladi deb o'ylayotgan bo'lsangiz (masalan, Kindle Reader dasturi), ilova ichiga yo'nalish blokirovkasini qo'shishni o'ylang.

08. Aloqa

  • Fikr-mulohaza bildiring: Har qanday o'zaro ta'sir uchun zudlik bilan javob qaytaring. Agar shunday qilmasangiz, foydalanuvchi dastur muzlab qolganmi yoki urmoqchi bo'lgan nishonni o'tkazib yubormaganmi degan savol tug'iladi. Fikr-mulohazalar teginish (masalan, Android 'thump' tebranishi kabi) yoki vizual (masalan, bosilgan tugmani ta'kidlash) bo'lishi mumkin. Agar foydalanuvchi uzoq vaqt talab qilinadigan harakatni talab qilsa, siz ularning so'rovini olganingizni va shu ustida ishlayotganingizni bildirish uchun spinner yoki harakatlanish satrini ko'rsating.
  • Modal ogohlantirishlar: Modal ogohlantirishlar juda zo'r va foydalanuvchi oqimiga zo'ravonlik qiladi, shuning uchun siz ularni faqat biron bir narsa noto'g'ri bo'lsa ishlatishingiz kerak. Shunda ham, tilni tinchlantiruvchi va do'stona munosabatda bo'lish orqali intensivlikni kamaytirishga harakat qiling. "FYI" tipidagi ma'lumot uchun modal ogohlantirishlardan foydalanmaslikni unutmang.
  • Tasdiqlar: Agar foydalanuvchidan biron bir amalni tasdiqlashini so'rash kerak bo'lsa, modal tasdiqlash oynasini ko'rsatish maqbul bo'ladi (masalan, "Ushbu qoralamani o'chirishni xohlaysizmi?" Kabi). Tasdiqlashlar ogohlantirishlarga qaraganda kamroq intruzivdir, chunki ular foydalanuvchi harakatlariga javoban, shuning uchun kontekstda va ehtimol kutilgan. Tasodifiy buzg'unchilik harakatlarining oldini olishga yordam beradigan "xavfsiz" tanlovni dialog oynasidagi standart tugmachani bajarganingizga ishonch hosil qiling.


09. Ishga tushirish

Agar foydalanuvchi avval ishlatib bo'lgandan keyin sizning ilovangizga qaytganda, siz foydalanuvchi to'xtagan joyda operatsiyalarni davom ettirishingiz kerak. Bu tezlik illyuziyasini keltirib chiqaradi va umumiy javobgarlikni his qiladi.

Iloji bo'lsa, ilova birinchi yuklanayotganda ko'rsatiladigan ekran ekrani sizning ilovangizning "tarkibsiz" tasviri bo'lishi kerak. Interaktiv ko'rinadigan har qanday narsa (masalan, tugmalar, havolalar, piktogramma, tarkib) muvaffaqiyatsiz shovqinlarni taklif qilish orqali umidsizlikni keltirib chiqaradi.

QAYD: Ishga tushirish ekranida brend materiallarini joylashtirish vasvasasiga qarshi turing. Ular foydalanuvchini reklamani ko'rayotgandek his qilishadi va ularni o'tirgani uchun sizni xafa qiladi. Albatta, markali ishga tushirish ekrani bo'sh bo'lganidan uzoqroq davom etmaydi, ammo kechikish hissi qanday bo'lishidan qat'iy nazar mavjud.

10. Birinchi taassurotlar

  • Sizning belgingiz: Sizning ikonangiz boshqa piktogrammalar dengizida e'tibor uchun raqobatlashishi kerak. Bunday holda, badiiy asarga qaraganda ko'proq tashrif qog'ozi deb o'ylang. To'g'ridan-to'g'ri - sizning ilovangiz nima qilayotganini ko'rsating. Kuchli siluetdan foydalaning va matnni minimal darajada saqlang. Jilolangan ikonka sayqallangan dasturni taklif qiladi, shuning uchun uni to'g'ri bajarish uchun jiddiy vaqt va pul sarflash kerak.
  • Birinchi ishga tushirish: Birinchi ishga tushirish - bu make yoki break holati. Agar yangi foydalanuvchi sizning ilovangiz bilan tanishishga urinayotganda chalkashib ketsa yoki hafsalasi pir bo'lsa, uni tez orada qidirib topishadi. Agar sizning ilovangiz murakkab funktsiyalarni taqdim qilsa, siz "maslahatlar va tavsiyalar" bilan qo'shib qo'yishni xohlashingiz mumkin, yoki ehtimol bir necha yo'naltirilgan ekran panellarini qo'shishingiz mumkin. Shunga e'tibor bering emas yaxshi dizayn o'rnini bosuvchi; agar siz o'zingizni juda ko'p yordam matni yaratayotganingizni ko'rsangiz, bu sizning interfeysingiz ishlashga muhtojligini ko'rsatishi mumkin.

Xulosa

Mobil kompyuter mobil aloqada samarali ishlashni istagan veb-dizaynerlar va ishlab chiquvchilar uchun ajoyib imkoniyatni anglatadi. Ha, o'rganish uchun egri chiziq bor, lekin veb-mutaxassisning ko'p tajribasi, ko'nikmalari va vositalari yaxshi tarjima qilinadi. Tan olish kerakki, mobil aloqa dunyosidagi o'zgarishlar tezligi ba'zida biroz qo'rqinchli bo'lishi mumkin - ammo hay ... hech bo'lmaganda bu zerikarli emas.


Bu sizga yoqdimi? Buni o'qing!

  • Mobil veb-saytni qanday yaratish kerak
  • Ilovani qanday yaratish kerak
  • Sizga hozirda bepul grafik dizayn dasturi mavjud!
  • Bizning sevimli veb-shriftlarimiz - va ular bir tiyinga ham tushmaydi
Baham Ko’Rmoq
Video darsligi: Animatsion HTML5 yarating
Kashf Qilmoq

Video darsligi: Animatsion HTML5 yarating

Internet o'zgarib bormoqda. Endi barcha zamonaviy i h toli va mobil brauzerlar HTML5-ni qo'llab-quvvatlaydi va Adobe mobil brauzerlar uchun Fla h-ni to'xtatdi, qay i etkazib beri h u ulini...
Xaitment orqali PlayStation 4 o'yinlariga keladigan aqlli AI
Kashf Qilmoq

Xaitment orqali PlayStation 4 o'yinlariga keladigan aqlli AI

xaitment-ning P 4-ni qo'llab-quvvatla hi huni anglatadiki, keyingi avlod ony platforma ida i hlaydigan o'yin i hlab chiquvchilari darhol o'zlarining arlavhalariga aqlli AI qo' hi hni b...
Brendni prefiksdan da'vogarlardan himoya qiling
Kashf Qilmoq

Brendni prefiksdan da'vogarlardan himoya qiling

Har qanday bizne ning eng qimmat boyligi uning brendi ekanligi haqida bah la hi h mumkin edi. Marketing bo'limlari puxta i hlab chiqilgan reklama kampaniyalarini yarati hda uyqudan mahrum bo'l...