From the build page to the organizational structure

Page pages are the most basic independent elements of each site, and each page has a specific task, these pages like a chain in tandem, forming the entire site. Each page mainly provides two basic tasks to build the entire chain.

1. Help users complete the main tasks of the current page

2. Provide access to the next loop in the task chain

The current pages on the Web are primarily available for accomplishing tasks:

1. Navigate the page; Let the user find what they want and provide access

2. Detailed page; users see the details they want to know

3. Interactive page; Allow users to enter and manage data

These three kinds of combinations can eventually be combined to form a mixed page type. such as the Google Map page:

When designing a Web site, you should match the user task to the appropriate page type. If a user views an article, it needs to have navigation and detailed pages, and if the user wants to see an article or page that contains a keyword, there will be interactivity, navigation, and detail pages.

At design time, first imagine a particular scene, and list the tasks that the detail scenario may need to complete, analyze the task for three main types, navigate, consume (view detail), interact, and then arrange the same types of tasks, and imagine the pages to be built, depending on the situation, and the navigation requires a set of links, The detailed page requires a large page module, and the interaction requires a form button. When you organize page modules, each page should focus on a separate task, but if you have multiple independent, similar subtasks, consider being able to combine them.

When deciding how many pages to create for a task, consider the factors:

1. User's technical level

2. User's bandwidth

3. Information on the page

4. Users to complete the task

5. The frequency of the user to complete the task

In interface design, there are three ways to complete the interactive task Mix, the Wizard (Wizard), the Control Panel, and the tool bar (toolbar). These three each have advantages and disadvantages, such as the installation of software is usually the use of the Wizard (Wizard), so that users in order to ensure that the important steps will not be missed, of course, is also very boring, the way "Next" down, is a lot of people use the customary installation software method. and Control Panel is also used more, after the habit of use is very convenient. Toolbars, like those on Office, are rare on the web and are more likely to appear when editing text.

What happens when there are multiple tasks on the page or "Next" appears?

To optimize the "next" design based on three principles:

1. How many users will this help?

2. How often does the frequency occur?

3. How important is this next step for the user?

Based on the above three principles, any priority is established. Partitioning a page that has multiple page tasks or "Next" based on priority is important in a prominent position, usually on the left side of the page, and on the right side is often a minor part.

In a site with more tasks, more complex interaction, it is necessary to establish a site structure map. Before you build a chart, you need to be clear about the tasks that each page focuses on, as well as the interrelationships, interactions, and other aspects of the page (different depending on the project). When you organize these relationships, you need to use the site map (site maps).

What are the various forms of the website map?

1. Tree chart; This is suitable to display the hierarchy, but it is easy to exceed the depth of the water bottle space, can be used in conjunction with the comb diagram to avoid this situation.

2. Comb chart: This is more useful in long workspaces. such as directory navigation for electronic documents.

3. Star chart: This is not strict in the hierarchy, and the organization is not too deep in the case of the use of more appropriate.

In addition to the form of a Web site map, you need to create a glossary of all of these objects (see the Visual glossary created by Jesse James Garrett Visual vocabulary) that is easy to use in whiteboards and formal documents. You can also take a look at the flowchart of the book, such as UML.

Finally, based on the above organizational content, you can in 30 seconds to establish any page of the low-fidelity wireframe. Line diagram to remember to mark, Mark, and then mark. Each element of its basic framework should consider the following questions:

1. Where does the content come from

2. What is the substance of the content?

3. Elements are necessary or optional.

4. Are the elements conditional?

5. What is the default or expected status?

6. What are the candidates or wrong states?

All of these factors to consider in the future learning slowly.

Original address: http://yangxiao.me/