Система дизайна

Система дизайна — это руководство по созданию последовательного интерфейса и пользовательского опыта во всём приложении. Система дизайна включает цвета, типографику, шрифты, иконки, ресурсы приложения, панель навигации, панель приложения и готовые компоненты интерфейса, такие как кнопки и виджеты текста.

Это особенно полезно при работе в команде разработчиков и дизайнеров в крупной компании. Предположим, у вас есть приложение с несколькими различными функциями и страницами, каждая из которых имеет уникальный дизайн. Однако вы замечаете, что начинаете создавать несоответствия в дизайне на разных страницах, например, используя разные цвета, шрифты и макеты.

Чтобы решить эту проблему, вы можете создать систему дизайна, описывающую общие рекомендации по дизайну. Затем члены команды смогут использовать эту систему дизайна, что обеспечит последовательность дизайна.

Добавление системы дизайна

Вы можете добавить систему дизайна из зависимостей библиотеки, добавленных в ваш проект. Библиотека может служить центральным хранилищем для ваших ресурсов дизайна, компонентов и стилей — фактически становясь библиотекой дизайна для вашего приложения (или приложений).

возможные сценарии использования

• Корпоративные приложения: Крупные организации могут разработать централизованную систему дизайна в виде библиотеки, чтобы все внутренние приложения сохраняли единый внешний вид и ощущения, усиливая узнаваемость бренда и пользовательский опыт.
• MVP для стартапов: Стартапы могут ускорить разработку минимально жизнеспособных продуктов (MVP), используя готовую библиотеку системы дизайна, такую как shadcn, чтобы сосредоточиться на функциональности и проверке у пользователей.
• Последовательность на разных платформах: Команды, стремящиеся развертывать приложения на нескольких платформах (iOS, Android, Web), могут использовать популярную библиотеку системы дизайна, ориентированную на платформу, чтобы обеспечить единообразие дизайна и уменьшить усилия на платформо-специфические корректировки.

Чтобы добавить систему дизайна из библиотеки, начните с создания системы дизайна в новом проекте FlutterFlow и публикации её как библиотеки. Затем импортируйте эту библиотеку в проект, где вы хотите использовать систему дизайна. Далее перейдите в Theme Settings > Design System и нажмите No Design System Selected. В появившемся выпадающем списке Select a library, которую вы только что импортировали, чтобы применить её систему дизайна к вашему проекту.

Импорт темы Figma

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

Чтобы импортировать тему Figma в проект FlutterFlow, перейдите в Theme Settings > Design System и нажмите Connect To Figma. Аутентифицируйте свою учётную запись и предоставьте доступ к Figma. После подключения вставьте URL вашего файла Figma, чтобы получить тему.

Вы увидите список всех импортированных цветов; начните их сопоставление с цветами вашего проекта. Вы можете фильтровать эти цвета по тому, сопоставлены они или нет, и также у вас есть возможность массово удалить любые импортированные цвета. После этого вы можете настроить типографику проекта, используя импортированные стили текста.

к сведению

Все импортированные цвета всегда доступны в разделе Colors > Custom Colors.

Если вы предпочитаете видеоурок, вот руководство для вас:

---

Индикаторы загрузки

Чтобы настроить индикаторы загрузки, используемые в приложении, вы можете внести изменения в этом разделе. У вас есть возможность указать тип индикатора, цвет и радиус, а предварительный просмотр изменений будет отображён ниже.

подсказка

Избегайте индикаторов загрузки или компонентов неправильного размера, которые приводят к скачкам макета. Убедитесь, что компоненты загрузки соответствуют размеру и положению заменяемого содержимого.

Если вы предпочитаете видеоурок, вот руководство для вас:

---

Тема полосы прокрутки

Отсюда вы можете настроить внешний вид полосы прокрутки, которая появляется в прокручиваемых элементах, таких как ListView, GridView, StaggeredView, Row и Column.

примечание

Полоса прокрутки по умолчанию отображается только на платформах, где Flutter нативно её поддерживает, таких как веб- и десктопные среды.

Вы можете изменить её цвет, настроить толщину, придать скруглённую границу и многое другое. В разделе «Предварительный просмотр» вы также сможете увидеть немедленный визуальный эффект ваших изменений.

Вот все свойства, которые вы можете настроить:

1. Цвет ползунка: Это изменяет цвет перемещаемой части полосы прокрутки, часто называемой «ползунком».

   

2. Толщина: Это увеличивает ширину (в вертикальной полосе прокрутки) или высоту (в горизонтальной полосе прокрутки).

   

3. Радиус границы: Это задаёт кривизну углов полосы прокрутки. Настраивая радиус границы, вы можете придать полосе прокрутки более скруглённый вид (более высокие значения) или более квадратный вид (более низкие значения).

   

4. Минимальная длина ползунка: Это относится к наименьшему размеру перемещаемой части (ползунка) полосы прокрутки. Это гарантирует, что пользователи всегда смогут видеть и взаимодействовать с ползунком, даже если содержимое очень длинное.

   

5. Отступ по главной оси: Это относится к пространству или зазору вдоль основной оси полосы прокрутки. Например, в вертикально прокручиваемом списке это относится к отступам сверху и снизу, а в горизонтально прокручиваемом списке — к отступам слева и справа.

   

6. Отступ по поперечной оси: Это относится к пространству или зазору вдоль поперечной оси полосы прокрутки. Например, в вертикально прокручиваемом списке это относится к отступам слева и справа, а в горизонтально прокручиваемом списке — к отступам сверху и снизу.

   

7. Ползунок всегда видим: Это определяет, остаётся ли перемещаемый элемент «ползунок» полосы прокрутки постоянно видимым или исчезает, когда не используется. При включении вы также можете указать, показывать ли трек с пользовательским цветом и цветом границы.

8. Интерактивность: С помощью этого свойства вы можете установить разные цвета для разных состояний ползунка, включая состояние наведения или перетаскивания.

   

---

Стиль «потянуть для обновления»

Отсюда вы можете настроить внешний вид функции «потянуть для обновления» (т. е. круга загрузки).

Вы можете изменить его цвет, цвет фона и ширину штриха. В разделе «Предварительный просмотр» вы также сможете увидеть немедленный визуальный эффект ваших изменений.

Цвета

Этот раздел позволяет настроить цвета вашего приложения, давая вам контроль над визуальным видом приложения. Отсюда вы можете настроить цвета как для светлой, так и для тёмной темы. Кроме того, вы можете предварительно просмотреть существующие цвета темы, импортировать цвета из Coolors и даже извлекать цвета из изображений.

Добавление или замена цвета

По умолчанию мы добавляем 16 предопределённых цветов для светлой и тёмной тем. Однако вы можете захотеть добавить новый цвет или заменить существующий, чтобы лучше соответствовать идентичности вашего бренда.

Чтобы добавить новый цвет:

1. Нажмите кнопку Add Color.
2. Новый цвет будет добавлен как Custom Color. Нажмите на него и введите шестнадцатеричное значение цвета.
3. Вы также можете изменить имя пользовательского цвета.
4. Нажмите Use Color.

Чтобы обновить существующий цвет в теме светлого и тёмного режимов, нажмите на цвет и введите шестнадцатеричное значение цвета.

Изучение цветов проекта

Мы позволяем вам просматривать часто используемые цвета в вашем приложении и некоторые предопределённые цветовые схемы, которые могут соответствовать брендингу вашего приложения.

Для этого:

1. Нажмите Explore Project Colors.
2. Выберите страницу, которую хотите предварительно просмотреть.
3. Чтобы найти общие цвета, прокрутите вниз и нажмите Find Common Colors. Это выведет список всех используемых в приложении цветов. Используйте значки «done» и «cancel» для принятия или отклонения цветов.
4. Чтобы изучить предопределённые цветовые схемы, переключитесь на вкладку Explore, прокрутите все схемы и отметьте для просмотра предварительного просмотра.
5. Нажмите кнопку «обновить», чтобы вернуться к исходной теме.
6. Чтобы продолжить, нажмите Save Changes.

Импорт из Coolors

Импорт цветов с сайта Coolors — это быстрый и простой способ добавить предпочитаемую цветовую схему в ваше приложение. Coolors предлагает обширную библиотеку цветовых палитр, которые вы можете импортировать всего несколькими кликами, экономя время и усилия на создание собственной пользовательской цветовой палитры.

Чтобы импортировать из Coolors:

1. Перейдите на coolors.co, найдите палитру, которую хотите добавить, нажмите на меню опций (три точки) и затем нажмите Export palette.
2. Теперь выберите Code и скопируйте содержимое ниже раздела /* Object */.
3. Откройте свой проект и перейдите в Theme Settings > Colors.
4. Нажмите кнопку Import from Coolors. Это откроет новое всплывающее окно.
5. Вставьте скопированное содержимое и нажмите Import. Новые цвета будут отображены в разделе Custom Colors.

Извлечение из изображения

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

Чтобы извлечь и использовать цвет из изображения:

1. Перейдите в Theme Settings > Colors.
2. Нажмите кнопку Extract from Image и выберите изображение.
3. Появится всплывающее окно, отображающее извлечённый цвет из изображения. Чтобы продолжить, нажмите Extract & Continue.
4. На следующем шаге нажмите на любой цвет, чтобы увидеть и выбрать извлечённый цвет.
5. Нажмите Done.

Цвета темы, сгенерированные ИИ

С помощью «AI Gen Theme» просто опишите желаемую цветовую тему для вашего приложения, например «Тигр в джунглях» или «Детская сказка на ночь», и наблюдайте, как магически появляется всесторонняя цветовая схема, адаптированная под ваши нужды.

Видеоролик

Если вы предпочитаете видеоурок, вот он для вас:

Типографика и иконки

Этот раздел даёт вам полный контроль над стилизацией текста в приложении. С опциями добавления отзывчивых и пользовательских шрифтов вы можете обеспечить уникальный и последовательный вид приложения на всех размерах экрана. Кроме того, вы также можете добавить пользовательские иконки в приложение, что позволит создавать уникальные и визуально привлекательные пользовательские интерфейсы.

Определение стилей текста (типографика/шрифты)

Чтобы изменить семейство шрифтов на уровне проекта, откройте Theme Settings (из меню навигации) > Typography & Icons, нажмите на кнопку под Primary Font Family или Secondary Font Family и найдите и выберите новый шрифт.

к сведению

Primary Font Family — это шрифт, который вы будете использовать чаще всего во всём приложении. Secondary Font Family — это шрифт, который вы будете использовать для лёгких вариаций или контраста к основному шрифту.

Вы можете настроить следующие свойства каждого стиля текста:

• Размер шрифта — Используйте это, чтобы указать размер текста.
• Межбуквенный интервал — Используйте это, чтобы установить пространство между символами.
• Курсив — Флажок для включения стиля шрифта Italic.
• Насыщенность шрифта Выберите насыщенность шрифта среди Thin, Extra Light, Light, Normal, Medium, Semi Bold, Bold, Extra Bold & Black.
• Цвет — Установите цвет текста с помощью селектора цвета или указав шестнадцатеричное значение.
• Семейство шрифта — Вы можете изменить семейство шрифта для любого стиля отсюда. Нажмите здесь, чтобы установить семейство шрифта из Google Fonts или выбрать из загруженных пользовательских шрифтов. Вы также можете выбрать, является ли этот стиль основным или второстепенным семейством шрифтов.

Вы также можете создать полностью пользовательские стили текста, чтобы соответствовать вашим дизайнерским нуждам, выходя за рамки стандартных стилей, таких как Display, Headline или Title. Просто нажмите кнопку + Add Custom Text Style, новый стиль текста будет добавлен внизу, затем отредактируйте имя стиля и настройте свойства стиля.

ТАРИФЫ

Пользовательские стили текста доступны в тарифном плане Business и выше. Ознакомьтесь с нашими тарифными планами.

Добавление отзывчивых стилей текста

При разработке мобильного приложения важно учитывать разные платформы, на которых оно будет работать. Вы можете заметить, что текст выглядит меньше на платформах с более высоким разрешением экрана, таких как планшеты, веб или десктопы. Это может повлиять на пользовательский опыт и сделать приложение трудно читаемым. Чтобы решить эту проблему, вы можете добавить отзывчивый текст, который регулирует размер шрифта в зависимости от платформы.

Смотрите, как отображаются тексты с отзывчивым стилем шрифта и без него:

С отзывчивым текстом

Без отзывчивого текста

Вы можете добавить отзывчивый стиль, следуя инструкциям ниже:

1. Откройте Theme Settings (из меню навигации) > Typography & Icons.
2. Нажмите кнопку Make Responsive.
3. Теперь все стили доступны под тремя вкладками: Mobile, Tablet и Desktop. Измените каждый стиль под вкладками разных платформ, которые вы поддерживаете.
4. Запустите приложение и посмотрите, как отображаются тексты при смене платформы.

Пользовательские шрифты

Добавление пользовательских шрифтов в ваше приложение делает его выделяющимся среди других. Этот раздел позволяет загрузить свои шрифты. Вы можете загрузить файлы пользовательских шрифтов типов .ttf, .otf и .woff. После загрузки шрифта вы можете использовать его напрямую из виджета или добавить в раздел стилей текста, чтобы создать общую тему.

к сведению

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

Чтобы добавить пользовательские шрифты:

1. Откройте Theme Settings (из меню навигации) > Typography & Icons.
2. Прокрутите вниз до раздела Custom Fonts.
3. Нажмите кнопку + Add Font.
4. Введите имя семейства шрифта и нажмите кнопку Upload File(s).
5. Выберите и загрузите свой шрифт.
6. Нажмите Add Font. Новый добавленный шрифт будет отображён.
7. Чтобы использовать пользовательский шрифт напрямую в виджете, перейдите в панель свойств, нажмите на уже применённое семейство шрифта, выберите вкладку Custom Fonts и затем выберите шрифт.
8. Чтобы использовать пользовательский шрифт для общего стиля текста, откройте раздел стилей текста, нажмите на уже применённое семейство шрифта, выберите вкладку Custom Fonts и затем выберите шрифт.

Если вы предпочитаете видеоурок, вот он для вас:

Пользовательские иконки

Пользовательские иконки помогают укрепить идентичность вашего бренда и добавить уникальный штрих к приложению. Перед загрузкой иконок в FlutterFlow вам сначала нужно сгенерировать их с помощью генератора шрифтов иконок, такого как FlutterIcon или IcoMoon.

Мы также создали свой генератор пользовательских иконок из SVG, чтобы упростить процесс — не стесняйтесь использовать его вместо.

к сведению

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

Шаги по генерации и добавлению пользовательских иконок

1. Перейдите на IcoMoon.
2. Импортируйте свою пользовательскую иконку (.svg) или выберите из набора бесплатных иконок.
3. Выберите вкладку Generate Font.
4. Нажмите на кнопку настроек (значок шестерёнки) рядом с текстом загрузки в правом нижнем углу.
5. Включите Generate Dart class for Flutter.
6. Нажмите кнопку Download и затем извлеките загруженный файл.

7. Откройте свой проект FlutterFlow, перейдите в Theme Settings (из меню навигации) > Typography & Icons.
8. Прокрутите вниз до раздела Custom Icons.
9. Нажмите кнопку + Add Icons.
10. Нажмите кнопку Upload Icon File.
11. Выберите и загрузите файл .ttf в папке downloaded folder > fonts.
12. Теперь нажмите кнопку Upload Icon Info.
13. Выберите и загрузите filename.dart в загруженной папке (рядом с папкой fonts).
14. Нажмите Add Icons.

Использование пользовательской иконки

Чтобы использовать пользовательскую иконку, добавьте виджет Icon, перейдите в панель свойств и прокрутите вниз до раздела Icon. Нажмите на уже выбранную иконку, выберите вкладку Custom Icons и затем выберите вашу иконку.

Если вы предпочитаете видеоурок, вот руководство для вас:

Виджеты темы

Создание темы для виджетов обеспечивает последовательный вид приложения и cohesive дизайн. Виджеты темы можно повторно использовать, что упрощает обновление стилей приложения. Если вы решите изменить любое свойство виджета, такое как цветовая схема или шрифты, вы можете обновить виджет темы вместо того, чтобы проходить по каждому виджету индивидуально. Это может сэкономить много времени и усилий, особенно в крупных проектах.

Например, создание виджетов темы для разных типов кнопок, таких как 'primary_button', 'secondary_button' и 'tertiary_button', с конкретными атрибутами, такими как ширина, цвет, иконка, радиус границы и отступы. Затем эти виджеты можно напрямую добавить на страницу или применить к существующему виджету.

Добавление виджетов темы

Чтобы добавить виджет темы в ваше приложение, вы должны создать его, а затем использовать на странице, перетащив из палитры виджетов или применив к существующему виджету.

Вот как это сделать:

1. Откройте Theme Settings (из меню навигации) > Theme Widgets.
2. Нажмите кнопку Create Widget.
3. Введите имя виджета темы и затем выберите виджет.
4. Создайте тему для виджета с помощью его свойств, доступных справа, и нажмите Save.

5. Вы также можете сделать любой виджет виджетом темы, щёлкнув правой кнопкой мыши и выбрав Save as Theme Style Widget.

6. Теперь вы можете добавить этот виджет напрямую из дерева виджетов или палитры виджетов.

7. Чтобы применить стилизацию этого виджета к существующему виджету, выберите виджет, перейдите в Properties Panel > Widget Styling > нажмите Theme Style Unset > выберите виджет темы.

warning

После применения стилизации виджета темы любые ранее установленные свойства будут перезаписаны, кроме свойств с Set from Variable. Однако вы свободны изменять свойства существующего виджета по своему усмотрению.

Видеоролик

Если вы предпочитаете видеоурок, вот он для вас:

Часто задаваемые вопросы

Чем виджет темы отличается от создания шаблона и компонента?

Виджет темы позволяет настроить визуальный вид одного виджета, в то время как шаблоны состоят из нескольких виджетов, создающих уникальный макет интерфейса с конкретной целью. С другой стороны, компоненты — это полнофункциональные пользовательские виджеты, которые сочетают несколько виджетов и действий для выполнения задачи.