5. Определение общей структурыНа начальном этапе создания вайрфреймов сосредоточьтесь на их общей структуре, а не на конкретных элементах. Один из возможных подходов на данном шаге – обратится к бизнес-модели.
6. Масштабирование контентаОдно и то же расположение элементов не будет корректно отображаться на всех возможных экранах мобильных устройств. Представьте, что вы разместили контент на экране iPhone 5. Такое же расположение контента не подойдет для iPhone X, поэтому вам необходимо изменить его структуру и масштаб.
Каждый вайрфрейм может потребовать изменений в зависимости от размеров экранов различных мобильных устройств. Поэтому важно масштабировать контент, чтобы он корректно отображался на экранах разного размера. Всегда проверяйте правильность отображения контента на экранах разных устройств.
7. Соединение экрановСоедините экраны вашего приложения в правильном порядке. Вы можете спроектировать оптимальный пользовательский сценарий и проанализировать пользовательский опыт. Вы снизите вероятность ошибок, если соедините все экраны. Пронумеруйте их, чтобы вам было легче соединить их друг с другом.
8. Тестирование дизайнаПоследний, критически важный шаг - это проверка вайрфреймов на ошибки и неточности. Существует множество инструментов для тестирования готового дизайна приложений, но никогда не упускайте возможность провести проверку на последнем этапе создания вайрфреймов, в дальнейшем это позволит вам сэкономить ресурсы и время.
9. Инструменты для создания вайрфреймовНа рынке представлено множество инструментов, которые облегчают создание вайрфреймов для мобильных приложений. Давайте кратко рассмотрим пять лучших из них, чтобы вы могли воспользоваться ими в процессе проектирования.
TerrastructЭтот инструмент был создан с учетом потребностей разработчиков программного обеспечения. Он позволяет строить диаграммы на нескольких слоях и получать абстракции по каждому из них.
Особенности Terrastruct:
Шаблоны диаграмм и блок-схем;
Возможность создания общей структуры;
Легкое и удобное перемещение элементов.
SketchЭтот инструмент отлично себя зарекомендовал. Также его использование ускоряет процесс совместной работы над созданием прототипов.
Особенности Sketch:
•Мгновенный просмотр и экспорт кода;
•Сетки и направляющие;
•Инструменты редактирования векторных изображений;
•Экспорт пресетов и плагинов.
CacooЭто удобный инструмент для создания вайрфреймов, который предлагает практически неограниченный выбор шаблонов. Также есть поддержка совместной работы в режиме реального времени.
Особенности Cacoo:
•Создание макетов и прототипов;
•Блок-схемы и диаграммы связей;
•Возможность совместной работы;
•Шаблоны.
Wireframe.ccЕсли вы ищете инструмент, который может ускорить процесс создания вайрфреймов, то этот инструмент для вас. Вы можете выбрать шаблоны, которые подходят для мобильных и веб-страниц.
Особенности Wireframe.cc:
•Интерактивные элементы;
•Удобное соединение и перемещение объектов;
•Возможность совместной работы;
•Удобная работа над мобильной версией пользовательского интерфейса.
FigmaЭтот инструмент популярен благодаря удобной реализации функций прототипирования и графического дизайна. В Figma можно создать вайрфреймы разного уровня детализации - от самого простого до сложного.
Особенности Figma:
•Мгновенный доступ;
•Автоматическая работа с плагинами;
•Инструменты генерации кода.
ЗаключениеКонечной целью создания вайрфреймов является построение пользовательского сценария для проектирования дизайна мобильного приложения, которое будет легко и удобно использовать. Процесс работы над вайрфреймами поможет вам лучше понять ваш продукт и обеспечит наличие всех элементов, необходимых для работы приложения, а 8 шагов, описанных в этой статье, позволят сделать это максимально быстро и эффективно.
Источник:UX Matters: A Guide to Creating Mobile-App Wireframes in 2020