設計筆記
摺痕如何成了書背
每支摺疊手機中間都有一道線。對大多數 App 來說,這是需要繞開的麻煩。對一本書來說,這卻再自然不過:書一直都有這麼一道線。以下說說 Tomelet 的閱讀器如何學會把摺痕當作書背,以及背後的設計原則。
免費,無需帳號。對頁閱讀屬於免費閱讀器。
問題所在:被硬拉寬的手機頁面
打開一支摺疊手機,按手機形狀設計的 App 只是變寬了。一行長得沒法讀,文字跨過摺痕,按鈕也可能落在摺痕上。闔上手機,螢幕被整個重建,離你原來的位置差出一頁甚至一章。
Apple 隨 iPhone Duo 發布了設計指南;Android 也有自己的摺疊裝置指南。兩者的共識多於分歧,Tomelet 用同一個閱讀器同時遵循兩者,無論是在 iPhone Duo 上還是在 Galaxy Z Fold 上。塑造它的,是五條原則。
1. 摺痕是保留區域
Apple 把摺痕稱為保留區域:App 應當留空的一塊螢幕。Android 會準確告訴 App 摺痕在哪裡,Tomelet 就把兩頁之間的中縫放在那裡,並讓點按區域、按鈕和選取控點都遠離它。一筆跨過摺痕的筆跡會在兩頁之間拆開,讓每一頁保留屬於自己的墨跡。
在 iPhone Duo 上,撰寫 Tomelet 所用的開發工具包 Flutter 目前還不會把摺痕的位置傳給 App(flutter/flutter#192515),因此 Tomelet 把中縫放在螢幕正中。
這就是從摺痕到書背的那一步。紙本書的中縫裡同樣什麼也不印。那是兩頁相接的地方。
2. 摺疊不是離開
Apple 要求裝置展開和闔上時體驗保持連續。Samsung 要求 App 保留捲動位置和正在輸入的文字。Tomelet 把一次摺疊當作螢幕尺寸的變化,絕不當作一次頁面跳轉。
頁碼經不起這種變化:外螢幕以不同的尺寸顯示單頁,所以每摺疊一次,書的總頁數都不一樣。Tomelet 改為用內文中的位置記住你讀到哪裡:左頁上的第一個字元。它重新排版整本書,打開包含那個字元的那一頁,在新畫面準備好之前,上一幀畫面一直留在螢幕上。重點標示、筆記和墨跡都錨定在文字上,所以會隨文字一起移動。
不會重新開啟,也不會出現廣告:摺疊永遠不會把你帶出這本書。
3. 看尺寸,不看旋轉
iPhone Duo 的內螢幕會忽略 App 的旋轉鎖定,Android 17 在大螢幕上也是如此。所以手機朝哪個方向拿,不能決定版面。Tomelet 看的是頁面有多少空間:每一頁都還能舒適閱讀時顯示兩頁,不能時顯示一頁。同一條規則也適用於平板、橫握的手機和桌面視窗。
頁面的配對來自印刷書,而不是相片輪播。第一頁單獨成頁,然後是 2–3、4–5,因此出版社設計的跨頁總能完整地落在一起。阿拉伯文、希伯來文和直排日文書從右邊開始,向左翻頁。宣告了螢幕方向的固定版面書,會顯示一行可以關閉的提示;閱讀器絕不會替你旋轉手機。
4. 姿態改變的是版面安排,而不是書
Apple 的指南說,鉸鏈角度是「用於互動和效果……而非用於版面配置」。Tomelet 同意這一點,所以沒有任何頁面效果會跟著鉸鏈變化。在 Android 上,姿態改變的是書周圍的版面安排。
在回報自己處於半開狀態的 Android 摺疊手機上,像書一樣拿著時,摺痕兩側各有一頁,控制項位於外側邊緣。把 Android 摺疊手機半開著放在桌上,頁面就移到上半螢幕,控制項移到下半螢幕:頁面滑桿、目錄、筆記、外觀。這正是 Flex Mode 的理念,在 Android 上直接內建於閱讀器中。
在 iPhone Duo 上,Tomelet 在任何角度都保持攤開書本的版面,只待 Flutter 把鉸鏈狀態傳給 App 的那一天。
5. 鍵盤
鍵盤彈出時摺疊手機,你正在輸入的搜尋欄或筆記,仍會保留其中的文字、焦點和游標。
共用螢幕
與另一個 App 並排時——無論是 iPhone Duo 上的 Split View,還是 Android 上的分割畫面——Tomelet 都只顯示一頁,不去猜測摺痕的位置,並把控制項留在外側邊緣。
頁邊的一支筆
Apple 將為 iPhone Duo 的兩塊螢幕帶來 Apple Pencil(USB-C),Tomelet 的筆工具已經準備好迎接它:在 EPUB 和 PDF 的頁邊書寫,一筆標示一行重點,用 Pencil 書寫的同時,手指照樣翻頁、平移和縮放。墨跡錨定在內文上,所以當摺疊讓頁面重新排版時,頁邊筆記仍留在它所在段落的旁邊。跨過摺痕畫下的一筆,會在兩頁之間拆開。
我們沒有做的
隨鉸鏈角度變化的頁面效果
你調整握姿時,頁面不該跟著晃動。
在 iPhone 上開第二個 Tomelet 視窗
一個能與其他 App 好好共用螢幕的視窗,就夠了。
為什麼是書背
書是世上最古老的摺疊螢幕。書背是它彎摺的地方,是什麼也不印的地方,也是兩頁約好相會的地方。把摺痕當作書背,並不是給工程硬套上的一個比喻,而是通往一款閱讀器的最短路徑:讓它的表現,和一本書本來的樣子一模一樣。