Parimet e hierarkisë vizuale për projektuesit

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 zbatohen për lloje të tjera faqesh, të tilla si reklamat 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 "performanca" përpara se të "ndaheni" në reklamën më poshtë për 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 pika e shitjes “Notre agence vouscompagne...”, është shkruar me shkronja shumë të vogla, por është e 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. Ky 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 internetit më poshtë 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 kopertina e revistës Trendi më poshtë. Parimet e Hierarkisë Vizuale

Përgatitja e një broshure për printim.

Këtu, pesë ngacmuesit rreth periferisë së faqes janë të njëjta në hierarki, por arrijnë shumëllojshmëri duke ndryshuar dy shkronja të çiftëzuara 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 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 të veçanta. Parimet e Hierarkisë Vizuale

Fonti më i mirë për paketimin me porosi

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.

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.