ตัวอักษรเปลี่ยนทุกอย่าง

หลังจากจัด layout ให้เรียบร้อยและคุมสีให้มีทิศทางแล้ว แอปของคุณน่าจะดูนิ่งขึ้นมาก

แต่ยังมีอีกจุดหนึ่งที่ทำให้หลายหน้าจอยังดู “แบน” อยู่ นั่นคือข้อความทุกอย่างดูสำคัญเท่ากันหมด หัวข้อก็เสียงเท่ากับรายละเอียด วันที่ก็ดังพอๆ กับปุ่มหลัก

ลองสังเกตก่อน ว่าตอนนี้สายตาคุณอ่านหน้าแอปยังไง

เปิดแอปของคุณ แล้วมองจากบนลงล่างแบบคนที่เพิ่งเห็นครั้งแรก

ถ้าคุณยังตอบไม่ได้ทันทีว่าอะไรคือหัวข้อหลัก อะไรคือข้อมูลรอง หรืออะไรคือข้อความที่ควรอ่านก่อน แปลว่าตัวอักษรยังไม่ได้ช่วยนำทางพอ

ข้อความในแอปไม่ได้มีไว้แค่บอกข้อมูล แต่มันช่วยจัดลำดับให้สายตาด้วย

ตัวอักษรทำงานเหมือนหน้าหนังสือพิมพ์

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

คุณยังไม่ได้อ่านด้วยซ้ำ แต่ขนาดและน้ำหนักของตัวอักษรก็บอกลำดับความสำคัญให้แล้ว แอปของคุณก็ควรทำแบบเดียวกัน

บทนี้เราไม่ได้ต้องการ font แปลกใหม่ หรือสไตล์หวือหวา เราแค่ต้องการให้ข้อความแต่ละชนิดมีบทบาทของมันชัดขึ้น

ใช้แค่ 3 ระดับของข้อความก็ช่วยได้มากแล้ว

ระดับที่สำคัญที่สุดคือ Heading (หัวข้อหลัก) มันควรเด่นพอให้รู้ทันทีว่าหน้านี้คือหน้าอะไร

ระดับถัดมาคือ Subheading (หัวข้อย่อย) ใช้กับชื่อ section หรือชื่อก้อนข้อมูล เพื่อให้คนไล่ดูหน้าได้ง่าย

ระดับสุดท้ายคือ Body text (ข้อความเนื้อหา) ซึ่งเป็นข้อความทั่วไปที่ใช้สำหรับอ่านรายละเอียดจริง

นอกจากนี้ยังมีข้อความรอง เช่น วันที่ เวลา คำอธิบายสั้นๆ หรือข้อมูลประกอบ ซึ่งควรเบากว่าเนื้อหาหลักเล็กน้อย

สิ่งสำคัญคือ อย่าให้ทุกอย่างดังเท่ากัน เพราะถ้าทุกอย่างตะโกนพร้อมกัน สุดท้ายจะเหมือนไม่มีอะไรเด่นเลย

ตัวอย่างก่อน — แอปติดตามค่าใช้จ่ายที่มีข้อความทุกชิ้นเสียงเท่ากัน

ลองนึกถึงแอปติดตามค่าใช้จ่ายที่หัวข้อแอป ข้อความยอดรวม ชื่อรายการ วันที่ และปุ่มต่างๆ ดูใกล้เคียงกันไปหมด

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

ทีนี้ลองดูเวอร์ชันหลังปรับ

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

Prompt template

แม่แบบของบทนี้คือบอก AI ให้สร้าง hierarchy ของข้อความให้ชัด โดยยังใช้ภาษาธรรมดา ไม่ต้องพูดเรื่องตัวเลขหรือ CSS

Prompt template:

ปรับ typography ของ [หน้าหรือส่วนที่ต้องการ] ให้มีลำดับความสำคัญที่ชัดเจน
- หัวข้อหลักให้เด่นที่สุด
- หัวข้อย่อยให้เด่นรองลงมา
- ข้อความเนื้อหาให้อ่านง่ายสบายตา
- ข้อความรอง เช่น วันที่ เวลา หรือคำอธิบาย ให้ดูเบากว่าเนื้อหาหลัก
ใช้รูปแบบตัวอักษรให้สม่ำเสมอทั้งหน้า
ไม่เปลี่ยนฟังก์ชันใดๆ ที่มีอยู่แล้ว

ตัวอย่างจริง:

ปรับ typography ของหน้าหลักแอปติดตามค่าใช้จ่ายให้มีลำดับความสำคัญที่ชัดเจน
- ชื่อแอปด้านบนให้เด่นที่สุด
- หัวข้อของส่วนยอดรวมและส่วนรายการให้เด่นรองลงมา
- รายการค่าใช้จ่ายให้อ่านง่ายสบายตา
- วันที่และข้อมูลรองของแต่ละรายการให้ดูเบากว่าชื่อรายการ
ใช้รูปแบบตัวอักษรให้สม่ำเสมอทั้งหน้า
ไม่เปลี่ยนฟังก์ชันใดๆ ที่มีอยู่แล้ว

สังเกตว่าเราไม่ได้ขอ font ใหม่หลายแบบ

เรากำลังขอให้ AI ทำสิ่งที่สำคัญกว่า คือทำให้ข้อความมีบทบาทต่างกันอย่างชัดเจน

สำหรับแอปของคุณ ให้เริ่มจากหน้าเดียวก่อน

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

เช่นหน้าที่มีทั้งหัวข้อ ฟอร์ม รายการ การ์ด หรือข้อความอธิบาย เพราะหน้าพวกนี้มักเป็นจุดที่ hierarchy ช่วยเยอะมาก

เวลาปรับให้ลองคิดแบบนี้:

• ข้อความไหนคือสิ่งที่คนต้องเห็นก่อน
• ข้อความไหนเป็นแค่ตัวช่วย
• ข้อความไหนไม่ควรแย่งความสำคัญจากอย่างอื่น

ลงมือทำ — ปรับข้อความ แล้วดูว่าสายตาไปไหนก่อน

1. เปิดแอปของคุณใน Lovable
2. เลือกหน้าที่มีข้อความหลายระดับอยู่ในหน้าเดียว
3. เอา prompt template ไปเติมให้เข้ากับแอปของคุณ
4. ส่ง prompt แล้วรอดูผล
5. กลับมามองหน้าเดิมอีกครั้ง โดยถามตัวเองว่า ตอนนี้สายตาไปจุดไหนก่อน

สิ่งที่คุณควรมองหาไม่ใช่แค่ “ตัวหนังสือสวยขึ้นไหม”

แต่คือ “ตอนนี้ฉันรู้หรือยังว่าอะไรสำคัญที่สุดของหน้านี้”

คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง

• คุณเริ่มเห็นแล้วว่าตัวอักษรไม่ได้มีไว้แค่อ่าน แต่ช่วยนำทางสายตาด้วย
• คุณรู้จัก 3 ระดับพื้นฐานของข้อความ: heading, subheading และ body text
• คุณมี prompt template สำหรับทำให้หน้าจอมี hierarchy ที่ชัดขึ้น
• แอปของคุณเริ่มบอกคนดูได้เองว่าอะไรควรอ่านก่อน อะไรควรอ่านทีหลัง

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