Руководство по стилю пользовательского интерфейса для надстроек редактора

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Надстройки редактора создают пользовательские интерфейсы (меню, боковые панели и диалоговые окна) с помощью HTML-сервиса Apps Script. Поскольку интерфейсы разработаны на HTML и CSS, они легко настраиваются. Однако при создании интерфейса надстройки вы должны спроектировать его таким образом, чтобы он был удобным для пользователей.

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

  • Используйте пакет надстроек CSS на страницах службы HTML .
  • Если вы сомневаетесь в дизайне, найдите похожее диалоговое окно или боковую панель в редакторе и сопоставьте их, либо обратитесь к краткому руководству надстройки .
  • Следуйте этому руководству по стилю, чтобы создать бесшовный интерфейс.

Текст

Название дополнения

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

  • Используйте заглавный регистр.
  • Избегайте знаков препинания, особенно скобок, если они не являются частью вашего бренда.
  • Пишите кратко — лучше всего 30 или меньше символов. Длинные имена могут автоматически усекаться.
  • Не указывайте название продукта Google, для которого предназначено дополнение (или используйте слово Google).
  • Оставьте информацию о версии.
  • Убедитесь, что опубликованное имя надстройки совпадает с именем файла проекта скрипта. Имя проекта появится в диалоговом окне авторизации.
Не Делать
Плохие названия дополненийХорошие названия дополнений

Стиль письма

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

При написании текста пользовательского интерфейса:

  • Используйте регистр предложений (особенно для кнопок, меток и пунктов меню).
  • Отдавайте предпочтение короткому, простому тексту без жаргона и сокращений.
Не Делать

Послеустановочный совет

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

  • Начните со слова действия.
  • Опишите первый шаг использования надстройки.
  • Если у вас есть основной пользовательский интерфейс, например боковая панель, объясните, как его открыть.
  • Не рекламируйте здесь свою надстройку — она уже установлена.
Не Делать
Плохой совет после установкиХороший совет после установки

В отличие от обычных проектов Apps Script надстройки не отображаются в редакторе сценариев или диспетчере сценариев; пользователи не могут запускать дополнительные сценарии напрямую. Вместо этого каждое дополнение получает место в меню дополнений . Меню (и, возможно, диалоговое окно или боковая панель ) позволяют пользователям взаимодействовать с надстройкой.

  • Меню является ключевой частью того, как пользователи управляют вашим дополнением, поэтому тщательно продумайте его структуру и формулировку.
  • Избегайте пунктов меню, которые просто повторяют название вашего дополнения. Вместо этого начните со слова действия.
  • Если ваш пункт главного меню запускает рабочий процесс и нет единого глагола, описывающего, что он делает, назовите его «Пуск». Этот шаблон используется в кратком руководстве надстройки Документов .
  • Если в вашем меню больше шести пунктов, старайтесь не использовать подменю. Они могут быть привередливыми и трудными для выбора.
  • Опишите задачу, а не компонент пользовательского интерфейса, отображаемый пунктом меню.
Не Делать
Плохие ярлыки пунктов менюХорошие ярлыки пунктов меню

Сообщения об ошибках

Когда что-то идет не так, важно говорить простым языком. Объясните проблему с точки зрения пользователя и предложите, как ее исправить.

  • Не позволяйте пользователю видеть какие-либо исключения, которые выдает ваш код. Вместо этого используйте операторы try...catch для перехвата исключений, а затем отображайте удобное для пользователя сообщение об ошибке со встроенным текстом, стилизованным под класс error из пакета CSS дополнений, или диалоговое окно предупреждения .
  • Перед публикацией убедитесь, что ваша надстройка не записывает отладочную информацию в консоль JavaScript; вместо этого используйте ведение журнала Stackdriver .
Не Делать
Плохое сообщение об ошибкеХорошее сообщение об ошибке

Содержание справки

Меню каждого дополнения включает автоматический диалог справки. Если вы указываете URL-адрес справки при публикации, кнопка «Подробнее» ведет на эту страницу. Если ваше дополнение не говорит само за себя, предоставьте страницу, объясняющую, как его использовать.

  • По возможности отображайте инструкции в виде маркированного или нумерованного списка. Проведите пользователей до конечного результата с четкими ссылками на именованные элементы пользовательского интерфейса.
  • Убедитесь, что ваши инструкции четко объясняют любые требования, такие как настройка электронной таблицы определенным образом.
  • Также не стесняйтесь ссылаться на свой справочный контент из основного пользовательского интерфейса. Если ваша надстройка создает новый документ, вы также можете отобразить инструкции в теле документа.

Пользовательские интерфейсы

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

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

текст пользовательского интерфейса

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

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

Диалоги

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

  • Не открывайте диалоговое окно (включая предупреждение или подсказку ) из другого диалогового окна — отображайте только по одному диалоговому окну.
  • Для заголовка диалога используйте слово или короткую фразу, начиная с самого важного слова.
  • Метки кнопок должны относиться к заголовку диалогового окна.
  • Предпочитают две кнопки, обычно основное действие и «Отмена». Для особых случаев, когда требуется третья кнопка, рассмотрите нижний правый угол.
  • Поместите кнопки в нижний левый угол диалогового окна. Синяя основная кнопка должна быть слева, а все серые второстепенные кнопки — справа.
Не Делать
Плохое название диалогаХорошее название диалога

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

  • У пользователей могут быть другие надстройки с собственными боковыми панелями. Если две надстройки пытаются открыть боковые панели одновременно, отображается только одна.
  • Не отображать боковую панель или диалоговое окно при первом открытии документа.
  • Только надстройки, работающие в AuthMode.FULL могут открывать боковые панели или диалоговые окна. Вы можете использовать пункт меню, чтобы открыть боковую панель, так как это предлагает пользователю предоставить полную авторизацию.

Элементы управления

Великолепные дополнительные пользовательские интерфейсы оставляют своим элементам управления некоторую передышку. Адекватные поля и отступы имеют большое значение, в то время как плотные элементы управления могут показаться подавляющими. Если сомневаетесь, позаимствуйте макет у самого редактора. Например, просмотрите существующие диалоговые окна в Документах Google, такие как «Файл» > «Параметры страницы », при создании собственного.

В документации к пакету CSS надстроек приведены образцы разметки для каждого из типов элементов управления, приведенных ниже.

Кнопки

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

  • Избегайте одновременного отображения более одной синей, красной или зеленой кнопки. Серые кнопки могут появляться повторно.
  • Большинство меток кнопок должны быть в регистре предложений и начинаться с глагола. Красные кнопки, обычно используемые для создания действий, должны использовать все заглавные буквы.
Не Делать

Флажки и радиокнопки

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

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

Выберите меню

Выбор — отличный способ предложить краткий список альтернатив.

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

Текстовые области

Если людям нужно ввести больше нескольких слов, используйте текстовую область.

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

Текстовые поля

Используйте текстовые поля, если людям нужно ввести только одно или два слова.

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

Брендинг

В вашем дополнении

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

  • Все аспекты вашего дополнения должны соответствовать рекомендациям по брендингу .
  • Не включайте слово «Google» и не используйте значки продуктов Google.
  • Текст должен состоять не более чем из нескольких слов и оформлен в классе gray из пакета надстроек CSS.
  • Графика должна быть на белом фоне и иметь размер не более 200 пикселей × 60 пикселей.
  • Для диалогов брендинг должен быть в правом нижнем углу.
  • Для боковых панелей брендинг может быть вверху или внизу.

В магазине

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

Доступность

Каждый должен иметь возможность наслаждаться вашим дополнением, независимо от того, видят ли они цвета по-разному, используют программу чтения с экрана или имеют другие потребности. Доступность — это широкая тема, которая не может быть полностью раскрыта в этом руководстве по стилю. Одним из полезных ресурсов является сайт специальных возможностей Google . Но вот несколько советов для начала:

  • Убедитесь, что вы можете перейти ко всем элементам управления пользовательского интерфейса с помощью клавиатуры. Добавьте tabindex=0 к пользовательским элементам управления (например, созданным с помощью <div> ), чтобы люди могли переходить к ним. Подумайте, должны ли поддерживаться и другие клавиши, например стрелки для списка.
  • Некоторые люди могут использовать программу чтения с экрана с вашим дополнением. Таким образом, изображения должны иметь атрибут alt , а пользовательские элементы управления должны иметь атрибуты ARIA для описания их использования.
  • Не полагайтесь исключительно на цвет для передачи состояния. Также используйте значки и текст.

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