8-amaliy mashg`ulot interfeys turlari. Foydalanuvchi interfeysini yaratish. Ishning maqsadi

variant. Foydalanuvchi interfeysi dizayni bosqichlari bilan tanishib chiqing. Hisobotni chop eting va nazariy qismni himoya qiling.



S akkiz yil davomida Live Typing interfeys dizayniga yondashuvni ishlab chiqdi va uning joriy versiyasini siz bilan baham ko'rishga tayyor. O'qiganingizdan so'ng, siz har qanday ishlab chiqish studiyasining dizaynerlari bilan aloqa o'rnatishingiz mumkin va bu jarayon qanday sur'atda ketayotganini va qanday nFoydalanuvchi interfeysi yoki UI (User Interface) - mahsulotning tashqi ko'rinishi, foydalanuvchi va

dastur o'rtasidagi aloqa usuli. Va interfeys mahsulot pul olib keladimi va tomoshabinlarning hurmati va sevgisidan bahramand bo'ladimi-yo'qligiga ham ta'sir qiladi.
Dizaynning foydalanuvchilar uchun magnit sifatidagi ahamiyatini millionlab foydalanuvchilar bilan ijtimoiy tarmoqlar misolida isbotlash qulay. Kinopoiskning qayta dizayni Runetda rezonansli voqea bo'ldi. Undagi salbiy sharhlarning 96 foizi o'zlari uchun gapiradi: sayt egalari, Yandex kompaniyasi buni foydalanuvchilarning fikrlarini hisobga olmasdan qilishdi.
atijaga erishishingizni bilib olasiz.


Qachon kafel dizayni eng yaxshi g'oya emas Manba: tjournal.ru
Yangi dizayn foydalanuvchilarning e'tiborini Yandex hamkorlari orqali haq evaziga filmlarni tomosha qilish imkoniyatiga qaratdi va bu faqat platforma va hamkorlarning vazifalarini hal qildi. Ammo foydalanuvchilar saytni reytinglar, reytinglar, filmlar ro'yxati, eng yaxshi 250 taligi, bloglar va tomoshabinlar tomonidan yaratilgan barcha narsalar uchun eng muhimi qadrlashdi.
Natijada, yangi sayt to'rt kun davom etdi va Yandex g'azabining bosimi ostida eski dizaynni qaytardi. Yangisi, ishtirokchilarning so'zlariga ko'ra, faqat menejerlarga yoqqan .
2 014-yilda LiveJournal-ning qayta dizayni ham taassurot qoldirmadi. U keraksiz elementlardan yaxshilab tozalandi, lekin umuman olganda, bu ishtiyoqni keltirib chiqarmadi: tipografiya, modulli panjara, moslashuvchan - hamma narsa xom va noqulay ko'rinardi.


2014 yil bosh sahifasi. Eski versiyaga qaytishning iloji yo'q (LiveJournal-ning avvalgi buyukligi davridagi kabi)
LiveJournal va Kinopoisk taqdirini takrorlamoqchimisiz? Biz ushbu maqolani shuning uchun yozgan deb o'ylamaymiz. Mijoz sifatida saytlar va ilovalar dizayni qanday yaratilganligi, ish qaysi bosqichlardan iboratligi va nimani olish kerakligini aniq bilish foydali bo'ladi. Ushbu bosqichlarni nazorat qilish sizning loyihangizni muvaffaqiyatga yaqinlashtiradi.
Shunday qilib, foydalanuvchi interfeysini bosqichma-bosqich ishlab chiqish xususiyatlarini ko'rib chiqamiz.
Dizayn
Ushbu bosqichda siz tasdiqlanishi yoki rad etilishi kerak bo'lgan ko'plab nazariyalar, farazlar va spekulyativ xulosalarni topasiz. Ushbu xulosalar mahsulotning funksionalligi bilan bog'liq bo'lib, "Bu mahsulot nima uchun kerak?", "U kimga kerak?", "Foydalanuvchilar u bilan qanday ishlaydi va muammolarni hal qiladi?" va "U o'z egalariga qanday daromad keltiradi?".
Dizaynga vaqt va pulni sarmoya qilish - bu nima bo'lishini tushunish uchun vaqt va pul sarflashdir.
Maqsadli auditoriya (TA) portretini yaratish ushbu savollarning aksariyatiga javob berishga yordam beradi - mahsulot ishlab chiqarilayotgan odamlar.
Dizaynerlarning auditoriyani o'rganishdagi asosiy vazifasi - maksimal darajada empatiyani yoqish va bu tomoshabin qanday fikrlashi, nafas olishi, ko'rishi, eshitishi va harakat qilishini tushunishdir. Bunga quyidagi usullar yordam beradi:

• 
  koridor usuli. Fikrlar oila, do'stlar va boshqa dizaynerlardan keladi. Uni yig'ish oson, lekin bu etarli emas.
  
• 
  Siz bilan suhbat. Tomoshabinlaringiz nimaga muhtojligini hammadan ko'ra yaxshiroq bilasiz deb taxmin qilish adolatli.
  
• 
  Dala tadqiqotlari. Usulning bir qismi sifatida dizaynerlar odamlarga boradilar: agar ular mahalliy bozor uchun mahsulot ishlab chiqarayotgan bo'lsa, to'g'ridan-to'g'ri odamlar bilan muloqot qilish yoki chet el uchun bo'lsa, forumlarni o'qish;
  
• 
  Muammoli suhbat. Dizaynerlar foydalanuvchilarga ularning hayoti va undagi muammoning o'rni haqida savollar berib, bu muammo hozir qanday hal qilinayotgani va mahsuloti qanchalik foydali bo'lishini bilib oladi. Buning foydasiz bo'lib chiqishi ham qimmatli natijadir: hech kim foydalanmaydigan dasturga pul sarflashingiz shart emas.
  

Dizaynerlar to'plangan ma'lumotlarni qayta ishlaydilar va birinchidan, asosiy shaxslarni, ikkinchidan, foydalanuvchi marshrutlarini oladilar.
Asosiy shaxslar maqsadli auditoriyaning xarakterli vakillaridir. Ular kasbi, turmush darajasi, dasturdan foydalanish motivatsiyasi va boshqa parametrlar bo'yicha har xil bo'lishi mumkin, ammo har bir insonning tajribasi, umidlari va qo'rquvlari mahsulotning tashqi ko'rinishi va uning funksionalligining asosini tashkil qiladi. Misol uchun, kino chiptalarini sotib olish uchun Cinema Geek ilovasining odatiy foydalanuvchisi 23 yoshda, IT-kompaniyada ishlaydi va ingliz tilida filmlarni tomosha qilishni yaxshi ko'radi.
Bunday odam foydalanuvchi hikoyasining yoki foydalanuvchi hikoyasining markaziga aylanadi. Bu qisqa, bir necha satrlardan iborat bo'lib, inson va u ilovaning funksionalligi bilan qanday ishlashi va u qanday maqsadga erishayotgani haqida. Foydalanuvchi hikoyasi shablonga muvofiq tuzilgan:

“ sifatida men ”
“<23 yoshli asl ovozli versiyalarni yaxshi koʻradigan> sifatida men <“Izlash” funksiyasi orqali subtitrli filmlarni qidiraman> ”
Interkom nafaqat chatlarni veb-saytlar va mobil ilovalarga integratsiyalash bo'yicha keng qamrovli yechimi bilan, balki Bajarilishi kerak bo'lgan ishlar yondashuvini ixtiro qilgani bilan ham mashhur. Yondashuv asosiy shaxsning shaxsiy sifatiga emas, balki odamni mahsulotdan foydalanishga undaydigan holatlar va motivatsiyaga asoslanadi. Insonning "fikrlashi" ish hikoyasi deb ataladi va shablon quyidagicha ko'rinadi:
“, men qilishni xohlayman.
Ushbu yondashuv doirasida kino ixlosmandlari bilan vaziyat boshqacha ko'rinadi:
“Kinotomoshabinlar popkorn chaynab, o‘z nutqlari bilan filmni to‘xtatib qo‘yganidan g‘azablansam>, men
Tilda platformasi o'z blogida Bajarilishi kerak bo'lgan ishlar yondashuvi haqida ko'proq yozgan .
Foydalanuvchi hikoyasi va Ish hikoyasidan foydalanuvchi stsenariysiga o'tamiz. Bu foydalanuvchining mahsulot bilan o'zaro munosabati va maqsadga erishish yo'lidir.
Asosiy maqsadga erishish uchun (sotib olish, rasm qo'shish) foydalanuvchi yordamchi vazifalarni hal qilishi mumkin (buyurtmani etkazib berish usulini tanlash, fotosuratni tahrirlash) va ikkinchi darajali maqsadlarga erishish (buyurtmani qulay qabul qilish, kontrastli tafsilotlar bilan fotosuratlar) ; bu qo'shimcha marshrutlar ham dizayner tomonidan hisobga olinishi kerak.

Suratni yuklash: istakdan uni amalga oshirishgacha
prototiplash
Prototip - bu mahsulotning tashqi ko'rinishi, ishlash mantig'i va asosiy funksionalligini o'z ichiga olgan eskiz.
Uning ustida ishlash tartibni yaratish bilan boshlanadi. Joylashtirish variantlaridan biri bu simli ramka (inglizcha simli ramkadan - "tel ramka"). Tashqi tomondan, u chiziqlar va o'qlar bilan o'ralgan to'rtburchaklar bloklarga o'xshaydi. Ushbu bloklar va o'qlar mahsulotning tuzilishini va foydalanuvchining u bilan o'zaro munosabatini o'z ichiga oladi.
Ramka siz printer uchun qalam va qog'oz yordamida chizilgan qo'pol eskizmi yoki grafik muharrirda yaratilgan ekranlarning tartiblangan xaritasimi - bu sizga bog'liq. Bitta narsa: mijozga vizual ravishda simli ramkaning yakuniy mahsulotga hech qanday aloqasi yo'qligini tushuntirishga tayyor bo'ling.

Qo'lda chizilgan simli ramka

Sketch-da tayyorlangan simli ramka
Elektr chizmalarining shartlaridan foydalanib, barcha tugmalar, matnlar, media fayllar va boshqa elementlar simli ramkada shartli grafik belgilar bilan almashtirildi. Bu hali interfeys emas, balki yaqin narsa - Rojdestvo daraxti kiyinganda yangi yil archasiga aylanadi.
Batafsil prototip simli ramkaning UI evolyutsiyasi zinapoyasidagi navbatdagi qadamidir. Tel ramka kabi, bu tartib, lekin biroz aniqroq: agar simli ramkada chat ekrani faqat ularning maqsadlariga ishora qiluvchi doiralar va to'rtburchaklardan iborat bo'lsa, batafsil prototipda aylana ANIQ foydalanuvchining fotosurati va to'rtburchaklar. Bu ANIQ xabar matni, biriktirilgan fayllar, audio yozuvlar va stikerlar.

Prototipni taqdim etish uchun ekranlarni ko'rsatish etarli emas. Kelajakdagi foydalanuvchining interfeys elementlari bilan o'zaro ta'siri nimaga va qayerga olib kelishini ko'rsatish kerak. Elementlarni chiziqlar bilan foydalanuvchi kiritadigan boshqa ekranlarga ulash orqali siz ilovadan foydalanish uchun foydalanuvchi stsenariylarini yoki foydalanuvchi oqimini olasiz.
Foydalanuvchilar oqimi - bu mobil ilova foydalanuvchisining xatti-harakati, maqsadiga qanday erishayotgani va qanchalik oson muvaffaqiyatga erishayotganini ko'rsatadigan navigatsiya xaritasi. Tashqi tomondan, foydalanuvchi oqimi mantiqiy bog'langan to'rtburchaklar kabi ko'rinadi, ularda asosiy e'tibor foydalanuvchi harakatlariga qaratilgan.
Kelajakda ushbu xarita testerlar uchun ba'zi harakatlar yo'qolganligini yoki mantiq buzilganligini tekshirish uchun ishlaydigan dastur bilan solishtirish uchun foydali bo'ladi. Ushbu bosqichda foydalanuvchining yo'li optimallashtiriladi: keraksiz qadamlar yo'q qilinadi, keraksiz funktsiyalar o'chiriladi va shunga o'xshashlar bir bosqichga birlashtiriladi.

Ushbu vazifa uchun dasturiy ta'minot sifatida biz Overflow dan foydalanamiz , uning shiori "Foydalanuvchi oqimlari to'g'ri bajarildi" bu ish uchun vaqt samarali va foydali bo'lishini aniq ko'rsatadi. Sketch yoki Figma-dan ekranlar Overflow-ga osongina import qilinadi va siz bir soat ichida 100 ta ekran uchun oqim qilishingiz mumkin - o'zingiz o'qlarni chizishdan ko'ra tezroq.
Mahsulot qanday ishlashini tushunishning qo'shimcha darajasi kerakmi? Marvel, InVision, POP App va Origami Studio kabi xizmatlar yordamida batafsil prototipni interaktivga aylantirish mumkin. Uning foydaliligi shundaki, u sizga barcha interfeys elementlarini bosish imkonini beradi (va agar bizda mobil ilova bo'lsa, telefonda o'ng tugmasini bosing) va mahsulot oxirgi foydalanuvchi qo'liga tushishidan oldin uning mantig'ini baholash.
Uni yaratish ixtiyoriy bosqichdir, chunki maketlar va foydalanuvchi oqimi kelajakdagi ishlarning taqdimoti bilan shug'ullanadi. Ammo mobil ilovaning imkoniyatlarini ko'rsatish va mijozga yaqinlashib kelayotgan ish hajmini batafsil ochib berish kerak bo'lganda, undan foydalaning.
Mahsulotning mantiqiyligi va funksionalligi tasdiqlangandan so'ng, prototiplash bosqichi tugallangan deb hisoblanishi mumkin.