Разновидности интерфейсов
Нарисовать интерфейс игры можно разными форматами, от которых зависит опыт игрока. Существует четыре общих типа оформления UI:
диегетический – интерфейс встроен в историю игры, не приводит к отвлечению от геймплея. Иногда он является частью костюма персонажа, приобретает вид естественных элементов мира;
недиегетический – наиболее популярный тип, предполагающий сугубо функциональную составляющую интерфейса, его существование для конкретного игрока;
пространственный – в UI элементы не привязаны к дисплею, часто такая концепция перемежается с недиегетическим интерфейсом
Подобный подход использует Assassin’s Creed, которая использует подсвечиваемые маршруты для некоторых заданий, а информация о противниках размещается над ними, а не в общем меню;
мета – перед тем, как убрать интерфейс в играх, следует изучить визуальные эффекты, обязательно уделив внимание шаблонам
Например, окрашивание экрана в красный цвет будет означать получение урона и дополнительной информации об этом не потребуется
Важно, чтобы цветовые вспышки были понятными, например, если рамки экрана будут сигнализировать об уровне желтым цветом, это запутает пользователя.
Когда мы рисуем интерфейс игры, то придерживаемся общего правила для всех типов – UI должен быть интуитивным. Красный цвет, сигнализирующий об угрозе, воспринимаются лучше всего, поэтому его используют для критических ситуаций.
Элементы интерфейса структурируют по цвету. Например, в RPG существует множество заклинаний, выделяемых зеленым цветом (лечебные формулы), красным (атакующие умения), синим (дополнительные заклинания, например, поисковые). Чтобы улучшить ориентирование, размещайте наиболее важные блоки ближе к центру экрана, дополнительные – по краям, ведь взгляд геймера чаще всего сосредоточен именно на центральной части дисплея.
Рисование интерфейса игры производится с учетом множества других рекомендаций. Например, в HUD следует добавить не более семи элементов, а по возможности текст необходимо менять на графические иконки, которые легко считываются пользователями в динамическом игровом процессе и разных геймплейных ситуациях.
Если вы реализовали уникальные “фичи” в интерфейсе, которые выбиваются из общепринятой картины UI/UX-дизайна, не спешите от них отказываться. Проведите тестирование и получите фидбэк от игроков – элементы, которые устраивают всех пользователей и комфортны для них, не нужно трогать, даже стараясь следовать шаблонам.
Пару слов скажем и о тестировании – недостаточно просто дать игрокам альфа-версию игры. Необходимо максимально подсветить игровую область и обеспечить мощные взрывы на экране, посмотреть, как реагирует меню на погодные эффекты и освещение. Если все элементы сохранили читабельность и по-прежнему распознаются – это хороший UI, в первую очередь для конечного пользователя.
Примеры дизайна пользовательского интерфейса
MailChimp
При этом продвинутым пользователям предлагаются расширенные опции в так называемом меню по требованию (menu-on-demand):
Темплейты для рассылок представлены в виде схематических превью — пользователь может сделать выбор, даже не читая описание:
Работа с темплейтом осуществляется в редакторе, в котором используются иконки, стандартные для текстовых редакторов, а также перетягивающиеся блоки, предназначение которых сразу объясняется:
При этом здесь есть важные элементы для тестирования внешнего вида и сохранения шаблона. Особого внимания заслуживает сообщение «We’ll autosave every 20 seconds» — благодаря ему пользователь знает, что ему не нужно периодически сохранять шаблон, чтобы не потерять изменения.
Меню внизу страницы сообщает пользователю, на каком этапе создания рассылки он находиться и позволяет вернуться на нужные этап, если требуется внести какие-то изменения:
Если пользователь сделал ошибку при создании рассылки, во-первых, он увидит сообщение о том, что что-то пошло не так:
А во-вторых, ему будет предложено возможное решение, которое можно сразу же применить:
После того, как новый пользователь завершил некоторые шаги, в руководстве по началу работы появляются отметки Good job! и вычеркиваются выполненные действия:
MailChimp успешно применяет плоский дизайн пользовательского интерфейса.
Hootsuite
Популярная система для управления социальными сетями использует на своем лендинге фиксированное меню и предлагает сразу три яркие кнопки для регистрации с помощью соцсетей, которые привлекают внимание:
При этом, кликнув на ссылку «or create new account», пользователь не перейдет на новую страницу, а всего лишь увидит окошко с крестиком и всего тремя проиллюстрированными полями:
Настроить свою ученую запись и начать использовать Hootsuite мотивирует статистика о том, как сколько времени экономит его использование:
После регистрации и добавления социальных сетей пользователям предлагается ознакомиться с интерактивным руководством по началу работы:
Его можно пройти или пропустить (Skip tour):
В Hooutsuit меню слева с иконками раскрывается, открывая доступ к остальным разделам сервиса (например, настройкам и рекламе):
Поле публикации вверху используется для создания сообщений. Функции прикрепления файла, планирования публикации, добавления данных о расположении и приватности представлены в виде иконок:
При этом кнопка Save является сразу же и меню, и предлагает не только сохранение, но и несколько других опций:
Содержимое приложения организовывается в виде вкладок (прямо как браузере), которые можно добавлять, удалять и редактировать:
В паблишере пользователю предлагаются понятные подсказки по управлению публикациями:
My Energy
Сайт My Energy, который предназначен для учета расхода электроэнергии, газа и воды, отлично объясняет пользователям, для чего нужны те или иные данные и сразу показывает, что шагов по настройке профиля будет только три:
А после ввода адреса демонстрирует карту и, предвосхищая возможность ошибок картографического характера, предлагает нажать кнопку не That’s right, а Close enough!:
В зависимости от местоположения сайт сразу предлагает возможности по получению вычетов из налогов при использовании тех или иных технологий:
А вот советы по экономии и опросник по характеристикам жилья:
На скриншоте выше мы видим два меню — они оба фиксированные, благодаря чему при наличии большого количества данных пользователь все равно может быстро получить доступ к нужным функциям.
Нижнее меню отвечает за статистику по потреблению, сравнение показателей с другими жителями своего района, построение графиков и создание понятных отчетов:
Отдельно стоит упомянуть раздел с советами по экономии:
В нем можно отмечать советы, которых вы придерживаетесь, добавлять их в список дел и быстро просматривать по фильтрам или ориентируясь на показатели Saving Impact (сколько денег они помогают сэкономить) и Effort Required (сложность выполнения), которые представлены в виде градиентных кружочков:
Как показывают примеры выше, современный дизайн пользовательского интерфейса должен быть дружественным к новичкам, использовать уже известные паттерны и элементы, а также предоставлять объяснения и примеры там, где это необходимо.
Мы, студия stfalcon.com, разрабатываем MVP для стартапов, UI для сайтов и мобильных приложений и с удовольствием создадим современный дизайн пользовательского интерфейса, который будет радовать ваших клиентов.
Темный режим
Темная тема сохранит актуальность и в этом 2021 году. Вот несколько причин:
- на темном фоне проще выделить нужные дизайнерские элементы;
- ультрасовременный внешний вид;
- для устройств с OLED- / AMOLED-экранами существенно экономится ресурс аккумулятора;
- при плохой освещенности нагрузка на глаза меньше.
У темной темы большой потенциал развития как на мобильных, так и на десктопных устройствах. Если есть сомнения, можно добавить в приложение кнопку активации темного режима, а после исследовать, какой процент пользователей выбрал новую возможность, а сколько предпочло старый светлый дизайн.
medium.com
В Apple пошли дальше. В устройствах этой компании доступна настройка автоматической смены режимов. Можно указать свой вариант или выбрать типовое решение – например, включение темного режима ночью.
Что такое UX/UI-дизайн?
UX-дизайн (англ. user experience — пользовательский опыт) анализ информации о пользователях, их типичном поведении и психологии, и на основе этого анализа создание прототипа решения дизайна интерфейса. UX получил свое название в 1995 году от Дональда Нормана, который пришел в Apple в начале 90-х в качестве архитектора пользовательского опыта. Именно Дональд предложил термин «дизайн пользовательского опыта».
UI-дизайн (англ. user interface — пользовательский интерфейс) визуализация разработанного UX-дизайнером прототипа и создание визуально привлекательного интерфейса.
В последнее время эти понятия идут рука об руку, поэтому всё это вместе называют UX/UI-дизайном.
UX/UI-дизайн — это проектирование любых пользовательских интерфейсов, в которых удобство использования так же важно, как и внешний вид. Он применяется практически везде:
- разработка ПО для смартфонов и компьютеров
- создание мобильных приложений
- разработка программ и компьютерных игр
- создание сайтов и их мобильных версий.
Прямая обязанность UX/UI-дизайнера – это «продать» товар или услугу через интерфейс. Именно на основе работы UX/UI-дизайнера пользователь принимает решение: Нравится или не нравится. Купить или не купить.
UX/UI-дизайном может заниматься один универсальный сотрудник, а могут несколько. UX/UI-дизайнер в одном лице довольно устоявшаяся профессия, которая, кстати, весьма востребована.
Лаконичность.
Доходчивость интерфейса — замечательная штука, однако следует соблюдать осторожность, чтобы не попасть в ловушку перегруженности информацией. Очень просто добавлять описания и объяснения
Но каждый раз, когда Вы делаете это, Вы увеличиваете общую массу Вашего сайта. Интерфейс пухнет. Если добавить слишком много объяснений, то пользователь будет вынужден проводить много времени за чтением инструкций. Делайте Ваш интерфейс доходчивым, но сохраняйте лаконичность. Если есть возможность уложить объяснение в одно предложение вместо трех, сделайте это. Одновременное сохранение доходчивости и лаконичности — очень непростая задача. Но результат стоит усилий.
На указателе уровня громкости в OS X используется маленькие иконки, которые обозначают шкалу от низкого уровня к высокому.
Почему стоит позаботиться о UX?
Опыт взаимодействия играет важнейшую роль в формировании вашей бозы покупателей и пользователей. Люди воспринимают продукты эмоционально, и негативные эмоции, к сожалению, запоминаются лучше положительных.
Когда опыт взаимодействия с вашим продуктом оставляет плохое впечатление, то пользователь уйдет делать свои дела в другое место. Таким образом, плохой UX превращается в слабую основу вашего бизнеса. В то же время, наиболее эффективный UX вызывает интерес пользователя, а самое главное — его привязанность.
Хороший UX для хорошего бизнеса
В случае с бизнесом, UX – важнейший критерий выживания. Современный пользователь ожидает многого от вашего бренда, что означает, что ваш продукт должен предоставлять хороший опыт взаимодействия. UX дизайн – это основная инвестиция. Forrester Research сообщает, что каждый инвестированный в UX доллар в среднем приносит 100$ прибыли и окупаемость инвестиций в 9,900 процентов.
Спрос на рынке труда
UX дизайнеры очень востребованы. Согласно CNN Money, UX дизайн – одна из топ 50 вакансий в Соединенных Штатах. Средняя заработная плата UX дизайнера в США составляет 70000$ в год на начальных уровнях и 100000$ в год для опытных дизайнеров.
Тенденции найма в UX дизайне
Согласно Adobe survey большинство компаний нанимают UX дизайнеров для работы с веб и мобильными приложениями. Ожидается, что в течение 5 лет мобильная индустрия станет самой востребованной. В то время как desktop-to-mobile (кроссплатформенный дизайн) останется важным, практически половина компаний в следующе 3-5 лет планирует нанимать UX дизайнеров, кто сможет работать с виртуальной реальностью (VR).
Что такое User Experience (UX)?
UX расшифровывается как “user experience (опыт взаимодействия)”. Опыт взаимодействия – это то, как люди взаимодействуют с продуктом.
Вы сталкиваетесь с UX везде. По идее, все с чем вы контактируете, начиная с программного обеспечения и заканчивая кнопкой включения/выключения и ее формой, является примером элементов, создающих UX. Сумма ваших взаимодействий с продуктом становится опытом, который вы получаете используя этот продукт.
Все объекты вокруг нас имеют опыт взаимодействия – от тач-скрин киосков в метро до элитных кофе-машин, которые позволяют налить себе чашечку кофе для гурманов. Возможность использовать мобильный телефон или любой другой девайс на ходу улучшает UX, также как взаимодействие с автомобилем с помощью тач-скрина и голосовых команд делает управление автомобилем проще и удобнее.
Успех продукта основывается на том, как пользователи его воспримут. Используя продукт, люди обычно оценивают свой опыт взаимодействия следующим образом:
- Получил ли я пользу от этого продукта?
- Легко ли его использовать?
- Приятно ли его использовать?
То, станут ли люди постоянными и верными пользователями продукта напрямую зависит от ответа на эти вопросы.
Элементы UX
Дон Норман (Don Norman), соучредитель Nielsen Norman Group, был первым, кто ввел понятие “user experience” в 90-ые годы, сказав “Опыт взаимодействия охватывает все аспекты взаимодействия пользователя с компанией, ее услугами и продуктами”.
В этом видео Дон Норман делится своим мнением об истоках термина UX.
Подводя итог, UX – это практически все, что влияет на взаимодействие пользователя с продуктом.
Опыт взаимодействия основывается на ощущениях. Он выходит за рамки обычного человек-компьютер взаимодействия (human-computer interaction (HCI)) и уделяет особое внимание человеческой стороне. Люди оценивают взаимодействие как личный момент.
UX зависит от контекста, в котором используется продукт
Условия, при которых используется продукт, постоянно меняются. UX предполагает понимание более широкого контекста, в котором работают пользователи, и определение того, какую роль продукт играет в их жизни.
Опыт взаимодействия эволюционирует со временем. Опыт взаимодействия с вашим продуктом динамичен. Например, когда новый продукт попадает на рынок, или когда пользователь впервые испытывает продукт, он может быть дезориентирован и иметь смешанные чувства, потому что не знает, чего ему ожидать. Позже, когда пользователи станут знакомы с вашим продуктом и определят его пользу, их опыт взаимодействия будет позитивно расти и вызывать эмоциональную привязанность.
С технической точки зрения UX включает практические, эмпирические, аффективные, значимые и ценные аспекты взаимодействия. Соты Питера Морвилла (Peter Morville) – это инструмент, который поможет вам найти правильный баланс между различными областями эффективного UX.
- Usable: Продукт должен быть простым и легким в использовании. Он должен быть разработан так, чтобы быть знакомым и понятным.
- Useful: Продукт должен удовлетворять потребности. Если он этого не делает, что у пользователя нет причин его использовать.
- Desirable: Визуальная эстетика продукта должна быть привлекательна. Элементы дизайна могут вызывать позитивные эмоции и симпатию.
- Findable: Если у пользователя возникли проблемы с продуктом, то они должны быть в состоянии быстро найти решение.
- Accessible: Дизайн продукта должен быть таким, чтобы даже физически неполноценные люди могли иметь такой же опыт как и все остальные.
- Credible: Компания и ее продукты должны вызывать доверие.
Когда дизайн продукта сочетает в себе эти 6 элементов, тогда он будет ценен для пользователей, а максимизация ценности – основная цель UX.
3 ответа
Лучший ответ
Я не думаю, что для этого есть «стандарт». Это сильно зависит от вашего интерфейса. Я думаю, что использование элементов DOM лучше в большинстве случаев, поскольку вам не нужно создавать все компоненты пользовательского интерфейса, события и т. Д. Самостоятельно. Они могут быть стилизованы с помощью CSS для достижения желаемого вида. Если этого недостаточно, вам, вероятно, придется создавать элементы интерфейса самостоятельно, но вы должны убедиться, что это действительно необходимо. Вероятно, это огромная работа по созданию собственного решения.
2
jwueller
4 Янв 2011 в 23:34
Попробуйте это:
С Visual JS вы можете настроить страницу следующим образом:
Visual-JS многоплатформенный игровой движок Windows GUI — редактор исходного кода
Редактор OnPage — для дизайна
Вы получите:
* 99% холст 2д
Добавить новый объект
Создать компонент веб-камеры (нуи или обычный)
Создать соединение (базовое — прямоугольное)
Создать TextBox (виртуальная клавиатура для мобильных устройств)
Создать частицу
Atach игрок (основное движение)
MultipEER (Сеть) *
LocalStarage
Приложение, созданное на Visual JS, всегда работает во всех браузерах (мобильных / настольных). Работа в сети — webRTC — многопользовательская
API выглядят так:
Документация по интерфейсу прикладного программирования для Visual JS 0.5>
GAME_OBJECT является основным объектом в этой структуре.
Nikola Lukic
29 Сен 2016 в 18:31
Вы можете сделать это миллионами способов. Однако вы чувствуете себя наиболее комфортно, а ваши инженеры чувствуют себя наиболее уверенно.
Если вы ищете вдохновение или пример кода, вот один из способов, которым я это делаю. У меня есть функция, которая несколько раз рисует меню, пока не нажата кнопка. Когда кнопка нажата, игра загружается, старые прослушиватели событий щелчка по меню удаляются и добавляются новые прослушиватели событий щелчков по игре. Я также заканчиваю старый цикл прорисовки меню и начинаю новый цикл прорисовки игры. Вот некоторые отобранные фрагменты, чтобы дать вам представление о том, как это делается:
Таким образом, я могу отделить игровой рисунок и игровые события от рисования меню и событий меню. Это также дает мне возможность использовать элементы меню / анимации в моих меню, если я хочу, чтобы они выглядели очень красиво.
(Я опубликовал это на обсуждении близнецов Gamedev)
3
Simon Sarris
7 Фев 2012 в 20:54
В новую жизнь за 9 недель
И, несмотря на то, что я понятия не имела о том, что это за зверь такой — UX/UI, как и то, что я уже почти засыпала, я решила не откладывать на завтра заполнение формы обратной связи для того, чтобы подробнее узнать о курсе. Курс предлагался международной школой программирования и дизайна, работающей по программе bootcamp.
На следующее утро мне уже позвонили из школы, подробно ответили на все мои вопросы, и мы договорились о дате первого собеседования. А за ним и второго — уже технического. Три недели спустя, прочитав все, что я могла найти в интернете по поводу перспектив специалистов в области UX/UI дизайна, репутации школы и отзывов ее выпускников, а также пройдя 60-часовой подготовительный курс и уволившись с работы, я начала обучение на курсе по дизайну.
9 недель учебы по 12-16 часов, 4 выполненных практических проекта, 5 преподавателей — профессионалов в своей области — из Майами, Сан Франциско и Чикаго, 1 неделя программирования и защита финального проекта — и все, я была готова начать путь в своей новой карьере.
Дальше первые клиенты, захватывающие (и не очень) проекты, участие в акселераторах в качестве консультанта для стартапов, помощь тем, кто только заканчивал обучение, бесчисленное количество встреч и мастер-классов в области цифровых технологий, новые, интересные знакомства с самыми разными специалистами в этой области — это все стало не только и не столько работой, сколько образом жизни.
На данный момент я продолжаю работать и развиваться в качестве внештатного UX/UI дизайнера, а также преподаю в bootcamp, провожу мастер-классы и помогаю и другим сменить свою профессию на UX/UI.
Известные системы дизайна
3. Дизайн-система от Atlassian
Создавайте потрясающие корпоративные решения, используя комплексный язык дизайна Atlassian и стратегически спланированные компоненты. Его особенность заключается в том, что каждый раздел включает образец кода, который разработчики могут изучить и проанализировать.
4. Дизайн-система Pajamas от GitLab
GitLab — это проект с открытым исходным кодом, управляемый сообществом, в котором участвуют более 3000 человек. GitLab считает, что внося свой вклад, потребители становятся участниками, и скорость прогресса значительно ускоряется.
5. Дизайна-система Photon от Mozilla Firefox
Photon — это язык дизайна Firefox, который позволяет создавать современный, простой и привлекательный опыт на всех платформах, от мобильных и десктопных до телевизоров.
6. Паттерны Mailchimp
Библиотека паттернов MailChimp является результатом перехода компании на более гибкое, элегантное и удобное программное обеспечение.
Сочетание дизайна и кодинга создали систему, объединяющую продукты Hudl.
8. Thumbtack Thumbprint
Thumbprint — это живая система, которая использует консолидацию, стандартизацию и документацию для оптимизации проектирования и разработки.
9. Rizzo Style от Lonely Planet
Rizzo Styleguide от Lonely Planet
Rizzo был создан с упором на снижение сложности и повышение возможности повторного использования.
10. Язык дизайна Carbon от IBM
Carbon — это система разработки продуктов и опыта IBM с открытым исходным кодом. Рабочий код, инструменты и ресурсы проектирования, принципы пользовательского интерфейса и процветающее сообщество участников составляют систему, построенную на языке дизайна IBM.
11. Stacks от Stack Overflow
Stacks предоставляет вам все необходимое для последовательного и согласованного взаимодействия со Stack Overflow, включая продукт и электронную почту.
12. Пользовательский интерфейс Audi
Целью интерфейса Audi является разработка разнообразных решений и хорошо сбалансированного общесистемного пользовательского опыта, от приложения до автомобиля.
13. Global Experience Language (GEL) от BBC
Общий фреймворк дизайна BBC, GEL, позволяет нам создавать согласованный и приятный пользовательский опыт во всех цифровых сервисах.
14. Дизайн-система Canvas от HubSpot
Эта коллекция иллюстрирует компоненты дизайн-системы Hubspot, от цветов и типографики до функций на основе React, и инструментов визуализации данных.
15. Ant Design от Ant Finances
Для лучшего пользовательского опыта корпоративных приложений была создана дизайн-система со значениями определенности, осмысленности, роста и естественности.
Дизайна-система Polaris помогает всем продавцам Shopify сотрудничать, чтобы создать выдающийся опыт.
17. Дизайн-система Grommet от Hewlett Packard
Grommet предоставляет поддержку, компоненты и ресурсы для проектирования, необходимые для воплощения ваших идей в жизнь.
18. Styleguide от Marvel
Это руководство по стилю предназначено для использования в качестве централизованного репозитория компонентов интерфейса, руководств по бренду, активов бренда, фрагментов кода, руководств для разработчиков и многого другого.
19. Garden от Zendesk
Garden — это выбранная компанией коллекция элементов интерфейса. Zendesk обычно «выращивает» компоненты интерфейса для продуктов Zen в «саду».
20. Дизайн-система Lightning от Salesforce
Дизайн-система Lightning позволяет создавать успешные бизнес-процессы и настраиваемые приложения с использованием собственных паттернов и лучших практик Salesforce.
Какими навыками должен обладать UX-дизайнер?
Некоторые требования к UX-дизайнерам схожи с таковыми к UI-дизайнерам. Например, умение коммуницировать, работать в команде и воспринимать чужую позицию. Зачастую профессионалы в области UX работают в больших компаниях, поэтому им приходится анализировать чужую точку зрения и уметь выстраивать свои идеи на базе уже существующих решений.
UX-дизайнер обязан постоянно заниматься изучением клиентов сервиса/приложения и обладать здоровым любопытством, которое поможет строить пользовательский опыт, опираясь на привычки и пожелания людей. Также UX-дизайнеры обязаны критически мыслить и адекватно оценивать результат своей работы, чтобы во главе угла всегда оставался опыт пользователей, а не личные предпочтения и взгляды на интерфейс и программную логику.
На ранних этапах работы UX-дизайнер занимается разработкой прототипов интерфейса. По ходе разработки он использует аналитические навыки, чтобы создать удобное пространство для потенциальных пользователей. Он же проводит первые тесты получившегося продукта, чтобы убедиться в его удобстве и эффективности (умение поставить себя на место пользователя в этом случае играет значимую роль). Хорошим подспорьем станут навыки в области менеджмента и общения с людьми.
Задачи UX/UI-дизайнеров
Анализировать пользователей. Нужно изучить потенциальных клиентов: продукт создается для них. Специалисты узнают у заказчика задачу, подробности о пользователях: возраст, интересы, образование, сферу деятельности. Выясняют, какими еще продуктами они пользуются и почему. Для этого общаются не только с заказчиками, но и с будущими клиентами.
Эта задача подразумевает большое количество созвонов и личных встреч, опросов, уточнений задачи. Все данные собирают, делают выводы, чтобы получить целостную картину.
Продумывать интерфейсные решения. Дизайнер решает, что поместить на главную страницу, где и как расположить главные элементы сайта, что включить в верхнее/боковое меню.
На этом этапе составляют CJM — Customer Journey Map, дорожную карту клиента. Она наглядно показывает путь от входа на сайт до покупки. Помогает увидеть, с какими проблемами клиент может столкнуться при взаимодействии с сайтом. Задача UX/UI-дизайнера — предупредить эти проблемы.
Создавать прототипы. Это схема сайта или приложения с основными блоками. Она показывает, какой контент, иконки и кнопки будут располагаться на экране. Дизайнер составляет прототипы в программах, например в Figma.
Специалист использует метод прогрессивного джипега. То есть сначала продумывают структуру, а затем пошагово прорабатывают детали. Уже на этом этапе черновик показывают разработчикам, чтобы понять, все ли идеи воплотятся.
Проектировать визуальную часть. Дизайнер выбирает цветовую гамму и шрифты. У крупных компаний они уже определены и прописаны в брендбуке. В остальных случаях руководствуется выбором фокус-группы и/или использует свой опыт, тренды.
Еще он создает иконки, определяет, как будут выглядеть кнопки, поисковая строка и прочие элементы сайта. Иногда прорабатывает анимацию — например, продумывает, как увеличатся баннеры при наведении курсора.
Тестировать. Сверстанный сайт переносят на тестовый домен. Чтобы проверить продукт, набирают фокус-группу из целевой аудитории.
Потенциальные клиенты изучают сайт или приложение, выполняют обычные действия, например заполняют формы обратной связи, просматривают карточки товаров. Затем заполняют опросник: указывают, где было неудобно, какие элементы отвлекали и помогали, какие функции непонятны и прочее.
Уделите внимание кнопкам
Проверьте, что кнопки имеют чётко различимое состояние:
- нормальное состояние;
- изменение при наведении мыши;
- нажатое состояние;
- неактивная кнопка;
- кнопка в фокусе (используется при навигации с помощью клавиатуры).
Как правило, это показывается цветом, подложкой или обводкой. Разница должна быть заметной. Если активную кнопку обозначить синим цветом, а неактивную — таким же, но лишь на толику светлее, пользователь может не заметить разницы. Современная вёрстка позволяет экспериментировать не только с цветом, но и прозрачностью кнопки, делать свечение или отбрасывать тень.
Три состояния кнопки на сайте adidas.ru: нормальное состояние (верхнее), при наведении мыши (среднее) и нажатое (нижнее)Скриншот: adidas.ru
Популярная механика взаимодействия с кнопкой при заполнении формы — оставлять её неактивной, пока все поля не заполнены. Как только пользователь вносит данные в последнее поле, кнопка меняет цвет на яркий — теперь она кликабельна. Остальные состояния кнопки привязаны только к положению курсора и реакции на клик.
Если форма не заполнена, кнопка «Продолжить» в кинотеатре ivi.ru неактивна и полупрозрачнаСкриншот: ivi.ru
Несколько советов для создания интерфейсов
При дизайне интерфейса очень важно держать в голове общий стиль как интерфейса, так и игры, и не выходить за его пределы. Это может оказаться намного сложнее, чем кажется.
Интерфейс должен быть чистым и понятным
Нельзя перегружать его лишними кнопками и элементами. При возможности лучше сгруппировать лишнее в отдельных компонентах.
Старайтесь правильно расставлять акценты. Если вы хотите, чтобы игрок нажал на определенную кнопку вместо других предложенных, ее стоит сделать ярче и светлее, а остальные темнее и грязнее. Направляйте игрока, управляйте его эмоциями.
Не делайте слишком мелкий текст. Даже с отличным зрением, когда приходится вглядываться в написанное, играть становится не очень приятно. Более того, мелкий текст плохо воспринимается на подсознательном уровне, и мы часто его просто пропускаем.
Пернатый мультитач
Впрочем, прежде чем переходить к следующим этапам истории, нелишним было бы добраться до конца нынешнего. По мнению Джеффа Хана, мультитач в его современной форме — это хорошо, но недостаточно. А к мнению Хана в таких вопросах стоит прислушиваться. Он один из тех, кто как раз и придумал мультитач в его современной форме.
В самом начале 2006 года Джефф Хан продемонстрировал на конференции TED мультитач-интерфейс, который он разработал в Нью-йоркском университете. До появления iPhone или сенсорного стола Microsoft Surface оставалось больше года, поэтому презентация Хана стала едва ли не первой общеизвестной реализацией этой идеи.
Вскоре компания Perceptive Pixel, которую основал Хан, была приобретена Microsoft. Вопреки ожиданиям, компания влилась не в исследовательский центр Microsoft Research, занимающийся перспективными исследованиями, а в подразделение компании, разрабатывающее приложения Office. В этом есть определённая логика, ведь мультитач — уже не будущее.
Тем не менее, его потенциал пока раскрыт не до конца. Хан считает, что ещё остались важные направления развития, на которые стоит обратить внимания. Во-первых, большие и очень большие мультитач-дисплеи, с которыми можно взаимодействовать не одному, а нескольким пользователям сразу. Во-вторых, одновременное использование мультитача и пера.
Если с первым всё и так ясно, то второе заслуживает более подробного объяснения. По мнению Хана, человеческие пальцы — это всё же слишком грубый инструмент, подходящий далеко не для всего. Манипулировать контентом — да, лучше варианта, чем пальцы, тут не придумать. А вот для того, чтобы писать или рисовать, лучше найти кое-что поточнее — например, перо.
Отличие идеи Хана от прежних перьевых интерфейсов, не выдержавших конкуренции с тачскринами, заключается в том, что перо тут используется лишь в качестве пера. То же, что удобнее делать пальцами, — например, перемещать окна или нажимать на кнопки, — можно делать пальцами. Хан демонстрирует такой интерфейс на сенсорном столе: левой рукой он двигает и масштабирует документы, а пометки и надписи ставит на них пером, сжимаемым в правой руке. Процесс выглядит действительно очень естественно.
Планшеты, чувствительные и к прикосновению, и к перу, уже существуют (их выпускает, к примеру, Samsung), но они не совсем соответствуют тому, что нужно Хану. Во-первых, для двуручного использования они всё же мелковаты. Во-вторых, перо блокирует регистрацию касаний пальцами. В-третьих, любой современный перьевой интерфейс реагирует на перо на долю секунды медленнее, чем следовало бы. Задержка мизерна, но как ни странно, при небольшой привычке очень заметна и неприятна.
Впрочем, очевидно, что все эти проблемы при необходимости можно решить. Одновременное использование пера и мультитача — это сама простая из всех идей, о которых пойдёт речь в этой статье. С другими дело обстоит куда сложнее.
Революционная асимметрия и «неправильные» макеты
Принято считать, что человек стремится к симметрии. Но стоит оглянуться вокруг: повсюду асимметричный дизайн. Даже тело человека не идеально симметричное: например, длина рук немного отличается.
Асимметрию можно и нужно использовать в интерфейсах веб-приложений и мобильных программ. Причины использования зависят от общей дизайнерской стратегии. Например, асимметрия понадобится для достижения баланса и гармоничности или для создания преднамеренного ощущения «хаоса».
Если выбран первый вариант, асимметричный дизайн базируется на пробелах, четких линиях, контрастных цветах. Если нужно внести ощущение «случайности», стоит делать акцент на нетрадиционных цветовых сочетаниях, необычных композициях, «случайных» объектах.
Правильный выбор асимметрии, вопреки первоначальным ожиданиям, приводит к упорядочиванию контента. Он раздвигает границы восприятия, делает бренд уникальным.
wholydose.com
Почему древо навыков ВЕЗДЕ одно и то же
Обидно, когда вы только начинаете игру и совершенно не представляете, что вам нужно делать или куда идти. Хотите верьте, хотите нет, но одной из задач UI-дизайнера и есть разгребание этого беспорядка (если точнее, UI/UX-дизайнера).
Но как объяснить игрокам, куда они должны идти или что им делать, причем так, чтобы не говорить об этом прямо в лоб? Ну, вы можете дать им подсказку… с помощью «путей развития».
Вы можете заметить, что древо навыков состоит из ветвей или, точнее, путей, и благодаря этим путям игрок подсознательно представляет свое место в игре. И графическое представление всех способностей, потенциально доступных для разблокировки, дает игрокам подсказку о том, как им справиться с начатой игрой.
Например, вы в перспективе можете открыть навык, который позволит вашему герою взбираться на покрытые виноградной лозой стены. И вы понимаете: «О, значит, виноградные лозы не просто для красивой картинки»
А потом, уже при наличии навыка, будете думать: «Ну, наверное, все, что происходит за этими покрытыми виноградной лозой областями, должно быть действительно важно – и это станет моей целью»
И вуаля – внезапно, просто изучая путь развития и древо навыков, игрок постепенно начинает вникать в повествование.
