Notas de design
Como o vinco virou lombada
Todo celular dobrável tem uma linha no meio. Para a maioria dos apps, é algo a contornar. Para um livro, é a coisa mais natural do mundo: os livros sempre tiveram uma. Foi assim que o leitor do Tomelet aprendeu a tratar a dobra como lombada, e estas são as regras de design por trás disso.
Grátis, sem conta. As páginas lado a lado fazem parte do leitor gratuito.
O problema: uma página de celular, esticada
Abra um dobrável e um app feito para celular simplesmente fica mais largo. As linhas ficam longas demais para ler, o texto atravessa o vinco e um botão pode cair em cima da dobra. Feche o celular e a tela é reconstruída, a uma página ou a um capítulo de onde você estava.
A Apple publicou diretrizes de design com o iPhone Duo; o Android tem as suas para dobráveis. Elas concordam mais do que divergem, e o Tomelet segue as duas com um só leitor, no iPhone Duo e no Galaxy Z Fold. Cinco regras lhe deram forma.
1. A dobra é uma região reservada
A Apple chama a dobra de região reservada: uma parte da tela que um app deve deixar livre. O Android diz ao app exatamente onde fica a dobra, e o Tomelet põe ali mesmo a medianiz entre as duas páginas, mantendo fora dela as áreas de toque, os botões e as alças de seleção. Um traço de caneta que cruza a dobra é dividido entre as duas páginas, para que cada página fique com a tinta que lhe pertence.
No iPhone Duo, o Flutter, o kit de ferramentas em que o Tomelet é escrito, ainda não passa a posição da dobra para os apps (flutter/flutter#192515), então o Tomelet centraliza a medianiz na tela.
Esse é o passo do vinco à lombada. Num livro impresso também não se imprime nada na medianiz. É ali que as duas páginas se encontram.
2. Dobrar não é sair
A Apple pede uma experiência contínua enquanto o aparelho abre e fecha. A Samsung pede aos apps que mantenham a posição de rolagem e qualquer texto sendo digitado. O Tomelet trata uma dobra como uma mudança no tamanho da tela, nunca como navegação.
Números de página não sobrevivem a isso: a tela externa mostra uma página de outro tamanho, então o livro tem outro número de páginas depois de cada dobra. Por isso o Tomelet lembra sua posição como um ponto no texto: o primeiro caractere da página da esquerda. Ele diagrama o livro de novo e abre a página que contém esse caractere, e o quadro anterior fica na tela até o novo estar pronto. Destaques, notas e tinta são ancorados às palavras, então se movem com elas.
Nada reabre e nenhum anúncio aparece: dobrar nunca tira você do livro.
3. Tamanho, não rotação
A tela interna do iPhone Duo ignora o bloqueio de rotação de um app, e o Android 17 faz o mesmo em telas grandes. Então a posição em que o celular está virado não pode decidir o layout. O Tomelet olha quanto espaço a página tem: duas páginas quando cada uma continua confortável de ler, uma quando não continuaria. A mesma regra vale num tablet, num celular na horizontal e numa janela de computador.
Os pares vêm da impressão, não de um carrossel de fotos. A primeira página fica sozinha, depois 2–3, 4–5, para que uma página dupla criada pela editora sempre caia inteira. Livros em árabe, hebraico e japonês vertical começam pela direita e viram para a esquerda. Um livro de layout fixo que declara uma orientação mostra uma dica de uma linha que você pode dispensar; o leitor nunca gira o celular por você.
4. A postura muda a disposição, não o livro
As diretrizes da Apple dizem que o ângulo da dobradiça serve “para interações e efeitos… não para o layout”. O Tomelet concorda, então nenhum efeito de página acompanha a dobradiça. O que uma postura muda, no Android, é a composição em volta do livro.
Num dobrável Android que informa que está meio aberto, segurado como um livro, você tem uma página de cada lado da dobra, com os controles nas bordas externas. Apoie o dobrável Android meio aberto sobre uma mesa e a página sobe para o andar de cima enquanto os controles descem para o de baixo: controle deslizante de páginas, sumário, notas, aparência. É a ideia do Flex Mode, embutida no leitor no Android.
No iPhone Duo, o Tomelet mantém o layout de livro aberto em qualquer ângulo, pronto para o dia em que o Flutter passar o estado da dobradiça para os apps.
5. O teclado
Dobre o celular com o teclado aberto e o campo de busca ou a nota que você estava digitando mantém o texto, o foco e o cursor.
Dividindo a tela
Ao lado de outro app, em Split View no iPhone Duo ou em tela dividida no Android, o Tomelet mostra uma página, não tenta adivinhar onde fica a dobra e mantém seus controles nas bordas externas.
Uma caneta na margem
A Apple está trazendo o Apple Pencil (USB-C) para as duas telas do iPhone Duo, e as ferramentas de caneta do Tomelet estão prontas para recebê-lo: escreva nas margens de EPUB e PDF, destaque uma linha com um só traço, escreva com o Pencil enquanto seus dedos viram as páginas, movem e dão zoom. A tinta é ancorada ao texto, então uma nota na margem fica ao lado do seu parágrafo quando uma dobra rediagrama a página. Um traço desenhado sobre o vinco é dividido entre as duas páginas.
O que não fizemos
Efeitos de página que acompanham o ângulo da dobradiça
Uma página não deveria balançar quando você ajusta a mão.
Uma segunda janela do Tomelet no iPhone
Uma só janela que divide bem a tela já basta.
Por que uma lombada
O livro é a tela dobrável mais antiga que existe. A lombada é onde ele dobra, onde nada é impresso e onde duas páginas combinam de se encontrar. Tratar o vinco como lombada não foi uma metáfora aplicada por cima da engenharia. Foi o caminho mais curto para um leitor que se comporta como um livro já se comporta.