Pagrindinės UI / UX dizaino koncepcijos skirtumas tarp vielos rėmo, prototipo ir maketo (Atnaujinta)

vielinio rėmo maketo prototipas

Kuo skiriasi vielinis rėmas, maketas ir prototipas? Patyręs dizaineris išaiškino UI / UX dizainerių projektavimo sąlygas.

Daugybė dizainerių visada supainioja laido rėmo, prototipo ir maketo skirtumus, nepaisant patyrusio dizainerio, mačiau, kad daugelis žmonių klausinėjo „Quora“ ir „Reddit“ apie šias sąvokas, todėl labai svarbu aiškiai pasakyti, kas tai yra. Tai išspręstų daugybę problemų ir sutaupytų energijos dizaineriams.

Kas yra vielinis rėmas?

Tai yra grafinė svetainės ar programos struktūra, kurioje yra turinio ir elementų. Kaip ir pastato brėžinyje, norint, kad jis taptų dangoraižiu, reikia įtraukti daug darbų ir dalyvių. Taip pat vielos rėmas atrodo paprastas ir, be to, jį turi atlikti UX, UI, IxD dizaineriai. Trumpai tariant, vielinis rėmas yra mažo tikslumo maketo dizainas, kurį sudaro 3 paprasti, bet tiesioginiai tikslai:

  • Pateikiama pagrindinė informacija
  • Nubrėžkite struktūros ir išdėstymo kontūrus
  • Vartotojo sąsajos vaizdas ir aprašymas

1. Vizualiniai rėmo bruožai

Vizualiai vielos rėmas turi keletą akivaizdžių vizualinių apribojimų, nes jam atlikti reikia tik paprastų linijų, langelių ir pilkos spalvos (skirtinga pilkos spalvos skalė rodo skirtingą lygį).

Vielinis rėmas egzistuoja labai akivaizdžiais vizijos apribojimais. Apskritai dizaineriams reikia naudoti tik linijas, dėžutes ir pilką spalvą (skirtinga pilkos spalvos skalė rodo skirtingą lygį).

2. Paprastas vektorinis vielos rėmas

Paprasto vielos rėmelio turinyje turėtų būti paveikslėlių, vaizdo įrašų, teksto ir pan. Taigi praleistas bus pakeistas vietos žymekliu, paveikslėlis bus vietoj tamsesnio, o tekstas bus pakeistas keliais simboliniais žodžiais pagal teksto išdėstymą.

3. Karkaso pranašumas

Karkaso konstrukcija yra greita ir pigi.

Ypač jei naudojate kai kuriuos vielos kadravimo įrankius, tokius kaip popierius ir rašiklis, „Balsamiq“. Žinoma, turėtumėte naudoti šias projektavimo priemones, kad tai padarytumėte pačioje pradžioje.

Palyginti su išsamiu ir išsamiu labai tiksliu vielos kadru, grįžtamojo ryšio rinkimas per „lo-fi“ laidinį rėmelį yra daug lengvesnis ir svarbesnis. Kodėl? Kadangi žmonės daugiau dėmesio skiria programinės įrangos funkcionalumui, informacijos architektūrai, vartotojo patirčiai, vartotojo sąveikos schemai ir jos naudojimui, o ne atsižvelgia į estetines šių elementų savybes. Tuo tarpu tokiu atveju jūs galite lengvai jį modifikuoti pagal poreikį, bet nereikia koreguoti kodavimo ir grafikos redagavimo.

4. Interaktyvus vielos rėmas

Kartais dizaineriai nori patobulinti laidinių rėmų ištikimybę, kad padidintų vartotojo sąsajos svarbą kai kuriais aspektais ir parodytų greito bandymo ir vaizdinių elementų sąveikos racionalumą. Programa, skirta tinkamai išspręsti šias problemas, naudoja interaktyvųjį rėmelį, dar žinomą kaip spustelėjamas vielos rėmas.

Jei norite sukurti tokį sudėtingą vielos rėmą, jums reikia „UXPin“, kuris yra laidų formavimo ir prototipų kūrimo įrankis. Interaktyvus prototipų kūrimas gali būti geriausias pristatymas besivystančiai komandai ir klientams. Kai susidūrėte su problema „kas nutiks, kai aš spustelėsiu šį mygtuką?“ “, Jums tereikia spustelėti ir parodyti savo klientams, kaip tai veikia interaktyvųjį prototipą. Iš tiesų, jis yra gana įspūdingas ir tiesioginis.

5. Atsargiai parodykite vielos rėmą

Jūs turite būti atsargus dėl vaikino, kuris yra visiškai pasaulietis, kai jums reikia pristatyti jam savo metalinį kadrą. Jis gali būti jūsų klientas, taip pat gali būti netechnikos vadovas, kuris dalyvavo bendradarbiaujant. Tačiau jis nežino tiesos, kad vielos rėmas ir galutinis produktas gali atrodyti nesusiję. Taigi, jis gali nesuprasti vidinio jų ryšio ir veikimo būdo. Taigi, jūs turite tinkamai išsiaiškinti, ar reikia pateikti, ir kaip.

Vielos rėmo projektavimo įrankiai

Popierius ir rašiklis

Paprasčiausias metalinių rėmelių projektavimo įrankis yra popierius ir rašiklis. Atsitiktinai pieškite popierių su rašikliu, tai paprasčiausias vielos rėmas su pagrindinėmis linijomis ir dėžutėmis. Pasitelkę dizaineriai idėjas intuityviai perteiktų išsamiai pateikdami tekstą arba kalbėdami klientams ir lyderiams. Tačiau tai nebus panaudota oficialiame didelių įmonių projekte.

Balsamiq

Kartais dizaineriai nori patobulinti laidinių rėmų ištikimybę, kad padidintų vartotojo sąsajos svarbą kai kuriais aspektais ir parodytų greito bandymo ir vaizdinių elementų sąveikos racionalumą. „Balsamiq“ pateikia elementų rinkinį, skirtą dviejų stilių statiniams kadrams įrėminti. Jo rankinis piešimo stilius padėtų sutelkti dėmesį į išdėstymą, funkcijų dizainą, visos spalvos yra baltos ir juodos. Taigi negirdėsite skundo dėl spalvų nustatymų ir vaizdo efekto.

Kas yra prototipas?

Prototipo reikalavimas yra didesnis nei vielos rėmo. Skirtumas tas, kad prototipas turi būti labai patikimas prototipas, kuris yra interaktyvus ir kiek įmanoma labiau pritaikytas galutinio vartotojo sąsajai. Tuo tarpu jis suteikia visišką bandymą vartotojams, imituodamas tikrąją produkto sąsają ir funkcinę sąveiką.

1. Prototipo pranašumas

„Komandai palankus prototipų kūrimas yra palankesnis bendravimui tarp dizainerių ir kūrėjų. „

Kodėl tai taip svarbu? Nes prototipas dažniausiai naudojamas vartotojams gaminio testavimui. Prototipo bandymas labai ankstyvame etape gali padėti sutaupyti daug išlaidų ir laiko. Dėl nepagrįstos interaktyvios sąsajos nereikės eikvoti pastangų kuriant galutinio produkto architektūrą. Taigi, prototipas yra tobulas progresas, norint išbandyti produktą dizaineriams ir kūrėjams.

Be to, teikdami vartotojams prototipus, kad jie galėtų rinkti atsiliepimus, tai yra naudinga, jei turite žinių apie visą jūsų produkto informaciją ir įkvėpsite visą komandą. Daugelis prototipų kūrimo įrankių gali greitai ir efektyviai sukurti prototipus, tačiau nereikia kodavimo.

Prototipų tikslas yra gana akivaizdus: kiek įmanoma realistiškiau modeliuoti vartotojo ir sąsajos sąveiką. Kai paspaudžiamas mygtukas, reikia atlikti atitinkamą operaciją ir atsirasti atitinkami puslapiai, stenkitės kuo geriau imituoti visą gaminio patirtį. Kai susidūrėte su problema „kas nutiks, kai aš spustelėsiu šį mygtuką?“ “, Jums tereikia spustelėti ir parodyti savo klientams, kaip tai veikia interaktyvųjį prototipą. Iš tiesų, jis yra gana įspūdingas ir tiesioginis.

2. Vizualinės prototipo ypatybės

Be abejo, prototipas turi apimti estetines gaminio savybes, kurios turėtų būti, ir pabandyti pritaikyti galutinę versiją. Iš esmės tai yra produkto esmė, jame nėra HTML / CSS / JS, todėl nereikia atsižvelgti į serverį ir duomenų bazę.

3. Prototipų testas

Prototipų testavimas yra pagrindinis žingsnis prototipų kūrimo procese, kuris yra vienas iš pagrindinių viso proceso etapų. Bet kaip atlikti tinkamumo naudoti testus, čia yra didžiulė tema. Paprastas testas gali kainuoti maždaug valandą, pakanka išbandyti 5 ar 6 pagrindinius siužetus. Čia yra keletas DUK, pateiktų kaip nuoroda:

  • Kaip vartotojas pradeda užduotį? (Ieškote ar naršote?)
  • Ką pirmiausia daro vartotojas? o toliau?
  • Kaip jis priima galutinį sprendimą?
  • Ar jie supranta projekto ketinimą? Ar yra kokių sunkumų?

Tai yra nuolatinis gaminio prototipo kūrimo procesas, kurį reikia nuolat kartoti ir tobulinti.

Prototipų kūrimo įrankiai

„Mockplus“

„Mockplus“ yra „viskas įskaičiuota“ prototipų formavimo priemonė, skirta greitam bendravimui, greitam dizainui ir greitam peržiūrai. Tai leidžia kurti maketus mobiliesiems („Android“ ir „iOS“), darbalaukiams (kompiuteriams ir „Mac“) ir žiniatinklio programoms. Į „Mockplus 3.2“ ji įtraukė vartotojo sąsajos srauto projektavimo režimą, kartotuvą, demonstracinius projektus ir šablonus bei eskizų importą. Kitos funkcijos, tokios kaip „Mind Map Design Mode“, bus pateiktos versijose po „Mockplus 3.2“.

https://www.mockplus.com

„iDoc“

„IDoc“, kaip dizaino perdavimo priemonė, yra integruotas bendradarbiavimas, dizaino šaltinio tiekimas, taip pat lengvasis prototipų kūrimas. Sklandi darbo eiga leidžia UI dizaineriams įkelti vaizdinius scenarijus iš „Photoshop“, „Adobe XD“ ir „Sketch“ papildinių.

Nustatyti interaktyvius saitus lengva ir paprasta, pridedant viešosios interneto prieigos tašką, kad per kelias sekundes būtų galima sukurti prototipus. Naudodamiesi 7 gestais ir 13 animacija, galite lengvai pasiekti spustelėjamą interaktyvų prototipą. Hotspot turi 3 atgalinės nuorodos, pagrindinio puslapio ir išorinės nuorodos nustatymus. Tyrinėkite daugiau, tai jus labiau nustebins!

„UXPin“

„UXPin“ sukūrė daugiau nei 900 rūšių skirtingų UI elementų, kad galėtumėte sukurti vielos rėmus ir prototipus. Jo reaguojančio lūžio funkcija leidžia vartotojams sukurti reaguojančius prototipus ir vielos rėmus, kurie gali veikti skirtinguose įrenginiuose ir skiriamąja geba.

Kas yra maketas?

Maketas yra „vaizdinis scenarijus“, naudojamas pateikiant bendrą produkto vizualinį dizainą. Jis turi turtingesnį vaizdinį elementą nei vielos rėmai, įskaitant grafiką, išdėstymą, spalvas ir kitą išsamesnį vaizdinį pateikimą. Tam tikru mastu tai yra galutinis produkto dizainas.

Kaip ir vielinis rėmas, maketas yra statinis ir neveikiantis. Daugiausia dėmesio skiriama gaminio išvaizdai, pridedant daugybę vaizdinių elementų, kad pasiektumėte ištikimybę. Tai dažnai naudojama diskusijose dėl vaizdinio dizaino, norint greitai gauti atsiliepimą ir patobulinti produkto vaizdinį dizainą.

Dizaino srautas

Įgiję dizaino esmę ir žinodami skirtumus tarp vielos rėmo, maketo, prototipo, jūs stovite priešais vartotojo patirtį kuriančio dizaino pasaulį.

Jei sukonkretinsite gaminio projektavimo serijas į darnią ir efektyvią darbo eigą, nutiks nuostabių dalykų.

Patarimai

  • Kurdami vielos rėmą, pabandykite naudoti taisomus ir daugkartinio naudojimo elementus. Tokiu atveju jūs tiesiog toliau tobulinsite elementus, kad galėtumėte sukurti prototipus, paremtus vielos kadrais.
  • Kai kuriate vielos rėmus, pabandykite surinkti savo komandos ir klientų mintis ir nuomones bei pabandykite atspindėti juos laidų rėmų projektuose.
  • Naudokite savo patogiausią įrankį

Jus taip pat sudomins:

Geriausi UI / UX dizainerių 2017 metų maketų ir laidų projektavimo įrankiai ir programos

UX vs UI vs IA vs IxD: 4 apibrėžtos painios skaitmeninio dizaino sąlygos

Geriausios UI / UX dizaino knygos ir šaltiniai dizaineriams

Iš pradžių paskelbta svetainėje www.mockplus.com.