Differences between 6 prototype file formats

Here we will introduce the 6 most commonly used prototype file formats and their respective advantages and disadvantages. I believe that friends who make Internet products will not be unfamiliar with the word "prototype". It is often talked about by all kinds of people just like "user experience". Prototypes are a way for users to experience products in advance, communicate design ideas, and demonstrate complex systems. At its core, a prototype is a communication tool. Here we introduce to you the 6 most commonly used prototype file formats and their respective advantages and disadvantages.

1. Mockplus prototype diagram format (.mp)

Mockplus is a rapid prototyping tool. With just one drag and drop, you can complete the prototype interaction settings, and the interaction is completely visual, extremely simple and intuitive. A large number of packaged components and icon resources are also a major feature.

advantage:

• The production efficiency is very high, suitable for designers and product managers who use the "fool-like" method to make prototypes, with almost no learning required;

• The most comprehensive and convenient prototype demonstration support, including: direct demonstration, export of picture demonstration, export of demonstration package that can be run independently (Win/Mac), online and offline HTML demonstration. On the mobile phone, you can demonstrate directly through mobile browser demonstrations and mobile Apps;

• Unique pop-up panel and content panel components can be flexibly edited to easily complete common interactions;

• The editing method for team projects is easy to understand and easy to use. Online review is great for collaboration.

shortcoming:

• Requires Mockplus software support to edit and demonstrate;

• Some complex interactive effects are not supported for the time being;

• Support for PRD (Product Requirements Document) is not enough.

Practicality: ★★★★

2. Prototype drawing in Sketch format (.sketch )

Sketch is a vector drawing application for all designers. Vector drawing is also a common way to design web pages, icons and interfaces.

advantage:

• Humanized and innovative design methods and editing operations, very easy to use;

• Supports exporting a variety of (PDF, JPG, TIFF, SVG, etc.) format prototype design drawings can be exported to various customized sizes with one click;

• Rich third-party plug-ins enhance the overall functionality.

shortcoming:

• You need to make every detail yourself, not suitable for prototype designers who want to express their ideas quickly;

• Currently only the Mac version;

• Requires Sketch software support. Of course, many other software can also support import and export;

• does not support file export in PSD and AI formats;

• If you do not use Third-party plug-ins cannot directly demonstrate Sketch prototypes on the mobile phone.

Practicality: ★★★

3. Prototype diagram in HTML web page format (.html )

The prototype diagram in HTML format is also a very common and practical prototype file format. At present, the mainstream prototype design tools all support the export of prototype diagrams in .html format. Here is Mockplus as an example:

##Advantages:

##Can be used on any computer or mobile phone with a browser Open the HTML prototype for direct demonstration;
supports displaying the directory of the web page on the left side of the browser;
In the computer browser, you can Scan the QR code with your phone to demonstrate immediately on your phone;
supports complete page jumps and interactions;
supports multiple people in the prototype Add comments on the page;
supports multiple people to add comments on the prototype page and post detailed review opinions.

shortcoming:

Does not support re-editing of HTML web page prototypes.

• 
  

## Practicality: ★★★★

4. Prototype drawing in picture format (.png or .jpg)

All major mainstream prototyping tools support it and can be exported as png or jpg images. Generally, a single page is exported. It is reported that Mockplus will be able to directly export UIFlow images composed of multiple pages (including page annotations and connecting lines) in a soon to be released version.

advantage:

• Can be viewed and edited on any device;

• When used for delivery , with high visual fidelity;

• Using UIFlow, you can visually display multiple pages and understand the process and logical relationships of the prototype project.

shortcoming:

• Unable to demonstrate interaction;

• Unable to edit continuously;

• Since both formats are non-vector, if Zooming, the clarity of the prototype is easily affected.

Practicality: ★★★

5. Prototype drawing in PDF format (.pdf)

##Advantages:

• pdf format is relatively universal;

• Supports vector scaling.

shortcoming:

• You need to install a pdf viewer on your computer or mobile phone first;

• cannot achieve a complete interactive demonstration, use the link in the pdf to insert, and only supports some simple pages Interactive jump;

• The page size and proportion of pdf are difficult to automatically match with the mobile phone;

• is difficult to continue editing. If you need to re-edit a certain page in the PDF, then you need to extract a certain page from the multi-page PDF file, and then merge it into the multi-page PDF file after modification.

Practicality: ★

6. Prototype diagram in slide format (.ppt or. key)

You can use Powerpoint for Windows or Keynote software for Mac to make prototypes.

##Advantages:

The production is very simple, anyone can get started directly, and the learning cost is zero;
Due to the large number of built-in animation effects, it is easy to implement interactive effects at certain times and the effect is good;
Suitable for writing a large number of Notes to form documentation.

shortcoming:

It is difficult to fully express the interaction;
If you do a real machine demonstration, the page will be difficult to adapt and the operation will be inconvenient;
More suitable for reports and speeches.

Practicality: ★

More design information (tutorials and experience sharing), all in:

Blog | Featured Best product design and UX/UI design resources

The above is the detailed content of Differences between 6 prototype file formats. For more information, please follow other related articles on the PHP Chinese website!