How to accurately convey the dynamic design to the engineer?

Source: Internet
Author: User

With the development of software and terminals, today's user experience design in the role of dynamic effect is becoming more important, there are more and more designers began to try to "move" their work. But in the actual work, I believe that we often have such a question: how can you carefully design the dynamic effect of accurate communication to the engineers, to avoid the deviation of the implementation? Below I want to according to their own experience, to talk about this topic.

Imagine, on a quiet night, that you are struggling for a transition animation of an interface, and suddenly a light of inspiration crosses your mind and the perfect solution emerges. The most you want to do at the moment, I am afraid, is not to read the development document research implementation principle, "I have to show it immediately." ”

Yes, we are designers, designers have to do is visualization. For the dynamic effect, the description is always nowhere near, the design of their own mind the most rapid visualization, is the first step to achieve.

One, Accurate display: Video demo

Video Demo is a good start, a video that can be repeatedly played and viewed on most devices is the best medium for people to quickly understand their ideas. Production of video demo, I most commonly used tools are after effects. AE for the control and performance of dynamic efficiency, no one can now out of the right, is my idea of the best conceptual design tool.

In addition to video, AE's other advantage is that its output of PNG sequence frame material can be directly applied to some PC or even the mobile side of the software, as an implementation effect.

Second, the Operation experience: Interactive prototype

The limitations of video demo are not interactive, and a large part of the dynamic effect is triggered when the user interacts with the interface. This part of the dynamic start time, and gesture relationship, only rely on video demo can not 100% accurate communication. At this point, if you can have an interactive prototype, many problems will be solved.

For interactive prototypes (Prototype), there have been a lot of articles on the web for discussion, and a variety of production tools (Flash, Adobe Edge, Quartz Composer, Keynote, Framer, Pixate, Form ...), How do we choose? For this question, I mainly look at two points: 1, the production of a good prototype is convenient for many people to share. 2, whether can directly output the parameters that can be used for development.

Based on these two points, my personal first choice is flash.

Because of Apple's reasons, Flash is now in a declining situation. But as an action-efficient prototyping tool, it has some unique advantages.

Advantage 1: You can directly import AE generated sequence frame footage.

This is too important for me, the one with AE as the starting point for dynamic design. It means that without any duplication of effort, just add some AS3.0 interaction code in Flash to make the prototype and make sure that your original design ideas are not compromised at the prototype stage.

Advantage 2: You can export a. apk or. IPA installation package, shared to anyone who has a cell phone.

Because of my work often need to communicate in different places, the prototype of the transitivity is a very critical demand (always can not send the computer to see the past ...). Flash packaging release function, this time came in handy. The prototype is packaged with a apk file in air for Android, which is easy and enjoyable to install on the other phone.

Some other tools to focus on, there are pixate and forms, which can be transmitted remotely through shared engineering files, and can be projected in real time via the official app on the phone, with the disadvantage that they can only do some basic results and innovate a little, but they are constantly iterating over the updates, In particular, the latter, has just been acquired by Google, the future will probably have rapid development.

My personal Second tool choice is framer Studio. When I showed the prototype to the engineer, I was often asked this question: "Can you give us a look at the source code?" The atmosphere is usually awkward, because flash or form, their prototype can only play the role of demonstration, and can not directly generate the code to help develop. At this point, in addition to the newspaper class now learning Android or iOS development, there is no other way? The answer is: "Yes!" Framer Studio gave us a glimmer of light.

Framer Studio is a purely programmable prototyping tool that has a strong dynamic implementation capability, and its language is based on JavaScript-derived coffeescript. Although there is no small difference between grammar and Androidios, there is a lot of logic that can be common to only the effect of this piece.

Of course, its learning costs will be higher, but when you take a piece of framer source to the engineer to see, some of the animation parameters and implementation logic, how much can give them some practical help, so pay and return is proportional. On the use of the framer process, Twitter's designers share their experience, and you can look at this article: "Profiling the Twitter video function design Process"

Also, if you're focused on the iOS platform, you can just try origami, a prototype tool developed by the Facebook team that links the nodes without writing code, and in its latest update, has supported the export of code for iOS and Android. This article is done by: "Introducing Origami Live"

Third, assistance development: parameter document

With the video demo, with the interactive prototype, I believe that the engineers have understood what you are going to do, then they can be happy to implement the dynamic effect? The answer is: not necessarily. Some simple action, engineers may be able to deal with the experience. If your dynamic design is complex and involves a lot of parameters and rate changes, it may be biased only by your description and the engineer's visual perception. At this point, you need the help of the parameter documentation.

If you want your design to be accurately implemented, you must have an understanding of the principles of implementation. According to the principle of implementation, the corresponding parameters are accurately written out, this is the parameter document. For the dynamic effect, the basic parameters are nothing more than these three categories:

1, animation start Time, duration (duration offset)

2. Changing attributes (rotation position scale alpha)

3. Motion Rate (Interpolator)

iOS and Android are not the same program syntax, you can go to the official website to look at their developer documents, understand the two in the dynamic implementation of the approximate syntax format, and then corresponding to the parameters of the parameter, passed to the engineers, they can really happy development.

Of course, the development process and the continuous communication with the engineer (some such as pixel position, the details of different models of the screen, including possible errors), transposition thinking, can not throw him a document or demo after doing Shang, it is irresponsible performance.


Simply put, there are three steps you can take to accurately communicate your design.

The first step: to quickly visualize.

You can choose any use of convenient tools, the idea of their own rapid and accurate presentation, is already half the success.

The second step: maximize the restoration of the use of the scene.

If it's PC-side, show it on your computer. If it's a moving end, show it on the phone. If you can operate, it is best to do interactive prototypes, of course, in terms of time cost permitting.

The third step: the design parameterization, as far as possible to let engineers feel the development of the situation.

Believe me, if you don't want an engineer to tune the UI color, then the same is true. A precise document is the embodiment of your professionalism.

Finally, I would like to remind you that this article mentions a lot of tools, and the tools seem to have fascinating magic. So please note, do not be in the pursuit of tools in the process of lost the source of design. There is a line in the movie "Night-People": "If you want to win the lottery, you'll have to earn enough money to buy the lottery." "Similarly, we are designers, want engineers to achieve a cool effect, you have to first put it cool design." Take every opportunity to improve your design ability! That's your most precious thing.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.