รูปแบบของปุ่มส่วนใหญ่ที่พบได้ในเว็บไซต์

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

หัวข้อในเรื่องนี้

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

องค์ประกอบของปุ่ม

ปุ่มมีองค์ประกอบหลักอยู่ 3 อย่าง คือ ลักษณะของปุ่ม คำ และสีพื้นหลัง แต่ถึงอย่างนั้นองค์ประกอบร่วมอื่นๆก็สำคัญ สามารถดูได้ที่รูปด้านล่างนี้เลย
button anatomy
  • Label – คำ หรือ Wording ที่ใส่ในปุ่ม ควรเป็นคำที่มีควาหมายตรงตัว อ่านแล้วเข้าใจว่ากดแล้วจะดำเนินการเพื่ออะไร
  • Background – สีพื้นหลังของปุ่ม ควรเป็นสีที่ตรงตามความหมาย รวมถึงอารมณ์ เช่น ปุ่มธรรมดา ปุ่มแจ้งเตือน เป็นต้น 
  • Border – ขอบของปุ่ม มักใช้เพื่อเน้นความสำคัญของปุ่มนั้นๆ ถ้าความสำคัยญน้อยก็อาจจะไม่ใส่ก็ได้ รวมถึงใส่เพื่อไม่ให้สีปุ่มกลืนกับตัวพื้นหลังก็ได้เช่นกัน
  • Icon – รูปเสริมเพื่อให้เข้าใจปุ่มง่ายขึ้น จะมีหรือไม่มีก็ได้
  • Radius – องศาการโค้งของขอบปุ่ม ไม่มีหลักการตายตัว แต่จะเกี่ยวกับอารมณ์ความเฟรนลี่หรือภูมิฐานของแบรนด์เว็บนั้นๆ
  • Vantrical Padding – ระยะห่างจากคำถึงขอบของปุ่มด้านบน-ล่าง
  • Horizontal Padding – ระยะห่างจากคำถึงขอบของปุ่มด้านซ้าย-ขวา
  • Margin – ระยะห่างของขอบปุ่ม ถึงขอบปุ่มข้างๆกัน

แบบของปุ่ม

ปุ่มมีหลายแบบ ขึ้นอยู่กับความสำคัญและการนำไปใช้งาน

button

State ของปุ่ม

State คือ สถานะของปุ่มที่แสดงให้รู้ว่าปุ่มปุ่มนั้นอยู่ในสถานะใด เช่น ปกติ รอโหลด หรือสำเร็จแล้ว
State of button

ประเภทของปุ่ม

Buttom

ปุ่มสำหรับกด ใช้สำหรับคลิก 1 ครั้งเพื่อให้เกิดแอคชันอย่างใดอย่างหนึ่ง เช่น กดตกลง (OK) กดอนุญาต (Accept) กดหน้าถัดไป (Next) กดส่ง (Sent) เป็นต้น
Button

Search Box

กล่องสำหรับค้นหา ใช้ค้นหาข้อมูลโดยพิมพ์คีย์เวิร์ด(Keyword) ลงไป พบได้ในเว็บไซต์และแอปพลิเคชันที่หลากหลาย
Search box

Text field

กล่องสำหรับกรอกข้อมูล ไม่ว่าจะเป็นชื่อ นามสกุล อีเมล หรือเบอร์โทร มักพบในหน้าลงทพเบียน หน้าลงชื่อเข้าใช้ รวมถึงหน้ากรอกฟอร์มใน Google Form ด้วย
Text field

Link

ปุ่มข้อความสำหรับเปลี่ยนไปหน้าถัดไป ไม่ว่าจะเป็นในเว็บไซต์เดียวกันหรือเปลี่ยนไปเข้าหน้าเว็บอื่นก็ได้
link

Buttom Navigation

เมนูบาร์ด้านล่าง หรือบน เป็นหนึ่งในรูปแบบของปุ่ม ส่วนมากเป็นแถบ และใช้ไอคอนแทนคำสั่งนั้นๆ สามารถพบได้ทั้งบนเว็บไซต์และในแอปพลิเคชัน มักมีไม่เกิน 5 ปุ่มใน 1 Buttom Navigation

ตัวอย่าง Buttom Navigation จากแอพจริง

Bottom Navigation app

รูปแบบ Buttom Navigation ยอดนิยม

Bottom Navigation
อยากอ่านต่อ

คอนเทนต์ใหม่ล่าสุด

สอน Online Workshops จากทีม JaLearn

ในช่วง โควิด-19 ทาง JaLearn ได้จัดการสอน Workshop แบบออนไลน์ให้กับมหาวิทยาลัยและสถาบันต่าง ๆ ในหลายหัวข้อที่เกี่ยวกับการผลิตสื่ออย่างมีคุณภาพ มีอะไรบ้างมาดูกัน

วิธีทำ 3D ง่าย ๆ ด้วย Ai

ใครว่า 3D ทำยาก!! วันนี้ทาง Jalearn ได้หาขั้นตอนการทำ 3D ง่าย ๆ ใน Ai เพียงไม่กี่ขั้นตอนมาฝากทุกคน เผื่อใครที่กำลังรู้สึกอยากเพิ่มลูกเล่นให้งานให้ดูมีอะไรมากยิ่งขึ้น

Scroll to Top
Logo JL 2

เข้าสู่ระบบเพื่อเริ่ม Learn