Методические указания по выполнению лабораторных и практических работ по мдк
 Скачать 3.25 Mb.
|
|
User Flow Diagram). Пример карты экранов приведен на рис. 2.2. 152 Рис. 2.2. Фрагмент карты экранов (User Flow Diagram) Прототипирование интерфейса. В большинстве случаев реализуется два схематичных прототипа: черновой и финальный. Исключения составляют небольшие интерфейсы: простенькие мобильные приложения или маленькие сайты. Черновой прототип представляет собой схематичные изображения экранов, связанные между собой. При черновом варианте на схемах изображены зоны и описания этих зон. Например, список новостей или шапка сайта. Все без деталей. Черновой прототип помогает более наглядно понять, насколько объемным будет приложение, как много информации будет на каждом экране, как много нужно кликать, чтобы добраться до нужной страницы. Следующим шагом идет финальный прототип, в котором схемы страниц все еще остаются связанными между собой, но на страницах уже видны все кнопки, тексты, чекбоксы, формы и прочие элементы. Пример чернового прототипа интернет-магазина приведен на рис. 2.3. 153 Рис. 2.3. Пример чернового прототипа интернет-магазина В прототипах планируется функционал, расположение элементов страниц относительно друг друга, но никак не оформление. Цвета, изображения, иконки - это все этап оформления. На этапе проектирования невозможно сказать, как они будут взаимодействовать между собой, как будут смотреться вместе, будут ли перекрикивать друг друга. Определение стилистики. После этапа исследования и параллельно с этапами проектирования идет определение будущей стилистики интерфейса. Для выбора стилистики готовятся несколько наборов изображений (moodboards). Эти наборы представлены страничками сайтов, иллюстрациями, кнопками, шрифтовыми композициями, связанными между собой стилистически. Существует множество различных концепций, например: material design, metro, skeuomorphism и т.д. При выборе стиля интерфейса следует учесть текущие тенденции в дизайне, адаптивность, время на разработку и внедрение дизайна, и много других не менее важных мо- ментов. UI-кит - набор готовых решений пользовательского интерфейса. Это могут быть кнопки, поля ввода, «хлебные крошки», меню, переключатели, формы - все те элементы, что помогают пользователям взаимодействовать с сайтом или приложением. Пример набора элементов из Flat UI-кита приведен на рис. 2.4. Рис. 2.4. Пример набора элементов из Flat UI-кита 154 Обычно готовый кит представляет собой графику в слоях для работы в Photoshop или Sketch. В документе хранятся элементы для дизайна интерфейсов, которые можно использовать в неизменном виде или редактировать их и подстраивать под стиль проекта. Дизайн-концепция. Она призвана показать оформление приложения и будущий вид всего приложения. Если предыдущий этап определения стилистики только дал направление, то дизайн- концепция призвана скрестить выбранное направление с имеющимся содержанием интерфейса. Дизайн-концепция может быть представлена любым объемом, но стараются его минимизировать для экономии времени. Обычно концепция представлена 1-3 экранами интерфейса. Если речь идет о сайте, то стараются показать вид одной и той же страницы для нескольких устройств. Для разработки дизайн-концепции используются online-инструменты: - https://www.axure.com - http://mockupbuilder.com - https://www.fluidui.com - и т.д. Оформление всех экранов. После утверждения дизайн концепции настает время оформления всех остальных экранов интерфейса. Дизайн- концепция - это предположение о том, как может выглядеть весь интерфейс. Когда же очередь доходит до оформления всех экранов, тогда и происходит финализация внешнего вида: становится ясно, правильно ли подобраны кегль или интерлиньяж, хорошо ли сочетается толщина линий иконок с текстом, не конфликтует ли оформление форм (кнопок, полей ввода) с другими элементами экрана и многое другое. Планом для оформления всех экранов являются структура и схематичный прототип интерфейса. Однако случаются отхождения от этого плана. Так при оформлении может выясниться, что всплывающее окно будет намного нагляднее и эффективнее, чем разъезжающийся блок информации посреди экрана. Все оформленные экраны собираются в интерактивный прототип, который создаст максимально приближенный опыт использования интерфейса без прибегания к услугам разработчиков. Анимация интерфейса. Часто этот этап начинается еще с момента дизайн-концепции и продолжается на протяжении оформления всех экранов. Стараются показать только какие-либо нестандартные случаи анимации интерфейса, которые не предусмотрены операционной системой. Например, нету никакой надобности показывать, с какой скоростью будет выезжать следующий экран в интерфейсе приложения. Однако это тоже можно считать анимацией интерфейса. Для Material design есть гайдлайны, которые наглядно объясняют, как надо анимировать и как не надо. Эти гайдлайны подходят для анимации интерфейсов любой платформы. Подготовка материалов для разработчиков. На данном этапе уже присутствуют макеты интерфейса во всех состояниях, прототип, связывающий весь интерфейс воедино и видеоролики, показывающие анимацию. Чтобы помочь разработчикам в реализации интерфейса, дизайнеры готовят все необходимые для этого материалы: - спрайты; - шрифт со всеми иконками; - UI-Kit с повторяющимися элементами интерфейса и их состояниями. Для иконок и прочей графики из интерфейса, для всех расстояний, отступов, размеров используют специальное программное обеспечение, например, Zeplin, которое самостоятельно готовит иконки и код. Задание на лабораторную работу Разработать пользовательский интерфейс для десктопного клиента, описанного в лабораторной работе № 1. Разработку пользовательского интерфейса производить согласно п. 2. настоящего пособия. 1. Произвести анализ аналогов, выявить их достоинства и недостатки, результаты анализа отразить в отчете. 2. Разработать пользовательские сценарии и привести их часть в отчете. 155 3. Разработать карту экранов в части описанных пользовательских сценариев. 4. Разработать черновой прототип экранов. 5. Подобрать подходящие стилистики для приложения не менее двух. 6. На основании одной из стилистик разработать дизайн концепцию приложения. Вопросы для самопроверки 1. В чем отличие понятий UI и UX? 2. Какие этапы включает разработка пользовательского интерфейса? 3. Что такое UI-кит? 4. Для чего разрабатывают дизайн-концепцию? 5. В чем отличие чернового прототипа интерфейса от финального? Практическая работа № 1.39. Проектирование пользовательского интерфейса мобильного приложения. Практическая работа № 1.40. Проектирование пользовательского интерфейса мобильного приложения Цель работы: изучение принципов проектирования пользовательского интерфейса мобильного приложения. Теоретический материал Общие сведения Мобильное приложение (Mobile app) - программное обеспечение, предназначенное для работы на смартфонах, планшетах и других мобильных устройствах. Первоначально мобильные приложения использовались для быстрой проверки электронной почты, но их высокий спрос привел к расширению их назначений и в других областях, таких как игры для мобильных телефонов и GPS, общение, просмотр видео и пользование интернетом. Поведенческие шаблоны Использование мобильных гаджетов вращается вокруг множества нюансов, которые нельзя не принимать во внимание, например, расположение большого пальца. По этой причине навигационные кнопки, как правило, находятся в нижней части экрана. Пример расположения навигационных кнопок показан на рис. 3.1. Рис. 3.1. Пример расположения навигационных кнопок 156 Предполагается два вида взаимодействия: жесты и анимация. Пользователи уже привыкли к возможности использовать разные жесты для различных ситуаций. Типовые жесты приведены на рис. 3.2. Рис. 3.2. Типовые жесты для взаимодействия с мобильным приложением И распространенные типы анимации также вызывают ряд ожиданий, основанных на предыдущих опытах взаимодействия с приложениями. Учет движений Анатомический фактор - очень важный элемент проектирования. Учитывайте строение тела человека и статистику использования мобильных устройств при проектировании. Левый верхний угол подходит для размещения важной информации, в то время как нижняя граница экрана - для навигации. Схемы наиболее удобных для человека жестов представлены на рис. 3.3. Рис. 3.3. Схемы наиболее удобных для человека жестов 157 Глобальный график с распределением ориентации смартфона при работе пользователей приведен на рис. 3.4. Рис. 3.4. Ориентация смартфона при работе Почти половину времени пользователи проводят, держа устройство правой рукой и используя для работы с экраном только большой палец. Распределение положения рук при работе со смартфоном приведено на рис. 3.5. Рис. 3.5. Глобальное распределение положения рук при работе со смартфоном На рис. 3.6 приведено глобальное распределение смартфонов по размеру диагонали. Рис. 3.6. Глобальное распределение смартфонов по размеру диагонали Из рис. 3.6 видно, что большинство пользователей используют смартфоны с диагональю экрана в пределах 4-5,5 дюймов. Задание на лабораторную работу Разработать пользовательский интерфейс для мобильного клиента, описанного в лабораторной работе № 1. Разработку пользовательского интерфейса производить с учетом п. 3 согласно п. 2 настоящего пособия. 1. Произвести анализ аналогов, выявить их достоинства и недостатки, результаты анализа отразить в отчете. 2. Разработать пользовательские сценарии и привести их часть в отчете. 3. Разработать карту экранов в части описанных пользовательских сценариев. 4. Разработать черновой прототип экранов. 5. Подобрать подходящие стилистики для приложения не менее двух. 6. На основании одной из стилистик разработать дизайн-концепцию приложения для экранов диагональю 4 дюйма и 6 дюймов. Вопросы для самопроверки 1. Опишите основные шаги при проектировании интерфейса мобильного приложения. 2. В чем отличие material design для OC Android от Apple Human Interface Guidelines для iOS? 3. Для какой диагонали смартфонов проектированием интерфейса можно пренебречь? 4. На какое место на экране обычно размещают панель навигации? 5. Назовите типовые жесты для взаимодействия с приложением. Практическая работа № 1.41. Адаптивный веб-дизайн. Практическая работа № 1.42. Адаптивный веб-дизайн Цель работы: изучить принципы проектирования пользовательских интерфейсов сайта, обеспечивающих его правильное отображение на различных устройствах, подключенных к интернету и динамически подстраивающихся под заданные размеры окна браузера. Теоретический материал Общие сведения Целью адаптивного веб-дизайна (responsive web design, RWD) является универсальность отображения содержимого веб-сайта для устройств, для того чтобы веб-сайт был удобно просматриваемым с устройств различных форматов и с экранами различных разрешений. По технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в Интернет, т.е. на всем спектре устройств. Пример применения адаптивного дизайна приведен на рис. 4.1 Рис. 4.1. Пример адаптивного веб-дизайна Применение адаптивного веб-дизайна обусловлено следующими аспектами: 159 большое разнообразие устройств, с которых можно выходить в Интернет. В настоящее время существует множество устройств, которыми люди пользуются, в том числе и для того, чтобы выходить в Интернет. Все они различаются размером экрана, разрешением и, со- ответственно, тем, как может отображаться на них веб-сайт. Поэтому важно, чтобы ваш сайт хорошо смотрелся и правильно отображался у любого из пользователей, независимо от того, какое устройство он использует; популярность мобильных устройств с выходом в Интернет и увеличение мобильного интернет-трафика. С ростом популярности мобильных устройств количества пользователей, которые заходят с них на сайты, заметно увеличилось, поэтому просто игнорировать их уже нель- зя - это не один-два человека в полгода, это значительная часть вашей аудитории, и им должно быть удобно пользоваться вашим сайтом (иначе они не будут этого делать); срочная информация. Если ваш ресурс содержит новостную/ срочную информацию, высока вероятность, что пользователю может понадобится прочитать эту информацию именно с телефона (потому что других устройств у него под рукой нет) в данный момент времени, нужно позаботиться о том, чтобы у него была возможность это сделать. Отличие адаптивного сайта от мобильной версии (приложения) сайта Мобильные версии сайтов и мобильные приложения, специально разработанные для различных мобильных устройств, также решают проблему с удобством просмотра сайта, но имеют некоторые недостатки: под каждый тип операционной системы нужно свое приложе- ние/версия сайта. Это требует дополнительных ресурсов как временных, так и денежных; необходимость загрузки приложения. Для того, чтобы пользоваться вашим приложением, пользователям необходимо его загрузить. Это требует каких-то дополнительных усилий от пользователей, и многие не будут этого делать, если точно не уверены, что приложение им очень нужно, и они планируют регулярно его использовать; разделение трафика. С точки зрения продвижения сайта мобильное приложение не удобно тем, что разделяет весь трафик ресурса на трафик сайта и трафик приложения, что будет выглядеть, как меньшая посещаемость сайта; необходимость интеграции материалов сайта. В случае с мобильным приложением необходимо либо синхронизировать сайт с приложением (дополнительные ресурсы), либо делать двойную работу по наполнению сайта и приложения материалами. В отличие от мобильных приложений, адаптивный дизайн - это один адрес сайта, один дизайн, одна система управления и содержание сайта. Недостатки адаптивного дизайна Адаптивный дизайн может дать многочисленные преимущества, но абсурдно предположение, что он подходит для всех веб-проектов. Можно выделить следующие недостатки: зачастую адаптивный дизайн приводит к неоправданному увеличению времени загрузки сайта на мобильных устройствах. Концепция RWD подразумевает, что пользователи всех платформ получают одинаковый контент, оптимизированный под конкретные разрешения экранов. В то же время на сайте может быть масса информации, показывать которую мобильным пользователям нет никакой необходимости. Однако она загружается автоматически, как только они заходят на сайт, и зачастую это происходит в местности со слабым сигналом сотовой связи; пользователи не смогут посмотреть полную версию. На большинстве неадаптивных мобильных сайтов внизу страницы присутствует опция «Переключиться на полную версию» или другая аналогичная кнопка. Она позволяет посетителям просматривать сайт для настольных компьютеров, минуя таблицы стилей для мобильной версии. Пример для сайта kinopoisk.ru приведен на рис. 4.2. 160 Принципы адаптивности Основными принципами при проектировании адаптивного вебдизайна являются: 1) проектирование для мобильных устройств с самых ранних этапов ("mobile first""}. Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное; 2) работа с медиазапросами (media queries'). Запросы определяют: - тип устройств: проекторы, смартфоны, мониторы, телевизоры и пр.; - условия. На соответствующий запрос и ответ будут применяться соответствующие устройству параметры отображения из файла стилей css; 3) применение гибкого макета на основе сетки (flexible, grid-based layout) и использование гибких изображений (flexible images). Рассмотрим основные виды адаптивных макетов, существующие в настоящее время: а) резиновый. Простой в реализации и очевидный для пользователя тип представления сайта. Основные блоки сжимаются до ширины экрана мобильного устройства, где такое невозможно - перестраиваются в одну длинную ленту; б) перенос блоков. Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана дополнительные блоки (сайдбары) переносятся в нижнюю часть макета (рис. 4.3); Рис. 4.2. Пример перехода к разным версиям сайта ft https://www.kinopoisk.ru/' > fo О 161 Рис. 4.3. Способ «перенос блоков» в) переключение макетов. Этот способ наиболее удобен при чтении сайта с различных устройств: под каждое разрешение экрана разрабатывается отдельный макет. Способ трудоемок, поэтому менее популярен, чем предыдущие два (рис. 4.4); Рис. 4.4. Способ «переключение макетов» г) адаптивность «малой кровью». Очень простой способ, который подходит для несложных сайтов. Достигается элементарным масштабированием изображений и типографики. Не очень популярен, так как не обладает гибкостью (рис. 4.5); UULM Рис. 4.5. Способ «адаптивность «малой кровью» д) панели. Способ, пришедший из мобильных приложений, где дополнительное меню может появляться при горизонтальном или вертикальном этапе. Главный недостаток - неочевидность действий для пользователя: очень непривычно видеть мобильную навигацию на веб-сайте (рис. 4.6). Рис. 4.6. Способ «панели» |