วันนี้คุณไม่สามารถทำให้ทุกคนประหลาดใจด้วยแอนิเมชั่นในการออกแบบ แอนิเมชั่นบนเว็บไซต์ เป็นองค์ประกอบที่สำคัญ หน้าจอลิงก์ Microiterations ของหน้าต่างๆ เอฟเฟกต์อธิบายตัวเลือก ควบคู่ไปกับการกระทำของผู้ใช้ อินเทอร์เฟซแบบเคลื่อนไหวช่วยสร้างความคิดเห็นหรือเพียงแค่ดึงดูดความสนใจ
หลังจากอ่านบทความเกี่ยวกับแอนิเมชั่นมามากพอแล้ว ฉันพบว่าหากไม่พิจารณากรณีใดกรณีหนึ่ง คำแนะนำก็กว้างเกินไป ไม่มีแหล่งข้อมูลบนเว็บใดได้นำเสนอหลักการและกฎ UX อย่างชัดเจนสำหรับการใช้แอนิเมชั่นสำหรับเว็บไซต์
กำลังโหลดแอนิเมชั่น
ทุกวันนี้ อินเทอร์เน็ตความเร็วสูงทำให้คุณสามารถเปิดไซต์และแอปพลิเคชันได้ภายในไม่กี่วินาที แต่บางครั้ง อาจมีบางกรณีที่คุณต้องรอจนกว่าจะโหลดข้อมูลจำนวนมาก
เพื่อให้น่าสนใจยิ่งขึ้นสำหรับผู้เยี่ยมชมเว็บไซต์เพื่อรอให้การดาวน์โหลดเสร็จสิ้น คุณสามารถสร้างแอนิเมชั่นที่สวยงามได้
การนำทางและเมนู (ไม่เลื่อน)
เมนูแบบเลื่อนลงได้รับกระแสตอบรับที่สองในด้านแอนิเมชั่นในการออกแบบเว็บและกลายเป็นตัวเลือกยอดนิยมสำหรับแอปพลิเคชันมือถือ วิธีการนี้ไม่เพียงแต่เป็นวิธีที่ยอดเยี่ยมในการแปลเมนูหลักของเว็บไซต์เป็นอินเทอร์เฟซขนาดเล็กเท่านั้น แต่ยังเป็นวิธีเดียวที่มีเหตุผลและใช้งานได้จริงซึ่งครอบคลุมองค์ประกอบการนำทางทั้งหมด
เป็นแนวคิดที่ยอดเยี่ยมสำหรับขั้นตอนการออกแบบเว็บ . นอกจากนี้ยังเป็นโหมโรงของเทรนด์ใหญ่อีกอย่างหนึ่งด้วย เช่น การใช้ปุ่มเมนูแฮมเบอร์เกอร์ ถึงแม้ว่าเราจะไม่ชอบปุ่มเหล่านี้ก็ตาม
แกลเลอรีและสไลด์โชว์
เครื่องมือนี้ใช้งานอย่างแข็งขันเพื่อแสดงภาพในโหมดต่างๆ และผู้ใช้ไม่ต้องเสียสมาธิ
นักออกแบบตัดสินใจด้วยตัวเองเสมอว่าความเร็วนั้นเร็วแค่ไหน นอกจากนี้ เขายังตัดสินใจว่าจะมีรูปภาพกี่รูปในวงจรนี้ แต่สิ่งสำคัญคือต้องตัดสินใจด้วยวิธีที่เบาที่สุด แม้ว่าอัตราจะแตกต่างกันเล็กน้อย แต่ไซต์สามารถได้รับลูกศรจริงในงานของเขา และเป็นความคิดที่ไม่ดีสำหรับผู้ใช้
แกลเลอรีและสไลด์โชว์ใช้งานง่าย การแสดงการทำงานจริงของอัลบั้มรูปภาพด้วยวิธีที่เป็นธรรมชาติอย่างยิ่ง แต่ขอแนะนำว่าอย่าใช้คำอุปมามากนัก การรักษาสายตาคุณภาพสูงเป็นทางออกที่ดีที่สุด การออกแบบหน้าเว็บแบบเคลื่อนไหวจริงของตัวเลื่อนหรือแกลเลอรีควรย่อให้เล็กสุด ดังนั้นภาพแต่ละภาพจึงจะปรากฏเป็นเวลา 5-9 วินาที
ดึงดูดความสนใจ
แอนิเมชั่นเป็นเครื่องมือที่มีประสิทธิภาพในการดึงดูดความสนใจของผู้เข้าชมไปยังหน้า Landing Page หรือเว็บไซต์ ก่อนที่จะใช้เทคโนโลยีนี้กับทรัพยากรบนเว็บ นักการตลาดควรคำนึงถึงเป้าหมายการแปลง ความถี่ของแอนิเมชั่น และกลไกของผลกระทบต่อผู้ใช้ด้วย
การเลื่อน
วิธีการทำงานของแอนิเมชั่นประเภทนี้ค่อนข้างง่ายในด้านหนึ่งและซับซ้อนในอีกด้านหนึ่ง ขั้นตอนที่ง่ายกว่านั้นรวมถึงการรวบรวมจุดทางเทคนิคหลายจุดเป็นอันเดียว ความยากอยู่ที่ว่าทุกอย่างจะโต้ตอบกันอย่างไรเพื่อให้ผู้ใช้ได้รับความประทับใจจริง ๆ ว่าข้างหน้าเขามีวัตถุเดียวและได้รับการพัฒนามาอย่างดีพร้อมสำหรับการโต้ตอบ
แยกเนื้อหาประเภทหนึ่งออกจากอีกประเภทหนึ่ง ให้ผู้ใช้มีสมาธิในการแก้ปัญหาอย่างใดอย่างหนึ่ง:การอ่านคำอธิบาย การดูภาพ ความคิดเห็น ฯลฯ
การเคลื่อนที่ของหน้า
ด้วยความช่วยเหลือขององค์ประกอบนี้ ผู้ใช้สามารถเข้าใจความสัมพันธ์แบบลำดับชั้นระหว่างหน้าเว็บแบบเคลื่อนไหว วัตถุประสงค์ของพวกเขา ตัวอย่างเช่น บางบรรทัดของอ็อบเจ็กต์เคลื่อนไหวสามารถเก็บข้อมูลได้ ในขณะที่บางบรรทัดสามารถคลิกได้ และผู้ใช้เข้าใจสิ่งนี้อย่างสังหรณ์ใจแม้กระทั่งก่อนที่เขาจะเข้าใจสิ่งที่เขาเห็น
ภูมิหลัง
หากพื้นหลังที่มีแอนิเมชั่นถูกสร้างขึ้นอย่างถูกวิธี เว็บไซต์ก็จะมีชีวิตชีวาขึ้นมาได้อย่างเหมาะสม คำถามหลักคือต้องกลั่นกรอง ในแต่ละครั้งเป็นส่วนแต่ละส่วน ในบางกรณีต้องย้ายรูปภาพทั้งหมด
