Вам потрібна система форми

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

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

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

Форма підкріплює ваш бренд

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

Форма керує ієрархією

Сильні відмінності у формі можна виразно використовувати для спрямування уваги. Наприклад, якщо інтерфейс користувача має переважно округлі форми, то введення гострої, ромбоподібної кнопки може привернути увагу до цього компонента. Класичний інтерфейс Material Design круглого FAB перед прямокутними картками - це ще один приклад того, як фігуру можна використовувати для наголосу. Більш гармонійне або витончене використання форми у візуальній ієрархії може зв’язувати зв’язки між елементами, наприклад, картки подібної форми, що виступають як однолітки, або форми, що допомагають розрізнити окремі поверхні - підхід, що використовується компонентом задника.

Форма вказує на взаємодію

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

Почніть з побудови своєї форми форм

  1. Розглянемо атрибути вашого бренду. Яка основна форма уособлює життєвий баланс і особистість вашого бренду? Скористайтеся цією відправною точкою для розробки взаємодоповнювальної сімейства фігур. Ваша основна форма округла? Спробуйте поєднати картки з круглими куточками з розширеним FAB у формі пігулок. Більше в кути? Розгляньте вирізані куточки на ґудзиках та нижніх аркушах.
  2. Продумайте ієрархію вашого інтерфейсу, і як форму можна розгорнути, щоб привернути увагу до відповідних частин екрана.
  3. Використовуйте форму послідовно та цілеспрямовано у всьому додатку, щоб вибір вашої форми розвивав значення для ваших користувачів. Непослідовне використання форми може заплутати, а надмірне використання може розбавити вираз вашого бренду. Також переконайтеся, що суто орнаментальна форма не виглядає функціональною чи інтерактивною, а форма, яка використовується для передачі значення, є очевидною та однозначною.
  4. Також протестуйте історію форми з користувачами. Форма сама по собі може бути неоднозначною і може найкраще поєднуватися з піктограмою чи текстом для передачі явного значення. Зрештою, тестування користувача - це найкращий спосіб визначити, чи працює ваше призначення за формою і чи розуміється він так, як ви задумали.

Допоможіть нам створити майбутнє

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

Поділіться своїми експериментами з фігурами з нами @materialdesign.