Поделиться через

Рекомендации по соблюдению стандартов проектирования

  • Статья

Применяется к следующей рекомендации контрольного списка по оптимизации взаимодействия Well-Architected Framework в Power Platform:

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

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

Ключевые стратегии проектирования

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

Понимание принципов проектирования

Обширные исследования когнитивных способностей человека помогают нам лучше понять особенности визуального проектирования и взаимодействия с цифровыми продуктами. Эти знания лежат в основе многих передовых практик и стандартов, на их долю приходится около 80% конечного продукта. Принципы проектирования проработать оставшиеся 20% потенциала креативности, который не рассмотрен в стандартах. Знакомство с этими знаниями улучшает понимание командой разработчиков особенностей проектирования во время планирования, снижает зависимость от ресурсов проектирования или улучшает совместную работу с ними.

Следуйте общим шаблонам и схемам

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

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

Создание системы проектирования

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

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

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

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

Составные компоненты должны быть достаточно универсальными, чтобы их можно было использовать как есть или с небольшими изменениями (через настройку параметров) в разных контекстах приложения без необходимости внесения изменений. Вот некоторые примеры настраиваемых компонентов:

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

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

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

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

Fluent UI от Microsoft — это пример широко распространенной системы проектирования с открытым кодом. Такая система может быть эффективным справочником для многих проектных решений, принятых в Power Apps, потому что все современные элементы управления используют компоненты системы проектирования Fluent (2). Системы проектирования, такие как Fluent UI, являются результатом значительного объема исследований и разработок в создание компонентов, отвечающих потребностям пользователей. Они также разрабатываются таким образом, чтобы их можно было повсеместно и легко использовать в различных цифровых продуктах и ​​платформах. Для каждого компонента оставляются конкретные инструкции, позволяющие обеспечить соответствие приложения предполагаемым целям. Воспользуйтесь знаниями, подкрепленными исследованиями, изучив Руководство по Fluent 2.

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

Проведение анализа проекта

Получение доступа к ресурсам, предназначенным для управления дизайном пользовательского интерфейса, имеет решающее значение для обеспечения соответствия приложения установленным стандартам UI/UX. Централизованные команды должны стремиться ознакомиться с основными стандартами проектирования и лучшими методиками. Хотя разработчики проектов, как правило, хорошо осведомлены о пользовательском опыте, менеджеры проектов также могут получить пользу от изучения этих навыков, чтобы вносить свой эффективный вклад в работу команды.

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

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

Соблюдение стандартов специальных возможностей для увеличения базы пользователей

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

Function Цель
Когнитивные функции На нашу способность воспринимать, интерпретировать и обрабатывать информацию влияют многие факторы. Эти факторы включают внимание, осведомленность, сосредоточенность, память, суждение, понимание, решение проблем и рассуждение. Когнитивные способности человека могут влиять на то, как он учится, будь то обучение использованию нового устройства или изучение новой информации в классе. Многие аспекты когнитивных способностей влияют друг на друга.
Мобильность Наша анатомия и мышцы обеспечивают нам подвижность, и они зависят от сигналов мозга, которые управляют мышцами. Двигательная активность включает в себя хватание, мелкую моторику, координацию, управление (произвольные или непроизвольные движения), скорость, мышечный тонус, выносливость, осанку и временные травмы. На двигательную активность могут влиять ситуационные, временные, прогрессивные или постоянные условия.
Зрение Наша способность видеть и понимать визуальную информацию из окружающей среды управляет мышлением и движением. На зрение влияют как физические, так и неврологические факторы. Ограничения зрения включают слепоту, слабое зрение (частичное зрение), снижение остроты зрения, потерю поля зрения, дальтонизм, светобоязнь (чувствительность к свету) и даже яркий солнечный свет, влияющий на читаемость текста на экране.
Слух Наша способность принимать и понимать звуковую информацию из окружающей среды также управляет мышлением и движением. Степени потери слуха варьируются в широком диапазоне, что приводит к препятствиям для повседневного использования технологий. Временные или ситуационные примеры включают шумную обстановку или тихие зоны, где воспроизведение звука невозможно.
Голос, речь и коммуникативные способности Наша способность общаться (вербально или невербально) необходима для выражения наших желаний и потребностей, формирования отношений, передачи информации другим и взаимодействия с нашей средой.
Чувствительность и восприятие Чувствительность — это наша способность обнаруживать такие чувства, как прикосновение или положение тела. Восприятие — это то, как мозг обрабатывает и передает эти чувства. Ограничения чувствительности включают вестибулярные расстройства, хроническую боль, нарушение целостности кожи, повышенная и пониженная чувствительность и проприоцепцию.

Способы получения доступа к контенту

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

Вспомогательные инструменты

К распространенным вспомогательным средствам относятся:

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

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

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

  • Динамическое содержимое: роли ориентиров или метки ARIA дают непосредственные преимущества для пользователей средств чтения с экрана. Существует восемь ролей, каждая из которых представляет блок контента, который обычно встречается на веб-страницах. Чтобы использовать их, добавьте соответствующий атрибут роли в подходящий контейнер в HTML, что позволит пользователям средств чтения с экрана быстро переходить к этому разделу страницы.

Визуальные стили

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

Стандартный текст должен иметь коэффициент контрастности с фоном не менее 4,5:1. Для более крупного текста, интерактивных компонентов и визуализации данных требуется минимальный коэффициент контрастности с цветом фона 3:1. Индикаторы состояния должны эффективно использовать цветовые обозначения, шрифты и изображения для передачи информации, чтобы гарантировать восприятие контента всеми пользователями. Рассмотрите возможность поддержки цветовой палитры высокой контрастности, которая нормализует цветовую палитру для отображения контента с коэффициентом контрастности не менее 7:1, обеспечивая видимость и четкость. Темный режим может значительно улучшить читаемость и снизить нагрузку на глаза.

Оформление

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

Заголовки должны содержать крупный или жирный текст, чтобы обеспечить быстрое сканирование и понимание, особенно для визуально ориентированных пользователей. Правильно примененные элементы заголовка обеспечивают эффективную навигацию для всех пользователей. Ширина и интервал между строками существенно влияют на читаемость; например, слишком широкие линии напрягают глаза, а слишком короткие строки нарушают ритм и понимание. Стремитесь к длине строки от 50 до 70 символов и высоте строки от 120% до 145% размера шрифта, чтобы улучшить читаемость.

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

Изображения, графика и движение

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

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

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

Взаимодействие

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

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

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

  • Таблицы: полагаться только на визуальные подсказки недостаточно для создания доступной таблицы. Структурная разметка позволяет технологиям обеспечения специальных возможностей распознавать заголовки и ячейки данных.

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

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

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

Возможности в Power Platform

Современные элементы управления доступны как для приложений на основе холста, так и для приложений на основе моделей.

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

Многоразовые компоненты, поддерживающие решения, доступны в различных формах для различных типов приложений. Пользовательские компоненты на основе холста могут использоваться в приложениях на основе холста или настраиваемых страницах. Они создаются с использованием минимального кода. Power Apps component framework может использоваться для внедрения компонентов кода в приложениях на основе холста, приложениях на основе моделей и в Power Pages.

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

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

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

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

Контрольный список оптимизации взаимодействия

Контрольный список оптимизации взаимодействия