Ghi chép thiết kế
Nếp gập đã thành gáy sách thế nào
Mọi điện thoại gập đều có một đường ở giữa. Với phần lớn ứng dụng, đó là thứ phải tìm cách né. Với một cuốn sách, đó là điều tự nhiên nhất trên đời: sách từ xưa đã có một đường như thế. Đây là cách trình đọc của Tomelet học được cách coi nếp gập là gáy sách, cùng những nguyên tắc thiết kế đằng sau.
Miễn phí, không cần tài khoản. Trang đối diện là một phần của trình đọc miễn phí.
Vấn đề: một trang điện thoại bị kéo giãn
Mở một chiếc điện thoại gập, và ứng dụng thiết kế cho màn hình điện thoại chỉ đơn giản là rộng ra. Dòng chữ dài đến mức khó đọc, chữ chạy qua nếp gập, và một nút bấm có thể rơi đúng vào nếp gập. Gập máy lại, màn hình được dựng lại, lệch một trang hay một chương so với chỗ bạn đang đọc.
Apple công bố hướng dẫn thiết kế cùng với iPhone Duo; Android có hướng dẫn riêng cho điện thoại gập. Hai bên giống nhau nhiều hơn khác, và Tomelet theo cả hai bằng một trình đọc duy nhất, trên iPhone Duo cũng như trên Galaxy Z Fold. Năm nguyên tắc đã định hình nó.
1. Nếp gập là vùng dành riêng
Apple gọi nếp gập là “vùng dành riêng”: một phần màn hình mà ứng dụng nên để trống. Android cho ứng dụng biết chính xác nếp gập nằm ở đâu, và Tomelet đặt khe giữa hai trang đúng ở đó, giữ các vùng chạm, nút bấm và tay nắm chọn chữ ra khỏi khe ấy. Một nét bút vẽ qua nếp gập được chia giữa hai trang, để mỗi trang giữ phần mực thuộc về nó.
Trên iPhone Duo, Flutter, bộ công cụ dùng để viết Tomelet, chưa truyền vị trí nếp gập cho ứng dụng (flutter/flutter#192515), nên Tomelet đặt khe giữa ở chính giữa màn hình.
Đó là bước từ nếp gập thành gáy sách. Trong sách in, khe giữa cũng không in gì cả. Đó là nơi hai trang gặp nhau.
2. Gập máy không phải là rời đi
Apple yêu cầu một trải nghiệm liền mạch khi thiết bị mở ra và gập lại. Samsung yêu cầu ứng dụng giữ vị trí cuộn và mọi đoạn chữ đang gõ. Tomelet coi việc gập máy là một thay đổi kích thước màn hình, không bao giờ là một thao tác điều hướng.
Số trang không trụ nổi điều đó: màn hình ngoài hiện một trang ở kích thước khác, nên sau mỗi lần gập cuốn sách lại có số trang khác. Vì vậy Tomelet ghi nhớ chỗ bạn đọc như một vị trí trong văn bản: ký tự đầu tiên của trang bên trái. Nó dàn lại cuốn sách và mở trang chứa ký tự đó, còn khung hình trước vẫn ở trên màn hình cho đến khi khung mới sẵn sàng. Tô sáng, ghi chú và nét mực được neo vào chữ, nên chúng di chuyển cùng chữ.
Không gì mở lại và không quảng cáo nào xuất hiện: gập máy không bao giờ đưa bạn ra khỏi cuốn sách.
3. Kích thước, không phải hướng xoay
Màn hình trong của iPhone Duo bỏ qua khóa xoay của ứng dụng, và Android 17 cũng làm vậy trên màn hình lớn. Vì thế chiều cầm máy không thể quyết định bố cục. Tomelet nhìn vào khoảng trống trang sách có: hai trang khi mỗi trang vẫn đọc thoải mái, một trang khi không. Cùng một quy tắc chạy trên máy tính bảng, điện thoại cầm ngang và cửa sổ máy tính.
Các cặp trang đến từ sách in, không phải từ một băng chuyền ảnh. Trang đầu đứng riêng, rồi 2–3, 4–5, nên một cặp trang nhà xuất bản đã thiết kế luôn hiện cùng nhau. Sách tiếng Ả Rập, tiếng Do Thái và tiếng Nhật dọc bắt đầu bên phải và lật sang trái. Một cuốn sách bố cục cố định có khai báo hướng màn hình sẽ hiện một dòng gợi ý bạn có thể đóng; trình đọc không bao giờ tự xoay điện thoại thay bạn.
4. Tư thế đổi cách sắp xếp, không đổi cuốn sách
Hướng dẫn của Apple nói góc bản lề là “dành cho tương tác và hiệu ứng… không dành cho bố cục”. Tomelet đồng ý, nên không có hiệu ứng trang nào chạy theo bản lề. Thứ một tư thế thay đổi, trên Android, là cách bố trí quanh cuốn sách.
Trên một điện thoại gập Android báo rằng nó đang mở một nửa, cầm như cầm sách, bạn có một trang mỗi bên nếp gập, các nút điều khiển nằm ở mép ngoài. Đặt điện thoại gập Android mở một nửa trên bàn, trang sách dời lên tầng trên còn các nút điều khiển xuống tầng dưới: thanh trượt trang, mục lục, ghi chú, giao diện. Đó là ý tưởng Flex Mode, được dựng sẵn vào trình đọc trên Android.
Trên iPhone Duo, Tomelet giữ bố cục sách mở ở mọi góc, sẵn sàng cho ngày Flutter truyền trạng thái bản lề cho ứng dụng.
5. Bàn phím
Gập máy khi bàn phím đang mở, ô tìm kiếm hay ghi chú bạn đang gõ vẫn giữ nguyên chữ, tiêu điểm và con trỏ.
Dùng chung màn hình
Khi nằm cạnh một ứng dụng khác, trong Split View trên iPhone Duo hay chia đôi màn hình trên Android, Tomelet hiện một trang, không phỏng đoán vị trí nếp gập, và giữ các nút điều khiển ở mép ngoài.
Một cây bút bên lề
Apple đang đưa Apple Pencil (USB-C) đến cả hai màn hình của iPhone Duo, và công cụ bút của Tomelet đã sẵn sàng đón nó: viết bên lề trên EPUB cũng như PDF, tô sáng một dòng chỉ bằng một nét, viết mực bằng Pencil trong khi ngón tay bạn lật trang, kéo và thu phóng. Nét mực được neo vào văn bản, nên một ghi chú bên lề vẫn ở cạnh đoạn văn của nó khi một lần gập dàn lại trang. Một nét vẽ qua nếp gập được chia giữa hai trang.
Những gì chúng tôi không làm
Hiệu ứng trang chạy theo góc bản lề
Trang sách không nên chao đảo khi bạn đổi tư thế tay cầm.
Cửa sổ Tomelet thứ hai trên iPhone
Một cửa sổ biết chia sẻ màn hình tốt là đủ.
Vì sao là gáy sách
Cuốn sách là màn hình gập lâu đời nhất từng có. Gáy của nó là nơi nó uốn cong, nơi không in gì cả, và nơi hai trang hẹn gặp nhau. Coi nếp gập là gáy sách không phải một phép ẩn dụ phủ lên phần kỹ thuật. Đó là con đường ngắn nhất tới một trình đọc cư xử đúng như cách một cuốn sách vẫn luôn làm.