Настройка дизайна форм
Чтобы дизайн опросов UX Feedback совпадал с дизайном приложения, необходимо, чтобы дизайнеры указали стили (цвета) для элементов форм опросов и передали их разработчикам:
1. Настройка элементов форм в Figma.
Отправьте дизайнеру ссылку на шаблон в Figma, чтобы познакомиться со всеми настраиваемыми элементами форм и указать их цвет, под дизайн приложения:
Техническое задание состоит из 3 этапов:
В техническом задании есть возможность настроить отдельные цвета форм для светлой и темной темы. По умолчанию, разработчики используют “Светлую тему”, при этом, указывать дизайн для “Темной темы” не обязательно, при условии, что у вас не используется темная тема в приложении.
Если вы планируете использовать темную тему в приложении, обратите на это внимание разработчиков, чтобы они внедрили методы переключения между темами.
Описание методов переключения между темами находится в технических заданиях на интеграцию SDK в разделе “Дизайн”.
Android 4.3.1 | 2.4. Настройка дизайна форм , iOS 4.3.3 | 2.4. Настройка дизайна форм
2. Передача информации разработчикам.
После указания цвета в Figma, попросите дизайнеров заполнить таблицу стилей для всех элементов форм. (При использовании нашего шаблона, вкладка “Дизайн” UX Feedback. Техническая карта )
Пример таблицы для копирования:
Элемент стилей форм опросов | Светлая тема в IOS * | Светлая тема в Android* | Темная тема в IOS | Темная тема в Android | |
|---|---|---|---|---|---|
| 1 | bgColor |
|
|
|
|
| 2 | iconColor |
|
|
|
|
| 3 | text01Color |
|
|
|
|
| 4 | text02Color |
|
|
|
|
| 5 | text03Color |
|
|
|
|
| 6 | mainColor |
|
|
|
|
| 7 | errorColorPrimary |
|
|
|
|
| 8 | errorColorSecondary |
|
|
|
|
| 9 | inputBgColor |
|
|
|
|
| 10 | inputBorderColor |
|
|
|
|
| 11 | controlBgColor |
|
|
|
|
| 12 | controlBgColorActive |
|
|
|
|
| 13 | controlIconColor |
|
|
|
|
| 14 | btnBgColor |
|
|
|
|
| 15 | btnBgColorActive |
|
|
|
|
| 16 | btnTextColor |
|
|
|
|
| 17 | blackoutColor |
|
|
|
|