Neumorphism คือ​อะไร ปุ่ม​เงา​นุ่ม​ที่​กด​แล้ว​แทบ​ไม่​เห็น​ว่า​กด

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

บท​นี้​ใช้​บทความ Neumorphism in user interfaces ของ Michał Malewicz เป็น​แหล่ง​หลัก บทความ​นี้​ลง​ครั้ง​แรก​ใน UX Collective ก่อน​ต้น​ปี 2020 แล้ว​เขา​ลง​ซ้ำ​ใน​เว็บ hype4.academy ของ​บริษัท​ตัว​เอง​พร้อม​ส่วน​ทบทวน​เกือบ​สอง​ปี​ให้​หลัง ข้อมูล​ทุก​ข้อ​ใน​บท​นี้​มา​จาก​ฉบับ​ที่​ลง​ซ้ำ เพื่อ​ให้​เจ้าของ​ร้าน​ตัดสิน​ได้​ว่า​จะ​ใช้​เงา​นุ่ม​กับ​ส่วน​ไหน​ของ​หน้า โดยที่​ลูกค้า​ยัง​รู้​ว่า​กด​ปุ่ม​ไป​แล้ว

Neumorphism คือ​สไตล์​หน้า​จอ​ที่​การ์ด ปุ่ม และ​แผง​ควบคุม​ทำ​จาก "วัสดุ​เดียว​กับ​พื้น​หลัง" แล้ว​ดู​นูน​ขึ้น​มา​หรือ​ยุบ​ลง​ไป แทนที่​จะ​ลอย​อยู่​เหนือ​พื้น​หลัง​แบบ​การ์ด​ทั่วไป ภาพ​รวม​จึง​ดู​นุ่ม​คล้าย​พลาสติก​ขึ้น​รูป ใช้​สี​โทน​เดียว​ทั้ง​หน้า และ​อาศัย​เงา​เป็น​ตัว​บอก​ขอบ​ของ​ทุก​ชิ้น

Malewicz อธิบาย​ความ​ต่าง​ไว้​ด้วย​การ​เทียบ​กับ​การ์ด​สมัย​ใหม่ การ์ด​ทั่วไป​เป็น​พื้น​ผิว​ที่​ลอย​อยู่​เหนือ​พื้น​หลัง​และ​ทอด​เงา​ลง​ไป เงา​นั้น​ให้​ความ​ลึก​และ​หลาย​ครั้ง​เป็น​ตัว​กำหนด​รูป​ทรง​ของ​การ์ด​เอง เพราะ​การ์ด​ไม่มี​เส้น​ขอบ ส่วน​การ์ด​แบบ Neumorphic "ทำ​ที​เป็น​ดัน​ตัว​ออก​มา​จาก​พื้น​หลัง" เมื่อ​มอง​จาก​ด้าน​ข้าง​จะ​เห็น​ว่า​มัน​ไม่​ได้​ลอย

ชื่อ Neumorphism มา​จาก​ไหน

ชื่อ​นี้​มา​จาก​คอม​เมน​ต์​ใน​โลก​ออนไลน์ Malewicz เล่า​ว่า​สไตล์​ที่​ได้​รับ​ความ​สนใจ​บน Dribbble และ Instagram ถูก​เรียก​ว่า New skeuomorphism แล้ว Jason Kelley ย่อ​เป็น Neuomorphism ใน​คอม​เมน​ต์ Malewicz ตัด​ตัว o ออก​จน​ได้​คำ​ว่า Neumorphism กระแส​ทั้งหมด​เริ่ม​จาก​ภาพ​งาน​ออกแบบ​ภาพ​เดียว​บน Dribbble ของ​ผู้​ใช้​ชื่อ alexplyuto ที่​ได้​ไลก์​กว่า 3,000 ครั้ง ก่อน​มี​งาน​แนว​เดียวกัน​ตาม​มา​อีก​มาก รวม​ถึง​งาน​ของ​ทีม hype4 เอง

Skeuomorphism ที่​เป็น​ราก​ของ​ชื่อ คือ​แนวทาง​ที่​ทำให้​ของ​บน​จอ​เหมือน​ของ​จริง​ทุก​จุด ซึ่ง​มี​บท​อธิบาย​แยก​ในSkeuomorphism ส่วน​ฝั่ง​ตรง​ข้าม​ที่​ทิ้ง​เงา​และ​พื้น​ผิว​ออก​เกือบ​หมด​อยู่​ในFlat Design Malewicz มอง​ว่า Neumorphism อยู่ "ครึ่ง​ทาง​กลับ" ไป​หาความ​สมจริง คือ​กลับ​มา​มี​ความ​ลึก​แต่​ไม่มี​พื้น​ผิว​ไม้​หรือ​หนัง

ลุค Neumorphism ทำได้​ด้วย​เงา​สอง​ชั้น​บน​ชิ้น​เดียว Malewicz เขียน​ว่า​เอฟเฟกต์​นี้ "ทำได้​ไม่​ยาก" ด้วย​การ​เล่น​กับ​เงา​สอง​ชั้น ชั้น​หนึ่ง​ตั้ง​ค่า​ตำแหน่ง​เป็น​ลบ อีก​ชั้น​เป็น​บวก ชั้น​หนึ่ง​สว่าง อีก​ชั้น​มืด ผล​ที่​ได้​คือ​ด้าน​หนึ่ง​ของ​การ์ด​เหมือน​รับ​แสง อีก​ด้าน​เหมือน​มี​เงา​ตก

ใน​โค้ด​หน้า​เว็บ เงา​ทั้ง​สอง​ชั้น​เขียน​รวม​ใน​คำ​สั่ง box-shadow คำ​สั่ง​เดียว​โดย​คั่น​ด้วย​จุลภาค บทความ​ชี้​ไป​ยัง​เครื่อง​มือ​สร้าง​โค้ด​ที่​นัก​พัฒนา​คน​หนึ่ง​ทำ​ไว้​ที่ neumorphism.io สำหรับ​คน​ที่​ไม่​อยาก​ปรับ​ค่า​เอง ร้าน​ที่​ใช้​เครื่อง​มือ​สร้าง​เว็บ​แบบ​ลาก​วาง​ก็​มัก​มี​ช่อง​ตั้ง​เงา​หลาย​ชั้น​อยู่​แล้ว

ทำไม​พื้น​หลัง​ห้าม​ขาว​สนิท​หรือ​ดำ​สนิท

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

ปัญหา​หลัก​ของ Neumorphism อยู่​ที่​ปุ่ม Malewicz ระบุ​ปัญหา​สอง​ข้อ​ที่​ทีม​เจอ​ใน​ตอน​นั้น คือ​วิธี​เขียน​โค้ด​ให้​มี​ประสิทธิภาพ กับ​การ​มอง​เห็น และ​แยก​การ์ด​ออก​จาก​ปุ่ม​อย่าง​ชัดเจน

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

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

ทำไม​ลูกค้า​อาจ​ไม่รู้​ว่า​กด​ปุ่ม​ไป​แล้ว

เพราะ​สิ่ง​เดียว​ที่​เปลี่ยน​ตอน​กด​คือ​ทิศ​ของ​เงา​อ่อน ๆ บน​พื้น​สี​เดียวกัน Malewicz อธิบาย​ว่า​สถานะ​กด​แบบ​เงา​ด้าน​ใน​มี​ความ​ต่าง​น้อย​เกิน​จะ​สื่อ​ว่า​ปุ่ม​เปลี่ยน​สถานะ​แล้ว ใน​หน้า​จอง​คิว​หรือ​หน้า​จ่าย​เงิน ลูกค้า​ที่​ไม่​แน่ใจ​ว่า​กด​ติด​หรือ​ไม่​มัก​กด​ซ้ำ หรือ​เลิก​กลาง​ทาง ปัญหา​นี้​หนัก​ขึ้น​กับ​สวิตช์​เปิด-ปิด​และ​ปุ่ม​เลือก​ตัว​เลือก เพราะ​ผู้​ใช้​ต้อง​ดู​ออก​ว่า​ตอน​นี้​เปิด​อยู่​หรือ​ปิด​อยู่ ไม่ใช่​แค่​ว่า​กด​ไป​แล้ว​หรือ​ยัง

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

สาม​แถว​แรก​เป็น​ทาง​แก้​ที่ Malewicz เสนอ​ตรง ๆ ส่วน​แถว​สุดท้าย​มา​จาก​คำ​แนะนำ​ของ​เขา​ที่​ว่า ปุ่ม​ควร​เด่น​และ​เห็น​ชัด แล้ว​ค่อย​ใช้​เงา​นุ่ม​กับ​ส่วน​ที่​ไม่ใช่​ปุ่ม เรื่อง​การ​เลือก​คู่​สี​ให้​อ่าน​ง่าย​บน​จอ​เป็น​อีก​หัวข้อ​หนึ่ง ซึ่ง​มี​ราย​ละเอียด​ในทฤษฎี​สี (Color Theory) และ​จิตวิทยา​สี บน​ป้าย​ร้าน​และ​บน​จอ

การ์ด​กับ​ปุ่ม​ควร​ใช้​เงา​นุ่ม​ต่าง​กัน​อย่างไร

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

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

1. สถาบัน​การ​เงิน​แห่ง​หนึ่ง นำ​สไตล์​นี้​ไป​ใช้​ใน​ผลิตภัณฑ์ Malewicz เขียน​ว่า "น่า​เสียดาย​ที่​ไม่​ค่อย​สำเร็จ" หน้า​จอ​นั้น​ใช้​งาน​ได้​ค่อน​ข้าง​ดี แต่​ดู​น่า​เบื่อ​เพราะ​พึ่ง​เอฟเฟกต์​เดียว​มาก​เกิน​ไป เขา​ไม่​ได้​ระบุ​ชื่อ​สถาบัน
2. โลโก้​งาน​เปิด​ตัว​สินค้า Galaxy Unpacked ของ Samsung ใช้​บล็อก​แบบ Neumorphic ซึ่ง​เขา​ยก​เป็น​ตัวอย่าง​ที่​เด่น​ที่สุด​ของ​การ​ใช้​งาน​ใน​กระแส​หลัก
3. ช่วง​เปิด​คลิป​ของ Marques Brownlee ยู​ทูบ​เบอร์​สาย​เทคโนโลยี​ที่​รู้จัก​ใน​ชื่อ MKBHD

Malewicz เขียน​ว่า​เขา​คาด​ไว้​ตั้งแต่​แรก​ว่า Neumorphism ลำพัง​ตัว​เอง​มี​โอกาส​สำเร็จ​น้อย เพราะ​ต้อง​อาศัย​ราย​ละเอียด​เพิ่ม​ถึง​จะ​ดู​ดี ใน​มุม​ของ​เขา งาน​บน Dribbble ชิ้น​แรก​ที่​จุด​กระแส​ดู​ดี​เพราะ​มี​สวิตช์​กึ่ง​สมจริง​และ​ชิ้น​ส่วน​สี​สด​ผสม​อยู่​ด้วย ขณะ​ที่​นัก​ออกแบบ​จำนวน​มาก​หยิบ​ไป​เฉพาะ​ส่วน​ที่​นูน​และ​ยุบ

ทำไม Neumorphism ไม่​กลาย​เป็น​เท​รนด์​ของ​ตัว​เอง

เพ​ราะ​ลุ​ค​ที่​ใช้​เอฟเฟกต์​เดียว​ทั้ง​หน้า​ดู​จืด​เร็ว และ​ปุ่ม​แบบ​นี้​ต้อง​แก้​เรื่อง​สถานะ​เพิ่ม​ทุก​ครั้ง Malewicz สรุป​ว่า​วิธี​ทำ Neumorphism แบบ​เดิม​ไม่​ได้​อยู่​รอด แต่​มัน​พา​เงา​ด้าน​ใน (inner shadow) ซึ่ง​เคย​ถูก​มอง​ว่า​แทบ​ไร้​ประโยชน์​กลับ​มา​เป็น​เครื่อง​มือ​ของ​นัก​ออกแบบ ทีม​ของ​เขา​ใช้​เงา​ด้าน​ใน​กับ​งาน​หลาย​ชิ้น​ใน​ภาย​หลัง และ​เตือน​ว่า​ถ้า​ใส่​มาก​เกิน​หรือ​ใส่​ทุก​ชิ้น​จะ​ดู​ไม่​ดี กระแส​ที่​ต่อ​จาก​นี้​คือ​การก​ลับ​มา​ของ​ความ​ลึก​ใน​หน้า​จอ ซึ่ง​สไตล์​กระจก​ฝ้า​ในGlassmorphism ก็​เป็น​อีก​ทาง​หนึ่ง

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

1. ตั้ง​พื้น​หลัง​เป็น​สี​เจือ​อ่อน ไม่​ใช้​ขาว​สนิท​หรือ​ดำ​สนิท เลือก​เฉด​ที่​เข้า​กับ​สี​ร้าน
2. ใช้​เงา​สอง​ชั้น​กับ​การ์ด​ข้อมูล​ก่อน เช่น การ์ด​เมนู การ์ด​เวลา​เปิด​ปิด การ์ด​คะแนน​สะสม
3. ทำ​ปุ่ม​จอง ปุ่ม​ยืนยัน และ​ปุ่ม​จ่าย​เงิน​เป็น​สี​เต็ม พร้อม​ตัว​หนังสือ​บอก​หน้าที่​ของ​ปุ่ม
4. กำหนด​สิ่ง​ที่​เปลี่ยน​ตอน​กด​ให้​ทุก​ปุ่ม เติม​สี เปลี่ยน​เป็น​ไอคอน​ทึบ หรือ​ขีด​เส้น​ใต้ อย่าง​น้อยห​นึ่ง​อย่าง
5. ลอง​กด​บน​มือ​ถือ​กลาง​แดด​และ​ใน​ร้าน​ที่​ไฟ​สลัว ถ้า​มอง​ไม่​ออก​ว่า​ปุ่ม​ไหน​ถูก​กด ให้​กลับ​ไป​แก้​ข้อ 4
6. ให้​ลูกค้า​ประจำ​สอง​สาม​คน​ลอง​จอง​จริง แล้ว​ดู​ว่า​มี​ใคร​กด​ซ้ำ​หรือ​ถาม​ว่า​จอง​ติด​หรือ​ยัง

ถ้า​อยาก​ได้​หน้า​จอ​ที่​มี​ความ​ลึก​แต่​ไม่​ต้อง​พึ่ง​เงา​ทั้ง​หน้า สไตล์​ที่​ใช้​สี​จัด​และ​เส้น​ขอบ​หนา​แบบNeobrutalism เป็น​อีก​ทาง​หนึ่ง ส่วน​หลัก​ที่​ระบบ​ปฏิบัติ​การ​ใหญ่​ใช้​บอก​ว่า​อะไร​กด​ได้ อยู่​ในMaterial Design

Neumorphism คือ​สไตล์​หน้า​จอ​โทน​เดียว​ที่​ชิ้น​ส่วน​ดู​ดัน​ขึ้น​จาก​พื้น​ด้วย​เงา​สอง​ชั้น ชื่อ​นี้ Michał Malewicz ตั้ง​จาก​คำ​ว่า New skeuomorphism หลัง​งาน​บน Dribbble ชิ้น​หนึ่ง​ได้​กว่า 3,000 ไลก์ เขา​เอง​เตือน​ว่า​ปุ่ม​ตอน​ถูก​กด​ด้วย​เงา​ด้าน​ใน​ต่าง​จาก​ตอน​ปกติ​น้อย​เกิน​ไป และ​สอง​ปี​ต่อ​มา​เขียน​ว่า​สไตล์​นี้​ไม่​ได้​กลาย​เป็น​เท​รนด์​ของ​ตัว​เอง ร้าน​เล็ก​ใช้​ลุ​คนี้​ได้​กับ​การ์ด​ข้อมูล แต่​ปุ่ม​จอง ปุ่ม​ยืนยัน และ​ปุ่ม​จ่าย​เงิน​ต้อง​บอก​สถานะ​ด้วย​สี ไอคอน หรือ​เส้น​ใต้ แล้ว​ลอง​กด​กับ​ลูกค้า​จริง​ก่อน​เปิด​ใช้