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

Надстройки редактора создают пользовательские интерфейсы (меню, боковые панели и диалоговые окна) с помощью службы 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 Accessibility . Но вот несколько советов для начала:

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

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