The article recommended today is an article on interactive manuscript writing by Netease Chongshuqing. This article is suitable for the document interactive manuscript made by Axure software on mobile terminal
including
1. What should be included in the interactive draft?
2. How to build a reasonable interactive draft structure?
3. How should each interface be placed?
4. What should a clear and readable design specification look like?
It must be difficult for a newcomer to fully understand the above questions. In fact, it is not difficult to draw a standard interactive draft, just look for the manuscript of the senior reference can learn the sixteen-seven. But because the design draft mostly involves the enterprise secret, has the strong property right attribute, therefore generally difficult to access.
I. What should be included in the interactive manuscript?
Does the interaction draft only need to include the design proposal? It’s not. The interactive draft has functions of design display, upstream and downstream collaboration, process recording and version management. Therefore, the interactive draft generally contains at least the following parts:
1, cover: used to record the version number, personnel, time and other information; Update log: it records the updated information of the interactive draft, which is convenient for others to view, and also ensures the standardization;
2. Update log: It records the updated information of the interactive draft, which is convenient for others to view, and also ensures the standardization;
3, design process: including demand information, design data record, design process record three aspects of information, the purpose is to make their own design process more structured, but also convenient to retrospectively design, summary design;
4. Interactive draft: the main body of the interactive draft, including flow charts, interface diagrams, design instructions, etc.;
Waste paper basket: used to store discarded pages, in case of later use;
Ii. How to organize the interactive draft structure?
2.1. Interaction draft structure depends on product information architecture
First of all, the “unstructured interactive script with all the interfaces on one canvas” is definitely not true. It’s a common mistake that many newcomers make. Because this approach can not adapt to large manuscripts, and the development of students in the complex network design manuscript to find information, is really hard.
The structure of the interactive draft should be based on the product information architecture. For example, the following figure shows the information architecture and interactive draft catalog of the “Local Music” module of netease Cloud Music. The interactive draft catalog can be deduced from the product information architecture. You can find this one – to – one interaction document directory structure very clear and easy to understand.
2.2. Structure and principle of interactive draft
The structure of the interaction should follow the principle of “platform-page-sub-page” (below, the page is not an interface, but a “one page interaction”). There are two kinds of objects hosted on each page, one is a single interface and the other is an interface flow (explained below).
Interactive draft structure principles
For example, suppose there is a “simplified version of netease News”, its structure might look like the following:
What is “single interface” and “interface flow”? Single interface is relatively easy to understand. For example, the “home page” in the figure above, you only need to place a wireframes of the “home page” on this page of the interactive draft, which is the so-called “single interface”. So what is the interface flow? It’s a series of interfaces (as shown below)
When do you need a “process interface”? All apps are made up of interfaces, and the elements of interfaces can be grouped into three categories: content, entry, and functionality. “Interface flow” is usually used to describe a “function.” The reason for this is that functionality, unlike content and entry, typically requires a “sequence of actions”, such as a login function or a search function. Now we look at the above case, it will be easy to understand.
3. What should each interaction page look like?
Generally speaking, each page of the interactive manuscript should contain the following contents:
Page title: It is recommended to use the “fixed to the top of the browser” function to make the page title permanent;
Interface title: facilitate cross-indexing in the interaction draft, for example, “Return to interface B”;
Interface: The recommended size is 360*640px, and the length of the page can be extended by itself;
Design instructions: Logical relationships, element states, small and micro flows, can be put in the design instructions;
Flow line: describes the logical relationship between interfaces, and can use the flow line provided by the software;
Link: point to other pages, such as branch process, development students will be very convenient to read;
Author information: This is the designer’s signature, but also convenient for others to contact the designer;
3.2. Application of grid system
Once the content of the page is determined, the layout of the content is also important. Bad layout will appear messy, how to deal with the layout problem? The author provides a “grid system” (below) that can give the design a “sense of order”. Specifically, in Axure’s layout – Grid & Guides – Grid Setup, set grids with spacing of 40px (40px is common interface sizes 320, 360, 640, 1080… And then try to make sure that all the elements fit neatly into the grid. After you use it, you will find that your interactive script is much more organized and beautiful.
3.3. Show only one process per page
Each interactive draft page should bear a maximum of one “process interface”, and additional processes can open a new sub-page. This ensures that each page of the interactive paper is dotted or linear, rather than webbed, because the webbed interactive paper is difficult to read and readers need to scroll the screen vertically and horizontally in both directions to find information (the following is a counter example).
4. Clear and readable design instructions
Design instructions are important to convey design information to the developers. If the design instructions are disordered, have poor correspondence and are not readable, it is easy for the developers to “not want to see” (very common), resulting in the design reduction degree, communication costs and other problems.
A good design specification should follow the following principles:
1. Unified location: In the interaction draft template provided by the author, all design instructions are at the bottom of the interface;
2. Clear correspondence: mark points (green points above) must be marked on the interface, corresponding to each design description.
3, provide titles: titles can greatly improve the development of students’ reading efficiency and visual search efficiency;
4, neat: the layout of multiple design instructions should be orderly, which can be easily achieved by using the grid mentioned above;
5. Close to the interface: Because the design instructions are for the explanation of the interface, so can not be too far away from the interface, or it is difficult to read the instructions on the interface. If the design specification is too much, you can use the way of dynamic panel to carry it (there is a demonstration in the attachment of the interactive manuscript template);
The following is a i.u i.c n/ucenter / 983… Interactive manuscript for students
5. A few final helpful tips
Finally, I would like to add some important hints:
1. Most of the developers have a tendency of “not wanting to read the interactive manuscript carefully”, most of which is due to the poor readability of the interactive manuscript;
2. The interaction draft is an “engineering drawing”, not a “design sketch”, so the more detailed and accurate the information is, the better;
3. Each time the interactive manuscript is updated, it should be noted in the “Update log”, and the updated place should be marked on the page. Otherwise, it will cause a lot of trouble for the development and QA students;
4. Try not to update the interactive manuscript frequently, which will give people an impression of “unprofessional” and form bad habits for yourself.
5. The fonts are PingFang SC-regular and PingFang SC-semibold, which have the best compatibility in actual measurement. It should be noted that most developers only have the default fonts of the system;