Рубрика «интерфейс»

Здравствуйте, дорогие друзья!

Я Михаил Кравченко, дизайнер игровых интерфейсов.

Это статья о том как нарисовать кольцо Хавеля из игры Dark Souls 3. Перед вами результат, которого я добился примерно за полтора часа работы в фотошопе.

Дизайн интерфейса для игры, рисуем кольцо Хавеля из Dark Souls 3 - 1

Дизайнера интерфейсов периодически просят нарисовать несколько иконок для игры, например, когда художник в отпуске и что-то срочно понадобилось. Так что иметь такой навык в своем арсенале довольно полезно. Ниже я опишу процесс рисования иконки.
Читать полностью »

image

Представьте, что вы разрабатываете систему для исследования данных. Или приложение для управления энергией. Или дашборд для продавцов кукурузой. Может быть, вы разрабатываете что-то подобное прямо сейчас. Во всех упомянутых случаях люди будут ожидать таблиц. Не те модные из вдохновляющих сайтов, а выглядящие как Excel монстры с сотнями ячеек и сложным взаимодействием.

В этом случае дизайнер сталкивается со многими проблемами. Например, сопоставление дизайна с существующими фронт-енд фреймворками или борьба с «неудобными» данными, которые разрушают макет. Мы преодолеем эти проблемы с помощью следующих шагов: систематизируем потребности, станем атомарными и определим взаимодействие.
Читать полностью »

image

Эта статья — напминалка о том, что нужно перепроверить в дизайне вашего приложения, прежде чем отсылать его на AppStore/GooglePlay. Список поделен на тематические блоки:

  1. Вход / Регистрация
  2. Первый опыт
  3. Ежедневные взаимодействия
  4. Уведомления
  5. Параметры аккаунта
  6. Лента
  7. Поиск
  8. AppStore/GooglePlay

Читать полностью »

Профилирование Unity UI: кто портит мой батчинг? - 1

Вы потратили бесконечное количество времени на оптимизацию Unity UI. Но для того, чтобы вызвать торможения, достаточно небольшой модификации крошечного атрибута почти невидимого элемента UI Canvas. И когда такое случается, даже профилирование Unity UI не спасёт вас от снижения FPS. Вы готовы долгому исправлению ошибок?

Именно это и произошло в моём последнем проекте...

Я упорно работал над оптимизацией нескольких панелей UI в порте нашей игры на Oculus Quest. В основном задача сводилась к снижению уровня перерисовки (overdraw) до приемлемых величин, чтобы GPU мог справляться с самым главным — реальным 3D-рендерингом.

Так я работал над оптимизацией Unity UI не меньше месяца, и со временем добился чертовски неплохого прогресса.

На каком-то этапе UI стал настолько оптимизированным, что едва влиял на тайминги GPU. Реализованные мной техники затемнения непрозрачного UI компенсировали большую часть перерисовок, вызванных наслоением UI (элементами, отрисовываемыми поверх других элементов).

Итак, у меня получилась сверхоптимизированная гибридная система UI, которая по сути перекрывала отрисовываемые под ней 3D-элементы. Стало очень легко отбрасывать рендеринг этих перекрытых фрагментов.

Однако работа ещё была далека от завершения...

Когда я подключил Unity UI Profiler, моё внимание привлекла одна вещь.

Я увидел, что перегруженный ЦП тратит в каждом кадре более 1 мс на рендеринг UI. Это куча времени для платформы, которая даёт тебе бюджет в 13 мс на выполнение всей игры: физики, логики, 3D-рендеринга, ввода, VR и сетевого кода.

И ведь бывали случаи, когда UI «убивал» производительность ЦП ещё сильнее.Читать полностью »

«Чат-бот» по дешевке - 1

Про ботов и качество котла, в котором хочу, чтобы они горели, когда-нибудь напишу отдельную статью.

Сейчас не об этом.

Хочу поделиться идеей «чата» предельно эконом-класса, когда денег нет, а «оживить» обратную связь очень хочется.

Скажу сразу, что описанная идея пока не реализована, это такой зазор на будущее, посему, реакция пользователей, на данный момент, покрыта мраком.

Разрабатывался функционал под одну конкретную цель и под конкретную категорию пользователей, поэтому достаточно специфичен и подойдет не всем.

Кому подойдет, пользуйтесь, как говорится, на здоровье.
Читать полностью »

image

Несколько месяцев назад я закончил один из этапов своего профессионального пути многорукого Шивы в стартапе по разработке системы управления лабораториями неразрушающего контроля. Я расскажу как мне удалось задокументировать часть разработки связанную с подключением и генерацией документов в достаточном объеме для дальнейшего спокойного использования созданной системы в течении двух лет.
Читать полностью »

С момента выхода iOS 13 вышло бесчисленное количество обзоров, в которых уже рассказано о новых фишках системы для пользователей. Сегодня мы не будем подробно останавливаться на этом, но зато поговорим о том, что меняет iOS 13 для разработчика приложений.

image
Читать полностью »

В одном банке внедрили новую систему для рабочих мест операторов. Это для нас любой новый интерфейс — простой. А у некоторых людей даже сдвиг кнопки вызывает панику. Тут же новым было всё. В итоге работа встала. Как часто бывает, люди самостоятельно штудировать мануалы не хотели. Чаще звонили в техподдержку и просили коллег показать, на какие кнопочки нажимать. Да и создание инструкций отнимало массу времени.

Когда-то с такой же проблемой столкнулись и создатели сервиса, о котором мы сегодня расскажем. Они задумали перенести инструкции в форму интерактивных подсказок прямо в системе. Знаете, как когда вы первый раз запускаете приложение или игру, вам показывают: вот это — кнопка стрельбы, вот так — бегать, нажмите «присесть», чтобы присесть, и так далее.

Только универсально, чтобы можно было настраивать на любой интерфейс и делать это мог бы любой человек, даже далёкий от программирования.

Как сделать так, чтобы сотрудники сами учились работать в новых системах - 1

Вот так они это сделали. Читать полностью »

Автоверстка и стили в Unity: наш новый пайплайн и инструменты для UI - 1

Начну с главного: мы сделали удобный инструмент для верстки и изменили пайплайн работы. Теперь по порядку.

В мобильных играх много разных интерфейсов, включая HUD и огромное количество экранов для меты. UX-дизайнеры их проектируют, UI-дизайнеры отрисовывают, а чтобы всё это оказалось в движке существуют специально обученные люди — технические UI-дизайнеры. Ну или по-простому верстальщики. Частично их работа заключается в том, чтобы кропотливо из PSD-макета перенести все в префаб, чиселку за чиселкой. Еще они занимаются UI-анимациями, заливают спрайты, делают верстку адаптивной, расставляют ключи локализаций и так далее.

И мы поставили себе несколько целей:

  • ускорить работу верстальщика и избавить его от рутины;
  • оптимизировать взаимодействие между отделами UI-дизайна и разработки;
  • внести в UI единообразие: создать гайдлайны и сформировать на их основе Unity-ассеты;
  • обеспечить расширяемость и универсальность UI, реюзабельность ассетов, устойчивость к правкам, и легкую оптимизацию.

Вот как это происходило. Читать полностью »

User Inyerface — как не надо мучать пользователя - 1

Студия Bagaar собрала худшие элементы сайтов в одной онлайн-форме и предложила ее заполнить. Сможете пройти это испытание?
Читать полностью »