การออกแบบ 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
- Direction Concept คือ การวางโครงสร้างหรือทิศทางของเนื้อเรื่องที่จะเล่าและสื่อออกมา เพื่อทำให้สามารถนำเสนอเนื้อหาได้อย่างถูกต้อง ตรงประเด็น กระชับเข้าใจได้ง่ายและ ไม่หลุดประเด็นอีกด้วย
- Mood and tone คือ การกำหนดอารมณ์ของชิ้นงานนั้นๆให้ชัดเจนมากยิ่งขึ้น ไม่ว่าจะเป็นเรื่องการใช้สี ความหมายของสีนั้นมีความหมายว่าอย่างไร การเลือกใช้ฟอนต์ให้เข้ากับเนื้อหา หรือวางคาแรกเตอร์ตัวละคร
- Script คือ การเขียนเนื้อหาทั้งหมดที่จะเกิดขึ้น ตั้งแต่ช่วงเปิดเรื่อง (Introduction) เนื้อหาหลักที่ต้องการจะสื่อ (Main idea) ไปจนถึงบทสรุป (Ending)
- Storyboard คือ การนำสคริปต์มาวาดเป็นรูปภาพให้เห็นภาพในการทำแต่ละซีนชัดเจน หากเห็นภาพก็จะเข้าใจในหลายๆอย่างของเรื่อง เช่น การเคลื่อนไหวของตัวละคร มุมมองภาพในการเล่าเรื่อง อาจจะเขียนร่างไว้คราวๆแล้วค่อยนำมาวาดในโปรแกรม Adobe Illustrator ต่อได้
- Animate เป็นขั้นตอนการทำให้ภาพกราฟิก สามารถเคลื่อนไหวได้ โดยจะวาดภาพกราฟิกใน Adobe Illustrator จากนั้นก็นำมาแยก Layer และทำให้เคลื่อนไหวในโปรแกรม Adobe After Effect
- 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
ไขข้อข้องใจเกี่ยวกับ โมชั่นกราฟิก คืออะไร