Веб-дизайн — удалённая работа в Москве

Дизайн сайта. Сайт компании. Платформа: Figma. Количество страниц: 1. Здравствуйте # Техническое задание: комментарии под пинами Необходимо спроектировать блок комментариев под пинами социальной сети, включая основные пользовательские сценарии, системные состояния и адаптивные версии. ## 1. Основные макеты Нужно подготовить четыре основных сценария: 1. Пин с открытой панелью комментариев. 2. Пустое состояние — комментариев ещё нет. 3. Редактирование и удаление собственного комментария. 4. Экран уведомлений. ## 2. Комментарии В макетах необходимо предусмотреть: * список комментариев; * общее количество комментариев; * аватар и имя автора; * текст комментария; * дату или время публикации; * визуальное обозначение собственного комментария; * пометку «Изменено»; * состояние удалённого комментария; * состояние комментария от заблокированного пользователя; * длинный текст; * несколько строк; * активные ссылки; * отображение списка из 100 и более комментариев. ## 3. Публикация комментария Необходимо показать: * поле ввода; * кнопку «Отправить»; * неактивную кнопку при пустом поле; * ввод первого комментария; * состояние отправки; * успешную публикацию; * обновление списка и счётчика после публикации; * ошибку отправки; * повторную отправку; * сохранение введённого текста при сетевой ошибке. После успешной публикации новый комментарий должен сразу появляться в списке. ## 4. Редактирование и удаление Для собственного комментария необходимо предусмотреть: * меню действий; * переход в режим редактирования; * сохранение изменений; * отмену редактирования; * состояние сохранения; * ошибку сохранения; * повторную попытку; * удаление комментария; * подтверждение удаления; * состояние после удаления. Редактирование и удаление должны быть доступны только автору комментария. ## 5. Реакции Реакции не входят в первую версию MVP и проектируются на следующем этапе. В дальнейшем необходимо будет предусмотреть: * комментарий без реакций; * список доступных реакций; * выбранную пользователем реакцию; * добавление реакции; * удаление реакции; * отображение количества реакций. ## 6. Загрузка списка Для большого количества комментариев необходимо предусмотреть: * первоначальную загрузку; * загрузку следующей страницы; * кнопку «Показать ещё» или аналогичную механику; * состояние загрузки; * ошибку загрузки; * повторную попытку; * конец списка. Для MVP можно использовать кнопку «Показать ещё» вместо бесконечной прокрутки. ## 7. Пустые состояния Необходимо показать: * комментариев ещё нет; * предложение оставить первый комментарий; * состояние во время его публикации; * состояние сразу после публикации первого комментария. ## 8. Экран уведомлений Экран уведомлений необходимо спроектировать как самостоятельный раздел, связанный не только с комментариями, но и с другими событиями Terminal. На текущем этапе нужно предусмотреть: * пустой список уведомлений; * прочитанные уведомления; * непрочитанные уведомления; * уведомление о новом комментарии; * переход из уведомления к соответствующему пину и комментарию; * загрузку списка; * ошибку загрузки; * повторную попытку. Полноценную систему уведомлений можно вынести в отдельную итерацию после проектирования комментариев. ## 9. Системные состояния В макетах необходимо показать: * загрузку; * ошибку сети; * повторную загрузку; * отправку комментария; * ошибку отправки; * повторную отправку; * сохранение изменений; * ошибку сохранения; * удаление; * состояние недоступного или удалённого контента. ## 10. Адаптивные версии Необходимо подготовить отдельные макеты для: * desktop; * tablet; * mobile. Для каждого формата нужно показать: * пин с открытой панелью комментариев; * пустое состояние; * список комментариев; * поле ввода; * отправку комментария; * редактирование и удаление; * загрузку; * сетевые ошибки; * длинный текст; * большое количество комментариев. ### Desktop Необходимо определить: * расположение панели относительно пина; * ширину панели; * независимую прокрутку комментариев; * фиксированное или плавающее поле ввода. ### Tablet Нужно отдельно проработать: * поведение панели при ограниченной ширине; * переключение между пином и комментариями; * расположение меню действий; * работу экранной клавиатуры. ### Mobile Мобильная версия должна быть самостоятельным пользовательским сценарием, а не уменьшенной desktop-версией. Нужно определить: * комментарии открываются отдельным экраном или нижней панелью; * поведение поля ввода при открытии клавиатуры; * фиксацию кнопки «Отправить»; * прокрутку списка; * возврат к пину; * безопасные зоны экрана; * отображение длинных комментариев и ссылок; * доступ к редактированию и удалению. ## 11. Состав MVP В MVP входят: * просмотр списка комментариев; * счётчик комментариев; * пустое состояние; * публикация комментария; * загрузка и сетевые ошибки; * повторная отправка; * редактирование собственного комментария; * удаление собственного комментария; * загрузка следующей страницы; * длинный текст и ссылки; * состояния удалённого и изменённого комментария; * адаптивы для desktop, tablet и mobile. На следующий этап переносятся: * реакции; * вложенные ответы и ветки; * расширенная модерация; * сложная бесконечная пагинация; * дополнительные типы уведомлений; * расширенные сценарии заблокированных пользователей. ## Результат Дизайн должен покрывать полный пользовательский цикл: **открыть комментарии ? прочитать ? написать ? отправить ? увидеть результат ? отредактировать или удалить ? восстановиться после ошибки.**.