Конструктивные шаблоны пользовательского интерфейса для надстроек Office — Office Add-ins

Twitter




LinkedIn




Facebook




Адрес электронной почты

• 
  Статья
• 
  11/16/2022
• Чтение занимает 2 мин
• 
  

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

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

Компоненты Fluent UI React выглядят и ведут себя как часть Office, как и компоненты Office UI Fabric JS, не зависящие от платформы. Воспользуйтесь преимуществами любого набора компонентов для интеграции с Office. Кроме того, если надстройка имеет собственный язык компонентов, отбрасывать его не нужно. Найдите возможности сохранить его, интегрируя надстройку с Office. Рассмотрите способы изменения стилистических элементов и удаления конфликтов или примените понятные пользователям стили и поведение.

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

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

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

Начало работы

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

• Первый запуск (FRE)
• Проверка подлинности
• Навигация
• Разработка фирменной символики

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

Примечание.

Примеры экранов, демонстрируемые в этой документации, созданы и отображены с разрешением 1366×768.

См. также

• Наборы инструментов разработки
• Пользовательский интерфейс Fluent
• Рекомендации по разработке надстроек Office
• Fluent UI React в надстройках Office

Шаблоны в проектировании интерфейсов — Telegraf — журнал дизайнерів.

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

Для того чтобы понять, что такое паттерн в дизайне пользовательского взаимодействия, достаточно провести аналогию с объектами реального мира. Повторяющиеся узоры в природе, декорировании помещений и одежды или паттерны поведения человека (привычка) имеют элементы, которые повторяются предсказуемо. Так и при проектировании пользовательского интерфейса существуют повторяющиеся решения типичных проблем. Около 99% дизайн-проблем решаются при помощи уже давно придуманных КАК.

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

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

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

И еще одна небольшая ремарка о важности паттернов. Помните этот момент, когда вы приходите домой и включаете свет? Я – нет. Это действие уже настолько отлажено, что переместив выключатель, по инерции все равно рука будет тянуться к привычному месту какое-то время после. Тоже самое с вашим дизайном. Незачем лишний раз усложнять жизнь пользователям. Все мы уже привыкли к крестику в правом углу модального окна. Не отвлекайте пользователя от решения его проблем, если только вы не поставили себе такую цель. Но и в этом случае нужно понимать «ЧТО» и «ЗАЧЕМ».

Углубляясь в теорию

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

Паттерны принято разделять на 3 уровня организации:

• Контекст (Context)
• Сценарий (поток) (Flow)
• Внедрение (Implementation)

«Контекст», верхний уровень, опирается на общую направленность ресурса – это может быть сайт здравоохранения или для бизнеса, может стимулировать совершить покупку или быть информационным ресурсом. Исследование целевой аудитории дает представление об уместности стилей.

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

На нижнем уровне «Внедрения» решаются точечные вопросы, связанные с размещением элементов на экране, выбор цвета (красный – опасно, зеленый – благоприятно) в рамках вашего продукта.

Широко используемые паттерны

Более детально рассмотрим уровень «Сценарий», где совершается большое количество ошибок.

Паттерны навигации (Navigation)

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

dribbble.com

Паттерны ввода (Getting input)

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

Facebook registration form

dribbble.com

Подача контента (Dealing with data)

Каким образом подается контент для быстрого просмотра, поиска и работы с ним. Примеры: галереи, таблицы, карточки.

Pinterest

Социальные (Social)

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

Facebook

Что теперь с этим делать на практике?

Нужно проверить, соответствует ли конкретный шаблон вашим потребностям:

1. Проблема. Какую проблему, связанную с использованием системы, необходимо решить.
2. Ситуация. Что приводит к тому, что возникает проблема.
3. Принцип. Паттерн основан на одном или большем количестве эргономических принципах.
4. Решение. Описывает только суть проблемы, которую можно решить разными способами.
5. Почему. Почему данный шаблон может быть применен к решению данной проблемы и как это повлияет на удобство использования.
6. Пример. Примеры удачного применения шаблона.
7. Внедрение. Как применить этот шаблон к текущей проблеме.

Рассмотрим на примере 7 компонентов модели использования паттерна.

В чем заключается проблема?

Пользователи вводят неправильные данные в формы, что приводит к ошибкам и невозможности дальнейшей обработки информации.

dribbble.com

Что приводит к проблеме?

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

dribbble.com

Какой принцип применить?

Предотвращение ошибок ( Я. Нельсон).

dribbble.com

dribbble.com

Как решить проблему?

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

Зачем решать эту проблему?

Устранение неконтролируемых ошибок приводит к ощущению доверия к системе и лояльности пользователей.

Какие примеры решения подобной проблемы уже существуют?

Google использует подсказки, чтобы сократить количество неверно введенных данных.

В калькуляторе используются только цифровые символы.

dribbble.com

Или использовать маски ввода, как в следующем примере.

dribbble.com

Как внедрить данный шаблон?

Предусмотреть блокировку символов клавиатуры, которые не являются допустимыми, использование масок ввода.

После сказанного

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

Так что, всем успехов в этом марафоне.

И на дорожку несколько ресурсов, которые дадут еще немного более глубокое понимание темы.

1. www.interaction-design.org
2. ui-patterns.com
3. ui-patterns.com

Ранее Telegraf.Design писал о том, как анимировать интерфейсы быстро и просто.

Projector Creative&Tech Online Institute

дизайнов шаблонов пользовательского интерфейса, тем, шаблонов и загружаемых графических элементов на Dribbble

1. Посмотреть портфолио: Целевая страница

   Портфолио: Целевая страница

2. Посмотреть мобильное приложение Coinread: пользовательский интерфейс iOS Android

   Мобильное приложение Coinread: iOS Android UI

3. Посмотреть мобильное приложение Corporate Wellness: пользовательский интерфейс iOS Android

   Мобильное приложение Corporate Wellness: iOS Android UI

4. View Crypter 2. 0 — создайте свой собственный рынок NFT

   Crypter 2.0 — Создайте свой собственный рынок NFT

5. Посмотреть Вердо© | Веб-сайт агентства

   Вердо© | Веб-сайт агентства

6. Просмотр макетов электронных писем в формате HTML

   Макет электронной почты в формате HTML

7. View Stacks — совершенная система дизайна пользовательского интерфейса

   Стеки — совершенная система проектирования пользовательского интерфейса

8. View Move — многоцелевой HTML-шаблон I

   Перемещение — многоцелевой HTML-шаблон I

9. Посмотреть FeedSpring: адаптация

   FeedSpring: адаптация

10. View Crypter 2. 0 — набор пользовательского интерфейса NFT Marketplace

    Crypter 2.0 — комплект пользовательского интерфейса NFT Marketplace

11. View Folio Agency – Мобильная версия

    Folio Agency – мобильная версия

12. Посмотреть Eventlab — Дизайн сайта

    Eventlab — Дизайн веб-сайта

13. Посмотреть коллаб. — Комплект целевой страницы

    Коллаб. — Комплект целевой страницы

14. Просмотреть фолио: Комплект портфолио дизайнера — анимация

    Фолио: набор портфолио дизайнера — анимация

15. Посмотреть Вердо© | Дизайн веб-сайта агентства — Адаптивный [01]

    Вердо© | Дизайн веб-сайта агентства — адаптивный [01]

16. View Paradox – Адаптивный для мобильных устройств

    Paradox — мобильная адаптация

17. Иллюстрация шаблонов просмотра

    Шаблоны Иллюстрация

18. Просмотр Fitness Pro: Версия для ПК — ☀️Светлый/🌒Темный режим

    Fitness Pro: настольная версия — ☀️Светлый/🌒Темный режим

19. Посмотреть портфолио | Целевая страница

    Портфолио | Целевая страница

20. Посмотреть Fitness Pro 🏀Десктопная версия – Темная тема

    Fitness Pro 🏀Десктопная версия – Темная тема

21. Пользовательский интерфейс просмотра карточек электронной почты

    Карты электронной почты UI

22. Просмотр экрана загрузки Photoshop

    Экран загрузки Photoshop

23. Посмотреть целевую страницу: Quillow

    Целевая страница: Quillow

24. Просмотреть фолио: Комплект дизайнерского портфолио

    Фолио: набор портфолио дизайнера

Зарегистрируйтесь, чтобы продолжить
или войдите

Загрузка еще…

машинописный текст — литерал шаблона, содержащий keyof, используемый в качестве ключа интерфейса

спросил
1 год, 4 месяца назад

Изменено
8 месяцев назад

Просмотрено
919 раз

Учитывая простой интерфейс:

 интерфейс Расписание {
  интервал: "месяц" | "день";
  цена: количество;
}
 

Я могу построить шаблонный литеральный тип (используя ts4. 4 ):

 type PrefixedScheduleKey = `schedule__${keyof Schedule}`; // "расписание__интервал" | "расписание__цена"
 

Допустим, есть несколько таких интерфейсов, и я хотел бы объединить (по сути, сгладить) их ключи с префиксом, шаблонные литералы, чтобы в итоге получилось:

 interface Metadata {
  фу: строка;
  бар: струна;
  // вычислено
  schedule__interval: "месяц" | "день";
  расписание__цена: число;
  ...
}
 

Как объявить такие ключи интерфейса?

 метаданные интерфейса {
  [ключ: PrefixedScheduleKey]: любой
}
// бросает
// Тип параметра подписи индекса не может быть буквальным или универсальным типом. Вместо этого рассмотрите возможность использования сопоставленного типа объекта.(1337)
 

И

 интерфейс Метаданные {
  [ключ в `schedule__${keyof Schedule}`]: любой
}
// приводит к
// Имя вычисляемого свойства должно иметь тип «строка», «число», «символ» или «любой».(2464)
// Элемент '[key в `schedule__${keyof'' неявно имеет тип 'any'. (7008)
 

Вот детская площадка.

Кстати, на github было предложено использовать тип вместо интерфейса , но это не сработает, потому что мой интерфейс Metadata уже расширяет другой интерфейс, но я попытался сохранить пример простым.

• машинопись
• шаблонные литералы

2

Это невозможно сделать непосредственно на интерфейсе, как описано здесь: Typescript: Сопоставление типов с интерфейсом

До сих пор в TypeScript (начиная с версии 2.7.2) подписи типов объединения в
интерфейсы не допускаются, и вместо них следует использовать сопоставленные типы (как
у вас правильно).

Документы.

Однако вы можете реализовать это с помощью типа пересечения между произвольным интерфейсом и сопоставленным типом, как в исходной проблеме GitHub, о которой вы упоминали («Перемещает другие элементы в отдельный тип объекта, который объединяется с типом пересечения»).