# Дизайн-система ServiceNow Horizon ## Предварительный просмотр интерфейса дизайн-системы ServiceNow Horizon Сохраняйте черновики при переходе между записями, отмечайте запросы как проверенные и восстанавливайте состояние после фильтрации или повторного открытия. ## Справочник по дизайн-системе ServiceNow Horizon Опубликованные рекомендации Horizon Workspace по интервалам, радиусам скругления и типографике. Исходные цвета приложения намеренно не включены в эту официальную справочную таблицу. ### Опубликованные интервалы Workspace | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $now-global-space--xxs | 2px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--xs | 4px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--sm | 8px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--md | 12px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--lg | 16px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--xl | 24px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--xxl | 32px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | | $now-global-space--3xl | 40px | Точные опубликованные названия Sass-значений; это не придуманные пользовательские свойства CSS. | ### Опубликованные радиусы скругления | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | now-global-border-radius--sm | 2px | Опубликованные рекомендации по дизайну. Малые значения подходят для компактных меток, средние — для вложенных элементов управления, большие — для контейнеров. | | now-global-border-radius--md | 6px | Опубликованные рекомендации по дизайну. Малые значения подходят для компактных меток, средние — для вложенных элементов управления, большие — для контейнеров. | | now-global-border-radius--lg | 8px | Опубликованные рекомендации по дизайну. Малые значения подходят для компактных меток, средние — для вложенных элементов управления, большие — для контейнеров. | ### Опубликованные роли типографики | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | Heading family | Cabin | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | Body family | Lato | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | header-hero | 32px | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | header-primary | 24px | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | header-secondary | 20px | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | header-tertiary | 16px | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | title-primary | 20px | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | | title-secondary | 16px | Документированные роли типографики Workspace. В исследовании локально подключаются общедоступные файлы шрифтов Cabin и Lato. | ## Полное руководство по дизайн-системе ServiceNow Horizon Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Область применения и реализации Workspace дизайн-системы ServiceNow Horizon ### Начните с фреймворка приложения > Horizon поддерживает несколько фреймворков приложений ServiceNow. Эта страница посвящена Workspace: очередь и выбранная запись отображаются рядом, чтобы проверяющий мог просматривать локальные задачи, не теряя контекста. Service Portal, Native Mobile и Core UI здесь не представлены как взаимозаменяемые оболочки. Интерактивное исследование — это оригинальное приложение HTML, а не встроенный экземпляр ServiceNow. ### Отделяйте подтверждённые основы от оригинальных решений В справочнике приведены точные опубликованные названия интервалов, значения радиусов и роли типографики. Зелёный цвет действий, нейтральные поверхности и синий цвет фокуса в исследовании — оригинальные значения OpenDesign с префиксом приложения. Они не выдаются за официальный экспорт токенов Horizon. Для запуска полного примера не требуется установка вымышленного пакета ServiceNow или платформа API. ## Интервалы, радиусы и типографика Workspace дизайн-системы ServiceNow Horizon ### Используйте фактическую шкалу интервалов Документированная шкала состоит из значений 2, 4, 8, 12, 16, 24, 32 и 40px. В исследовании она задаёт расстояние между очередью и записью, внутренние отступы записи и меньшие интервалы между метаданными. Эти значения отвечают за разные связи группировки, даже если один и тот же шаг используется несколько раз. Единообразные отступы на всём экране разрушили бы эту иерархию. ### Разделяйте роли заголовков и основного текста Для заголовков используется Cabin, а для основного текста — Lato, как и предусмотрено опубликованными ролями шрифтовых семейств. В исследовании заголовок страницы имеет размер 32px на широких экранах, а заголовок записи — 24px. В справочнике указаны радиусы 2, 6 и 8px, а не предполагаемая стандартная последовательность 4/8/12. Скруглённые метки статуса не передают его только формой или цветом: в них также указаны слова «Открыт» или «Проверен». ## Очередь, выбранная запись и фильтрация в дизайн-системе ServiceNow Horizon ### Поддерживайте одну выбранную запись Для каждого действия в очереди указаны запрос по практике, владелец и статус. При выборе действия рядом отображаются подробности, а фокус перемещается на новый заголовок. Для выбранного действия задаётся aria-current и видимая рамка. Это оригинальный шаблон списка с подробностями, а не нативный компонент Horizon API; вся логика его состояний доступна для проверки. ### Восстанавливайте состояние, если фильтр скрывает выбранную запись Фильтр по статусу сокращает список отображаемых записей. Если выбранный запрос больше не соответствует фильтру, приложение выбирает первый доступный подходящий запрос. Если таких записей нет, показывается сообщение о пустом списке и действие «Показать все запросы». Для расчёта количества в знаменателе используется полная коллекция из трёх записей. Фильтрация не удаляет записи и не меняет их статус без уведомления. - Оставляйте выбранную запись в текущем отфильтрованном списке. - Показывайте понятное пустое состояние, если список не содержит записей. - Восстанавливайте список с помощью действия «Показать все запросы», не удаляя данные. ## Черновики заметок и проверка запросов в дизайн-системе ServiceNow Horizon ### Связывайте черновики с соответствующими записями При вводе текста проверяющим текстовое поле обновляет черновик в соответствующей записи. Черновик сохраняется при переходе к другому запросу и возвращении. Пустая заметка или заметка только из пробелов не позволяет отметить запрос как проверенный: появляется встроенное сообщение об ошибке, устанавливается aria-invalid, а фокус возвращается в текстовое поле. В модели данных сохранённая заметка и текущий черновик представлены явно. ### Обеспечьте наблюдаемость локального изменения состояния После успешной проверки сохраняется заметка без пробелов в начале и конце, а статус записи меняется на «Проверен». Очередь пересчитывается с учётом текущего фильтра, а сообщение о статусе указывает затронутую запись. В сообщении явно сказано, что запись не отправлялась в ServiceNow. Это не позволяет принять визуальное подтверждение за действие на платформе, которого пример не выполнял. ## Повторное открытие и доступная обратная связь в дизайн-системе ServiceNow Horizon ### Сохраняйте полезные данные при повторном открытии Действие «Повторно открыть запрос» возвращает проверенную запись в статус «Открыт», сохраняя её заметку. При фильтре, показывающем только проверенные записи, список может опустеть; действие восстановления вернёт полную очередь. Такой сценарий позволяет проверить взаимосвязь состояния записи, фильтрации и выбранных подробностей — это информативнее, чем тестирование каждой кнопки по отдельности. ### Сочетайте текст, фокус и сообщения о статусе Цвет статуса сопровождается текстовой меткой. При проверке фокус перемещается к полю, требующему внимания; при переходе между записями — к заголовку; локальные обновления объявляются через область статуса. Исследование не отменяет необходимости тестирования Workspace с ассистивными технологиями в производственной среде. Оно предоставляет полноценный локальный сценарий для ознакомления и начала таких проверок. ## Полный локальный исходный код и проверки дизайн-системы ServiceNow Horizon ### Установите общедоступные зависимости шрифтов Предоставленная точка входа подключает общедоступные пакеты шрифтов Cabin и Lato, а также оригинальную таблицу стилей композиции. Оболочка HTML предоставляет корневой элемент. В этом примере нет среды выполнения ServiceNow, учётных данных или конечной точки. Фактическую интеграцию с платформой следует начинать с ресурсов Horizon для Workspace и разработчиков, а не считать локальный массив записей контрактом API ServiceNow. 1. Установите общедоступные зависимости шрифтов в обычном приложении. 2. Сохраните полный код точки входа, таблицу стилей и корневую оболочку HTML. 3. Перед сохранением проверки проверьте, сохраняются ли черновики. 4. Проверьте фильтрацию по статусу вместе с повторным открытием и восстановлением пустого состояния. ### Проверьте связанный сценарий целиком Отправьте пустую заметку, введите черновик, откройте другой запрос и вернитесь, чтобы убедиться, что заметка сохранилась. Отметьте запись как проверенную, отфильтруйте список по статусу «Проверен» и повторно откройте её. Проверьте восстановление пустого состояния и сохранность заметки. На узких экранах очередь располагается над подробностями, при этом ни одно действие не исчезает. Одновременно с этими изменениями состояния проверяются загрузка шрифтов, ошибки JavaScript и горизонтальная прокрутка. ## Примеры компонентов дизайн-системы ServiceNow Horizon ### main.js — полная логика очереди и проверки Все записи, черновики, фильтры, проверки и восстановление состояния. ``` import '@fontsource/cabin/latin-600.css'; import '@fontsource/lato/latin-400.css'; import '@fontsource/lato/latin-700.css'; import './horizon.css'; const records=[{id:'REQ-104',title:'Review the workshop outline',owner:'Design team',priority:'Normal',detail:'Compare the proposed agenda with the decision the team needs to make. Capture one question that should be resolved before the workshop.'},{id:'REQ-105',title:'Check the shared resource list',owner:'Content team',priority:'High',detail:'Review the resource titles for clear action language and confirm that each summary explains when the resource is useful.'},{id:'REQ-106',title:'Prepare the research readout',owner:'Research team',priority:'Normal',detail:'Group the observations by theme. Keep direct observations separate from the team’s interpretation and include the questions still open.'}].map(x=>({...x,status:'Open',note:''}));let selected=records[0].id; document.querySelector('#root').innerHTML=`

OpenDesign · Workflow study

Team review workspace

Review three original practice requests. Update a local record while keeping the queue and details in context.

`; function renderQueue(){let filter=document.querySelector('#filter').value,visible=records.filter(x=>filter==='All'||x.status===filter);if(!visible.some(x=>x.id===selected))selected=visible[0]?.id;const queue=document.querySelector('#queue');queue.replaceChildren(...visible.map(r=>{let b=document.createElement('button');b.className='queue-item';b.dataset.id=r.id;b.setAttribute('aria-current',String(r.id===selected));b.innerHTML=`${r.id}${r.title}${r.owner}${r.status}`;b.onclick=()=>{selected=r.id;renderQueue();renderDetail();document.querySelector('#record-title')?.focus()};return b}));document.querySelector('#queue-count').textContent=`${visible.length} of ${records.length} requests`;document.querySelector('#empty').hidden=visible.length>0;document.querySelector('#clear').hidden=visible.length>0;} function renderDetail(){const r=records.find(x=>x.id===selected),panel=document.querySelector('#detail');if(!r){panel.innerHTML='

Choose another status

All local requests are still available through the status filter.

';return}panel.innerHTML=`

${r.id} · ${r.owner}

${r.title}

${r.detail}

Priority
${r.priority}
Status
${r.status}

Write one useful observation. This note remains in the page.

`;const note=panel.querySelector('#note');note.value=r.draft??r.note;note.oninput=()=>{r.draft=note.value;document.querySelector('#error').hidden=true;note.removeAttribute('aria-invalid');document.querySelector('#feedback').textContent=''};panel.querySelector('#review').onsubmit=e=>{e.preventDefault();if(!note.value.trim()){document.querySelector('#error').hidden=false;note.setAttribute('aria-invalid','true');note.focus();return}r.note=note.value.trim();r.draft=r.note;r.status='Reviewed';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reviewed locally. No record was sent to ServiceNow.';document.querySelector('#record-title')?.focus();};panel.querySelector('#reopen').onclick=()=>{r.status='Open';renderQueue();renderDetail();document.querySelector('#feedback').textContent=r.id+' reopened. The saved review note is retained.';document.querySelector('#record-title')?.focus();};} document.querySelector('#filter').onchange=()=>{renderQueue();renderDetail();document.querySelector('#feedback').textContent=''};document.querySelector('#clear').onclick=()=>{document.querySelector('#filter').value='All';renderQueue();renderDetail();document.querySelector('#filter').focus()};renderQueue();renderDetail(); ``` Справочник по коду - Всё поведение реализовано в оригинальном коде приложения, а не в официальном компоненте Workspace API. ### horizon.css — оригинальная композиция Документированные рекомендации по типографике, интервалам и радиусам, а также оригинальные цвета с префиксом приложения. ``` :root{--app-ink:#21342c;--app-action:#285c47;--app-surface:#f2f5f3;--app-border:#c9d3cd;--app-error:#a32424;--app-radius-small:2px;--app-radius-medium:6px;--app-radius-large:8px}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Lato,Arial,sans-serif;color:var(--app-ink);background:var(--app-surface)}main{max-width:1160px;margin:auto;padding:32px}h1,h2,h3{font-family:Cabin,Arial,sans-serif;font-weight:600;line-height:1.25}h1{font-size:32px;margin:8px 0 16px}h2{font-size:24px;margin:8px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}header>p:last-child{max-width:68ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:24px 0}.toolbar label{display:flex;gap:12px;align-items:center}select,textarea,button{font:inherit}select{padding:8px;border:1px solid var(--app-border);border-radius:6px;background:white;color:var(--app-ink)}.workspace{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2fr);gap:24px}nav{align-self:start}.queue-item{display:grid;gap:8px;width:100%;text-align:left;margin-bottom:12px;background:white;border:1px solid var(--app-border);border-radius:8px;padding:16px;color:var(--app-ink);cursor:pointer}.queue-item[aria-current=true]{border:2px solid var(--app-action);padding:15px;background:#e8f0ea}.queue-item strong{font-size:16px}.record-id,.queue-item>span{font-size:14px}.status{justify-self:start;border-radius:2px;padding:2px 8px;background:#e8eeeb}.status.reviewed{background:#d0ead9}.workspace section{background:white;padding:24px;border:1px solid var(--app-border);border-radius:8px;min-width:0}dl{display:flex;gap:40px;margin:24px 0}dt{font-size:14px;color:#58685f}dd{margin:4px 0;font-weight:700}form>label{font-weight:700}.hint{font-size:14px;margin:8px 0}textarea{width:100%;padding:12px;border:1px solid #6b7f72;border-radius:6px;resize:vertical;color:var(--app-ink)}button{border:1px solid #6b7f72;border-radius:6px;background:white;padding:8px 16px;color:var(--app-ink);cursor:pointer}.primary{background:var(--app-action);color:white;border-color:var(--app-action)}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.error{color:var(--app-error);font-weight:700}.hint,.error{max-width:60ch}#feedback:empty{display:none}#feedback{background:#d0ead9;padding:16px;border-radius:6px}footer{font-size:14px;margin-top:32px;padding-top:24px;border-top:1px solid var(--app-border)}:focus-visible{outline:3px solid #477fd0;outline-offset:3px}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.workspace{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.workspace section{padding:16px}h1{font-size:24px}.eyebrow{overflow-wrap:anywhere}} ``` Справочник по коду - Не следует описывать оригинальные цветовые значения как официальные токены Horizon. ### index.html — корневая оболочка Полная точка входа автономного приложения. ``` Team review study
``` Справочник по коду - Замените этим файлом корневой index.html в Vite. ## Настройка агента дизайн-системы ServiceNow Horizon ### Отправная точка для реализации Это запускает только исходное исследование. Для нативной реализации в ServiceNow требуется соответствующая среда разработки платформы. ``` npm create vite@latest horizon-study -- --template vanilla cd horizon-study npm install npm install @fontsource/cabin@5.3.0 @fontsource/lato@5.3.0 # Save index.html at root; main.js and horizon.css in src. npm run dev ``` ### Запрос для вашего проекта ``` Создайте полноценное исходное исследование проверки запросов, используя проверенные значения типографики, интервалов и скруглений Horizon Workspace. Для исходных цветов используйте префикс app. Сохраняйте черновики для каждой записи, проверяйте данные перед проверкой, пересчитывайте отфильтрованный выбор после изменения статуса, сохраняйте заметки при повторном открытии и предусмотрите восстановление после пустого результата. Не заявляйте о подключении к работающему экземпляру ServiceNow. ``` ## Источники и область применения дизайн-системы ServiceNow Horizon Самостоятельный учебный пример OpenDesign HTML/CSS, созданный с опорой на основы Horizon Workspace. В нём используются документированные значения типографики Cabin/Lato и интервалов/скруглений, а также оригинальные цвета и логика рабочего процесса. Это не экземпляр ServiceNow и не среда выполнения Workspace. - Обзор Workspace Контекст фреймворка и связанные ресурсы. - Интервалы Точные названия модульной шкалы и справочника Sass. - Радиус углов Опубликованные значения 2/6/8px. - Типографика Cabin/Lato и роли размеров. - Рекомендации по цвету Назначение и обозначения статусов, не зависящие от цвета. ## Связанные ресурсы дизайн-системы ServiceNow Horizon ### ServiceTitan Anvil Раскройте возможности Anvil2 на конкретном примере: модель токенов из трёх уровней, проверенные значения ролей для светлой и тёмной тем и полный сценарий назначения услуги с синхронизированными состояниями специалиста, времени и проверки. ### Siemens iX Изучите промышленные события с помощью явно заданной классификации уровней серьёзности, цветовых ролей с учётом темы и API Event List от iX. В этом руководстве создаётся локальный журнал оборудования, в котором проверенная запись не выдаётся за устранённую аварию оборудования. ### Sprout Social Seeds Изучите фактические публичные токены цвета, интервалов, продуктовой типографики и границ в Seeds на примере полноценной редакторской очереди: с выбором нескольких элементов, пустыми состояниями после фильтрации и отменой действия. - [Справочник по реализации](https://horizon.servicenow.com/workspace/overview) - [Источник](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Источник](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Источник](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Справочник по коду](https://horizon.servicenow.com/workspace/overview) - [Обзор Workspace Контекст фреймворка и связанные ресурсы.](https://horizon.servicenow.com/workspace/overview) - [Интервалы Точные названия модульной шкалы и справочника Sass.](https://horizon.servicenow.com/workspace/foundations/spacing/spacing-overview) - [Радиус углов Опубликованные значения 2/6/8px.](https://horizon.servicenow.com/workspace/foundations/corner-radius) - [Типографика Cabin/Lato и роли размеров.](https://horizon.servicenow.com/workspace/foundations/typography/typography-overview) - [Рекомендации по цвету Назначение и обозначения статусов, не зависящие от цвета.](https://horizon.servicenow.com/workspace/foundations/color/color-overview)