Заметки о дизайне
Как сгиб стал корешком
У каждого складного телефона посередине проходит линия. Для большинства приложений это помеха, которую приходится обходить. Для книги — самое естественное, что только может быть: у книг она была всегда. Вот как читалка Tomelet научилась считать сгиб корешком — и принципы дизайна, которые за этим стоят.
Бесплатно и без аккаунта. Развороты входят в бесплатную читалку.
Проблема: растянутая страница телефона
Раскройте складной телефон, и приложение, сделанное под телефон, просто становится шире. Строки вытягиваются до нечитаемой длины, текст перебегает через сгиб, а кнопка может оказаться прямо на нём. Закройте телефон — и экран собирается заново, на страницу, а то и на главу в стороне от того места, где вы были.
Apple опубликовала рекомендации по дизайну вместе с iPhone Duo; у Android есть свои — для складных устройств. Сходятся они больше, чем расходятся, и Tomelet следует обоим одной читалкой — на iPhone Duo и на Galaxy Z Fold. Её сформировали пять правил.
1. Сгиб — зарезервированная область
Apple называет сгиб зарезервированной областью — частью экрана, которую приложению следует оставлять свободной. Android сообщает приложению, где именно проходит сгиб, и Tomelet ставит корешковое поле между двумя страницами ровно туда, не пуская в него зоны касания, кнопки и маркеры выделения. Штрих пера, пересекающий сгиб, делится между двумя страницами, так что каждая сохраняет свои чернила.
На iPhone Duo Flutter — инструментарий, на котором написан Tomelet, — пока не передаёт приложениям положение сгиба (flutter/flutter#192515), поэтому Tomelet ставит корешковое поле по центру экрана.
Это и есть шаг от сгиба к корешку. В печатной книге в корешковом поле тоже ничего не печатают. Там встречаются две страницы.
2. Сложить — не значит уйти
Apple просит сохранять непрерывность, пока устройство открывают и закрывают. Samsung просит приложения сохранять позицию прокрутки и набираемый текст. Tomelet считает сгиб сменой размера экрана, но никогда — переходом в другое место.
Номера страниц такого не переживают: внешний экран показывает одну страницу другого размера, так что после каждого сгиба в книге другое число страниц. Поэтому Tomelet запоминает место как позицию в тексте — первый символ на левой странице. Он заново верстает книгу и открывает страницу с этим символом, а прежний кадр остаётся на экране, пока не готов новый. Выделения, заметки и чернила привязаны к словам и движутся вместе с ними.
Ничего не открывается заново, и реклама не появляется: сгиб никогда не выводит вас из книги.
3. Размер, а не поворот
Внутренний экран iPhone Duo игнорирует блокировку поворота в приложении, и Android 17 на больших экранах делает то же самое. Значит, то, как повёрнут телефон, не может определять вёрстку. Tomelet смотрит, сколько места есть у страницы: две страницы, когда каждой удобно читать, и одна, когда было бы тесно. То же правило действует на планшете, на телефоне в горизонтальном положении и в окне на компьютере.
Пары взяты из печати, а не из фотокарусели. Первая страница стоит отдельно, затем 2–3, 4–5, так что задуманный издателем разворот всегда ложится целиком. Книги на арабском, иврите и вертикальном японском начинаются справа и листаются влево. Книга с фиксированной вёрсткой, в которой задана ориентация, получает однострочную подсказку, которую можно закрыть; читалка никогда не поворачивает телефон за вас.
4. Положение меняет компоновку, а не книгу
В рекомендациях Apple сказано, что угол шарнира — «для взаимодействий и эффектов… не для вёрстки». Tomelet согласен, поэтому никакой эффект страницы не следует за шарниром. Положение телефона на Android меняет другое — компоновку вокруг книги.
Если складной телефон на Android сообщает, что он полуоткрыт, и вы держите его как книгу, по обе стороны сгиба будет по странице, а элементы управления — у внешних краёв. Поставьте складной телефон на Android полуоткрытым на стол — и страница переедет наверх, а элементы управления вниз: ползунок страниц, оглавление, заметки, оформление. Это идея Flex Mode, встроенная в читалку на Android.
На iPhone Duo Tomelet сохраняет вёрстку раскрытой книги при любом угле — и готов к дню, когда Flutter начнёт передавать приложениям состояние шарнира.
5. Клавиатура
Сложите телефон с открытой клавиатурой — и поле поиска или заметка, которую вы набирали, сохранят текст, фокус и курсор.
Экран на двоих
Рядом с другим приложением — в Split View на iPhone Duo или в режиме разделённого экрана на Android — Tomelet показывает одну страницу, не гадает, где проходит сгиб, и держит элементы управления у внешних краёв.
Перо на полях
Apple добавляет поддержку Apple Pencil (USB-C) на оба экрана iPhone Duo, и инструменты пера в Tomelet готовы его встретить: пишите на полях и EPUB, и PDF, выделяйте строку одним штрихом, пишите Pencil, пока пальцы листают, сдвигают и масштабируют. Чернила привязаны к тексту, поэтому заметка на полях остаётся рядом со своим абзацем, когда после сгиба страница верстается заново. Штрих, проведённый через сгиб, делится между двумя страницами.
Чего мы делать не стали
Эффекты страницы, следующие за углом шарнира
Страница не должна покачиваться, когда вы перехватываете телефон поудобнее.
Второе окно Tomelet на iPhone
Хватит одного окна, которое умеет хорошо делить экран.
Почему корешок
Книга — старейший складной экран на свете. Её корешок — там, где она сгибается, где ничего не напечатано и где две страницы договариваются встретиться. Считать сгиб корешком — это не метафора, наложенная поверх инженерии. Это был кратчайший путь к читалке, которая ведёт себя так, как всегда вела себя книга.