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

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

По мере развития Интернета и появления новых технологий ожидания пользователей также становятся выше, чем раньше. «Хорошая» работа над дизайном больше не может быть достигнута простым соблюдением нескольких основных принципов проектирования. Нетерпеливые или разочарованные пользователи могут сдаться и переключиться на конкурента одним нажатием кнопки. Вот почему шаблоны дизайна так важны сегодня — они дают вам проверенные рецепты для того, чтобы сделать ваш дизайн «хорошим», не требуя от вас дополнительных усилий.

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

Что такое шаблон дизайна?

Итак, что такое шаблон дизайна? Прежде всего, это не повторяемое фоновое изображение — это совсем другой паттерн. Говоря простым языком, шаблон проектирования — это обычная проверенная совокупность элементов интерфейса, которая уже знакома пользователям. Мы можем наблюдать подобные картины вокруг нас. Если мы возьмем простой пример из природы — дерево — мы увидим, что все деревья, независимо от их вида, следуют одному и тому же повторяющемуся образцу: сначала корень, затем ствол и, наконец, ветви и листья. Как вы думаете, если мы изменим этот порядок, дерево все равно будет знакомым и узнаваемым? Конечно, нет. Мать-природа использует шаблон дизайна, который работает лучше всего и с минимальными усилиями. Я не вижу причин, по которым мы не должны использовать тот же подход при разработке наших пользовательских интерфейсов.

Ли шаблоны дизайна компрометируют творчество?

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

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

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

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

Принципы проектирования и шаблоны проектирования

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

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

Шаблоны на один уровень выше принципов — это принципы, реализованные в лучшем виде. Но это не единственное преимущество использования шаблонов проектирования. Посмотрим, что еще они могут предоставить.

Каковы преимущества использования шаблонов?

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

Документирование шаблонов

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

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

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

UI Design Pattern Библиотеки и галереи

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

Yahoo! Библиотека шаблонов дизайна