Десктопное приложение
Дизайн персонального дашборда
Life System объединяет недельную оценку, показатели на схеме тела, суточные ритмы и пять экспериментов на одном дашборде.
Идеи для дизайна
- Дашборды для личного планированияНедельная сводка рядом с открытыми решениями и приоритетами.
- Трекеры привычек и активностиСуточные паттерны в сочетании с недельными средними.
- Трекеры экспериментовГипотеза, цель и показатель прогресса для каждого испытания.
Особенности дашборда
- Одна сводка, четыре уровня детализацииБалл, доменные полосы, недельные средние и незакрытые задачи размещены на тёмной боковой панели.
- Восемь метрик вокруг карты телаВыноски фокуса, движения и восстановления расположены рядом с центральной фигурой.
- Пять экспериментов, шесть полейСтроки таблицы разделяют гипотезу, метрику, цель, прогресс и статус.
Превью дизайна персонального дашборда
1 / 4Как устроен этот персональный дашборд
Life System — концепция десктопного дашборда, построенного вокруг единого, информационно насыщенного рабочего пространства. Узкая тёмная боковая панель отвечает на вопрос «На что обратить внимание?»; более широкие белые панели содержат показания, стоящие за этим обзором. Вот что именно находится в каждой области.
| Область | Что отображается на экране | На что обратить внимание |
|---|---|---|
| Сводная панель | Системный балл 82/100; шесть доменных полос; четыре недельных средних; восемь незакрытых задач. | Панель переходит от общего балла к конкретным незавершённым пунктам. «Decisions 3» даёт больше для действия, чем просто 82. |
| Human System | Восемь выносок: focus, mind, heart, energy, movement, nutrition, recovery и longevity. | Подписи расположены вокруг фигуры, поэтому цифры остаются читаемыми и не перекрывают анатомию. |
| Суточные ритмы | Семь дней полос энергии, фокуса и восстановления; отдельный график фаз сна. | Сгруппированные полосы сравнивают три ряда внутри каждого дня. График сна, напротив, делит один итог на части. |
| Experiments | Пять испытаний с гипотезой, метрикой, целью, прогрессом и статусом. | Таблица делает вопрос и предполагаемый способ его измерения видимыми вместе, вместо того чтобы сводить каждое испытание к одной полосе прогресса. |
Чтение баллов в контексте
Дашборд использует несколько видов чисел, но они означают разное. Баллу нужна шкала; изменению — период сравнения; продолжительности — единица измерения. Life System предоставляет часть этого контекста, оставляя другие части нераскрытыми.
82/100 и +6 отвечают на разные вопросы
В сводке приведены текущий балл и изменение с подписью «vs last 7 days». Сохраняйте этот период сравнения рядом с баллом при адаптации макета. Шесть доменных полос не документируют, как рассчитывается 82.
Часы и баллы требуют разных подписей
Недельные средние показывают Deep Work как 4,6 ч/день, Sleep как 7 ч 18 мин, Recovery как 74%. Сохранение этих единиц важнее, чем визуальное единообразие всех трёх чисел.
Трекер экспериментов с шестью полями
Прочитайте строку Deep Work поперёк таблицы: название испытания, «Blocks increase output», метрика Deep Work, цель +25%, прогресс 80% и On Track. Полезное дизайнерское решение — разделение этих полей. Слабость в том, что последние три могут выглядеть как три версии одного и того же результата.
| Отображаемое значение | Что оно сообщает | Что по-прежнему отсутствует |
|---|---|---|
| Цель +25% | Запланированный прирост Deep Work. | Начальное значение и период измерения. Прирост на 25% требует базового показателя. |
| Прогресс 80% | Для испытания показано значение прогресса. | Означает ли это прошедшее время, выполненные сессии или движение к цели. Прототип этого не определяет. |
| On Track | Строка имеет положительную метку статуса. | Правило, стоящее за этим суждением. Все пять примерных строк используют этот статус, поэтому экран не демонстрирует состояние «не в графике». |
Изучайте дашборд в три прохода
Используйте четыре вида галереи выше, чтобы рассмотреть одно и то же рабочее пространство в разных масштабах. Это детальные кадрирования, а не четыре отдельные страницы приложения.
Проследите путь от сводки к детали
Найдите Recovery на сводной панели: семидневное среднее равно 74%. Откройте Human System и снова найдите Recovery: заголовок — 75/100, с тем же недельным показателем 74% ниже. Расширенная выноска разграничивает балл и его вспомогательный показатель; панель сохраняет только компактное значение.
Сравните два способа отображения паттернов
Вернитесь к обзору и найдите Energy Rhythm и Sleep Architecture. Один группирует энергию, фокус и восстановление по дням; другой делит сон на фазы. При повторном использовании любого из графиков сохраняйте его группировку и подписи, а не только зелёный акцент.
Читайте испытание до его полосы прогресса
Откройте Experiments и сначала прочитайте гипотезу. Затем найдите метрику и цель, которые её проверяют. Наконец изучите прогресс и статус. Такой порядок точно показывает, каких определений трекеру ещё не хватает, прежде чем реальные данные смогут заменить примеры.
Что демонстрирует этот дизайн дашборда
Life System демонстрирует десктопный информационный макет, а не подключённый сервис персонального трекинга. Поставляемый код использует примерные показания. Кнопки выбора временного диапазона меняют выбранное состояние; они не пересчитывают баллы или графики.
Эталон макета, а не проверенные измерения
Показатели здоровья и когнитивных функций — иллюстративное содержимое интерфейса. Формула подсчёта баллов, интеграция живых данных и доказательная база для гипотез экспериментов не предоставляются. Пометки о конфиденциальности и синхронизации на экране не подтверждают наличие этих возможностей.
Официальный пример OpenDesign
Этот кейс подготовлен как официальный пример для хакатона, а не как заявка участника или работа победителя. Изучайте макет и просматривайте оригинальный дизайн; уточняйте разрешения на повторное использование перед распространением его ресурсов.
Как создать дизайн персонального дашборда в OpenDesign
Опишите рабочее пространство и его данные
Начните с ежедневного вопроса, на который должен отвечать ваш дашборд. Для дизайна в стиле Life System запросите сводную панель, недельные паттерны и таблицу экспериментов. Укажите примерные данные и читаемые единицы измерения до того, как запрашивать декоративные иллюстрации.
Рекомендуемый промптСоздай дизайн персонального дашборда для еженедельного обзора. Используй узкую тёмную сводную панель рядом с белыми панелями деталей. Включи еженедельные часы глубокой работы, продолжительность сна, открытые решения, семидневный график активности и таблицу экспериментов с гипотезой, метрикой, базовым значением, целью, выполненными сессиями и результатом. Используй подписанные примерные данные. Держи достижение цели отдельно от завершения испытания. Не подразумевай подключение датчиков здоровья или живых интеграций с аккаунтами.
Уточните одну метрику от сводки до детали
Попросите OpenDesign перенести одно недельное показание с панели в детальную панель без изменения единицы или периода времени. Если вы добавляете отдельный балл, подписывайте его отдельно. Держите иллюстрации на втором плане, пока подписи и периоды сравнения не станут читаемыми.
Проверьте таблицу и узкие экраны
Запросите одно испытание в графике, одну упущенную цель и одно испытание без результата. Убедитесь, что текст статуса объясняет каждое состояние, а прогресс считает сессии, а не подразумевает успех. На узком экране превратите таблицу в подписанные строки и убедитесь, что основные элементы управления остаются удобными.
Экспортируйте дизайн и получите ссылку для публикации
Экспортируйте готовый дизайн, затем воспользуйтесь функцией Share в OpenDesign, чтобы получить ссылку. Откройте ссылку в отдельном окне браузера и убедитесь, что нужная версия со всеми ресурсами доступна, прежде чем отправлять её.
Дизайн карьерного сайта
Восемь лунных сцен Kimi: анимация прокрутки и схема подачи заявки.
Сайт
Дизайн сайта-портфолио
Вымышленное портфолио Майи Роуэн: проекты, подход к работе и заметки.
Сайт
Дизайн продуктовой презентации
Рабочая среда для агентов в 3 слайдах.
Слайды
Дизайн сайта-резюме
Вымышленное резюме Тома Гудмана сочетает опыт работы с графиками компетенций и избранными работами. Изучите двухколоночный порядок чтения, компактные карточки должностей и отдельный макет для печати.
Сайт