Наконец-то можно поработать :) До этого было больше планирования и продумывания. А теперь надо поработать не только мозгами, но и ручками. Этого очень часто не хватает. Не только продумывать, что и как делать и переходить к следующей задаче, а самому своими руками творить.
Цель:
Приступаем сразу к целям, так как идеи были до этого, а сейчас - план и работа.
- Подобрать цветовую гамму для клиента.
- Проработать стили элементов интерфейса.
- Продумать основные экраны приложения (полный список должен родиться в процессе подробной разработки экранов)
- Проработать базовую верстку интерфейса на основе основного экрана редактирования записи.
План:
- Подобрать инструмент для создания дизайна.
- Просмотреть тренды на дизайн интерфейса, а также отменить приложения, в которых самому нравиться UI и UX.
- На основе выявленных и понравившихся примеров - выявить и сформировать свой стиль оформления приложения.
- Собрать один экран как шаблон и эталон.
Реализация:
Инструмент:
В качестве инструмента для продумывания интерфейса я выбрал Figma. Мне уже приходилось с ним сталкиваться, и он показал себя довольно-таки удобным. Да, там есть свои неудобства и ограничения (по большей степени они связаны с бесплатной версией использования продукта), но это все не критично, и вполне можно использовать.
На всякий случай я пошерстил другие альтернативы, которые могли бы работать лучше с некоторыми вещами, которые вызывают неудобство в figma. Например, мне не понравилось, что она не работает нормально с элементами кнопок, чтобы отрабатывать их интерактивность (наведение и нажатие). Решение в ней убогое, нужно делать дубликаты экранов, в которых кнопка будет визуально выглядеть нажатой. Альтернативы оказались либо с таким же "грешком", либо платные.
Поэтому я решил не тратить много времени и использовать то, что есть, мне этого хватит. Допил не хватающих вещей будет осуществлен в процессе разработки.
Стиль:
Посмотрел на все приложения, которые я использую как в повседневной жизни, так и при работе. Постепенно отсеивал те, что хоть и полезные, но "некрасивые". К сожалению, в них попадают большинство мною любимых программ: Zbrush, Maya, Unity, Rider.
Вот в самой Figma дизайн понравился, также нравится как выглядит Postman. Будем считать, что их стиль является вдохновением, и ни коим образом слизывать и плагиатить я не собираюсь :)
Вдохновившись, можно начать разрабатывать свою стилистику. Начнем с цветовой гаммы. Мне больше нравится использовать темные темы, то ли моему глазу более спокойно, то ли из-за того, что я сам ночной житель...
Цвета мне нравятся не сильно пастельные, но и не ядреные, хотя это субъективное восприятие. Есть мнение, что все-таки я использую довольно-таки яркие цвета, возможно это вызвано тем, что в эпоху своей юности я работал над графикой для слот-машин (да, карму теперь приходится чистить) для одной очень известной в мире компании по их производству. А там цвета должны быть яркие и кричащие. Но надеюсь, что тут я сдержу свои порывы :)
Вот что у меня получилось по цветам.
Как при этом при всем будут выглядеть кнопки?
Шаблон экрана редактирования записи:
Ну и теперь необходим эталон экрана. Секции, вкладки, блоки информации.
Получился вот такой экран:
Верхнее меню представляет из себя вкладки редактируемых записей объектов. Самая первая, не закрывающаяся вкладка, это карта хронологии. Так можно будет быстро переключаться между объектами в рамках одного и того же периода времени.
Если объект не имеет запись на этот период, вкладка будет выделяться определенным цветом.
Если объект вообще не существует в данном периоде времени (еще не родился герой или уже умер, не образовалось сообщество или уже не функционирует), то вкладка будет неактивной.
Также, в верхнем меню находится кнопка для всевозможных настроек редактора.
Главный блок - это блок самой записи. Тут отображается текст с описанием выбранного периода и панель с пресетами для форматирования текста, не сложная, делать из этого редактора какой-нибудь Word нет желания.
Как одна из задач - использование Markdown разметки.
Следующий блок - это панель информации, она разделяется на несколько зон.
В верхней зоне отображается информация о текущим периоде с возможностью переключения как на следующий, так и между альтернативными периодами (например новый отсчет эры). Это важно, так как в разных окружениях или разных временных эрах могут быть свои правила отсчета времени.
Следующая зона для каждого типа объекта своя. На примере Окружения это:
- Информация о Циклах, по правилам которых работает окружение.
- Информация о населении - численность, какие поколения, расы, социальные группы, возраст и тд.
- Вкладка с информацией о находящихся в этом окружении других объектов, как то - сообществ и героев.
Детальная проработка этой информации будет на этапе работы над этой информацией. Но точно можно сказать, что там она будет как самостоятельно высчитываться, так и редактироваться (создание новых объектов или категорий, транзакции населения, а также внесение корректировки из-за событий).
В качестве задела на будущее: есть идея пристрастить к этому всему несложную нейросетку, которая по ранее найденным закономерностям будет подсказывать то, что может произойти и что поменяться.
Итого:
Пока как выглядит - мне нравится. Еще предстоит проработать каждый блок информации для всех типов объектов. Вследствие этой работы можно будет выявить и все остальные экраны и попапы редактирования и добавления различной информации. Ну и хотелось бы немного уже покодить :)
