Как стать автором
Обновить
17
0
Ротфорт Михаил @Barka

Проектировщик интерфейсов

Отправить сообщение

Pathfinder: как мы делаем интерфейс для CRPG

Время на прочтение4 мин
Количество просмотров13K

image


Привет, Хабр! У нас в компании уже около года существует направление экспериментальных игровых разработок, и сегодня хотим рассказать об одной из них. Мы Owlcat Games, и в рамках кикстартерной компании разрабатываем игру Pathfinder: Kingmaker — это однопользовательская CRPG с изометрической графикой (привет, олдскульщики!). В этом посте расскажем о том, как мы делаем интерфейс для нашей игры.

Читать дальше →
Всего голосов 34: ↑34 и ↓0+34
Комментарии12

Правдивая ложь оптимистичных интерфейсов

Время на прочтение14 мин
Количество просмотров19K
Недавно опубликованная в Smashing Magazine статья Дениса Мишунова показалась нам очень интересной: она посвящена подходу, о котором многие до сих пор не задумываются, хотя он уже окружает нас в популярнейших сервисах. С разрешения автора и первоисточника мы решили перевести этот материал для хабрасообщества.

Три пользовательских интерфейса заходят в паб. Первый заказывает напиток, затем ещё несколько. Парой часов позже он просит счёт и покидает паб пьяным. Второй заказывает напиток, платит за него сразу же, заказывает ещё один, платит за него, продолжает в том же духе, и через пару часов покидает паб пьяным. А третий заходит в паб уже пьяным — он знает, как работают пабы, и достаточно эффективен, чтобы не терять время. Слышали об этом третьем? Его называют «оптимистичным UI».



Оптимистичный подход к UI не в том, чтобы смотреть на веб через розовые очки — по крайней мере, не только в этом.
Читать дальше →
Всего голосов 27: ↑26 и ↓1+25
Комментарии28

Кратко про оптимистичный UI. Оптимистичные интерфейсы в картинках

Время на прочтение4 мин
Количество просмотров19K
Не так давно на сайте Smashing Magazine появилась статья Дениса Мишунова, с переводом котрой можно ознакомиться на Хабре.

Вслед за этой статьей вышла еще одна – «Optimistic UIs in under 1000 words» за авторством Игоря Мандригина, в которой он затрагивает ту же тему, дополняя ее и иллюстрируя большим количеством примеров. Предлагаем вашему вниманию перевод.


Читать дальше →
Всего голосов 17: ↑17 и ↓0+17
Комментарии32

Впечатляющее многоточие (The Mighty Ellipsis)

Время на прочтение4 мин
Количество просмотров20K

Каким образом 3 маленькие точки могут сказать так много




Когда я говорю людям, что многоточие (…) это самый поразительный символ из всех, то большинство людей смотрят на меня как на сумасшедшего. Прежде чем вы тоже окрестите меня сумасшедшим, позвольте мне попытаться объяснить.


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


Давайте посмотрим на 5 различных путей, в которых многоточие было использовано в дизайне интерфейсов, сквозь годы их развития. К концу рассказа, вы, может быть, обретёте новое восприятие этого маленького, впечатляющего символа.

Читать дальше →
Всего голосов 60: ↑56 и ↓4+52
Комментарии22

Как я стала дизайнером за шесть месяцев

Время на прочтение4 мин
Количество просмотров305K
Я не заканчивала дизайнерских курсов и не училась дизайну в институте, но мне удалось пройти свой собственный курс обучения за 6 месяцев, замечу, что в процессе обучения я параллельно занималась полный день своей основной работой. Хотя я не думала, что уже готова устраиваться на новую работу дизайнером, все же мне сильно повезло и удалось найти неплохое место.
Читать дальше →
Всего голосов 90: ↑76 и ↓14+62
Комментарии50

Прокачка pointlight теней в Unity

Время на прочтение9 мин
Количество просмотров14K
image

Аналогов подобных теней для точечного источника света (Pointlight с эффектом размытия на расстоянии, имитирующий arealight) в компьютерных играх я почему-то до сих пор не встречал. Везде — либо полностью запечённые тени, либо «лампочки» вообще без теней, максимум — обыкновенная PCF-фильтрация. Хотя для направленного солнечного света уже давно применяются PCSS-тени (GTA5, например). В Unreal есть интересный алгоритм сродни рейтрейсингу, который рисует красивые arealight-тени, но только для статической геометрии (требуется генерация дополнительных объёмов). В Unity же всё совсем плохо — мягко фильтруется только солнечный свет, а «прожекторы» и «лампочки» в пролёте.
Читать дальше →
Всего голосов 30: ↑30 и ↓0+30
Комментарии22

Планирование юзабилити-тестирования. Часть 1

Время на прочтение15 мин
Количество просмотров31K


Привет, Хабр! Это Наталия Спрогис из UX-лаборатории Mail.Ru Group. Сегодня я расскажу о планировании и подготовке такого вида исследований, как юзабилити-тестирование. Статья рассчитана в первую очередь на неопытных исследователей и тех, кто собирается впервые проводить юзабилити-тестирование.

План тестирования — это с одной стороны набор заданий, вопросов и опросников, которые вы даете каждому респонденту, а с другой — методологическая база исследования: метрики и гипотезы, которые вы проверяете и фиксируете, выбранный инструментарий. Первая часть статьи посвящена как раз методологическим вопросам, лежащим в основе любого плана.
Читать дальше →
Всего голосов 22: ↑20 и ↓2+18
Комментарии0

Основы геймдизайна: 20 настольных игр. Часть пятая: Манчкин, Контрактный бридж, Ужас Аркхэма

Время на прочтение16 мин
Количество просмотров22K
В новой статье из серии «Основы геймдизайна» представлен подробный обзор самых популярных настольных игр, включая традиционные вроде шахмат и го, ролевые вроде «Зова Ктулху», европейские вроде «Колонизаторов» и многие другие, у которых есть чему поучиться.


Читать дальше →
Всего голосов 12: ↑11 и ↓1+10
Комментарии10

20 «НЕ» для веб-дизайнеров

Время на прочтение6 мин
Количество просмотров12K

У каждого дизайнера есть ряд правил, которыми он руководствуется в своей работе. И нередко памятки, составленные из таких правил от опытных дизайнеров служат хорошим подспорьем для начинающих. Некоторое количество таких правил у меня есть тоже. Правда, они касаются того, чего НЕ следует делать при изготовлении макета. Некоторые могут показаться банальными и очевидными, другие даже вызовут у кого-то недоумение. Но мне они очень помогают и, я надеюсь, какие-то из них так же будут полезны тем, кто занимается веб-дизайном или желает приобщиться к этой области разработки сайтов.
Читать дальше →
Всего голосов 196: ↑152 и ↓44+108
Комментарии178

Не важно, большие у тебя или маленькие. Главное, чтоб не маленькие. Фаршируем Material Design

Время на прочтение4 мин
Количество просмотров38K
image

Как в условиях дизайн-тирании Гугла и лояльных ему разработчиков обходить правила во благо пользователей.

В HeadHunter дизайн, прежде чем уйти в инпрогресс, проходит множество инстанций. Для начала необходимо доказать команде разработки, что решения взяты не с потолка, а ты не «художник, я так вижу». И иногда пользоваться защитой Рексоны 24/7 приходится в самом неожиданном месте.
Читать дальше →
Всего голосов 91: ↑87 и ↓4+83
Комментарии59

Техники захвата внимания пользователя — от фокусника и специалиста по вопросам дизайнерской этики в Google

Время на прочтение13 мин
Количество просмотров62K
Я эксперт в области того, как в технологиях используются слабые места нашей психики. Вот почему я проработал последние три года как специалист Google по этике в дизайне. Моя работа состояла в проектировании ПО таким образом, чтобы защитить умы миллиарда людей от «уловок».

Используя технологии, мы часто оптимистично относимся к тому, что они делают для нас. Но я хочу показать Вам, как можно добиться противоположного результата.

Как технология эксплуатирует слабые места нашего разума?


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

image
Это я, творящий «волшебство» при помощи ловкости рук, на дне рождения моей матери

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

И я хочу показать вам, как они это делают.
Читать дальше →
Всего голосов 58: ↑49 и ↓9+40
Комментарии60

58 признаков хорошего интерфейса

Время на прочтение16 мин
Количество просмотров380K
У хорошего интерфейса пользователя высокая конверсия и его просто использовать. То есть, он хорош и для бизнеса, и для использующих его людей. Вот список опробованных нами идей.

1 Один столбец вместо нескольких


Один столбец точнее отражает то, что вы хотите донести. Пользователи проходят сверху вниз по более предсказуемому пути. В дизайне с несколькими колонками есть риск отвлечения пользователя от основной задачи страницы.

image
Читать дальше →
Всего голосов 226: ↑182 и ↓44+138
Комментарии102

Поэтапное руководство по созданию иконок

Время на прочтение11 мин
Количество просмотров80K
image

Статья была опубликована на smashingmagazine автор статьи Scott Lewis.

Найти недорогие качественно сделанные иконки и векторные изображения не составляет труда – именно для этого есть такие веб-сайты, как Iconfinder (где работает автор настоящей статьи). В распоряжении дизайнеров тысячи наборов иконок премиум класса, и сотни наборов доступны для бесплатного скачивания.

В данной статье приводится руководство по дизайну векторных иконок, которое включает в себя шесть этапов. Мы рассмотрим эти этапы после того, как разберем основные принципы успешного дизайна иконок. Эти принципы хорошо известны и подробно рассмотрены в таких работах, как Руководство по дизайну иконок Джона Хикса, а также в руководстве от Google Материальный дизайн в разработке системных иконок. Шесть этапов, которые мы будем рассматривать в данной статье, должны восприниматься, как рекомендации, а не как догмы. Способность чувствовать, где нужно следовать правилам, а когда их лучше нарушить – это важное качество, которое должен развить в себе каждый хороший дизайнер, и мы наглядно это продемонстрируем.
Читать дальше →
Всего голосов 27: ↑25 и ↓2+23
Комментарии32

Важные уроки о user experience, полученные при разработке боевого HUD для игры Dreadnought

Время на прочтение14 мин
Количество просмотров13K

Предисловие


Пользовательские интерфейсы (UI) для игр с экшн-геймплеем, таких как Overwatch и Battlefield, уникальны тем, что обязаны предоставлять игроку всю критически важную игровую информацию, в то же время не отвлекая его от игрового процесса. В этой статье я опишу уроки о user experience, полученные мной при создании боевого HUD для игры Dreadnought. По большому счёту, это эссе подробно рассматривает способы модификации широко известных подходов к анализу паттернов user experience, таких как закон Фиттса, для их использования в HUD экшн-игр.
Читать дальше →
Всего голосов 18: ↑18 и ↓0+18
Комментарии12

Инструменты для создания прототипов: от макета, собранного на скорую руку, до полнофункциональных прототипов

Время на прочтение5 мин
Количество просмотров29K
Каждый дизайнер и разработчик знают, что детализированные макеты – это основа для любого цифрового проекта. Неважно, берете ли вы карандаш, чтобы быстро набросать эскиз на бумаге или же используете свои высокоточные наработки макета и начинаете писать код для первого интерактивного прототипа, инструменты по созданию прототипов помогут вам избежать бесчисленных проблем, бессонных ночей и превышения бюджета.

Каждый проект по-своему уникален. Особое значение имеет то, что инструменты для создания прототипов могут помочь вам в решении любой задачи.

Сегодня я перечислил несколько лучших инструментов, существующих в индустрии.

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

Читать дальше →
Всего голосов 20: ↑17 и ↓3+14
Комментарии8

Графический интерфейс пользователя как отражение реального мира: тени и подъем элементов

Время на прочтение5 мин
Количество просмотров19K
image

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

Читать дальше →
Всего голосов 22: ↑20 и ↓2+18
Комментарии26

Памятка UX / UI дизайнеру. 19 принципов построения интерфейсов

Время на прочтение3 мин
Количество просмотров196K
Мы продолжаем писать про проектирование сайтов и разработку интерфейсов. На этот раз выделили сразу 19 принципов построения интерфейсов. Эти принципы мы по крупицам собирали на протяжении последних 3х лет работы из разных книг, статей, исследований и, конечно, собственного опыта разработки интерфейсов.

Создание интерфейсов в проектировании больших сайтов – это самый объемный и один из самых важных этапов. Поэтому я отдельно решил выделить принципы и законы проектирования интерфейсов.

  • Принцип KISS. От англ. «keep it short and simple». Интерфейс должен быть простой и понятный, задачи должны решаться минимальным числом действий, все должно быть понятно и очевидно.
  • Не заставляйте думать. Нужно избегать сложных действий, которые заставляют пользователей думать.
  • Убираем очевидное. Не стоит показывать очевидные элементы интерфейса, нужно сосредоточиться только на действительно необходимых вещах.
  • Соотношение сигнал / шум. В каждом интерфейсе есть важные элементы (сигналы) и маловажные или даже бессмысленные для определенной части системы (шум), естественно, нужно концентрироваться на сигналах и избегать шума.
  • Проверенное лучше модного. Не стоит цепляться за моду и делать что-то только потому, что так делают другие, лучше отдать предпочтение проверенным элементам интерфейса.

Читать дальше →
Всего голосов 86: ↑59 и ↓27+32
Комментарии63

UX-дизайн кнопки: советы по созданию, типы и состояния

Время на прочтение6 мин
Количество просмотров160K
Ник Бабич разработчик, UX/UI специалист написал заметку в блоге UX Planet про UX-дизайн кнопки: советы по созданию, типы и состояния. Наша команда выполнила перевод данной статьи

image

Кнопки – это самый обычный, «повседневный» элемент дизайна взаимодействия. Именно поэтому на них нужно обратить особое внимание, ведь кнопки являются важнейшим элементом, обеспечивающим беспрепятственное взаимодействие в сети и приложениях. Мы обсудим типы и состояния кнопок — эту информацию нужно знать, чтобы создавать эффективные кнопки и совершенствовать опыт пользователя.

Советы по созданию кнопок


Кнопки должны выглядеть как кнопки

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

image
Читать дальше →
Всего голосов 13: ↑12 и ↓1+11
Комментарии19

Как мы обновили и переписали iOS-приложение банка «Открытие»: кейс

Время на прочтение14 мин
Количество просмотров24K
В жизненном цикле мобильного продукта рано или поздно наступает момент, когда нужно радикально обновиться. Потому что за время, прошедшее с запуска, выросли требования бизнеса и ожидания клиентов, изменились возможности платформы и средства разработки — и обновления становится невозможно реализовать путем “косметического ремонта”. В мире мобильных приложений жизненный цикл ПО составляет 2-3 года против 10-15 лет в обычном Enterprise-сегменте. Для нас с командой “Открытие Digital” момент радикального обновления мобильного банка настал в конце прошлого года.


Читать дальше →
Всего голосов 35: ↑32 и ↓3+29
Комментарии13

Информация

В рейтинге
Не участвует
Откуда
Москва, Москва и Московская обл., Россия
Работает в
Дата рождения
Зарегистрирован
Активность