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

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

Если ваше дополнение открывает отдельные веб-страницы, которые являются неотъемлемой частью работы дополнения (например, страницу настроек для дополнения), убедитесь, что эти веб-страницы также соответствуют этим рекомендациям по стилю.

Текст и изображения

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

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

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

  • Используйте заглавные буквы.
  • Избегайте знаков препинания, особенно скобок, если они не являются частью вашего бренда.
  • Имя должно быть коротким — 15 символов или меньше — оптимальный вариант. Длинные имена могут быть автоматически сокращены в Google Workspace Marketplace и других местах.
  • Не включайте в название дополнения слова «Google», «Gmail» или другие названия продуктов Google.
  • Не включайте слово «дополнение» в название дополнения.
  • Не указывайте информацию о версии.

Стиль письма

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

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

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

Универсальные и карточные действия

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

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

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

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

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

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

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

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

Изображения

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

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

В этом разделе приведены рекомендации по использованию интерактивных виджетов .

Кнопки

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

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

DecoratedText

Виджеты DecoratedText позволяют представлять текстовый контент с помощью значков, кнопок или переключателей.

  • Используйте регистр предложений для текстового содержимого.
  • Текст виджета DecoratedText обрезается, если не помещается в отведённое ему место. Поэтому старайтесь всегда делать текст максимально коротким.

Входы отбора

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

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

Ввод текста

Текстовые поля предоставляют пользователям место для ввода строковых данных.

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

Брендинг

В этом разделе приведены рекомендации по добавлению элементов брендинга в интерфейс вашего дополнения.

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

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

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

В Google Workspace Marketplace

При настройке надстройки для публикации вы предоставляете ряд графических и текстовых ресурсов для создания листинга Google Workspace Marketplace.

Все аспекты вашего листинга в магазине и эти активы должны соответствовать правилам брендинга .