คู่มือการออกแบบเว็บแอนิเมชั่นฉบับสมบูรณ์

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

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

ตกลงบางคนก็จะจากไป แต่คนอื่นอาจเลือกที่จะอยู่

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

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

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

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

ปรากฎว่าทุกอย่างเริ่มต้นด้วยนักออกแบบเว็บไซต์ ตามความเป็นจริงการศึกษาที่สำรวจอย่างกว้างขวางเกี่ยวกับความคิดเห็นของผู้บริโภคในวงกว้างนั้นเป็นที่ยอมรับว่า 94% ของค่าลบ มีการออกแบบที่เกี่ยวข้อง

นี้หมายความว่าอย่างไร

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

ฉันกำลังพูดถึงสิ่งต่าง ๆ เช่นภาพเคลื่อนไหวบนเว็บ

และทำไมเราจึงแนะนำอย่างนั้น?

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

พื้นฐานของภาพเคลื่อนไหวบนเว็บ

รูปภาพตัวการ์ตูนที่คุณชื่นชอบเดินเล่นผ่านหน้าจอ หรือบางทีโลโก้ของโทรศัพท์ของคุณจะเต้นไปรอบ ๆ หน้าจอเมื่อคุณรีสตาร์ทอุปกรณ์ พวกเขามีอะไรที่เหมือนกัน?

พวกมันเป็นตัวอย่างพื้นฐานของภาพเคลื่อนไหว

แอนิเมชันเป็นหลักเกิดขึ้นเมื่อองค์ประกอบนิ่ง“ นำมาสู่ชีวิต” จากนั้นเริ่มแสดงรูปแบบการเคลื่อนไหวบางอย่าง

เราไม่รู้แน่ชัดว่าการฝึกนี้เริ่มเมื่อไหร่ แต่เรามีความคิดว่า ภาพยนตร์การ์ตูนเรื่องแรก ในประวัติศาสตร์สร้างมานานกว่าศตวรรษที่แล้ว แนวโน้มมีการพัฒนาอย่างกว้างขวางตั้งแต่นั้นมาขอบคุณความก้าวหน้าก้าวหน้าในเทคโนโลยี

อย่างไรก็ตามสิ่งหนึ่งที่ยังคงอยู่ - หลักการของการเคลื่อนไหว อันที่จริงแล้วโอลลีจอห์นสตันของดิสนีย์และแฟรงค์โธมัสเขียนเกี่ยวกับพวกเขาในหนังสือของพวกเขาในภายหลังว่า“ภาพลวงตาแห่งชีวิต: Disney Animation" นี่คือรายการที่สมบูรณ์:

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

สิบสองยังคงให้กรอบสำหรับการออกแบบของภาพเคลื่อนไหววันนี้รวมถึงคนที่เผยแพร่บนเว็บเป็นวิดีโอ, WebGL, SVG, CSS และ GIF

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

และนั่นทำให้เกิดคำถาม - คุณควรใช้แอนิเมชันเมื่อใด

คุณควรใช้ภาพเคลื่อนไหวบนเว็บเมื่อใด

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

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

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

ดังนั้นเมื่อใดที่คุณควรใช้ประโยชน์จากพวกเขา

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

ได้อย่างไร

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

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

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

เครื่องมือสร้างภาพเคลื่อนไหวบนเว็บ

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

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

ที่กล่าวว่านี่คือตัวอย่างที่โดดเด่นบางอย่างมีกรณีการใช้งานที่ไม่ซ้ำกัน:

  • js
  • ภาพเคลื่อนไหว 3D Lines พร้อม Three.js
  • js
  • Flubber
  • ภาพเคลื่อนไหวสี
  • jqClouds
  • Scrollissimo
  • Cel ภาพเคลื่อนไหว
  • js
  • js
  • ภาพเคลื่อนไหว CSS3
  • Transform เมื่อ
  • js
  • รีแลกซ์
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • ผู้ถือสุนัขจิ้งจอก
  • แอนิเมชั่นโล
  • CSS
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • สไตลี่
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • วิญญาณ
  • หวด
  • MixItUp
  • CSS
  • CSS
  • js
  • เชเซอร์
  • CSSsynth
  • สีเหลือง
  • CSShake
  • CSS
  • js
  • จรวด
  • การขนส่ง
  • CSS
  • js
  • Popmotion
  • GSAP โดย GreenSock
  • js
  • js
  • ภาพเคลื่อนไหว CSS
  • มันคือวันอังคาร
  • มีเล่ห์เหลี่ยม
  • js
  • js
  • js
  • js
  • js
  • รอ! เคลื่อนไหว
  • Motion UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • AnijS
  • js
  • ภาพเคลื่อนไหวมายากล
  • CSS

การออกแบบภาพเคลื่อนไหวบนเว็บ

ผลกระทบเลื่อน

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

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

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

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

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

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

แอนิเมชันสไตล์ GIF

GIF มีค่าควรพิจารณาหากคุณสนใจเป็นพิเศษกับภาพเคลื่อนไหวที่ติดตั้งง่ายเป็นพิเศษ ตัวอย่างทั่วไปอาจเป็นสิ่งที่เปลี่ยนข้อความหรือตัวตลกยิ้มที่ฝังอยู่ภายในเค้าโครงเนื้อหาของคุณ

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

ภาพเคลื่อนไหวเฉพาะกาล

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

เครดิตภาพ: Shutterstock

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

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

ความจริงคือ - 47% ของผู้บริโภคออนไลน์ คาดหวังให้หน้าเว็บของคุณโหลดอย่างน้อย 2 วินาที หากคุณไม่สามารถทำสิ่งนี้ได้ทุก ๆ วินาทีที่ผ่านมาจะแปลงให้น้อยลง 7%

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

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

ภาพเคลื่อนไหวแบบทริกเกอร์แบบเลื่อน

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

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

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

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

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

คลังภาพและสไลด์โชว์

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

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

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

สรุป

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

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

มารยาทภาพส่วนหัวของ Alfrey Davilla | วาเนลเทีย

บ็อกดานแรนเซีย

บ็อกแดนเป็นสมาชิกผู้ก่อตั้งของนิตยสาร Inspired Mag ซึ่งสะสมประสบการณ์เกือบ 6 ปีในช่วงเวลานี้ ในเวลาว่างเขาชอบเรียนดนตรีคลาสสิกและสำรวจทัศนศิลป์ เขาค่อนข้างหมกมุ่นอยู่กับ fixies เช่นกัน เขาเป็นเจ้าของ 5 คนแล้ว