Very simple horizontal navigation bar. Navigation Bar in Photoshop

The so-called utility navigation (in translation from English - navigation toolbar), as a rule, provides the user of an Internet resource with the opportunity to perform minor actions on the site and includes tools such as contact form, subscription form, registration or login form to the site, the ability to print the page, etc.

All of the above has great importance to create an interaction experience that satisfies the needs of the Internet user and deeper involvement in interaction with the site. The only condition is that all these forms and panels must be placed where the visitor expects to see them.

List of tools

The tools available for use on your website determine the forms and quality of interaction between visitors and your online resource. The list is huge, but some of the most common tools are the following:

Although the Shopping Cart tool is a basic, defining element of commercial sites, it is recommended that the icon for this tool also be located in navigation bar tools. The same applies to another very frequently used function, like “Search”.

Despite the fact that most of the tools and features located in this panel, as mentioned above, are of a secondary nature, in some situations their presence is of great importance for users. Since they still do not bear the main load, visually they may not take up much space, but their presence is mandatory.

Location

Previously, navigation toolbar icons were either embedded in a content field, placed in a sidebar, or in a general navigation bar. IN last years this toolbar has immigrated to the right top corner pages. Thanks to this innovation, the menu is now always visible and easier to notice. Watch yourself: as soon as we find ourselves on a web resource that is new to us, we instinctively look for the registration or login form in the upper right corner.

Toolbar on home page The IBM website is located in the upper right corner, in the middle of the page (icons social networks) and in the footer (Contact Us link).

Upper right corner in detail.

At first, this arrangement of elements may seem too confusing (all tools are divided into 4 blocks), but keep in mind that only computer geeks perceive them as parts of one whole. For the average user, all these tools differ from each other in purpose and functions, and therefore in the fact that they are located in different parts site, there is nothing unusual for them.

Groups of minor instruments are highlighted in red. The blocks are located at an impressive distance from each other, but this arrangement is already familiar to most Internet users.

Some organizations try to hide the toolbar behind a hamburger icon (an icon that represents three horizontal lines) or any other interactive element, for example, a spinning gear.

It must be said that this approach must be tested and tested for different types displays. Your users may not realize that the tool they are looking for is listed under the same hamburger icon. Bad idea to ignore basic principles design and elementary logic, even if large companies neglect them.

1. Supplement icons (and other graphic illustrations) with explanatory text. People like similar pictures, but very often they either do not understand their meaning or do not remember them well. Additionally, webmasters use these icons inconsistently.

Don't rely on tooltips because they won't work for you. mobile devices. Use words alone, or words and a picture, to ensure better understanding and memory of the symbol. The researchers point out that a hamburger menu, for example, is used much more often by visitors when it is accompanied by the caption “Menu” and is outlined with a line that gives it the appearance of an interactive button.

2. Place tools where people expect to find them. Most viewed places: the upper right corner of the page or the area before and after the article. You can also build these tools into the general menu, into the general navigation bar, because people tend to look at it carefully if they are looking for something.

3. Controls should look like controls; you should not give them unusual names.

5. Be sure to build in subscription tools. Make it as easy as possible to subscribe to an author or a blog in general.

6. To display the language used, it is enough to indicate its name in characters of the corresponding alphabet.

7. Forms for subscribing to the resource and logging into the site should be located next to each other.

8. The toolbar should be visible, so you can highlight the most important tools with a bright color.

Examples of navigation toolbar layout:

Navigation bar - this is one of the elements of the program’s command interface. It is a kind of “table of contents” of a section or auxiliary window (Fig. 1.9). Using it, you can view certain information contained in a section or in an auxiliary window.

The navigation bar contains navigation commands, that is, commands that do not change data, but only allow you to move to necessary information. As a rule, these are commands to move to some lists. When such a command is called, the corresponding list is displayed in the work area, replacing the previous contents of the work area.

For example, as a result of calling the command Warehouses a list of warehouses will open in the work area (Fig. 1.10).

Figure 1.9 – Navigation panel of the command interface of the Desktop of the managed application 1C:Enterprise 8 in mode Configuration

Figure 1.10 – Calling the navigation command of the command interface of the Desktop of the managed application 1C:Enterprise 8

There are situations when it is necessary to analyze or compare different parts of the same list, or different lists. In this case, you can open several lists at the same time (Fig. 1.11). One is in the main window, and the rest are in auxiliary windows.

To open the list in an auxiliary window, when calling a navigation command, you need to hold down the key Shift.

Figure 1.11 – Calling a navigation command with opening several lists of the command interface of the Desktop of the managed application 1C:Enterprise 8

The commands in the navigation panel are usually located in three standard groups (Fig. 1.12).

The very first group - Important. Its name is not displayed, but the commands for this group are in bold. Here are commands to jump to the information that is used most often in this section.

Second group - Normal. This group also does not have a title; its commands are displayed in normal font.

Third group - See also. Commands in this group are preceded by the heading See Also and are not required for working in this section. But they can be useful.

Figure 1.12 – Calling a navigation command with opening several lists of the command interface of the Desktop of the managed application 1C:Enterprise 8

In addition to standard groups, the navigation panel can also contain groups created by the developer.

In a team group Normal Additional groups of commands may exist. Such groups have headings and the commands contained in them are displayed indented from the left edge (Fig. 1.13). By clicking on the headings of these groups, commands can be hidden or shown.

If program sections are formed by subsystems of the first level, then groups of commands in the navigation bar are formed by subsystems of the second or more low levels(Fig. 1.14).

Typically, the number of teams arranged in groups Important And see also- not much. While in the group Basics There may be quite a large number of commands. Therefore, an additional grouping of these teams is used, which makes it easier to navigate their composition.

Figure 1.13 – Additional groups of commands in the command interface of the managed application Desktop 1C:Enterprise 8

Figure 1.14 – Correspondence between command groups and the command interface of the Desktop of the managed application 1C:Enterprise 8

The user has the opportunity to customize the composition of the navigation bar: add or remove commands, change their order. For example, it can remove groups of commands Characteristics And Prices, and the team Balance adjustments move to group see also(Fig. 1.15). The program automatically remembers the settings made by the user, and next time it will show the navigation bar as the user configured it

Figure 1.14 – Custom reconfiguration of the command interface of the Desktop of a managed application 1C:Enterprise 8

Especially this useful material for those who are involved in retouching and processing photographs, since in your business you need to quickly navigate the space of the working image.

So, let's look at the roles again:

Photoshop is your plane!

You are a pilot!

Your helm is the navigation bar!

To control the image in Photoshop We are using a navigation bar.
If the navigation bar is not visible, then it needs to be activated in the menu Window(Windows) - select (Navigator).

Let's take a closer look at the navigation bar:

In the area marked with the letter A we see the scale editor.

IN this moment the image has a scale 81.97% from the actual size.

Here you can enter values ​​from 0.11% before 1600% .

We can also use the slider (marked with the letter E):

dragging to the right - increase, left - reduce.

By clicking on the icon (marked with the letter IN) we can reduce gradually in small steps.

And this icon (marked with the letter WITH) increases. Red square marked with a letter D, tells us how much of the image is visible in the document.

This window will become smaller and smaller if we constantly enlarge the image.

We can move this square - just hover over the image in the navigation area until this icon appears:

When it happens you just clamp down left button mouse and drag the window to the area of ​​the image that you need to adjust at the moment.

Please note: you can only drag a square if it is smaller than the image itself.

Look at the screenshots:

on the top one - we cannot move the red square, on the bottom we can without problems:

It is important to note that we can also enlarge the navigation bar itself.

Just pull the bottom right corner of the panel (marked in red in the screenshot):

This will allow you to see more details:

We hope you find this material useful and you will eyes closed navigate your endless image.

Have a nice trip!

In this article we will try to classify the main types of navigation bars and consider the criteria for choosing certain navigation bars for the site.

Let's start with a definition.

The navigation bar of a website is an area of ​​web pages on which links to sections and (or) pages of the site are located in some ordered form, and the only function of which is to provide the user with convenient tool to navigate the website.

1. Single-level list

A single-level navigation bar (or a navigation bar in the form of a single-level list of links) is a navigation bar that contains equal links to resource sections.

This type of navigation bars can be roughly divided into three subtypes:

• horizontal single-level list;
• vertical single-level list;
• single-level panel of unusual shape.

1.1. Horizontal single-level list

The navigation bar in the form of a horizontal single-level list is located at the top of the page. On some sites, the horizontal bar is placed in two places: at the top and bottom of the page.

The recommended number of links on a single-level horizontal panel is 5-7 pieces (this is the number of links a visitor can easily keep in mind). With more links of the same level, it is more difficult for the user to navigate through them. In addition, such a number of links usually have to be placed in two rows, which creates additional problems when designing pages.

Advantages:

Once the page loads, all list items are placed entirely at the top of the page. When the user reads the main text, the menu disappears from view and does not take up unnecessary space.

Flaws:

1. You cannot place many elements on a panel.
2. If there are a large number of list elements, they must be placed in several lines.

Example:

On the website of Artemy Lebedev's studio, a horizontal single-level list is used as a navigation bar.

1.2. Vertical single-level list

The navigation bar in the form of a vertical single-level list is most often located on the left side of the page. At the same time, under the panel remains empty place, which is often used for banners, survey forms, etc.

The recommended number of links on the panel is still the same: 5-7 pieces. If there are still more links, this does not create significant problems in the page design. However, if there are too many links, some of them extend beyond the viewable area, forcing the user to use the scroll bar.

Advantages:

1. In a vertical single-level navigation bar, you can painlessly increase the number of links, whereas with a horizontal layout this leads to layout problems (there may not be enough space for a new element).

Flaws:

1. There is often a lot of unused space underneath the navigation bar.
2. If there are a large number of list items, they are not all visible on the page at the same time (to view some items you need to scroll the page vertically).

Example:

On the website of the Association of Professional Internet Publishers you can see good example using the navigation bar in the form of a vertical single-level list. IN in this case the use of frames eliminates a number of the possible disadvantages of this type of navigation bar that I described.

2. Two-level list

A two-level navigation bar is a panel in which each link at the first (root) level corresponds to several links at the second level.

All considerations regarding the horizontal or vertical position of the navigation bar with multi-level list similar to the previous ones.

2.1. Two-level list with commit

In this type of navigation panel, at any given time all links of the first level are displayed (one of them is active), as well as links of the second level that correspond to the active (selected) link from the first level.

Thus, to access any second-level element that does not correspond to the selected first-level element, the visitor must first select the corresponding first-level element (this will refresh the web page), and then select the desired second-level element (another page refresh) .

Based on the method of placement on the page, this type of panel is also divided into two subtypes: vertical and horizontal. All considerations for the placement method are similar to those given earlier for a single-level list.

Advantages:

1. You can always see what part of the site we are in.
2. Compared to a single-level panel, it allows you to place a significantly larger number of links.

Flaws:

1. When actively moving through sections of the site, too much happens. a large number of page reloads.

Example:

On the site Apple Computing you can see a very good example of a two-level, stateful list. This type of navigation bar was not chosen by chance. When the user selects an element top level, pages appear that contain company news, information about new products, press releases, etc., in a word, what the company definitely wants to draw the visitor’s attention to. When navigating through the second-level menu elements, the user is taken to pages with additional panels navigation, with the help of which he can easily find the information he needs.

One of the varieties of a two-level list with fixation when the links of the first and second levels are located like coordinate axes. This arrangement of links is very visual, but takes up a lot of space on the page. I called this panel a 2d navigation panel.

For example, it was used on the website of the RusArt company (now Individ). Unfortunately, the old company website is currently unavailable.

2.2. Dynamic two-level list

The navigation bar in the form of a dynamic two-level list most closely resembles standard menu GUI. When a top-level element is activated, a submenu consisting of corresponding second-level elements opens.

The most common is horizontal and vertical arrangement such navigation bars (the considerations for this are similar to those given earlier for single-level list panels), although other solutions are sometimes found.

Advantages:

1. Allows you to quickly access any element.
2. Takes up little space on the page.

Flaws:

1. Many dynamic navigation bar implementations are not supported by older (rare) browsers.

Examples:

Website Microsoft has a very branched structure, so it uses as many as two dynamic panels. Top panel The navigation looks the same on all pages of the site and contains links to the main Microsoft resources. The navigation bar below contains links directly related to current section site. As you navigate through numerous sections of the Microsoft website, the contents of this panel change.

On the main page of the Porshe website you can see a two-level dynamic navigation bar, which is interesting in its design. Images with text are used as top-level links; when you point to them, the corresponding second-level submenu opens.

2.3. Expanded two-level list

The idea of ​​using an expanded two-level list is to show all second-level links on the page. In this case, first-level links can play the role of headings (sometimes they are not links).

Advantages:

1. The visitor immediately sees all the links in the navigation bar.
2. Because links are grouped, this makes it easier for the visitor to find the desired element.
3. This type of navigation bar is as easy to use as a single-level list panel.

Flaws:

1. The panel takes up a lot of space on the page.

Example:

On the website of the Internet agency Promo.ru, the navigation bar links are combined into one of four groups. Each group contains 4-5 links, which corresponds to the recommended values.

On the Subscribe.ru server, an expanded list with the names of sections and subsections for server mailings is used as a navigation bar. First-level links go to the structure of the selected catalog section, and second-level links go to the mailing list of the selected subsection.

2.4. Semi-expanded two-level list

The navigation bar, in the form of a semi-expanded two-level list, is a list of first-level links, next to which are several of the most important (or popular) second-level links. This type of navigation bars is most often used on large websites. information resources, having a branched structure, the sections of which are unequal in popularity (usefulness) among users.

Advantages:

1. Efficient use of site space. All the most important links are accessible from the main page.

Flaws:

1. Some items are very easy to find, while others are not at all.

Navigation is present on any good website, even if it is a one-page one. Depending on the situation, navigation links can lead to various sections of the site or send to a bookmark (anchor) located on current page. Competent drafting navigation in which the user does not get confused requires certain knowledge and experience. Navigation bar design also needs to be done wisely, and in this tutorial we'll show you how to create a user-friendly navigation menu.

Creating Navigation

What is navigation? This is a collection of links, often ordered and grouped by meaning. Navigation menu often created using an HTML list tag

, where at each point
• contains one link . In HTML5, a separate tag was introduced for navigation