Scott
В дизайне пользовательского интерфейса каркасы представляют собой четкое представление о пользовательском интерфейсе. Они иллюстрируют структурную схему и функциональность пользовательского интерфейса. Каркасы могут быть нарисованы вручную или с помощью цифровых инструментов. Но есть одна загвоздка. Сколько деталей и концепций дизайнер должен включить в типичный каркас, прежде чем передавать его важным заинтересованным сторонам? Это то, что мы называем точностью.
В этой статье сравниваются схемы с низкой и высокой детализацией. Количество деталей не является оценкой качества: каждый вариант используют для своих вопросов и этапов проверки.
Часть 1. Все, что Вам нужно знать о низкодетализированном каркасе
Перед выбором детализации определите, что нужно проверить: последовательность экранов, понятность действия, визуальную иерархию или конкретное состояние интерфейса.
1.1 Что такое низкоточный каркас?
Низкодетализированный каркас - это просто скелетная версия экрана пользовательского интерфейса, веб-страницы или пользовательского интерфейса приложения. Это ваш базовый черно-белый черновой набросок, который дает дизайнерам хорошее представление о том, как масштабировать свои каркасы для перехода на следующий уровень. Он предоставляет разработчикам базовую схему размещения компонентов пользовательского интерфейса, таких как изображения, кнопки и текст.
1.2 Характеристики низкоточный каркаса
Каркас с небольшим количеством деталей позволяет обсуждать структуру без проработки каждого стиля. Скорость подготовки зависит от сложности задачи; универсальной нормы экранов в день нет. Начните с ключевого сценария и уточняйте его по замечаниям.
Однако у этого есть и свои минусы. Один из них заключается в том, что в нем меньше деталей и, как следствие, меньше контекста. Чем меньше контекста, тем меньше ясности, и это может не понравиться заинтересованным сторонам, если они не поймут, что вы пытаетесь создать. Другая причина заключается в том, что из-за своей упрощенности и эффективности создание каркасов с низкой точностью может оказаться утомительной задачей в будущем, когда вам потребуется приложить дополнительные усилия для создания множества каркасов за короткий промежуток времени.
Часть 2. Все, что Вам нужно знать о высокоточном каркасе
Далее рассмотрим, чем подробный макет отличается от схемы экрана и какие вопросы он позволяет проверить.
2.1 Что такое высокоточный каркас
Поскольку каркасы с низкой точностью воспроизведения являются каркасной версией, каркасы с высокой точностью воспроизведения представляют собой почти законченную модель, которая отображает реалистичный прототип. В большинстве случаев каркасы с высокой точностью воспроизведения включают цвет и другие детализированные элементы пользовательского интерфейса и компоненты. Его цвет, типографика и другая визуальная иерархия понятны, и они в основном используются дизайнерами для демонстрации своей отточенной модели приложения или веб-страницы заинтересованным сторонам.
2.2 Характеристики высокоточного каркаса
высокоточные-характеристики-каркаса
Подробный макет показывает больше визуальных свойств и состояний. Это помогает обсуждать конкретные детали, но не означает, что участники автоматически примут решение или потребуется меньше изменений.
Подробный макет требует проработки большего числа свойств и состояний. Объем изменений зависит от структуры компонентов и требований; корректировка не обязательно требует перерисовать весь интерфейс с нуля.
Часть 3. Низкоточный каркас ИЛИ высокоточный каркас: что важнее?
Откровенно говоря, оба подхода имеют решающее значение как для дизайнеров, так и для заинтересованных сторон. Однако все зависит от контекста и характера проекта. Давайте разберемся, когда лучше использовать низкоточный режим, а когда - высокоточный.
3.1 Когда следует использовать низкоточный каркас?
Низкоточный вайрфрейминг лучше всего использовать в процессе разработки идей, когда дизайнеры могут применить упрощенное дизайнерское мышление и создать базовую структуру для последующего масштабирования. Это также полезно при определении требований верхнего уровня, поскольку каркасы lo-fi позволяют избежать чрезмерного обдумывания и облегчают работу проектировщика на этапе исследования.
Кроме того, поскольку на его создание уходит меньше времени, его лучше всего использовать в проектных проектах, где требуется меньше времени для передачи каркасов разработчикам или другим важным заинтересованным сторонам.
3.2 Когда использовать высокоточныйкаркас?
Высокая детализация полезна, когда нужно проверить текст, визуальную иерархию и состояния интерфейса. Достоверность выводов зависит от задания и способа исследования, а не только от внешнего вида прототипа.
Подробный прототип можно использовать для обсуждения с участниками, которым сложно интерпретировать схему. Укажите, какие элементы уже проверены, а какие пока являются предположением.
Когда структура уже согласована, стоит отдельно решить, когда переходить к высокодетальному прототипу, чтобы проверить взаимодействия и визуальные детали.
Часть 4. Как создавать каркасы с низкой и высокой точностью воспроизведения с помощью Pixso
Для низкодетализированного прототипа достаточно нескольких экранов, подписей и переходов. Проверьте путь к целевому действию до добавления иллюстраций и декоративных эффектов. Бесплатный тариф включает личные черновики и просмотр без ограничения числа зрителей, а также до 3 дизайн-файлов и 3 онлайн-досок для совместной работы. Для дополнительных файлов и функций сравните тарифы Pixso.
Давайте рассмотрим, как вы можете приступить к созданию простого каркаса в Pixso:
Шаг 1. Откройте ваш файл Pixso и выберите значок рамки.
Шаг 2. На правой боковой панели вы можете выбрать подходящую рамку, которая требуется для вашего дизайн-проекта.
Шаг 3. После того как вы выбрали рамку, перейдите к инструменту "Форма" и выберите прямоугольник, чтобы создать навигационное меню, кнопки и другие слои в вашем каркасе.
Шаг 4. Кроме того, вы можете добавлять различные формы и изображения, чтобы добавить больше деталей в ваш каркас.
Шаг 5. Затем выберите значок "Текст" и добавьте текст к своему каркасу.
Шаг 6. Теперь у вас будет приблизительный эскиз вашего каркаса для lo-fi. Изучите все инструменты Pixso, используйте больше форм, значков и цветов, чтобы масштабировать свой каркас и превратить его в более подробный макет.
Используйте оба каркаса…
Несомненно, как высокоточные, так и низкоточные каркасы имеют решающее значение для дизайнерских проектов. Все зависит от того, когда лучше всего использовать любой из них. Например, мы узнали, что низкоточные каркасы полезно использовать в сжатые сроки. Все зависит от характера проекта, вашего бюджета и того, сколько сложных взаимодействий вам необходимо реализовать. Кроме того, в конечном итоге все зависит от убеждения заинтересованных сторон.
Используйте небольшую детализацию для обсуждения структуры, а более подробный вариант — для конкретных визуальных свойств и состояний. Выбирайте уровень по вопросу проверки и фиксируйте ограничения прототипа.
