สีไม่ใช่แค่สวย — สีคือความหมาย

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

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

ลองสังเกตก่อน ว่าสีตอนนี้กำลังบอกอะไรกับคนใช้

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

ให้สังเกตว่า สายตาคุณไปหยุดตรงไหนก่อน ถ้าทุกอย่างเด่นเท่ากันหมด หรือไม่มีอะไรเด่นเลย นั่นแปลว่าสียังไม่ได้ช่วยนำทาง

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

สีทำงานเหมือนไฟจราจร

เวลาคุณมองไฟจราจร คุณไม่ได้คิดว่าแดงหรือเขียวสวยไหม

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

บทนี้เราจะใช้กฎง่ายมากข้อเดียว: เริ่มจาก 3 สีหลักก่อน

ใช้แค่ 3 สีหลักก็พอสำหรับรอบแรก

สีชุดแรกที่ปลอดภัยที่สุดมี 3 บทบาท

Background color (สีพื้นหลัง) คือสีที่กินพื้นที่ส่วนใหญ่ของจอ ควรนิ่งและไม่แย่งสายตา

Text color (สีตัวอักษร) คือสีที่อ่านชัดบนพื้นหลัง ควรเข้มพอให้อ่านง่าย

Accent color (สีเน้น) คือสีที่ใช้กับปุ่มหลัก ลิงก์ หรือจุดสำคัญที่อยากให้คนมองเห็นก่อน

พอมีแค่ 3 บทบาทนี้ สีจะเริ่มมีหน้าที่ของมันเอง แทนที่จะโผล่มาเพราะคุณเผลอเลือกเพิ่มไปเรื่อยๆ

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

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

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

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

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

Prompt template

บทนี้ไม่ต้องคิด palette ซับซ้อน ลองใช้แม่แบบนี้ก่อน

Prompt template:

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

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

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

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

เรากำลังบอกบทบาทของสี ซึ่งเป็นสิ่งที่ AI ทำตามได้ง่ายกว่าและปลอดภัยกว่า

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

ถ้ายังไม่แน่ใจว่าจะใช้สีอะไร เลือกจากอารมณ์ของแอปก็พอ

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

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

ลงมือทำ — เลือก 3 บทบาท แล้วส่ง prompt

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

หลังจาก AI ปรับเสร็จ ลองมองอีกครั้งโดยไม่ต้องอ่านข้อความมาก

ถามตัวเองแค่สองข้อ:

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

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

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

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