Common UI design patterns

As an interactive designer in the design of wireframe prototype, familiar with the common web design mode is very helpful, so that "in the knowledgeable" to create a meet the needs of users familiar with the mode of operation of the interface. The so-called "no need to reinvent the wheel", the model is often easy to solve common problems, the correct model can help users familiar interface, improve efficiency.

Common UI design patterns as shown below:

The following specific analysis, when faced with different needs, you can choose the appropriate ui design mode. 01. Master / Detail mode

Body / detail mode can be divided into horizontal and vertical two. If you want users to navigate through the same page and efficiently switch between projects, this is an ideal way. When users want to see the main body more information when the best choice of horizontal layout. Or when the main part contains many entries, each of which contains additional information, it is also a good idea to choose this horizontal layout.

Some examples:

Mac mail

0.2 column browse

Column browsing is also divided into horizontal and vertical two. It allows users to enter more points and clear navigation of the user's favorite project.

Example:

Outlook column by column interface

0.3 Search / Results

Search screen mode from very simple to very complex have. It is very convenient for users who want to see the specific information quickly and directly.

0.4 Filter the data set

Divided into horizontal and vertical. For the beginning of the definition of some known information, and then for the search results after filtering.

0.5 form

Many types of forms, but also the best place to reflect the user experience is good. It contains a lot of content. See UI design patterns detailed tutorial. Recommend a book dedicated to the form: "Web Form Design: Filling in the Blanks."

0.6 palette / canvas

Palette / Canvas is a modest application, but it is the only way to create a new document: line-by-line or non-linear; flowcharts; page layouts; and physical-size designs / charts or control layouts.

0.7 dashboard

A well-designed dashboard should provide: key information at a glance, real-time data, easy-to-read graphics, clear entry and navigation. In theory, it's hard to show complex data on one screen.

Crystal easy to do KPI dashboard instrument

0.8 spreadsheet

This is the ideal mode for users to quickly browse, edit, and access to large panel information. Spreadsheets need to provide functionality: Standard form functions such as sorting, hiding / displaying columns, re-keying columns, grouping (if applicable), global undo / redo, add / drop rows, keyboard navigation, import and export.

0.9 Wizard

For complex or unusual processes, the wizard / quick launch screen mode can be effectively navigated.

0.10.Q & A

Q & A mode refers to a design pattern in which users acquire information and find solutions. Unlike Q & A, Q & A is designed to help users find out what options or advice they are available in their inexperienced areas such as health insurance, mortgage, plan, buy.

Shanghai Mobile Shopping guide system

0.11. Parallel panels

Parallels The screen mode can be collapsed (only one at a time) or expanded (all simultaneously). This model is suitable for organizing a large number of similar or interactive information, allowing users to more efficient access to information on the same page. The best application in: Need to apply for the need to fill in a variety of non-sequential categories directory.

0.12. Interactive model

Interactive model Screen mode is used when many interactivity elements need to interact with key items such as calendars, maps, icons, canvas, and more. Is a model of user experience closer to the user's mental model. Applying works well in calendars, maps, line graphs, presetting possible scenario analysis (including calculators), WYSIWYG editors (including image manipulation).

Additional: 13. Blank state

Blank status refers to the natural state of the application before any data is entered or entered into the system. Getting real The book once said that the blank state of the screen makes the user more looking forward to. Reduce worry, frustration and hesitation by giving users a preview. Blank status screens include: videos, quick tutorials, helpful hints, screenshots after installation.

Wufoo is an online form design website that initially guides users through the creation of forms

Other modes

There are two other widely used but rarely used enterprise software models.

 - Gateway: If you are a market research specialist, business analyst and user feedback researcher design portal, you can refer to the control panel design specifications and cases. - Tabs: In fact, Tab is a component, not a model. It offers multiple choice of data in a variety of contexts. If the data structure led to your design tab appears a lot. There are two small suggestions: First, reconsider the architecture. By using the card classification or consult a professional information architect; Second, you can refer to the parallel panel specifications and cases. The above is only a rough description, if you want to see more details, please download the document: References: "Designing interfaces" and "Designing web interfaces"

Source: http: //www.zhangyq.com/ui-ui-pattern-design-patterns/