Parimet e hierarkisë vizuale për dizajnerët janë një koncept dizajni që përdoret për të udhëhequr se si sytë e shikuesit lëvizin nëpër një dizajn dhe për të përcaktuar se cilët elementë janë më të rëndësishëm ose tërheqës vizualisht.
Në fillim kishte pllaka guri, rrotulla papirusi dhe letra. Më pas erdhën ekranet e kompjuterëve dhe tabletët elektronikë. Ndërsa teknologjia e shfaqjes së faqeve zhvillohet, dizajnerëve u mbetet një mënyrë e qartë për të organizuar përmbajtjen. Por cila është më e mirë? Me pak fjalë , hierarkia vizuale.
Këtu është përkufizimi i hierarkisë vizuale: Hierarkia vizuale është rregullimi elementet grafike në dizajn sipas rëndësisë së secilit element. Pesha vizuale përcakton rëndësia e elementit në hierarkinë e dizajnit, duke i treguar shikuesit se në çfarë të fokusohet dhe në çfarë rendi.
Burimet për Dizajnuesit. 50 falas
Kjo po bëhet një çështje gjithnjë e më e rëndësishme pasi kornizat e përgjegjshme i detyrojnë projektuesit të mendojnë për shumë faqe të ndryshme menjëherë. Përballë tekstit të dendur dhe hapësirës së shkurtër të vëmendjes, projektuesit zhvilluan 6 parime për të drejtuar syrin e lexuesit drejt informacionit më të rëndësishëm.
Këto 6 parime të hierarkisë vizuale do t'ju ndihmojnë të dizajnoni gjithçka, nga broshurat tek aplikacionet, duke siguruar që përdoruesi përfundimtar të ketë një përvojë pozitive leximi për dizajnerët.
Të gjitha kulturat lexohen nga lart poshtë, dhe shumica e kulturave lexohen nga e majta në të djathtë. Por edhe pse kjo njohuri është e rëndësishme për dizajni i faqes, projektuesit e dinë se detyra është shumë më e vështirë.
Studimet e fundit kanë treguar se njerëzit skanojnë fillimisht një faqe për të parë nëse janë të interesuar për të përpara se ta lexojnë. Modelet e skanimit priren të marrin një nga dy format, "F" dhe "Z", dhe ju mund të përfitoni nga kjo në dizajnin tuaj.
F-Modele. Parimet e Hierarkisë Vizuale
F-shabllone aplikoni në faqet tradicionale të tekstit si artikuj ose postime në blog. Lexuesi skanon anën e majtë faqet duke kërkuar për fjalë kyçe interesante në titujt e rreshtuar majtas ose fjalitë e temave fillestare, pastaj ndalet dhe lexon (në të djathtë) kur ai ose ajo has diçka interesante. Rezultati duket si një F (ose një E, ose diçka me vija edhe më horizontale; por termi "F" mbërtheu).
Si mund ta përdorni këtë? Vendosni informacione të rëndësishme në të majtë dhe përdorni tituj të shkurtër, të theksuar, pika dhe elementë të tjerë të ngjashëm që tërheqin vëmendjen për të ndarë blloqet e paragrafëve.
Z-model. Parimet e Hierarkisë Vizuale.
modele Z aplikohen për lloje të tjera faqesh si p.sh reklamë ose faqet e internetit ku informacioni nuk paraqitet domosdoshmërisht në paragrafët e bllokut. Lexuesi fillimisht skanon pjesën e sipërme të faqes, ku ka të ngjarë të gjenden informacione të rëndësishme, më pas lëviz në këndin e kundërt në mënyrë diagonale dhe bën të njëjtën gjë në fund të faqes.
Dizajnerët e uebit zakonisht i dizajnojnë faqet e tyre që të përputhen në mënyrë eksplicite me këtë sjellje, duke vendosur informacionin më të rëndësishëm në qoshet dhe duke orientuar informacione të tjera të rëndësishme përgjatë shiritave të sipërm dhe të poshtëm dhe duke lidhur diagonalen.
Në më poshtë Në hartimin e asamblesë së konferencës 2010, elementë të rëndësishëm janë logoja (lart majtas), një buton "Regjistrohu tani" (djathtas lart) dhe një listë me altoparlantë (poshtë), të cilët janë vendosur në mënyrë strategjike në pika të bukura të modelit Z.
2. Madhësia ka rëndësi. Parimet e Hierarkisë Vizuale
_
Është shumë e thjeshtë: njerëzit fillimisht lexojnë gjëra të mëdha. Nëse sytë tuaj tërhiqen nga "pamja" përpara se të "ndaheni" në më poshtë reklamat për Teatrin Young Vic, duhet të kontaktoni menjëherë një psikolog perceptues: ndoshta mund të fitoni para të mira duke u testuar si një anomali e rrallë.
Ajo që është interesante është se kjo tendencë është në fakt mjaft e fortë për të refuzuar rregullin nga lart-poshtë. Në imazhin e mësipërm, "hack" tejkalon "kohën për të vepruar" sepse është më i madh dhe në të majtë (kështu që rregulli nga e majta në të djathtë ndihmon).
Por në faqen tjetër të Raportit Vjetor: Fushata për të Drejtat e Njeriut 2012 (zhvilluar në kolonën e pestë të medias) lexojmë gjerësisht font "Lufta për barazi në gjurmët e fushatës" përpara tekstit direkt mbi të "Zgjedhjet 2012". Parimet e Hierarkisë Vizuale
"Zgjedhjet 2012" është renditja më e lartë e informacionit: na tregon temën e përgjithshme me të cilën lidhet informacioni i mëposhtëm. Por stilisti vendosi që titulli i artikullit të ishte më interesant për lexuesit, dhe për këtë arsye e vlerësoi atë në mënyrë që të lexohej së pari.
3. Hapësira dhe cilësi. Parimet e Hierarkisë Vizuale
Një mënyrë tjetër për të tërhequr vëmendjen është jepni përmbajtjes hapësirë të mjaftueshme për të marrë frymë . Nëse ka hapësirë negative të konsiderueshme rreth butonit ose nëse vijat në bllokun e tekstit ndiqen gjerësisht, këta elementë do të jenë më lehtë të dukshëm për lexuesit.
Siç mund ta shihni në imazhin më poshtë (pjesë e faqes së DrawtoClick), hapësira mund të jetë një alternativë elegante ose plotësuese për përdorimin e madhësisë. Këtu, pikë shitjet, “Notre agence vouscompagne...”, është shkruar me shkronja shumë të vogla, por është i rrethuar nga një bollëk hapësirash të bardha, që tregon rëndësinë e saj. Më poshtë, frazat “Le Compendre”, “Le Réaliser” dhe “Le Partager” marrin një theks shtesë, duke u shkëputur nga hapësira përreth.
Kur njerëzit flasin për "teksturën" në lidhje me hierarkinë vizuale, ata nuk nënkuptojnë efektet grafike të teksturës. Përkundrazi, ky lloj "teksture" i referohet rregullimit ose strukturës së përgjithshme të hapësirës, tekstit dhe detajeve të tjera në një faqe. Kjo Një shembull nga Bright Pink ilustron mirë konceptin:
Në imazhin e parë, fjala "Sport" është më e lartë në hierarki se "badminton" sepse është më e gjatë, më e madhe dhe më e guximshme. Në imazhin 2, të dy fjalët janë afërsisht ekuivalente, falë drejtkëndëshit të zi që e bën "badminton" të dallohet dhe e vendos atë në hapësirën e vet.
Në imazhin e tretë, shkarravitja e sfondit ndërpret hapësirën "Sport", por jo hapësirën "badminton", dhe për këtë arsye rezulton në një përmbysje ku "badmintoni" është më i larti në hierarki. Ky zhvillim është i vështirë të parashikohet, kështu që dizajnerët shpesh e lidhin atë me një ndjenjë tërësore të "teksturës".
4. Pesha e shkronjave dhe çiftimi. Parimet e Hierarkisë Vizuale
Përzgjedhja e shkronjave është kritike për vendosjen e hierarkisë vizuale. Ndër atributet më të rëndësishme të një fonti janë pesha, gjerësia e goditjeve që përbëjnë shkronjat e tij dhe stili, si serif dhe sans serif. Modifikime të tjera, si p.sh. kursive, mund të luajnë gjithashtu një rol.
Vini re se si kufje ndikon në rendin e hierarkisë së fjalës në dizajnin e mëposhtëm të uebit për The Tea Factory: "çajra të përsosur për t'ju ndihmuar të ngroheni" është emri i lojës, por ndryshimet në peshën e shkronjave dhe shkronjat kursive, përveç vendosjes së fjalëve, krijojnë një më shumë dinamike, më pak lineare, përvojë leximi. “://azbyka.com.ua/foto/tea-factory.jpg” />
Në disa raste, qëllimi është të paraqitet një shumëllojshmëri informacionesh si po aq urgjente. Vendosja e të gjithëve në të njëjtën madhësi dhe peshë do të sigurojë ekuivalencë, por gjithashtu do ta bëjë atë të duket monotone. Diferencimi i shkronjave është një mënyrë për ta shmangur këtë, si në kopertinën e revistës Trendi më poshtë. Parimet e Hierarkisë Vizuale
Këtu, pesë ngacmuesit rreth periferisë së faqes janë të njëjta në hierarki, por arrijnë shumëllojshmëri duke ndryshuar dy shkronja të çiftuara mirë—njëri një serif me peshë mesatare dhe tjetri një sans serif i lehtë, por i gjatë.
5. Ngjyra dhe hije.
Këtu është një tjetër pa mend: ngjyrat e ndezura dallohen nga ngjyrat e heshtura ose nuancat e grisë, ndërsa nuancat më të lehta shfaqen më "të largëta" dhe kështu bien më poshtë në hierarki sesa nuancat më të pasura dhe më të errëta. Faqja e internetit Where Are They kontraston dritën e ndritshme dhe ndriçimin me ngjyra me një efekt rrjeti bardh e zi me efektin e shkëlqimit:
Faqja e internetit e Guggenheim përdor ngjyrën për të theksuar informacione të rëndësishme si përzgjedhja e vendndodhjes, një listë e ekspozitave që po shikohen aktualisht dhe lidhjet me ekspozita. Parimet e Hierarkisë Vizuale
Faqja e internetit e Muzeut Whitney, nga ana tjetër, vendos një hierarki brenda një fonti, peshë dhe ton (të zezë) duke përdorur nuancën (që do të thotë të shtoni të bardhë në tonin bazë, duke e bërë atë më të lehtë). "Cory Archangel on Pop Culture" është qartë poshtë "New on Whitney Stories" në hierarkinë vizuale, jo vetëm sepse është më i ulët, por edhe sepse nuanca e tij është më e lehtë, duke e bërë atë më pak të dukshëm në sfondin e bardhë. Parimet e Hierarkisë Vizuale
Ngjyra ka një kuptim të veçantë në dizajn celular aplikacione ku madhësia e ekranit të vogël kufizon aftësinë tuaj për të përdorur strategji të tjera si ndryshimi i madhësisë dhe hapësira e gjerë. Në aplikacionin Grainger Industrial Supply, butoni "Proceed to Checkout" është me ngjyrë të kuqe, duke e bërë atë të dallohet në çdo faqe ku shfaqet. Nga ana tjetër, paneli i rezultateve të kërkimit të ngushtë është gri, duke e bërë atë afërsisht të barabartë në hierarki me elementë të tjerë si shiriti i kërkimit dhe lidhjet e produktit.
Dizajni i aplikacionit për Grainger
6. Drejtim për projektuesit.
Paraqitjet e faqeve zakonisht janë krijuar për të ndjekur një rrjet vijash vertikale dhe horizontale, si sipas konvencionit, ashtu edhe për shkak se është formati më i lexueshëm. Në një sistem të tillë, ekziston një mënyrë e re për të vendosur hierarkinë: thyerja e rrjetit.
Teksti që pozicionohet përgjatë një lakore ose diagonale bie automatikisht në sy kundrejt tekstit rrethues të bllokuar nga rrjeti, duke zënë vendin qendror. Kjo ka qenë prej kohësh një strategji efektive në reklamim, siç është posteri i stacionit të autobusit të Frost Design.
FAQ. Parimet e hierarkisë vizuale për projektuesit.
1. Çfarë është hierarkia vizuale?
Hierarkia vizuale është një parim dizajni që synon të rregullojë elementët në një faqe në një mënyrë që thekson rëndësinë e tyre dhe drejton vëmendjen e përdoruesit. Ai i ndihmon përdoruesit të kuptojnë shpejt hierarkinë e informacionit dhe të ndërveprojnë në mënyrë efektive me përmbajtjen.
2. Pse është e rëndësishme hierarkia vizuale në dizajn?
Rëndësia e hierarkisë vizuale qëndron në:
- Përdorshmëri e përmirësuar: Ndihmon përdoruesit të gjejnë informacionin që u nevojitet më shpejt.
- Perceptimi i përmirësuar: E bën përmbajtjen më të kuptueshme dhe tërheqëse.
- Stimulimi i ndërveprimit: Tërheq vëmendjen te elementët kyç dhe inkurajon veprimin.
- Thjeshtoni navigimin: E bën më të lehtë navigimin dhe lundrimin në faqe.
3. Cilat janë parimet bazë të hierarkisë vizuale?
Parimet bazë përfshijnë:
- Madhësia dhe shkalla: Elementët më të mëdhenj tërheqin më shumë vëmendjen dhe konsiderohen më të rëndësishëm.
- Ngjyra dhe kontrasti: Elementë të ndritshëm dhe të kundërt bien në sy dhe tërheqin vëmendjen.
- Vendndodhja dhe akomodimi: Elementet më të larta në faqe ose më afër qendrës perceptohen si më kuptimplotë.
- Hapësirë dhe zbrazëti: Lënia e hapësirës rreth elementeve i ndihmon ata të dallohen.
- Tipografia: Përdorimi i shkronjave, madhësive dhe stileve të ndryshme të tekstit për të theksuar rëndësinë e informacionit.
- Forma dhe vija: Përdorimi i formave dhe linjave për të krijuar udhëzime dhe thekse.
4. Si e përdorni madhësinë dhe shkallën për të krijuar hierarki vizuale?
Aplikimi i madhësisë dhe shkallës:
- Titujt dhe nëntitujt: Përdorni madhësi më të mëdha për titujt dhe madhësi më të vogla për nëntitujt për të krijuar një strukturë të qartë.
- Elementet kryesore: Rritni madhësinë e butonave ose lidhjeve të rëndësishme për t'i bërë ato të dallohen nga elementët e tjerë.
- Imazhet dhe grafika: Përdorni imazhe të mëdha për të tërhequr vëmendjen te pjesët kryesore të përmbajtjes.
5. Si ndikojnë ngjyra dhe kontrasti në hierarkinë vizuale?
Efekti i ngjyrës dhe kontrastit:
- Thekse ngjyrash: Përdorni ngjyra të ndezura ose të ngopura për të theksuar elementët kryesorë.
- Kombinime të kundërta: Përdorni ngjyra të kundërta për tekstin dhe sfondin për të përmirësuar lexueshmërinë.
- Harmonia e ngjyrave: Sigurohuni që ngjyrat që zgjidhni të jenë në harmoni me njëra-tjetrën dhe të mos shpërqendrohen nga informacioni kryesor.
6. Si të përdoret saktë rregullimi dhe vendosja e elementeve?
Parimet e vendosjes:
- Elementë të rëndësishëm në krye: Vendosni informacionin kryesor në krye të faqes ku ato janë menjëherë të dukshme.
- Vendndodhja qendrore: Elementët e vendosur më afër qendrës priren të tërheqin më shumë vëmendje.
- Sekuenca e vendosjes: Rregullimi i artikujve në një rend logjik mund të përmirësojë të kuptuarit e informacionit.
7. Si ndihmon hapësira e bardhë në krijimin e hierarkisë vizuale?
Roli i hapësirës së zbrazët:
- Elementet ndarëse: Krijimi i hapësirës boshe midis elementeve ndihmon në ndarjen e tyre të qartë dhe përmirëson perceptimin.
- Përqendrimi i vëmendjes: Lënia e hapësirës rreth një elementi të rëndësishëm e bën atë të dallohet dhe të tërheqë vëmendjen.
- Pastërti dhe rregullsi: Përdorimi i hapësirës së bardhë e bën dizajnin të duket më i rregullt dhe më i organizuar.
8. Si të përdoret tipografia për të krijuar hierarki vizuale?
Aplikimi i tipografisë:
- Fontet dhe stilet: Përdorni fonte dhe stile të ndryshme për titujt, nëntitujt dhe tekstin e trupit.
- Madhësia dhe pesha e tekstit: Rritni madhësinë dhe peshën e tekstit për informacione të rëndësishme.
- Përzgjedhja: Përdorni kursive, të theksuara ose nënvizuese për të theksuar fjalët ose frazat kyçe.
9. Si mund të ndikojnë format dhe linjat në hierarkinë vizuale?
Ndikimi i formave dhe linjave:
- Linjat udhëzuese: Përdorni linja për të krijuar udhëzues për të ndihmuar përdoruesin të ndjekë faqe.
- Format si thekse: Format gjeometrike mund të nxjerrin në pah elemente të rëndësishme ose të krijojnë thekse.
- Ndarja e përmbajtjes: Linjat mund të përdoren për të ndarë pjesë të ndryshme të përmbajtjes, duke krijuar një strukturë të qartë.
10. Cilat mjete dhe teknika mund të përdoren për të testuar hierarkinë vizuale?
Metodat e provës:
- Testimi me përdoruesit: Kryeni testime me përdorues të vërtetë për të marrë komente.
- Analiza e sjelljes: Përdorimi i analitikës instrumente për të studiuar sjelljen e përdoruesit në faqe.
- Reagime nga kolegët: Kërkoni që dizajni të rishikohet nga kolegët për mendime dhe rekomandime shtesë.
- Hartat e nxehtësisë: Analizoni hartat e nxehtësisë për të përcaktuar se cilët elementë tërheqin më shumë vëmendjen.
- Testimi A/B: Krahasimi i versioneve të ndryshme të një dizajni për të përcaktuar opsionin më të mirë.
Duke ndjekur këto parime dhe udhëzime, projektuesit mund të krijojnë ndërfaqe tërheqëse dhe intuitive që përmirësojnë përvojën e përdoruesit dhe efektivitetin e ndërveprimeve të përmbajtjes.
