Як зробити оптично правильно збалансовані іконки, правильно вирівняти фігури та зробити ідеальне заокруглення кутів.

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

1. Виміряний і візуальний розмір

Що більше: 400-піксельний квадрат чи 400-піксельне коло? З погляду геометрії, їхня висота і ширина рівні. Але погляньте на зображення нижче. Наші очі миттєво виявляють, що квадрат «переважує» коло. До речі, слова на позначення ваги дуже зручні для опису людського оптичного сприймання.

Ось варіант із сіткою і розмірами.

Погляньмо на ще одне зображення квадрата і кола. В аспекті візуальної ваги вони здаються рівними?

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

Щоб показати, чому так трапляється, я наклав фігури з першого прикладу (400-піксельні коло і квадрат) на фігури з другого прикладу (400-піксельний квадрат і 450-піксельне коло). Як можна помітити нижче, квадрат переважує коло в зонах «а», ніби обхопив його з усіх боків. Праворуч, коло і квадрат збалансовані, жодна з фігур не обхопила іншу, обидві мають частини, що звисають. Простими словами, праворуч фігури мають схожу площу, тоді як їхня ширина і висота різні.

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

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

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

А ось і кілька «справжніх» збалансованих візуально іконок.

Тепер зрозуміло, чому зона для побудови іконки завжди більша, ніж її власне «тіло»: щоб круглі, трикутні та інші не квадратні іконки не здавалися надто малими.

Найпростіший спосіб протестувати візуальний баланс — це розмивання. Якщо іконки перетворюються на більш-менш схожі «плями», вони візуально врівноважені.

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

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

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

Важливо пам’ятати

• Оптична вага — це те, як людське око сприймає розмір і важливість об’єкта.  Вона не обов’язково дорівнює розміру в пікселях.
• Кола, ромби і трикутники, а також інші не квадратні фігури повинні мати більшу ширину і висоту, щоб перебувати у візуальному балансі з фігурами, близькими до квадратів.
• Зони для іконок повинні мати вільне місце для оптичного збалансовування. Це необхідно для наборів іконок, для яких критично важливий узгоджений дизайн.

2. Вирівнювання різних фігур

Вирівнювання — це логічне продовження попередньої теми про оптичний баланс і явище візуальної ваги. Погляньмо на смужки внизу. Вони здаються однаковими в аспекті довжини?

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

Ще одне зображення з двома стрічками. Чи щось змінилося?

Я застосував оптичну компенсацію для нижньої смужки. Її гострі кінці виходять на 20 пікселів за лінію довжини верхньої стрічки.

А тепер кілька більш складних прикладів зі стрічками різної форми.

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

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

Оскільки фон світлий, він не порушує звичний плин тексту.

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

На відміну від ситуації зі світлим тлом, чорний фон має суттєву візуальну вагу. Якщо у вас мета — «вписати» параграф у колонку, то краще вирівняти його так, як показано нижче.

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

Світлий фон полів ліворуч виходить за лінію вирівнювання назв і введеного користувачем тексту. Правий край кнопки «Send» не повністю вирівняний із правим краєм фону текстових полів, адже кнопка темніша і «важча».

Праворуч текстові поля мають насичені контури, тому я зрівняв їх із назвами, в той час, як введений користувачем текст розташований всередині полів з відступами. Кнопка «Надіслати» має трикутний край, тому я посунув її трохи праворуч, щоб збалансувати гострий бік з прямокутними полями вгорі.

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

Фокус у тому, що на правій кнопці слово трохи зміщене ліворуч, оскільки правий край трикутний. Крім того, кнопка у формі стрілки на 40 пікселів ширша, щоб бути візуально рівною прямокутній кнопці.

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

Тобто простір над і під великою літерою до краю кнопки рівний. У цьому підході є сенс, адже всі назви команд починаються з великої літери. Також в англійській мові, якою з користувачем спілкується більшість популярних інтерфейсів, часто вживані літери мають більше верхніх виносних елементів (l, t, d, b, k, h), ніж нижніх виносних елементів (y, j, g, p).

Інший метод — це вирівнювати текст згідно з висотою малої літери шрифту. У гротесках і антиквах ця величина дорівнює висоті літери «х».

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

Чи є різниця між цими методами? Є, але не суттєва.

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

Кнопки з іконками мають свої особливості. Візьмемо, для прикладу, популярну іконку «паперовий літачок» на круглій основі. Який з поданих варіантів здається краще збалансованим?

Сподіваюся, ви помітили, що щось не так із лівим варіантом. Це сталося через різні принципи вирівнювання. Перший варіант — іконка сприймається як прямокутник. В певному сенсі, так і є, адже графіка у форматі SVG чи PNG є прямокутним аркушем із малюнком посередині. Саме це отримують фронтенд-програмісти від дизайнерів. Праворуч же іконка розміщена так, що кожен з її трьох гострих кутів рівнонаближений до краю круглої основи.

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

Той самий принцип з кнопкою «Play». Якщо просто вирівняти дві фігури — заокруглений квадрат і трикутник — результат буде дивним.

Аби розмістити трикутник оптично коректно, варто вписати його в коло, і вже це коло відцентрувати щодо фону.

Важливо пам’ятати

• Форми з гострими кутами повинні бути більшими, щоб мати збалансований вигляд поруч із прямокутними формами.
• Врахування висоти великої літери — це ефективний і поширений спосіб розміщення тексту на основі кнопки.
• Один із ефективних способів правильно розмістити трикутну іконку на кнопці — вписати її в коло і відцентрувати разом з ним на кнопці.

3. Оптичне заокруглення кутів

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

Люди, яких я питав раніше, обирали між варіантами 3 і 4. Варіанти 1 і 2 очевидно «худі», а фігура 5 занадто «огрядна». Якщо ми накледемо третю і четверту фігури (геометрично правильне і дещо модифіковане коло) одна на одну, то побачимо, що друга дещо «важча» за першу і має більш обтічний вигляд.

Щоб продемонструвати, що я маю на увазі, я взяв літери «о» з трьох відомих геометричних шрифтів —  Futura, Circe та Geometria. Шрифти — це сфера, де чи не найбільше застосовують особливості візуального сприйняття людини і складну систему оптичної компенсації. Тому я припускаю, що їхні круглі форми сприймаються більш приємно для очей, ніж геометричні. Вам подобаються ці літери?

А якщо накласти геометричні кола на літери? Навіть найгеомеричніша, найрівніша «о» зі шрифта Futura має невеличкі виступи з чотирьох боків. Літери Circe та Geometria, крім виступів з боків, ще й ширші.

Отже, з погляду візуального сприйняття, модифіковане коло (праворуч) може мати більш згладжено-круглий і приємний вигляд, ніж геометрично рівне (ліворуч).

Як можна використати це явище? Звичайно, для заокруглення кутів! Якщо обмежитися лише вбудованою функцією в популярних графічних редакторах Photoshop, Illustrator чи Sketch, результат не буде візуально гарним.

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

Я виправив це, врахувавши візуальне сприйняття.

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

Просто спробуйте відчути різницю.

Тепер застосуймо це до заокруглених кнопок.

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

Те саме і з іконками мобільних додатків. Не можна просто так взяти і використати стандартне заокруглення, щоб досягти ідеального результату. Але перед тим, як заглибитися в тему, погляньмо на дві по-різному заокруглені фігури.

Перша фігура — звичайний прямокутник зі скругленими кутами, який я намалював у Sketch. Друга фігура — так званий супереліпс, або крива Ламе. Її винайшов французький математик Габріель Ламе. Залежно від значень у складі формули, вона може варіюватися від чогось схожого на чотирикутну зірку до форми, яка нагадує заокруглений квадрат.

Марк Едвардс запропонував формулу для кривої Ламе, графік якої мав вигляд плавної, візуально красивої фігури. Іконки iOS сьомої версії і вище побудовані на основі цієї фігури.

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

Головна перевага таких фігур, як супереліпс, полягає у їхніх м’яких і плавних контурах. З іншого боку, такі нестандартні фігури вкрай складно перенести в реальний інтерфейс. Треба або комбінувати кілька SVG-картинок, або включати спеціальні формули в код, або використовувати PNG-маски, як це робить Apple для іконок своїх додатків.

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

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

Важливо пам’ятати

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

І на додаток

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

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

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

Стаття також доступна англійською мовою за посиланням.