Verschil tussen UI / UX Design Concepts draaduitbreidingen, prototypes en mockup (Bijgewerkt)

telframe mockup prototype

Wat is het verschil tussen een draad, een mockup en een prototype? Een ervaren ontwerper heeft ontwerpvoorwaarden gedefinieerd voor UI / UX-ontwerpers.

De verschillen tussen draad, prototype en mockup zijn altijd verwarrend voor veel ontwerpers, ondanks dat ik een ervaren ontwerper ben, heb ik veel mensen Quora en Reddit naar deze termen zien vragen, dus wat is dat in vredesnaam? te begrijpen. Het lost veel problemen op en bespaart ontwerpers energie.

Wat is een draadframe?

Dit is een grafische structuur van een website of applicatie die inhoud en elementen bevat. Net als het ontwerp van het gebouw kost het veel werk en deelnemers om er een wolkenkrabber van te maken. Evenzo ziet het draadsnoer er eenvoudig uit en moet het worden gedaan door UX-, UI-, IxD-ontwerpers. Simpel gezegd, telframe is een eenvoudig lay-outontwerp met 3 eenvoudige maar duidelijke doelen:

  • Bevat basisinformatie
  • Teken een structuur en lay-out
  • Visualiseer de gebruikersinterface

Visuele kenmerken van bedrade draad

Visueel heeft de bedrade headset zeer duidelijke visuele beperkingen omdat er alleen eenvoudige lijnen, vakjes en grijs (verschillende grijze kleuren) voor nodig zijn.

Het bedrade scherm heeft zeer duidelijke visuele beperkingen. Over het algemeen mogen ontwerpers alleen lijnen, kaders en grijstinten gebruiken om te presteren (verschillende grijze gemiddelde verschillende niveaus).

2. Eenvoudige vectordraad

Simple Symphrams bevatten afbeeldingen, video's en tekst

3. Voordelen van elektrisch snoer

Draadconstructie is snel en goedkoop.

Zeker als je papier en potlood en draadwissers gebruikt zoals Balsamiq. Natuurlijk moet u deze ontwerptools gebruiken om u vanaf het begin goed voor elkaar te krijgen.

Vergeleken met een volledig en gedetailleerd high-definition telframe, is het veel gemakkelijker en belangrijker om ideeën te verzamelen via een high-end symframe. Waarom niet? Dit komt omdat mensen meer nadruk leggen op softwareprestaties, informatiearchitectuur, gebruikerservaring, schema's voor gebruikersinteractie en gebruik in plaats van de esthetische kenmerken van deze elementen te overwegen. In dit geval kunt u deze echter eenvoudig naar wens wijzigen, maar u hoeft geen codering en grafische bewerking te configureren.

4. Interactief symfram

Af en toe geven ontwerpers er de voorkeur aan om de betrouwbaarheid van draden te verbeteren om het belang van de gebruikersinterface in sommige opzichten te vergroten en om de logica van interoperabiliteit tussen direct testen en visuele elementen te demonstreren. Om deze problemen goed op te lossen, gebruikt het programma een interactief symfram, ook wel een gedrukt telframe genoemd.

Als je zo'n complexe draad wilt maken, heb je een UXPin nodig, een hulpmiddel voor het installeren en prototypen van draden. Het maken van een interactief prototype kan de beste presentatie zijn voor een ontwikkelteam en klanten. U vraagt: 'Wat gebeurt er als ik op deze knop druk?' Als u een probleem heeft, hoeft u alleen maar te klikken en klanten te laten zien hoe ze met het interactieve prototype moeten omgaan. Het is zelfs indrukwekkend en direct.

5. Richt de draad voorzichtig

Als je hem de telfram aan hem moet geven, moet je voorzichtig zijn met de man die het absoluut waard is. Hij kan uw klant zijn, maar ook uw niet-technische manager. Maar hij weet niet dat de draad en het eindproduct onderling met elkaar verbonden lijken. Het is dus mogelijk dat hij de interne communicatie en werkmodus tussen hen niet begrijpt. Dus je moet presenteren en hoe je de juiste beslissing neemt.

Bekabelde ontwerptools

Papier en potlood

Papier en potlood zijn de gemakkelijkste hulpmiddelen voor Wireframing-ontwerp. Teken een willekeurige strook met papier, dit is een simpele draad met simpele lijnen en dozen. Met zijn hulp kunnen ontwerpers ideeën intuïtief presenteren met meer gedetailleerde tekst of mondelinge communicatie met klanten en leidinggevenden. Maar dit wordt niet gebruikt in het officiële project voor grote bedrijven.

Balsamico

Af en toe geven ontwerpers er de voorkeur aan om de betrouwbaarheid van draden te verbeteren om het belang van de gebruikersinterface in sommige opzichten te vergroten en om de logica van interoperabiliteit tussen direct testen en visuele elementen te demonstreren. Balsamiq presenteert een set elementen voor statische telframes op twee verschillende manieren. Zijn handgetekende stijl helpt zich te concentreren op de lay-out, het functionele ontwerp, alle kleuren zijn wit en zwart. Je hoort dus geen klacht over de kleurinstellingen en het visuele effect.

Wat is een prototype?

De vraag van het prototype is hoger dan die van de telfram. Het verschil is dat het prototype interactief moet zijn en, voor zover mogelijk, een prototype met hoge resolutie dat past bij de eindgebruikersinterface. Tegelijkertijd biedt het een complete ervaring voor testers door de daadwerkelijke productinterface en functionele interactie te simuleren.

1. Voordeel van het prototype

"Het creëren van een teamvriendelijk prototype helpt meer connectiviteit tussen ontwerpers en ontwikkelaars."

Waarom is het zo belangrijk? Het prototype wordt meestal door gebruikers gebruikt voor producttests. Het testen van het prototype kan in een zeer vroeg stadium kosten en tijd besparen bij het ontwikkelen. De architectuur van het product neemt dus niet af door de onredelijke interactieve interface. Het prototype is dus de perfecte prestatie voor ontwerpers en ontwikkelaars om het product te testen.

Bovendien is het een voordeel dat gebruikers prototypen kunnen aanbieden om feedback te verzamelen, waardoor u alle details van uw product leert kennen en het hele team kunt inspireren. De meeste prototyping-tools kunnen snel en efficiënt prototypes bouwen, maar hoeven niet te worden gecodeerd.

Het doel van het prototype is duidelijk: de interactie tussen gebruikers en interface zoveel mogelijk vereenvoudigen. Wanneer een knop wordt ingedrukt, moet er een passende handeling worden uitgevoerd en verschijnen relevante pagina's, waarbij wordt geprobeerd de volledige productervaring te imiteren. U vraagt: 'Wat gebeurt er als ik op deze knop druk?' Als u een probleem heeft, hoeft u alleen maar te klikken en klanten te laten zien hoe ze met het interactieve prototype moeten omgaan. Het is zelfs indrukwekkend en direct.

2. Visuele kenmerken van het prototype

Het prototype moet natuurlijk de esthetische kenmerken van het product hebben en proberen te passen bij de nieuwste versie. Kortom, dit is een productskin zonder HTML / CSS / JS en u hoeft niet door de server en database te bladeren.

3. Prototyping-test

Prototypetesten is een belangrijke stap in het prototypeontwerpproces, wat een belangrijke stap is in het totale proces. Het uitvoeren van een validatietest is een enorm onderwerp om hier over te praten. Een eenvoudige test kan tot een uur duren, met vijf of zes belangrijke gebeurtenissen om te testen. Hier zijn enkele veelgestelde vragen ter referentie:

  • Hoe begint de gebruiker? (Zoeken of bekijken?)
  • Wat doet de gebruiker als eerste? en daarna?
  • Hoe neemt hij de uiteindelijke beslissing?
  • Begrijpen ze het doel van het ontwerp? Zijn er uitdagingen?

Het maken van een prototype van een product is een continu proces dat iteratie en verbetering vereist.

Prototyping tools

Mockplus

Mockplus is een uitgebreide prototyping-tool voor snelle ruis, snel ontwerp en snelle weergave. Hiermee kunt u mockups maken voor mobiele (Android en iOS), desktop (pc en Mac) en webapplicaties. Mockplus 3.2 heeft een UI-stroomontwerpmodus, herhalingshardware, demoprojecten en sjablonen en schetsimport toegevoegd. Andere functies, zoals Mind Map Design Mode, zullen beschikbaar zijn in versies na Mockplus 3.2.

https://www.mockplus.com

iDoc

Werk samen met iDoc als hulpmiddel voor het indienen van ontwerpen en lever zowel ontwerpbronnen als een prototype van licht. Door het continue proces kunnen UI-ontwerpers visuele scripts laden van Photoshop-, Adobe XD- en Sketch-plug-ins.

Het is heel gemakkelijk en ongecompliceerd om interactieve verbindingen tot stand te brengen door een contactpunt toe te voegen om binnen enkele seconden prototypes te produceren. Met 7 gebaren en 13 animaties kunt u een interactief prototype realiseren dat gemakkelijk kan worden afgedrukt. Er zijn 3 instellingen voor de link, de startpagina en de externe link. Lees meer, het zal je nog meer verrassen!

UXPin

UXPin heeft meer dan 900 verschillende UI-elementen gemaakt, zodat u draden en prototypes kunt maken. Dankzij de responsieve breekpuntfunctie kunnen gebruikers gevoelige prototypes en simkaarten maken die op verschillende apparaten en resolutie werken.

Wat is een mockup?

Mockup is een "visueel script" dat wordt gebruikt om het visuele ontwerp van een product weer te geven. Het heeft een rijker visueel element dan snaardraden, inclusief afbeeldingen, lay-out, kleur en andere gedetailleerde visuele presentaties. Dit is tot op zekere hoogte het uiteindelijke ontwerp van het product.

Net als een bedrade draad is de Mockup statisch en werkt niet. Het richt zich op het uiterlijk van het product door veel visuele elementen toe te voegen om een ​​grotere nauwkeurigheid te bereiken. Het wordt vaak gebruikt in visuele ontwerpdiscussies om het visuele ontwerp van producten te verbeteren.

Ontwerpstroom

Zodra u de essentie van design, het verschil tussen teleframes, mockups, prototypes, leert kennen, loopt u voorop in de wereld van user experience design.

Als u uw productontwerpserie kunt omzetten in een duidelijke en efficiënte workflow, zullen er verbazingwekkende dingen gebeuren.

Tips

  • Probeer bij het maken van draad bewerkbare en herbruikbare elementen te gebruiken. In dit geval ga je door met het wissen van de elementen om prototypes uit te voeren op basis van de eenvoudige draden.
  • Probeer bij het installeren van draden ideeën en ideeën van uw team en klanten te verzamelen en probeer ze te weerspiegelen in symfonieontwerp.
  • Gebruik je handigste hulpmiddel

Ook geïnteresseerd in:

De beste mockup- en teleframing-ontwerptools en -toepassingen voor UI / UX-ontwerpers van 2017

UX vs UI vs IA vs IxD: 4 Mixing Digital Design-termen

Beste UI / UX Design-boeken en bronnen voor ontwerpers

Oorspronkelijk gepubliceerd op www.mockplus.com.