เครดิต & ที่มา (อ่านก่อน)
แนวคิดทั้งหมดในหน้านี้เป็นของนักออกแบบแต่ละท่าน เราไม่ได้เป็นเจ้าของ— เรารวบรวมมาเทียบกับ "สิ่งที่ AI มักทำ" เพื่อให้มือใหม่เห็นภาพ และ แนะนำให้ไปอ่านต้นฉบับ(กดลิงก์ "อ่านต้นฉบับ" ในแต่ละหัวข้อ) เครดิตเต็ม ๆ เป็นของท่านเหล่านั้น
Refactoring UI
Adam Wathan & Steve SchogerAI มักทำทำทุกอย่างเด่นเท่ากัน · ใส่เส้นขอบเยอะ · ตัวหนังสือสีเทาวางบนพื้นสี · เงา/ระยะสุ่ม ๆ
Refactoring UI บอกลำดับชั้นคือทุกอย่าง— เน้นด้วยการ "ลดความเด่นของข้อมูลรอง" · เริ่มจากเว้นที่ว่างเยอะ ๆ · ใช้สีพื้น/เงาแยกส่วนแทนเส้นขอบ
ตัวอย่างสไตล์เขาราคา "฿4,500 / ต่อคน"— อย่าให้ตัวเท่ากัน ให้ "4,500" ใหญ่เข้ม "ต่อคน" เล็กจางลง → สายตารู้ทันทีว่าอะไรสำคัญ
✗ ทุกตัวเด่นเท่ากัน
฿4,500 / ต่อคน
✓ ลดความเด่นของข้อมูลรอง
฿4,500 / ต่อคน
Anthony Hobday
นักออกแบบ · กฎภาพที่ใช้ได้ทุกครั้งAI มักทำตัวหนังสือดำสนิท #000 · จัดกึ่งกลางเป๊ะทางคณิต · เส้นขอบเข้มกว่าเนื้อหา
Anthony Hobday บอกกฎคอนกรีตกดใช้ได้เลย— อย่าใช้ดำสนิทกับตัวอักษร · ระยะขอบนอกควร ≥ ระยะขอบใน · เส้นขอบต้องไม่เด่นกว่าเนื้อหา · จัดด้วย "ตา" ไม่ใช่เป๊ะทางเลข
ตัวอย่างสไตล์เขาไอคอน ▶ ในวงกลม — ถ้า center เป๊ะทางเลขจะดูเยื้องซ้ายต้องขยับขวานิดให้ "ดูตรง" ด้วยตา (optical alignment)
Erik Kennedy
Learn UI DesignAI มักทำใส่สีตั้งแต่แรก · ฟอนต์ default · การ์ดชิดกันแน่น
Erik Kennedy บอก (7 Rules)ออกแบบเป็นขาว-ดำก่อนค่อยเติมสีทีหลัง · เพิ่มช่องไฟเป็น 2 เท่า· ใช้ฟอนต์ดี ๆ เท่านั้น · เน้น/ลดเน้นตัวอักษรด้วยน้ำหนัก+สี
ตัวอย่างสไตล์เขาถ้าหน้าจอสวยตั้งแต่ตอนเป็นขาว-ดำแสดงว่าโครง (ลำดับชั้น+ช่องไฟ) ดีแล้ว — สีแค่มาเสริม ไม่ใช่มากลบของที่ยังไม่ดี
Josh Comeau
นักพัฒนา/นักออกแบบ CSSAI มักทำใส่ box-shadow ก้อนเดียว default → เงาดูแบน ปลอม ลอย
Josh Comeau บอกเงาจริงมาจากแหล่งแสงเดียว· ซ้อนเงาหลายชั้น (ใกล้คม-ไกลฟุ้ง) · ใส่สีในเงานิดหน่อย → ดูสมจริง มีมิติ
ตัวอย่างสไตล์เขาปุ่มตอน hover "ยกขึ้น" — เงาต้องขยาย+ฟุ้งขึ้นตามระยะที่ลอย(เหมือนของจริง) ไม่ใช่เงาเดิมค้างอยู่
✗ เงาก้อนเดียว แบน ลอย
✓ ซ้อน 3 ชั้น มีมิติ
Rauno Freiberg
Design Engineer · VercelAI มักทำกดปุ่มแล้วเงียบ · ไม่มี focus ring · ใช้คีย์บอร์ดไม่ได้ · กดแล้วรอเซิร์ฟเวอร์นาน
Rauno Freiberg บอกรายละเอียดที่มองไม่เห็นแต่รู้สึกได้— focus ที่ชัด · รองรับคีย์บอร์ด · Optimistic UI(อัปเดตทันทีไม่รอเน็ต) · สถานะ hover/active ที่ประณีต
ตัวอย่างสไตล์เขากดหัวใจ "ถูกใจ" → เปลี่ยนเป็นสีแดงทันที(ไม่รอเซิร์ฟเวอร์ตอบ) ถ้าพลาดค่อยย้อน — รู้สึกไวเหมือนแอประดับโลก
Emil Kowalski
นักออกแบบ · Animations on the WebAI มักทำไม่มี animation เลย หรือใส่เด้ง ๆ กระตุก ๆ เว่อร์
Emil Kowalski บอกanimation ที่ดีต้องมี "จุดประสงค์"· easing ธรรมชาติ (เข้าเร็ว-ออกช้า) · สั้น ~200ms· เคารพคนที่ตั้งค่า "ลดการเคลื่อนไหว"
ตัวอย่างสไตล์เขาModal เด้งขึ้น — ใช้ ease-out สั้น ๆ นุ่ม ๆ(ค่อย ๆ ช้าลงตอนจบ) ไม่ใช่ผุดทันทีหรือเด้งดึ๋งกระตุก
เอา 6 หลักนี้ไปสั่ง AI ได้เลย (ก๊อปวาง)
หลักของกูรูทั้งหน้านี้ ย่อเป็นพรอมต์เดียว — วางต่อท้ายคำสั่งสร้างหน้าจอของคุณ:
ยึดหลักนักออกแบบมือโปรในการจัดหน้านี้:
1) ลำดับชั้นมาก่อน — ตัวเลข/หัวข้อสำคัญใหญ่และเข้ม ข้อมูลรองเล็กและจางลง อย่าให้ทุกอย่างเด่นเท่ากัน
2) เริ่มจากขาว-ดำให้สวยก่อน แล้วค่อยเติมสี ใช้สีหลักแค่ 1 สี
3) เว้นช่องไฟเยอะกว่าที่คิดราว 2 เท่า · ระยะขอบนอก ≥ ระยะขอบใน
4) อย่าใช้ดำสนิท #000 กับตัวอักษร ใช้กรมเข้ม #1a2032 · เส้นขอบจางกว่าเนื้อหา
5) แยกส่วนด้วยพื้นหลัง/เงา แทนการตีกรอบทุกกล่อง
6) เงามาจากแสงเดียว ซ้อน 2-3 ชั้น (ใกล้คม ไกลฟุ้ง) ห้าม box-shadow ก้อนเดียวแข็งๆ
7) ปุ่ม/ช่องกรอกมี focus ring ชัด, hover/active รู้สึกได้, กดแล้วอัปเดตทันที (optimistic)
8) animation สั้น ~200ms ease-out มีจุดประสงค์ และเคารพ prefers-reduced-motion
ขอบคุณ & ไปตามอ่านกันต่อ
หน้านี้เป็นแค่ "ป้ายชี้ทาง" — คำสอนจริงลึกและดีกว่านี้มาก อยู่ในงานต้นฉบับของแต่ละท่าน. ถ้าชอบ ไปอ่าน/ติดตามเขาโดยตรงเลยครับ เครดิตทั้งหมดเป็นของผู้เขียนแต่ละท่าน · เราแค่อยากให้คนไทยมือใหม่รู้จัก แล้วออกแบบได้ดีขึ้น
อ่านต่อจากแหล่งอื่น (บทความภายนอก)
- ↗ AI Design Slop: 16 Patterns (งานวิจัย 1,590 หน้า) — Developers Digest Eng
- ↗ AI Slop Web Design: Complete Guide — 925studios Eng
บทความภายนอกเป็นของผู้เขียนแต่ละเว็บ (ไม่ใช่ของเรา) · เปิดในแท็บใหม่
รวบรวม/เรียบเรียงโดย พี่ปุ้ย ปริวรรตน์ อรุโณทยานันท์ (แนวคิดเป็นเครดิตของกูรูแต่ละท่านตามลิงก์)
ผู้เชี่ยวชาญวางระบบองค์กร & AI — สอนเจ้าของกิจการสร้างระบบของตัวเองมากกว่า 400 คน
ประวัติพี่ปุ้ย · ดูคอร์ส →