Wireframe, Prototype və Mockup arasındakı əsas UI / UX Dizayn Konsepsiyasının Fərqi (Yenilənib)

teleframe mockup prototipi

Simli tel, mockup və prototip arasındakı fərq nədir? Təcrübəli bir dizayner UI / UX dizaynerləri üçün dizayn şərtlərini təmizlədi.

Şəbəkə, prototip və mockup fərqləri həmişə çox sayda dizayner tərəfindən qarışıq olur, təcrübəli dizaynerə baxmayaraq, Quora və Reddit-də bir çox insanın bu şərtlər barədə sual verdiyini gördüm, buna görə cəhənnəmin nə olduğunu aydınlaşdırmaq vacibdir. Bu bir çox problemi həll edər və dizaynerlər üçün enerjiyə qənaət edər.

Wireframe nədir?

Məzmunu və elementləri ehtiva edən veb saytın və ya tətbiqin qrafik quruluşudur. Bir binanın planı kimi, göydələnə çevrilmək üçün bir çox işlərin və iştirakçıların iştirakı lazımdır. Eynilə simli sim sadə görünür və daha çox UX, UI, IxD dizaynerləri tərəfindən görüləcək işlər tələb olunur. Qısacası, simli tel 3 sadə, lakin birbaşa hədəfə sahib olan aşağı sədaqət dizayn planıdır:

  • Əsas məlumatları ehtiva edir
  • Quruluşun və düzenin konturunu çəkin
  • İstifadəçi interfeysinin vizual və təsviri

1. Simli telin vizual xüsusiyyətləri

Vizual olaraq, tel açma simvolu çox açıq bir vizual məhdudiyyətlər mövcuddur, bunun üçün yalnız sadə xətlər, qutular və boz rəng (müxtəlif boz rəng fərqli səviyyəni göstərir) lazımdır.

Simli qapı çox açıq vizual məhdudiyyətlər mövcuddur. Ümumiyyətlə, dizaynerlər başa çatdırmaq üçün yalnız xətlər, qutular və boz rəngdən istifadə etməlidirlər (fərqli boz rəng fərqli səviyyəni göstərir).

2. Sadə vektor tel

Sadə bir sim kartının tərkibinə şəkillər, video və mətn və s. Daxil edilməlidir. Beləliklə, buraxılanlar yerdəyişmə ilə əvəz ediləcək, şəkil əvəzinə kölgə ilə əvəz ediləcək və mətn mətnə ​​uyğun olaraq bəzi simvolik sözlərlə əvəz ediləcəkdir.

3. Simli telin üstünlüyü

Simli bina sürətli və ucuzdur.

Xüsusilə kağız və qələm, Balsamiq kimi bəzi telframlama vasitələrindən istifadə edirsinizsə. Əlbəttə ki, əvvəlcə bunu etmək üçün bu dizayn vasitələrindən istifadə etməlisiniz.

Tam və detallı yüksək sədaqət telləri ilə müqayisədə, lo-fi teleframe vasitəsilə rəy toplamaq daha asan və daha vacibdir. Niyə? İnsanlar bu elementlərin estetik xüsusiyyətlərini nəzərə almaqdan daha çox, proqram təminatına, məlumat arxitekturasına, istifadəçi təcrübəsinə, istifadəçi qarşılıqlı əlaqə cədvəlinə və bu məqsədəuyğunluğa daha çox diqqət yetirirlər. Bu vaxt, bu tələbə uyğun olaraq asanlıqla dəyişdirə bilərsiniz, lakin kodlaşdırma və qrafik tənzimləməsini tənzimləməyə ehtiyac yoxdur.

4. İnteraktiv tel

Bəzən dizaynerlər istifadəçi interfeysinin bəzi aspektlərdə əhəmiyyətini artırmaq və sürətli testlə vizual elementlər arasında qarşılıqlı təsirlərin rasionallığını göstərmək üçün naqillərin etibarlılığını artırmağı üstün tuturlar. Bu problemləri düzgün şəkildə həll etmək üçün proqram, tıklanabilən tel simframı kimi də tanınan interaktiv telfame istifadə olunur.

Belə bir mürəkkəb tel açma qurmaq istəyirsinizsə, onda tel simframlama və prototip dizaynı üçün bir vasitə olan UXPin lazımdır. İnteraktiv prototipləmə inkişaf edən komanda və müştərilər üçün ən yaxşı təqdimat ola bilər. "Bu düyməni basanda nə baş verəcək?" Probleminə rast gəldiyiniz zaman, basaraq müştərilərinizə interaktiv prototipin necə işlədiyini göstərmək lazımdır. Həqiqətən, olduqca təsir edici və birbaşa.

5. Şəbəkə simini ehtiyatla göstərin

Simli telefonunuzu ona təqdim etməyiniz zaman tamamilə layman olan oğlandan ehtiyatlı olmalısınız. O, sizin müştəriniz ola bilər, həmçinin əməkdaşlıqda iştirak edən qeyri-texniki menecer də ola bilər. Lakin tel tel və son məhsulun əlaqəli görünə biləcəyi həqiqəti bilmir. Beləliklə, aralarındakı bağlantı və iş rejimini başa düşə bilməz. Beləliklə, təqdim etməyiniz və necə olacağınıza dair düzgün bir qərar verməlisiniz.

Wireframing dizayn vasitələri

Kağız və qələm

Ən asan seçilmiş telframlama dizayn vasitəsi kağız və qələmdir. Təsadüfi bir kağıza qələm ilə çəkin, bu əsas xətlər və qutuları olan ən sadə teleframe. Bununla, dizaynerlər fikirləri detallı mətn ifadəsi və ya müştərilərə və liderlərə şifahi danışmaqla təqdim edirdilər. Lakin bu böyük şirkətlər üçün rəsmi layihədə istifadə olunmayacaq.

Balsamiq

Bəzən dizaynerlər istifadəçi interfeysinin bəzi aspektlərdə əhəmiyyətini artırmaq və sürətli testlə vizual elementlər arasında qarşılıqlı təsirlərin rasionallığını göstərmək üçün naqillərin etibarlılığını artırmağı üstün tuturlar. Balsamiq, iki üslubda statik telframlama üçün bir sıra element təqdim edir. Əl tərtibatı tərzi tərtibata, funksiya dizaynına diqqət yetirməyə kömək edəcək, bütün rənglər ağ və qara rəngdədir. Beləliklə, rəng parametrləri və vizual effekt barədə şikayət eşitməyəcəksiniz.

Prototip nədir?

Bir prototipin tələbi tel tellərinə daha yüksəkdir. Fərq ondadır ki, prototip interaktiv və mümkün qədər son istifadəçi interfeysinə uyğun olan yüksək sədaqətli prototip olmalıdır. Bu vaxt, real məhsul interfeysi və funksional qarşılıqlılığı simulyasiya edərək sınayıcılar üçün tam istifadəçi təcrübəsi təqdim edir.

1. Prototipin üstünlüyü

"Bir komandaya uyğun prototip dizayn və dizaynerlər arasında ünsiyyət üçün daha əlverişlidir. "

Niyə bu qədər vacibdir? Çünki prototip istifadəçiləri məhsulu sınamaq üçün ümumiyyətlə istifadə olunur. Prototip testi çox erkən mərhələdə inkişaf edən bir çox xərc və vaxta qənaət edə bilər. Əsassız interaktiv interfeys səbəbiylə geri məhsul arxitekturasının səylərini itirməməsi üçün. Beləliklə, prototip dizaynerlər və inkişaf etdiricilər üçün məhsulu sınamaq üçün mükəmməl bir irəliləyişdir.

Bundan əlavə, istifadəçilərə geribildirim toplamaq üçün prototiplər təqdim etmək, məhsulunuzun bütün təfərrüatları ilə tanış olmaq və bütün komandanı ruhlandırmaq üçün bir fayda gətirir. Prototipləmə vasitələrinin çoxu prototipləri tez və effektiv şəkildə qura bilər, lakin kodlaşdırmağa ehtiyac yoxdur.

Prototiplərin hədəfi olduqca açıqdır: istifadəçi və interfeys arasındakı qarşılıqlı əlaqəni mümkün qədər real şəkildə simulyasiya etmək. Bir düymə basıldığında, müvafiq əməliyyat aparılmalı və müvafiq səhifələr görünməlidir, tam məhsul təcrübəsini simulyasiya etmək üçün ən yaxşısını edin. "Bu düyməni basanda nə baş verəcək?" Probleminə rast gəldiyiniz zaman, basaraq müştərilərinizə interaktiv prototipin necə işlədiyini göstərmək lazımdır. Həqiqətən, olduqca təsir edici və birbaşa.

2. Bir prototipin vizual xüsusiyyətləri

Şübhəsiz ki, prototipdə olmalıdır bir məhsulun estetik xüsusiyyətləri olmalıdır və son versiyasına uyğun olmağa çalışın. Əsasən, bir məhsulun dərisidir, heç HTML / CSS / JS cəlb edilmir və server və verilənlər bazasını nəzərdən keçirmək lazım deyil.

3. Prototipləmə testi

Prototip testi ümumi prosesin əsas mərhələlərindən biri olan prototip dizayn prosesində əsas addımdır. Uyğunluq testini necə keçirmək burada danışmaq üçün böyük bir mövzudur. Sadə bir test təxminən bir saat çəkə bilər, 5 və ya 6 əsas səhnəni sınamaq kifayətdir. İstinadınız üçün sadalanan bir çox suallar:

  • İstifadəçi tapşırığı necə başlayır? (Axtarış və ya gəzmək?)
  • İstifadəçi əvvəlcə nə edir? və növbəti?
  • Son qərarı necə verir?
  • Dizayn niyyətini başa düşürlərmi? Hər hansı bir çətinlik?

Məhsulun prototip dizaynını hazırlamaq üçün davamlı bir prosesdir və iterasiya və düzəliş tələb olunur.

Prototipləmə vasitələri

Mockplus

Mockplus sürətli qarşılıqlı əlaqə, sürətli dizayn və sürətli önizləmə üçün hərtərəfli prototipləmə vasitəsidir. Bu mobil (Android və iOS), Masaüstü (PC & Mac) və veb tətbiqləri üçün mockups yaratmağa imkan verir. Mockplus 3.2-də, UI axını dizayn rejimi, təkrarlayıcı, nümayiş layihələri və şablonları və eskiz idxalı əlavə edildi. Mind Map Design Mode kimi digər xüsusiyyətlər Mockplus 3.2-dən sonra versiyalarda təqdim ediləcəkdir.

https://www.mockplus.com

iDoc

Dizayn təhvil aləti olaraq, iDoc inteqrasiya olunmuş əməkdaşlıq, dizayn mənbəyi çatdırılması, həmçinin yüngül prototipləmə. Aramsız iş axını UI dizaynerlərinə Photoshop, Adobe XD və Sketch eklentilərindən vizual skriptləri yükləməyə imkan verir.

Saniyədə mükəmməl prototip hazırlamaq üçün qaynar nöqtə əlavə edərək interaktiv bağlantı qurmaq asandır və sadədir. 7 jest və 13 animasiya ilə asanlıqla tıklanabilir bir interaktiv prototip əldə edə bilərsiniz. İsti nöqtədə arxa bağlantı, ana səhifə bağlantısı və xarici link üçün 3 parametr var. Daha çox araşdırın, daha çox təəccübləndirəcəkdir!

UXPin

UXPin, sim kartları və prototipləri yaratmağınız üçün 900-dən çox müxtəlif UI elementini inşa etmişdir. Onun cavab vermə nöqtəsi funksiyası istifadəçilərə müxtəlif cihazlarda və qətnamələrdə işləyə bilən cavab verən prototiplər və sim kartları yaratmağa imkan verir.

Mockup nədir?

Mockup, məhsulun ümumi vizual dizaynının təqdimatı üçün istifadə olunan "vizual skript" dir. Bu qrafik, düzeni, rəng və digər daha ətraflı vizual təqdimat da daxil olmaqla tel simindən daha zəngin vizual elementə malikdir. Müəyyən dərəcədə məhsulun son dizaynıdır.

Sim qozu kimi, Mockup statik və işlək deyil. Yüksək sədaqətə çatmaq üçün vizual elementlərin zənginliyini əlavə etməklə məhsulun görünüşünə diqqət yetirir. Tez-tez məhsulun vizual dizaynında sürətli rəy və inkişaf üçün vizual dizayn müzakirələrində istifadə olunur.

Dizayn axını

Dizaynın mahiyyəti ilə tanış olduqdan və teleframe, mockup, prototip arasındakı fərqi bildikdən sonra istifadəçi təcrübəsi dizayn dünyasının qarşısında durursunuz.

Bir sıra məhsul dizaynını vahid və təsirli bir iş prosesinə konkret edə bilsəniz, heyrətamiz hadisələr baş verəcəkdir.

Göstərişlər

  • Bir tel simini düzəldərkən düzəldilə bilən və təkrar istifadə edilə bilən elementlərdən istifadə etməyə çalışın. Bu vəziyyətdə, sadəcə tel simlərinə əsaslanan prototipləri tamamlamaq üçün elementləri təmizləməyə davam edirsiniz.
  • Sim kartaları hazırlayarkən, komandanızdan və müştərilərinizdən fikir və mülahizələr toplamağa çalışın və onları telfame dizaynlarında əks etdirməyə çalışın.
  • Ən lazımlı vasitənizdən istifadə edin

Sizi də maraqlandıracaq:

2017-ci ildə UI / UX Dizaynerləri üçün Ən Yaxşı Mockup & Wireframing Dizayn Alətləri və Tətbiqləri

UX vs UI vs IA vs IxD: 4 Mübahisəli Rəqəmsal Dizayn şərtləri

Dizaynerlər üçün ən yaxşı UI / UX Dizayn Kitabları və Resursları

Əvvəlcə www.mockplus.com saytında yayımlandı.