Использование Режима дизайнера — Темы и дизайн

В то время, как стандартный редактор шаблонов полезен для небольшого редактирования, для более больших и комплексных изменений, редактирование с использованием привычных программных средств (IDE) является более предпочтительным. Invision Community позволяет это сделать с помощью Режима дизайнера.

Что такое Режим дизайнера?

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

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

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

Включение Режима дизайнера

Первый шаг активации — создать директорию под названием «themes» в корневой директории вашего сообщества (там же, где расположен ваш файл conf_global.php). Установите CHMOD для директории 777.

Далее, перейдите на страницу вашего админцентра Кастомизация > Внешний вид > Темы. В верхней части страницы нажмите на кнопку Режим дизайнера. Переключите настройку после прочтения информационного сообщения и сохраните изменения. IPS4 начнёт запись файлов темы на диск.

После завершения, вы увидите структуру директорий, подобную этой в директории /themes на вашем сервере:

Список файлов тем на диске

Все установленные темы экспортируются при включённом Режиме дизайнера; родительская директория в этой структуре носит название ID темы. Вы можете увидеть ID темы после включения режима дизайна на странице списка тем:

Просмотр номеров ID тем

Каждая директория темы содержит четыре ключевые части:

• /css
  CSS код для темы, сгруппированные сначала по приложению, затем по расположению (front/admin/global).
• /html
  Используемые темой HTML шаблоны с расширением *.phtml, сгруппированные сперва по приложению, затем по расположению (front/admin/global), и по области применения.
• lang.php
  Файл языка, в который вы можете добавить собственные языковые строки, необходимые для вашей темы. Строки должны быть в формате:

• 'ключ_фразы_без_пробелов' => "Фраза"

• /resources
  Ресурсы для темы (в основном изображения), сгруппированные сначала по приложению, затем по расположению (front/admin/global), затем по типу. 

Редактирование шаблонов

Когда вы редактируете *.phtml файл шаблона, экспортированные Режимом дизайнера, вы увидите специальный тег в первой строке каждого файла, похожий на этот:

<ips:template parameters="$title,$html,$location=array()" />

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

Завершение работы в Режиме дизайнера

Когда вы внесли все изменения, вы можете отключить Режим дизайнера для импорта файлов обратно на сайт (обратите внимание, что вы можете включить Режим дизайнера позже, если захотите продолжить).

Чтобы это сделать, вернитесь назад к странице списка тем в меню Кастомизация > Внешний вид > Темы, и нажмите на красную кнопку «Режим дизайнера включён». Когда вы отключите настройку, вы увидите уточняющее сообщение, запрашивающее ваше подтверждение на синхронизацию изменений.

Убедитесь, что опция «Синхронизация изменений» активирована при сохранении, иначе ваши изменения будут утеряны.

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

системы | Атомарный дизайн простыми словами

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

Что такое дизайн-система?

Дизайн-системы — это новый подход к стабильности цифровых продуктов. Сейчас все организации и компании, которые заботятся о качестве своей работы, знакомы с этим понятием. Поэтому давайте погрузимся в эту тему и поймем, что такое дизайн-система и чем она полезна для создателей (дизайнеров) и потребителей (пользователей).

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

Создание и использование дизайн-систем может быть безумно сложным и запутанным для новичков. Если вы именно такой человек, эта статья для вас. Ниже мы попробуем разобрать, что такое атомарный дизайн, и сформулируем правильные советы по созданию собственной дизайн-системы.

Почему дизайн-системы важны?

По мере того, как развивался дизайн пользовательского интерфейса, возрастала и потребность компаний в упорядоченной методологии. Организация дизайна стала таким же важным этапом, как и сам дизайн. Каждый год создаются миллионы приложений и сайтов с сотнями и тысячами экранов. И дизайн-системы оказываются очень полезными в этом сценарии для создателей и потребителей.

Некоторые из причин, по которым дизайн-системы важны

1. Дизайн-системы помогают авторам и потребителям работать быстрее и эффективнее

Дизайн-система позволяет своим пользователям использовать предварительно созданную библиотеку элементов интерфейса, шаблонов и дизайн-токенов, уменьшая этим самым потребность в дизайне на ходу.

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

2. Дизайн-системы позволяют командам сосредоточиться на UX продукта, так как меньше времени уходит на UI

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

3. Единый язык в больших кросс-функциональных командах

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

4. Дизайн-системы обеспечивают согласованность между продуктом и каналами

Когда команды в организации работают независимо друг от друга, дизайн-система может помочь убедиться, что нет несоответствий во внешнем виде и опыте, который предлагает продукт/бренд.

Что такое атомарный дизайн?

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

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

Основные компоненты атомарного дизайна

Элементы атомарного дизайна

1. Дизайн-токены

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

Дизайн-токены

2. Атомы

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

Атомы

3.

Молекулы

В химии атомы объединяются в молекулы. Точно так же молекулы в дизайн-системах состоят из атомарных элементов пользовательского интерфейса. Например, форма ввода может состоять из нескольких полей ввода, чекбоксов и кнопок, которые являются атомами в дизайн-системе.

Молекулы

4. Организмы

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

Организмы

5. Шаблоны

Теперь, оставив химию в стороне, посмотрим на другие строительные блоки дизайн-системы. Шаблоны — это организации организмов, молекул и атомов на уровне страницы. Они представляют структуру определенного макета страницы.

Шаблоны

6. Страницы

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

Страницы

Вывод:

Атомарный дизайн позволяет следовать иерархии при создании и использовании дизайн-системы. Надеемся, разбор дизайн-системы на атомы помог вам немного лучше понять эту иерархию.

Оригинал.

• Дизайн-системы
• Начинающим

Настройка компонентов в режиме разработки

• Обзор руководства пользователя по разработке
• Основные задачи, инструменты и концепции разработки AEM
  • Первые шаги для авторов
  • Краткое руководство по созданию страниц
  • Авторская концепция
  • Базовое обращение
  • Поиск
  • Настройка среды вашей учетной записи
  • Ваш почтовый ящик
  • Горячие клавиши для консолей
  • Выбор пользовательского интерфейса
• Авторская разработка
  • Среда разработки и инструменты
  • Аннотации при редактировании страницы
  • Создание и организация страниц
  • Редактирование содержимого страницы
  • Использование редактора форматированного текста для создания контента
  • Редактирование свойств страницы
  • Публикация страниц
  • Создание страницы с фрагментами содержимого
  • Фрагменты опыта
  • Экспорт в CSV
  • Компоненты
  • Создание страницы для мобильных устройств
  • Устранение неполадок AEM при разработке
  • Горячие клавиши при редактировании страниц
  • Передовой опыт
• Функции сайта и страницы
  • Использование тегов
  • Создание шаблонов страниц
  • Система стилей
  • Работа с версиями страницы
  • Разница страниц
  • Консоль компонентов
  • Адаптивный макет
  • Анализ контента
  • Создание доступного содержимого (соответствие WCAG 2. 0)
  • Леса
  • Настройка компонентов в режиме разработки
  • Компоненты фундамента
• проекта
  • Проекты
  • Управление проектами
  • Работа с задачами
  • Творческий проект и интеграция PIM
  • Работа с рабочими процессами проекта
• Запуски
  • Запуски
  • Создание запусков
  • Запуск редактирования
  • Продвижение запусков
• Рабочие процессы
  • Работа с рабочими процессами
  • Применение рабочих процессов к страницам
  • Участие в рабочих процессах
  • Работа с рабочими процессами проекта

Производительность

• страниц
  • Анализ контента
  • Анализ производительности страницы
  • Просмотр данных аналитики страницы
• Персонализация
  • Персонализация
  • Предварительный просмотр страниц с использованием данных ContextHub
  • Создание целевого контента с использованием режима таргетинга
  • Работа с целевым контентом на мультисайтах
  • Структура многосайтового управления для целевого контента
  • Управление деятельностью
  • Управление аудиториями
  • Создание и управление предложениями
  • Понимание сегментации
• AEM и кампания Adobe
  • Работа с Adobe Campaign
  • Работа с Adobe Campaign Classic и Adobe Campaign Standard
  • Ориентация на вашу кампанию Adobe
  • Создание форм Adobe Campaign в AEM
  • Компоненты кампании Adobe

Если экземпляр AEM установлен по умолчанию, выбор компонентов сразу становится доступным в обозревателе компонентов.

В дополнение к этим доступны различные другие компоненты. Вы можете использовать режим «Дизайн», чтобы включать/отключать такие компоненты. Когда он включен и находится на вашей странице, вы можете использовать режим «Дизайн» для настройки аспектов дизайна компонента, редактируя параметры атрибута.

ПРИМЕЧАНИЕ

При редактировании этих компонентов необходимо соблюдать осторожность. Настройки дизайна часто являются неотъемлемой частью дизайна всего веб-сайта, поэтому их должен изменять только человек с соответствующими правами и опытом, часто администратор или разработчик. Дополнительную информацию см. в разделе Разработка компонентов.

ПРИМЕЧАНИЕ

Режим разработки доступен только для статических шаблонов. Шаблоны, созданные с помощью редактируемых шаблонов, следует редактировать с помощью редактора шаблонов.

ПРИМЕЧАНИЕ

Режим проектирования доступен только для конфигураций дизайна, сохраненных как содержимое в разделе ( /etc ).

Начиная с AEM 6.4, рекомендуется хранить проекты как данные конфигурации в папке /apps для поддержки сценариев непрерывного развертывания. Дизайны, хранящиеся в /apps , недоступны для редактирования во время выполнения, и режим «Дизайн» не будет доступен для таких шаблонов пользователям без прав администратора.

Это включает добавление или удаление компонентов, разрешенных в системе абзацев для страницы. Система абзацев ( parsys ) — составной компонент, содержащий все остальные компоненты абзаца. Система абзацев позволяет авторам добавлять на страницу компоненты разных типов, так как она содержит все остальные компоненты абзаца. Каждый тип абзаца представлен как компонент.

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

• Изображение продукта (в виде абзаца изображения или текстового изображения)
• Описание товара (текстовым абзацем)
• Таблица с техническими данными (как абзац таблицы)
• Форма, которую заполняют пользователи (в начале формы, в элементе формы и в конце абзаца формы)

ПРИМЕЧАНИЕ

Дополнительные сведения о parsys см. в разделе «Разработка компонентов» и «Рекомендации по использованию шаблонов и компонентов».

ВНИМАНИЕ!

Редактирование дизайна в режиме разработки, как описано в этой статье, является рекомендуемым способом определения дизайна статических шаблонов. . Дополнительные сведения см. в документе разработчика «Шаблоны страниц — статические».

Включение/отключение компонентов

Чтобы включить или отключить компонент:

1. Выберите режим Design .

2. Коснитесь или щелкните компонент. Компонент будет иметь синюю рамку при выборе.

3. Нажмите или коснитесь значка Parent .

   Будет выбрана система абзацев, содержащая текущий компонент.

4. Значок настройки для системы абзацев будет отображаться на панели действий родителя.

   Выберите это, чтобы открыть диалоговое окно.

5. Используйте диалоговое окно для определения компонентов, доступных в браузере компонентов при редактировании текущей страницы.

   Диалог имеет две вкладки:

   • Разрешенные компоненты
   • Настройки

   Разрешенные компоненты

   О разрешенных компонентах вы определяете, какие компоненты доступны для parsys.

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

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

   ПРИМЕЧАНИЕ

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

   Настройки

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

6. Выберите Готово , чтобы сохранить конфигурацию.

1. Выберите режим Design .

2. Коснитесь или щелкните компонент с синей рамкой. В этом примере выбран главный компонент изображения.

3. Используйте значок Настройка , чтобы открыть диалоговое окно.

   В диалоговом окне проектирования можно настроить компонент в соответствии с доступными параметрами проектирования.

   Диалог имеет три вкладки:

   • Основной
   • Характеристики
   • Стили

   Недвижимость

   Вкладка Свойства позволяет настроить важные параметры конструкции компонента. Например, для компонента изображения вы можете определить максимальный и минимальный разрешенный размер изображения.

   Характеристики

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

   Стиль

   Вкладка Стили позволяет определить классы и стили CSS, которые будут использоваться с компонентом.

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

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

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

4. Нажмите или коснитесь значка Готово , чтобы сохранить и закрыть диалоговое окно.

Ресурсы Business.Adobe.com

Многоканальная связь
Встроенные диаграммы
Редактор тем
Управляемое облако
История версий
Управление цифровыми активами

Настройка компонентов в режиме разработки

Если экземпляр AEM установлен в готовом виде, набор компонентов сразу становится доступным в помощнике.

В дополнение к этим доступны различные другие компоненты. Вы можете использовать режим «Дизайн», чтобы включить/отключить такие компоненты. Когда он включен и находится на вашей странице, вы можете использовать режим «Дизайн» для настройки аспектов дизайна компонента, редактируя параметры атрибута.

ПРИМЕЧАНИЕ

При редактировании этих компонентов необходимо соблюдать осторожность. Настройки дизайна часто являются неотъемлемой частью дизайна всего веб-сайта, поэтому их должен изменять только кто-то с соответствующими правами (и опытом), часто администратор или разработчик. Дополнительную информацию см. в разделе Разработка компонентов.

На самом деле это включает добавление или удаление компонентов, разрешенных в системе абзацев для страницы. Система абзацев ( parsys ) является составным компонентом, который содержит все остальные компоненты абзаца. Система абзацев позволяет авторам добавлять на страницу компоненты разных типов, так как она содержит все остальные компоненты абзаца. Каждый тип абзаца представлен как компонент.

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

• Изображение продукта (в виде абзаца изображения или текстового изображения)
• Описание товара (текстовым абзацем)
• Таблица с техническими данными (как абзац таблицы)
• Форма, которую заполняют пользователи (в начале формы, в элементе формы и в конце абзаца формы)

ПРИМЕЧАНИЕ

Дополнительные сведения о 9 см. в разделе «Разработка компонентов» и «Рекомендации по использованию шаблонов и компонентов».0189 парсы .

Включить/отключить компоненты

В режиме разработки помощник свернут, и у вас есть возможность настроить компоненты, доступные для авторинга:

1. Чтобы войти в режим «Дизайн», откройте страницу для редактирования и используйте значок Sidekick:

2. Нажмите Редактировать в системе абзацев ( Дизайн пар. ).

3. Откроется диалоговое окно со списком групп компонентов, отображаемых в Sidekick, вместе с отдельными компонентами, которые они содержат.

   При необходимости выберите, чтобы добавить или удалить компоненты, которые будут доступны в помощнике.

4. Приложение Sidekick сворачивается в режиме конструктора. Нажав на стрелку, вы можете развернуть Sidekick и вернуться в режим редактирования:

В режиме «Дизайн» можно также настроить атрибуты для отдельных компонентов.