android--comparison of the advantages and disadvantages of the five foreign app prototype design tools

1, Proto.io

Web-based interface with debugger under iOS and Android

Proto.io This Web application is surprisingly powerful, it has a lot of features. However, because all work relies on drag-and-drop, click Buttons, and select list values, sometimes it's a little overwhelming to find the settings you need.

Given the intrinsic nature of the if prototype--different objects move at different speeds--I have to add some custom JavaScript calculation scripts. The single-line text box provided by Proto.io is too small for lengthy calculation scripts. To be able to get an overview of the scripts, I have to keep them in a text file on my computer. In particular, it is important to note that these JavaScript expressions may fail without any warning message. If something doesn't work, be sure to check your browser's console. (I encountered an error that was caused by a variable that contains a negative value.) ）

Preview while creating a prototype

This is pretty annoying: you have to click Save Project every time and then click [Preview] to see the effect you made.

Send prototypes to Customers

On the Web: simple-you can generate a public link, like this. (These connections can also be opened in a mobile browser and then added to the iOS home screen as an "app.") You can show your work to public users at Proto.io Spaces.

On mobile: You can create a free evaluation account for users and allow them to access a project. They can run your prototypes in iOS or Android apps.

The difference between a prototype and an app

Not much. But it wasn't smooth enough because I had to add a lot of interactivity to the scrolling view that contained a custom JavaScript calculation script. It's nice to run on the web, but it's too slow on the device. It seems that a simpler prototype can be played back in a normal speed.

Advantages

It is easy to make fast entity models, because there are a large library of standard UI elements, and many can be customized.

Proto.io is the only one of these five tools that is also page-based. You can include multiple screens in a project, and you can create transitions between the screens.

Support Components sync with Dropbox.

Disadvantages

No instant previews.

If you add a lot of interactions, like the example in this article, the effect slows down.

All of your prototypes are saved on the Proto.io web platform, which means that if you cancel your account, you won't be able to run them anymore. (There may be a "deposit" of your account: When you reactivate your account, your project will still be there.) The deposit account is free of charge. ）

3D dynamic effect is impossible.

Prototype example

View on Proto.io spaces (register an account and import the item into your account to see it.) ）

Price:

Pixate Studio

Free! (It was $149, until Google acquired Pixate in July 2015.) ）

Pixate Cloud

5 USD/user/month or $50/user/year, with 30 days free trial.

2, Pixate

OS x and Windows desktop apps, iOS and Android debugger

Pixate seems to have just the right balance of ease of use and functionality: It's more than a simple page-based tool, but the learning curve isn't very steep. Once you've read through the User Guide and video tutorials, you'll be able to get started. There are several demos for you to deconstruct to see how they are made.

Preview

Pixate Studio can use Xcode's iOS Simulator (Mac Edition) to run prototypes, or it can access prototypes via local WiFi with iOS or Android apps. This is a great feature, especially simulator and apps are instantly updated.

Send to Customer

If you have a cloud package ($ 5/month), you can publish a project where people can scan the QR code on the page to run prototypes using iOS or the Android debugger.

You can add an unlimited number of collaborators to your cloud account, allowing them to access prototypes, and they must log in to their account in the debugger app to access them.

Alternatively, you can simply mail the. pixate file to someone else, who can open and run it in Pixate Studio (but at the same time the customer can see how the prototype is done and can make changes).

The difference with the app

The sixth page disappears because the canvas canvas of pixate is only so wide (up to five pages).

Advantages

Easy to learn

Disadvantages

There are still problems, and sometimes you may need to bypass the bug.

Prototype example

Www.pixate.com

Price:

Pixate Studio

Free! (It was $149, until Google acquired Pixate in July 2015.) ）

Pixate Cloud

5 USD/user/month or $50/user/year, with 30 days free trial.

3. Facebook Origami

Running on Apple's Mac version of Quartz Composer, there's a viewer on the iphone or ipad for testing.

As you probably already know, origami was developed by the Facebook paper design team. Origami is not a standalone program, it is equivalent to a quartz composer plug-in. and quartz Composer is a visual programming environment, part of Apple's development toolset.

In Quartz composer, you program by connecting multiple "patches" to each other. Different patches have different functions. Origami is primarily a set of additional patches designed to design the app UI. Many people prefer this approach (excluding me) as opposed to having to write code. However, when you have to describe things like "if so, then use the value of this calculation, but if not ...", you still have to "program", but this programming is by connecting several patches, rather than writing a few lines of code.

Another mention: Ideo also created a prototype framework, called avocado, based on quartz composer. It has some features that may be handy in some projects: Bluetooth integration, an iOS interactive keyboard, a dial pad patch that interacts like a wheel, and a flip card patch, and layers can be dragged.

Preview

On the desktop: Quartz Composer has a viewer and any changes you make in the editor are instantly reflected in the viewer.

On the device: with the Origami Live app, you can test on your iOS device and your iOS device needs to be plugged into your Mac. The app responds to all gestures (touch, swipe, and so on), but it's actually just an observation window of the program running in the quartz composer. If your Mac can't run prototypes with 60fps, it won't run much faster in origami live.

Send to Customer

This is difficult. You can certainly make a screen recording of your prototype, but that's not the purpose of an interactive prototype, so you might as well do something with after effects. The only realistic way to test prototypes on other computers is to prepare the same configuration. If your client is using a Mac, she can install quartz Composer + Origami to run your prototype--and, of course, to register the Apple developer account first.

The difference with the app

It may be slower than the real guy, depending on your computer. Quartz Composer is definitely a electricity that will make your cooling fan go crazy, especially if your Mac doesn't have a powerful graphics card (like my Mac Mini), or it's connected to multiple monitors (sins!). ）。 I only use one monitor to run up to 20fps.

Advantages

Although the documentation is incomplete, there is a very active user community. In addition, you can find a lot of videos, tutorials and blog posts.

Disadvantages

It is not easy to know what to do, there are so many patches, do not know which to use.

Quartz Composer No, it's not clear that the latest version was released in November 2011. On the other hand, Apple is likely to release a replacement tool that uses the Quartz framework to do visual interaction design before shelving the tool.

Prototype example

Facebook.github.io/origami

Price:

Free! You'll also need an Apple developer account, which is free, like beer, or whatever Apple developers are drinking. (The Translator notes: "Beer Carnival" is held every few weeks by Apple to reward its employees with free beer and appetizers.) ）

4, Framer

Framer Studio is a prototyping app on your Mac, but framer.js only needs safari or chrome.

Interactive prototype design Framework Framer.js official website: http://framerjs.com/

There are no drag-and-drop, buttons or connection points, with framer you have to "write code". Programmers feel that this is as comfortable as at home, and designers are not. But it's not hard ———— Framer Studio uses a lite version of JavaScript called Coffeescript. The actual engine (Framer.js) uses javascripts, which creates a lot of possibilities: you can do whatever the browser can do, such as using an instant data connection server, or creating a Twitter client to display real-time tweets.

Preview

On the desktop: Framer Studio has an instant interactive preview on the right, and changes you make can be updated immediately.

On the device: there are apps under Android and iOS that can connect to Framer studio on the same WiFi network and automatically refresh the prototype every time Framer studio saves the changes.

Send to Customer

You can create a public page (such as this) with just a click of the mouse, and you can view it in Chrome or Safari, and the mobile browser is OK (the link can be added to the iOS home screen as "app"). The same links can be opened with iOS and the Android viewer (which is actually a borderless browser). A larger prototype like if will take a few seconds to load in the viewer, but the effect will be smooth after loading.

The difference with the app

This prototype is more capable than the other four: you can toggle login, register, and reset password mode on the most recent page. (You can't actually sign in or register, but these operations can also be reproduced in Framer.) ）

Advantages

Integration with Sketch or Photoshop is no better: When designing, you can refer to a layer or object by naming it. (Framer.js contains a Mac app Framer Generator, which can do the same.) ）

Anything JavaScript can do--such as getting instant data from a Web service, using an accelerometer--is achievable with framer.

Disadvantages

You have to write code for everything, including dynamic or interactive. You need to be familiar with or understand coffeescript, and perhaps add JavaScript.

Prototype example

Framerjs.com

Price:

Framer.js,javascript Framework, is open source free.

Framer Studio requires $99. (There is a 14-day free trial.) ）

5. Form by Relativewave

Mac app with a viewer on an iphone or ipad

The form is also very young (released in September 2014), and it is clear that it was inspired by what Facebook and Ideo did on quartz composer. The relativewave are likely to think, "What would origami be like without the burden of quartz composer?" "Origami users will feel comfortable with the form, many patches are the same, and the form contains only those patches you need.

Preview

The prototype is running on an iOS device connected via WiFi or USB. If you do not have a device attached, you will find that no readings are displayed when you double-click a connection between two patches. It would be handy to have a viewer for Mac apps, like Quartz composer, which seems to be in the plan.

Send to Customer

The free iOS Viewer is able to open the. form file, you only need to mail the files to the customer, let them run with their own iOS device.

The difference with the app

I don't think so much. If you find out, just tell me.

Advantages

Compared to origami: prototypes run in native mode on the device, so they are much more responsive than origami live.

You can use the camera, accelerometer, gyroscope and positioning function on your device. (Origami can use the camera on your Mac)

Disadvantages

Like origami, if a complex prototype is made, running like a noodle soup is sticky. Combine patches to get a better overview.

Prototype example

Www.relativewave.com

Price

Free! Mac apps used to be $79.99, and Google offered it for free last November (when form was released for just a few months) after acquiring Relativewave.

android--comparison of the advantages and disadvantages of the five foreign app prototype design tools