При розробці графічних інтерфейсів зараз намагаються поступово позбавлятися від усього зайвого і зосереджуватися на функціональності. Але хоча функціонал і є одним з ключових факторів успіху продукту, візуальна складова не менш важлива - особливо тому, що вона може поліпшити функціональність.
У цій статті я покажу, як візуальні елементи, такі як тіні, можуть нести інформацію, що сприймається користувачем інтерфейсу.
Еволюція інтерфейсу: від псевдотрехмерності до надплоского дизайну
Тривимірні ефекти і скевоморфізм: ілюзія глибини інтерфейсу
Хоча дисплеї і стали майже плоскими, дизайнери і розробники чимало зробили для того, щоб їх наповнення здавалося тривимірним. З часів зародження графічних інтерфейсів у них використовувалися псевдотрехмерні ефекти (тіні, градієнти, виділення) - які допомагають користувачеві з першого погляду зрозуміти, як можна взаємодіяти з тим чи іншим елементом. Такі ефекти створювали ілюзію глибини, повідомляли користувачеві про положення елементів в ієрархії, а також вказували на їх інтерактивність. Серед іншого:
- Елементи, які здаються піднесеними, виглядають так, немов їх можна натиснути. Так часто позначаються кнопки.
- Елементи, які здаються втиснутими (або порожніми), виглядають так, наче їх можна заповнити. Так часто позначають поля вводу.
Наведене нижче діалогове вікно Windows 95 ілюструє, як використання тіней та виділення може створювати 3D-ефекти.
Зауважте, що кнопки здаються піднесеними, а поле вводу - втиснутим
Скевоморфізм став наступним етапом еволюції даної ідеї: тепер елементи інтерфейсу імітують об'єкти реального світу, переносячи їх у світ цифровий. Скевоморфізм у цифровому світі часто пов'язують з продуктами Apple (особливо - з iOS до версії 7). Вони дійсно є прекрасним прикладом того, як скевоморфізм виглядає в цифровому дизайні. Візьмемо для прикладу додаток Newsstand. У ньому використовується скевоморфна книжкова шафа з трьома «полицями» і текстурами дерева. Метафора книжкової шафи повинна допомогти користувачам швидко освоїти принципи взаємодії з додатком.
Newsstand на iOS6. Тіні та фонові текстури, що відкидаються, - засоби імітації об'єктів реального світу
І все ж ранні спроби створення тривимірності і застосування скевоморфізму часто робили інтерфейси занадто громіздкими - вони були перевантажені елементами, а деталі реалізації відволікали від функціоналу.
Плоский дизайн: прибираючи тіні, ви знижуєте потенціал освоєння інтерфейсу
На кожну дію знайдеться протидія. Так і у світі цифрового дизайну знайшлася протидія скевоморфізму. Ідея була така: як би ми не старалися, вміст екрану ніколи не буде виглядати по-справжньому тривимірним, так чому б не позбутися всієї цієї мішури і не зосередитися на функціональності?
На відміну від тривимірного дизайну або скевоморфізму, по-справжньому плоский дизайн навіть не намагається відтворити зовнішній вигляд об'єктів у реальному світі. Елементи в ньому дійсно плоскі. Ніякої моделі освітлення, навіть легких тіней, які вказували б, що елемент є натисканим (тому що немов піднятий над іншими) або заповнюваним (тому що немов втиснутий в поверхню).
Погляньте, наприклад, на мову дизайну Microsoft Metro у Windows 8.
Інтерфейс Windows 8 - приклад надплоского дизайну
Прямо протилежна крайність: все здається занадто плоским. Елемент «Change PC Settings» («Зміна параметрів комп'ютера») більше схожий на підпис цієї групи іконок, ніж на кнопку. У результаті багато користувачів ніколи їй не користуються, навіть не розуміючи, що вона існує. Коли елемент просто випускають з виду або неправильно розуміють його функцію, причина тому - погана різність елемента і пов'язаної з ним дії.
Дизайнери інтерфейсів десятиліттями робили об'єкти такими деталізованими не просто так. Все, від чого відмовилися в надплоскому дизайні - відблиски, ефект піднесеності у кнопок або вдавленості біля полів введення, тобто різноманітні видіники - були покликані позначити можливість взаємодії з елементом. І хоча конкретні засоби, якими ця можливість позначалася, змінювалися від додатку до програми, користувачі завжди могли припустити, що:
- На чітко виділені елементи, швидше за все, можна натиснути;
- На елементи без чіткого виділення, швидше за все, натиснути не можна.
До і після впровадження плоского дизайну - майже повна відсутність елементів з чітким виділенням не дозволяє точно визначити, які об'єкти є натисканими
З цієї причини повна відмова від будь-яких засобів розрізнення елементів по їх функціональності - явно невдале рішення. Користувачам потрібні видіники - індикатори, за якими можна миттєво зрозуміти, що саме на сторінці або в додатку є натисканням. Серед іншого, вкрай важливим індикатором, на який покладається людський мозок, є тіні.
Майже плоский дизайн
Останнім часом дизайнери почали розуміти, до яких проблем з юзабіліті призводить плоский дизайн. В результаті з'явилися більш збалансовані рішення, іноді звані «майже плоским дизайном» або «плоским дизайном 2.0». За стилем вони майже плоскі, але використовують легкі тіні, виділення та шари, щоб надати інтерфейсу глибину.
Розроблений компанією Google Material Design - хороший приклад такого майже плоского дизайну. Він використовує фізичні принципи, щоб надати інтерфейсу осмисленість і візуально впорядкувати елементи. Відрізняючись простотою, Material Design не жертвує видіниками.
Глибина графічного інтерфейсу Android
Тіні та підйом елементів
Сучасні інтерфейси - більш багатошарові і повною мірою використовують вісь Z, тобто глибину. Такий підхід робить їх більш «відчутними».
Відчуття глибини створюється тінями - елементи та зображення, що відкидають тіні, виглядають так, немов парять над сторінкою. Тіні трохи «приправляють» дизайн, але і не роблять його занадто «приторним». Вони не відволікають користувача, навпаки - завдяки їм він може зрозуміти, що:
- Ви можете натиснути відкидаючий тінь.
- Якщо один елемент відкидає тінь на інший, значить, перший знаходиться вище - це дозволяє впорядковувати елементи, створюючи ієрархію.
До і після - якби не тінь, було б неможливо зрозуміти, що рожеве коло і блакитна поверхня - окремі елементи
- Тіні також дають зрозуміти, в якому напрямку зрушився об'єкт.
До і після - тінь, що відкидається, зменшується і стає чіткіше або збільшується і розмивається в міру того, як об'єкт опускається або піднімається
- Тіні використовуються спільно з підйомом елементів. Підйом - це відносна глибина (або висота), відстань між двома поверхнями по осі Z. Підйом вимірюється від верху одного елемента до верху іншого і визначає глибину тіні, яку перший відкидає на другий.
Різні величини підйому двох об'єктів у Material Design
Якщо користувач не впевнений, є елемент натисканням чи ні, він повинен зрозуміти це за змінами, які відбуваються після натискання. Тут у справу і вступає підйом. Коли змінюється підйом елемента, змінюється і його тінь:
Після натискання кнопки
Картка піднімається після активації
Ув'язнення
У дизайні вам не варто покладатися на жорсткі тіні, надміру строкаті градієнти або складні ефекти освітлення - все це може відвернути користувача від призначення елементів.
Однак м'які тіні та інші засоби «непоганих» інтерфейсів можуть виявитися корисними - вони несуть важливу інформацію, виділяючи об'єкти і позначаючи їх функціонал і стан.
Користувачі воліють простоту, чіткість і впорядкованість - і при розробці інтерфейсів слід покладатися на особливості людського сприйняття. Приклади успішних інтерфейсів, що з'явилися в останні роки, показують: виграє той, хто доводить принципи, що лежать в основі дизайну, до досконалості.
