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

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

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

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

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

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

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

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

Стиль письма

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

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

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

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

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

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

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

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

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

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

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

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

Изображения

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

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

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

Кнопки

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

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

УкрашенныйТекст

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

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

Выбор входов

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

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

Текстовый ввод

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

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

Брендинг

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

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

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

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

В Google Workspace Marketplace

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

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