ArcoDesign — это система проектирования корпоративного уровня, совместно запущенная командой ByteDance GIP UED и командой разработчиков архитектуры. После почти 3 лет полировки мы открыли исходный код системы проектирования ArcoDesign путем накопления и проверки большого количества внутренних предприятий Byte. Он направлен на то, чтобы сообщество услышало больше голосов, повысило эффективность для большего числа малых и средних предприятий, а также отдельных дизайнеров и разработчиков, а также создало более эффективные и красивые «лучшие практики».
ArcoDesign имеет системные спецификации дизайна и ресурсы, а также предоставляет атомарные компоненты, охватывающие React, Vue и Mobile, в соответствии с этой спецификацией. Основываясь на богатых атомарных компонентах, Arco предоставляет платформу ресурсов, которая включает в себя платформу значков, библиотеку брендов и лучшие практики Arco Pro в дополнение к инструментам настройки для платформы конфигурации стиля и платформы материалов, с целью помочь дизайнерам и разработчикам освободить свои руки и улучшить создание среды. - и серверные приложения, которые соответствуют бизнес-спецификациям с высокой эффективностью работы и высоким качеством.
Как и название «Arco», следуя концепциям [Соглашение / Согласованность], [Ритм / Ритм], [Четко / Ясно], [Открыто / Открыто], Arco надеется помочь большему количеству пользователей повысить эффективность работы и счастье, строить лучше. продукты.
Возможности, предоставляемые ArcoDesign
Полные базовые компоненты
Основываясь на спецификации дизайна ArcoDesign, Arco предоставляет 67 основных компонентов, которых достаточно для удовлетворения большинства потребностей бизнеса. В то же время Arco также предлагает тонкие конфигурации в конструкции этих основных компонентов, чтобы облегчить последующее расширение.
Поддержка синхронизации React и Vue
Основываясь на спецификации дизайна ArcoDesign, Arco предоставляет библиотеки компонентов пользовательского интерфейса React и Vue. Библиотека компонентов Vue разработана на основе Vue 3.0, предоставляет ориентированные на будущее возможности разработки и взаимодействует с базовыми возможностями библиотеки компонентов React, которая может идеально использовать возможности экосистемы Arco.
научный темный режим
Arco поддерживает открытие темного режима одним щелчком мыши, плавное переключение и удобство работы.
темный режимЭто позволит пользователям больше сосредоточиться на своих рабочих задачах, избегая при этом визуальной стимуляции, вызванной длительным взглядом на яркие источники света в темноте.
Arco сочетает в себе преимущества переменных Less и CSS в базовом дизайне. Переменная Less отвечает за расчет цвета во время компиляции на основе основного цвета для расчета цветовой палитры светлого/темного градиента, а переменная CSS отвечает за окончательную ссылку при отображении страницы, таким образом реализуя плавное переключение света. / Темные стили. Пользователи могут не только наслаждаться плавным переключением, обеспечиваемым переменными CSS, но также наслаждаться удобством настройки одного основного цвета для создания целого набора цветовых палитр, предоставляемых переменными Less, принимая во внимание как элегантность, так и простоту использования.
Нестандартный опыт
Чтобы помочь пользователям быстрее создавать проекты от 0 до 1, Arco предоставляетЛучшие практики Arco Pro, который организует общие сценарии страниц, чтобы помочь пользователям быстро инициализировать проекты и использовать шаблоны страниц.
В мидл- и бэкэнд-проектах режим дизайна страницы относительно прост: Arco извлекает типичные бизнес-сценарии и извлекает их в шаблоны страниц, чтобы пользователи могли быстро создавать страницы, просто копируя и изменяя их.
Максимальные возможности настройки
От базовых компонентов до верхней платформы, Arco предоставляет максимальные возможности настройки.
низкоуровневые компоненты
По базовым компонентам Arco предоставляет подробныенастройка стиляиНастройка поведения по умолчанию.
стильС самого начала проектирования Arco тщательно разделила стили, влияющие на внешний вид компонента, на тысячи независимых токен-переменных и на основе этих переменных завершила преобразование изглобальный стильприбытьстиль компонентаполная конфигурация.
Поведение по умолчаниюС одной стороны, Arco поддерживает глобальную настройку поведения по умолчанию для более чем 60 компонентов, снижая затраты на обслуживание и улучшая опыт разработки с большой гибкостью. Пользователям нужно только поддерживать глобальную конфигурацию, чтобы настроить взаимодействие каждого компонента по умолчанию.
верхняя платформа
Платформа верхнего уровня Arco с поддержкой базовых возможностей еще раз бесконечно расширяет возможности настройки.
Arco предоставляет ** «платформу настройки стилей» для визуального редактирования стилей.. Настройте платформу на основе стилято, что вы видите, это то, что вы получаетеБлагодаря возможности конфигурации компонентов пользователи могут вносить точные настройки в глобальный стиль и"**Arco Design к любому дизайну». После завершения настройки пользователи могут публиковать темы на рынке тем одним щелчком мыши, предоставляя сообществу отличные стили тем. На рынке тем пользователи могут просматривать все темы и свободно выбирать.
Иммерсивный опыт работы с документами
В документации по компонентам Arco пользователи могут установить все темы на платформе настройки стилей одним щелчком мыши и быстро применить личные темы к документации по компонентам Arco для полного погружения в документацию.
Дополнительные возможности разработки и повторного использования
Благодаря гибкому API-дизайну компонентов Arco и настраиваемым компонентам, предоставляемым платформой материалов, пользователи могут быстро разрабатывать настраиваемые компоненты на основе Arco для удовлетворения своих конкретных потребностей. Настраиваемые компоненты будут лучше повторно использовать бизнес-код, способствовать совместной работе в команде, повышать эффективность разработки и делиться богатыми материальными ресурсами с сообществом.
Полная экосистема всего процесса
Arco надеется улучшить рабочий процесс всего процесса проектирования и разработки с помощью идеальной экосистемы.
Экологическая платформа
- Платформа конфигурации стилей: помогая пользователям создавать персонализированные темы, она помогает пользователям лучше управлять конфигурациями тем различных стилей и повышает эффективность совместной работы при проектировании и разработке.
- Платформа материалов: на основе инструментов Arco scaffolding можно быстро разрабатывать и совместно использовать настраиваемые бизнес-компоненты, реализовывать разделение и повторное использование бизнес-модулей, повышать эффективность разработки и способствовать совместной работе.
- Icon Platform IconBox: предоставляет стандартизированную и унифицированную библиотеку высококачественных бизнес-иконок.
- Лучшие практики в мидл- и бэк-офисе Arco Pro: помогите пользователям быстро создавать проекты от 0 до 1 и поддерживайте пользователей в свободном выборе общих шаблонов страниц.
- Инструмент настройки цвета: помогите дизайнерам и разработчикам отладить цвета в режиме онлайн и изучить алгоритмы цвета Arco.
Инструменты разработки
- Плагин Webpack: помогите разработчикам легко использовать темы в сборках Webpack, реализовывать загрузку по требованию и заменять встроенные значки компонентов.
- Arco CLI Scaffolding Tool: Инкапсулирует команды управления материалами, чтобы помочь пользователям быстро создавать проекты материалов и публиковать их на Arco Material Platform.
- Плагин VSCode: помогите пользователям просматривать документы в редакторе, визуализировать рабочие материалы и т. д.
- Плагин Figma: объединяет общие инструменты дизайна, чтобы упростить дизайнерам использование возможностей Arco.
Планируйте и развивайте лучшее сотрудничество
Основная группа пользователей дизайн-системы — дизайнер. Arco изучает, как повысить эффективность работы дизайнеров, основываясь на окружающей среде Arco.
- Чтобы облегчить разработчикам поиск ресурсов, Arco предоставляет подключаемый модуль Figma для определения местоположения ресурсов, чтобы дизайнеры могли легко находить документы ресурсов и файлы компонентов Arco одним щелчком мыши.
- Чтобы повысить эффективность подбора цветов дизайнерами, Arco предоставляет подключаемый модуль Figma для конфигурации цвета, который может интеллектуально генерировать образцы градиентного цвета в ярком и темном режимах в соответствии с заданным цветом с помощью алгоритма.
- Чтобы повысить эффективность создания значков, Arco предоставляет подключаемый модуль Figma с функцией перетаскивания одним щелчком мыши для использования значков Arco, онлайн-цвета, ширины линии, регулировки размера, гибкой конфигурации и простоты.
- Чтобы снизить стоимость создания вариантов Figma для дизайнеров и повысить эффективность дизайнеров при создании проектов дизайна, соответствующих спецификациям системы проектирования, Arco изучила Code to Design и предоставила подключаемый модуль Figma на основе компонентов. свойства в конфигурации и автоматически генерировать соответствующие элементы дизайна. открыть в то же времяплатформа конфигурации стиля, чтобы черновой вариант дизайна можно было легко выполнить «скинирование одним щелчком мыши».
- Чтобы облегчить дизайнерам управление иконками, Arco запустилаПлатформа Iconbox, предназначенный для того, чтобы дизайнеры могли эффективно управлять своими иконками на платформе. Он также предоставляет функцию подключаемого модуля Figma для загрузки значков, которая позволяет дизайнерам напрямую выбирать значки в Figma и загружать их на платформу значков одним щелчком мыши.
почему вы здесь
Arco стремится разработать лучшую систему проектирования, чтобы решить проблемы с опытом, вызванные сложным бизнесом и избыточной коммуникацией, и полностью освободить руки разработчиков и дизайнеров. После почти трех лет итерации и полировки в Byte мы обслужили более 4000 проектов, чтобы добиться эффективного и высококачественного процесса создания продукта. Это продукт, который действительно вылупился из практики, а также широко служит внутреннему бизнесу.
Вулканический двигатель
Благодаря библиотеке компонентов Arco, платформе конфигурации стилей и платформе значков он может интеллектуально генерировать персонализированные пакеты тем, подходящие для различных бизнес-потребностей, помогать Volcano Engine улучшать согласованность опыта различных линеек продуктов и улучшать предоставление предприятиям систематического полного -link Solutions Программные услуги. В настоящее время более 60% продуктов для консолей вулканического движка построены с использованием библиотеки компонентов Arco.
Заголовок номер
Используя гибкие и богатые ресурсы компонентов Arco, Toutiao может быстро создать самостоятельную мультимедийную платформу Toutiao, предоставляющую создателям многофункциональные практические функции, такие как создание и публикация, анализ данных и анализ доходов.
ByteEffects
Используя пользовательские компоненты и среду разработки Arco mobile, BytedEffects разработала мобильное приложение, которое демонстрирует возможности создания интеллектуальных изображений, чтобы предоставить клиентам иммерсивные предварительные просмотры функций и пробные версии.
Вулкан Перевод
Используя собственные иконки и ресурсы бренда Arco, компания Volcano Translation за короткий срок выполнила дизайн целевой страницы официального сайта, а разнообразный визуальный контент помогает сосредоточить внимание пользователей и отвлечь внимание от многоязычных переводческих услуг, предоставляемых платформой.
Звездная ночь
Благодаря сильной способности компонентов Arco к взаимодействию, он помогает платформе Star Night Intelligent Station Construction Platform достигать более гибких и интеллектуальных возможностей строительства станций и повышать эффективность в различных сценариях, таких как строительство мероприятий, строительство в середине и за кулисами, а также вертикальное строительство.
перспективы на будущее
ArcoDesign также изучил другие аспекты ByteDance, такие как визуальная платформа для создания веб-сайтов, инструмент D2C для рисования в коде, код C2D для инструмента для рисования дизайна, библиотека брендов и т. Д. Вышеупомянутые инструменты платформы встретятся с вами в будущем, я надеюсь, что вы уделите больше внимания~
обратная связь и совместное строительство
ArcoDesign теперь официально открыт, и вы можете использовать его и испытать на себе. Arco придает большое значение мнению каждого разработчика и пользователя и надеется, что каждый будет давать отзывы и активно строить вместе.
Официальный сайт:arco.design
Библиотека компонентов Github React:GitHub.com/ARCO-дизайн…
Библиотека компонентов Github Vue:GitHub.com/ARCO-дизайн…