Дизайнерлерге арналған визуалды иерархиялық принциптер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Брошюраны басып шығаруға дайындау.

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

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

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

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

Таңдамалы қаптамаға арналған ең жақсы қаріп

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

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

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

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

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