מסע לפולין
Спутник поездки — mobile-first веб-приложение
Замена бумажному «יומן מסע»: то же содержание — маршрут, места, тексты для чтения, карты, практическая информация — но в телефоне, офлайн, с крупным шрифтом и без вёрстки в типографию за пять дней до вылета.
Аудитория: сотрудники института, 40–70 лет, иврит, iPhone и Android поровну. Контекст использования: автобус, улица, мемориал — солнце, перчатки, эмоционально тяжёлые места. Отсюда: крупный текст, спокойная графика, никакого «продуктового» задора.
Принципы, из которых выведены все решения
| Принцип | Почему | Как выражается в интерфейсе |
|---|---|---|
| Офлайн по умолчанию | Роуминг в Польше, автобус, подвал музея, экономия батареи | Статичный сайт: содержимое кэшируется service worker'ом при первом открытии, без кнопок и индикаторов. В дороге приложение работает так же, как дома |
| Один экран — один ответ | Смотрят на ходу, 5–10 секунд | Главная отвечает «где я сейчас и что дальше»; всё остальное — на вкладках |
| Читаемость важнее плотности | Возраст аудитории, солнце, тексты для чтения вслух | Базовый кегль 16px, в ридере 18–24px с регулятором; контраст ≥ 7:1; поддержка системного увеличения шрифта |
| Тон — сдержанный | Тема поездки: Треблинка, Майданек, Освенцим | Бумага и чернила, тонкие линейки, ч/б фотографии, ноль ярких заливок и «весёлой» анимации; акцент — один, приглушённый |
| Одна навигация на обеих платформах | Группу нельзя учить двум разным интерфейсам | Нижний таб-бар из 4 пунктов — родной для iOS, разрешён Material 3 для Android; иконка + подпись, активный — цветом и полоской |
| Иврит — первый язык | Участники и все исходные материалы | RTL как основа вёрстки (logical properties), латиница и кириллица — зеркальные варианты, а не костыли |
Дизайн-токены
Палитра «архивная бумага и чернила»: тёплый небелый фон снижает яркость экрана на солнце и в автобусе, а исторические карты и ч/б фотографии на нём выглядят как вклейки в дневник, а не как картинки в вебе. Один акцент — сине-стальной — на интерактив; кирпичный — только на памятные метки и предупреждения. Никаких эмодзи как иконок: единый штриховой набор 1.7px.
- Frank Ruhl Libre — ивритский шрифт с историей набора книг; в заголовках даёт «дневниковую» интонацию и хорошо работает в RTL.
- Heebo — нейтральный гротеск, полное покрытие иврита + латиницы + кириллицы, один файл на три языка интерфейса.
- Шкала кегля: 10.5 · 12 · 14.5 · 16 · 19 · 22 · 30 · 34. Отступы 4/8. Радиусы 6/10, у экранных карточек — не больше 10.
Информационная архитектура и меню
Четыре вкладки — по одной на каждый способ входа в содержание: время (маршрут), пространство (места), слово (тексты) и главная, которая собирает всё остальное. Справочной вкладки нет намеренно: то, что Дорон просил во вступлении буклета — слово президента, телефоны, ответственные, гостиницы, словарик, «Польша — удостоверение», тфилат ха-дерех — разложено туда, где оно нужно. Слово президента и контакты открывают главную; отель и время сбора стоят внутри своего дня; карты живут у мест. Искать по справочнику в автобусе никто не будет.
ראשי · Главная
- Слово президента — открывает поездку
- Кнопки в три раздела
- Сегодня — одной строкой, ведёт в маршрут
- Контакты — звонок в одно касание
- Ответственные лица
- Гостиницы и ночёвки
- Тфилат ха-дерех · словарик
- «Польша — ת.ז.» · карта маршрута
מסלול · Маршрут
- Табы: день 1–5 с датами
- Таймлайн дня: точки, переезды
- Что читаем на месте
- Отель и время сбора — в самом дне
- Что взять с собой
- Карты этого дня
מקומות · Места
- Варшава · Тыкоцин · Треблинка
- Майданек · Освенцим · Краков · Величка
- Карточка места: фото, история, что увидим
- Тексты и карты этого места
- Персоналии (Маршрут героизма)
קריאה · Тексты
- Хендель · Корчак · Хефер
- Брехт · Примо Леви · документы
- Песня «העיירה של טוביה»
- Ридер: кегль, ночь, закладка
- Фильтр по дню и по месту
| Решение по меню | Обоснование |
|---|---|
| Нижний бар, 4 пункта | Apple HIG (Tab Bar) и Material 3 (Navigation Bar) допускают одинаковую компоновку — значит одна вёрстка и одна инструкция для группы. Четыре пункта вместо пяти: справочная информация не отдельный раздел, а часть страниц. Высота 82px с учётом safe-area, цель тапа 44+ |
| Иконка + подпись | Иконка без подписи теряется у неопытных пользователей; подписи на иврите короткие, влезают без сокращений |
| Активный — цвет + полоска | Цвет один не годится: дальтонизм и солнце. Полоска сверху пункта читается всегда |
| Нет вкладки «информация» | Телефоны, гостиницы, словарик и молитва нужны в конкретный момент, а не «где-то в справочнике»: контакты и практика — на главной, отель и время сбора — внутри дня, тексты — у мест |
| ≥1024px — боковая колонка | Тот же порядок разделов, но слева; бар не растягивается на всю ширину десктопа (Material Adaptive) |
Экраны · iPhone 390×844
Приложение открывается сразу на главной — заставки нет. Порядок фреймов повторяет реальные сценарии: главная → маршрут дня → место → карта → тексты → состояния.
דברי ראש המשלחת
חברות וחברי המשלחת, באוקטובר הקרוב נצא יחד למסע הראשון של מכון ויצמן למדע לפולין.
חברות וחברי המשלחת,
באוקטובר הקרוב נצא יחד למסע הראשון של מכון ויצמן למדע לפולין. שלוש שנים לאחר 7 באוקטובר, אנחנו יוצאים אליו מתוך מציאות ששינתה את חיינו והזכירה לנו בעוצמה עד כמה שברירית יכולה להיות המציאות, ועד כמה חזקה יכולה להיות הרוח האנושית שמבקשת לקום, להמשיך ולבנות.
המסע מחזיר אותנו אל אחד הפרקים האפלים בתולדות העם היהודי והאנושות. ככל שדור ניצולי השואה הולך ומתמעט, כך גם מתמעטת האפשרות לשמוע עדות ממקור ראשון. האחריות לזכור, לספר ולהעביר הלאה עוברת אלינו. הזיכרון אינו רק עדות למה שהיה, הוא גם מצפן למה שאנחנו מבקשים להיות.
השנים האחרונות לימדו אותנו מחדש על שבר ואובדן, אבל גם על כוחה של קהילה, על ערבות הדדית ועל היכולת האנושית לקום, להמשיך ולבנות גם מתוך מציאות קשה. הרוח הזאת אינה מוחקת את הכאב, היא מאפשרת לנו לבחור כיצד להמשיך ממנו.
במכון ויצמן למדע, המבט קדימה הוא חלק מהעשייה שלנו בכל יום. אנחנו חוקרים, מגלים ומרחיבים את גבולות הידע מתוך אמונה בכוחו של המדע לשנות חיים ולתרום לעתיד האנושות. דווקא במקום שמקדיש את עצמו למה שעוד אפשר להבין, לגלות וליצור, יש משמעות עמוקה גם למה שאנחנו בוחרים לזכור.
המסע הזה לא בהכרח ייתן לנו תשובות. ייתכן שחלק מן השאלות יישארו פתוחות וילוו אותנו גם לאחר שנחזור. אולי גם בכך טמונה משמעותו, בנכונות לזכור, להתבונן ולא להסיט את המבט, ולהמשיך לחשוב יחד על העולם שאנחנו מבקשים לבנות.
מאחל לכולנו מסע משמעותי,
פרופ' אלון חן
נשיא מכון ויצמן למדע
לפני היציאה
40 מילים
- Обращение руководителя делегации занимает две строки и раскрывается целиком по нажатию; экран прокручивается внутри телефона.
- Кнопки разделов дублируют таб-бар намеренно: для тех, кто не считает нижнюю панель навигацией.
- Телефон звонит в одно касание —
tel:, работает без сети.
- Табы — кнопки, а не свайп: свайп по контенту конфликтует с системным «назад».
- Точное время можно менять из админки — участники увидят бейдж на вкладке.
טיקוצ׳ין
עיירה בצפון-מזרח פולין הסמוכה לנהר הנרב. אחת הקהילות העתיקות והחשובות ביהדות פולין — ועד ארבע ארצות התכנס בה מספר פעמים. ערב השואה היוו 2,500 יהודי טיקטין רוב באוכלוסייה.
1939 — הגרמנים כלאו את כל הגברים בכנסייה לשלושה ימים ללא מים ומזון.
22.6.1941 — שכנים פולנים בזזו בתים יהודיים ופגעו פיזית.
16.8.1941 — חמישה ז׳נדרמים הודיעו על החזרת הרכוש הבזוז…
- Карты подписаны источником — часть материалов пришла из книг, атрибуция нужна в печати и в приложении.
- Для карт качеством 640px зум ограничен 300%, дальше показываем «оригинал не в высоком разрешении».
זמן לעשרה עניינים
קח לך זמן לעבודה — זה המחיר להצלחתך.
קח לך זמן לחשיבה — זה מחיר הכוח שלך.
קח לך זמן למשחקים — זה סוד הנעורים שלך.
קח לך זמן לקריאה — זה בסיס הידע שלך.
קח לך זמן לשלווה — זה מסייע לך לשטוף את האבק מעיניך.
קח לך זמן לחברות ולידידים — זהו מעיין האושר שלך.
קח לך זמן לאחוות האדם…
- Русский и английский перевод — переключателем в шапке, а не отдельным экраном.
- Ридер помнит позицию; закладка выносит текст на главную «текст дня».
מדינה במספרים
40 מילים בסיסיות
- Прочерки — то, чего пока нет в переписке: гид, гостиницы. Поля уже размечены.
יציאה 07:30 · 170 ק״מ · הקראה מתוך נאום הימלר בפוזן
Адаптивность: 390 → 768 → 1280
Одна кодовая база. Брейкпоинты 390 / 768 / 1024 / 1440. На планшете нижний бар остаётся (его держат в руках), но контент раскладывается в две колонки. С 1024px навигация переезжает в левую колонку — нижний бар на широком экране нарушает Material Adaptive и просто далеко от курсора. Порядок разделов везде один и тот же.
טיקוצ׳ין וטרבלינקה
| Брейкпоинт | Навигация | Сетка | Что меняется в содержании |
|---|---|---|---|
| 390–767 | Нижний бар, 4 пункта | 1 колонка, поля 20px | Лента мест — горизонтальный скролл; карты открываются на весь экран |
| 768–1023 | Нижний бар + верхняя строка разделов | 2 колонки 2fr/1fr, поля 26px | Карта дня и тексты видны рядом с таймлайном |
| 1024–1439 | Левая колонка, 236px | 2 колонки + правая полка | Дни раскрыты списком в сайдбаре; карты — врезками, не оверлеями |
| ≥1440 | То же, контейнер 1320px | Колонка чтения ≤ 68 знаков | Печатная версия дня — кнопка «печать» для тех, кому нужна бумага |
RTL, языки, доступность
| Тема | Решение |
|---|---|
| RTL как основа | Вёрстка на логических свойствах (margin-inline, inset-inline, padding-block) — при переключении на русский/английский зеркалится весь макет без единого отдельного стиля. Иконки направления (стрелки, шеврон) переворачиваются, иконки-объекты — нет |
| Смешанный текст | Номера телефонов, даты и латинские названия в ивритском абзаце — в контейнере с dir="ltr" и unicode-bidi:isolate, иначе «+48 22» рассыпается |
| Три языка | Интерфейс: иврит (основной), русский, английский. Материалы: оригинал на иврите + перевод, переключатель внутри ридера. Тексты Хендель, Корчака, Хефера уже переведены на русский в наших документах |
| Контраст | ink на paper — 15.2:1; вторичный — 8.1:1; подписи — 4.6:1. Акцент на бумаге — 8.9:1. Проверено для обеих тем |
| Цели тапа | Минимум 44×44 (iOS) / 48×48 (Android), между целями ≥8px. Строки списков — 56px, кнопка звонка — 44px круг |
| Системный шрифт | Поддержка Dynamic Type / системного увеличения до 200% без обрезки: карточки растут по высоте, текст переносится, ничто не обрезается многоточием |
| Движение | Переходы 150–250ms, только transform/opacity. При prefers-reduced-motion — мгновенная смена. Никаких параллаксов и «эффектных» появлений: тема поездки этого не терпит |
| Скринридер | Каждая карта и фото — осмысленный alt («מפת גטו ורשה, גבולות נובמבר 1940»); порядок фокуса совпадает с визуальным; у вкладок — aria-current |
| Безопасные зоны | Таб-бар с env(safe-area-inset-bottom), контент с нижним отступом 82px — ничего не прячется под баром и под «челюстью» Android-жестов |
Что дальше и что нужно от заказчика
| # | Шаг | Комментарий |
|---|---|---|
| 1 | Согласовать канвас | Шир и Ронен смотрят структуру и меню; правки в IA сейчас стоят минуты, после вёрстки — часы |
| 2 | Собрать недостающее содержание | Часы вылета, гостиницы, ответственные лица, телефон гида, словарик, «Польша — ת.ז.» — без этого на главной остаются плейсхолдеры и прочерки |
| 3 | Материалы от Эрана (Яд ва-Шем) | Заложить в структуру, но не блокировать разработку: тексты добавляются как записи |
| 4 | Качество карт | Четыре карты — 640px по длинной стороне. Для зума нужны оригиналы или перерисовка; иначе ограничиваем масштаб |
| 5 | Прототип | Astro + Vue + Tailwind, статика на Cloudflare Pages, service worker для офлайна, содержимое в JSON — правится без пересборки |
| 6 | Печатная страховка | Из того же JSON — печатная вёрстка дня на A5, если решат всё же напечатать буклет |
Открытый вопрос, который стоит решить до вёрстки: приложение только читают или в нём ещё и участвуют — фотографии участников, заметки, поимённый список группы. Это меняет объём работ, но не структуру: добавится шестой раздел или профиль в шапке.