Mand Mobile — библиотека компонентов Vuejs на основе финансовых сценариев

Mand MobileЭто библиотека мобильных компонентов, разработанная фронтенд-командой стратегической бизнес-группы Didi Chuxing на основе Vuejs 2.0. Он следует единой спецификации визуального дизайна и состоит из четырех категорий компонентов, включая основу, форму, обратную связь о действии и бизнес. Mand Mobile стремится улучшить взаимодействие с пользователями продуктов, связанных с финансами, улучшить дизайн и эффективность исследований и разработок, а также упростить сложные сценарии.

Предыстория проекта

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

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

Опыт сканирования кода

Особенности проекта

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

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

Mand MobileВизуальная спецификация разработана и поддерживается дизайнерами Didi Strategic Business Group, что обеспечивает высокую степень визуальной согласованности внутри и между проектами приложения. Простой и элегантный стиль дизайна не только обеспечивает общую красоту и стиль проекта, но и позволяет адаптировать его к более широкому спектру сценариев применения.

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

Строго контролируемый размер пакета
Обеспечивая полные и мощные функции,Mand MobileТакже хорошо работает в объеме Bundle. Mand Mobile может экспортировать пакеты в форматах es и umd, из которых размер пакета es составляет всего 139 КБ (gzip 34 КБ), а окончательный размер формата umd составляет всего 135 КБ (gzip 33 КБ), что предоставляет пользователям мощную помощь в управлении размер проекта. Кроме того, Mand Mobile также поддерживает встряхивание дерева и загрузку по запросу, что может еще больше уменьшить размер проекта для проектов, в которых необходимо использовать только некоторые компоненты. Чтобы узнать о конкретном методе настройки, обратитесь к справочному разделу в разделе «Быстрый старт».

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

Отзыв о проекте

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

Мы искренне надеемсяMand MobileНаличие может помочь вам в вашей работе. В то же время мы также рассчитываем на вашу поддержку, отзывы и участие и будем вместе работать над тем, чтобы упростить развитие финансовой сцены. Любые проблемы, с которыми вы столкнетесь, вы всегда можетеGitHubОтправить.