UI Designer: Familiar with common web design patterns

Web page Production WEBJX article introduction: Web Design patterns commonly used by interaction designers.

Interaction designers in the design of wireframe prototypes, familiar with the common web design patterns are helpful, do "know" to create a meeting with the needs of users easy to learn Easy-to-use interface. The so-called "No need to repeat the invention of the wheel", the pattern is often easy to solve common problems, the correct model can help users familiar with the interface, improve efficiency.

Common UI Design patterns are shown in the following illustration:

The following specific analysis, encounter different needs when you can choose the appropriate UI design mode.

principal/detail (master/detail) mode

The main/detail mode can be divided into two kinds: horizontal and vertical. If you want users to be on the same page and guide them to switch efficiently under the class, this is definitely an ideal way. If the principal information is more important to the user, it is best to choose a landscape layout. Or the main part not only more items and contains more information, it should also choose this horizontal layout.

For example:

Windows window is vertically arranged

Horizontal configuration of Mac mail

0.2 Columns Browsing

Sub-column browsing is also divided into horizontal and vertical two kinds. Through it, users can select different category points and gradually guide users to find the information they need.

Example:

Outlook uses a step-by-step interface, where users can choose to go to "Inbox"--> "-->" specific message content.

0.3 Search/Results

Search screen mode is convenient for users who want to see specific results quickly and directly. From very simple to very complex.

Gmail uses a simple search

For Google academic users, advanced search limits more complex search conditions to refine the information users expect.

0.4 Filter Data set

Divided into horizontal and vertical. Begin to define some known information and then filter the results after the search by qualifying conditions.

51job users enter the desired position with a simple search, the left panel of the vertical layout provides conditions such as "release time, Salary", and further optimizes the information

Take Jingdong as an example, most E-commerce sites in the user's initial fuzzy search, to provide further optimization of the filter conditions. In the picture above, the Jing-dong uses the horizontal arrangement way

0.5 Form

There are many types of forms, and it is also best to reflect the user experience is good place. It contains a lot of content and recommends a book that specifically describes the form: "Web form design:filling in the blanks."

General use of forms for registration information

0.6 palette/canvas

The palette/canvas is not the most common pattern, but it has an irreplaceable advantage in creating graphic class documents, such as designing linear or non-linear graphs, flowcharts, page layouts, and designing/charting or controlling layouts for physical sizes.

For designers, the palette/canvas model is not unfamiliar, the common software, such as: Axure, PS are used in this way.

0.7 instrument panel

A well-designed dashboard should provide: a glance at the key information, real-time data, easy to read graphics and operations, clear access and browsing. In theory, it's hard to show complex data in a single screen.

Before I used the crystal easy to do for suning appliance real-time monitoring of various regions store sales system instrument panel

0.8 E-form

It is convenient for users to quickly browse and edit the ideal mode of large plate information. Spreadsheets need to provide the following features: standard tables (such as categories, hidden/display columns, column columns, grouped (if available)), global undo/Redo, add/insert/delete row, keyboard navigation, import and export.

Taobao shopping Cart Choose to use a spreadsheet that allows users to quickly edit selected items (Increase/decrease quantity, delete, etc.)

0.9 Wizard

For complex or uncommon processes, the wizard/Quick Start Screen mode can be effectively navigated.

Use Wizard to quickly guide customers who are unfamiliar with the process to complete payment

0.10.Q&a

Q&a mode refers to the user to find the appropriate solution by selecting the matching criteria. Unlike search patterns, Q&a often needs to understand the user base and ask questions to help users find out where their inexperience (such as health insurance, mortgages, plans, and purchases) are available or recommended.

Shanghai Mobile Tariff shopping system allows users to answer a few questions, you can recommend the user to choose which kind of phone bill

0.11. Parallel Panel

The Parallel Panel screen mode can be closed (one at a time) or expanded (showing all at once). This pattern is suitable for organizing a large number of similar or interactive information, allowing users to obtain information more efficiently on the same page. Best application: Require applicants to fill in a variety of no order categories.

0.12. Interactive Model

Interactive model screen patterns are used when interacting with key items (such as calendars, maps, icons, canvas, and so on). is a model of user experience closer to the user's mental model. In calendars, maps, wireframe, preset scenario analysis (including calculators), the WYSIWYG editor (including picture processing) works very well.

Google Calendar allows you to edit the contents of the message directly

additional : 13. Blank State

The blank state refers to the natural state of application before any data is entered or entered into the system. Getting real has said that the blank state of the screen makes the user more expect. Reduce worry, frustration, and hesitation by giving users a preview. The Blank status screen includes: Video, quick tutorials, help tips, screenshots after installation.

Wufoo is an online form design site that initially leads users to create forms

14. Other Models

There are two other modes that are widely used but are rarely used in enterprise software.



-Portal : If you are a market research expert, business needs analyst and user feedback investigator Design portal, you can refer to the Control Panel design specifications and cases.

-Tabs: In fact, Tab is a part, not a pattern. It provides multiple choices for data in a variety of contexts. If the data structure causes your Design tab to appear a lot. There are two small suggestions: first, reconsider the architecture. By using a card to classify or consult a professional information architect, second, you can refer to the specification and case of the parallel panel.

References: "Designing Interfaces" and "Designing Web Interfaces"