Visuell Hierarchieprinzipien fir Designer sinn en Designkonzept dat benotzt gëtt fir ze guidéieren wéi d'Ae vum Betrachter duerch en Design bewegen a bestëmmen wéi eng Elementer am wichtegsten oder visuell attraktiv sinn.

Am Ufank waren et Steenpëllen, Papyrusrullen a Pabeier. Duerno koumen Computerbildschirmer an elektronesch Pëllen. Wéi d'Säit Display Technologie evoluéiert, sinn Designer e klore Wee fir Inhalt ze organiséieren. Awer wat ass besser? Kuerz gesot , visuell Hierarchie.

Hei ass d'Definitioun vu visueller Hierarchie: Visuell Hierarchie ass d'Arrangement grafesch Elementer am Design an der Reiefolleg vun der Wichtegkeet vun all Element. Visuell Gewiicht bestëmmt Element Wichtegkeet an der Hierarchie vum Design, sot de Betrachter op wat ze fokusséieren an a wéi enger Reiefolleg.

Ressourcen fir Designer. 50 fräi

Dëst gëtt en ëmmer méi wichteg Thema well reaktiounsfäeger Kaderen Designer zwéngen iwwer vill verschidde Säiten gläichzäiteg ze denken. Konfrontéiert mat dichten Text a kuerzen Opmierksamkeetsspann hunn Designer 6 Prinzipien entwéckelt fir de Lieser op déi wichtegst Informatioun ze riichten.

Dës 6 Prinzipien vun der visueller Hierarchie hëllefen Iech alles vu Broschüren bis Apps ze designen, fir datt den Endbenotzer eng positiv Lieserfarung fir Designer huet.

Prinzipien vun der visueller Hierarchie

All Kulture gi vun uewe bis ënnen gelies, an déi meescht Kulture gi vu lénks op riets gelies. Mä obwuel dëst Wëssen wichteg ass fir Säit Design, Designer wëssen datt d'Aufgab vill méi schwéier ass.

Rezent Studien hu gewisen datt d'Leit eng Säit als éischt scannen fir ze kucken ob se drun interesséiert sinn ier se se liesen. Scan Musteren éischter eng vun zwou Formen ze huelen, "F" an "Z", an Dir kënnt Virdeel vun dëser an Ärem Design huelen.

F-Muster. Prinzipien vun der visueller Hierarchie

F-Schablounen gëllen op traditionell Textsäiten wéi Artikelen oder Blogposten. De Lieser scannt déi lénks Säit Säiten sicht interessant Schlësselwierder a lénks ausgeriichtte Rubriken oder initial Themen Sätz, stoppt dann a liest (no riets) wann hien oder hatt eppes Interessantes begéint. D'Resultat gesäit aus wéi e F (oder en E, oder eppes mat nach méi horizontalen Streifen; awer de Begrëff "F" huet festgehalen).

visuell Hierarchie Säit Scannen Templates

Wéi kënnt Dir dëst benotzen? Alignéiert wichteg Informatioun no lénks a benotzt kuerz, fett Rubriken, Kugelen an aner ähnlech opmierksam Elementer fir Paragrapheblocken opzebriechen.

Z-модель. Принципы визуальной иерархии .

Z-Muster применяются к другим видам страниц, таким как Reklammen или веб-сайты, где информация не обязательно представлена ​​в абзацах блока. Сначала читатель сканирует верхнюю часть страницы, где, вероятно, будет найдена важная информация, затем переходит в противоположный угол по диагонали и делает то же самое в нижней части страницы.

Z-Muster Prinzipien vun visuell Hierarchie

Webdesigner designen normalerweis hir Säiten fir explizit mat dësem Verhalen ze passen, déi wichtegst Informatioun an den Ecker ze setzen an aner wichteg Informatioun laanscht déi iewescht an ënnen Baren ze orientéieren an d'Diagonal ze verbannen.

An der ënnen Am Design vun der Konferenzversammlung 2010 sinn wichteg Elementer de Logo (uewen lénks), e "Registréiert elo" Knäppchen (uewen riets), an eng Lëscht vun de Spriecher (ënnen), déi strategesch a flotten Z-Muster Flecken plazéiert sinn.

2. Gréisst wichteg. Prinzipien vun der visueller Hierarchie
_

Это достаточно просто: люди сначала читают большие вещи. Если ваш взгляд устремляется к «представлению» перед тем, как «расколоться» в приведенной ниже Reklammen для театра « Молодой Вик» , вам следует немедленно связаться с психологом-перцептивом: вы, вероятно, сможете заработать хорошие деньги, проходя тестирование как редкая аномалия.

benotzt Schrëftgréisst fir visuell Hierarchie

Wat interessant ass, ass datt dës Tendenz tatsächlech staark genuch ass fir d'Top-down Regel ze refuséieren. Am uewe genannte Bild iwwerschreift "Hack" "Zäit fir ze handelen", well et méi grouss ass a lénks ass (also hëlleft d'lénks op riets Regel).

Awer op der nächster Säit vum Annual Report: Human Rights Campaign 2012 (entwéckelt an der fënnefter Medienkolonn) liese mir am grousse Schrëft "De Kampf fir Gläichheet um Campagne Trail" virum Text direkt uewen "Walen 2012." Prinzipien vun der visueller Hierarchie

Prinzipien vun der visueller Hierarchie

"Wahlen 2012" ass den héchsten Niveau vun Informatioun: et erzielt eis dat allgemengt Thema op deem d'Informatioun hei drënner bezunn ass. Awer den Designer huet decidéiert datt den Titel vum Artikel méi interessant ass fir d'Lieser, an huet et dofir bewäert, datt et als éischt gelies gëtt.

3. Raum an Textur. Prinzipien vun der visueller Hierarchie

Eng aner Manéier fir Opmierksamkeet ze kréien ass ginn Inhalt genuch Plaz ze otmen . Wann et bedeitend negativ Plaz ronderëm de Knäppche gëtt oder d'Linnen am Textblock wäit verfollegt ginn, wäerten dës Elementer méi liicht fir d'Lieser sichtbar sinn.

Как вы видите на изображении ниже (часть DrawtoClick сайта «s), интервал может быть элегантной альтернативой или дополнением к использованию размера. Здесь, точка Verkaf, «Notre agence vouscompagne…», написана очень мелким шрифтом, но она окружена избытком пустого пространства, что свидетельствует о ее важности. Ниже фразы «Le Compendre», «Le Réaliser» и «Le Partager» получают дополнительный акцент, будучи оторванными от окружающего пространства.

Beispill vu visueller Hierarchie

Когда люди говорят о «текстуре» в отношении визуальной иерархии, они не имеют в виду графические эффекты текстуры. Скорее, этот вид «текстуры» относится к общему расположению или структуре пространства, текста и других деталей на странице. Этот пример от Bright Pink хорошо иллюстрирует концепцию:

Visuell Hierarchie Prinzipien 2

Am éischte Bild ass d'Wuert "Sport" méi héich an der Hierarchie wéi "Badminton", well et méi grouss, méi grouss a méi fett ass. Am Bild 2 sinn déi zwee Wierder ongeféier gläichwäerteg, dank dem schwaarze Rechteck, deen "Badminton" erausstécht an et an säin eegene Raum setzt.

Am drëtte Bild ënnerbrach d'Hannergrond-Kräbbelen den "Sports"-Raum awer net de "Badminton"-Raum, a resultéiert dofir zu engem Réckgang wou "Badminton" am héchsten an der Hierarchie ass. Dës Entwécklung ass schwéier virauszesoen, sou datt Designer et dacks mat engem holistesche Sënn vun "Textur" associéieren.

4. Schrëft Gewiicht a Pairen. Prinzipien vun der visueller Hierarchie

Schrëftauswiel ass kritesch fir visuell Hierarchie opzebauen. Zu de wichtegsten Attributer vun enger Schrëft sinn d'Gewiicht, d'Breet vun de Strichen, déi seng Buschtawen ausmaachen, a Stil, wéi Serif a Sans Serif. Aner Ännerungen, wéi Kursiv, kënnen och eng Roll spillen.

Notéiert wéi Headset beaflosst d'Uerdnung vun der Wuerthierarchie am Webdesign hei ënnen fir The Tea Factory: "perfekt Téi fir Iech ze waarm ze hëllefen" ass den Numm vum Spill, awer Differenzen am Schrëftgewiicht an Kursiv, zousätzlech zu Wuertplazéierung, kreéieren e méi dynamesch, manner linear, liesen Erfahrung. "://azbyka.com.ua/foto/tea-factory.jpg" />

A verschiddene Fäll ass d'Zil eng Vielfalt vun Informatioun als gläich dréngend ze presentéieren. Jiddereen op déiselwecht Gréisst a Gewiicht ze setzen wäert d'Equivalenz garantéieren, awer och monoton maachen. Schrëftdifferenzéierung ass ee Wee fir dëst ze vermeiden, sou wéi den Trendi Magazin Cover hei drënner. Prinzipien vun der visueller Hierarchie

Preparéieren eng Broschür fir Dréckerei.

Hei sinn déi fënnef Teaser ronderëm d'Peripherie vun der Säit d'selwecht an der Hierarchie, awer erreechen Varietéit andeems Dir zwee gutt gepaart Schrëften ännert - eent e mëttlere Gewiicht Serif an deen aneren e liicht awer grouss sans-serif.

Prinzipien vun der visueller Hierarchie

5. Faarf a Schatt. 

Hei ass eng aner No-Brainer: hell Faarwen ënnerscheeden sech aus gedämpfte Faarwen oder Schatten vu gro, während méi hell Nuancen méi "fernt" schéngen an domat méi niddereg an der Hierarchie falen wéi méi räich, däischter Nuancen. D'Where Are They Websäit kontrastéiert hell Liicht a faarweg Beleuchtung mat engem schwaarz-wäiss Gittereffekt zum Effekt vun der Liichtkraaft:

Faarf benotzt fir visuell Hierarchie

Веб- сайт Гуггенхайма использует цвет для акцентирования важной информации, такой как выбор местоположения, список выставок, которые в настоящее время просматриваются, и ссылки на специальные Ausstellungen. Принципы визуальной иерархии

Bescht Schrëft fir Benotzerdefinéiert Verpackung

Guggenheim Musée

D'Websäit vum Whitney Museum, op der anerer Säit, etabléiert eng Hierarchie bannent enger Schrëft, Gewiicht an Ton (schwaarz) mat Tint (wat heescht datt d'Wäiss zum Basistoun bäigefüügt gëtt, et méi hell mécht). "Cory Archangel on Pop Culture" ass kloer ënner "New on Whitney Stories" an der visueller Hierarchie, net nëmme well se méi niddereg ass, awer och well säi Schiet méi hell ass, wat et manner opfälleg géint de wäissen Hannergrond mécht. Prinzipien vun der visueller Hierarchie

Whitney Musée vun American Art

Faarf huet eng speziell Bedeitung an mobilen Design Uwendungen wou kleng Écran Gréisst limitéiert Är Fähegkeet aner Strategien ze benotzen wéi Gréisst Variatioun a breet Abstand. An der Grainger Industrial Supply App ass de "Proceed to Checkout" Knäppchen rout faarweg, sou datt et op all Säit erausstécht wou et erschéngt. D'Narrow Search Results Panel, am Géigesaz, ass gro, sou datt et an der Hierarchie ongeféier gläichwäerteg ass mat aneren Elementer wéi d'Sichbar a Produktlinks.

App Design fir Grainger Prinzipien vun der visueller Hierarchie

Applikatioun Design fir Grainger

6. Richtung fir Designer.

Säit Layouten sinn normalerweis entwéckelt fir e Gitter vu vertikalen an horizontalen Linnen ze verfollegen, souwuel duerch Konventioun a well et dat liesbarst Format ass. An esou engem System gëtt et en neie Wee fir d'Hierarchie opzebauen: d'Gitter briechen.

Text, deen laanscht eng Kéirung oder Diagonal positionéiert ass, steet automatesch géint den Ëmgéigend Gitter-blockéierten Text eraus, an hëlt d'Mëtt. Dëst ass scho laang eng efficace Strategie an der Reklamm, sou wéi dem Frost Design säi Busarrêt Affiche.