В попередньому матеріалі ми розповідали про ієрархію змісту в дизайні. Ми говорили про те, яким чином, задаючи той чи інший розмір та те чи інше положення в макеті, забезпечити зчитування ієрархії змісту.

Ми зазначили також, що в межах формату завдяки своєму конкретному розташуванню та оформленню елементи об’єднуються в групи та взаємодіють між собою. Одним з важливих інструментів, що допомагає врегулювати цю взаємодію, є так зване «правило внутрішнього та зовнішнього».

Саме йому ми присвятили цю статтю.

Суть правила

Правило часто формулюють так:

внутрішнє ≤ зовнішнє

Дещо більш розгорнуто правило може звучати так:

Зовнішнє поле елемента має бути рівним або більшим за його внутрішній простір.

Поки що, певно, не дуже зрозуміло. Але не переймайтесь, зараз ми це виправимо. І для цього нам знадобиться з’ясувати, що ми називаємо елементом, що групою і, відповідно, що є внутрішнім, а що є зовнішнім.

Елементи, групи, «внутрішнє» та «зовнішнє»

Взагалі правило внутрішнього та зовнішнього — це окремий випадок закону близькості, про який ми розповідали в лекції про гештальт. Відповідно до закону близькості, ми сприймаємо відношення об’єктів до спільних груп завдяки відстані між ними.

Наприклад, візьмемо п’ять квадратів і розмістимо їх в просторі.

За такого розташування ці елементи сприймаються як незалежні та непов’язані один з одним. Адже вони розташовані далеко одне від одного.

Давайте тепер розглянемо інший приклад, з дещо іншою організацією елементів: 

Тут ми бачимо, що елементи мають спільну вісь. Але попри це, сприйняття їх як групи ще не є чітким.

Давайте розглянемо ще чотири випадки наближення елементів один до одного.

В наведеному прикладі ми поступово зменшували відстань між квадратами. В перших двох рядках приналежність елементів до спільної групи відчувалась недостатньо чітко. А от в третьому та в четвертому рядках вона стала очевидною.

Чому так трапилось? Якої миті окремі елементи утворюють спільну групу?

Щоб це зрозуміти, нам слід додати до нашого елементу додатковий параметр — зовнішнє поле. 

Це зовнішнє поле і є тим, що в правилі називають зовнішнім. Відповідно, ширина та висота утворюють внутрішній простір елементу — власне, внутрішнє.

Тобто, правило «внутрішнє ≤ зовнішнє» визначає наступний принцип: елемент є самостійним тоді, коли в його зовнішньому полі немає інших елементів. При цьому розмір зовнішнього поля має бути рівним або більшим розміру внутрішнього простору елемента. Якщо ж в межах цього поля з’являється інший елемент, формується група.

Давайте тепер подивимось на ілюстрацію з чотирма рядками елементів, але цього разу покажемо зовнішні поля, і дія правила одразу стане більш помітною.

Отже, ми сприймаємо елементи, як групи, коли відстані між елементами рівні розміру цих елементів або менші за них.

Причому кожна група має власне поле. І відповідно, дві групи взаємодіють між собою схожим чином. Чим меншою є відстань в межах цього поля, тим щільніший між групами зв’язок.

Це правило є досить важливим під час верстки текстів. Давайте розглянемо, як воно діє, на декількох прикладах!

Застосування правила внутрішнього та зовнішнього під час верстки текстів

Одним з контекстів застосування правила зовнішнього та внутрішнього є верстка текстів. Тут базовим елементом, як правило, є літери, а мінімальною групою, відповідно, слова.

Наприклад, в словосполученні «Основи дизайну» є одразу дві групи.

Пробіл між окремими літерами незначний (його, до речі, ще називають апрош), відповідно, взаємозв’язок літер є очевидним. Відстань між окремими словами трохи більша, але все ж незначна, і тому два слова ми також об’єднуємо в спільну групу.

Давайте до цього тексту додамо ще один рядок, і в ньому напишемо «від Креативної Практики». 

І одразу ще один — «деталі на сайті creativepractice.com.ua».

Наразі на ілюстрації відступи між словами в одному рядку та між рядками однакові. І такий текст сприймати для нас дещо некомфортно. Це відбувається тому, що підсвідомо ми сприймаємо рядок як окрему групу.

Все, що належить до окремого рядка, стає внутрішнім, а його поле — зовнішнім. Тож відстань між окремими рядками ми регулюємо таким чином, щоб кожен рядок сприймався окремо. Відповідно, відстань між рядками має бути більшою, ніж відстань між словами.

Цю відстань ми регулюємо за допомогою параметру, що має назву інтерліньяж (або міжряддя). Інтерліньяж — це, власне, і є міжрядковий інтервал, відстань по вертикалі між двома базовими лініями рядків. В деяких комп'ютерних програмах його називають міжрядковий пробіл (англ. line spacing).

Як і кегль, інтерліньяж вимірюється в пунктах, і для комфортного читання задається інтерліньяж від 1.2 до 1.6 пунктів (або ж 120-160% від розміру шрифта).

Стало краще. Але є проблема: перші два рядки утворюють цілісну фразу, в той час як третій рядок сприймається дещо невідповідним. Отже за сенсом перші два рядки утворюють спільну групу, яку було б доречно відокремити від третього рядка. А оскільки сенс написаного у третьому рядку трохи менш важливий, його розмір можна трохи зменшити.

Тепер ми чітко бачимо, як елементи згруповані між собою.

Аналогічно правило працює для більш великих текстових масивів. Просто в текстах, що мають підрозділи, ці самі підрозділи утворюють окремі групи, що має бути наочно показано відповідно до такої ієрархії:

літери → слова → рядки → абзаци → підрозділи → розділи 

Слід також зауважити, що в дизайн-композиціях це правило стосується не лише текстового змісту, але й ілюстрацій та інших елементів оформлення макету.

При цьому тексти, як правило, існують не в абстрактному просторі, а в межах тої чи іншої форми. Про неї, групуючи елементи та налаштовуючи між ними відстані, дизайнери часто забувають. А дарма.

Правило внутрішнього та зовнішнього в контексті роботи з формою

Формою може бути будь що: плакат, кнопка або ж вивіска.

І при розміщенні того чи іншого змісту в межах цієї форми забувати про правило зовнішнього і внутрішнього не слід.

Подивіться на ці випадки:

Коли ви дивитесь на наведені приклади, в кожному з них ви помічаєте певну невідповідність. Іноді, коли ми бачимо подібний дизайн, ми розуміємо, що з ним щось не так, але не можемо пояснити, в чому річ.

Проблема в зовнішніх полях. Давайте їх покажемо:

Як бачите, в кожному з наведених прикладів зовнішнє поле змісту просто не вміщується в задану форму, виходить за її межі.

Щоб виправити ситуацію, необхідно або збільшувати розмір самої форми (коли це можливо і доречно) або ж змінювати розмір елементів, щоб зовнішні поля змінювались пропорційно з ними.