Хочется рассказать о том, как мы делали дизайн для мобильной версии городского справочника ДубльГИС. Если вас не интересует дизайн, то пост все-равно может отказаться полезным тем, что на скриншотах можно увидеть функционал приложения, который будет реализован в будущем.

К нам обратилась компания ДубльГИС, которая занимается созданием справочников организаций с картами городов, с тем, чтобы мы разработали графический дизайн для новой мобильной версии программы 2ГИС. Главными требованиями к интерфейсу стали простота в освоении и корректное отображение на экранах с нестандартным разрешением. Программа будет работать на платформах Windows Mobile, Symbian и Android. На сенсорных экранах должна быть возможность управления как пальцами, так и стилусом. На устройствах без сенсорных экранов — с помощью аппаратных управляющих элементов (джойстик, кнопки).


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

Главный экран мобильного приложения



Все пиктограммы статусов для главного экрана

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


Справочник и карточка компании


Виртуальная клавиатура и отображение организаций на карте


Плоская и трёхмерная навигация



Пиктограммы указателей движения для навигации


Прокладка маршрута и готовые маршруты для общественного транспорта


Пиктограммы для транспорта, объектов и другие


Браузер дополненной реальности

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