Статья, которая взорвалась не так давноМощное решение пользовательского интерфейса среднего и внутреннего уровня с открытым исходным кодом от Alibaba FusionЯ верю, что многие из вас видели это. Многие студенты использовалиFusion Design. Вся система Fusion Design все еще относительно велика. Далее автор популяризирует науку с точки зрения новичкаFusion Design.
Система фьюжн-дизайна
- Библиотека компонентов @alifd/next
- сайт фьюжн
- Плагин FusionCool Sketch
- Клиент ледового завода
Библиотека компонентов
@alifd/next (далее — компоненты Fusion) — это наборReactБиблиотека компонентов, которую мы называем внутренней структурой DPL (библиотека шаблонов проектирования). Адрес репозитория на гитхабе:GitHub.com/alibaba-radiation…Документацию см.:fusion.design/component
Краткий обзор основных функций компонентов Fusion:
- 50+ компонентов, богатых компонентами, охватывающих подавляющее большинство сцен
- Небольшой размер next.min.js 702 КБ next.min.css 337 КБ
- Уровень охвата компонентов одним тестом составляет почти 90%.
Конечно, наличие вышеперечисленных функций может гарантировать только безопасное использование компонентов Fusion в производственной среде без потери опыта любых существующих основных библиотек компонентов. Кроме того, убойная функция компонентов Fusion, одна из самых мощных возможностей:
- Возможность настройки темы, вы можете настроить тему визуально через сайт Fusion.
- Возможность настройки темы, вы можете настроить тему визуально через сайт Fusion.
- Возможность настройки темы, вы можете настроить тему визуально через сайт Fusion.
Важные вещи говорятся трижды.
сайт фьюжн
Сайт Fusion является центром таких возможностей, как управление Fusion Design.
В основном обеспечивают следующие возможности:
- Управление собственным сайтом
- Конфигурация темы
- Другие способности не будут подробно описаны в этой вводной статье.
собственный сайт
Просто поймите, что собственный сайт — это коллекция, созданная самими пользователями, а темы и материалы должны быть прикреплены к сайту. На сайте может быть несколько наборов тем, несколько материалов и несколько участников. Возможности управления сайтом включают новые сайты, управление участниками сайта, управление темами и управление материалами. Это не будет обсуждаться подробно, и будет подробно обсуждаться позже в этой статье.
Конфигурация темы
На первый взгляд, автор фронтенд, когда используется слово топик. В среде дизайнеров эта аналогия называется Дизайн-системой. На сайте Fusion Design,дизайнерЕго можно преобразовать в собственную эксклюзивную систему дизайна, основанную на официальной системе дизайна Fusion Design. Каждая дизайн-система — это отдельный сайт. Собственный сайт может иметь несколько тем. Конфигурация темы может редактировать Design Token (это также язык дизайнера, учащиеся, работающие с интерфейсом, могут приравнять его к переменным SCSS) для создания тем.
- Пакет кода темы, который можно напрямую предоставить интерфейсу для использования.
- Базовые дизайнерские материалы, которые можно использовать непосредственно в Sketch через плагин FusionCool.
В настоящее время Fusion Design предоставляет 4 набора официальных тем.
Всего за один месяц с момента официального открытия для публики было создано 2500 новых сайтов и накоплено более 2800 наборов тем. В Alibaba Group системы проектирования, такие как Tmall MUI, Taobao ICE Design, Alibaba Cloud Wind, Hema Xiansheng Hippo и Cainiao Walle, глубоко адаптированы на основе Fusion Design для удовлетворения различных бизнес-потребностей каждого BU. В настоящее время группа обслуживает более 40 BU, более 1500 наборов тем осадков и более 2000 проектов.
Управление материалами
То есть вы можете управлять материалами дизайнера, то есть дизайнерскими материалами, которые рисует дизайнер. Также возможно управлять кодом, используемым фронтенд-программистами.
Документация
Справочные документы не нужно повторять, в основном документы сайта, компоненты Fusion, FusionCool и документы дизайнера, объясняющие концепцию дизайна.
FusionCool
FusionCool — этоSketchПлагин для помощи дизайнерам в создании эскизов дизайна. FusionCool предлагает следующие материалы:
- основные компоненты
- Значок Значок
- Диаграмма
- модуль
- шаблон
Среди них 1-3 автоматически генерируются в соответствии с Системой дизайна, заполненной дизайнером на платформе конфигурации.После того, как тема в Системе дизайна изменится и будет выпущена, материалы дизайна в FusionCool автоматически изменятся. 4-5 материалов в настоящее время расписаны вручную официальными дизайнерами Fusion Design.
Материалы дизайна, подготовленные последующими дизайнерами, также поддерживают импорт в систему проектирования через FusionCool, которую можно легко использовать повторно.
Клиент ледового завода
Сама библиотека компонентов Fusion не зависит от каких-либо каркасов и может быть импортирована через cdn или интегрирована вcreate-react-app. Чтобы облегчить применение библиотеки компонентов Fusion к интерфейсному проекту, ему нужны леса, которые могут быстро помочь в создании инженерных проектов.
Команда ICE открыла исходный код ряда продуктов системы ICE, и Fusion Design считает Iceworks официальным основным инструментом разработки Fusion.
Полный рабочий процесс Fusion Design
Представлены 4 основные части Fusion Design. Давайте поговорим о сотрудничестве инженеров и дизайнеров в рамках системы Fusion Design.Проще говоря, это 4 шага.
- Дизайнер настраивает дизайн-систему и публикует ее. Получите пакеты тем Sketch Symbol и Fusion Component Library
- Дизайнеры используют Sketch для создания дизайна.
- Инженер устанавливает библиотеку компонентов Fusion и пакет темы, предоставленный дизайнером.
- Engineer Coding реализует рукопись дизайнера
Нарисуйте эскиз следующим образом:
Смотрите блок-схему для более подробных шагов:
Общая проблема
Прошло некоторое время с тех пор, как Fusion широко продвигался. Ниже приведены некоторые часто задаваемые вопросы, на которые нужно ответить.
В чем разница между Fusion Design и Ant Design?
Простой ответ заключается в том, что Ant Design — это набор библиотек компонентов, а Fusion Design — это фабрика генерации библиотек компонентов.
Ant Design — отличная библиотека компонентов, очень популярная и влиятельная в сообществе. Качество кода превосходное, а библиотека компонентов Fusion также используется для справки в процессе разработки. Fusion Design также накапливался и оттачивался внутри Alibaba в течение трех лет, охватывая большое количество BU и бизнес-сценариев. Только на уровне библиотеки компонентов опыт Fusion и AntD не сильно отличается.
Студенты, которые участвовали в Conf, будут впечатлены отличным концепцией дизайна АНТД. Но в глазах тысячи парней в глазах тысячи человек. Каждая компания (BU / отдел / линейка продуктов) имеет разные восприятия красоты, а разные бизнес-формы имеют разные требования к стилям проектирования. / Отдел / линейка продуктов) это часто Просто необходимо настроить стиль по умолчанию библиотеку компонентов. Когда пользователи хотят настроить библиотеку компонентов, ANTD не особо удобен. Фронтальные инженеры должны много изменять меньшие переменные, и многократно подтверждают точность проектирования проекта восстановления конструкторов с дизайнерами.Пользовательская тема AntD / Issue: support dark theme
Библиотека компонентов Fusion совместно разработана дизайнерами из нескольких BU в группе, и цель состоит в том, чтобы помочь каждому BU настроить свой собственный XXXX Design. Таким образом, Fusion Design будет более общим, чем Antd, в возможностях настройки пользовательского интерфейса, чтобы соответствовать возможностям настройки каждого бизнес-направления. С помощью платформы Fusion Design дизайнеры могут визуально редактировать стили библиотеки компонентов Fusion без участия инженеров во всем процессе.
В Alibaba Group системы проектирования, такие как Tmall MUI, Taobao ICE Design, Alibaba Cloud Wind, Hema Xiansheng Hippo и Cainiao Walle, глубоко адаптированы на основе Fusion Design для удовлетворения различных бизнес-потребностей каждого BU. В настоящее время группа обслуживает более 40 BU, более 1500 наборов тем осадков и более 2000 проектов.
Какая связь между Fusion Design и Fly Ice (ICE)?
ICEХороший друг Fusion. Fusion решает проблему сотрудничества между интерфейсом и дизайнерами. ICE решает проблему эффективности фронтенд-разработки. Благодаря массивным многоразовым материалам и вспомогательным настольным инструментам можно быстро создавать клиентские приложения для повышения эффективности разработки. Сотрудничество между Fusion и ICE в основном отражено в следующих моментах:
- Использование ДВС
fusion组件库в качестве библиотеки базовой компоненты - Fusion рекомендует Iceworks, клиент с графическим интерфейсом для ICE, в качестве предпочтительного инструмента разработки.
- Официальные материалы React ICE и официальные материалы Fusion совместимы, обе стороны будут совместно обогащать экологию материалов и способствовать развитию блочных/шаблонных материалов.
Можно ли экспортировать эскиз проекта, созданный дизайнером с помощью FusionCool, в виде кода?
HTML-файл, экспортируемый FusionCool, представляет собой аннотированный черновик дизайна.
Проект дизайна хочет быть преобразован в код: «Дорога далека, я буду искать вдоль и поперек». Если вы хотите экспортировать код напрямую, вы не сможете сделать это в ближайшее время. Команда Fusion в настоящее время также инвестирует и исследует эту область. Можно с нетерпением ждать.
Могут ли пользователи Vue использовать Fusion Design?
Библиотека компонентов Fusion реализована на основе стека технологий React. Но возможности конфигурации компонентов Fusion Design не зависят от технологического стека компонента. Если набор библиотек компонентов разработан в соответствии со спецификацией разработки компонентов Fusion Design, его можно подключить к Fusion Design для получения возможностей конфигурации.
В настоящее время нет библиотеки компонентов vue, подключенной к системе дизайна Fusion Design. Если вы хотите, чтобы ваша библиотека компонентов vue была подключена, свяжитесь с нами, чтобы обсудить~
Можно ли использовать Fusion Design на мобильных устройствах?
Веб-компоненты Fusion Design Mobile находятся в стадии разработки, а компоненты для React Native, Weex, флаттера и апплетов пока не запланированы...