เทคนิคการดีไซน์ปุ่ม ให้สวยงามและโดนใจ สำหรับ UX / UI Designer

เทคนิคการดีไซน์ปุ่ม ให้สวยงามและโดนใจ สำหรับ UX / UI Designer

เทคนิคการดีไซน์ปุ่ม ให้สวยงามและโดนใจ สำหรับ UX / UI Designer สำหรับเว็บดีไซน์ ไม่ว่าจะเป็น UI (User Interface) หรือ UX (User Experience) การดีไซน์ปุ่ม (Button) ให้สวยงามและโดนใจผู้ใช้ เป็นสิ่งที่สำคัญ เพราะปุ่มเป็นสิ่งที่จะเชิญชวนให้ผู้ใช้เข้ามากดเลือก ในสิ่งที่เราต้องการนำเสนอ หรือใช้ในการตัดสินใจเลือกสินค้าหรือบริการของเรา ซึ่งการดีไซน์ปุ่มสำหรับ UX / UI Designer นั้น เราจะต้องดีไซน์ปุ่มให้ สวยงามน่าใช้ ดูเป็นมิตร เข้าใจง่าย และทำให้ผู้ใช้เกิดประสบการณ์ที่ดีกับเว็บไซต์ของเรา และกลับมาใช้บริการเว็บไซต์ของเราอีกครั้ง

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

เทคนิคการดีไซน์ปุ่มสำหรับ UX / UI Designer นั้นเราจะดีไซน์ปุ่มโดยแบ่งประเภทต่างๆ คือ การดีไซน์ปุ่มหลัก (Primary Button) การดีไซน์ปุ่มรอง (Secondary Buttons) และการดีไซน์ปุ่มประเภทอื่น ๆ (Additional Button Types) ค่ะ

 

PRIMARY BUTTON

 

ปุ่มหลัก (PRIMARY BUTTON) มาที่การดีไซน์ปุ่มหลักกันก่อนนะคะ เราจะใช้หลักในการดีไซน์ปุ่ม ที่ประกอบไปด้วย 3 คุณลักษณะ คือ สี ตัวหนังสือ ไอคอน ระยะ Padding (ระยะจากตัวหนังสือในปุ่ม ถึงขอบปุ่ม) และระยะ Margin (ระยะจากขอบปุ่ม ถึงชิ้นส่วนอื่นบนหน้าเว็บไซต์) ค่ะ โดยเทคนิคการออกแบบปุ่มหลักก็คือ ตัวหนังสือที่เราใช้สื่อสาร จะต้องสื่อสารอย่างชัดเจน เพื่อเพื่อบ่งบอกว่าปุ่มนี้มีไว้ทำอะไร ต้องทำปุ่มเวอร์ชั่นสลับสี (Inverted Color) รองรับหลาย STATE มีการวาง Guideline ให้กับคนที่นำไปใช้ต่อด้วย ว่าต้องวางปุ่มบนพื้นหลังสีไหนที่เหมาะสม มียืดหยุ่นสำหรับการใส่รายละเอียดในปุ่มไม่ว่าจะเป็นใส่ไอตอน หรือตัวหนังสือ และที่สำคัญเราควรจะมีปุ่มหลักที่เด่นที่สุด สำคัญที่สุดแค่ปุ่มเดียวเท่านั้นนะคะ เพราะถ้ามีปุ่มหลักหลายปุ่มก็อาจจะเป็นปัญหาด้าน UX ดีไซน์ ที่อาจจะงงว่าควรกดตรงไหนดี นั่นเองคะ แต่ถ้าในกรณีที่ทุกปุ่มมีหน้าที่เหมือนกัน ไม่ใช่ปุ่มนึง Login, ปุ่มนึง Register ในกรณีนั้นเราสามารถอนุญาตให้มีปุ่มหลักหลายปุ่มต่อ หนึ่งหน้าได้ค่ะ

 

ปุ่มรอง

cr.babich

 

ปุ่มรอง (SECONDARY BUTTONS) ชื่อก็บอกอยู่แล้วใช่ไหมคะว่าเป็นรองจากปุ่มหลัก ดังนั้นเราจะต้องดีไซน์ปุ่มรองไม่ให้ เด่นมากจนตีกับสีปุ่มหลัก จน User งงว่าควรกดปุ่มหลักปุ่มไหนกันแน่ แต่ก็ไม่จางจนเหมือนกดไม่ได้นะคะ และควรหลีกเลี่ยงการใช้ปุ่มแบบ Ghost Button หรือปุ่มผี ซึ่งก็คือปุ่มที่ไม่มีสีพื้นหลัง มีแต่เส้นขอบกับตัวหนังสือเท่านั้นค่ะ เพราะปุ่มลักษณะนี้ จะไม่ค่อยเห็น และบางทีคนก็ไม่รู้ด้วยซ้ำค่ะว่ามันเป็นปุ่ม

 

ADDITIONAL BUTTON TYPES

 

ปุ่มประเภทอื่น ๆ (ADDITIONAL BUTTON TYPES) เช่น ปุ่มเปิดเมนู, ปุ่มที่เป็นลิงค์ ฯลฯ .เทคนิคในการดีไซน์เราจะต้องดีไซน์ ให้ครบทุกขนาด เพื่อให้ขนาดตัวหนังสือและระยะห่าง ดูเหมาะสมต่อการใช้งาน ในลักษณะต่างๆ  ควรแยกดีไซน์ปุ่มกับลิงค์ให้ชัดเจน เช่นเว็บดีไซน์สไตล์ Flat นั้น การดีไซน์ปุ่มจะคล้ายกับปุ่มลิงค์ ซึ่งอาจทำให้ผู้ใช้แยกปุ่มกับลิงค์ไม่ออก มีการแบ่งโซนสำหรับชิ้นส่วนในปุ่มเพื่อทำเมนู เพื่อให้ผู้ใช้รู้ว่าสามารถคลิกเปิดได้ และควรจัดวางปุ่มไว้ในดีไซน์หลาย ๆ แบบ หลากหลายสถานการณ์มากที่สุด เพื่อให้ง่ายต่อการใช้นั่นเองคะ

 

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

 

 

 

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *

รับทำเว็บไซต์ รับออกแบบเว็บไซต์ รับทำเว็บขายของ ครบวงจร