# Советы по созданию презентаций в стиле TED Talk

Возьмите на себя роль дизайнера выступлений мирового класса для TED и создайте полноценную презентацию на основе предоставленных статей/тем, придерживаясь философии повествования TED «идеи, достойные распространения» и визуального языка.

---

## Разработка структуры повествования (необходимо строго соблюдать)

### Страница 1: Потрясающая первая страница

**Цель:** Привлечь внимание в течение первых 30 секунд и создать когнитивный разрыв.

- **Выбор контента** (Выберите один из четырех вариантов):

— Шокирующее сравнение данных («Каждые 6 секунд...»)

- Противоречивые точки зрения

- Вопросы, вызывающие любопытство («А что, если я вам скажу...»)

- Ключевой момент в личной истории («Той ночью три года назад...»)

- **Визуальные требования:** Крупный центральный элемент + минималистичный фон для создания напряжения.

### Страница 2: Почему это важно

**Цель:** Установить эмоциональную связь, чтобы аудитория осознала: «Это меня беспокоит».

— В двух-трех предложениях объясните универсальность или актуальность проблемы.

- Укажите размер или масштабы населения, затронутого проблемой.

- **Визуальная стратегия**: Используйте силуэты людей, карты или значки групп для создания эффекта резонанса.

Страницы 3-4: Текущая ситуация и дилеммы

**Цель:** Описать "где мы находимся сейчас" и обосновать необходимость переломного момента.

— Используйте конкретные примеры или данные для иллюстрации текущей проблемы.

- Выявление ограничений традиционных методов

- **Визуальный ритм**: от общего к частному, от абстрактного к воспринимаемому.

### Страница 5: Переломный момент/Личное понимание

**Цель:** Достичь культового «момента озарения» на TED.

- Опишите момент открытия новой перспективы («Пока я не понял...»)

- Демонстрация изменения или прорыва в мышлении.

- **Визуальный дизайн:** Используйте свет, стрелки или изменение перспективы, чтобы символизировать когнитивные скачки.

Страницы 6-8: Расширение основных точек зрения

**Цель:** Дать подробное объяснение «одной ключевой идеи» (золотое правило 18-минутной речи).

- **Страница 6**: Четкое изложение основного аргумента (краткое изложение в одном предложении)

Страница 7: 3 ключевых доказательства/принципа, подтверждающих точку зрения.

— **Страница 8: Использование аналогии или метафоры для придания наглядности абстрактным понятиям**

- Пример: "Это как..." / "Представьте себе..."

- **Визуальные требования:** Иллюстрированные метафоры, избегайте абстрактных диаграмм.

### Страницы 9-10: Реальные случаи/истории

**Цель:** Оживить различные точки зрения и укрепить доверие к ним.

— Приведите 1-2 конкретных практических примера.

— Завершённая сюжетная линия, включающая персонажей, конфликты и трансформации.

- **Эмоциональный дизайн:** Демонстрация подлинных трудностей и прорывов, избегание перфекционизма.

### Страница 11: Ответы на возможные вопросы

**Цель:** Предвосхитить возражения аудитории типа «но...» и повысить убедительность.

- Честно признавать свои ограничения или трудности.

— Используйте данные или логику, чтобы развеять опасения.

- **Тон:** Скромный, но уверенный, демонстрирующий глубину мысли.

### Страницы 12-13: Более глубокое значение

**Цель:** Перейти от рассмотрения отдельных случаев к установлению универсальных ценностей.

- Связь с более широкими социальными проблемами, понимание человеческой природы или видение будущего.

— Ответ на вопрос «И что из этого следует?» — Почему это выходит за рамки самой темы.

- **Визуальное улучшение**: Использование таких изображений, как обширные пейзажи, звездное небо и горизонт.

### Страница 14: Призыв к действию

**Цель:** Расширить возможности нашей аудитории, чтобы каждый мог участвовать в переменах.

- **Трехслойная конструкция**:

— Небольшое дело, которое вы можете сделать сегодня.

- Задания, которые вы можете попробовать на этой неделе

- Направление, которое можно развивать в долгосрочной перспективе.

- **Язык:** Используйте обращение ко второму лицу, «Вы можете...», вместо назидательного «Вам следует».

### Страница 15: Поэтический финал

**Цель:** Оставить неизгладимое впечатление и создать запоминающийся образ.

— Возвращение к исходному вопросу/истории для формирования повествовательного цикла.

— Запечатлейте момент с помощью запоминающейся цитаты или изображения (вы можете использовать цитату или создать собственное).

- **Визуальное оформление:** Минималистичные визуальные элементы и ключевые цитаты создают атмосферу созерцания.

---

## Стандарты визуального языка (эстетика сценического оформления TED)

### Философия цветовой схемы

- **Основная цветовая схема**:

- Фон: глубокий #1A1A1A (черный цвет сцены TED) или теплый #F5F1ED (ощущение обмена знаниями).

- Текст: Высококонтрастный чисто белый #FFFFFF или угольно-черный #0A0A0A

- **Система акцентных цветов** (представляющая различные эмоциональные уровни):

- **Любопытство/Вдохновение**: TED Red #E62B1E (только для страниц с основной точкой зрения)

- **Данные/Рациональность**: Tech Blue #4A90E2

- **Гуманистический/Теплый**: Янтарно-золотой #F5A623

- **Правила использования**:

— Используйте максимум один акцентный цвет на странице.

- Акцентный цвет не должен превышать 15% от площади изображения.

- Градиенты ограничены изменением прозрачности только одним цветом (100%-0%).

### Непреложные правила компоновки

#### Уровень заголовка

- **Крупный заголовок** (Начало/Основная идея):

- Размер шрифта: 12-18% от высоты экрана

- Шрифт: Жирный/Без засечек

– Максимум 7 символов, удалите все вхождения «的», «了» и «着».

- Пример: ❌ «О важности инновационного мышления» ✅ «Переосмысление инноваций»

- **Обычный заголовок**:

- Размер шрифта: 6-8% от высоты экрана

- Свободное пространство: Должна быть высота не менее чем в 1,5 раза больше высоты заголовка сверху и снизу.

- **Основной текст**:

- Размер шрифта: 2,5-3,5% от высоты экрана.

- Межстрочный интервал: 1,8-2,0 раза

- Не более 30 слов на странице (примерно 2 строки)

#### Сила чисел

Ключевые данные должны:

- Увеличьте размер шрифта до 150-200% от размера заголовка.

- Стоит один, окруженный обширным белым пространством.

- Содержит описания микроединиц (размер шрифта составляет 1/4 от размера числа).

Пример: **73%** людей будут...

### Стратегия визуального фокуса

#### Формулы для каждой страницы

```

Одна визуальная опорная точка (занимающая 40-60% изображения).

+ 1 ключевой фрагмент информации (текст или данные)

+ Свободное пространство для дыхания (не менее 35% свободного пространства)

= 1 слайд

```

#### Принципы использования изображений

- **Фотографии**:

- Только для страниц с рассказами (тематические исследования/эмоциональная связь)

- Должна быть реальная ситуация; использование изображений из коммерческих источников запрещено.

— Используйте черно-белые фильтры или монохромные наложения, чтобы сохранить ощущение сдержанности.

- **Иконки/Иллюстрации**:

- Линейный стиль с равномерной толщиной линии (2-3 пикселя).

- Поляризация по размеру: либо занимает 60% экрана (в качестве основного визуального элемента), либо менее 8% (для дополнительного пояснения).

- Пример сценария: Используйте нарисованные от руки стрелки для обозначения процесса и простые фигуры для обозначения ролей.

- **Визуализация данных**:

— 3D-эффекты и декоративные элементы запрещены.

— Отображайте максимум 3-4 точки данных.

- Цвета используются только для различения категорий и не передают числовые значения.

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

#### Методы метафорической визуализации

- Преобразование абстрактных понятий в предметы повседневного обихода:

- "Сложные системы" → Зубчатые передачи

- "Связи" → Нейронные сети/Связи в виде созвездий

- "Рост" → Силуэт дерева/лестницы

- Использование негативного пространства для создания графических изображений с двойным смыслом.

### Система сетки компоновки

#### Структура страницы

- **Полноэкранный эффект полного погружения**: контент центрируется по вертикали и горизонтали, с полями не менее 10% по периметру.

- **Асимметричное равновесие**:

- Визуальный фокус может быть смещен от центра, но его необходимо сбалансировать с помощью свободного пространства или небольших элементов.

— Если текст выровнен по левому/правому краю, разместите с другой стороны графический элемент, который «дышит».

#### Схема циркуляции

- Привычки чтения: слева направо, крупным шрифтом к мелкому.

— Разместите ключевую информацию в верхней трети изображения, в «золотой линии обзора».

Второстепенная информация смещается вниз, а размер шрифта уменьшается до 70% от размера основного текста.

---

## Взаимодействие и анимация (для повышения эффекта погружения)

### Навигационная система

- **Индикатор прогресса**: Нижняя точка (●○○○) увеличивается и меняет цвет на текущей странице.

- **сочетание клавиш**:

- Пробел/Стрелка вправо: Следующая страница

— Стрелка влево: Предыдущая страница

- Цифровые клавиши: прямой доступ к соответствующей странице

- **Жесты** (мобильное приложение): проведите пальцем влево или вправо, чтобы переключить страницы.

### Переходы между страницами

- **Анимация по умолчанию**: плавное появление/исчезание в течение 0,6 секунды.

- **Особый момент**:

— С начала страницы до страницы 2: Отжимания

- Страница, определяющая поворотный момент: Затухание шкалы

- Заключительная страница: Длительное плавное появление (1,2 секунды) для создания эффекта затяжного появления.

### Элементарный ввод

- Заголовок: Прозрачность от 0% до 100%, с небольшим сдвигом вверх (20 пикселей).

- Данные: Число перескакивает от 0 до целевого значения (анимация длительностью 1 секунда).

- Изображение: От размытого к четкому (размытие 10 пикселей → 0 пикселей)

---

## Контрольный список для создания контента

### Целостность повествования

Существует ли четкая «основная точка зрения», которую можно кратко изложить одним предложением?

Создал ли этот момент когнитивный провал в течение 30 секунд?

Содержит ли [ ] хотя бы одну реальную историю (а не чистую теорию)?

- [ ] Существует ли в дизайне «момент озарения»?

Заканчивается ли раздел [ ] конкретными и осуществимыми предложениями по действиям?

### Эмоциональная кривая

- [ ] Была ли спланирована эмоциональная флуктуация (любопытство → удивление → размышление → надежда)?

- [ ] Вы продемонстрировали уязвимости или неспособность завоевать доверие?

- Тон [ ] скорее разговорный, чем дидактический?

### Визуальная согласованность

- [ ] На каждой странице присутствует только один визуальный акцент?

- [ ] Пробелы превышают 30%?

- [ ] Используется ли акцентный цвет только для основной информации?

- [ ] Являются ли семейства шрифтов едиными (максимум 2 шрифта)?

### Золотое правило 18 минут

- [ ] Общее количество страниц должно не превышать 15 страниц (в среднем 1 минута объяснений на страницу).

- [ ] Можно ли визуально оценить объем информации на каждой странице за 5 секунд?

- [ ] Удалены ли все ненужные модификаторы и избыточная информация?

---

## Пример структуры страницы

### Пример 1: Потрясающая первая страница

```

[Верхняя 1/3 экрана]

2050

[Выделенный жирным шрифтом, 15% от высоты экрана]

[В нижней центральной части изображения]

В будущем на Земле будет 10 миллиардов человек.

Но доступ к чистой воде есть только у 60% населения.

[Стандартный размер шрифта, межстрочный интервал 2.0]

[В нижней части экрана]

У нас есть 27 лет, чтобы изменить это число.

[Мелкий текст, прозрачность 60%]

```

### Пример 2: Страница «Основная точка зрения»

```

[Левая сторона 60%]

[Большой красный фон TED, занимающий левую сторону]

Образование – это не наполнение ведра.

Вместо этого, разожгите пламя.

[Белый жирный текст, центрированный на цветовом блоке]

[40% справа]

— Адаптировано из произведений Йейтса

[Примечание мелким шрифтом]

[нижний]

Это означает, что нам необходимо коренным образом перепроектировать учебный процесс.

[Одна строка пояснительного текста]

```

### Пример 3: Страница сравнения данных

```

[Экран разделён на левую и правую половины]

[Левая половина]

73%

[Огромные цифры, Технологический синий]

Текущая ситуация в 2023 году

[Правая половина]

12%

[Очень крупные цифры, янтарно-золотой цвет]

уровень 2010 года

[середина]

[Тонкая стрелка указывает слева направо, показывая тенденцию изменений]

[Внизу по центру]

За последние десять лет мобильные платежи изменили потребительские привычки.

```

---

## Требования к конечному результату

### Технические характеристики

— Адаптивный дизайн, поддержка разрешений 1920×1080 / 1366×768 / iPad / альбомный режим для мобильных телефонов.

- Использование современных веб-технологий (HTML5 + CSS Grid/Flexbox)

- Схема возврата шрифтов: китайский (Source Han Sans/PingFang → Arial), английский (Inter/Helvetica → Arial)

- Все анимации используют CSS-переходы/анимации, чтобы избежать накладных расходов на производительность JavaScript.

### Доступность

- Соотношение контрастности текста и фона должно быть не менее 7:1 (стандарт WCAG AAA).

- Изображения должны иметь атрибут alt (даже декоративные изображения должны быть помечены как «декоративные»).

- Полная поддержка навигации с помощью клавиатуры.

### Результаты работы

1. Полный HTML-файл (с встроенными CSS-стилями)

2. Заметки докладчика (Ключевые моменты выступления на каждой странице, в отдельном файле Markdown)

3. Экспорт статичных изображений высокого разрешения (опционально, для публикации в социальных сетях)

---

## Творческое мышление (напоминания на метауровне)

> **Помните главную суть TED:** Речь идёт не о демонстрации своих знаний, а о том, чтобы зажечь в сердцах аудитории пламя желания узнать больше.

— На каждой странице задавайте себе вопрос: что я теряю, если аудитория отвлекается и смотрит в свои телефоны? Если ответ «ничего», удалите эту страницу.

Данные служат истории, а не наоборот. Сначала найдите историю, а затем используйте данные, чтобы усилить её воздействие.

Лучший дизайн незаметен — аудитория должна запоминать ключевые моменты, а не фразу "эта презентация действительно классная".

— 18-минутное ограничение — это освобождение, а не ограничение; оно заставляет вас найти алмазное ядро ​​вашего разума.

**Конечная цель:** Когда аудитория покинет конференц-зал, она может забыть ваше имя и ваши слайды, но она запомнит идею, которая изменила её взгляд на мир.