Shulou(Shulou.com)06/02 Report--

This article mainly explains the "what are the top column UI design patterns and rules", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "what are the top column UI design patterns and rules" bar!

Common styles of the top bar

What does the top column look like and what does it consist of?

1. Regular top bar

Typically, the top bar provides information about the page as a whole, as well as potential actions that users may take on the page. Common top columns are as follows:

The common components in the top bar include: title, container, operation item, navigation icon and so on. Next, we will introduce the use of each component one by one.

The top title is usually used with the bottom navigation to explain the information on the page. If the navigation at the bottom of a page has only icons without text interpretation, the user may not understand the meaning of the icons, then the task of interpreting the information on the page falls on the title of the top bar.

In most cases, the title is in the middle of the top bar, and sometimes there is a large title in the upper left corner for navigation (in IOS applications). In addition to explaining the purpose of the page, headlines can also be used for brand promotion.

The title can also explain what the user does on this page. For example, when a user wants to modify his profile, the title displays "edit profile" to explain the operation.

Sometimes, there is supplementary text below the main title of the top column, which makes it easier to provide users with more information.

The trend of containers is becoming less and less obvious. Containers are usually gray or unsaturated colors, and sometimes containers use brand-themed colors to promote and promote the brand.

Action items usually appear on the top bar in the form of icons and text buttons, and 0-4 icons or text buttons can be displayed on the top bar when needed.

Action items may have different meanings on different pages, but some common icons / actions follow certain rules:

Return: when the user enters the second / third tier page, the "return" usually appears in the upper left corner. Click the back icon to guide the user back to the original page.

The position of closing or canceling is not fixed, either on the left or on the right, depending on whether there is any other action.

A common question discussed here is under what circumstances should "return" and "close" be used in the top column, respectively:

Use "return": when the user needs more than one step in a long process of exploration, or when there is no short and clear purpose on the page.

Use "close": indicates a complete single-page operation with a clear starting point and end point, performing specific actions on the page to achieve a specific purpose.

Profiles or accounts sometimes appear on the top bar to make it easier for users to edit personal information, set up or switch accounts.

Adding or searching can help users browse more content or expand areas of interest, usually in the upper right corner as an easy-to-touch target.

Sometimes the actions most frequently used by users are fixed in the top bar (especially in the upper right corner) so that they can be easily touched at any time. A common example is NetEYun Music, where the icon of the current song is always fixed in the upper right corner, and users can enter it at any time on any page.

It is important to note that in order to avoid unnecessary attention, the icon / text buttons on the top bar are usually linear icons rather than fill icons, and are unsaturated colors. Unless they really want to attract the user's attention, or to prompt the user to take action.

two。 Search the top bar

When using App, we will find that some pages do not have a title in the top bar, but add a search box (Taobao home page).

Depending on your specific needs, you can use the search on the top bar of different pages because it provides users with more value when browsing content.

3. When do I give up using the top bar?

When there is a lot of content at the top, some App will make the top bar very simple or even completely abandoned.

The most important user information-daily investment growth-is displayed at the top of Robinhood, and there is only a prompt text button in the upper right corner to invite friends.

A common case of giving up using the top column is the profile page. The purpose of this is to imply that the page can be controlled by itself, and that personal information takes up a lot of space at the top.

Interaction mode of the top column

There can be a lot of interaction on a page, and sometimes the top bar needs to reflect the interaction by changing the style or content.

1. Reflect the sliding position

Slide to the top bar: when the top bar has a lot of important information but takes up a lot of space, the content of the top bar may change according to the scrolling position. The top bar appears when the user drops down the page to get more content.

Sliding hidden pull-up appears: in another form, in a Google search, the user swipes down the top search box to hide (Google guesses that the user wants to focus on browsing content), but as long as the user swipes up and stops the browsing process, the top bar search box appears again.

Regardless of the form of interaction, such top bars can be quickly displayed when the user needs them:

Users can perform search functions or common operations

Title / important information as a reference to remind users which page they are on.

Slide to hide the top bar: for those top bars that do not affect the user's needs and actions, they are usually hidden as the page slides down.

There is a pleasant greeting at the top of Starbucks that disappears with the page when users swipe down and try to choose which coffee to drink; Airbnb displays a picture of the house at the top to impress the user, but when the user swipes down, so does the top image.

two。 Reflect changes in the current page

Sometimes, the information in the top column changes in real time according to the content. The most common case is the feedback when a message is received: in Wechat, the top title shows the change in the number of messages received by the user; instagram shows the message received by the change in the little red dot at the top.

Interactive top bar

As an essential part of the page, the interactive top bar reduces the burden on other elements of the page. In addition to the common changes to icons or text buttons (add, cancel, back), what other interesting interactions occur in the top bar?

1. Interactive title

Some products and services are very dependent on users' preferences and location, such as common takeout or taxi-hailing apps.

In this case, the App usually depends on the user's initial input to determine what is displayed, or the user can edit the information directly on the top column title.

two。 Interactive icon / text button

Interactive icon / text buttons mean that users can perform certain actions on the top bar without having to leave the page.

In robinhood, users can directly choose the calculation method to buy stocks without switching pages, or add the stocks on the page to their collections.

3. Top navigation

Some App want to display multiple parallel content on a page, so they set multiple options on the top bar for easier navigation.

Common top navigation includes segmented controls and label navigation:

Navigation options for segmented controls generally do not support sliding left and right, and there are fewer options.

Label navigation options are more diverse in design and support sliding between left and right.

Thank you for your reading, the above is "what are the top column UI design patterns and rules" content, after the study of this article, I believe you have a deeper understanding of the top column UI design patterns and rules, the specific use of the need for practice to verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.