Что такое Wireframe

---

Что такое макет?

Макеты — это эскизы экранов системы, иногда называемые чертежом или скелетом. Они создаются для того, чтобы представить и объяснить клиентам идеи дизайна системы, что в конечном итоге приводит к согласию по предложенным идеям.

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

Прежде чем продолжить, давайте взглянем на макет, созданный на основе youtube.com

Как вы можете видеть, макет настолько прост и прямолинеен. Каждый может понять его без трудностей. Он помогает команде разработки легко объяснить, как пользователи будут взаимодействовать с веб-сайтом.

Макет — это всего лишь чертеж

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

Примеры макетов

Вот пример веб-макета для главной страницы:

Вот несколько примеров макетов для приложений Android:

Вот пример макета для приложения iPad на iPad:

Вот пример макета для приложения iPhone на iPhone:

Наконец, вот пример макета для настольного приложения:

Преимущества использования макетов

Уточнение пользовательского интерфейса

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

Раннее рассмотрение удобства использования

Опыт пользователя (UX) является важным аспектом при разработке любого программного обеспечения сегодня. Использование макетов при сборе требований выводит внимание на опыт пользователя на начальной стадии проекта. Без создания прототипов или рисования реального дизайна экрана пользователи всё равно могут ощутить, как будет работать система.

Экономичность

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

Больше готовы вносить изменения

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

Вовлеченные клиенты

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

Как эффективно использовать макет?

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

1. Макет должен быть простым и достаточным. Он должен быть простым, чтобы его можно было быстро и легко создать, и не вызывать колебаний при его отбрасывании и переработке. Низкая детализация также делает его более всесторонним и понятным. Поэтому не стоит тратить слишком много времени на улучшение рисунка, выравнивание элементов или использование красивой типографики и т.д.
2. В макете вместо отображения реального содержимого мы можем заменить большой объем текста (реальный контекст) заглушкой текста. Это делается, чтобы избежать траты времени на подготовку контента без необходимости, и предотвратить отвлечение читателей из-за текстового содержимого. Но если необходимо отображение текста, вы можете рассмотреть возможность размещения там текста-заглушки. Вы легко можете найти генератор текста-заглушки в интернете.
3. Использование аннотаций помогает вам описать элемент (например, «логотип компании») или объяснить что-либо, связанное с его поведением (например, «скрыть через 5 секунд»). Используйте его, если это необходимо. Но опять же, не пытайтесь документировать каждый элемент макета. Вы должны использовать аннотации только тогда, когда это необходимо.
   
4. Макеты могут быть нарисованы от руки, но мы обычно создаем макеты с помощью программного обеспечения, чтобы сделать нашу работу более эффективной и легкой в управлении. Кроме того, некоторые программы для создания макетов предоставляют вам функции, которые невозможно реализовать с помощью бумаги и карандаша. Вот три из них:
   1. Состояние – инструмент создания макетов Visual Paradigm поддерживает концепцию состояния, которая позволяет создавать дочерний макет на основе существующего. Это не только экономит ваше время при создании последовательности экранов с похожими дочерними макетами, но и значительно упрощает доработку связанных дочерних макетов (поскольку при внесении изменений в начальное состояние макета эти изменения также отразятся во всех его дочерних состояниях макетов)
   2. Сценарий – сценарий представляет последовательность экранов для конкретного сценария. Он делает макеты более управляемыми и значительно упрощает презентацию.
      
   3. Управление макетами с помощью пользовательской истории – пользовательская история — это гибкий инструмент для фиксации интересов и требований пользователя. Включение макетов в сценарий пользовательской истории показывает, как пользователь будет использовать функцию при выполнении части своей работы, описанной в этой пользовательской истории. Кроме того, когда разработчик начинает реализацию пользовательской истории, он может ознакомиться с макетом, чтобы понять ожидания пользователя.
      

Visual Paradigm предоставляет все инструменты и элементы макетов, которые вам нужны для создания веб-макетов, макетов настольных приложений, макетов приложений для Android и макетов приложений для iOS (iPhone и iPad). Он также поддерживает агILE-разработка программного обеспечения и инструменты проектирования пользовательского опыта, которые включают в себя инструмент пользовательской истории, разработка спринтов, сценарий, и т.д.