Project

Profile

Help

HostedRedmine.com has moved to the Planio platform. All logins and passwords remained the same. All users will be able to login and use Redmine just as before. Read more...

Task #819177

open

Основы интерфейса и дизайна

Added by Олег Седухин over 4 years ago. Updated over 4 years ago.

Status:
Approved
Priority:
High
Assignee:
-
Start date:
Due date:
% Done:

100%

Estimated time:

Description

Приложение включает следующие основные элементы интерфейса
  1. карта
  2. окно настройек фильтрации
  3. окно просмотра записей

Десктопная версия

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

Окно просмотра записей расположено сбоку от карты (его можно закрыть, чтобы растянуть карту).
Окно с фильтрами при открытии располагается там же, где окно просмотра записей.

Другой возможный вариант:

Прочие варианты см. в истории.

Расположение элементов интерфейса в мобильной версии:
Либо карта на полный экран, либо настройки на полный экран, либо запись на полный экран.

В заштрихованной области должна быть кнопка настроек и кнопка скрытия боковой панели.
Варианты на выбор:



Мобильная версия

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


Files

img1.jpg (15.8 KB) img1.jpg Олег Седухин, 2019-05-31 02:20 PM
img4.jpg (16.6 KB) img4.jpg Олег Седухин, 2019-05-31 02:20 PM
img3.jpg (15.7 KB) img3.jpg Олег Седухин, 2019-05-31 02:20 PM
img2.jpg (15.6 KB) img2.jpg Олег Седухин, 2019-05-31 02:20 PM
img5.jpg (53.8 KB) img5.jpg Олег Седухин, 2019-05-31 02:23 PM
img7.jpg (12.3 KB) img7.jpg Олег Седухин, 2019-05-31 02:25 PM
img8.jpg (14.8 KB) img8.jpg Олег Седухин, 2019-05-31 02:25 PM
img6.jpg (13.1 KB) img6.jpg Олег Седухин, 2019-05-31 02:25 PM

Related issues

Related to oleg-redmine - Feature #819473: Интерфейс: картаApproved

Actions
Related to oleg-redmine - Feature #819481: Интерфейс: фильтрыApproved

Actions
Related to oleg-redmine - Feature #819483: Интерфейс: просмотрApproved

Actions
Actions #1

Updated by Олег Седухин over 4 years ago

  • Subject changed from Основные элементы интерфейса и дизайна to Основы интерфейса и дизайна

Приложение включает следующие основные элементы интерфейса

  1. карта
  2. окно настройек фильтрации
  3. окно просмотра записей

TODO:

  1. Расположение элементов интерфейса в десктопной версии
  2. Расположение элементов интерфейса в мобильной версии
Actions #2

Updated by Олег Седухин over 4 years ago

  • File Рисунок1.jpg added
  • File Рисунок2.jpg added
  • File Рисунок3.jpg added
  • File Рисунок4.jpg added
Actions #3

Updated by Олег Седухин over 4 years ago

  • File deleted (Рисунок1.jpg)
Actions #4

Updated by Олег Седухин over 4 years ago

  • File deleted (Рисунок2.jpg)
  • File deleted (Рисунок3.jpg)
  • File deleted (Рисунок4.jpg)
Actions #5

Updated by Олег Седухин over 4 years ago

  • File Рисунок4.jpg added
  • File Рисунок3.jpg added
  • File Рисунок2.jpg added
  • File Рисунок1.jpg added
Actions #6

Updated by Олег Седухин over 4 years ago

Ширина окна приложения несколько больше высоты. Карта, как главный элемент интерфейса, должна занимать большую часть места.
Рассмотрим различные варианты расположения настройки фильтрации и окна просмотра, чтобы выбрать наилучший.
а) окно просмотра всплывает по центру экрана при нажатии на маркер
б) окно просмотра показывается поверх окна приложения, используя возможности ВК (?w=wall-109125388_198929)
в) окно просмотра не поверх карты, а сбоку от нее
г) окно просмотра расположено поверх карты, но сбоку
д) окно просмотра расположено ниже карты




Actions #7

Updated by Олег Седухин over 4 years ago

  • File deleted (Рисунок4.jpg)
Actions #8

Updated by Олег Седухин over 4 years ago

  • File deleted (Рисунок3.jpg)
Actions #9

Updated by Олег Седухин over 4 years ago

  • File deleted (Рисунок2.jpg)
Actions #10

Updated by Олег Седухин over 4 years ago

  • File deleted (Рисунок1.jpg)
Actions #11

Updated by Олег Седухин over 4 years ago

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

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

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

Actions #12

Updated by Олег Седухин over 4 years ago

Рассмотрим варианты расположения окна с фильтрами:
а) сбоку на месте окна с записями
б) сверху в выпадающих списках
в) во отдельном окне
Варианты б, в неудобны тем, что при настройке фильтров загораживают карту и не дают увидеть изменения. Вариант б также дополнительно уменьшает пространство для карты, а когда пользователь не хочет менять фильтры, то верхняя панель отвлекает своим наличием. Поэтому выберем вариант а: окно с фильтрами на месте окна с записями.
При выборе стороны для окна с записями и фильтрами выберем правую сторону, потому что это интуитивно кажется более привычным и эстетичным. Слева обычно размешают только узкие боковые колонки, широкие лучше разместить справа.

Actions #13

Updated by Олег Седухин over 4 years ago

Добавив элементы управления, мы получаем следующий прототип интерфейса.

Actions #14

Updated by Олег Седухин over 4 years ago

2) Расположение элементов интерфейса в мобильной версии

Здесь все интуитивно понятно. Либо карта на полный экран, либо настройки на полный экран, либо запись на полный экран.

Actions #15

Updated by Олег Седухин over 4 years ago

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


Actions #16

Updated by Олег Седухин over 4 years ago

  • Description updated (diff)
  • Status changed from In Progress to Approved
  • % Done changed from 0 to 100
Actions #17

Updated by Олег Седухин over 4 years ago

  • Assignee deleted (Олег Седухин)
Actions #18

Updated by Олег Седухин over 4 years ago

  • Description updated (diff)
Actions #19

Updated by Олег Седухин over 4 years ago

Actions #20

Updated by Олег Седухин over 4 years ago

Actions #21

Updated by Олег Седухин over 4 years ago

Also available in: Atom PDF