วิธีเพิ่มแอนิเมชั่นให้กับเว็บไซต์ของคุณอย่างมีกลยุทธ์

การใช้แอนิเมชั่นในการออกแบบเว็บไม่ใช่เรื่องใหม่

จำยุคที่หมุนไปนานของการหมุน gif 3 มิติได้หรือไม่?

ชีวิตและความตายของ Flash เป็นอย่างไร?

หลังจากที่ Apple แบนการใช้ Flash บนอุปกรณ์มือถือทั้งหมด นักออกแบบก็หาวิธีนำแอนิเมชั่นกลับมาในเกมได้อย่างรวดเร็ว ต้องขอบคุณความคิดสร้างสรรค์ของนักพัฒนาเว็บและนักออกแบบ ตอนนี้เรามีความมหัศจรรย์ของการเปลี่ยน CSS3, แอนิเมชั่น SVG, GIF คุณภาพสูง และแน่นอน วิดีโอแอนิเมชั่นที่สร้างด้วยโปรแกรมอย่าง After Effects และ Blender

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

แอนิเมชั่นได้กลายเป็นความคาดหวังไปแล้ว

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

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

แอนิเมชั่นจาก The Kinetic UI

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

แอนิเมชั่นโดยดารินบน Dribbble

ทำให้ไซต์ของคุณเคลื่อนไหว

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

การใช้โปรแกรมอย่าง Adobe XD สามารถช่วยในกระบวนการทดลองแอนิเมชั่นต่างๆ เพื่อวางอย่างมีกลยุทธ์บนไซต์ของคุณ หากคุณชอบสร้างงานใน WordPress โดยตรง ทางเลือกที่ดีคือ Divi Builder ซึ่งมาพร้อมกับความเป็นไปได้ในการสร้างแอนิเมชั่นมากมายในทุกโมดูล

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

มาดูแอนิเมชั่นประเภทต่างๆ ที่สามารถปรับปรุง UX ของไซต์และองค์ประกอบภาพโดยรวม

การทำงานหรือสุนทรียศาสตร์

แอนิเมชั่นมีประโยชน์สองอย่างในการออกแบบเว็บ ฟังก์ชั่นและความสวยงาม

แอนิเมชั่นการทำงาน

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

กำลังโหลดภาพเคลื่อนไหว

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

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

แอนิเมชั่นโดย Sharon Yar และ Dilys Lim บน Behance

แอนิเมชั่นจาก UXPin ของเว็บไซต์ Tom Cole Architecture

โฮเวอร์

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

วิธีอื่นๆ ในการใช้โฮเวอร์นั้นใช้สำหรับปุ่มที่ไม่เหมือนปุ่ม หรือหากคุณต้องการแสดงข้อมูลบนโฮเวอร์ก่อนที่จะคลิก

แอนิเมชั่นจาก Design Shack

เลื่อน

เว็บไซต์ที่มีเอฟเฟกต์การเลื่อนไม่ใช่ปรากฏการณ์พิเศษอีกต่อไป การเลื่อนแบบพารัลแลกซ์ได้รับความนิยมอย่างมาก (และพูดความจริงก็เหนื่อยหน่อย) ดังนั้น หากคุณต้องการใช้การเลื่อนแบบเคลื่อนไหว ให้คิดนอกกรอบ รวมองค์ประกอบที่ย้ายจากส่วนหนึ่งไปอีกส่วน องค์ประกอบที่ปรากฏทีละส่วนพร้อมกับการเลื่อน คิดถึงการใช้งานและความสวยงาม

แอนิเมชั่นโดย Youandigraphics

แอนิเมชั่นความงาม

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

ด้วยจำนวนแอนิเมชั่นที่สวยงาม ไซต์ของคุณจึงน่าจดจำ

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

พื้นหลังเคลื่อนไหว

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

แอนิเมชั่นโดย Femme Fatale

ความคิดสร้างสรรค์ไม่ จำกัด

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

ไซต์สามารถพึ่งพาแอนิเมชั่นได้มากจนการเดินทางผ่านหน้าต่างๆ เป็นประสบการณ์ที่แท้จริง ตัวอย่างเช่น ใช้ไซต์ใหม่สำหรับ Porsche ซึ่งแสดงประวัติของผู้ผลิตรถยนต์ตลอดหลายปีที่ผ่านมา

หรือรวบรวมภาพสามมิติและการเลื่อนแบบเคลื่อนไหว แล้วคุณจะได้ไซต์ที่น่าตื่นตาตื่นใจ เช่น RollPark

แอนิเมชั่นจาก Rollpark

เพิ่มประสิทธิภาพสำหรับมือถือเสมอ!

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

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

เครื่องมือที่จะช่วยให้คุณเคลื่อนไหวไซต์ของคุณ

นี่คือรายการลิงก์ไปยังบทความเชิงปฏิบัติสำหรับแอนิเมชั่นประเภทต่างๆ ที่คุณสามารถใช้ได้บนไซต์ของคุณ

• คอลเลกชันของไลบรารีแอนิเมชั่นฟรี
• ความสามารถของอนิเมชั่น DIVI Builder
• ผู้สร้างพื้นหลังอนุภาค
• สองวิธีในการสร้างพื้นหลังของอนุภาคอย่างง่ายด้วย CSS
• ใช้ SVG นิเมชั่น

สรุปแล้ว

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

เมื่อสร้างเว็บไซต์ต่อไปของคุณ (หรืออัปเดตเว็บไซต์ที่มีอยู่) คุณจะเพิ่มแอนิเมชั่นในการออกแบบหรือไม่? ข้อควรจำ: เป็นการดีที่สุดที่จะทดลองบนไซต์การแสดงละครหรือไซต์ในพื้นที่ ก่อนที่คุณจะเพิ่มโค้ดใหม่อย่างถาวรในไซต์ที่ใช้งานจริง!

คุณจะทดลองทำแอนิเมชั่นเว็บไซต์ประเภทใดต่อไป

สร้างแอนิเมชั่นของคุณเองด้วยบทช่วยสอนเหล่านี้!

• วิธีสร้างแอนิเมชั่น SVG ด้วย CSS
• วิธีใช้การเปลี่ยนและแปลง CSS3 เพื่อสร้างแอนิเมชั่น