Керування станами в прототипах

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

Цей матеріал ми присвятили темі керування станами в протоипах.

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

• Запам'ятовування стану: Стан об'єкта зберігається, коли ви покидаєте екран і повертаєтеся до нього.
• Спільне використання стану: Стани передаються між відповідними об'єктами на різних екранах.
• Скидання стану: Стани об'єктів повертаються до початкових при кожній взаємодії.

Для успішного обміну станами між екранами об'єкти повинні відповідати один одному.

Запам'ятовування стану

Уявіть собі реальний застосунок. Коли ви взаємодієте з елементом, наприклад, ставите позначку в списку чи прокручуєте мапу, ви очікуєте, що при поверненні на цей екран стан елемента залишиться незмінним. Саме це і забезпечує запам'ятовування стану.

Інтерактивні компоненти

Figma запам'ятовує останній обраний варіант вашого інтерактивного компонента.

Наприклад, у вас є інтерактивний компонент прапорця з варіантами «не вибрано» та «вибрано». Якщо ви обрати «вибрано», Figma запам'ятає цей стан. Тобто, якщо ви перейдете на інший екран, а потім повернетесь, прапорець лишиться у вибраному стані.

Позиція прокручування

Figma фіксує також і вашу позицію прокручування.

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

Відео

Figma зберігає поточний стан відтворення відео у прототипах.

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

Спільне використання стану

Іноді потрібно, щоб стан одного об'єкта автоматично передавався відповідному об'єкту на іншому екрані. Це і є спільне використання стану.

Інтерактивні компоненти

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

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

Позиція прокручування

Figma передає позицію прокручування між відповідними об'єктами.

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

Відео

Figma обмінюється станом відтворення відео між відповідними об'єктами.

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

Скидання стану

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

Щоб налаштувати скидання стану, виберіть перехід, щоб відкрити панель його налаштувань. У розділі «Керування станами» (State management) ви можете відмітити наступні параметри:

• Скинути позицію прокручування: Повертає прокрутку до початкового положення.
• Скинути стан компонента: Повертає інтерактивний компонент до його початкового стану, заданого на полотні.
• Скинути стан відео: Перезапускає відео з початку та повертає його до початкового стану відтворення.

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

Інтерактивні компоненти

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

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

Позиція прокручування

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

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

Відео

Використовуйте «Скинути стан відео», щоб перезапустити відео з початку та повернути його до початкового стану відтворення, заданого на полотні.

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

Відповідність об'єктів

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

Вкладені об'єкти

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

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

Монтажні ділянки верхнього рівня

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

• Використовуйте ідентичні назви шарів.
• Використовуйте назви шарів зі спільними початками та знаками «/». Наприклад, ділянка верхнього рівня з назвою «Checkout / 1» відповідатиме іншій ділянці з назвою «Checkout / 2», оскільки початок назви до «/» є ідентичним.

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