- เวลาพัฒนา เรามักสร้างบางอย่างขึ้นมา คลิกหลายรอบ แก้ไข แล้วกลับมาคลิกซ้ำอีกครั้ง
- ในกรณีของการเปลี่ยนหน้า มักกดปุ่มย้อนกลับหลายครั้ง
- นี่เป็นเหมือนกลยุทธ์การทำ QA แบบหนึ่ง คือการคลิกเพื่อหาปัญหาและแก้ไขมัน
- คล้ายกับงานไม้ ที่จะแก้ปัญหาใหญ่ก่อน แล้วค่อยขัดเกลารายละเอียด
การทดสอบ UI
- ซอฟต์แวร์มีตัวแปรมากเกินไป ทำให้ทดสอบและขัดเกลาทุกอย่างได้ยาก
- จึงต้องใช้งาน UI ซ้ำหลายครั้งเพื่อค้นหาปัญหาและแก้ไขไปเรื่อย ๆ
การจัดการรายการตัวเลือกแบบวิทยุ
- วาง
และ ไว้ในแถวเดียวกัน จัดให้อยู่กึ่งกลาง และเว้นระยะห่างระหว่างกัน
- เมื่อก่อนอาจใช้ CSS float แต่ตอนนี้ใช้ flexbox เพื่อทำงานนี้ได้ง่ายขึ้น
Foo
.container {
display: flex;
flex-direction: row;
align-items: center;
gap: .5rem;
}
การค้นพบและแก้ปัญหา
- พบว่ามีพื้นที่ตายที่คลิกไม่ได้ระหว่างปุ่มวิทยุและป้ายกำกับใน UI
- ตรวจพบว่าต้นเหตุของปัญหาคือพร็อพเพอร์ตี
gap ของ flexbox
- แก้ปัญหาโดยเอา
gap ออก แล้วเพิ่ม padding ให้กับป้ายกำกับ
- การเพิ่ม padding ให้ป้ายกำกับช่วยให้พื้นที่ทั้งหมดคลิกได้โดยไม่มีจุดตาย
บทสรุป
- ปัญหาเล็ก ๆ หลายจุดรวมกันอาจก่อให้เกิดความไม่สะดวกอย่างมาก
- การค้นหาและแก้ปัญหาซ้ำ ๆ ทำให้สุดท้ายได้ผลลัพธ์ที่ลื่นไหล
สรุปโดย GN⁺
- บทความนี้อธิบายกระบวนการค้นหาและแก้ปัญหาเล็ก ๆ ที่อาจเกิดขึ้นระหว่างการพัฒนา UI
- แม้ flexbox จะช่วยจัดเลย์เอาต์ได้ง่าย แต่ก็อาจมีปัญหาที่ไม่คาดคิดเกิดขึ้นได้
- เพื่อแก้ปัญหา ผู้เขียนได้ลองหลายวิธี และสุดท้ายแก้ได้ด้วยการใช้ padding
- เป็นเคล็ดลับที่มีประโยชน์สำหรับนักพัฒนา UI และเน้นย้ำความสำคัญของการแก้ปัญหาเล็ก ๆ ระหว่างทาง
ยังไม่มีความคิดเห็น