วันนี้คุณไม่สามารถทำให้ใครหลงใหลด้วยแอนิเมชันในดีไซน์ได้แล้ว แอนิเมชันบนเว็บไซต์ เป็นส่วนประกอบที่สำคัญ ไมโครอินเทอร์เรกชันเชื่อมโยงหน้าจอของเพจต่างๆ เอฟเฟกต์อธิบายตัวเลือก ตามไปกับการกระทำของผู้ใช้ อินเทอร์เฟซที่มีแอนิเมชันช่วยสร้างฟีดแบ็กหรือเพียงดึงดูดความสนใจ
หลังจากอ่านบทความเกี่ยวกับแอนิเมชันเพียงพอ ฉันพบว่าหากไม่พิจารณากรณีเฉพาะ คำแนะนำจะเป็นไปทั่วไปเกินไป ไม่มีเว็บไซต์ไหนนำเสนอหลักการและกฎ UX สำหรับการใช้แอนิเมชันบนเว็บไซต์อย่างชัดเจน
แอนิเมชันการโหลด (Loading Animations)
ในปัจจุบัน อินเทอร์เน็ตความเร็วสูงช่วยให้คุณเปิดเว็บไซต์และแอปพลิเคชันได้ในไม่กี่วินาที แต่บางครั้งก็มีกรณีที่คุณต้องรอจนกว่าข้อมูลจำนวนมากจะโหลดเสร็จ
เพื่อให้ผู้เยี่ยมชมเว็บไซต์สนุกสนานขณะรอการดาวน์โหลดเสร็จ คุณสามารถสร้างแอนิเมชันที่น่าสนใจได้
การนำทางและเมนู (Non Scrolling)
เมนูแบบดรอปดาวน์ได้รับชีวิตใหม่ในแอนิเมชันของเว็บดีไซน์และดุจดอกไม้ที่บานในฐานะตัวเลือกยอดนิยมสำหรับแอปพลิเคชันมือถือ แนวทางนี้ไม่ได้เป็นเพียงโซลูชันที่ยอดเยี่ยมในการแปลงเมนูหลักของเว็บไซต์ให้กลายเป็นอินเทอร์เฟซขนาดเล็ก แต่เป็นวิธีเดียวที่สมเหตุสมผลและปฏิบัติจริงได้ซึ่งครอบคลุมองค์ประกอบการนำทางทั้งหมด
นี่เป็นความคิดที่ยอดเยี่ยมสำหรับ ขั้นตอนการออกแบบเว็บ มันยังเป็นการเป็นตัวนำไปสู่เทรนด์อีกอย่างใหญ่โต คือการใช้ปุ่มแฮมเบอร์เกอร์เมนู แม้เราจะไม่ชอบมันก็ตาม
แกลเลอรี่และสไลด์โชว์ (Galleries and Slideshows)
เครื่องมือนี้ถูกใช้งานอย่างต่อเนื่องเพื่อแสดงภาพในหลายโหมด และไม่จำเป็นต้องเบี่ยงเบนความสนใจของผู้ใช้
นักออกแบบจะตัดสินใจเองว่าความเร็วควรเป็นเท่าไหร่ และตัดสินใจว่ามีภาพกี่ภาพในวงจร แต่สำคัญคือต้องตัดสินใจในวิธีที่เบาเบาที่สุด แม้อัตราจะต่างออกไปนิดหน่อย เว็บไซต์ก็อาจได้รับลูกศรจริงในงานของมัน และเป็นความคิดที่ไม่ดีสำหรับผู้ใช้
แกลเลอรี่และสไลด์โชว์ใช้งานง่าย ในวิธีที่เป็นธรรมชาติมาก พวกมันแสดงฟังก์ชันการทำงานจริงของอัลบั้มรูปภาพ แต่ควรหลีกเลี่ยงการใช้เมทาฟอร์มากเกินไป การดูแลรูปภาพคุณภาพสูงคือโซลูชันที่ดีที่สุด แอนิเมชันเว็บเพจจริงของสไลเดอร์หรือแกลเลอรี่ควรลดให้น้อยที่สุด เพื่อผลลัพธ์ว่าแต่ละภาพจะถูกมองเห็นเป็นเวลา 5-9 วินาที
ดึงดูดความสนใจ (Attracting attention)
แอนิเมชันเป็นเครื่องมืออันทรงพลังสำหรับดึงดูดความสนใจของผู้เยี่ยมชมไปยังหน้าลैंडดิ้งเพจหรือเว็บไซต์ ก่อนที่จะนำเทคโนโลยีนี้ไปใช้กับทรัพยากรเว็บ นักการตลาดควรคำนึงถึงเป้าหมายการแปลง (conversion goal) ความถี่ของแอนิเมชัน และกลไกของผลกระทบต่อผู้ใช้
การเลื่อน (Scrolling)
วิธีที่แอนิเมชันประเภทนี้ทำงานค่อนข้างง่ายในมุมหนึ่ง และซับซ้อนในอีกมุมหนึ่ง ขั้นตอนที่ง่ายกว่ารวมถึงการรวบรวมจุดเทคนิคหลายจุดให้เป็นหนึ่งเดียว ความยากอยู่ที่ว่าทุกอย่างจะมีปฏิสัมพันธ์กันอย่างไรจึงจะทำให้ผู้ใช้รู้สึกจริงๆ ว่ามีวัตถุเดียวที่พัฒนาอย่างดีอยู่หน้าตา พร้อมสำหรับการปฏิสัมพันธ์
แยกประเภทเนื้อหาหนึ่งออกจากอีกประเภทหนึ่ง อนุญาตให้ผู้ใช้ tập trungแก้ปัญหาเฉพาะเจาะจง: การอ่านคำอธิบาย การดูรูปภาพ ความคิดเห็น ฯลฯ
การเคลื่อนไหวของหน้า (Page Motion)
ด้วยความช่วยเหลือขององค์ประกอบนี้ ผู้ใช้สามารถเข้าใจความสัมพันธ์แบบลำดับชั้นระหว่างหน้าเว็บที่มีแอนิเมชัน วัตถุประสงค์ของพวกมัน ตัวอย่างเช่น บางบรรทัดของวัตถุที่มีแอนิเมชันอาจบรรจุข้อมูล ในขณะที่อีกบางบรรทัดอาจเป็นปุ่มที่คลิกได้ และผู้ใช้เข้าใจเรื่องนี้โดย直覺 ก่อนที่จะเข้าใจว่ามันเห็นอะไร
พื้นหลัง (Backgrounds)
หากพื้นหลังที่มีแอนิเมชันถูกสร้างอย่างถูกต้อง เว็บไซต์ก็จะได้รับความมีชีวิตชีวาอย่างถูกต้อง คำถามหลักในที่นี้คือการทำให้เหมาะสม (moderation) ในบางครั้งเป็นส่วนต่างๆ แยกกัน ในบางกรณีภาพทั้งหมดต้องถูกย้าย
