UI / UX Dizayn kontseptsiyasining simli uzatma, prototip va mockup o'rtasidagi farq (Yangilangan)

telframe mockup prototipi

Simli sim, mockup va prototip o'rtasidagi farq nima? Tajribali dizayner UI / UX dizaynerlari uchun dizayn shartlarini aniqladi.

Simli sim, prototip va mockupning farqlari har doim ko'plab dizaynerlar tomonidan chalkashib ketadi, tajribali dizayner bo'lishiga qaramay, ko'p odamlar Quora va Reddit-ga ushbu atamalar haqida savol berishganini ko'rdim, shuning uchun do'zax nima ekanligini aniq tushunish kerak. Bu ko'p muammolarni hal qiladi va dizaynerlar uchun energiya tejaydi.

Wireframe nima?

Bu tarkib va ​​elementlarni o'z ichiga olgan veb-sayt yoki ilovaning grafik tuzilishi. Binoning loyihasi singari, uni osmono'par binoga aylantirish uchun ko'plab ishlarni va ishtirokchilarni jalb qilish kerak. Xuddi shunday, simli sim oddiy bo'lib ko'rinadi va UX, UI, IxD dizaynerlari tomonidan bajarilishi kerak. Qisqacha aytganda, telframe - bu soddaligi past bo'lgan maket dizayni bo'lib, u 3 ta sodda, ammo to'g'ridan-to'g'ri maqsadlarga ega:

  • Asosiy ma'lumotlarni o'z ichiga oladi
  • Tuzilishi va tartibini chizib oling
  • Foydalanuvchi interfeysining ingl

Simli simning vizual xususiyatlari

Vizual ravishda, simli naushnikda juda aniq vizual cheklovlar mavjud, chunki uni tugatish uchun faqat oddiy chiziqlar, qutilar va kul rang kerak (har xil kul rang farq qiladi).

Simli ekran juda aniq vizual cheklovlarga ega. Umuman olganda, dizaynerlar bajarish uchun faqat chiziqlar, qutilar va kul rangdan foydalanishlari kerak (har xil kul ranglar turli darajani bildiradi).

2. Oddiy vektor simli sim

Oddiy simframning tarkibiga rasmlar, video va matnlar kiradi

3. Elektr simining ustunligi

Simli simlarni qurish tez va arzon.

Ayniqsa, agar siz qog'oz va qalam, Balsamiq kabi simli simlarni o'chirish vositalaridan foydalansangiz. Albatta, siz ushbu dizayn vositalarini eng boshida bajarish uchun ishlatishingiz kerak.

To'liq va batafsil yuqori aniqlik bilan ishlaydigan telframe bilan taqqoslaganda, yuqori darajali simframe orqali fikrlarni yig'ish ancha oson va muhimroqdir. Nima uchun? Chunki odamlar ushbu elementlarning estetik xususiyatlarini inobatga olishdan ko'ra dasturiy ta'minotning ishlashiga, axborot arxitekturasiga, foydalanuvchi tajribasiga, foydalanuvchi bilan o'zaro ta'sirlashuv jadvaliga va undan foydalanishga ko'proq e'tibor berishadi. Shu bilan birga, bu holda siz uni talabga ko'ra osongina o'zgartirishingiz mumkin, lekin kodlash va grafik tahrirlashni sozlashingiz shart emas.

4. Interfaol simfram

Ba'zan, dizaynerlar ba'zi jihatlar bo'yicha foydalanuvchi interfeysining ahamiyatini oshirish va tezkor test va vizual elementlar o'rtasidagi o'zaro ta'sirning mantiqiyligini namoyish etish uchun simli simlarning ishonchliligini yaxshilashni afzal ko'rishadi. Ushbu muammolarni to'g'ri hal qilish uchun dastur, bosiladigan telframe sifatida ham tanilgan interfaol simframdan foydalanadi.

Agar siz bunday murakkab simli simni yaratmoqchi bo'lsangiz, u holda simli simlarni o'rnatish va prototiplash uchun vosita bo'lgan UXPin kerak bo'ladi. Interfaol prototip yaratish rivojlanayotgan guruh va mijozlar uchun eng yaxshi taqdimot bo'lishi mumkin. Siz "ushbu tugmani bosganimda nima bo'ladi?" Degan muammoga duch kelganingizda, shunchaki chertish va mijozlarga interaktiv prototipda qanday ishlashini ko'rsatish kerak. Darhaqiqat, bu juda ta'sirli va to'g'ridan-to'g'ri.

5. Simli simni ehtiyotkorlik bilan ko'rsating

Unga telframingizni unga taqdim etishingiz kerak bo'lsa, siz mutlaqo layman bo'lgan yigitdan ehtiyot bo'lishingiz kerak. U sizning mijozingiz bo'lishi mumkin, shuningdek texnik bo'lmagan menejer ham hamkorlikda ishtirok etgan bo'lishi mumkin. Ammo u simli sim va yakuniy mahsulot bir-biriga bog'liq bo'lib ko'rinishi mumkinligini bilmaydi. Shunday qilib, u ular orasidagi ichki aloqa va ish rejimini tushunmasligi mumkin. Shunday qilib, siz taqdim etishingiz kerakligini va qanday qilib to'g'ri qarorni aniqlashingiz kerak.

Simli dizayn asboblari

Qog'oz va qalam

Wireframing dizaynining eng oson tanlangan vositasi - bu qog'oz va qalam. Qog'oz bilan tasodifiy qog'ozga chizib oling, bu oddiy chiziqlar va qutilarga ega simli simdir. Uning yordamida dizaynerlar g'oyalarni intuitiv ravishda batafsil matn ifodalash yoki mijozlar va rahbarlar bilan og'zaki gaplashish orqali taqdim etishadi. Ammo bu yirik kompaniyalar uchun rasmiy loyihada ishlatilmaydi.

Balsamiq

Ba'zan, dizaynerlar ba'zi jihatlar bo'yicha foydalanuvchi interfeysining ahamiyatini oshirish va tezkor test va vizual elementlar o'rtasidagi o'zaro ta'sirning mantiqiyligini namoyish etish uchun simli simlarning ishonchliligini yaxshilashni afzal ko'rishadi. Balsamiq ikki xil uslubda statik telframma uchun elementlar to'plamini taqdim etadi. Uning qo'l bilan chizish uslubi maketga, funktsional dizaynga e'tibor berishga yordam beradi, barcha ranglar oq va qora. Shunday qilib, rang parametrlari va vizual effekt haqida shikoyatni eshitmaysiz.

Prototip nima?

Prototipning talabi telframga qaraganda yuqori. Farqi shundaki, prototip interfaol va iloji boricha oxirgi foydalanuvchi interfeysiga mos keladigan yuqori aniqlikdagi prototip bo'lishi kerak. Shu bilan birga, u haqiqiy mahsulot interfeysi va funktsional o'zaro ta'sirini simulyatsiya qilish orqali sinovchilar uchun to'liq tajribani taqdim etadi.

1. Prototipning afzalligi

"Jamoa uchun do'stona prototip yaratish dizaynerlar va ishlab chiquvchilar o'rtasidagi aloqaga ko'proq yordam beradi. "

Nima uchun bu juda muhim? Prototip odatda mahsulotni sinab ko'rish uchun foydalanuvchilar uchun ishlatiladi. Prototipni sinab ko'rish juda erta bosqichda rivojlanayotgan narx va vaqtni tejashga yordam beradi. Shunday qilib, asossiz interfaol interfeys tufayli mahsulotni arxitekturasini kuchini yo'qotmaydi. Shunday qilib, prototip - bu dizaynerlar va ishlab chiquvchilar uchun mahsulotni sinab ko'rish uchun mukammal yutuq.

Bundan tashqari, foydalanuvchilarga fikr-mulohazalarni to'plash uchun prototiplarni taqdim etish, bu sizning mahsulotingizning barcha tafsilotlari bilan tanishish va butun jamoani ilhomlantiradigan foyda. Prototiplash vositalarining aksariyati prototiplarni tez va samarali qurishi mumkin, ammo kodlashga hojat yo'q.

Prototiplarning maqsadi aniq: foydalanuvchi va interfeysning o'zaro ta'sirini iloji boricha soddalashtirish. Tugma bosilganda, tegishli operatsiya bajarilishi kerak va tegishli sahifalar paydo bo'lishi kerak, mahsulotning to'liq tajribasini taqlid qilishga harakat qiling. Siz "ushbu tugmani bosganimda nima bo'ladi?" Degan muammoga duch kelganingizda, shunchaki chertish va mijozlarga interaktiv prototipda qanday ishlashini ko'rsatish kerak. Darhaqiqat, bu juda ta'sirli va to'g'ridan-to'g'ri.

2. Prototipning vizual xususiyatlari

Shubhasiz, prototipda bo'lishi kerak bo'lgan mahsulotning estetik xususiyatlari bo'lishi kerak va oxirgi versiyaga mos kelishga harakat qiling. Asosan, bu HTML / CSS / JS qatnashmagan mahsulot terisi va server va ma'lumotlar bazasini ko'rib chiqish kerak emas.

3. Prototiplash sinovi

Prototipni sinovdan o'tkazish prototiplarni loyihalash jarayonidagi muhim bosqich bo'lib, bu umumiy jarayonning muhim bosqichlaridan biridir. Qanday qilib yaroqlilik sinovini o'tkazish bu erda gaplashish uchun juda katta mavzu. Oddiy sinov bir soatcha vaqtni talab qilishi mumkin, 5 yoki 6 ta asosiy voqealarni sinab ko'rish kifoya. Malumotingiz uchun bir nechta tez-tez beriladigan savollar:

  • Foydalanuvchi vazifani qanday boshlaydi? (Qidirish yoki ko'rish?)
  • Avval foydalanuvchi nima qiladi? va keyingi?
  • Qanday qilib u yakuniy qarorni qabul qiladi?
  • Ular dizayn maqsadini tushunishadimi? Qiyinchiliklar bormi?

Mahsulot prototipini yaratish uchun doimiy jarayon bo'lib, iteratsiya va yaxshilanishni talab qiladi.

Prototiplash vositalari

Mockplus

Mockplus tezkor shovqin, tezkor dizayn va tezkor ko'rish uchun har tomonlama qamrab olingan prototiplash vositasidir. Bu mobil (Android va iOS), ish stoli (kompyuter va Mac) va veb-ilovalar uchun mockuplar yaratishga imkon beradi. Mockplus 3.2-da UI oqimini loyihalash rejimi, takrorlash uskunasi, demo loyihalari va shablonlari va eskiz importi qo'shildi. Mind Map Design Mode kabi boshqa funktsiyalar Mockplus 3.2-dan keyin versiyalarda namoyish etiladi.

https://www.mockplus.com

iDoc

Dizaynni topshirish vositasi sifatida iDoc bilan hamkorlik qilish, dizayn manbalarini etkazib berish, shuningdek yorug'lik prototipi. Uzluksiz ish jarayoni UI dizaynerlariga Photoshop, Adobe XD va Sketch plaginlaridan vizual skriptlarni yuklashga imkon beradi.

Bir necha soniya ichida prototiplarni ishlab chiqarish uchun ulanish nuqtasini qo'shib, interfaol aloqalarni o'rnatish juda oson va sodda. 7 ta imo-ishora va 13 ta animatsiya yordamida osongina bosiladigan interaktiv prototipga erishishingiz mumkin. Ulanish nuqtasida zanjir, uy sahifasi va tashqi havola uchun 3 ta sozlash mavjud. Buni ko'proq o'rganing, bu sizni ko'proq ajablantiradi!

UXPin

UXPin siz simlarni va prototiplarni yaratishingiz uchun 900 dan ortiq turli xil UI elementlarini yaratdi. Uning sezgir breakpoint funktsiyasi foydalanuvchilarga turli xil qurilmalarda va piksellar sonlarida ishlaydigan sezgir prototiplar va sim kartalarini yaratishga imkon beradi.

Mockup nima?

Mockup - bu mahsulotning vizual dizaynini namoyish qilish uchun ishlatiladigan "vizual skript". U simli simlarga qaraganda boyroq vizual elementga ega, jumladan grafika, tartib, rang va boshqa batafsil vizual taqdimot. Ma'lum darajada, bu mahsulotning yakuniy dizayni.

Simli simga o'xshab, Mockup ham statik va ishlamaydi. Bu yuqori aniqlikka erishish uchun ko'plab vizual elementlarni qo'shish orqali mahsulotning tashqi ko'rinishiga qaratilgan. Tez-tez mahsulotni vizual dizaynini yaxshilash uchun vizual dizayn munozaralarida foydalaniladi.

Dizayn oqimi

Dizaynning mohiyati bilan tanishib chiqqandan so'ng, teleframe, mockup, prototip o'rtasidagi farqni bilganingizdan so'ng, siz foydalanuvchilar tajribasi dizayni olami oldida turasiz.

Agar siz mahsulot dizayni seriyasini aniq va samarali ish oqimiga aylantira olsangiz, hayratlanarli narsalar yuz beradi.

Maslahatlar

  • Simli simni tayyorlashda tahrirlanadigan va qayta ishlatiladigan elementlardan foydalanishga harakat qiling. Bunday holda, siz shunchaki simli simlarga asoslangan prototiplarni bajarish uchun elementlarni tozalashni davom ettirasiz.
  • Simli simlarni o'rnatayotganda, jamoangiz va mijozlaringizning fikrlari va fikrlarini to'plashga harakat qiling va ularni simfram dizaynida aks ettirishga harakat qiling.
  • O'zingizning eng qulay vositangizdan foydalaning

Shuningdek, sizni qiziqtiradi:

UI / UX dizaynerlari uchun 2017 yildagi eng yaxshi mockup va teleframing dizayn asboblari va ilovalari

UX vs UI vs IA vs IxD: 4 Raqamli dizayn shartlarini aralashtirib yuborish

Dizaynerlar uchun eng yaxshi UI / UX dizayn kitoblari va manbalari

Dastlab www.mockplus.com saytida chop etilgan.