Designanteckningar
Hur vecket blev en rygg
Varje vikbar telefon har en linje i mitten. För de flesta appar är den något att arbeta runt. För en bok är den det mest naturliga i världen: böcker har alltid haft en. Så här lärde sig Tomelets läsare att behandla vikningen som en rygg – och designreglerna bakom det.
Gratis, utan konto. Uppslag ingår i den gratis läsaren.
Problemet: en telefonsida, utdragen
Fäll upp en vikbar telefon så blir en app gjord för telefonformat helt enkelt bredare. Raderna blir för långa att läsa, text löper över vecket och en knapp kan hamna på vikningen. Stäng telefonen så byggs skärmen upp på nytt, en sida eller ett kapitel från där du var.
Apple publicerade designriktlinjer tillsammans med iPhone Duo; Android har sina egna för vikbara enheter. De är överens om mer än de skiljer sig åt, och Tomelet följer båda med en och samma läsare, på en iPhone Duo och på en Galaxy Z Fold. Fem regler formade den.
1. Vikningen är ett reserverat område
Apple kallar vikningen ett reserverat område: en del av skärmen som en app bör hålla fri. Android talar om exakt var vikningen sitter, och Tomelet lägger innermarginalen mellan de två sidorna precis där och håller tryckytor, knappar och markeringshandtag borta från den. Ett pennstreck som korsar vikningen delas mellan de två sidorna, så att varje sida behåller det bläck som hör till den.
På iPhone Duo skickar Flutter, verktygslådan Tomelet är skrivet i, ännu inte vikningens position vidare till appar (flutter/flutter#192515), så Tomelet centrerar innermarginalen på skärmen.
Det är steget från veck till rygg. I en tryckt bok trycks ingenting i innermarginalen heller. Det är där de två sidorna möts.
2. Att vika är inte att lämna
Apple ber om en sammanhängande upplevelse medan enheten öppnas och stängs. Samsung ber appar att behålla rullningspositionen och all text som håller på att skrivas. Tomelet behandlar en vikning som en ändrad skärmstorlek, aldrig som navigering.
Sidnummer klarar inte det: ytterskärmen visar en sida i en annan storlek, så boken har ett annat antal sidor efter varje vikning. Tomelet minns i stället din plats som en position i texten: det första tecknet på vänstersidan. Det sätter boken på nytt och öppnar sidan som innehåller det tecknet, och den förra bilden ligger kvar på skärmen tills den nya är klar. Markeringar, anteckningar och bläck är förankrade i ord, så de följer med.
Ingenting öppnas på nytt och ingen annons dyker upp: att vika ihop telefonen tar dig aldrig ut ur boken.
3. Storlek, inte rotation
Innerskärmen på iPhone Duo struntar i en apps rotationslås, och Android 17 gör likadant på stora skärmar. Hur telefonen är vänd kan alltså inte bestämma layouten. Tomelet tittar på hur mycket plats sidan har: två sidor när var och en förblir bekväm att läsa, en när den inte skulle vara det. Samma regel gäller på en surfplatta, en telefon som hålls på tvären och i ett skrivbordsfönster.
Paren kommer från den tryckta boken, inte från en bildkarusell. Första sidan står för sig, sedan 2–3, 4–5, så att ett uppslag som förlaget formgett alltid hamnar samlat. Arabiska, hebreiska och vertikala japanska böcker börjar till höger och bläddras åt vänster. En bok med fast layout som anger en orientering får ett enradigt tips som du kan stänga; läsaren roterar aldrig telefonen åt dig.
4. Läget ändrar arrangemanget, inte boken
Apples riktlinjer säger att gångjärnsvinkeln är ”för interaktioner och effekter … inte för layout”. Tomelet håller med, så ingen effekt på sidan följer gångjärnet. Det ett läge ändrar på Android är kompositionen runt boken.
På en vikbar Android-telefon som meddelar att den är halvöppen och som du håller som en bok får du en sida på var sida om vikningen, med kontrollerna vid ytterkanterna. Ställ den vikbara Android-telefonen halvöppen på ett bord så flyttar sidan upp medan kontrollerna flyttar ned: sidreglage, innehåll, anteckningar, utseende. Det är idén bakom Flex Mode, inbyggd i läsaren på Android.
På iPhone Duo behåller Tomelet layouten för en uppslagen bok i alla vinklar, redo för den dag Flutter skickar gångjärnets läge vidare till appar.
5. Tangentbordet
Vik ihop telefonen med tangentbordet uppe så behåller sökfältet eller anteckningen du skrev i sin text, sitt fokus och sin markör.
Delad skärm
Bredvid en annan app, i Split View på iPhone Duo eller på delad skärm på Android, visar Tomelet en sida, gissar inte var vikningen sitter och håller sina kontroller vid ytterkanterna.
En penna i marginalen
Apple tar Apple Pencil (USB-C) till båda skärmarna på iPhone Duo, och Tomelets pennverktyg är redo att möta den: skriv i marginalen i EPUB lika väl som i PDF, markera en rad med ett enda drag, skriv med pennan medan fingrarna bläddrar, panorerar och zoomar. Bläcket är förankrat i texten, så en marginalanteckning stannar bredvid sitt stycke när en vikning sätter om sidan. Ett drag över vecket delas mellan de två sidorna.
Det vi inte byggde
Effekter på sidan som följer gångjärnsvinkeln
En sida ska inte vingla när du ändrar grepp.
Ett andra Tomelet-fönster på iPhone
Ett fönster som delar skärmen väl räcker.
Varför en rygg
En bok är den äldsta vikbara skärmen som finns. Ryggen är där den böjs, där ingenting är tryckt och där två sidor kommer överens om att mötas. Att behandla vecket som en rygg var ingen metafor lagd över tekniken. Det var den kortaste vägen till en läsare som beter sig som en bok redan gör.