Мобильное приложение

Дизайн приложения для морской коллекции

Abyssal Log связывает коллекцию морских образцов с миссиями погружений. Для каждой неизвестной записи указаны задача и оставшийся прогресс, необходимый для её открытия.

OpenDesignДизайн и производство
Официальный
Глубоководные открытия и коллекционирование4 экранов
Дизайн приложения для морской коллекции: текущий образец и карточка открытия Дизайн приложения для морской коллекции: миссии погружений и условия открытия
Текущий образец и карточка открытия · Миссии погружений и условия открытия

LLM Arena, сентябрь 2026

Заметки к кейсу
Модель
Claude Opus 5
Задача дизайна
Приложение для коллекционирования карточек глубоководных существ
Результат
Мобильное приложение

Для каких задач

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

Ключевые особенности

  • Избранный образецИзображение ведёт к сведениям о редкости, глубине обнаружения и времени наблюдения.
  • Два способа просмотраОдна и та же коллекция упорядочивается по океаническому региону и редкости.
  • Измеримые миссии погруженийУдержания позиции, проходы и образцы делают прогресс каждой задачи конкретным.
  • Явные условия открытияВ неизвестных записях указаны миссия и работа, которую ещё предстоит выполнить.

Приложение для морской коллекции, объясняющее каждое открытие

Abyssal Log начинается с избранного образца, а не со стены небольших карточек. В зафиксированном состоянии Atolla Jelly отображается над своим научным названием, редкостью, глубиной обнаружения и отметкой времени первого наблюдения. Под этими сведениями расположены View record и Dive. Одно действие позволяет подробнее изучить текущую запись, а другое ведёт к заданиям, выполнение которых расширяет коллекцию.

В заголовке указано, что зарегистрировано 11 / 18, а расположенная ниже коллекция включает как обнаруженных существ, так и записи Unknown. Таким образом, страница показывает размер коллекции ещё до её завершения. Карточки неизвестных объектов — не просто декоративные силуэты: на них указаны миссия и оставшееся условие, благодаря чему незавершённая запись выполняет практическую функцию.

На полном экране избранной Atolla Jelly показаны изображение образца, редкость, глубина обнаружения, время наблюдения, а также действия для просмотра записи и погружения.
На полном экране избранной Atolla Jelly показаны изображение образца, редкость, глубина обнаружения, время наблюдения, а также действия для просмотра записи и погружения.

Отделите данные об открытии от справочной информации

Карточка избранного образца и полная запись относятся к одному и тому же объекту, но отвечают на разные вопросы. Карточка кратко описывает это открытие. Запись добавляет обозначение аппарата, диапазон глубин, размер и описание. Это различие особенно полезно при проектировании полевого определителя, где не следует путать отдельное наблюдение с общей характеристикой вида.

Разные роли полей в записи об Atolla Jelly
ПолеЗафиксированный примерРоль в интерфейсе
Глубина обнаружения1 560 мОписывает демонстрационное наблюдение, связанное с этой записью.
Диапазон глубин1 000–4 000 мПредоставляет более широкий справочный диапазон, а не глубину этого конкретного открытия.
Первое наблюдение11 авг. 2025 · 21:33Привязывает демонстрационную запись ко времени.
АппаратROV VentanaДобавляет контекст к демонстрационному наблюдению, не меняя идентичность образца.
РазмерКолокол прибл. 15 смПредоставляет отдельный вид справочной информации с явно указанной единицей измерения.

Превратите неизвестный образец в конкретную миссию

Экран Expeditions содержит семь задач с разными единицами прогресса. Для Twilight zone station hold уже достигнуто 3 / 3 удержания позиции, и доступно действие Complete and unlock. Для Large cephalopod sonar trace выполнено 5 / 6 проходов, и доступно действие Log a dive · +1. Различие между этими действиями показывает следующий шаг ещё до нажатия.

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

Полный экран миссий противопоставляет задачу с выполненным условием задачам, которые ещё выполняются, сохраняя единицу каждой миссии и запись, которую она открывает.
Полный экран миссий противопоставляет задачу с выполненным условием задачам, которые ещё выполняются, сохраняя единицу каждой миссии и запись, которую она открывает.

Свяжите заблокированную карточку с её условием

В Unknown · 004 указано Twilight zone station hold и написано 0 holds to go. Затем экран миссий предлагает Complete and unlock. Связь этих подписей помогает посетителю понять, почему карточка всё ещё может оставаться неизвестной, хотя измерение завершено: финальное действие открытия ещё не выполнено.

Используйте разные действия для разных состояний

Log a dive · +1 обозначает постепенное продвижение, а Complete and unlock — переход объекта в коллекцию. Сохранять различие между этими подписями полезнее, чем показывать одну и ту же кнопку на каждой карточке и заставлять посетителя самостоятельно выяснять, что она делает.

Предоставьте отдельные элементы управления для просмотра

Фильтры по океаническому региону и редкости относятся к коллекции образцов, а прогресс задач — к Expeditions. Это отделяет поиск существующей записи от работы над получением новой. При адаптации следует сохранить это различие при добавлении поиска, пустых результатов или более длинного списка миссий.

Что демонстрирует этот прототип морского приложения

Abyssal Log — локальный прототип коллекции и миссий. В исходном материале отметки времени наблюдений и аппараты прямо обозначены как демонстрационные записи. Биологические сведения, уровни редкости и значения глубины не являются независимо проверенными научными справочными данными. В изолированной предварительной версии нет действующей ленты экспедиций или облачной учётной записи. Предоставленные изображения сохранены для локальной проверки; перед их публичным использованием необходимо отдельно проверить разрешения на распространение.

Как создать дизайн приложения для морской коллекции в OpenDesign

  1. Скачайте и установите OpenDesign

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

    Скачать OpenDesign
  2. Определите связь между образцом и миссией

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

    Рекомендуемый промпт

    Создайте дизайн приложения для морской коллекции с восемнадцатью демонстрационными образцами, одиннадцать из которых изначально зарегистрированы. Используйте тёмный мобильный интерфейс с бирюзовым акцентом и крупной карточкой избранного образца. Покажите обиходное название, научное название, редкость, глубину обнаружения и время первого наблюдения, а также действия View Record и Dive. Ниже добавьте фильтры по региону и редкости, сохранив видимость неизвестных записей. Для каждой неизвестной записи должны быть указаны миссия и оставшееся условие, необходимое для её открытия. На экране Expeditions нужны разные единицы прогресса, например удержания позиции, проходы и образцы. Добавьте одну задачу, условие которой выполнено, но запись по которой ещё не получена. Для этого состояния используйте Complete and Unlock, а для незавершённых задач — Log a Dive. В подробном представлении образца отделите глубину обнаружения от справочного диапазона глубин. Обозначьте наблюдения и прогресс миссий как вымышленные демонстрационные данные, не связанные с действующим научным сервисом или облачной учётной записью.

  3. Проверьте состояния готовности, незавершённости и получения

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

  4. Проверьте читаемость записи на телефоне

    Используйте длинное научное название и трёхзначное целевое значение прогресса. Сохраните читаемость подписей, единиц и действий, не перекрывая их нижней навигацией. Изображение образца должно помещаться в рамке без обрезки объекта, а более длинная подробная запись — прокручиваться.

  5. Экспортируйте дизайн и получите ссылку для публикации

    Экспортируйте готовый дизайн, затем воспользуйтесь функцией Share в OpenDesign, чтобы получить ссылку. Откройте ссылку в отдельном окне браузера и убедитесь, что нужная версия со всеми ресурсами доступна, прежде чем отправлять её.

OpenDesign для компьютера

Одна дизайн-система. Единый образ бренда во всех материалах

В полном Vibe Design Workspace одни и те же правила бренда работают для сайтов, слайдов, интерактивных прототипов, дашбордов, изображений и HTML-видео. Подключите локальные Codex, Claude Code, Cursor и другие кодинг-агенты и создавайте бесплатно.

  • Сайты, слайды, прототипы, дашборды, изображения и видео
  • Более 140 дизайн-систем и полная библиотека шаблонов и навыков
  • Локальный Codex и более 21 кодинг-агента · Бесплатно
Скачать бесплатно

Для macOS и Windows