kazminaviktoriya1
Перейти в профиль
Выйти из профиля
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42"><rect fill-opacity="0"/></svg>)
Добавить аккаунт
Спринт 8/17: Пользовательские интерфейсы → Тема 5/8: Разработка прототипов → Урок 2/2
Прототипы с высокой точностью
Вы уже знаете, какие инструменты нужны для создания прототипов с низкой точностью, которые помогают составить общее представление об интерфейсе. В этом уроке вы узнаете, какие инструменты нужны, чтобы создать прототипы высокой точности, которые используются в тех случаях, когда просто картинки недостаточно и нужно что-то работающее.
Прототипы с высокой точностью
Прототипы с высокой точностью — это низкоуровневая модель, которая отображает экраны и переходы между экранами пользовательского интерфейса. Такие прототипы максимально подробны и, самое главное, интерактивны. Они выглядят почти так же, как будущий пользовательский интерфейс ПО, но их функциональные возможности ограниченны.
В каких случаях нужно разрабатывать прототипы высокой точности:
- Если заказчик сомневается в том, что финальный результат удовлетворит пользователей, и хочет чего-то больше, чем «картинки» (вайрфреймы и примеры дизайна интерфейсов).
- Если заказчик сомневается в выборе финального варианта интерфейса приложения и хочет провести тестирование на пользователях.
- Если заказчик хочет увидеть, как разрабатываемый интерфейс будет выглядеть на различных устройствах.
Таким образом, прототипы с высокой точностью позволяют заказчику и команде разработки «потрогать» будущий пользовательский интерфейс и, возможно, протестировать, как пользователи будут взаимодействовать с ПО.
Чаще всего для разработки прототипов с высокой точностью нужно привлекать фронтенд-разработчиков. Они разрабатывают прототипы с помощью различных фронтенд-технологий (языков программирования). Системный аналитик участвует в процессе разработки прототипов как носитель знаний о требованиях к ПО.
Инструменты прототипирования
В разработке прототипов с высокой точностью используются две группы технологий: HTML-прототипы и language-прототипы.
HTML-прототип
HTML-прототип — это функциональный (то есть работающий) прототип, который написан с помощью языка разметки HTML. Он позволяет отобразить внешний вид и поведение будущего ПО в веб-браузере. По сути, это очень простой веб-сайт. HTML-прототип — наиболее часто встречающийся и практически универсальный вариант прототипа.
HTML — язык разметки, на котором строятся сайты. Он сообщает браузеру, что должно появиться на экране: заголовки, абзацы, ссылки, списки — любые блоки, из которых состоит страница. Это не язык программирования, он не содержит исполняемые команды, функции, операторы и так далее. HTML содержит только теги, которые позволяют сформировать каркас страницы и определить, как расположен текст, есть ли в нём ссылки, как расположены иллюстрации, таблицы.
Предположим, что нужно создать онлайн-магазин и протестировать, как пользователи будут работать с электронным каталогом. Создадим обычную таблицу с перечнем товаров из каталога. Для каждого товара укажем минимальный набор информации:
- артикул товара (SKU);
- название товара;
- цену.
Чтобы создать HTML-прототип, который позволит переходить по страницам каталога, нужно сделать несколько HTML-страниц, связанных между собой ссылками или кнопками.
В общем виде HTML позволяет определить структуру документа следующим образом:
- текст (абзацы, заголовки, выравнивание, спецсимволы, начертание);
- ссылки;
- изображения (вставка оригинальных изображений или ссылка на сторонние);
- списки;
- таблицы.
Такого прототипа достаточно, чтобы протестировать логичность экранных переходов.
Language-прототип
У HTML-прототипа есть ограничения: такой прототип подходит только для веб-сервисов. Если задача команды разработки — разработать приложение под конкретную мобильную платформу, для отдельного устройства или десктопа, HTML (достаточно простой вариант разработки прототипа) может не подойти. И тогда нужно выбрать другой способ разработки и разработать language-прототип.
Language-прототип (language — «язык») — это функциональный прототип, который написан с помощью соответствующего выбранной платформе языка программирования (например, JavaScript, C++, Java и других). Он так же, как HTML-прототип, позволяет отобразить внешний вид и поведение будущего ПО, но не только в веб-браузере, а, например, в конкретной операционной системе, на определённой мобильной платформе или устройстве. Кроме того, функциональность language-прототипа может быть гораздо шире.
Например, Apple поддерживает язык программирования Swift, с помощью которого можно разрабатывать приложения для iOS, macOS и tvOS (Apple TV). Поэтому если речь идёт о приложении для iPhone, то логичнее разрабатывать его прототип с использованием языка Swift.
Другой пример — разработка прототипа UI для станков с числовым программным управлением (сложных производственных механизмов). Как правило, они разрабатываются при помощи языков программирования Java или C++.
Language-прототип следует разрабатывать, если:
- Требуемый функционал нельзя реализовать с помощью HTML.
Например, для многопользовательской игры, доступной только на платформе iOS. - Language-прототип создать дешевле и быстрее, чем HTML.
Например, если задача команды — разработать приложение для iPhone, прототип лучше сразу создавать на языке программирования Swift.
Решение о том, какую в итоге технологию использовать при создании прототипа, принимает команда разработки.
Разберём подробнее два подхода к реализации language-прототипов. Первый подход — связка технологий CSS и JavaScript, которые вместе с HTML позволяют создать сложные функциональные прототипы, применяемые для большинства случаев. Второй подход — использование других языков программирования для реализации прототипа, например, под конкретные мобильные платформы.
Первый способ
HTML + CSS
CSS — язык стилей. Основная задача CSS — сформировать стиль страницы, её визуальную часть. CSS позволяет централизованно задавать цвет, тип и размер шрифтов, ширину абзацев, границы и многое другое в пределах одной или нескольких HTML-страниц.
В таблице стилей, которая создаётся с помощью CSS, определяются правила оформления страницы. Чтобы HTML-страница отображалась с использованием заданных в CSS стилей, на эту страницу, используя HTML-теги, добавляют ссылку, которая ведёт на CSS-файл.
Возможность ссылаться на файл со стилем с любой страницы сайта позволяет сократить объём повторяющихся данных на многостраничных сайтах, обеспечивает гибкость и скорость управления стилями.
Вспомните прототип каталога товаров онлайн-магазина, о котором мы говорили выше.
Представьте, что нужно «приукрасить» таблицу, добавить больше визуализации:
- Изменить шрифт и указать его размеры.
- Указать цвета, которые используются при оформлении таблицы.
- Отцентровать заголовки.
- Указать отступы от краёв.
Чтобы не повторять оформление на каждой созданной HTML-странице, можно вынести его в CSS-файл, задав стили для всех HTML-страниц, и указать на каждой странице, откуда использовать стили.
HTML + JavaScript
JavaScript (или сокращённо JS) — это скриптовый язык программирования, который описывает поведение элементов веб-страницы или браузера. Когда пользователь нажимает на кнопки в интерфейсе и что-то происходит, отвечает за это JavaScript.
JS определяет действия, которые выполняются при загрузке страницы, с помощью написания скриптов. Скрипты можно прописать прямо внутри кода HTML-страницы или подключить их к HTML отдельным файлом.
Благодаря JS интерфейс может реагировать на действия пользователя (клики мыши, нажатия клавиш) и будет открывать всплывающие окна, уведомлять об использовании cookie, а также многое другое.
Вернёмся к прототипу электронного каталога и с помощью JavaScript добавим в него поиск по страницам и возможность перехода между ними. Это поможет пользователю найти в таблице нужный товар быстрее, особенно если в каталоге много позиций.
HTML + CSS + JavaScript
Таким образом, соединив наполнение прототипа (HTML) со стилями (CSS), к которым добавились интерактивные элементы (JS), мы получим полноценный функциональный прототип.
Выберите технологию, с помощью которой можно реализовать те или иные требования к прототипу.
В прототипе представлена кнопка, нажатие на которую открывает всплывающее окно
JavaScript
За функциональность всплывающих окон отвечает JavaScript.
Текст должен быть с абзацными отступами
CSS
Стили, применяемые к тексту, определяются в CSS.
Все ссылки в прототипе должны быть синего цвета
CSS
Цвет ссылок логичнее всего определить в CSS, который отвечает за стили.
В прототип нужно добавить таблицу
HTML
Обычную таблицу можно добавить с помощью HTML.
При нажатии на кнопку курсор в режиме ожидания превращается в «ромашку»
JavaScript
Анимация курсора реализуется на JavaScript.
Нужно указать, где определены стили для прототипа
HTML
Ссылка на файл с определёнными стилями оформляется с помощью HTML.
Второй способ
Другие языки
Как вы помните, language-прототипы можно создать с использованием других языков программирования, которые соответствуют определённой мобильной платформе, десктопу или устройству.
Разберём на примере, который покажет разницу между прототипом, разработанным в связке HTML + CSS + JS, и прототипом на языке Swift.
Пользовательский опыт того, кто откроет сайт «Википедии» в мобильном браузере, будет примерно таким же, как у того, кто откроет его в веб-версии для десктопа (в первом случае, правда, сайт отобразится на экране меньшего размера). Но если открыть «Википедию» в приложении, которое разработано, например, для платформ на iOS, UX будет сильно отличаться от пользовательского опыта при работе с веб-версией.
В чём отличия:
- Экранное пространство оптимизировано (как минимум за счёт отсутствия браузерной строки и меню навигации самой «Википедии»).
- Опции работы со статьёй («Сохранить», «Добавить в избранное», «Перевести») сгруппированы в меню и смещены вниз.
- Навигация более понятна и привычна пользователю приложений на iOS.
В целом UI приложения выглядит аккуратнее для пользователя iOS. Таким образом, использование language-прототипа может быть оправдано, если задача команды — протестировать UX конкретного устройства.
Что важно помнить:
- Language-прототипы могут быть значительно дороже в разработке в силу специфики платформы, а также необходимости привлечения разработчика, специализирующегося именно в этом языке.
- Прототип должен разрабатываться максимально быстро, поэтому язык, который позволит сделать это в кратчайшие сроки, и есть ваш выбор для прототипирования.
Прототипы без кода
Создать прототип высокой точности можно и без использования языков программирования. Дизайнеры могут разработать его, используя графические редакторы для проектирования интерфейсов. Разберём подробнее технологии, которые используются для этого.
Редакторы для проектирования интерфейсов
Прототип высокой точности проще всего разработать с помощью графического редактора для проектирования интерфейсов, например Figma, InVision, Adobe XD и других. Как в них создаются интерактивные прототипы? Редактор позволяет выделить области на подготовленных дизайнерами экранах, кликнув на которые пользователь попадёт на другие экраны.
Например, представьте два экрана: один из них иллюстрирует форму авторизации, второй — новостную ленту, которая открывается для авторизованного пользователя. Чтобы отобразить переход пользователя на новый экран, на первом экране в редакторе выделяется кнопка «Авторизоваться» и для неё прописывается правило: при нажатии на кнопку произойдёт переход на второй экран.
Использование no-code-технологий
Разработать прототипы с высокой точностью, не привлекая разработчиков, можно с помощью no-code-технологий (англ. «без кода»). Эти технологии позволяют разработать мобильные и веб-приложения без написания программного кода. Понадобятся сторонние платформы, с помощью которых можно быстро собрать нужный вариант, например конструктор сайтов Tilda.
Прежде чем переходить к реализации интернет-магазина, можно создать его прототип на Tilda. Прототип электронного каталога в этом конструкторе может выглядеть так:
В каких случаях нужны прототипы с кодом
У любого инструмента есть ограничения. Это касается и инструментов для прототипирования без применения языка программирования:
- У таких сервисов есть технические ограничения. Например, они могут не выдержать нагрузку при тестировании на большом количестве пользователей.
- Некоторые проекты и заказчики не позволяют использовать сторонние платформы для разработки прототипов. Такие ограничения могут быть в проектах, выполняемых для государственных организаций.
- Большинство no-code-технологий — платные (нужно оплачивать лицензию). В итоге такой инструмент может выйти дороже привлечения разработчиков со знанием необходимых языков программирования.
- Некоторые функции будущего интерфейса нельзя разработать с помощью шаблонных no-code-технологий. Например, на no-code нельзя реализовать работающий прототип приложения для инвестиций, которое позволяет покупать и продавать ценные бумаги на бирже. Без участия разработчиков это будет неработающая картинка. То же касается сервисов, подобных «Госуслугам». Резюмируя: с помощью no-code невозможно реализовать такие сложные функции, как, например, авторизация, хранение личных данных, электронные подписи.
Преимущества прототипов высокой точности
У прототипов высокой точности множество преимуществ. Основные звучат так:
- Разработка прототипа заставляет размышлять категориями интерактивного, а не статического дизайна. То, что красиво смотрится в детализированных интерфейсах, подготовленных UI/UX-дизайнерами, может не сработать для интерактивного прототипа.
- Прототипы высокой точности позволяют заказчику (и не только) «потрогать руками» хоть и ограниченную в функциональности, но очень близкую к итоговому продукту версию UI. Наличие прототипа у команды разработки может стать залогом успешной презентации заказчику.
- Уже на этапе разработки прототипа можно использовать инструменты тестирования интерфейса, с которыми вы познакомитесь в следующем уроке.
Подведём итоги
В этом уроке вы познакомились с инструментами для разработки прототипов с высокой точностью. Они позволяют проиллюстрировать модель, максимально приближенную к реальному интерфейсу будущего ПО. При этом у такой модели ограниченные функциональные возможности.
Системный аналитик не разрабатывает прототипы самостоятельно. В процессе разработки прототипов он — носитель знаний о требованиях к ПО. Сами прототипы, как правило, разрабатывают фронтенд-разработчики.
В разработке прототипов с высокой точностью используются две группы технологий:
- HTML-прототип — наиболее простой и часто встречающийся прототип, написанный с помощью языка разметки HTML.
- Language-прототип — прототип, который написан с помощью соответствующего выбранной платформе языка программирования (например, Swift, C++, Java и других) или в связке HTML + CSS + JavaScript.
Разработать прототип высокой точности можно и без использования языков программирования:
- С помощью редакторов для проектирования интерфейса (например, Figma, InVision, Adobe XD).
- C помощью no-code-технологий, которые позволяют разработать сайты, мобильные и веб-приложения с помощью сторонних платформ, где не требуется писать код, например конструктора сайтов Tilda.
Выбор технологии прототипирования зависит от целей и задач проекта, а также ограничений по бюджету и времени. Итоговое решение об используемой технологии заинтересованные лица принимают вместе с участниками команды разработки.
