предисловие
«Платформа интеллектуального дизайна Linglong», созданная отделом дизайна пользовательского интерфейса Jingdong Retail Group, запустила инструмент интеллектуального дизайна страниц для внутренних операций и продавцов в мае 2019 года. возможности страницы, такие как ПК, H5 и апплет, охватывающие страницы каналов, страницы событий, страницы магазина, страницы продвижения с раздвижным экраном, ответы на вопросы, интерактивные игры, апплеты и другие сценарии приложений, предоставление онлайн-услуг для продавцов и операторов Услуги, чтобы пользователи кто не разбирается в дизайне и коде тоже может выйти в интернет одним кликом.
Основываясь на мощных многотерминальных возможностях «Таро», он может реализовывать одноразовую конструкцию и генерировать межтерминальные приложения, такие как H5, апплет, RN и т. д., что значительно решает проблему повторной разработки и повышает эффективность разработки.
Расскажите об истории дизайна смарт-страниц Linglong
В поисках прорывов в бизнесе
До 2017 года большое количество страниц канала для ПК на JD.com разрабатывалось вручную, и цикл разработки был очень долгим.В то время у компании также была система CMS, и страницы, разработанные для внешнего интерфейса, нужно было выпускать и запускается через эту систему. Разработка всей страницы зависит от этой системы и должна выполняться онлайн. Кроме того, для предварительного просмотра страницы необходимо ввести некоторые ямы данных. В то время, чтобы повысить эффективность разработки переднего плана, мы перенесли работу по онлайн-разработке и вводу ям данных в локальную область с помощью ряда инструментов собственной разработки. Это полностью изменило метод разработки всей страницы канала, и общая идея разработки используется до сих пор.
Со временем мы разработали множество страниц каналов, а позже обнаружили, что многие страницы очень похожи, только с некоторыми различиями в стиле. Когда мы обнаруживаем, что работа дублируется, пора строить машину, которая заставит нас бежать быстрее.
Создание прототипа платформы
Предшественник интеллектуального дизайна страниц Linglong, можно сказать, что это система сборки страниц. Подошел коллега по работе канала и надеялся быстро разработать страницу, и спросил: «Можете ли вы объединить разные этажи определенных страниц в Интернете? Собери, быстро запусти несколько страниц», очевидно людям, не разбирающимся в технологиях, это кажется очень простым, но для нашей разработки это не так просто. Мы пытаемся узнать код разных страниц, быстро разработать новую страницу и найти множество проблем, таких как конфликты стилей, конфликты скриптов и ряд проблем.
Поэтому мы будем выполнять трансформацию на уровне этажей на существующих страницах.Преобразованные этажи могут работать независимо, а разные коды и стили применяются только к текущему этажу.Таким образом, страницы, объединенные с разных этажей, могут отображаться нормально.
После реконструкции общественных этажей, чтобы пользователи могли свободно комбинировать этажи для сборки страницы, мы создали платформу онлайн-визуализации для отображения всех общественных этажей в виде списка, который поддерживает сборку страниц путем перетаскивания, и поддерживает некоторую обычную конфигурацию атрибутов, такую как общедоступный заголовок, цвет и т. д., в основном может удовлетворить требования некоторых пользователей.
Путь к истинной визуализации
Болевые точки системы сборки страниц
Система сборки страниц, которая в основном решает небольшую часть требований разработчиков и пользователей, все еще далека от реального пути визуализации. Вскоре система сборки выявила некоторые свои проблемы:
- На техническом уровне, поскольку степень детализации пола недостаточно мала, некоторые корректировки макета должны быть адаптированы к коду для его поддержки, которому не хватает определенной степени гибкости. А при использовании устаревшего стека технологий jQuery последующие затраты на обслуживание также очень высоки.
- С точки зрения работы пользователя наша платформа не поддерживает предварительный просмотр эффектов на основе реальных данных, и система просто завершает построение фрейма страницы.
- С точки зрения ввода данных по-прежнему сложно избавиться от упомянутой выше системы CMS, пользователям необходимо возвращаться в систему CMS для заполнения реальных материалов, поэтому происходит переключение между различными системами.
Идеи дизайна визуального редактора
Чтобы решить некоторые проблемы с системой сборки, мы начали переделывать платформу построения страниц, которая действительно основана на компонентизации.
Интеллектуальный визуальный редактор страниц Linglong, включающий несколько основных основных элементов: библиотеку компонентов, конструктор, редактирование атрибутов.
-
Библиотека компонентов разделена на основные компоненты и бизнес-компоненты.Поскольку страница ПК относительно сложна и имеет концепцию макета, нам необходимо разработать систему макета, извлечь уроки из отличных идей дизайна сетки в отрасли и объединить реальную ситуацию. нашей страницы Каркас и базовый дизайн компонентов страницы. Бизнес-компонент исчерпывает большое количество онлайн-страниц, преобразует часто используемые компоненты в компоненты и поддерживает гибкую настройку атрибутов.
-
Дизайнер отвечает за перетаскивание компонентов, загрузку компонентов, логику рендеринга, операции с деревом компонентов, внедрение динамических свойств и другие функции. С помощью компонентов более высокого порядка это может помочь нам легко добавить некоторые специфические функции к компонентам.
-
Редактирование атрибутов, каждый атрибут компонента соответствует типу, поэтому способ редактирования его атрибутивных данных также отличается. Типы, которые мы разрабатываем, охватывают практически все компоненты. Кроме того, был разработан набор условных правил, позволяющих отображать связи между атрибутами.
На самом деле, чтобы завершить визуальный редактор с высокой доступностью, необходимо понять множество моментов и деталей, поэтому я не буду подробно их здесь представлять.
После почти года дождей разработка страниц каналов была преобразована из ручной разработки в визуализацию.В настоящее время большинство страниц каналов на JD.com находятся в сети посредством создания самообслуживания.
Редактор полностью обновлен
В начале 2019 года, опираясь на прошлые достижения компании в области визуального оформления, мы изменили направление нашего продукта, чтобы сосредоточиться на потребностях продавцов в дизайне страниц в онлайн-бизнес-процессах, поэтому визуальный редактор страниц был обновлен до мобильный терминал. Весь визуальный стиль и метод взаимодействия были полностью обновлены, а сложный макет был удален, что сделало его более удобным для пользователей.
Обновление библиотеки компонентов
Мы обновили библиотеку компонентов до совершенно новой платформы Quark, которая действует как независимая платформа ресурсов дизайна. Предоставление компонентов, библиотек иконок и других материалов для редактора.Существует более 50 официальных компонентов и более 200 форм макета, которые могут удовлетворить потребности большинства страниц. В то же время он также поддерживает другие команды разработчиков в компании для разработки их собственных компонентов, подключения к нашей платформе визуализации и выхода в Интернет через нашу онлайн-службу страниц.
Панель свойств обновления
Опыт настройки влияет на эффективность пользовательского построения:Когда пользователи используют редактор ежедневно, им необходимо изменить элементы конфигурации компонентов, чтобы они соответствовали персонализированным потребностям страницы. Мы обнаружили, что структура панели элементов конфигурации компонентов сложна, стоимость понимания элементов конфигурации компонентов высока, а режим работы не соответствует привычкам пользователя и другим проблемам с опытом, которые серьезно повлияли на опыт пользователя в конфигурации и эффективность построения.
Панель элементов конфигурации устаревшего компонента:Классификация разделена на «функции», «стили» и «данные», что дорого обходится пользователям. Часто бывает, что один и тот же элемент конфигурации появляется в нескольких разделах, что значительно увеличивает эксплуатационные расходы пользователя.
Новая версия панели настройки компонентов:Спецификация структуры панели была переопределена и разделена на пять областей: «имя компонента», «компоновка компонента», «ввод данных», «конфигурация стиля» и «конфигурация пола», что не только способствует пониманию пользователем, но также сокращает сам продукт, четкое разделение компоновки и определение функций также повышают эффективность разборки элементов конфигурации новых компонентов.
До пересмотра и после пересмотра Общая структура панели элементов конфигурации разделена, а элементы конфигурации разбиты на компоненты.
редактор элементов
Когда наши официальные компоненты не могли удовлетворить персонализированные потребности пользователей, мы задумались о том, чтобы предоставить пользователям возможность настраивать компоненты, поэтому появился редактор элементов. Он предоставляет возможность настраивать монтажную область, пользователи могут свободно перетаскивать некоторые основные элементы, такие как текст, изображения, графика и т. д., добавлять некоторые пользовательские события и анимацию, а также можно легко создать яркий пользовательский компонент.
Осадки объекта проектирования
Дизайнеры накопили тысячи шаблонов для использования пользователями. Все эти шаблоны связаны с интеллектуальными возможностями дизайна изображений «Linglong». Пользователи могут напрямую изменять содержимое графических материалов в Интернете и легко создавать высококачественные страницы. Кроме того, наш шаблон также поддерживает интеллектуальное сопоставление цветов, и пользователи могут оформить всю страницу в соответствии с цветовой схемой.
Интеллектуальное картографирование Linglong
Чтобы решить болевые точки пользователей при создании изображений, Linglong Page Editor и Linglong Picture Editor глубоко интегрированы, чтобы предоставить пользователям возможность редактировать изображения в Интернете.. Пользователи могут выполнять редактирование изображений в Интернете без использования какого-либо программного обеспечения для создания изображений.
Адаптация к нескольким сценариям приложений
Сцена активности
Как наша страница событий идеально подходит для мобильных и настольных компьютеров?
Чтобы адаптировать мобильную страницу к рабочему столу, обычный метод заключается в том, чтобы добиться этого с помощью адаптивных средств.Этот метод относительно прост и груб, но эффект на самом деле не очень хороший.Например, первая карта фокуса мобильного терминала, если она пропорционально увеличен со стороны рабочего стола, он будет занимать первый экран, и взаимодействие с пользователем будет крайне плохим.
Итак, мы используем ряд правил преобразования для достижения:
Например
Контент на стороне ПК фактически соответствует контенту на мобильной стороне. И ряд общих правил преобразования сделан в соответствии с характеристиками терминала. Например, в продукте seckill обратный отсчет и продукты расположены вверх и вниз на мобильном терминале, а на стороне ПК — слева и справа, на мобильном терминале 2 товарные единицы подряд, а на ПК их 4 подряд.
Каковы правила конвертации?
Протяжение:Растяните без изменения макета и без добавления или удаления контента, такого как модуль группы объявлений:
текст:Когда текстовое содержимое более важно, мы будем растягивать его без увеличения или уменьшения.Когда положение в пространстве ограничено и текстовое содержимое не является очень важной информацией, мы выберем метод усечения текста для растяжения.
картина:Вообще говоря, карта деталей должна быть пропорционально растянута, чтобы обеспечить максимальную согласованность эффекта на обоих концах.
Поскольку соотношение сторон мобильного терминала намного меньше, чем у терминала ПК, чтобы гарантировать, что эффект на большом экране не будет выглядеть «повелителем», будет выбор для обрезки.
Модуль:Мобильный терминал обычно делит пол на модуль, и соответствующий терминалу ПК модуль растягивается по горизонтали.
Изменения макета:Элементы должны быть переставлены при изменении макета
Например, в модуле баннера изображения заголовка, если принята стратегия пропорционального растяжения, изображение заголовка будет особенно высоким, что повлияет на эффективность страницы первого экрана на стороне ПК. влияют на эффект отображения изображения.Изменяется форма перестановки элементов.
Якорный навигационный модуль — это горизонтальная навигация на мобильной стороне. Когда страница сдвинется вверх, она будет прикреплена к верхней части страницы, в то время как на стороне ПК мы, как правило, будем прикреплены к боковой части страницы в виде фиксированная позиция.
Изменения в содержании:Модуль отображения повторения единиц обычно обрабатывается в форме добавления и удаления контента.Например, товарный модуль будет отображать больше ячеек, когда горизонтальное пространство на стороне ПК относительно велико.
В сочетании с этими правилами преобразования пользователи могут быстро создавать страницы действий с двумя концами одновременно, если они создают страницу один раз и размещают их на мобильных платформах и платформах ПК, экономя эксплуатационные расходы.
Сценарий интерактивного маркетинга
В прошлом продавцам было сложно создать интерактивную страницу. Есть проблемы, такие как высокая стоимость и длительный цикл разработки. Чтобы решить эту серию болевых точек в сценарии интерактивного маркетинга, интерактивный игровой процесс разбирается на компоненты, а затем настраивается и запускается через платформу визуализации страниц. Если раньше интерактивный геймплей от планирования до запуска занимал около месяца, то теперь это занимает всего десять минут с помощью метода визуального построения, что значительно повышает эффективность.
апплет сцена
Мы первая платформа визуализации небольших программ в JD Полный набор кода апплета электронной коммерции. Поддержите выпуск WeChat, Baidu и других платформ мини-программ, а также завершите запуск нескольких мини-программ для продавцов, таких как «Jiuyang» и «Dyson».
Магазин сцены
В сценарии магазина мы реализовали три важных сценария применения:
- Домашняя страница магазина предоставляет продавцам возможность создать домашнюю страницу магазина и реализовать связь между результатами дизайна и материалами «Jingdong Zhipu», чтобы удовлетворить требования к оформлению домашней страницы магазина продавца. .
- Продвижение в магазине, сценарий, основанный на расширении редактора элементов, предоставляет возможность создавать действия на странице со скользящим экраном и предоставляет возможность высоко персонализированных рекламных страниц.
- Мини-программы для покупок в магазине предоставляют продавцам инструменты трафика частного домена в виде централизованных мини-программ и предоставляют множество маркетинговых инструментов, таких как лотереи, внимание к вежливости, панорамные залы и другие способы игры.
Стандартные блоки редактора
Зачем редактор строительных блоков?
- С увеличением количества сценариев логика кода редактора также становится очень сложной.Различные сценарии имеют определенную функциональную логику.Каждый сценарий делится на конец построения шаблона и конец использования пользователем, которые выражаются в редакторе.Разное,и редактор тесно связан с бизнес-логикой платформы.
- У многих платформ внутри компании есть требования к визуальному построению, если переделывать визуальный редактор, то это займет не менее полугода. Если мы напрямую повторно используем наши строительные блоки редактора, это значительно повысит эффективность. Это также уменьшает дублирование автомобилей внутри компании.
- Команда R&D нашего редактора ограничена в рабочей силе, не может вовремя удовлетворить потребности различных сценариев и имеет плохую масштабируемость.
- Чтобы изменить небольшую функцию, нужно освободить весь редактор, если есть проблема, это повлияет на все сцены.
- В редакторе все больше функций, а также увеличился объем, со временем весь редактор сильно раздулся.
Для решения этих проблем мы провели комплексную модернизацию архитектуры редактора.
Архитектура подключаемых модулей на основе конфигурации
Разделим редактор на: основной дизайнер + область слотов, которые представлены двумя цветами:
- Главный дизайнер: отвечает за логику ядра редактора, разбор файла конфигурации, загрузчик плагинов, загрузку компонентов, управление глобальным состоянием и т.д.;
- Область слотов: Редактор зарезервирует несколько основных позиций слотов для загрузки дополнительных функций;
Давайте в общих чертах посмотрим на рабочий процесс всего редактора:
- Редактор читает файл конфигурации, который представляет собой описание всего редактора, включая конфигурацию всех плагинов.
- В редакторе предусмотрено несколько основных мест в виде слотов для чтения плагинов в файлах конфигурации.
- Функции редактора разделены на подключаемые файлы, которые загружаются асинхронно.Преимущество этого в том, что он может загружаться по запросу, логически развязан и способствует повышению масштабируемости системы.
- Каждая загрузка подключаемого модуля может быть динамически внедрена в приложение-редактор, и он может совместно использовать состояние редактора, завершать связь между подключаемыми модулями и вызывать данные и методы редактора.
- Редактор на самом деле делает только одну вещь, то есть генерацию описаний страниц, а другая бизнес-логика выполняется на стороне бизнеса.Преимущество этого заключается в том, что редактор может быть полностью отделен и работать независимо. Вам нужно только сделать некоторые интерфейсы связи с редакторами и плагинами, и вы можете использовать это быстро.
- Каждый сценарий использования должен обращать внимание только на собственную конфигурацию приложения-редактора, не влияя друг на друга, включая персонализированное обновление плагинов.
Внешние активирующие приложения
В настоящее время наше решение для строительных блоков редактора было применено к другим платформам в рамках JD, таким как платформа JD Digital Jianghu Platform, платформа JD ME Industry Edition и т. д., в качестве механизма дизайна страницы, чтобы помочь быстрой коммерциализации каждой платформы.
Эпилог
До сих пор есть много превосходных визуализированных продуктов, почему никогда не было новой платформы, но нет окончательного решения, то есть потому, что нет реального «серебра», только продукты, которые адаптируются к развитию бизнеса, это лучше всего для этого Отказ В будущем мы будем усердно работать для интеллектуального дизайна, неизбежно вытащили новые искры, поэтому оставайтесь настроенными!