Bară de navigare orizontală foarte simplă. Bara de navigare în Photoshop

Așa-numita navigare utilitare (în traducere din engleză - bara de instrumente de navigare), de regulă, oferă utilizatorului unei resurse de Internet posibilitatea de a efectua acțiuni minore pe site și include instrumente precum Formular de contact, formular de abonare, formular de înregistrare sau de autentificare pe site, posibilitatea de a tipări pagina etc.

Toate cele de mai sus au mare importanță pentru a crea o experiență de interacțiune care să satisfacă nevoile utilizatorului de internet și o implicare mai profundă în interacțiunea cu site-ul. Singura condiție este ca toate aceste forme și panouri să fie amplasate acolo unde vizitatorul se așteaptă să le vadă.

Lista de instrumente

Instrumentele disponibile pentru utilizare pe site-ul dvs. determină formele și calitatea interacțiunii dintre vizitatori și resursa dvs. online. Lista este imensă, dar unele dintre cele mai comune instrumente sunt următoarele:

Deși instrumentul Coș de cumpărături este un element de bază, definitoriu al site-urilor comerciale, se recomandă ca pictograma pentru acest instrument să fie amplasată și în bară de navigare unelte. Același lucru este valabil și pentru o altă funcție folosită foarte frecvent, cum ar fi „Căutare”.

În ciuda faptului că majoritatea instrumentelor și caracteristicilor situate în acest panou, așa cum am menționat mai sus, sunt de natură secundară, în unele situații prezența lor este de mare importanță pentru utilizatori. Deoarece încă nu suportă sarcina principală, vizual este posibil să nu ocupe mult spațiu, dar prezența lor este obligatorie.

Locație

Anterior, pictogramele barei de instrumente de navigare erau fie încorporate într-un câmp de conținut, plasate într-o bară laterală, fie într-o bară de navigare generală. ÎN anul trecut această bară de instrumente a imigrat la dreapta colțul de sus pagini. Datorită acestei inovații, meniul este acum întotdeauna vizibil și mai ușor de observat. Fii atent: de îndată ce ne aflăm pe o resursă web care este nouă pentru noi, căutăm instinctiv formularul de înregistrare sau de autentificare în colțul din dreapta sus.

Bara de instrumente activată pagina principala Site-ul web IBM este situat în colțul din dreapta sus, în mijlocul paginii (pictograme retele sociale) și în subsol (linkul Contactați-ne).

Colțul din dreapta sus în detaliu.

La început, această aranjare a elementelor poate părea prea confuză (toate instrumentele sunt împărțite în 4 blocuri), dar țineți cont de faptul că doar informaticii le percep ca părți ale unui întreg. Pentru utilizatorul mediu, toate aceste instrumente diferă unele de altele prin scop și funcții și, prin urmare, prin faptul că sunt situate în părți diferite pe site, nu este nimic neobișnuit pentru ei.

Grupurile de instrumente minore sunt evidențiate cu roșu. Blocurile sunt situate la o distanță impresionantă unul de celălalt, dar această aranjare este deja familiară majorității utilizatorilor de internet.

Unele organizații încearcă să ascundă bara de instrumente în spatele unei pictograme hamburger (o pictogramă care reprezintă trei linii orizontale) sau oricare altul element interactiv, de exemplu, o roată de rotire.

Trebuie spus că această abordare trebuie testată și testată tipuri diferite afișează. Este posibil ca utilizatorii dvs. să nu realizeze că instrumentul pe care îl caută este listat sub aceeași pictogramă hamburger. Idee proastă de ignorat principii de baza design si logica elementara, chiar daca companii mari le neglija.

1. Suplimentați pictogramele (și alte ilustrații grafice) cu text explicativ. Oameni ca poze similare, dar de foarte multe ori ei fie nu le înțeleg sensul, fie nu le amintesc bine. În plus, webmasterii folosesc aceste pictograme în mod inconsecvent.

Nu vă bazați pe sfaturi pentru instrumente pentru că nu vor funcționa pentru dvs. dispozitive mobile. Utilizați numai cuvinte sau cuvinte și o imagine, pentru a asigura o mai bună înțelegere și memorie a simbolului. Cercetătorii subliniază că un meniu de hamburger, de exemplu, este folosit mult mai des de vizitatori atunci când este însoțit de legenda „Meniu” și este conturat cu o linie care îi dă aspectul unui buton interactiv.

2. Așezați instrumentele acolo unde oamenii se așteaptă să le găsească. Cele mai vizualizate locuri: colțul din dreapta sus al paginii sau zona înainte și după articol. De asemenea, puteți construi aceste instrumente în meniul general, în bara de navigare generală, deoarece oamenii tind să se uite cu atenție la ele dacă caută ceva.

3. Comenzile ar trebui să arate ca controale, nu ar trebui să le dați nume neobișnuite.

5. Asigurați-vă că includeți instrumente de abonament. Faceți cât mai ușor posibil să vă abonați la un autor sau un blog în general.

6. Pentru a afișa limba folosită, este suficient să indicați numele acesteia în caractere ale alfabetului corespunzător.

7. Formularele pentru abonarea la resursă și autentificarea pe site ar trebui să fie amplasate unul lângă celălalt.

8. Bara de instrumente ar trebui să fie vizibilă, astfel încât să puteți evidenția cele mai importante instrumente cu o culoare strălucitoare.

Exemple de aspect al barei de instrumente de navigare:

Bară de navigare - acesta este unul dintre elementele interfeței de comandă a programului. Este un fel de „cuprins” al unei secțiuni sau ferestre auxiliare (Fig. 1.9). Folosind-o, puteți vizualiza anumite informații conținute într-o secțiune sau într-o fereastră auxiliară.

Bara de navigare conține comenzi de navigare, adică comenzi care nu modifică datele, ci doar vă permit să vă deplasați informatie necesara. De regulă, acestea sunt comenzi pentru a trece la unele liste. Când este apelată o astfel de comandă, lista corespunzătoare este afișată în zona de lucru, înlocuind conținutul anterior al zonei de lucru.

De exemplu, ca urmare a apelării comenzii Depozite se va deschide o listă de depozite în zona de lucru (Fig. 1.10).

Figura 1.9 – Panoul de navigare al interfeței de comandă a Desktop-ului aplicației gestionate 1C: Întreprinderea 8în mod Configurare

Figura 1.10 – Apelarea comenzii de navigare a interfeței de comandă a Desktop-ului aplicației gestionate 1C: Întreprinderea 8

Există situații în care este necesar să se analizeze sau să compare diferite părți ale aceleiași liste, sau liste diferite. În acest caz, puteți deschide mai multe liste în același timp (Fig. 1.11). Unul este în fereastra principală, iar restul sunt în ferestrele auxiliare.

Pentru a deschide lista într-o fereastră auxiliară, atunci când apelați o comandă de navigare, trebuie să țineți apăsată tasta Schimb.

Figura 1.11 – Apelarea unei comenzi de navigare cu deschiderea mai multor liste ale interfeței de comandă a Desktop-ului aplicației gestionate 1C: Întreprinderea 8

Comenzile din panoul de navigare sunt de obicei situate în trei grupuri standard (Fig. 1.12).

Primul grup - Important. Numele său nu este afișat, dar comenzile pentru acest grup sunt îngroșate. Iată comenzi pentru a trece la informațiile care sunt folosite cel mai des în această secțiune.

A doua grupă - Normal. De asemenea, acest grup nu are un titlu. Comenzile sale sunt afișate în font normal.

a treia grupă - Vezi si. Comenzile din acest grup sunt precedate de titlul Vezi și și nu sunt necesare pentru lucrul în această secțiune. Dar ele pot fi utile.

Figura 1.12 – Apelarea unei comenzi de navigare cu deschiderea mai multor liste ale interfeței de comandă a Desktop-ului aplicației gestionate 1C: Întreprinderea 8

Pe lângă grupurile standard, panoul de navigare poate conține și grupuri create de dezvoltator.

Într-un grup de echipă Normal Pot exista grupuri suplimentare de comenzi. Astfel de grupuri au titluri și comenzile conținute în ele sunt afișate indentat din marginea din stânga (Fig. 1.13). Făcând clic pe titlurile acestor grupuri, comenzile pot fi ascunse sau afișate.

Dacă secțiunile de program sunt formate din subsisteme de primul nivel, atunci grupurile de comenzi din bara de navigare sunt formate din subsisteme de al doilea sau mai multe niveluri scăzute(Fig. 1.14).

De obicei, numărul de echipe aranjate pe grupe ImportantȘi Vezi si- nu prea mult. În timp ce în grup Bazele Poate exista un număr destul de mare de comenzi. Prin urmare, se utilizează o grupare suplimentară a acestor echipe, ceea ce face mai ușoară navigarea în componența lor.

Figura 1.13 – Grupuri suplimentare de comenzi în interfața de comandă a aplicației gestionate Desktop 1C: Întreprinderea 8

Figura 1.14 – Corespondența dintre grupurile de comandă și interfața de comandă a Desktop-ului aplicației gestionate 1C: Întreprinderea 8

Utilizatorul are posibilitatea de a personaliza compoziția barei de navigare: adăugați sau eliminați comenzi, modificați ordinea acestora. De exemplu, poate elimina grupuri de comenzi CaracteristiciȘi Preturi, și echipa Ajustări de sold trece la grup Vezi si(Fig. 1.15). Programul își amintește automat setările făcute de utilizator, iar data viitoare va afișa bara de navigare așa cum a configurat-o utilizatorul

Figura 1.14 – Reconfigurarea personalizată a interfeței de comandă a Desktop-ului unei aplicații gestionate 1C: Întreprinderea 8

Mai ales asta material util pentru cei care sunt implicați în retușarea și prelucrarea fotografiilor, deoarece în afacerea dvs. trebuie să navigați rapid în spațiul imaginii de lucru.

Deci, să ne uităm din nou la roluri:

Photoshop este avionul tău!

Esti pilot!

Cârma ta este bara de navigare!

Pentru a controla imaginea în Photoshop Folosim o bară de navigare.
Dacă bara de navigare nu este vizibilă, atunci trebuie să fie activată în meniu Fereastră(Windows) - selectați (Navigator).

Să aruncăm o privire mai atentă la bara de navigare:

În zona marcată cu litera A vedem editorul de scară.

ÎN acest moment imaginea are o scară 81.97% de la dimensiunea reală.

Aici puteți introduce valori de la 0.11% inainte de 1600% .

Putem folosi și glisorul (marcat cu litera E):

trăgând la dreapta - crește, stânga - reduce.

Făcând clic pe pictogramă (marcată cu litera ÎN) putem reduce treptat în pași mici.

Și această pictogramă (marcată cu litera CU) crește. Pătrat roșu marcat cu o literă D, ne spune cât de mult din imagine este vizibilă în document.

Această fereastră va deveni din ce în ce mai mică dacă mărim constant imaginea.

Putem muta acest pătrat - treceți cu mouse-ul peste imagine din zona de navigare până când apare această pictogramă:

Când se întâmplă, doar strângi butonul din stanga mouse-ul și trageți fereastra în zona imaginii pe care trebuie să o ajustați în acest moment.

Vă rugăm să rețineți: puteți trage un pătrat doar dacă este mai mic decât imaginea în sine.

Uită-te la capturile de ecran:

pe cel de sus - nu putem muta pătratul roșu, pe cel de jos putem fără probleme:

Este important de reținut că putem mări și bara de navigare în sine.

Doar trageți colțul din dreapta jos al panoului (marcat cu roșu în captură de ecran):

Acest lucru vă va permite să vedeți mai multe detalii:

Sperăm că veți găsi acest material util și o veți face cu ochii inchisi navigați prin imaginea voastră nesfârșită.

Drum bun!

În acest articol vom încerca să clasificăm principalele tipuri de bare de navigare și să luăm în considerare criteriile de selectare a anumitor bare de navigare pentru site.

Să începem cu o definiție.

Bara de navigare a unui site web este o zonă de pagini web pe care se află legături către secțiuni și (sau) pagini ale site-ului într-o formă ordonată, iar singura funcție este de a oferi utilizatorului instrument convenabil pentru a naviga pe site.

1. Lista cu un singur nivel

O bară de navigare cu un singur nivel (sau o bară de navigare sub forma unei liste de legături cu un singur nivel) este o bară de navigare care conține linkuri egale către secțiuni de resurse.

Acest tip de bare de navigare poate fi împărțit aproximativ în trei subtipuri:

• listă orizontală cu un singur nivel;
• listă verticală cu un singur nivel;
• panou cu un singur nivel de formă neobișnuită.

1.1. Listă orizontală cu un singur nivel

Bara de navigare sub forma unei liste orizontale cu un singur nivel este situată în partea de sus a paginii. Pe unele site-uri, bara orizontală este plasată în două locuri: în partea de sus și de jos a paginii.

Numărul recomandat de linkuri pe un panou orizontal cu un singur nivel este de 5-7 bucăți (acesta este numărul de linkuri pe care un vizitator le poate ține cu ușurință în minte). Cu mai multe link-uri de același nivel, este mai dificil pentru utilizator să navigheze prin ele. În plus, un astfel de număr de legături trebuie de obicei plasate pe două rânduri, ceea ce creează probleme suplimentare la proiectarea paginilor.

Avantaje:

Odată ce pagina se încarcă, toate elementele din listă sunt plasate în întregime în partea de sus a paginii. Când utilizatorul citește textul principal, meniul dispare din vedere și nu ocupă spațiu inutil.

Defecte:

1. Nu puteți plasa multe elemente pe un panou.
2. Dacă există un număr mare de elemente de listă, acestea trebuie plasate pe mai multe rânduri.

Exemplu:

Pe site-ul studioului lui Artemy Lebedev, o listă orizontală cu un singur nivel este folosită ca bară de navigare.

1.2. Listă verticală cu un singur nivel

Bara de navigare sub forma unei liste verticale cu un singur nivel se află cel mai adesea în partea stângă a paginii. În același timp, sub panou rămâne loc gol, care este adesea folosit pentru bannere, formulare de sondaj etc.

Numărul recomandat de legături de pe panou este în continuare același: 5-7 bucăți. Dacă există încă mai multe link-uri, acest lucru nu creează probleme semnificative în designul paginii. Cu toate acestea, dacă există prea multe link-uri, unele dintre ele se extind dincolo de zona vizibilă, forțând utilizatorul să folosească bara de defilare.

Avantaje:

1. Într-o bară de navigare verticală cu un singur nivel, puteți crește fără durere numărul de linkuri, în timp ce cu un aspect orizontal acest lucru duce la probleme de aspect (s-ar putea să nu existe suficient spațiu pentru un element nou).

Defecte:

1. Există adesea mult spațiu nefolosit sub bara de navigare.
2. Dacă există un număr mare de elemente din listă, acestea nu sunt toate vizibile pe pagină în același timp (pentru a vizualiza unele elemente trebuie să derulați pagina pe verticală).

Exemplu:

Pe site-ul Asociației Editorilor Profesioniști de Internet puteți vedea bun exemplu folosind bara de navigare sub forma unei liste verticale cu un singur nivel. ÎN în acest caz, utilizarea cadrelor elimină o serie de posibile dezavantaje ale acestui tip de bară de navigare pe care le-am descris.

2. Lista cu două niveluri

O bară de navigare pe două niveluri este un panou în care fiecare link de la primul nivel (rădăcină) corespunde mai multor linkuri de la al doilea nivel.

Toate consideratiile referitoare la pozitia orizontala sau verticala a barei de navigare cu lista cu mai multe niveluri asemănătoare celor anterioare.

2.1. Lista cu două niveluri cu commit

În acest tip de panou de navigare, în orice moment sunt afișate toate legăturile de la primul nivel (una dintre ele este activă), precum și link-urile de al doilea nivel care corespund link-ului activ (selectat) de la primul nivel.

Astfel, pentru a accesa orice element de nivel al doilea care nu corespunde elementului de nivel întâi selectat, vizitatorul trebuie să selecteze mai întâi elementul de nivel întâi corespunzător (acest lucru va reîmprospăta pagina web), apoi să selecteze elementul de nivel al doilea dorit. (o altă reîmprospătare a paginii) .

Pe baza metodei de plasare pe pagină, acest tip de panou este, de asemenea, împărțit în două subtipuri: vertical și orizontal. Toate considerațiile pentru metoda de plasare sunt similare cu cele prezentate mai devreme pentru o listă cu un singur nivel.

Avantaje:

1. Puteți vedea oricând în ce parte a site-ului ne aflăm.
2. În comparație cu un panou cu un singur nivel, vă permite să plasați un număr semnificativ mai mare de link-uri.

Defecte:

1. Când vă deplasați activ prin secțiuni ale site-ului, se întâmplă prea multe. un numar mare de se reîncarcă pagina.

Exemplu:

Pe site MărÎn calcul, puteți vedea un exemplu foarte bun de listă cu două niveluri. Acest tip de bară de navigare nu a fost ales întâmplător. Când utilizatorul selectează un element nivel superior, apar pagini care conțin noutăți ale companiei, informații despre produse noi, comunicate de presă etc., într-un cuvânt, despre ce compania dorește cu siguranță să atragă atenția vizitatorului. Când navighează prin elementele de meniu de nivelul doi, utilizatorul este dus la pagini cu panouri suplimentare navigare, cu ajutorul căreia poate găsi cu ușurință informațiile de care are nevoie.

Una dintre varietățile unei liste cu două niveluri cu fixare atunci când legăturile primului și celui de-al doilea nivel sunt situate ca axe de coordonate. Această aranjare a linkurilor este foarte vizuală, dar ocupă mult spațiu pe pagină. Am numit acest panou un panou de navigare 2d.

De exemplu, a fost folosit pe site-ul companiei RusArt (acum Individ). Din păcate, vechiul site web al companiei este momentan indisponibil.

2.2. Lista dinamică pe două niveluri

Bara de navigare sub forma unei liste dinamice cu două niveluri seamănă cel mai mult meniu standard GUI. Când este activat un element de nivel superior, se deschide un submeniu format din elementele de nivel al doilea corespunzătoare.

Cel mai frecvent este orizontal și aranjare verticală astfel de bare de navigare (considerațiile pentru aceasta sunt similare cu cele date mai devreme pentru panourile cu liste cu un singur nivel), deși uneori se găsesc și alte soluții.

Avantaje:

1. Vă permite să accesați rapid orice element.
2. Ocupă puțin spațiu pe pagină.

Defecte:

1. Multe implementări dinamice ale barei de navigare nu sunt acceptate de browserele mai vechi (rare).

Exemple:

Site-ul web Microsoft are o structură foarte ramificată, deci folosește până la două panouri dinamice. Panoul de sus Navigarea arată la fel pe toate paginile site-ului și conține link-uri către principalele resurse Microsoft. Bara de navigare de mai jos conține linkuri legate direct de sectiunea curenta site-ul. Pe măsură ce navigați prin numeroase secțiuni ale site-ului web Microsoft, conținutul acestui panou se schimbă.

Pe pagina principală a site-ului Porshe puteți vedea o bară de navigare dinamică pe două niveluri, care este interesantă prin design. Imaginile cu text sunt folosite ca linkuri de nivel superior atunci când indicați spre ele, se deschide submeniul de nivel al doilea.

2.3. Lista extinsă pe două niveluri

Ideea de a folosi o listă extinsă pe două niveluri este de a afișa toate linkurile de al doilea nivel de pe pagină. În acest caz, link-urile de prim nivel pot juca rolul de titluri (uneori nu sunt link-uri).

Avantaje:

1. Vizitatorul vede imediat toate linkurile din bara de navigare.
2. Deoarece linkurile sunt grupate, acest lucru facilitează găsirea elementului dorit de către vizitator.
3. Acest tip de bară de navigare este la fel de ușor de utilizat ca și un panou de listă cu un singur nivel.

Defecte:

1. Panoul ocupă mult spațiu pe pagină.

Exemplu:

Pe site-ul agenției de internet Promo.ru, legăturile barei de navigare sunt combinate într-unul din cele patru grupuri. Fiecare grup conține 4-5 legături, care corespund valorilor recomandate.

Pe serverul Subscribe.ru, este folosită ca bară de navigare o listă extinsă cu numele secțiunilor și subsecțiunilor pentru mailingurile de pe server. Link-urile de primul nivel merg la structura secțiunii de catalog selectate, iar linkurile de al doilea nivel merg la lista de corespondență a subsecțiunii selectate.

2.4. Listă semi-extinsă pe două niveluri

Bara de navigare, sub forma unei liste semi-extinse pe două niveluri, este o listă de link-uri de primul nivel, alături de care se află câteva dintre cele mai importante (sau populare) link-uri de al doilea nivel. Acest tip de bare de navigare este cel mai des folosit pe site-urile mari. resurse informaționale, având o structură ramificată, ale cărei secțiuni sunt inegale ca popularitate (utilitate) în rândul utilizatorilor.

Avantaje:

1. Utilizarea eficientă a spațiului site-ului. Toate cele mai importante link-uri sunt accesibile din pagina principală.

Defecte:

1. Unele articole sunt foarte ușor de găsit, în timp ce altele nu sunt deloc.

Navigarea este prezentă pe orice site bun, chiar dacă este unul de o pagină. In functie de situatie, link-uri de navigare poate duce la diverse secțiuni ale site-ului sau poate trimite la un marcaj (ancoră) situat pe pagina curenta. Redactare competenta navigarea în care utilizatorul nu se încurcă necesită anumite cunoștințe și experiență. Designul barei de navigare trebuie, de asemenea, realizat cu înțelepciune, iar în acest tutorial vă vom arăta cum să creați un meniu de navigare ușor de utilizat.

Crearea navigației

Ce este navigația? Aceasta este o colecție de link-uri, adesea ordonate și grupate după semnificație. Meniu de navigatie adesea creat folosind o etichetă de listă HTML

, unde în fiecare punct
• conține un singur link . În HTML5, a fost introdusă o etichetă separată pentru navigare