Хочется рассказать о том, как мы делали дизайн для мобильной версии городского справочника ДубльГИС. Если вас не интересует дизайн, то пост все-равно может отказаться полезным тем, что на скриншотах можно увидеть функционал приложения, который будет реализован в будущем.
К нам обратилась компания ДубльГИС, которая занимается созданием справочников организаций с картами городов, с тем, чтобы мы разработали графический дизайн для новой мобильной версии программы 2ГИС. Главными требованиями к интерфейсу стали простота в освоении и корректное отображение на экранах с нестандартным разрешением. Программа будет работать на платформах Windows Mobile, Symbian и Android. На сенсорных экранах должна быть возможность управления как пальцами, так и стилусом. На устройствах без сенсорных экранов — с помощью аппаратных управляющих элементов (джойстик, кнопки).
Мы начали с главного экрана, который позволяет переходить к основным функциям программы. Равнение было взято на яркий эмоциональный дизайн, но с учетом требований руководства по фирменному стилю ДубльГИС.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/489/529/4e6/4895294e6ce3d2cb1fc36f655ccdcb0a.jpg)
Главный экран мобильного приложения
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/5e7/bdd/71c/5e7bdd71c2b9f898be4d99f2fd4c4dcf.png)
Все пиктограммы статусов для главного экрана
Далее мы стали делать огромное множество «внутренних» экранов. Приложение хоть и мобильное, но имеет большие функциональные возможности. По ходу мы рисовали всякие кнопки, иконки, указатели и прочую графику.
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/c21/9ce/051/c219ce051b2d3fb407d55cb5a5362c91.png)
Справочник и карточка компании
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/637/e0b/383/637e0b38311cf326dbe9aee54035c533.png)
Виртуальная клавиатура и отображение организаций на карте
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/19d/659/1e7/19d6591e77f7f4fcaaeaf5dc0304d8db.png)
Плоская и трёхмерная навигация
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/d43/9f8/7ef/d439f87ef100ecf66e56341edbfbcc40.jpg)
Пиктограммы указателей движения для навигации
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/99f/d4a/e48/99fd4ae48f454dac02813aa1fb9b55d0.png)
Прокладка маршрута и готовые маршруты для общественного транспорта
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/960/7f7/924/9607f79241b29b8548af9a271e35c400.jpg)
Пиктограммы для транспорта, объектов и другие
![image](https://habrastorage.org/r/w1560/getpro/habr/post_images/55b/a7a/169/55ba7a16903a0328fc2a54e4ece2b552.png)
Браузер дополненной реальности
Каждый экран был нарисован для двух разрешений экранов, чтобы графика была красивой и чёткой на любом телефоне.
![image](https://habrastorage.org/r/w780q1/getpro/habr/post_images/502/e93/27e/502e9327e7f5e56105df88d6e377acbc.jpg)
![image](https://habrastorage.org/getpro/habr/post_images/639/bc9/b76/639bc9b763d6ad61acd447d731912820.jpg)
Мы начали с главного экрана, который позволяет переходить к основным функциям программы. Равнение было взято на яркий эмоциональный дизайн, но с учетом требований руководства по фирменному стилю ДубльГИС.
![image](https://habrastorage.org/getpro/habr/post_images/489/529/4e6/4895294e6ce3d2cb1fc36f655ccdcb0a.jpg)
Главный экран мобильного приложения
![image](https://habrastorage.org/getpro/habr/post_images/5e7/bdd/71c/5e7bdd71c2b9f898be4d99f2fd4c4dcf.png)
Все пиктограммы статусов для главного экрана
Далее мы стали делать огромное множество «внутренних» экранов. Приложение хоть и мобильное, но имеет большие функциональные возможности. По ходу мы рисовали всякие кнопки, иконки, указатели и прочую графику.
![image](https://habrastorage.org/getpro/habr/post_images/c21/9ce/051/c219ce051b2d3fb407d55cb5a5362c91.png)
Справочник и карточка компании
![image](https://habrastorage.org/getpro/habr/post_images/637/e0b/383/637e0b38311cf326dbe9aee54035c533.png)
Виртуальная клавиатура и отображение организаций на карте
![image](https://habrastorage.org/getpro/habr/post_images/19d/659/1e7/19d6591e77f7f4fcaaeaf5dc0304d8db.png)
Плоская и трёхмерная навигация
![image](https://habrastorage.org/getpro/habr/post_images/d43/9f8/7ef/d439f87ef100ecf66e56341edbfbcc40.jpg)
Пиктограммы указателей движения для навигации
![image](https://habrastorage.org/getpro/habr/post_images/99f/d4a/e48/99fd4ae48f454dac02813aa1fb9b55d0.png)
Прокладка маршрута и готовые маршруты для общественного транспорта
![image](https://habrastorage.org/getpro/habr/post_images/960/7f7/924/9607f79241b29b8548af9a271e35c400.jpg)
Пиктограммы для транспорта, объектов и другие
![image](https://habrastorage.org/getpro/habr/post_images/55b/a7a/169/55ba7a16903a0328fc2a54e4ece2b552.png)
Браузер дополненной реальности
Каждый экран был нарисован для двух разрешений экранов, чтобы графика была красивой и чёткой на любом телефоне.
![image](https://habrastorage.org/getpro/habr/post_images/502/e93/27e/502e9327e7f5e56105df88d6e377acbc.jpg)