лекция по разработке интерфейсов. _Лекция 1_интерфейсы. Дизайн интерфейсов Графический интерфейс
 Скачать 3.07 Mb.
|
|
Дизайн интерфейсов Графический интерфейс предоставляет пользователям возможности удобной работы с приложением, не требуя от них специальных навыков Интерфейс – механизм, обеспечивающий взаимодействие пользователя с приложением. Рациональная конструкция интерфейса приложения, обеспечивает простоту работы и играет важную роль в создании приложений. Интерфейс должен прежде всего учитывать потребности конечного пользователя. Неудачный интерфейс снижает эффективность работы с приложением, вызывает у клиентов разочарование. Под интерфейсом понимается любой экранный информационный или интерактивный интерфейс: сайты, мобильные приложения, приложения для стационарных компьютеров, презентационные панели (включая touch), информационные стационарные экраны. Проецируемая картинка на стену с использованием проектора и управляемая жестами или голосом тоже считается интерфейсом. Для сокращения общего времени разработки, определение стилистики начинается после пользовательских сценариев. Этапы разработки интерфейса Этап 1: Исследование На этапе исследования проводится сбор информации: • о продукте, • клиенте, • его конкурентах или близких аналогах, • сбор статистики использования текущего интерфейса (сайта или мобильного приложения), • анализ устройств предполагаемой целевой аудитории. Общение с разработчиками и выяснение их возможностей и ограничений. Этот этап помогает понять для кого разрабатывается интерфейс, с какими ограничениями следует его делать (размеры экранов, интерактивность), как не стоит делать (например, быть непохожими на конкурентов). Этап 2: Пользовательские сценарии Создается список задач – пользовательских сценариев , которые может выполнять пользователь в рамках интерфейса. Все задачи расписываются по шагам, которые необходимо предпринять для решения задачи. Например, обновить аватарку в профиле : 1. Зайти на сайт 2. Авторизоваться 3. Перейти в профиль 4. Нажать на аватарку 5. Выбрать файл 6. Подтвердить или изменить кадрирование изображения 7. Сохранить User eXperience «пользовательский опыт» UX-дизайн UI-дизайн & Бренд Рамблера — это больше, чем логотип Визуальная система и графический язык, чтобы объединить множество продуктов и их элементы в единое целое и рассказать пользователям, чем является Рамблер сегодня и куда он стремится в будущем http://brand.rambler.ru/ UX-дизайнер Составленные списки шагов для каждой задачи помогают понять, где путь для решения слишком долог относительно остальных задач. Пример с аватаркой можно сократить на несколько шагов. Сделать сохранение автоматическим, а обрезание изображения — опциональным. Этап пользовательских сценариев больше всего подходит для сокращения пути решения задач пользователей в рамках интерфейса. Этап 3: Структура интерфейса Полученный список шагов на предыдущем этапе – основа структуры интерфейса Становится известно количество экранов, их краткое содержание и положение в общей структуре Этап 4: Прототипирование интерфейса Обычно делают два схематичных прототипа: черновой и финальный. Исключения составляют небольшие интерфейсы: простенькие мобильные приложения или маленькие сайты. Черновой прототип схематичные изображения экранов, связанные между собой через сервис прототипирования ( Invision ). На схемах изображены зоны и описания этих зон. Например, список новостей или шапка сайта. Все без деталей. Помогает более наглядно понять насколько объемным будет сайт, как много информации будет на каждом экране, как много нужно кликать, чтобы добраться до нужной страницы. Финальный прототип схемы страниц все еще остаются связанными друг с другом, но на страницах уже видны все кнопки, тексты, чекбоксы, формы и прочие элементы. Цвета, изображения, иконки — это все этап оформления. На этапе проектирования невозможно сказать как они будут взаимодействовать между собой, как будут смотреться вместе, будут ли перекрикивать друг друга. В прототипах планируется функционал, расположение элементов страниц относительно друг друга, но не оформление. Этап 5: Определение стилистики После этапа исследования и параллельно с этапами проектирования идет определение будущей стилистики интерфейса. Один из них ляжет в основу дизайн концепции Готовятся несколько наборов изображений Эти наборы представлены страничками сайтов, иллюстрациями, кнопками, шрифтовыми композициями, связанными между собой стилистически. Этап 6: Дизайн концепция Дизайн концепция – оформление сайта и дать понять будущий вид всего сайта. Стилистика дает направление, а дизайн концепция должна объединить выбранное направление с имеющимся содержанием интерфейса. Для сайта желательно показать вид одной и той же страницы для нескольких устройств. Если в интерфейсе предполагается анимация на экране, то показывают и ее. Этап 7: Оформление всех экранов Дизайн концепция – это предположение как может выглядеть весь интерфейс. Оформления всех экранов – финализация внешнего вида: правильно ли подобран кегль или интерлиньяж, хорошо ли сочетается толщина линий иконок с текстом, не конфликтует ли оформление форм (кнопок, полей ввода) с другими элементами, и многие другие случаи. Планом для оформления всех экранов являются структура и схематичный прототип интерфейса. Возможны отхождения от плана. При оформлении может выясниться, что всплывающее окно будет намного нагляднее и эффективнее, чем разъезжающийся блок информации посреди экрана. Все оформленные экраны собираются в интерактивный прототип, который создаст максимально приближенный опыт использования интерфейса. Этап 8: Анимация интерфейса Этап начинается с момента дизайн концепции и продолжается на протяжении этапа оформления всех экранов. Желательно показать только нестандартные случаи анимации интерфейса, не предусмотренные операционной системой. Например, нет надобности показывать с какой скоростью будет выезжать следующий экран в интерфейсе приложения под iOS. В результате этапа появляются видеоролики, показывающие анимацию интерфейса. Нужны клиенту и разработчикам, которые будут ориентироваться на эти ролики. Этап 9: Подготовка материалов для разработчиков Макеты интерфейса во всех состояниях уже есть. Прототип, связывающий весь интерфейс воедино – есть. Видеоролики, показывающие анимацию, готовы. Чтобы помочь разработчикам в реализации интерфейса, готовим все необходимые для этого материалы: • спрайты, • шрифт со всеми иконками, • UI Kit с повторяющимися элементами интерфейса и их состояниями. Примеры кейсов https://agente.ru/cases Дизайн интерфейса для мебельного ретейлера https://agente.ru/cases/ecommerce-furniture-platform Sarpino's Pizzeria https://agente.ru/cases/sarpinos-pizzeria-case Новое радио. Всё по новому! https://agente.ru/cases/new-radio-case Kapitan — Ваш капитан в логистике https://agente.ru/cases/kapitan-vash-kapitan-v-logistike Lendline Logo Design https://agente.ru/cases/2274980c-0f3f-43ee-b9a6-89e37292a19c |