Introweb - Introducere în web-dezvoltare

Link-uri text. Link-uri text sunt în text simplu.

  • pentru utilizator,
    • Compact - ocupă puțin spațiu pe pagina
    • Au o „greutate“ scăzută
    • Element intuitiv, ușor de utilizat
    • Vizibil și în afara graficului
    • Percepția textului este mai rapid imagini grafice, deoarece textul este văzută ca fiind pur un element de informație, în timp ce programul este perceput elemente artistice și semantice, să recunoască faptul că vizitatorii necesită timp și efort suplimentar, mai ales în cazul în care se face într-un stil metaforic.
  • pentru dezvoltatori
    • Crearea de link-uri și editarea acestuia este foarte rapid
    • Cu ușurință grupate și ordonate

Astfel, vedem că link-urile text sunt atât de versatil încât acestea să poată fi folosite la orice nivel al structurii de navigație: meniul principal, servicii, directoare link-ul, etc.

Din toate cele de mai sus, este clar că utilizarea de link-uri de imagini în termeni de confort, în multe cazuri discutabile. Dar nu fără link-urile de imagine în cazul în care este necesar pentru a efectua designul grafic al paginii sau al zonei sale în același stil. Ca un exemplu de pagină de jocuri on-line, în cazul în care întreaga pagină poate fi sub formă de elemente grafice sau capac de pagini, care se face sub forma unei imagini din comenzile de navigare.

Link-uri grafice sub formă de butoane pot fi folosite dacă numărul acestora nu este foarte mare și numele legăturilor de-a lungul lungimii aproximativ egale, așa cum se arată în Fig. 1

Fig. 1. referință grafică.

Comparând cele două versiuni ale design-o navigare orizontală se poate observa că butoanele sunt văzute „mai grele“ decât de referință. Efectuarea butoane - nu numai că are spațiu suplimentar, dar este, de asemenea, elementele grafice suplimentare - cadru, umbră, etc., care pot afecta în mod semnificativ caracterul distinctiv al link-uri vizitatori .. Aici este un exemplu de text și design-ul grafic al conținutului catalog.

Link Înregistrare

referințe de design grafic

Navigarea cu etichete

Link-uri grafice sub formă de etichete (inlay) pot fi proiectate în diferite moduri. etichete pentru grupuri - un element de navigare pe orizontală, formată din aceleași elemente de design, care este intotdeauna un element activ care este selectat de înregistrare, printre altele.

Avantajul comenzi rapide către butoane este textul care pot fi mai multe linii și comenzi rapide pot fi plasate în mai multe rânduri. Cu toate acestea, utilizarea lor duce la dificultăți. Vezi ce se întâmplă atunci când facem clic pe eticheta „știri“ în Rambler și Yandex.

După ce faceți clic pe etichetă

Fig. 4. O tranziție la o nouă pagină

Noi vedem că atunci când faceți clic pe eticheta „știri“ în Rambler nu sa întâmplat nimic, cu excepția alocarea etichetei, și Yandex a existat o schimbare în pagina de știri și selectarea etichetei, și anume, În acest caz, etichetele funcționează mecanismul așa cum se așteaptă să vadă un vizitator. În continuare vom lua în considerare în detaliu scopul cele mai comune controale, dar acum, rețineți că sistemul de etichete pe pagina Rambler funcționează ca un comutator. deși această comandă (în acest caz de navigație) de control, din care trebuie să aibă loc interacțiunea acțiune, adică, a existat o eroare funcțională.

Și mai greu este un exemplu în care navigarea principală este sub formă de etichete, în partea superioară, iar stânga dispuse vertical legături către secțiunea de director așa cum se arată în figura de mai jos.

Fig. 5. Navigare combinată.

Să presupunem că eticheta „Produs“ nu este (este evidențiată în roșu) Dacă alegem să etichetăm navigarea principală, cum ar fi „Contacte“ este încărcarea paginii apare „Contacte“ și selecție, dar dacă vom alege o anumită secțiune a catalogului, de exemplu, „Copii“? încarcă pagina „Copii“, iar eticheta va fi evidențiate „Contacte“ sau trebuie să deselecta complet o comandă rapidă? Bine, să adăugați etichete la „catalog“ și să-l activ atunci când orice partiție. Dar atunci se pune întrebarea, dacă facem clic pe etichetă, după contactele „catalog“, ceea ce trebuie să se întâmple - încărca ultima partiția selectată directorul și conținutul său, sau altceva? Este ambiguu, deoarece încearcă să determine locația vizitatorului în două structuri de navigație care nu au legătură - de navigare și navigarea principală director.

Să vedem o posibilă soluție la această problemă - înregistrarea auto-pagini pe exemplul prezentat mai jos.

Fig. 6. Vizualizați pagina să faceți clic pe etichetă „Photo Navigator“.

Figura 7. Vezi pagina atunci când faceți clic pe eticheta „Photo Navigator“.

Noi vedem că atunci când faceți clic pe eticheta „Photo Navigator“ a fost o tranziție la „Photo-Navigator“, dar eliberarea etichetei nu sa întâmplat. Este permis? Cred că este acceptabil, deoarece în acest caz, nu vedem sistemul de etichete și link-uri text, concepute ca etichete, care, cu toate acestea, pot uluiesc unii vizitatori. Este important ca pe pagina „Photo Navigator“ link către directorul, care este, vom vedea pagina de self-service, în cazul în care ambiguitatea vizitatorilor locației este rezolvată.

Efectuarea link-uri text

Cineva ar putea argumenta că accentul pe link-uri atunci când treceți imaginea nu corespunde referințelor clasice. Dar aici este necesar să se ia în considerare faptul că subliniere este elementul grafic opțional care într-o listă ordonată de referințe împiedică lizibilitatea referințelor (subliniere agravează proiectarea, designerii au adăugat) și complică percepția link-uri vizitatori. Uneori puteți găsi și alte opțiuni - schimba culoarea sau designul fontului. Este versiuni mai puțin succes, deoarece culoarea poate să iasă în evidență din contextul înregistrării și schimbarea mărcii (dimensiune, belșugul, înclinare) atunci când treceți - l, în general, este în afara natura referințelor.

Gruparea și ordonarea de link-uri

Ca o regulă, pe pagina există mai multe zone funcționale - meniul principal, servicii, director etc. care împreună pot conține o varietate de referințe .. Prin urmare, problema de grupare și secvențiere a controalelor și navigare pe pagina este de asemenea important, precum și informații de comandă în sine. Imaginați-vă pentru un moment că vă aflați în directorul în care se fac trimiteri la secțiuni, doar numele link-uri nu sunt sortate în ordine alfabetică, și în mod arbitrar ca un dezvoltator de dorit sau 20-30 link-uri sunt aranjate într-un anumit model (un „creativ“ mă uit la companii online deja 5 ani). Este clar că lucrează cu un astfel de site nu doresc foarte mulți vizitatori. Cum de a evita o astfel de situație?

În primul rând, trebuie să definiți zone funcționale pe pagina, care ar trebui să fie clare și ușor de recunoscut pentru vizitatori. Apoi, determina dacă aceste zone sunt prezente pe toate paginile sau numai pe unele. Dacă bitul link-ul, acestea se încadrează în zona vizibilă a paginii fără a derula, și ele trebuie să fie prezente pe fiecare pagină (de navigare constantă), apoi utilizați fie o destinație de plasare orizontală-o linie de link-uri în antetul paginii sau plasarea verticală pe partea stângă a paginii, sau o combinație a acestor opțiuni. Rețineți că plasarea pe orizontală și pe verticală a link-uri inegale. Link-uri verticale ar trebui să fie plasate în cazul în care acestea au nume lungi, sau acestea ar trebui să fie comandate pe anumite motive, cum ar fi în ordine alfabetică sau evaluat. În cazul în care referințele sunt multe (40-60), link-urile sunt plasate în mai multe coloane, implementat în motoarele de căutare. În acest caz, ele sunt plasate pe pagina principală, și secțiuni de detaliu are loc pe paginile interioare ale catalogului. Comparați că mai ușor de citit - plasarea pe verticală sau orizontală director link-uri și cât de multe link-uri pot fi plasate pe orizontală și pe verticală.

Fig. 8. Dispunerea orizontală a șapte legături

Fig. 9. Dispunerea verticală a treizeci și opt de link-uri.

Dacă face o referință orizontală în întreaga lățime a ecranului, atunci este posibil să se „potrivească“ 14-16 link-uri, dar obține un lung șir de text nu poate fi citit. O destinație de plasare pe verticală arată o unitate de citire, care poate fi ușor de pus, de asemenea, a treia coloană, care va permite utilizatorului să vadă toate secțiunile catalogului (aproximativ 60 de referințe) și du-te direct la oricare dintre ele.

Prin urmare, în poziție orizontală, este mai bine să se leagă la pagina principală a site-ului și servicii care sunt destul de puține și nu necesită criteriul de sortare.

Atunci când construirea unei structuri de navigație complexă utilizează conceptul de adâncime de navigație, care determină cât de departe pagina de destinație se află în raport cu nodul rădăcină al o ramură de navigare. Cu alte cuvinte, câte clicuri trebuie să faceți pentru a ajunge la pagina de destinație a paginii. Ca un exemplu, ia în considerare o secțiune de ramură „Cars“:

Fig. 10. Adâncimea de navigare.

  1. Dați clic pe numele partiției directorul „Cars.“
  2. Faceți clic pe secțiunea „Cars“.
  3. Faceți clic pe link-ul „Producător 1“.
  4. Faceți clic pe link-ul „Marka1“.

4 clicuri - destul de obositoare. Cum pot reduce adâncimea de navigare? Foarte simplu - să-l extindă, adică, să combine mai multe niveluri, cum ar fi:

Fig. 11. Navigare Optimizați.

Aici am link-ul „Cars“ făcute în subsecțiunea și a pus-link-uri către producători. Este ușor de văzut că scăderea adâncimii de navigație a dus la o creștere în zona de navigare pe a doua pagină - în loc de referințe 2 - „Cars“ și „Cargo“ vom vedea acum 4 elemente - „Cars“, „Producător 1“, „Producător 2“, „marfă“ .

Să ni se alăture acum 2 și pagina 3-a.

Fig. 12. Navigare Optimizați.

Deci, ce fel de adâncime de navigație ar trebui să folosesc? Eu cred că cel mai nu este rezonabil pentru a copia ideile preconcepute ale cuiva, și a vedea cât de confortabil implementate opțiuni similare și pe alte site-uri, este convenabil să lucreze cu ei sau nu, pentru a determina punctele lor forte și se aplică la propriul meu caz, ghidat de regula „vezi cum au făcut alții și de a face mai bine!“.