Как создавался интерфейс Булата: интервью с разработчиками

Детектор дронов «Булат» — это пример того, как простота и многофункциональность слились в качественное устройство. Интерфейс обнаружителя стал плодом большого труда и внимания к деталям, которые могут показаться незначительными, но важными в работе детектора. В этом интервью главный дизайнер и ведущий программист компании 3mx рассказали о создании интерфейса «Булата», какой стиль и подход были выбраны, и как они пришли к тому результату, который видят пользователи 4-й версии дрон-детектора.

Программист: Первое: мы ограничены тем, какой у нас дисплей. У нас он своеобразный. Были готовый девайс, интерфейс, который нужно нарисовать под конкретный экранчик. В первом и втором «Булате» были только «Поиск БПЛА» и иконка аккумулятора. Соответственно, нам нужно было эту преемственность сохранить.

У нас стояла задача, чтобы мы могли через меню что-то делать, на дисплее отображался серийник [серийный номер], «Поиск БПЛА», батарейка, иконки — наглядно показать пользователю всю основную информацию. И я просто сел и нарисовал прототип, который позже был передан дизайнеру на разработку. У меня был большой опыт работы с пиксельными дисплеями ранее, поэтому я примерно представлял, как будет лучше и удобнее сделать.

Дизайнер: Из-за технических особенностей экрана — 128 на 64 пикселя. Тут просто по-другому не нарисовать, и в принципе только квадратики можно использовать. Нам было важно избегать мелких деталей. Если иконки или шрифты слишком детализированы, они становятся нечитабельными, так как сливаются в какую-то кашу.

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

АКБ

Дизайнер: Раньше была другая батарейка. Версия программиста — квадратная, а затем слегка измененная и нарисованная мной. Идея пришла от шефа. Он хотел иконку аккумулятора как в телефоне Siemens. Она более выпуклая и объемная. Мы ее продумали, отрисовали. Иконка красивая, но не вписалась в интерфейс «Булата».

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

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

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

Индикации

Дизайнер: У нас также было несколько вариантов иконок вибрации. Вначале мы нарисовали волны, как рябь на воде, но иконка выбивалась и не сразу можно было понять, что она отвечает за виброрежим. Делали разные варианты, и в итоге в продакшн ушла иконка с мини-Булатом. Она оказалась наиболее понятна и отлично вписалась в стиль интерфейса.

Серийный номер

Дизайнер: С серийником тоже не сразу все срослось. Сначала мы хотели латиницей прописать SN [серийный номер], 6 цифр после и версию прошивки устройства. Но потом появилась идея интегрировать «Булаты» в систему учета. Для этой системы у детектора должен был быть уникальный серийный номер длиной 10 символов, что мы в итоге и сделали.

Дизайнер: Я рисовала и продолжаю рисовать в программе Aseprite. Это графический редактор для создания 2D-анимаций, спрайтов, логотипов и изображений в пиксельном стиле.

Выбрали эту программу, потому что в ней можно нарисовать пиксельный экран конкретного размера, как нам нужно было попиксельно. Вот в ней можно редактировать изображения и анимации по слоям или покадрово. И все иллюстрации экспортируются в любом удобном формате, а в нашем случае растровым изображением [BMP]. Я передаю все картинки программисту, он что-то преобразовывает, и происходит магия — все попадает в прошивку «Булата».

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

Программист: У меня другая программа — BitmapEdit. Тут все по хардкору: каждый пиксель рисуешь отдельно и точно так же ставишь или стираешь его. В других невозможно сделать то, что нужно под мои задачи. Дисплей «Булата» 64х64 и, учитывая вытянутость пикселей по вертикали, все картинки уже в самом устройстве при отрисовке растягиваются по горизонтали в два раза, что дает разрешение экрана 128*64, но изображение при этом не вытянутое.

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

Дизайнер: Мы как-то сидели в переговорке, это было еще до третьего «Булата», и шеф показывал нам разные варианты загрузки. В том числе Сonnecting People от Nokia, из игры танчики, еще какие-то, уже не вспомню. И сказал, что хочет такое же красивое и эстетичное. Собственно, это было нашим вдохновением.

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

Анимированная заставка для «Булатов», которые шли людям напрямую от Минобороны РФ, была доработана — перед основной анимацией загрузки появлялась картинка с данными детектора и фразой «Министерство обороны РФ».

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

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

Ограничения были в цветовом диапазоне для подсветки, так как дисплей у нас со встроенными светодиодами RGB (красный, зеленый, синий). Соответственно, красный стал цветом тревоги, а зеленый и синий — привычным всем экраном с подсветкой.

В четвертом «Булате» немного другой цвет, потому что там другие резисторы. Красный светил сильнее и уходил в розовый, и пришлось программно подровнять оттенок.

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

Программист: Все постепенно шло, потому что все равно что-то постоянно обновлялось, добавлялось. Ходили друг к другу в офисе, спрашивали, показывали, собирали небольшую статистику по внешнему виду, что работает и что нужно доработать.

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

Программист: Как уже говорили, решили оставить преемственность. Максимально просто, наверное, уже не нарисовать. В какой-то момент поступила задача добавить настройку чувствительности для каждого дрона, чтобы «Булат» выдавал тревогу только при достижении беспилотником определенной высоты уровня сигнала. Эту настройку добавили, но узнать об измененной чувствительности пользователь мог только в меню. Он себе установит там четыре палки этой чувствительности и «Булат» увидит дрон, когда тот уже скидывает на него гранату. Если есть настройки, то мы должны обязательно показать это пользователю. Поэтому к заставке добавили анимацию порога RSSI, но она занимала много времени. Люди были недовольны, и мы решили эту информацию перенести в иконку на главном экране, заодно сделав иконки других настроек.

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