Flowchart: It graphically reflects a series of operations with specific logical relations carried out by a specific subject to meet specific needs. In order to simplify it, a flowchart is a diagram representing a series of operations. This operation process has a specific subject, which is to meet specific needs and has a specific logical relationship. For example, in the shopping process in JD.COM, the specific subject is the user, the specific demand is shopping, and the specific logical relationship is the logic of the user's shopping process.

There are three flow charts involved in product design: business flow chart, task flow chart and page flow chart.

Everything has a process, including eating, sleeping and brushing your teeth. When brushing your teeth, you should first pick up your toothbrush, squeeze toothpaste, brush your teeth, rinse your mouth, wash your toothbrush and put away your toothpaste toothbrush.

You have found a pain point for users, and you want to solve it. After product positioning and demand analysis, you need to analyze the whole business model, and you need to consider which subjects are involved in several problems. (2) what are the tasks of each subject? (3) How to contact all subjects?

This is the swimlane diagram of online shopping payment, which is used to reflect the business process. The above swimlane map involves sellers, buyers, third-party payment, banks and other subjects; Each discipline has its corresponding task; Arrows are used to indicate the order of each task.

Swim chart analyzes the whole business process from the strategic level, and then breaks it down into how to operate at each task level. For example, the buyer's task of purchasing goods includes searching for goods, browsing search results, viewing the details of goods, entering an order task if satisfied, and returning the search results or searching again if not satisfied. This is a specific task flow.

When drawing a specific task process, we should pay attention to the whole process to the local process, from the main process to the branch, from the normal process to the abnormal process. For interaction designers, the subject of task flow is generally the user of the product, and the task flow diagram reflects the behavior of the user.

Taking Didi and Yizhi as examples, taking a taxi is the main process, and checking the itinerary, checking coupons and setting are the branch processes. When designing, we should first consider the sliding process, and then improve other processes; It is a normal process for users to take a taxi normally, and it is an abnormal process for the network to be abnormal and the taxi can't be taken during peak hours. Consider the normal process first, then the abnormal process, and the abnormal process must be considered comprehensively. The logical loopholes of products are mostly because the abnormal flow is not considered clearly, so drawing task flow chart can effectively reduce the logical loopholes of product prototype diagram.

Although the flow chart is simple, it also has a set of rules. Draw according to the rules so that you won't be laughed at.

Through the swimlane diagram and flow chart, the business process and task process of each function are clearly sorted out in a graphical way. Among them, the task flow chart intuitively tells us what the whole business model is, which subjects are involved, and which tasks to complete under these subjects; The task flow chart shows the main tasks and branch tasks, and describes the general process of the tasks.

The object of page flow chart is page, which is the most basic unit of Internet product design. Whether APP, H5 or PC, these products are all composed of pages. Page flow describes which pages users need to use to complete tasks. That is, where I am, what I have done and where I can go. Page flow has three elements: page, action point and connector. Take the page flow of shopping as an example: