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

Şə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.

Şəbəkə 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ısaca, Wireframe, 3 sadə, lakin birbaşa hədəfə sahib olan aşağı sədaqət planı dizaynı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ə bəzi simli və qələm, Balsamiq kimi 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 asandır 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, tələbə uyğun olaraq asanlıqla dəyişdirə bilərsiniz, lakin kodlaşdırma və qrafik tənzimləməni 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ə edilməyəcəkdir.

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 rəsm 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 prototip təmin etmək, məhsulunuzun bütün təfərrüatları ilə tanış olmaq və bütün kollektivi ruhlandırmaq fayda verir 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. 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

Əla sürətli prototipləmə vasitəsi axtarırsınız? Büdcə yoxdur? Heç bir bəhanə. Mockplus Black Friday 2017 burada! İndi Mockplus Official Slack qrupuna qoşulun, admin sizə 40% endirim kuponları və UI dəstləri və şriftlər paketini təklif edəcəkdir. Bu vaxt məhdud təklifi bütün paketlər üçün etibarlıdır və 31 Noyabr tarixinə qədər davam edir, adi qiymətdən ən azı 80 dollar qənaət edir. Bundan əlavə, indi ödənişli istifadəçi olmasanız da, Mockplus-da ömürlük pulsuz texnoloji dəstək alacaqsınız. Gəlin və Mockplus Black Friday 2017-dən zövq alın!

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 istehza yaratmağa imkan verir. Mockplus 3.2-də, UI axını dizayn rejimi, təkrarlayıcı, demo layihələri və şablonları və eskiz idxalını əlavə etdi. Mind Map Design Mode kimi digər xüsusiyyətlər Mockplus 3.2-dən sonra versiyalarda təqdim edilə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 telindən daha zəngin vizual elementlərə 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ş axınına konkret edə bilsəniz, inanılmaz iyi baş verəcəkdir.

Göstərişlər

  • Şəbəkə 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ə rəy toplamağa çalışın və onları telfame dizaynlarında əks etdirməyə çalışın.
  • Ən lazımlı vasitənizdən istifadə edin