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

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

จำยุคหมุน gifs 3D ที่หายไปนานได้ไหม?

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

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

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

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

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

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

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

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

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

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

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

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

ฟังก์ชั่นหรือสุนทรียศาสตร์

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

ภาพเคลื่อนไหวการทำงาน

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

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

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

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

โฉบ

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

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

เลื่อน

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

แอนิเมชั่นสุนทรียศาสตร์

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

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

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

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

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

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

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

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

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

ปรับให้เหมาะสมสำหรับมือถือเสมอ!

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

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

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

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

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

สรุปแล้ว

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

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

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