1. Functional structure diagram and information structure diagram
"Function" is interpreted on Baidu Encyclopedia as referring to the beneficial effect played by things or methods; efficacy.
"Information" is interpreted on Baidu Encyclopedia to refer to the objects transmitted and processed by audio, news, and communication systems, and generally refers to all content communicated by human society.
This explanation may be too literary. For me, for software, "function" refers to the effect of clicking on the interface of each module , such as the effect of deleting data generated by clicking the delete button, and sending information to the other party by clicking the send button. "Information" refers to the content displayed on each module interface and the content of the form that needs to be filled in . For example, on a login interface, the content that needs to be filled in such as password, account number, and mobile phone number is information.
The functional structure diagram is intended to analyze the functional components of the module.
The information structure diagram is intended to analyze the information displayed on the page.
But when we play with the app, we sometimes feel that we don’t know where to start analyzing the functions. The cumbersome operations can easily make us confused and unable to start.
Let me analyze Taobao's shopping cart (the wooden method, Taobao is too large, we can use small modules to practice):
Figure 1.1 is a screenshot of the Taobao shopping cart.
First analyze the information, observe the content displayed on the current interface, and adhere to the principle of top-to-bottom, left-to-right, as shown in the figure, on the home page of the Taobao shopping cart, the total number of products in the shopping cart and the default delivery address are displayed , The name of the store to which the product belongs, the store icon, the product icon, the name of the product, the price of the product, the quantity of the product, the specifications of the selected product, the comparative price of the product, the total price, and the quantity of the selected product.
Then analyze the function, we can start with the button, the obvious settlement, management, select all, increase the number of products, reduce the number of products .
Click Checkout to go to the order confirmation page;
Click Select All to select all items in the shopping cart;
Click to increase the quantity of the product, that is, to purchase the quantity of the corresponding product;
Click to reduce the quantity of the product, that is, reduce the quantity of the corresponding product in the shopping cart;
The above four buttons all have obvious effects, and clicking Manage only changes the page, as shown in the figure below:
After clicking Manage, it is still the home page of the shopping cart module, and the checkout button disappears, replaced by move to favorites, delete and clear. The content of the displayed information has not changed. Although the total price and the selected product quantity are not displayed, they still exist in this interface.
Analysis function:
Click Move to favorites to add items to favorites;
Click Delete to remove the selected item from the shopping cart;
And clicking to clean up, just like clicking on management, the page has changed, as shown in the following figure:
As shown in the screenshot of Taobao shopping cart in Figure 1.3, after clicking Clean, a pop-up window pops up, and the displayed buttons include move to favorites and delete, which are exactly the same as the above-mentioned functions, so there is no need to analyze it again. However, the content of the displayed information is quite different, showing the products that were added to the shopping cart 30 days ago and the products that were added to the shopping cart 7 days ago.
Is this the end? No no no, not really.
Analyzing software products requires constantly playing with the software, clicking around to see if there are any unexpected surprises
When clicking the specification parameter "S; orange short sleeve" of the product selected in the picture, the SPU of the corresponding product will be displayed (Standard Product Unit (standard product unit) SPU is the smallest unit of product information aggregation and is a set of reusable , a collection of standardized information that is easy to retrieve, which describes the characteristics of a product), for users to choose.
In terms of function, in simple terms, specification parameter selection.
In addition to providing specification parameter selection, we can also see the View Details button.
Although after clicking to view the details, you will jump to the product details page, but it is also a so-called function.
After the page analysis is completed, start to draw the information structure diagram and function structure diagram, as shown in the following figure is the information structure diagram:
The following figure shows the functional structure diagram:
Dangdangdang~
The functional structure diagram and information structure diagram of the Taobao shopping cart are completed.
2. Product structure diagram
When I first designed the company's e-commerce products alone, I was a little at a loss. Although my life has long been integrated into e-commerce systems such as Taobao, JD.com, and Dangdang.com, it was only when I really wanted to be on my own that I realized that they have many functions and information. very complicated. Although Zhao Hu draws a cat, even if he knows to start from the head, he doesn't know whether to draw the ears or the eyes first. At this time, we need a product structure diagram to sort out our design ideas.
The product structure diagram is a combination of the function structure diagram and the information structure diagram. Before the prototype design starts, the product structure diagram can help us sort out information and logic, and it is a simple way of expressing the prototype diagram. In addition, it is also a bridge for product and R&D communication, which is convenient for evaluating development plans in the early stage of R&D.
Combining the above function structure diagram and information structure diagram, it is the product structure diagram shown in the figure below:
