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

หน้าต่างเดียวที่แบ่งหน้าจอได้ดีก็เพียงพอแล้ว

ทำไมต้องเป็นสันหนังสือ

หนังสือคือจอพับได้ที่เก่าแก่ที่สุดเท่าที่มี สันของมันคือที่ที่มันพับงอ ที่ที่ไม่มีอะไรพิมพ์ไว้ และที่ที่สองหน้าตกลงมาพบกัน การมองรอยพับเป็นสันหนังสือไม่ใช่อุปมาที่แปะทับงานวิศวกรรม แต่คือทางที่สั้นที่สุดสู่โปรแกรมอ่านที่ทำตัวแบบที่หนังสือทำอยู่แล้ว