Больше того же
Если вы никогда не слышали о шаблоне пользовательского интерфейса, вот краткое объяснение: как и в большинстве случаев, особенно во время разработки программного обеспечения, большой набор элементов часто можно сгруппировать вместе, поскольку они образуют узнаваемый шаблон. Примером программного обеспечения может служить определение архитектурных паттернов или паттернов, относящихся к определенному языку программирования.
Однако при разработке пользовательского интерфейса также существуют общие закономерности. Просто бегло взглянув на некоторые приложения на устройстве, на котором вы читаете эту статью, некоторые вещи в конечном итоге повторяются:
- модальные представления с действием сохранения, отмены и / или удаления
- разделы элементов, содержащие текст, например списки с пролистыванием для каждого элемента списка
Итак, подумав еще на один шаг, есть ли какие-то ресурсы, которые вы можете использовать при самостоятельной разработке пользовательского интерфейса? Может быть, набор узоров, уже признанных и формализованных другими дизайнерами? Что ж, я бы не стал задавать этот вопрос, если бы у меня уже не было ответа! Время для второй главы!
Глава вторая (анонсированная)
В поисках формального определения у команды Carbon Design есть отличное определение: шаблоны - это лучшие практические решения для того, как пользователь достигает цели. Они показывают многократно используемые комбинации компонентов и шаблонов, которые решают общие задачи пользователя с помощью последовательностей и потоков.
Давайте посмотрим на несколько примеров. Следующие записи взяты с сайта IBM Carbon Design, а также со страницы шаблонов пользовательского интерфейса Google Material. Я не смог найти сайт Microsoft Fluent Design, но тем не менее связал их стартовую страницу в приложении.
Поиск
Поиск контента является одним из основных строительных блоков для большинства приложений, поэтому это идеальный выбор для определения шаблона пользовательского интерфейса для него. Независимо от его конечного использования (глобальный поиск или конкретный поиск на странице с содержанием) пользовательский интерфейс поиска должен предлагать
- ввод текста
- текстовый заполнитель, если ввод еще не доступен
- значок, четко указывающий цель ввода текста, например, с помощью увеличительного стекла, а также выступающий в качестве триггера для нового поиска
В некоторых случаях метка подсказки может помочь различить разные типы контента или помочь в случае недопустимого ввода. Чем больше условий должен обрабатывать поиск, тем лучше поиск может адаптироваться к этому требованию путем добавления явных меню фильтров.
Диалог
Один из самых ярких паттернов пользовательского интерфейса. Диалоги позволяют приложению отображать часть информации без потери общего контекста сайта. Это достигается за счет того, что окно закрывается не целиком, а лишь меньшей частью. Диалоги прерывают текущий рабочий процесс пользователя и поэтому должны считаться необходимыми только тогда, когда остановка рабочего процесса действительно действительна. Они должны справляться только с небольшими задачами и четко понимать, что им нужно сделать. Например, отменить несохраненные изменения или совершить важное действие.
Пустые состояния
Поначалу это может показаться странным, но пустые состояния очень распространены в приложениях. Важно сообщить пользователю, что данные недоступны, и в идеале объяснить, почему это так. В зависимости от контекста подсказка о том, как разрешить пустое состояние, может очень помочь в создании хорошего UX. Например, пользователь что-то искал, но ничего не нашел. Это может быть случай использования, когда предложение другого поискового запроса может помочь пользователю выполнить задачу. В любом случае каждое представление, представляющее пустое состояние, должно быть контекстным. Отрицательным примером может быть что-то вроде «Это не сработало. Попробуйте позже".
Не относитесь к пустым состояниям как к второстепенному в процессе разработки пользовательского интерфейса. Если они реализованы правильно, они позволяют пользователям плавно продолжать рабочий процесс. Пустые состояния, которые приводят к остановке всего рабочего процесса, на самом деле являются наихудшим сценарием, если не считать сбоев приложения.
Только начало
Это был беглый обзор некоторых шаблонов пользовательского интерфейса, которые я выбрал из IBM Carbon Design, а также страницы шаблонов пользовательского интерфейса Material. Применение шаблонов пользовательского интерфейса к вашему приложению также может значительно помочь уменьшить трение между рабочим процессом пользователя и пользовательским интерфейсом для выполнения задачи. Разработка пользовательского интерфейса может быть довольно сложной задачей, поэтому, стоя на плечах гигантов, изучая существующие исследования UX, очень помогает улучшить восприятие пользователями поведения вашего приложения.
