Motion

ออกแบบ UX/UI ให้น่าสนใจด้วย Motion Graphic

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

 

 

Motion Graphic คืออะไร

Motion Graphic คือ กราฟฟิกที่เคลื่อนไหวได้ เป็นการนำภาพวาด 2 มิติมาทำให้เคลื่อนไหว คล้ายกับการทำการ์ตูนอนิเมชั่น Motion graphic เป็นสื่อที่ทำให้เข้าใจได้ง่าย แต่หากเป็นผู้ผลิตสื่อจะต้องมีความรู้พื้นฐานในการออกแบบ สร้างสรรค์กราฟฟิกเคลื่อนไหว และใช้โปรแกรม

ตัวอย่างโปรแกรมที่ใช้ออกแบบโมชั่นกราฟิก

  • Adobe Photoshop
  • Adobe ImageReady 
  • After Effect

 

6 ขั้นตอนการทำ Motion Graphic

  1. Direction Concept คือ การวางโครงสร้างหรือทิศทางของเนื้อเรื่องที่จะเล่าและสื่อออกมา เพื่อทำให้สามารถนำเสนอเนื้อหาได้อย่างถูกต้อง ตรงประเด็น กระชับเข้าใจได้ง่ายและ ไม่หลุดประเด็นอีกด้วย
  2. Mood and tone คือ การกำหนดอารมณ์ของชิ้นงานนั้นๆให้ชัดเจนมากยิ่งขึ้น ไม่ว่าจะเป็นเรื่องการใช้สี ความหมายของสีนั้นมีความหมายว่าอย่างไร การเลือกใช้ฟอนต์ให้เข้ากับเนื้อหา หรือวางคาแรกเตอร์ตัวละคร
  3. Script คือ การเขียนเนื้อหาทั้งหมดที่จะเกิดขึ้น ตั้งแต่ช่วงเปิดเรื่อง (Introduction) เนื้อหาหลักที่ต้องการจะสื่อ (Main idea) ไปจนถึงบทสรุป (Ending)
  4. Storyboard คือ การนำสคริปต์มาวาดเป็นรูปภาพให้เห็นภาพในการทำแต่ละซีนชัดเจน หากเห็นภาพก็จะเข้าใจในหลายๆอย่างของเรื่อง เช่น การเคลื่อนไหวของตัวละคร มุมมองภาพในการเล่าเรื่อง อาจจะเขียนร่างไว้คราวๆแล้วค่อยนำมาวาดในโปรแกรม Adobe Illustrator ต่อได้
  5. Animate เป็นขั้นตอนการทำให้ภาพกราฟิก สามารถเคลื่อนไหวได้ โดยจะวาดภาพกราฟิกใน Adobe Illustrator จากนั้นก็นำมาแยก Layer และทำให้เคลื่อนไหวในโปรแกรม Adobe After Effect
  6. Mix sound เรียกได้ว่าเป็นขั้นตอนสุดท้ายในการทำโมชั่นกราฟิก โดยการใส่เสียง หรือซาวด์อื่นๆลงไป เพื่อทำให้Motion Graphicสมบูรณ์มากยิ่งขึ้น

 

การออกแบบ จัดระเบียบ โปรเจกต์ภาพเคลื่อนไหว UI/UX

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

ยกตัวอย่างเช่นภาพเคลื่อนไหวโฮโลแกรมใน Captain American การเรียนรู้ After Effects นั้นเป็นเรื่องยากและซับซ้อนยิ่งไปกว่าการออกแบบ UI/UX ภายในโปรแกรม แต่มันก็เป็นสิ่งที่ควรทบทวน เพราะจะช่วยให้คุณประหยัดเวลาได้เป็นอย่างมากหากใช้ได้อย่างชำนาญ

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

การเขียนเซคชัน หากเขียนเซคชันของเมนู UI ไว้ล่วงหน้าเพื่อจัดระเบียบในไฟล์โปรเจกต์ การทำงานกับองค์ประกอบอื่นๆ จะช่วยให้เลเยอร์ภายในองค์ประกอบลดลง เมื่อมีองค์ประกอบที่น้อยลงจะง่ายต่อการทำงานระยะยาว การจัดไทม์ไลน์ที่ดีจะมีผลดีมากๆต่อการทำงาน

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

 

สรุป

ออกแบบ UX/UI ด้วยโมชั่นกราฟิก น่าสนใจเพราะจะอยู่ในรูปแบบของกราฟฟิกที่เคลื่อนไหวได้  คล้ายกับการทำการ์ตูนอนิเมชั่น เป็นสื่อที่ทำให้เข้าใจได้ง่าย เห็นภาพเพราะเป็นการเล่าเรื่องแบบมีสตอรี่ เปิดเรื่องเนื้อหาหลักที่ต้องการจะสื่อ ไปจนถึงบทสรุปของเรื่องที่เล่า โดยการทำโมชั่นกราฟิก จะใช้โปรแกรมในการออกแบบ 1.Adobe Photoshop 2.Adobe ImageReady 3.After Effect รวมไปถึงการใส่ซาวด์ จึงทำให้
โมชั่นกราฟิก เป็นที่น่าสนใจอย่างมาก

 

ผู้ประกอบการท่านใด ต้องการเดินบนเส้นทางธุรกิจออนไลน์ ปรึกษา Exvention ได้เลยครับ นอกจากนี้เรายัง รับทำเว็บไซต์ อีกด้วยท่านใดสนใจติดต่อเราได้เลยครับ

 

Reference :
6 ขั้นตอนการทำ โมชั่นกราฟิก ที่คุณควรรู้
โมชั่นกราฟิก กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User
เคล็ดลับสำหรับในการสร้างอินเทอร์เฟซผู้ใช้ (UI) ให้เคลื่อนไหวใน After Effects
ไขข้อข้องใจเกี่ยวกับ โมชั่นกราฟิก คืออะไร

ใส่ความเห็น

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