หลายคนพออยากให้แอปดูดี จะรีบไปเปลี่ยนสี เปลี่ยน font หรือหา style ใหม่ทันที
แต่บ่อยครั้งปัญหายังไม่ใช่เรื่องสวย มันคือแอปยังดูรก ของแต่ละอย่างเหมือนวางกันคนละที่ ระยะห่างไม่เท่ากัน แล้วสายตาไม่รู้จะเริ่มมองตรงไหนก่อน
ลองสังเกตก่อน ว่าความรู้สึก “ยังไม่สวย” จริงๆ คืออะไร
เปิดแอปของคุณขึ้นมา แล้วอย่าเพิ่งอ่านข้อความทั้งหมด
ให้มองภาพรวมก่อนเหมือนกำลังมองห้องหนึ่งห้อง แล้วถามตัวเองว่า ของต่างๆ ดูเหมือนตั้งใจวางไว้ หรือเหมือนค่อยๆ งอกออกมาทีละชิ้น
มองหา 3 อย่างนี้ในแอปของคุณ:
- ปุ่มกับช่องกรอกวางตรงแนวเดียวกันไหม
- ระยะห่างระหว่างแต่ละส่วนดูสม่ำเสมอไหม
- ของที่เกี่ยวกันดูอยู่ใกล้กันพอ หรือกระจายกันจนต้องคอยไล่สายตา
ถ้าคุณรู้สึกว่า “มันยังไม่เรียบร้อย” แม้จะยังบอกไม่ถูก นั่นแปลว่าคุณกำลังเห็นปัญหาที่ถูกแล้ว
ก่อนจะสวย ต้องเรียบร้อยก่อน
แอปที่ใช้สีธรรมดา แต่จัดทุกอย่างเป็นระเบียบ มักดูดีกว่าแอปที่สีสวยแต่ทุกอย่างวางกันมั่ว
มันเหมือนชั้นหนังสือ ต่อให้หนังสือแต่ละเล่มสีไม่เหมือนกัน ถ้าวางตรงแนวเดียวกัน สูงต่ำไม่สะเปะสะปะ และมีช่องไฟสม่ำเสมอ มันก็ดูดีเอง แต่ถ้ายัดกันคนละมุม ต่อให้ปกสวยแค่ไหนก็ยังดูรกอยู่ดี
บทนี้เราเลยยังไม่แตะเรื่องสีหรือ font เป้าหมายมีอย่างเดียว: ทำให้แอปดูเป็นระเบียบ
สิ่งที่ทำให้แอปดูเรียบร้อยขึ้นทันที
มีอยู่ 3 เรื่องที่ช่วยเยอะมาก
Alignment (การจัดแนว) คือของที่ควรอยู่แนวเดียวกัน ก็ควรเรียงตรงกัน ไม่ลอยคนละเส้น
Spacing (ระยะห่าง) คือช่องว่างระหว่างส่วนต่างๆ ควรให้ความรู้สึกสม่ำเสมอ ไม่ใช่ตรงหนึ่งชิดมาก แต่อีกตรงห่างมาก
Grouping (การจัดกลุ่ม) คือของที่เกี่ยวกันควรอยู่ใกล้กัน ส่วนที่คนละเรื่องกันควรห่างออกไปให้รู้สึกว่าเป็นคนละก้อน
ถ้าสามอย่างนี้เริ่มเข้าที่ แอปจะดูนิ่งขึ้นทันที แม้ยังไม่ได้ตกแต่งอะไรเพิ่ม
ตัวอย่างก่อน — ดูแอปติดตามค่าใช้จ่ายแบบก่อนและหลัง
ลองนึกถึงแอปติดตามค่าใช้จ่ายแบบก่อนปรับ
ช่องกรอกชื่อรายการกว้างไม่เท่าช่องจำนวนเงิน ปุ่มเพิ่มรายจ่ายลอยไปทางขวา ยอดรวมอยู่สูงเกินไปจนเหมือนเป็นคนละส่วนกับรายการด้านล่าง แต่ละก้อนห่างกันไม่เท่ากัน ทำให้ทั้งหน้าเหมือนมีของครบ แต่ไม่มีอะไรอยู่ถูกที่
ทีนี้ลองดูแบบหลังปรับ โดยยังใช้สีเดิมทุกอย่างเหมือนเดิม
ช่องกรอกเรียงตรงกัน ปุ่มหลักอยู่ในแนวเดียวกับฟอร์ม ยอดรวมกับส่วนเพิ่มรายการอยู่ใกล้กันพอให้รู้ว่าเกี่ยวกัน แล้วรายการด้านล่างเว้นระยะหายใจพอดี พอทุกอย่างเข้าที่ สายตาจะไหลจากบนลงล่างได้ง่ายขึ้นทันที
สิ่งที่เปลี่ยนไม่ใช่ความหวือหวา แต่คือความรู้สึกว่าแอปนี้มีคนจัดมันไว้แล้ว ไม่ได้ปล่อยให้แต่ละส่วนอยู่กันตามยถากรรม
Prompt template
ใช้ prompt นี้เป็นแม่แบบได้เลย แล้วแทนคำในวงเล็บด้วยสิ่งที่เหมาะกับแอปของคุณ
Prompt template:
ปรับ layout ของ [หน้าหรือส่วนที่ต้องการ] ให้ดูเป็นระเบียบมากขึ้น
- ให้ทุก element จัดแนวตรงกัน
- ให้ spacing ระหว่างแต่ละ section สม่ำเสมอ
- จัดกลุ่มสิ่งที่เกี่ยวข้องกันให้อยู่ใกล้กัน
- ทำให้ส่วนที่ไม่เกี่ยวกันแยกออกจากกันชัดขึ้น
ไม่เปลี่ยนฟังก์ชันใดๆ ที่มีอยู่แล้วตัวอย่างจริง:
ปรับ layout ของหน้าหลักแอปติดตามค่าใช้จ่ายให้ดูเป็นระเบียบมากขึ้น
- ให้ช่องกรอก ปุ่มเพิ่มรายการ และยอดรวมจัดแนวตรงกัน
- ให้ spacing ระหว่างแต่ละ section สม่ำเสมอ
- จัดกลุ่มส่วนเพิ่มรายจ่ายให้อยู่ใกล้กัน
- ทำให้ส่วนรายการด้านล่างแยกจากส่วนกรอกข้อมูลชัดขึ้น
ไม่เปลี่ยนฟังก์ชันใดๆ ที่มีอยู่แล้วสังเกตว่า prompt นี้ไม่ได้ขอให้ “ทำให้สวย” แบบกว้างๆ
มันบอกชัดว่าให้แก้เรื่องความเป็นระเบียบ และยังกันไว้ด้วยว่าอย่าไปแตะฟังก์ชันเดิม
สำหรับแอปของคุณ ให้ใช้แม่แบบเดียวกัน
เลือกแค่ 1 หน้าก่อน ไม่ต้องพยายามจัดทั้งโปรเจกต์ในรอบเดียว
ส่วนที่เหมาะจะเริ่มมากที่สุดมักเป็นหน้าหลัก หรือหน้าที่คุณเปิดบ่อยที่สุด เพราะคุณจะเห็นความต่างได้ชัดสุด
ลองเติม prompt template ให้เข้ากับแอปของคุณ เช่น:
- ถ้าเป็นแอปจองคิว อาจเริ่มที่ส่วนฟอร์มกับรายการคิว
- ถ้าเป็นแอปติดตามงาน อาจเริ่มที่หัวข้อ งานค้าง และปุ่มเพิ่มงาน
- ถ้าเป็นแอปบันทึกอะไรบางอย่าง อาจเริ่มที่ช่องกรอกกับรายการข้อมูลด้านล่าง
ถ้าคุณขอทั้งจัด layout ใหม่ เปลี่ยนสี เปลี่ยน font และทำ mobile พร้อมกัน คุณจะไม่รู้ว่าอะไรคือสิ่งที่ช่วยจริง บทนี้ลองแก้แค่ความเรียบร้อยก่อน
ลงมือทำ — ส่ง prompt แล้วเทียบก่อนกับหลัง
- เปิดแอปของคุณใน Lovable
- มองหน้าปัจจุบันสักรอบ แล้วจำความรู้สึกไว้ว่าอะไรดูรกหรือกระจาย
- เอา prompt template ไปปรับให้เข้ากับแอปของคุณ
- ส่ง prompt แล้วรอดูผล
- กลับมามองภาพรวมอีกครั้ง โดยยังไม่ต้องเพ่งรายละเอียดเล็กๆ
หลังจาก AI ปรับเสร็จ ลองถามตัวเองแค่สองข้อ
- ตอนนี้สายตาไหลบนหน้าจอง่ายขึ้นไหม
- ของที่เกี่ยวกันดูเหมือนอยู่เป็นก้อนเดียวกันมากขึ้นไหม
ถ้าคำตอบคือใช่ แปลว่าคุณมาถูกทางแล้ว
ลองสลับดูภาพก่อนกับหลังในหัวแบบเร็วๆ แล้วถามตัวเองว่า แบบไหนดูเหมือนแอปที่มีคนตั้งใจจัดมากกว่า ถ้าคุณตอบได้ทันที แปลว่าการเปลี่ยนนี้ทำงานแล้ว
คุณเพิ่งทำอะไรสำเร็จไปแล้วบ้าง
- คุณเริ่มเห็นแล้วว่าปัญหาเรื่อง design บางครั้งไม่ใช่เรื่องสี แต่คือเรื่องความเป็นระเบียบ
- คุณรู้จัก 3 หลักสำคัญของหน้าจอที่ดูเรียบร้อย: alignment, spacing, และ grouping
- คุณมี prompt template ที่เอาไปใช้กับหน้าต่างๆ ของแอปตัวเองได้ต่อ
- แอปของคุณดูนิ่งขึ้น อ่านง่ายขึ้น และเหมือนมีคนจัดวางอย่างตั้งใจแล้ว
บทต่อไป เราจะไปต่อที่เรื่องสี แต่ไม่ใช่เพื่อให้แอป “มีสีสวยๆ” อย่างเดียว เราจะใช้สีเพื่อบอกคนดูว่าอะไรสำคัญ อะไรคลิกได้ และอะไรควรเด่นที่สุดบนหน้าจอ