15 з 31 уроку UX-інтенсиву від Джоеля Марша (Joel Marsh)

Share Button

15from31

(Якщо ви щойно приєдналися до нас, радимо почати звідси!)

Ви ще не втомилися від каченят? Ні, я так не думаю.

Візуальне “домінування” – здається досить елементарним концептом, але ви будете здивовані, наскільки корисним він може бути. Наші мізки аж занадто вправні у знаходженні патернів там, де їх немає. Як дизайнер, ви можете скористатися цим.

*Домінування лінії:

linetension

На картинці показано 8 каченят, розташованих рядком. Ми не бачимо 8 індивідуальних каченят; ми бачимо лінію. Це домінування лінії. Сприйняття лінії чи “шляху” там, де їх немає.

Наші очі будуть рухатися по напрямку шляху, щоб побачити, куди він веде. Супер-корисно.

Якщо ми зламаємо цей шлях – подібно зламаному патерну – прогалина приверне найбільше уваги.

*Домінування країв:

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

Результатом може стати “форма”.

edgetension

На картинці вище я розташував каченят таким чином, що вони створюють “кути” прямокутника. Ви можете побачити 12 каченят, або 4 групи по три каченяти, але насправді ваш розум прагне побачити прямокутник, тож він так і робить.

Крім того, тепер ми можемо покласти щось “всередину” прямокутника (може, більше каченят?!), чи ж у “простір” між “кутами”. Подібно до домінування лінії, домінування країв переносить фокус на прогалини.

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

Також є зручність у тому, що цей спосіб дає можливість композиції виглядати більш “простою” та “згуртованою”, оскільки лінія чи прямокутник – це одна ментальна річ, тоді як 12 окремих каченят надто прекрасні, щоб вмістити їх всіх у голові.

Змішуйте усі принципи:

У цьому уроці я лишив проміжки “домінування” пустими, але ви не повинні так робити. Ви можете використовувати також і колір для створення шляху, як наприклад градієнт на списку задач. Або ви можете додати візуальної ваги до групи елементів, щоб вони сприймалися як ціле, а не як окремі частини. Це чудовий спосіб спрямовувати погляд користувача, не додаючи більше “речей” до композиції!

***

Наступного разу ми вивчимо п’ятий і останній з візуальних принципів дизайну: Вирівнювання і наближення.

Взято звідси.

*Лексема “домінування” була використана нами за браком точного відповідника в українській мові. Якщо ви знаєте, як точніше перекласти з англійської “тиск лінії і тиск краю”, пишіть у коментах )

Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

14 − seven =