_edited.jpg)
After experiencing the rapid development of the Internet industry today, the pace of the industry has gradually slowed down, and the structure and development process of Internet companies have been gradually improved, and product development work has also become a unique feature and process of China's IT industry.
From the flat development process of Leader+UI designer+developer in the past, to the current demand side+product side+interaction designer (hereinafter referred to as UX designer)+UI designer+operation/market connection+developer complete The development process, which means that the development of a product becomes more nuanced, more specific, and more democratic.
This article will focus on the output of interaction designers – the details of interaction documents. At the same time, because UX designers are still an emerging position in today’s view, they will additionally explain the job background and related work content of UX designers. Background to this article.
The work of an interaction designer
The existence of UX designers has gradually transferred the prototyping work in the original work of product managers to UX designers, so that b2b data product managers can pay more attention to the strategic level of demand and be more able to design at the strategic level. At the same time, the UX designer also shares the UI designer's layout design, jump design and other non-original work, so that the roles in the development process can focus more on their own work.
Interaction designers, UX designers, and some companies also call them UE designers. The specific work content can be considered as follows:
Digest the requirements, make them realizable, and make corresponding interactive prototypes;
Specify the data format and style, specify the display method of data, and field restrictions;
Specifies the usage specifications of controls;
From the height of the functional process, sort out the page level of the function;
Specifies the front-end and back-end interactions of data;
define critical states;
The regulation and simulation of page switching animation, etc.
Different companies may have different definitions of the work content of interaction designers, but in general, the above are the main work content of most interaction designers. In such a job, the interaction designer basically fills the gap between the product manager and the UI designer, and completes the details of a product from the development and design perspectives.
2. The output of the interaction designer
As the output of the interaction designer, the interaction document is an important document that links the upstream and downstream of the development process, and it needs to have good readability, uniqueness and timeliness.
Readability refers to whether product managers, designers or developers need to understand;
Uniqueness means that for a development requirement, there must be one and only one interactive document. For a project, the corresponding interactive document must also be a single copy (it can be a collection of interactive documents). Even if there are multiple versions, the old version must be marked as "archive for future reference", and the outdated time must be clearly noted;
Timeliness means that the interactive documents still in use for a requirement or a project must be up-to-date and conform to the current requirements and product output.
This article focuses on the composition of the interactive document and its writing method (based on the China Mobile Interactive Document Specification).
Third, the composition of interactive documents
Considering the working environment of the domestic IT industry, Axure-based prototyping may be more convenient to open up the upstream and downstream of development.
Probably because the prototypes made by Axure are not so beautiful and convenient, some product managers and UX designers may have turned to interaction design software such as Sketch, or used Flinto to simulate interactive effects. However, because most of these software cannot be cross-platform, considering that many companies do not have the ability to fully adopt MAC office, it is recommended to use Axure for prototyping.
Interactive documentation generally consists of the following parts:
1. Interactive documentation and logs
Describe the project or function for which the interactive documentation is directed;
The log records its creation time, modification time and modification reason and content;
The author of the document and the last update time are recorded.
Interactive Documentation Instruction Example
Interactive document update record/log example
The Title of the interactive document effectively ensures the uniqueness of the interactive document, that is, the document corresponds to the XX project or the XX function of the XX project;
Through the author, version number, creation time and update time, it is convenient to find the corresponding time node and the person in charge of the document when the content of the document is in doubt, which is convenient for docking and correction;
In the update record, it is necessary to effectively indicate the version number, update time, update content and modifier, so that when there is doubt in the content of the document, it is easy to locate which part has a problem, who is the connection person of this part, and the time node is clear. It is convenient for version traceability and clarification of responsibilities.
2. Document content structure
It roughly includes module name, function flow chart, page description, page jump relationship diagram, etc.
Example of interactive document composition structure
In the structure of the document content, it must be ensured that the description and log of the interactive document are located in the head, so that it can be easily consulted at any time;
Layers in Axure need to be used flexibly in formal content, such as grouping and page icons. Generally, we think that the page description and page jump relationship are unified into a functional process or a group, so that it is logical and can also ensure the layering of the document content, which is convenient for positioning and expansion during reference;
Always adhere to the principle of "one page describes only one function", so as to ensure the appropriate amount of content in a single document page for easy reference.
page description example
After the above content is determined, it can be ensured that the structure of this interactive document is clear enough and easy to consult. Next, we will explain how the formal content of the interactive document should be written.
Fourth, how to write interactive documents
When the composition of the interactive document is determined, it has been ensured that the module division of the description object is clear and clear, does not overlap too much with other modules, and is unique, up-to-date, and capable of development execution.
1. Functional flow chart
The functional flow chart is used to clarify the functional logic and is a must for developers. The function flow diagram should be drawn only for the function of a module in the document, not for the entire interactive document description object. If the flow chart is too large, it will directly lead to a decrease in readability. Therefore, don't be too happy, just describe a function clearly.
For example, in an interactive document describing the entire site of a website, there are multiple functional modules that need to be described, such as login/registration, user mobile phone number binding, order/payment, etc. We should clearly describe the respective functional process of each function, rather than connecting them together.
I will not introduce the drawing method of flowcharts in detail here. You can refer
Flowchart example
2. Page description map
The page description diagram can explain in detail the source of the elements in the interface, the interaction mode of the controls, the style of the data, the length of the field, and the state changes of the page elements.
This page is for reference only, you don't need to be so meticulous in actual work
In addition, I personally do not recommend using various Icons in the page production of interactive manuscripts. On the one hand, it is excessively decorated, and on the other hand, the styles of various Icons are different, which directly reduces the aesthetics of the interactive manuscript. The beauty of interactive manuscripts is reflected in unity and simplicity, and the key information is always the description of functions and the regulations for various situations.
In the page description section, it must be ensured that only one function is targeted in an interactive page. For example, registration and login consists of registration and login. The page description page must be separated. The registration page description diagram only lists the pages related to the registration function, and the login page description diagram only lists the pages related to the login function.
page description page example
3. Page jump relationship diagram
The page jump relationship diagram is an important core that connects the page description diagram in series, explaining the jump relationship between pages. It is also a concrete representation of functional flow chart. The rules here are also consistent with the function flow chart, which is only for a certain module, not for the description object of the entire interactive document. On the one hand, it is to prevent too much content on a single page interactive page, which is not conducive to viewing. On the other hand, if there is too much content on a single page, it will also cause Axure to run slowly.