Tomelet

Нотатки про дизайн

Як згин став корінцем

У кожного складаного телефона посередині проходить лінія. Для більшості застосунків це перешкода, яку доводиться обходити. Для книжки — найприродніша річ у світі: у книжок вона була завжди. Ось як читалка 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

Досить одного вікна, яке вміє добре ділити екран.

Чому корінець

Книжка — найстаріший складаний екран на світі. Її корінець — там, де вона згинається, де нічого не надруковано і де дві сторінки домовляються зустрітися. Вважати згин корінцем — це не метафора, накладена поверх інженерії. Це був найкоротший шлях до читалки, яка поводиться так, як завжди поводилася книжка.