1. Mobil ilova interfeysini ishlab chiqish Mobil ilovalarni loyihalash jarayoni Mobil ilova qurilmalari shablonlari haqida

2. Mobil ilovalarni loyihalash jarayoni: Biz nimani qurmoqdami
Menda til o‘rganish ilovasi g‘oyasi bor edi, bu foydalanuvchiga har kuni so‘zni yodlab olguncha ularga bir so‘zni (yoki bir nechta so‘zlarni) ko‘rsatish orqali ma’lum tilda o‘z lug‘atini kengaytirish imkonini beradi.
Biz ilovani "Fransuzcha so'z bir kun" deb nomlaymiz. Maqsad, oxir-oqibat bir nechta tillar uchun ushbu ilovalarning seriyasini chiqarishdir, lekin biz frantsuz tilidan boshlaymiz, chunki men uni bir muncha vaqt o'rganyapman.
Ishni boshlashdan oldin, biz nimani loyihalashimizni bilishimiz kerak. Biz qalam va qog'ozni olib tashlashimiz yoki Sketch-ni yoqishimiz shart emas. Biz shunchaki ilovaning umumiy funktsiyalari haqida fikr yuritishimiz kerak. Bir oz o'ylab ko'rganimdan so'ng, men aniqlagan asosiy funktsiyalar:
Bildirishnomalar - Biz yangi so'zlarni bildirishnoma orqali foydalanuvchiga yuborishimiz kerak, shuning uchun foydalanuvchidan push bildirishnomalariga ruxsat berishni so'raydigan ishga tushirish ekrani kerak bo'ladi.
Asosiy ekran - foydalanuvchi bir nechta turli til darslarini sotib olishi kerak, shuning uchun bizga ushbu darslarni sotib olishi va mavjudlarini faollashtirishi mumkin bo'lgan asosiy ekran kerak bo'ladi.
Jarayonni kuzatish - foydalanuvchi hozirda faollashtirilgan har bir darsning borishini ko'rishi kerak.
Darsni ko'rish - foydalanuvchi berilgan darsda hozirgacha o'rgangan so'zlar ro'yxatini ko'rishi kerak.
So'zni ko'rish - foydalanuvchi allaqachon o'rgangan so'zlarni ko'rish imkoniyatiga ega bo'lishi kerak. Bu ta'rif, tasvir havolasi, nutq qismi, audio talaffuz va konjugatsiyaga havolani o'z ichiga olishi kerak.
Albatta, bu ilovada ko'p narsa bo'ladi, lekin bu ro'yxat ushbu qo'llanmaning ko'lami uchun yaxshi ishlaydi.
Kris Messina, Uber kompaniyasining dasturchilar tajribasi bo'yicha yetakchisi bizga mobil qurilmani loyihalashda o'zining eng yaxshi maslahatini beradi:
“Bugungi kunlarda foydalanuvchi xatti-harakati va kontekstini tushunish juda muhim. Odamlar band, ular yo'lda va minglab narsalari bor.
Odamlar bilan qayerda uchrashishni koʻrish va xizmatingizni bir vaqtning oʻzida bajarish oʻrniga, vaqt oʻtishi bilan birlashtirilishi mumkin boʻlgan kichikroq mikro vazifalarga ajratish uchun yetkazib berish kanali sifatida faqat xabar almashishdan foydalangan holda ilova yoki xizmatingizni prototipini yaratishni oʻylab koʻring.”
Xonimlardan Jorji Bottomli UX bizga mobil ilovangizni sinab ko'rishda kontekstning ahamiyati haqida gapirib berdi.
“Mobil qurilmani sinovdan o'tkazishda foydalanuvchining tabiiy muhitida bo'lishi juda muhim. Buni hisobga olmaslik va foydalanuvchilarning stolda yoki g'ayritabiiy kontekstda bo'lishi juda oson.Sizning foydalanuvchilaringiz odatda o'zlarining mobil qurilmalari bilan qayerda shug'ullanishlari haqida o'ylab ko'ring va buni takrorlashga harakat qiling.Misol uchun; stulda (avtobusda sayohat qilishni o'ylab ko'ring) divanda (televizor ko'rayotganda uyda o'ylash) xonani aylanib chiqish (ular yo'lda). Bu yaratayotgan narsangiz haqida yaxshiroq fikr-mulohaza olish imkonini beradi”.

3. Uni qanday quramiz?

Boshlash uchun biz qalam va qog'ozdan foydalanamiz va ushbu turli xil ilovalar funktsiyalarini chizishni boshlaymiz. Ushbu chizmalar tugallangandan so'ng, biz Sketch-ga o'tamiz va ularga jon berishni boshlaymiz.
Sketch - bu ish uchun mukammal vosita, chunki u foydalanuvchi interfeyslarini loyihalash uchun yaratilgan. Shuningdek, unda mobil dizaynlaringizni sozlash va ularni qurilmangizda ko‘rib chiqishga yordam beradigan ajoyib o‘rnatilgan vositalar mavjud. Bu haqda keyinroq.
Agar siz boshqa vositalarni o'rganmoqchi bo'lsangiz, bu erda UI dizaynerlari uchun 12 ta mobil ilovalarni loyihalash vositalari.
Bizning ilovamizning eskizini chizish
Bizga kerak bo'lgan birinchi narsa oddiy oqim diagrammasi bo'lib, biz foydalanuvchi dasturiy ta'minot orqali qanday yo'l tutishini tushunishimiz mumkin.
Bu bizning ilovamizning turli ekranlari bir-biri bilan qanday o'zaro ta'sir qilishini tushunishga yordam beradi. Keyin har bir alohida ekranning eskizini chizish ustida ishlaymiz
Shu yerdan biz Sketch-ni ishga tushirishga va dizaynlarimizni hayotga tatbiq etishga tayyormiz!
Bortga kirish
Biz qilishimiz kerak bo'lgan birinchi narsa - foydalanuvchi bizga push-bildirishnomalarni yuborishga ruxsat berishiga ishonch hosil qilishdir. Shunday qilib, biz ularga har kuni yangi so'zlarni taqdim etamiz.
Keling, ushbu foydalanuvchi interfeysi dizayn tamoyillarini ishga tushirishni boshlaylik. Bortga kirish uchun o'zini ish kabi his qilish oson, shuning uchun biz jarayon imkon qadar sodda va engil bo'lishiga ishonch hosil qilishni xohlaymiz.
Boshqa ilovalar foydalanuvchidan push-bildirishnomalarni yoqishni so‘rashini ko‘rish uchun ba’zi bir ishga tushirishni tezda ko‘rib chiqdim. Men Foursquare bu yerda juda aqlli ish qilayotganini payqadim.
Ba'zan foydalanuvchilar bildirishnomalarni yoqish yoki o'z joylashuvidan foydalanishni so'rashganda, ehtiyot bo'lishlari mumkin. Shunday qilib, Foursquare ko'rsatmalar ustiga bildirishnoma pufakchasini qo'yadi va ular nima uchun bildirishnomani yoqish kerakligini tushuntiradi.
Menga foydalanuvchiga push-bildirishnomalarni qabul qilishdan oldin qo'shimcha ma'lumot berish g'oyasi juda yoqadi. Bu foydalanuvchilarni nima uchun menga bu ruxsatlarni berayotganini tushunishlariga ishonch hosil qilish orqali ularni tsiklda ushlab turishning umumiy dizayn printsipiga mos keladi.
Yangi foydalanuvchi ilovani ishga tushirganda, biz ularga ko'rsatadigan birinchi narsa - bu ularga bildirishnomalarni yuborish uchun nima uchun ruxsat kerakligini tushuntiradigan ekran.
Keling, qo'llarimizni iflos qilishni boshlaylik. Biz qilishimiz kerak bo'lgan birinchi narsa - bu ekranning tezkor eskizini chizish. Qalam va qog'ozdan boshlash juda muhim, chunki vosita juda kechirimli. Haqiqiy piksellarni itarishdan oldin ushbu bosqichda qancha ko'p narsani aniqlasangiz, shuncha yaxshi bo'ladi.
Endi bizda dizaynni boshlash uchun yaxshi asos bor. Bu erda biz Sketch-ni ishga tushiramiz, Artboard vositasini (A) tanlaymiz va o'ngdagi inspektor panelida iPhone 6 oldindan o'rnatilganidan foydalanamiz. Holat paneli kabi umumiy iOS elementlarini qo‘shish uchun biz Fayl >> Shablondan yangi >> iOS UI dizayniga o‘tamiz. Ushbu fayl sizga tez-tez kerak bo'ladigan barcha umumiy iOS elementlarini o'z ichiga oladi.
Endi dizaynni boshlaylik!
Foydalanuvchi “Bildirishnomalarni yoqish” tugmasini bosganida, biz ushbu mahalliy ruxsat dialog oynasini ishga tushiramiz:
Markos Gutierrez, 99designs Europe boshqaruvchi direktori bizga mobil ilovalar uchun dizayn bo'yicha o'zining asosiy fikrlarini aytdi:
“Biznes egalari mobil aloqaga ega bo‘lish muhimligini bilishadi va biz saytimizda ilova dizaynerlarining talabi qanday ortib borayotganini ko‘rdik.
2015-yilda mobil qurilmalardan foydalanish boshqa qurilmalardan foydalanishni ortda qoldirdi. Bundan tashqari, Google mobildan foydalanish imkoniyatidan daraja sifatida foydalanishni boshladi, shuning uchun organik qidiruv trafigining oʻz biznesi uchun asosiy trafik manbai boʻlsa, dizaynerlar birinchi navbatda mobil aloqaga ega boʻlishi kerak
Yangi mijozni hayratda qoldirish uchun dizaynerlar o'z mijozlari uchun barcha ommaviy axborot vositalarida samarali va izchil brendingni ta'minlaydigan tashqi ko'rinish va ovozni o'z ichiga olgan brend uslubi qo'llanmasini yaratishi muhim. Bu yanada samarali marketing garoviga olib keladi va ularning mijozlari uchun yanada yagona brend xabari.
Birinchi qadam, joriy dizayn tendentsiyalari (masalan, tekis dizayn, soddalik va h.k.) asosida yangilanishga muhtojligini aniqlash uchun ularning aktivlarini baholashdan iborat. Ilova dizayneri sifatida dizayn va funksionallik o'rtasidagi to'g'ri muvozanat muhimligini unutmang."
Bosh ekran
Foydalanuvchi push-bildirishnomalarni qabul qilgandan so‘ng, biz ularni bevosita ularning bosh ekraniga yuboramiz. Bu ularga asosiy ma'lumot berish va ilovaning ba'zi mexanikasini tushuntirish uchun ajoyib vaqt bo'lardi, ammo biz buni boshqa kunga saqlaymiz.
Rostini aytsam, agar biz umumiy foydalanuvchi interfeysi dizayn tamoyillariga amal qilsak, bizga umuman ko'rsatmalar kerak bo'lmasligi mumkin. Ilova qo'lni ortiqcha ushlab turmasdan tushunish uchun etarlicha intuitiv bo'lishi kerak.
Asosiy ekranda ko'rsatmoqchi bo'lgan asosiy ma'lumotlar:
Biz o'yinni o'zgartirish elementini xohlaymiz, shuning uchun biz ularning statistikasini asosiy ekranning yuqori qismida yaxshi va katta ko'rsatamiz.
Statistikalar ostida biz ularning joriy darslari, taraqqiyoti va bloklangan darslarini ko'rsatamiz. Biz bu darslarga kirish mumkin emasligiga ishonch hosil qilishni istaymiz. Bu foydalanuvchini har safar bosh ekranga tashrif buyurganida ularni qulfdan chiqarishga undaydi.
Men ilova juda vizual bo'lishini xohlayman, shuning uchun men har bir sahifaga chiroyli suratlarni qo'shishga harakat qilaman.Bu asosiy ekran bo'lgani uchun foydalanuvchi bu yerdan istalgan joyga borishi kerak. Boshlash uchun ilovamiz ba'zi asosiy foydalanuvchi sozlamalarini taklif qiladi, shuning uchun biz ushbu bosh ekrandan sozlamalar ekraniga o'tish yo'li borligiga ishonch hosil qilamiz.Endi biz nima loyihalashimiz kerakligini bilganimizdan so'ng, biz juda ko'p ish qilmasdan, bu elementlarni vizual tarzda qanday joylashtirishni xohlayotganimiz haqida tasavvurga ega bo'lishimiz uchun tezkor eskizni yaratamiz
Endi biz Sketch-ni ishga tushirish va bosh ekranimiz elementlarini loyihalashni boshlash uchun ajoyib holatdamiz. Ishlarning aksariyati allaqachon bajarilgan, shuning uchun har bir elementni tegishli joyga qo'yish va rang-baranglikni qo'shish kifoya.Bosh ekran tugallangandan so‘ng, foydalanuvchi endi o‘zining umumiy taraqqiyotini, shuningdek, har bir alohida darsning borishini kuzatish, yangi darslarni sotib olish va foydalanuvchi sozlamalarini o‘zgartirish imkoniyatiga ega. Yaxshi!Jerri Kao, UXPin kompaniyasining UX kontenti strategisti biz bilan mobil ilova dizaynidagi kontentning ahamiyati haqida gapirdi:“Kontent dizaynda har doim muhim, ammo ekraningizdagi koʻchmas mulk qisqargan sari uning ahamiyati ortadi. Mobil ilovani yaratishda imkon qadar tezroq haqiqiy tarkibdan foydalaning. Qo'pol tarkib juda yaxshi - maqsad haqiqiy bo'shliq cheklovlari bilan dizayn qilishdir. Agar siz lorem ipsum-ga juda ko'p ishonsangiz, haqiqiy tarkibga kirganingizdan so'ng interfeysni buzishingiz mumkin.