Дизайнерлерге арналған визуалды иерархия принциптері - көрерменнің көздері дизайн арқылы қалай қозғалатынын және қандай элементтердің ең маңызды немесе көрнекі тартымды екенін анықтау үшін қолданылатын дизайн тұжырымдамасы.

Алдымен тас тақталар, папирус шиыршықтары және қағаз болды. Одан кейін компьютер экрандары мен электронды планшеттер пайда болды. Бетті көрсету технологиясы дамыған сайын, дизайнерлерге мазмұнды ұйымдастырудың нақты жолы қалады. Бірақ қайсысы жақсы? Қысқа айтқанда , визуалды иерархия.

Мұнда көрнекі иерархияның анықтамасы берілген: Көрнекі иерархия — бұл орналасу дизайндағы графикалық элементтер әрбір элементтің маңыздылығы бойынша. Көрнекі салмақты анықтайды элементтің маңыздылығы дизайн иерархиясында, көрерменге не нәрсеге және қандай ретпен назар аудару керектігін айтады.

Дизайнерлерге арналған ресурстар. 50 тегін

Бұл маңызды мәселеге айналуда, өйткені жауап беретін құрылымдар дизайнерлерді бір уақытта көптеген әртүрлі беттер туралы ойлауға мәжбүр етеді. Тығыз мәтін мен қысқа назар аударуға тап болған дизайнерлер оқырманның көзін ең маңызды ақпаратқа бағыттау үшін 6 принципті әзірледі.

Көрнекі иерархияның осы 6 қағидасы брошюралардан бастап қолданбаларға дейін барлығын жобалауға көмектеседі және соңғы пайдаланушының дизайнерлер үшін оң оқу тәжірибесіне ие болуын қамтамасыз етеді.

Көрнекі иерархияның принциптері

Барлық мәдениеттер жоғарыдан төмен оқылады, ал көптеген мәдениеттер солдан оңға қарай оқылады. Бірақ бұл білім маңызды болғанымен бет дизайны, дизайнерлер тапсырманың әлдеқайда қиын екенін біледі.

Жақында жүргізілген зерттеулер көрсеткендей, адамдар алдымен бетті оқымас бұрын оған қызығушылық танытатынын білу үшін сканерлейді. Сканерлеу үлгілері әдетте "F" және "Z" деген екі пішіннің бірін алады және сіз дизайнда мұны пайдалана аласыз.

F-үлгілері. Көрнекі иерархияның принциптері

F-үлгілері мақалалар немесе блог жазбалары сияқты дәстүрлі мәтіндік беттерге қолданылады. Оқырман сол жағын сканерлейді беттер солға реттелген тақырыптарда немесе тақырыптың бастапқы сөйлемдерінде қызықты кілт сөздерді іздейді, содан кейін ол қызықты нәрсеге тап болған кезде тоқтайды және оқиды (оңға). Нәтиже F (немесе E немесе одан да көп көлденең жолақтары бар нәрсе; бірақ «F» термині тұрып қалған) сияқты көрінеді.

визуалды иерархиялық бетті сканерлеу үлгілері

Мұны қалай пайдалана аласыз? Маңызды ақпаратты солға туралаңыз және абзац блоктарын бөлу үшін қысқа, қалың тақырыптарды, таңбалауыштарды және басқа да назар аударатын элементтерді пайдаланыңыз.

Z-моделі. Көрнекі иерархияның принциптері.

Z-үлгілері сияқты беттердің басқа түрлеріне қолданылады жарнама немесе ақпарат міндетті түрде блок параграфтарында көрсетілмейтін веб-сайттар. Оқырман алдымен маңызды ақпарат табылуы мүмкін беттің жоғарғы жағын сканерлейді, содан кейін диагональ бойынша қарама-қарсы бұрышқа жылжып, беттің төменгі жағында да солай істейді.

Визуалды иерархияның Z-үлгі принциптері

Веб-дизайнерлер әдетте өз беттерін осы мінез-құлықты нақты сәйкестендіру үшін жобалайды, ең маңызды ақпаратты бұрыштарға орналастырады және басқа маңызды ақпаратты үстіңгі және астыңғы жолақтардың бойымен бағдарлайды және диагональді қосады.

Төменде 2010 жылғы конференция жиналысының дизайнында маңызды элементтер логотип болып табылады (жоғарғы сол жақта), «қазір тіркелу» түймесі (жоғарғы оң жақта) және Z үлгісіндегі жақсы орындарға стратегиялық түрде орналастырылған динамиктердің тізімі (төменгі).

2. Өлшем маңызды. Көрнекі иерархияның принциптері
_

Бұл өте қарапайым: адамдар алдымен үлкен нәрселерді оқиды. Төмендегіге «бөлінбестен» бұрын сіздің көзіңіз «көрініске» тартылса жарнама Young Vic театры үшін сіз дереу перцептивті психологпен байланысуыңыз керек: сирек кездесетін аномалия ретінде сынау арқылы жақсы ақша табуға болады.

визуалды иерархия үшін қаріп өлшемін пайдалану

Бір қызығы, бұл тенденция жоғарыдан төменге қатысты ережені қабылдамауға жеткілікті күшті. Жоғарыдағы суретте «бұзу» «әрекет ету уақытын» жоққа шығарады, себебі ол үлкенірек және солға қарай (солдан оңға қарай ереже көмектеседі).

Бірақ Жылдық есептің келесі бетінде: Адам құқықтары жөніндегі науқан 2012 (бесінші БАҚ бағанында әзірленген) біз үлкен көлемде оқимыз шрифт Тікелей үстіндегі мәтіннің алдында «Науқан жолындағы теңдік үшін күрес» «Сайлау 2012». Көрнекі иерархияның принциптері

Көрнекі иерархияның принциптері

«Сайлау 2012» - ақпараттың ең жоғары деңгейі: ол бізге төмендегі ақпарат қатысты болатын жалпы тақырыпты көрсетеді. Бірақ дизайнер мақаланың тақырыбы оқырмандар үшін қызықтырақ деп шешті, сондықтан оны бірінші оқылатындай етіп бағалады.

3. Кеңістік және текстура. Көрнекі иерархияның принциптері

Назар аударудың тағы бір жолы тыныс алу үшін жеткілікті орын беріңіз . Түйменің айналасында айтарлықтай теріс бос орын болса немесе мәтіндік блоктағы жолдар кеңінен орындалса, бұл элементтер оқырмандарға оңайырақ көрінеді.

Төмендегі суретте (DrawtoClick сайтының бөлігі) көріп отырғаныңыздай, аралық кеңістік өлшемді пайдаланудың талғампаз баламасы немесе толықтыруы болуы мүмкін. Міне, кезең сату, «Notre agence vouscompagne...», өте шағын шрифтпен жазылған, бірақ оның маңыздылығын көрсететін ақ кеңістіктің көптігімен қоршалған. Төменде «Le Compendre», «Le Réaliser» және «Le Partager» тіркестері қоршаған кеңістіктен бөлініп, қосымша екпін алады.

визуалды иерархияның мысалы

Адамдар визуалды иерархияға қатысты «текстура» туралы айтқанда, олар текстураның графикалық әсерлерін білдірмейді. Керісінше, «текстураның» бұл түрі беттегі кеңістіктің, мәтіннің және басқа мәліметтердің жалпы орналасуын немесе құрылымын білдіреді. Бұл Bright Pink үлгісі тұжырымдаманы жақсы көрсетеді:

Көрнекі иерархиялық принциптер 2

Бірінші суретте «Спорт» сөзі «бадминтонға» қарағанда иерархияда жоғары, өйткені ол биік, үлкен және батылырақ. 2-суретте «бадминтонды» ерекше ететін және оны өз кеңістігіне орналастыратын қара төртбұрыштың арқасында екі сөз шамамен баламалы.

Үшінші суретте фондық скрипт "Спорт" кеңістігін үзеді, бірақ "бадминтон" кеңістігін емес, сондықтан "бадминтон" иерархиядағы ең жоғары болып табылатын кері нәтижеге әкеледі. Бұл дамуды болжау қиын, сондықтан дизайнерлер оны «текстураның» тұтас сезімімен жиі байланыстырады.

4. Қаріптің салмағы және жұптастыру. Көрнекі иерархияның принциптері

Қаріп таңдау визуалды иерархияны орнату үшін өте маңызды. Қаріптің ең маңызды атрибуттарының арасында салмақ, оның әріптерін құрайтын штрихтардың ені және serif және sans serif сияқты стиль жатады. Басқа түрлендірулер, мысалы, курсивтер де рөл атқаруы мүмкін.

Қалай екенін байқаңыз гарнитура Шай фабрикасы үшін төмендегі веб-дизайндағы сөз иерархиясының ретіне әсер етеді: «жылынуға көмектесетін тамаша шайлар» ойынның атауы, бірақ шрифт салмағы мен курсивтің айырмашылығы сөздерді орналастырудан басқа, көбірек жасайды. динамикалық, аз сызықты, оқу тәжірибесі. “://azbyka.com.ua/foto/tea-factory.jpg” />

Кейбір жағдайларда мақсат әртүрлі ақпаратты бірдей шұғыл түрде ұсыну болып табылады. Барлығын бірдей өлшемге және салмаққа орнату баламалылықты қамтамасыз етеді, бірақ сонымен бірге оны монотонды етеді. Төмендегі Trendi журналының мұқабасындағыдай қаріпті саралау - мұны болдырмаудың бір жолы. Көрнекі иерархияның принциптері

Мұнда беттің шеткі жағындағы бес тизер иерархияда бірдей, бірақ жақсы жұпталған екі қаріпті өзгерту арқылы әртүрлілікке қол жеткізіңіз: біреуі орташа салмақты сериф, екіншісі жеңіл, бірақ биік sans serif.

Көрнекі иерархияның принциптері

5. Түс және реңк. 

Міне, тағы бір маңызды нәрсе: ашық түстер дыбыссыз түстерден немесе сұр реңктерден ерекшеленеді, ал ашық реңктер «алыс» болып көрінеді және осылайша иерархияда қанық, қою реңктерге қарағанда төмен түседі. Олар қайда орналасқан веб-сайты жарықтық әсеріне қара және ақ тор әсерімен ашық жарық пен түсті артқы жарықтандыруды контраст жасайды:

визуалды иерархия үшін қолданылатын түс

Guggenheim веб-сайты орынды таңдау, қазір қаралып жатқан көрмелер тізімі және арнайы сілтемелер сияқты маңызды ақпаратты ерекшелеу үшін түсті пайдаланады. көрмелер. Көрнекі иерархияның принциптері

Гуггенхайм мұражайы

Уитни мұражайының веб-сайты, керісінше, реңкті (негізгі тонға ақ қосып, оны жеңілірек етуді білдіреді) пайдалана отырып, бір қаріп, салмақ және тон (қара) ішінде иерархияны белгілейді. «Поп мәдениетіндегі Кори Архангел» визуалды иерархияда «Новые Уитни Stories» сөзінен төмен екені анық, себебі ол төменірек болғандықтан ғана емес, сонымен қатар оның реңктері ақ фонда азырақ байқалатындықтан. Көрнекі иерархияның принциптері

Уитни Американдық өнер мұражайы

Түс ерекше мағынаға ие мобильді дизайн шағын экран өлшемі өлшемді өзгерту және кең аралық сияқты басқа стратегияларды пайдалану мүмкіндігіңізді шектейтін қолданбалар. Grainger Industrial Supply қолданбасында "Тексеруді жалғастыру" түймесі қызыл түске боялып, оны кез келген бетте ерекше етіп көрсетеді. Тар іздеу нәтижелері тақтасы, керісінше, сұр болып табылады, бұл оны иерархияда іздеу жолағы және өнім сілтемелері сияқты басқа элементтерге шамамен баламалы етеді.

Көрнекі иерархияның Грейнджер принциптеріне арналған қолданба дизайны

Grainger қолданбасының дизайны

6. Дизайнерлерге арналған бағыт.

Бет макеттері әдетте шарт бойынша және ең оқылатын пішім болғандықтан тік және көлденең сызықтар торын орындауға арналған. Мұндай жүйеде иерархияны орнатудың жаңа тәсілі бар: торды бұзу.

Қисық немесе диагональ бойымен орналасқан мәтін ортасын алып, айналадағы тормен блокталған мәтіннен автоматты түрде ерекшеленеді. Бұл көптен бері Frost Design компаниясының аялдама постері сияқты жарнамадағы тиімді стратегия болды.

Жиі қойылатын сұрақтар. Дизайнерлер үшін визуалды иерархияның принциптері.

1. Көрнекі иерархия дегеніміз не?

Көрнекі иерархия – беттегі элементтерді олардың маңыздылығын көрсететін және пайдаланушының назарын аударатындай етіп орналастыруға бағытталған дизайн принципі. Ол пайдаланушыларға ақпарат иерархиясын жылдам түсінуге және мазмұнмен тиімді әрекеттесуге көмектеседі.

2. Неліктен визуалды иерархия дизайнда маңызды?

Көрнекі иерархияның маңыздылығы мынада:

  • Жақсартылған пайдалану мүмкіндігі: Пайдаланушыларға қажетті ақпаратты жылдамырақ табуға көмектеседі.
  • Жақсартылған қабылдау: Мазмұнды түсінікті және тартымды етеді.
  • Өзара әрекеттесуді ынталандыру: Негізгі элементтерге назар аударады және әрекетті ынталандырады.
  • Навигацияны жеңілдету: Бетті шарлауды және шарлауды жеңілдетеді.

3. Көрнекі иерархияның негізгі принциптері қандай?

Негізгі принциптерге мыналар жатады:

  • Өлшем және масштаб: Үлкенірек элементтер көбірек назар аударады және маңыздырақ болып саналады.
  • Түс және контраст: Жарқын және қарама-қарсы элементтер ерекшеленеді және назар аударады.
  • Орналасқан жері және тұруы: Беттегі жоғарырақ немесе ортаға жақынырақ элементтер мағыналырақ болып қабылданады.
  • Кеңістік пен бостық: Элементтердің айналасында бос орын қалдыру олардың ерекшеленуіне көмектеседі.
  • Типография: Ақпараттың маңыздылығын атап өту үшін әртүрлі қаріптерді, өлшемдерді және мәтін мәнерлерін пайдалану.
  • Фигуралар мен сызықтар: Нұсқаулар мен екпін жасау үшін пішіндер мен сызықтарды пайдалану.

4. Көрнекі иерархияны құру үшін өлшем мен масштабты қалай пайдаланасыз?

Өлшем мен масштабты қолдану:

  • Тақырыптар мен тақырыпшалар: Тақырыптар үшін үлкен өлшемдерді және ішкі тақырыптар үшін кішірек өлшемдерді анық құрылымды жасау үшін пайдаланыңыз.
  • Негізгі элементтер: Басқа элементтерден ерекшелену үшін маңызды түймелердің немесе сілтемелердің өлшемін үлкейтіңіз.
  • Суреттер мен графика: Мазмұнның негізгі бөліктеріне назар аудару үшін үлкен кескіндерді пайдаланыңыз.

5. Түс пен контраст көрнекі иерархияға қалай әсер етеді?

Түс пен контрасттың әсері:

  • Түс белгілері: Негізгі элементтерді бөлектеу үшін ашық немесе қанық түстерді пайдаланыңыз.
  • Контрасттық тіркесімдер: Оқуды жақсарту үшін мәтін мен фон үшін қарама-қарсы түстерді пайдаланыңыз.
  • Түс үйлесімділігі: Сіз таңдаған түстер бір-бірімен үйлесетініне және негізгі ақпараттан алаңдамайтынына көз жеткізіңіз.

6. Элементтердің орналасуы мен орналасуын қалай дұрыс қолдану керек?

Орналастыру принциптері:

  • Жоғарыда маңызды элементтер: Негізгі ақпаратты беттің жоғарғы жағына бірден көрінетін жерге қойыңыз.
  • Орталық орналасу: Орталыққа жақынырақ орналастырылған элементтер көбірек назар аударады.
  • Орналастыру реттілігі: Элементтерді логикалық ретпен орналастыру ақпаратты түсінуді жақсартады.

7. Ақ кеңістік визуалды иерархияны құруға қалай көмектеседі?

Бос кеңістіктің рөлі:

  • Бөлгіш элементтер: Элементтер арасында бос кеңістік жасау оларды анық бөлуге көмектеседі және қабылдауды жақсартады.
  • Назар аудару: Маңызды элементтің айналасында бос орын қалдыру оны ерекшелендіреді және назар аудартады.
  • Таза және ұқыпты: Ақ кеңістікті пайдалану дизайнды ұқыпты және реттелген етіп көрсетеді.

8. Көрнекі иерархияны құру үшін типографияны қалай қолдануға болады?

Типографияны қолдану:

  • Қаріптер мен стильдер: Тақырыптар, тақырыпшалар және негізгі мәтін үшін әртүрлі қаріптер мен мәнерлерді пайдаланыңыз.
  • Мәтін өлшемі мен салмағы: Маңызды ақпарат үшін мәтін өлшемін және салмағын ұлғайту.
  • Бөліну: Негізгі сөздерді немесе сөз тіркестерін ерекшелеу үшін курсив, қалың немесе астын сызуды пайдаланыңыз.

9. Фигуралар мен сызықтар визуалды иерархияға қалай әсер ете алады?

Фигуралар мен сызықтардың әсері:

  • Бағыттаушы сызықтар: Пайдаланушыға қадағалауға көмектесу үшін нұсқаулықтарды жасау үшін сызықтарды пайдаланыңыз бет.
  • Пішіндер екпін ретінде: Геометриялық пішіндер маңызды элементтерді ерекшелей алады немесе екпін жасай алады.
  • Мазмұнды бөлу: Жолдарды мазмұнның әртүрлі бөліктерін бөлу үшін пайдалануға болады, бұл анық құрылымды жасайды.

10. Көрнекі иерархияны тексеру үшін қандай құралдар мен әдістерді қолдануға болады?

Сынақ әдістері:

  • Пайдаланушылармен тестілеу: Пікір алу үшін нақты пайдаланушылармен тестілеуді өткізіңіз.
  • Мінез-құлық талдауы: Аналитикалық қолдану құралдары беттегі пайдаланушы әрекетін зерттеу.
  • Әріптестерден кері байланыс: Қосымша пікірлер мен ұсыныстар алу үшін жобаны құрдастардың қарауын сұраңыз.
  • Жылу карталары: Жылу карталарын талдаңыз, қай элементтер көбірек назар аударатынын анықтау.
  • A/B сынағы: Ең жақсы нұсқаны анықтау үшін дизайнның әртүрлі нұсқаларын салыстыру.

Осы принциптер мен нұсқауларды орындау арқылы дизайнерлер пайдаланушы тәжірибесін және мазмұнды өзара әрекеттесу тиімділігін жақсартатын көрнекі тартымды және интуитивті интерфейстер жасай алады.