Оптичні ефекти в інтерфейсах користувача (для задротів)

Як зробити оптично збалансовані іконки, ідеальне скруглення кутів і правильно вирівняти фігури? Про все це дуже детально розказав Слава Шестопалов (senior experience designer в EPAM Systems) у своїй статті на Medium. А Продизайн для вас підготував переклад солов’їною. 

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

Фактичний і оптичний розмір

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

Ось версія з направляючими і цифрами.

Давайте подивимося ще на одну картинку з квадратом і колом. З точки зору візуальної ваги, вони здаються вам рівними?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У плані пікселів відповідь — однозначно «так». Однак, на перший погляд, нижня смуга виглядає коротше верхньої.

Ще один малюнок з цими двома смужками. Щось змінилось?

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

Ще кілька складних прикладів зі смугами різної форми.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чи є різниця між цими підходами? Так, різниця є. Однак, вона не велика.

Додаткові приклади для порівняння нижче. Підхід з висотою великих літер, який представлений лівим стовпчиком, безперечно краще підходить для слів «Cancel» і «OK» — кнопок, які широко використовуються — тому що слово «Cancel» не має нижніх виносних елементів, а «OK» написано тільки прописними буквами. Підхід з x-висотою, який показаний в правому стовпчику, краще тільки для кнопки «Sync», назва якої має як верхні, так і нижні виступаючі елементи. Слова «Cancel» і «OK» здаються розташованими занадто високо.

Ситуація з іконками трохи відрізняється. Давайте помістимо популярну іконку «Відправити» на круглу кнопку. Який варіант виглядає більш збалансованим?

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

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

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

Якщо ви хочете розташувати трикутник візуально краще, впишіть його в коло і вирівняйте її з фоном кнопки.

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

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

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

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

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

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

Давайте накладемо їх на геометричні кола. Навіть у самій геометричній «о» шрифту Futura є чотири виступаючі частини. Букви шрифтів Circe і Geometria, крім того, що мають виступаючі частини, ще й ширші кіл.

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

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

Людські очі відразу виявляють точки, де пряма лінія раптово перетворюється в криву. І це виглядає неприродньо.

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

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

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

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

Напевно, ви могли помітити, що кнопки праворуч мають більш гладкі і обтічні краї.

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

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

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

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

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

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

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

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

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

Бонус

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

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

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