По прочтению этой статьи вы узнаете эффективный способ, как за несколько часов оформить свою IT-идею в интерактивный прототип, и уже начать собирать обратную связь от потенциальных пользователей.
UX, ПРОЕКТИРОВАНИЕ
10 апр 2020
Идея, целевая аудитория, ценность, конкуренты.
Перед тем, как начать рисовать картинки, хотя бы тезисно опишите портрет ваших потенциальных пользователей: возраст, контекст, в котором они будут использовать приложение. Опишите проблему или потребность, с которой они сталкиваются. Опишите, каким образом они решают её сейчас, и как им будет помогать решать её ваш сервис.
Если есть конкуренты или продукты-заменители, тоже их выпишите. По статистике, если не заимствовать устоявшиеся решения на рынке, а делать всё с нуля, то такой интерфейс редко «заходит» пользователям, и в конечном итоге все равно приобретает аналогичный им вид. Всё это сильно поможет при проектировании.
На этапе проектирования не так важно оформление, как суть продукта. Кроме того, до первой итерации обратной связи лучше по-максимуму экономить время. Поэтому все прототипы интерфейсов мы рекомендуем делать монохромными, используя только чёрный, белый и серые цвета. В редких случаях, чтобы выделить отдельную группу элементов, можете использовать один контрастный, например голубой. Так пользователь сразу интуитивно поймёт, что дизайна тут как будто нет, и начнёт фокусироваться на интерфейсе и текстах.
Как в Python писать программы с интерфейсом?
С точки зрения инструментов, всё, что нам потребуется: Shape, Текст и Карандаш. У каждого есть небольшие нюансы.
Shape. А именно прямоугольники и круги (кнопки R и O). Лично мы в прототипах для квадратов немного скругляем углы. Это придает интерфейсу живости. Никаких теней и эффектов.
Всё после первого раунда обратной связи.
Текст (T). Из шрифтов лучше выбрать один универсальный, вроде Roboto, а для разнообразия комбинировать его в разной степени жирности. Так пользователь не начнёт в них вглядываться. Вообще, тексты в прототипе — это главное. Не скупитесь потратить время, чтобы написать подходящие слова, вместо того, чтобы вставлять текст-рыбу.
Также имейте ввиду, что текст — отличный заменитель для иконок.
Pencil (Shift+P). Многие почему-то недооценивают «Карандаш», хотя в Figma он позволяет за секунды рисовать схематичные изображения без графического планшета, одной только мышкой. Для прототипа это просто находка. Так вы можете нарисовать условные иконки, которые планируете в будущем вставить, и даже ключевые визуалы, которые придумали из головы, аналогов которых нет в интернете.
Крутость «карандаша» в том, что вы можете нарисовать линию достаточно криво, но программа автоматически её более-менее выровняет. И ещё раз напомню, что это полностью SVG. То есть дальше вы можете крутить свою каляку-маляку как вам угодно, и менять её размеры, и жирность линий.
Как рисовать.
Пример иконок для прототипа, нарисованных за несколько секунд «карандашом»
В конце вы получите нечто похожее на это.
Владислав Гетманенко
CEO, Head of Design
Как анимировать прототип.
Следующим шагом после того, как вы схематично оформили арт-борды вашего будущего IT-продукта, идёт их связывание между собой. Для этого мы переходим в раздел Prototype, после чего наводим на элемент, который будет отвечать за переход с одного экрана на другой, например, иконка «на главную», зажимаем на появившийся кружок рядом с ней, и ведём стрелку на соответствующий экран. Далее по аналогии связываем все оставшиеся элементы.
Как быстро сделать графический интерфейс на Python
Чтобы проверить, как всё получилось, в правом верхнем углу нажимаем кнопку предпросмотра. Разумеется, не обязательно на раннем этапе прототипа прорисовывать, как будет открываться каждая настройка. Ваша задача — заанимировать суть — только самые используемые элементы: навигация и основной функционал.
Пример, как анимировать переходы из меню навигации.
Два слова, почему Figma. Во-первых, она всем доступна: не требовательна к системе, и бесплатна для всех пользователей Windows и Mac. Скачать можно по этой ссылке. Во-вторых, в ней вы работаете сразу с векторными (SVG) элементами. И в-третьих, не отходя от дизайна, она позволяет создавать прототипы — то, что нам и нужно, чтобы тестировать свою IT-идею.
Как тестировать и вносить изменения.
Есть всего 3 эффективных варианта, как можно собирать обратную связь по вашему продукту:
1. Личный контакт. Если у вас приложение — скачиваете на смартфон Figma Mirror — сервис, который будет дублировать изображение с Figma на телефон. Если у вас платформа или другой IT-продукт, то просто нажимаете на предпросмотр, и даёте ваш компьютер пользователю. Рассказать стоит только коротко о сути продукта.
Никаких других комментариев давать не стоит. Просто сидите и молча наблюдайте, словно за экспериментом. По итогу, фиксируйте замечания пользователя, и задавайте уточняющие вопросы по типу: насколько вероятно, что они бы этим пользовались, что можно было бы улучшить, и чего не хватает.
2. Дать ссылку или сверстать. Ссылкой на предпросмотр можно поделиться. Сопроводительным сообщением также коротко укажите суть продукта, и как вариант, можете предложить пользователю сценарий. Например, «твоя задача найти такой-то товар, и заказать его». После прохождения, вы можете уточнить, насколько легко ему было пользоваться интерфейсом, и где возникли сложности.
Ещё один вариант — это сверстать прототип на Tilda или любым другим способом. Скидывайте ссылку на сайт, предварительно привязав к нему Яндекс.Метрику, после чего отсматривайте Вебвизор, карту кликов, и уже на основе этих данных делайте выводы.
3. Реклама и сервисы. Сервис для тестирования гипотез Яндекс.Взгляд, классическая таргетированная реклама Вконтакте, Facebook, Instagram, а также профильные форумы, блоггеры, группы, телеграм-каналы и пр. Упакуйте вашу идею, создайте креативы и придумайте оффер, что вы можете дать взамен, если человек пройдет тест пользовательского поведения.
Иногда получается сделать так, чтобы люди соглашались независимо от предлога, потому что им просто понравился интерактивный опрос, который вы создали, или интересна сама идея. В любом случае, это один из самых быстрых способов массово собрать обратную связь за небольшие деньги.
После отсечки, например, в 30 обратных связей, вы уже сможете выявить повторяющиеся замечания. Далее важно не усложнить. Фильтруйте предлагаемые доработки на предмет сложности. Всегда выбирайте самые простые способы, как улучшить продукт. Не нагромождайте функционал.
После изменений проведите второй раунд сбора обратной связи, затем третий, и так далее, пока вы не увидите живые запросы в духе «а когда этим можно будет пользоваться?» — это верный признак спроса на ваш продукт ещё до его запуска.
Источник: artux.ru
Понятный ли у вас интерфейс: 8 правил как создать удобный сайт
Онлайн-школы и блогеры учат, что интерфейс должен быть интуитивно понятным и простым. Чтобы этого достичь, они рекомендуют верстать сайт по сетке, добавлять выпадающие окна и хлебные крошки, а ещё ставить кнопки строго по центру.
При этом они же советуют убрать тени, отказаться от сложной анимации и интересного дизайна — как будто они усложняют восприятие и мешают изучать контент.
Нам стало интересно, где та грань, переступив которую сайт перестаёт быть понятным? Как вообще определить, понятный ли у вас интерфейс сайта? Каких критериев стоит придерживаться и какие есть правила для создания удобного сайта?
Разбираться помогал СЕО Vitamin Tools и создатель LPgenerator Денис Кабалкин. Обо всём этом в нашей статье. В статье 8 правил, как создать удобный сайт, и антипример, как делать не стоит.
Нет времени читать статью? Найдите ее в нашем телеграм-канале и сохраните себе в «Избранном» на будущее.
Что такое интерфейс?
Интерфейс — это некий посредник, который связывает человека с устройством или системой. Он работает как переводчик — объясняет задачу на понятном для участника языке.
При этом интерфейс может связывать человека с устройством, устройство с устройством, устройство с системой и т. д. Нам интересен интерфейс, взаимодействующий с человеком, — его называют пользовательским.
Пользовательский интерфейс (UI) — это та часть интерфейса, с которой взаимодействуют люди. К ней относят кнопки, текст, иллюстрации, ползунки, формы. Пользовательский интерфейс объясняет, что человеку нужно сделать.
С точки зрения удобства, пользовательский интерфейс должен облегчать жизнь: по возможности делать всё сам, минимизировать ошибки, учитывать человеческий фактор и даже настроение пользователя.
Пример пользовательского интерфейса — Алиса от Яндекса. С ней можно разговаривать и переписываться. Система распознаёт голос или звук, а затем трансформирует его в команду, понятную для устройства. Если в чате человек напишет запрос с ошибкой, Алиса тоже поймёт.
Пользовательский опыт (UX) — ещё одно понятие, связанное с интерфейсом человек-система — это общее впечатление от использования сайта или приложения.
Пользовательский опыт — это субъективное мнение человека о том, насколько удобно ему работать с интерфейсом.
На удобство влияет не только сам продукт-сайт, но и контекст: где пользователь взаимодействует с продуктом? Что он делал до этого? Как узнал о сайте? Зачем его использует? Что будет делать потом?
Нужно учитывать всё, что повлияет на отношение пользователя к продукту-сайту.
Например, покупатели WildBerries обнаружили, что маркетплейс сохраняет данные всех удалённых карт. Более того, если на привязанной карте не хватает денег, система автоматом списывает деньги с любой ранее привязанной карты. Очевидно, маркетплейс формирует плохой пользовательский опыт — клиенты не ждут, что их данные будут использованы после удаления. Они привыкли, что если информация о карте удалена, её нельзя использовать.
Пользовательский интерфейс и пользовательский опыт взаимосвязаны. Именно от них зависит «понятность» и «простота» сайта.
Идеальный сайт — тот, который вам не нужно объяснять. В нём минимальное количество кнопок. Человек переходит по ссылке и понимает, что ему нужно сделать, чтобы решить свою задачу. С этой точки зрения Wiki — идеальный сайт: забиваешь запрос в поиск и попадаешь куда надо. Никаких прокладок, всплывающих окон и ненужных регистраций.
Любая преграда на пути — это потенциально потерянная продажа. Чем сложнее ориентироваться на сайте, тем выше вероятность, что клиент уйдёт туда, где ему не нужно напрягаться, — к конкурентам. Вы должны подумать за клиента и максимально облегчить его задачу. Идеально, если проблема решается в одно нажатие кнопки.
Виды интерфейсов
Пользователь может давать команды разными способами: жестами, голосом, прикосновением, через командную строку, графику и даже с помощью нейронного управления.
- Командная строка — ранее популярный, но устаревающий способ взаимодействия. Пользователь вводит текстовую команду и получает результаты работы в виде текста. По такому принципу работают системные администраторы: они вводят нужную команду через админку устройства.
- Графика — наиболее привычный способ взаимодействия через посредника: мышки, клавиатуры или голосовых команд. Пользователь нажимает на кнопки, смахивает экран вправо и двигает ползунки.
- Жесты, голос, нейроны и прикосновения — искусственный интеллект помогает системе распознавать команды. Примеры: голосовые помощники Siri от Apple, Alexa от Amazon или Алиса от Яндекса, приставки Xbox и Nintendo Wii, корректировка громкости движением руки в Яндекс.Станции.
- Веб-технологии — интерфейс для разработки приложений, которые не надо устанавливать на ноутбук. Пользователь управляет программой онлайн из браузера. Пример: платформа Digital-маркетинга — Vitamin.
- Геймплей — интерфейс, сочетающий возможности графического и нейронного управления. Пользователь жмёт на кнопки, двигает мышью, управляет клавишами на джойстике или через VR-шлем.
Большинство сайтов и мобильных приложений оборудованы графическим пользовательским интерфейсом.
8 правил удобного интерфейса
Правила удобного интерфейса сформулировал эксперт по юзабилити Якоб Нильсен в 1994 году. Эти правила учитывают поведение пользователей при взаимодействии с разными типам устройств. Разберём, как они работают.
1. Объясняет пользователю, что делает система
Пользователю важно понимать, что делает программа после его действий. Если никаких уведомлений нет, человек не знает, приняла система запрос и нет. Правильно, когда система реагирует на каждое действие клиента.
Хорошо, если пользователь положил товар в корзину, система присылает уведомление с предложением перейти в корзину, а при наведении мышки на значок с корзиной уведомление всплывает вновь. Удобно и понятно.
Сайт М.видео — пример хорошего интерфейса, который объясняет пользователю, что произошло в результате его действий
Плохо, если после добавления товара в корзину экран прокручивает наверх без каких-либо уведомлений. Пользователь не понимает, что происходит.
Чтобы объяснить действия интерфейса, необязательно выводить всплывающие окна. Можно изменить курсор мыши со стрелки на руку или добавить кружок загрузки, если нужно больше времени на обработку информации.
2. Говорит на понятном для пользователя языке
Стоит избегать сложных терминов и непонятных акронимов, а в описании указывать ту информацию, которая будет полезна клиенту. Сухое перечисление преимуществ и функций товара, нужно заменить выгодами и сценариями применения.
Плохо, когда в описании набор ключевых слов, а не полезная информация. Как в примере ниже: непонятно, когда можно надевать сапоги — диапазон температур абстрактен. Непонятно, как обувь может подходить всем: мужчинам, женщинам, подросткам и даже детям.
Хорошо, когда в описании указано предназначение обуви, её особенности (например, какая подошва или застежка) и отличительные качества (например, устойчивость к повреждениям, высокое качество).
Для сложных товаров в карточку с описанием лучше добавлять еще информацию, которая может повлиять на покупку: условия и сроки доставки, рассрочку и т. д.
3. Позволяет ошибаться и исправлять ошибки
Интерфейс должен учитывать человеческий фактор — случайные ошибки, опечатки и невнимательность. Хорошо, если в интерфейсе продуман «аварийный выход», когда пользователь может вернуться на шаг назад и исправить ошибку.
Плохо, если при возврате назад система обновляется и нужно начинать оформление заказа заново. Хорошо, если можно нажать на название конкретного этапа, вернуться туда и не потерять информацию.
Интерфейс Эльдорадо позволяет пользователю вернуться назад — достаточно нажать на кнопку с конкретным этапом
4. Соответствует ожиданиям пользователей
Пользователи ожидают определённую реакцию от интерфейса в ответ на свои действия. Например, они рассчитывают найти иконку корзины в правом верхнем углу, а фильтры для поиска — слева или вверху экрана.
Если человек не найдёт нужный инструмент в ожидаемом месте, он, скорее всего, уйдёт со страницы. Как в примере ниже.
Что плохо: корзину разместили в центре, но её не видно из-за агрессивного оранжевого цвета и обилия плашек-кнопок в верхнем меню. Пользователь должен потратить время, чтобы сориентироваться.
5. Хранит информацию за пользователя
Интерфейс должен объяснять пользователю, какой товар он просматривает или только что купил. Хорошо, если после оформления заказа система выводит краткую информацию с составом заказа, а рядом с фотографией товара указаны краткие характеристики.
Хорошо, когда на любом этапе оформления заказа пользователь может посмотреть, что покупает. Но плохо, если пользователю нужно отвлекаться от действий, чтобы закрыть уведомления-подсказки. Такие действия могут существенно повлиять на конверсию.
На Ozon пользователь может посмотреть, что он покупает, на любом этапе оформления заказа
6. Проявляет гибкость
Использовать интерфейс могут люди с разным уровнем навыков. Желательно создавать интерфейс таким, чтобы он был удобен для всех. Для этого разработчики должны предусмотреть возможность включать/отключать некоторые функции. Например, автозамену слов при наборе текста.
7. Простой дизайн
Интерфейс не должен отвлекать от главного — того, за чем пользователь пришёл на сайт: покупки, поиска ответов и т. д. Чем меньше отвлекающих факторов, тем лучше.
Следует избегать агрессивных цветов, множества баннеров, лишних элементов, всплывающих окон, прыгающих иконок. Всего, что может отвлекать от основной цели пользователя и раздражать его.
Теперь то же самое на конкретном плохом примере:
Белая плашка меню на агрессивном чёрном фоне перетягивает внимание. Кажется, что меню — самое важное на сайте.
Тонкие белые буквы с чёрным абрисом на фоне изображений не читаемы. Когда пользователь пытается выбрать кейс, изображение скачет — цвет изменяется на агрессивный красный, добавляется подчёркивание.
Красный на фоне чёрного также неудобно читать. Непонятно, что здесь главное, а что второстепенное.
Если провалиться в кейс, страница меняет цвет — появляется несколько оттенков серого цвета, хотя меню всё ещё белое. Лишние цвета усложняют восприятие текста, глаза быстрее устают, человек чувствует, что читать кейс сложно.
А в конце статьи снова красный цвет — им помечены ссылки на другие материалы. Нильсен рекомендует выделять ссылки другим цветом, но избегать красного цвета из-за его агрессивности. Лучше для выделения ссылок использовать более спокойные цвета, например синий.
8. Предотвращает ошибки и направляет пользователей
Если произошла ошибка или пользователь неправильно указал данные, система должна сообщить об этом. Причем сообщение должно подсказать правильное действие.
Хорошо, если интерфейс подсказывает, где пользователь ошибся при заполнении формы — подсвечивает ошибочно заполненные или пропущенные поля и выводит подсказку-инструкцию, как нужно ввести данные.
Интерфейс подсказывает, какое поле нужно заполнить
Подсказки должны быть короткими, но точными, чтобы помочь пользователю сориентироваться и не загружать его лишней информацией.
Как понять, удобный ли у вас интерфейс?
Специалисты проверяют сайт в несколько этапов. Сначала просматривают визуально на соответствие правилам Нильсена, оценивают расположение элементов, ищут ошибки. Затем пробуют встать на сторону клиента и понять, насколько удобно им использовать сайт.
Проверить удобство использования можно с помощью бесплатного сервиса от Яндекса — Вебвизора. Он отслеживает наличие ошибок в дизайне интерфейса и действия пользователей: скорость, с которой они нажимают на кнопки, прокручивают страницы и т. д.
Красные зоны — точки, где посетители пробыли дольше. Источник: yandex
Следующий этап — провести качественные и количественные исследования. Чтобы понять, насколько удобно людям работать с сайтом, нужно у них спросить. Для опроса достаточно пяти человек.
Анализ проводят так:
- Придумывают легенду, которая объясняет пользователю цель теста. Например: «Вы перешли на сайт нового магазина мебель. Моделей много, цены ниже рыночной, доставляют за 1–2 дня. Вы хотите сделать заказ».
- Прописывают сценарий теста, чтобы пользователь мог выполнить задачу. Например: «Вам нужно купить детский письменный стол и стул. Как вы это сделаете? Выполните задачу и прокомментируйте».
- В конце теста спрашивают о впечатлениях пользователя. Например: «Что было легко? Какие проблемы возникли?».
Для количественных исследований нужно собрать фокус-группу. Чем больше пользователей вы привлечёте к исследованию, тем более полную информацию получите. Затем действия те же: нужно сформулировать задачу и попросить людей записать их действия с комментариями на видео.
Во время этих тестов вы можете найти баги и преграды, проанализировать поведение пользователей и составить план улучшений. Например, исследование может показать, что пользователи не читают всплывающие окна, а стараются быстрее их закрыть, так как они мешают и злят. Чтобы исправить ситуацию, нужно убрать всплывающие окна.
Учимся на чужих ошибках: пример неудачного интерфейса
Рассмотрим сайт digital-агентства idbi. Сайт переполнен анимацией — она увеличивает время загрузки страниц и мешает изучать контент. Кнопки расположены в неудачных местах, назначение некоторых элементов непонятно.
1. «Создаём продающий интернет-ресурс в кратчайшие сроки» — пользователю нужно потратить 5 секунд, чтобы прочитать появляющиеся буквы. Это потеря ценного времени, те у кого его нет — проскроллят страницу вниз и пропустят кнопку «Узнать» и навигационное меню.
2. Кнопка «Узнать» сливается с заголовком, её не видно.
3. В левой части экрана, где выделенные точки, расположено меню. При переключении точек пользователь может увидеть примеры работ, если не прокрутит сразу страницу вниз.
4. В блоке с примерами работ текст размещён на полупрозрачных плашках, которые сливаются с картинкой под ними. Прочитать текст сложно.
5. У всех наград идентичные названия — это сбивает с толку.
6. Агентство добавило анимацию в каждый блок, но она только снижает скорость загрузки страницы и мешает чтению.
- Пользователь не понимает, что он увидит на экране при выборе действия.
- Содержимое страницы не структурировано.
- Смещены акценты с важного на неважное, но анимированное.
Источник: lpgenerator.ru
Процесс работы над игровым интерфейсом
В я рассказала о принципах разработке игрового интерфейса и о том, какие нюансы нужно учитывать при проектировании. Теперь я хочу рассказать о порядке работы над задачами, связанными с концептированием, отрисовкой и внедрением интерфейса в игру. Давайте представим, что вы занимаетесь разработкой UI с нуля, на самом старте проекта. С чего же начинается эта работа?
1. Концепция геймдизайнера
После того, как была написана документация для базового функционала игры, можно начинать разработку игрового интерфейса. Как правило, она идет параллельно с созданием первого прототипа игры — ведь даже с прототипом нужно как-то взаимодействовать. Для того, чтобы дизайнер интерфейсов мог приступить к своей части, ему нужно получить подробное ТЗ на UI от геймдизайнера. Такое ТЗ, как правило, состоит из:
- макета интерфейса (можно сделать через инструмент “рисунок” в обычном Google документе, или просто сфотографировать схему, нарисованную от руки на бумажке);
- краткого описания основных игровых задач интерфейса, ключевых нюансов для игрока;
- сносок с пояснением для каждого элемента и каждой кнопки на макете интерфейса;
- детального описания функционала интерфейса, которое является описанием технических возможностей тех или иных элементов, а также их отклика на взаимодействие;
- реакция, которой отвечает игра на нажатие на ту, или иную кнопку (автоматическое закрытие окна, переход в другое окно, сдвиг панелей, подсвечивание и прочее);
- нередко — ссылки на документы с описанием механики, если окно представляет собой активно участвующую в геймплее структуру (например, интерфейс крафта или улучшения каких-либо предметов: по факту прямо в окне апгрейда происходит игровой процесс).
Такое ТЗ нужно написать на все базовые интерфейсы, чтобы дизайнер мог сразу начать работу над всеми макетами — опять же, напомню, ему нужно смотреть на всю картину в целом, а не на одно отдельно взятое окошко. Под базовыми интерфейсами я подразумеваю не описание всех игровых окон сразу, а только самых основных, позволяющих протестировать основную механику вашей игры. Главное, для чего это нужно — выработать общую структуру и список элементов на основе разных по содержанию окон.
Пример задачи для дизайнера интерфейсов ищите в конце статьи.
2. Макет дизайнера интерфейсов
После передачи вашего макета и описания дизайнеру, нужно сесть и обговорить детали. Вероятнее всего, дизайнер предложит что-то сделать по-другому, перекомпоновать элементы, или укажет на то, что похожий элемент уже был в другом окне, и здесь нужно использовать такой же. Вместе вы обсуждаете изменения макета, вносите принятые вами изменения в документацию и в геймдизайнерский макет. Далее дизайнер интерфейсов делает свой макет с помощью заглушек и самых простых внешне элементов. Это нужно для того, чтобы проверить функциональность и удобность интерфейса, т.е. с целью собрать первичный прототип UI “на коленке” — ведь это гораздо быстрее, чем отрисовывать его в идеальном виде, а потом выяснить, что была допущена какая-то логическая ошибка.
В случаях, когда работа над интерфейсом уже завершена на всех уровнях, новые окна для новых механик можно добавлять сразу на чистовую, но даже тут, если есть возможность перестраховаться и потестировать механики сначала на черновике интерфейса — лучше это сделать.
Что же делать, если у вас маленькая команда и нет дизайнера интерфейсов?
Придется поднапрячься, вооружиться советами , и взять на себя эту роль самому геймдизайнеру. Лично я неоднократно занималась созданием макетов интерфейсов, которые потом вставлялись в игру для тестирования механик и юзабилити. Здесь мой совет будет довольно субъективным и дилетантским, я поделюсь способом, который мне всегда помогал, несмотря на то, что, возможно, есть тулзы получше и попроще. Я всегда пользовалась для создания макетов UI программой Adobe Illustrator: скачивала бесплатные векторные иконки и кнопки, и с их помощью собирала относительно приятный для глаза интерфейс. Мне нравится, что с Иллюстратором легко работать — он довольно простой, интуитивно понятный и его самых примитивных функций с головой хватает для того, чтобы сделать красивый заглушечный интерфейс с правильными размерами и пропорциями.
Сайты, где можно скачать векторы с бесплатной лицензией, легко гуглятся в интернете, но я докину пару ссылок:
Пример векторного интерфейса, который можно скачать с бесплатного векторного банка. Однако, я рекомендую выбирать элементы попроще 🙂
После того, как черновой интерфейс сделан, все отдельные элементы интерфейса нарезаются (сохраняются каждый на прозрачном фоне в своем размере), и отправляются программисту, который занимается версткой интерфейса.
3. Верстка интерфейса программистом
Версткой интерфейса занимается особенный программист, не лишенный стального терпения и нежного чувства прекрасного. Всем собранным воедино элементам он добавляет логику, а также прокидывает связи между интерфейсом и самим проектом (но этим может заниматься и другой программист, зависит от сложности проекта и размера команды). Когда прототип готов, его можно посмотреть в игре, оценить удобство и то, насколько хорошо он справляется со своей работой. Если обнаруживаются недочеты, или какие-то проблемы, то пункты 2-3 выполняются повторно, с учетом корректировок.
На самом деле, игра с прототипом позволит вам оценить не только интерфейс, но и саму игровую механику. Взаимодействуя с игрой через структурно финализированный интерфейс, вы можете вдруг понять, что самой механике чего-то не хватает, или она не выполняет своих функций и ей требуется какая-то доработка. В таком случае, после исправления механики, повторение пойдет с пункта 1.
4. Разработка визуальной части и стиля
Если начинает более или менее вырисовываться логика интерфейса и базовые окна уже могут быть утверждены после тестирования, можно заняться отрисовкой интерфейса на чистовую. Для этого, опираясь на жанр и сеттинг, нужно определиться с целым рядом вещей.
Цвет
Нужно понять, в какой цветовой гамме будет ваш интерфейс, какие сочетания цветов будут на нем использоваться. Какого цвета будут бэки окон, какого цвета заголовки, какого цвета плашки и прогресс бары. Как будут дифференцироваться по цвету кнопки, отвечающие за разный функционал.
Для примера, в Dishonored 2 основной цвет — это серо-черно-синие тона в сочетании с холодным бело-голубым.
Основные художественные элементы
Например, вы хотите, чтобы все ваши интерфейсы с художественной точки зрения имели какие-то определенные черты. Например, все они были обрамлены листвой. Или чтобы на них были чернильные пятна. Или чтобы они были покрыты полупрозрачными узорами. А может, вы, наоборот, хотите однотонного минимализма, или футуристично-космического стиля.
В Dishonored 2 основные художественные элементы — это полупрозрачные текстуры на плашках, вензельки, треугольники-осколки и пятна “крови”. Классическая викторианская готика с острыми и мрачными вкраплениями.
Основные формы
Какие формы будут преобладать в вашем интерфейсе? Круглые прогресс-бары и иконки, или может быть прямоугольники со скругленными углами? Будут элементы полупрозрачными? Объемными, или плоскими?
В Dishonored 2 наблюдается стройное единство форм. Почти все они — это четкие прямоугольники и квадраты с острыми краями в сочетании с ровными кругами.
На этом этапе дизайнер интерфейсов, зачастую вместе с художником (потому что в некоторых интерфейсах необходимы довольно сложные арты), начинают поиск визуального стиля для вашего UI. Начиная с одного окна, на примере которого происходит перебор вариантов и утверждение визуальной концепции. Затем потихоньку отрисовываются на чистовую все утвержденные и запрототипированные окна, и чем дальше, тем проще их создавать, потому что, напоминаю, во всех окнах используются одинаковые элементы. А как мы уже знаем, единообразие элементов — это одна из основных и непоколебимых догм разработки интерфейса.
Для того, чтобы интерфейсы было удобнее собирать, а также для защиты от ошибок, все повторяющиеся элементы нужно сохранять в одном месте, делая своеобразную картотеку фирменного стиля вашего интерфейса. Такая картотека называется UI Kit, и она вмещает в себя все кнопки, стрелки, плашки, подложки, бары, таймеры, бэки — все, что используется от интерфейса к интерфейсу и составляет его визуальный стиль. Естественно, в каждом игровом окне может быть что-то уникальное, что будет выделять его из остальных и отражать его яркую индивидуальную цель, но базовые элементы стиля все равно будут одинаковыми.
UI Kit представляет из себя что-то такое, только без текста и гораздо более масштабное и детальное. Как видите, даже на этом примере есть множество переиспользуемых элементов: кнопки в нажатом и спокойном состоянии, бары, скроллы, ячейки и многое другое.