Хекстековая магия: создание визуального стиля

  • Hexagun

    Hexagun «Глобальный ньюсмейкер» Отдел редакции

    image.jpg
    Обновление клиента позволяет Риотам не только опробовать новые мощные технологии и искоренить древние ошибки. Они также могут переосмыслить и обновить внешний вид клиента, используя волшебную технологию под названием хекстек. Грядут крупные изменения, и сегодня мы расскажем вам, чем руководствовались Райот Геймс, создавая новый визуальный стиль. Не все, о чем сегодня пойдет речь, уже реализовано, но внедрение этих изменений в альфа-версии клиента — всего лишь вопрос времени.

    image (1).jpg
    СОЗДАНИЕ ВОЛШЕБСТВА

    Хекстек — один из видов технологии в мире League of Legends, сочетающий магию и механику. Он позволяет существам, лишенным магических способностей, использовать волшебную силу. Молот Джейса, изобретения Хеймердингера и перчатка Вай — примеры того, что можно создать с использованием этой технологии. Хекстек дал возможность этим чемпионам повлиять на мир, в котором они живут, поэтому нам стало интересно: а что, если бы клиент был чем-то вроде хекстекового инструмента, с помощью которого игроки взаимодействуют с игрой?

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


    При создании пользовательского интерфейса клиента мы столкнулись с уникальной задачей: нужно было создать основу в хекстековом стиле достаточно гибкой — чтобы можно было размещать кнопки и текст поверх ранее созданных фонов. Они должны были хорошо смотреться в сочетании как с картинками образов, выполненными в приглушенных тонах, вроде Духа леса Гекарима, так и с кричащими разноцветными фонами, такими как картинка Мини-босса Блицкранка. Риоты решили сделать элементы максимально ненавязчивыми — и немного позолотить их.

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


    РАБОТА НАД ОБЩИМ ВПЕЧАТЛЕНИЕМ

    Перемещаясь по разделам старого клиента, вы могли заметить, что страницы, выполняющие схожие функции, выглядят по-разному, хотя никаких объективных причин для этого нет (да, мы говорим о вас, руны и таланты). Во многом это связано с тем, что League of Legends вышла в 2009 году — многолетняя работа над улучшением игры постоянно приводила к противоестественным трансформациям клиента. Обновление клиента позволило сделать визуальный стиль игры единообразным.


    image (2).jpg
    Говоря дизайнерским языком, программисты Риотов смогли
    унифицировать похожие операции, используя единые шаблоны взаимодействия— короче, сделать интерфейс проще, убрав лишние кнопки. На картинке выше слева показана верхняя часть с элементами старого пользовательского интерфейса. Грамотно все спроектировав, мы уместили все функции кнопок слева на странице рун в две кнопки справа вверху — стрелку и «Сохранить» в обновленном клиенте. Старые кнопки лишились работы. Мы, конечно, желаем им удачи на новом месте, в каком-нибудь другом клиенте.

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

    Чем больше функционала добавляли Риоты в старый клиент, тем сложнее становилось придерживаться единообразия в дизайне. Взгляните на профиль игрока: он должен выглядеть, как страница из магической книги со свитками, но метафора рушится, как только игрок переходит в раздел с талантами или с историей игр. Излишне буквально подойдя к интеграции клиента в мир League of Legends, Риоты загнали себя в жесткие рамки.

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


    Риоты поняли, что для достижения визуального единообразия в обновленном клиенте не стоит понимать идею «хекстекового механизма» слишком буквально. Это не магическая машина, с которой вы взаимодействуете (в конце концов, это просто программа) — просто тема хекстекового сочетания волшебства и механики присутствует повсеместно. Именно это и является целью процесса проектирования: создать тему, которая хорошо подойдет и для активных элементов интерфейса, вроде окна проверки готовности, и для более спокойных функциональных разделов, таких как «Руны» и «Таланты».

    ЗАБОТА О БУДУЩЕМ

    Одна из главных технических задач при обновлении клиента — упростить введение возможностей, о которых просят игроки. Для этого нужно что-то вроде Сандалий подвижности. Их и пришлось создать.

    Но Риотам приходится избегать ловушек, которые помешают развиваться: например, слишком компактного дизайна, который усложнит введение новых функций. Они перерабатывают оформление клиента не только чтобы сделать его более красивым. Работе над League of Legends не видно ни конца ни края. Еще многие годы они будут внедрять в LoL новые возможности, так что дизайн не может быть всего лишь интуитивным и приятным — он должен быть еще и гибким.

     
    Последнее редактирование: 18 май 2016
    iFirelife и LexsDragon нравится это.
Комментарии
  1. Wani
    В последнем видео в конце просто крейгазм для глаз *_*
    TenrOwl, Riasquel, iFirelife и 4 другим нравится это.
  2. WarNet
    я аж залогинился чтоб плюсануть) сам несколько раз это видео пересматривал
    iFirelife нравится это.
  3. Danet
    Новость в кратце.
    ..поэтому нам стало интересно: а что, давайте запилим хекстек-клиент, вроде модно.
    iFirelife нравится это.
  4. AzureVortex
    Хекстек это типа манапанк?
    iFirelife нравится это.
  5. Миша Вороватов
    Рили уже задолбало это слово. Хекстек чамы, хекстек предметы, хекстек клиент аррр, дайте уже чё нить обычного :braum:.
    iFirelife нравится это.
  6. Danet
    :bombaleilo::bombaleilo::bombaleilo:
    iFirelife нравится это.
  7. MopT1
    а я посмотрел 1 раз, ибо знаю, что еще насмотрюсь :jake:
    iFirelife нравится это.
  8. DeepMeInside
    Главная задача всей этой писанины-запутать умы хомяков:rolf:
    iFirelife нравится это.
  9. DmiIn
    Рито в правильном направлении идут, и это хорошо (а еще первый арт с перчаткой или что это такое - прикольно выглядит).
    iFirelife нравится это.
  10. Сергей Кулешов
    Картинка справа от перчатки. Стилистика гномов из Dragon Age и их сооружения.
    iFirelife нравится это.
  11. barsuk101
    гномов из совершенно любого сеттинга, от толкиена до homm
    TenrOwl и iFirelife нравится это.
  12. LexsDragon
    Не совсем, в манапанке все гораздо более строже и детальнее, магия имеет определенное научное место и объяснение, тут же просто нечто среднее между механикой и магией без каких либо тонкостей.
    iFirelife нравится это.
  13. garmonia
    Нет. Это сооружение двемеров из древних свитков.
    iFirelife нравится это.
  14. DUMUDPOЛ
    Очень круто выглядит!