Itsbeta App

wireframe

Вход в апп

Бейдж за вход

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

По нажатию на кнопку «Закрыть» переходим к главному экрану приложения.

То есть после первого входа у человека сразу же будет как минимум один бейдж.

Основной экран

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

Вид «Список». Переключение между видами—кнопка рядом с дисплеем.

Выбор категории/подкатегории.

Дисплей на навигационной панели отображает общее число бейдже й пользователя.

Основной экран

Модальное окно—подробная информация. По тапу на бейдж. Вид окна идентичен для обоих видов. В списке открывается по тапу на всю строку. В превью—по тапу на бейдж.

Профиль

Кнопка на навигационной панели—выход. Редактирование профиля не возможно, так как вся инфа из фб.

Работа вида «Превью»

Графическая схема расположения бейджей:

5 размеров бейджей. Каждый меньше предыдущего на треть.

7 значков разного размера заполняют квадратную область. Есть два вида областей, которые поочередно стыкуются(принцип орнамента).На картинке изображено два с половиной квадрата.

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

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