พื้นที่ว่างไม่ได้ว่างเปล่า

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

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

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

เปิดแอปของคุณ แล้วมองแบบไม่ต้องอ่านทุกคำ

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

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

พื้นที่ว่างทำงานเหมือนเมนูร้านอาหารที่จัดดี

ลองนึกถึงเมนูร้านอาหารสองแบบ

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

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

พื้นที่ว่างมี 2 แบบที่ควรรู้จัก

แบบแรกคือ Padding (ระยะห่างภายใน) คือระยะระหว่างเนื้อหากับขอบของกล่องหรือ section

ถ้า padding น้อยเกินไป ข้อความจะดูอึดอัดเหมือนถูกดันไปติดผนัง

แบบที่สองคือ Margin (ระยะห่างภายนอก) คือระยะห่างระหว่าง section หรือก้อนข้อมูลหนึ่งกับอีกก้อนหนึ่ง

ถ้า margin น้อยเกินไป ทุกอย่างจะดูเบียดกันจนไม่รู้ว่าอะไรควรอ่านเป็นชุดเดียว และอะไรควรแยกกัน

สิ่งที่มือใหม่มักทำเหมือนกันคือ คิดว่าใส่พื้นที่ว่างแค่นิดเดียวก็พอ แต่ความจริงส่วนใหญ่มันยังน้อยกว่าที่คิด

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

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

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

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

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

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

Prompt template

บทนี้เราไม่ได้บอก AI ให้ “เว้นเยอะๆ” แบบกว้างเกินไป แต่จะบอกชัดว่าต้องการพื้นที่ว่างตรงไหนและเพื่ออะไร

Prompt template:

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

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

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

สังเกตว่าคำสั่งนี้ไม่ได้พูดเรื่องตัวเลขเลย

มันพูดถึงความรู้สึกที่ต้องการให้เกิดขึ้นบนหน้าจอ ซึ่งเป็นสิ่งที่ AI แปลต่อเป็นการออกแบบได้

สำหรับแอปของคุณ ให้เลือกจุดที่แน่นที่สุดก่อน

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

ส่วนที่มักแน่นบ่อยมีแบบนี้:

• ฟอร์มที่มีหลายช่องกรอก
• การ์ดหรือรายการที่เรียงติดกันเกินไป
• กล่องสรุปข้อมูลที่ข้อความชิดขอบ
• หน้าที่มีหลาย section อยู่ในหน้าเดียว

เวลาปรับ อย่าคิดแค่ว่า “อยากให้มีช่องว่าง” แต่ให้คิดว่า “อยากให้คนอ่านตรงนี้สบายขึ้น” หรือ “อยากให้สองก้อนนี้แยกกันชัดขึ้น”

ลงมือทำ — เพิ่มพื้นที่ว่าง แล้วดูว่าหน้าจอหายใจขึ้นไหม

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

หลังจาก AI ปรับแล้ว ลองถามตัวเองว่า:

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

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

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

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