วิธีสร้างแอนิเมชั่นการโหลดแบบกำหนดเองเพื่อลดอัตราตีกลับ

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

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

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

ในบทช่วยสอนนี้ เราจะใช้ Sketch เพื่อสร้างรูปร่างพื้นฐานและหลักการเพื่อสร้างแอนิเมชั่นการโหลดแบบกำหนดเองอย่างง่ายอย่างรวดเร็ว (แอปทั้งสองนี้มีไว้สำหรับ Mac) คุณจะได้เรียนรู้วิธีสร้างภาพเคลื่อนไหวการโหลดที่มีสีสันที่ใช้โดย Trello, Flickr, Slack และอื่นๆ

ไปกันเถอะ

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

ใน Sketch ให้ลากเส้นสี่เหลี่ยมมนสี่อันที่มีด้าน 50px หรือแต่ละรัศมี 100px พวกเขาควรจะดูเหมือนวงกลมที่สมบูรณ์แบบ แต่เรากำลังใช้สี่เหลี่ยมที่มีมุมโค้งมนเพื่อสร้างเอฟเฟกต์การยืดเส้นในแอนิเมชั่น

วางรูปร่างทั้งสี่ในลักษณะเพื่อสร้างสี่เหลี่ยมจตุรัสจินตภาพที่มีช่องว่าง 150px ระหว่างแต่ละด้าน ใช้สี่สีที่ต่างกัน (#35BA90 สีเขียว #69CADD สีน้ำเงิน #EBA900 สีเหลือง และ #E20661 สีชมพู)

นำเข้ารูปร่างไปยังหลักการ จัดกลุ่ม แล้วคลิก "สร้างส่วนประกอบ" เพื่อซ้อนกลุ่ม

เข้าไปในกลุ่มที่ซ้อนกันแล้วหมุนอาร์ตบอร์ด 15 องศา จากนั้นเลือกวงกลมแต่ละวงแล้วหมุนกลับไปที่ตำแหน่งเดิม (ย้อนกลับ 15 องศา) สิ่งนี้จะสร้างเอฟเฟกต์การยืดเป็นเส้นตรง

ใช้ทริกเกอร์ "อัตโนมัติ" กับอาร์ตบอร์ด จากนั้นยืดสี่เหลี่ยมผืนผ้าโค้งมนแต่ละอันไปทางด้านตรงข้ามของอาร์ตบอร์ดให้มีความยาว 295px เพิ่มความทึบ 75% ให้กับแต่ละรูปร่างบนอาร์ตบอร์ดทั้งสอง

ใช้ทริกเกอร์ "อัตโนมัติ" อื่นกับอาร์ตบอร์ดที่สอง บนอาร์ตบอร์ดใหม่ ให้ลดแต่ละบรรทัดให้มีความกว้าง 50px เดิม แต่ให้อยู่ฝั่งตรงข้ามจากตำแหน่งเดิม

เชื่อมโยงอาร์ตบอร์ดสุดท้ายกับอาร์ตบอร์ดแรกด้วยทริกเกอร์ "อัตโนมัติ" คลิกปุ่ม "กลับไปที่ผู้ปกครอง" เพื่อดูตัวอย่างผลลัพธ์สุดท้าย

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

Trello กำลังโหลดแอนิเมชั่น

ใช้ Sketch ติดตามสี่เหลี่ยมสีน้ำเงิน 100px วาดรูปสี่เหลี่ยมผืนผ้าสีขาวกว้าง 60px สูง 140px จัดชิดขอบซ้ายบนของสี่เหลี่ยมก่อนหน้าโดยมีระยะขอบด้านบนและด้านซ้าย 30px ทำซ้ำสี่เหลี่ยมสีขาวนั้น จัดชิดด้านขวาของสี่เหลี่ยมจัตุรัสด้วยระยะขอบขวา 30px และลดความสูงเป็น 70px

นำเข้าอาร์ตบอร์ดไปที่หลักการ และใช้ทริกเกอร์ "อัตโนมัติ" เพื่อสร้างคีย์เฟรมใหม่ บนอาร์ตบอร์ดใหม่ ให้ย้อนความสูงของสี่เหลี่ยมผืนผ้าสีขาว (ทำให้สี่เหลี่ยมผืนผ้าด้านซ้ายสูง 70px และสี่เหลี่ยมผืนผ้าด้านขวา 140px) ใช้เอฟเฟกต์ "Ease-Both" ในแผง "Animate" เพื่อให้การเปลี่ยนแปลงราบรื่นขึ้น

โรลลิ่งเซอร์เคิล

ติดตามวงกลมบน Sketch ใช้เส้นขอบ 10px ด้วยค่า "Dash" และ "Gap" และไม่มีการเติม ใช้สี "การไล่ระดับสีเชิงมุม" สำหรับเส้นขอบที่จะเน้นเอฟเฟกต์การหมุนที่คุณจะสร้างขึ้นในภายหลัง

เปิดไฟล์หลักการใหม่และใช้ปุ่ม "นำเข้า" เพื่อโอนวงกลมจาก Sketch ใช้ทริกเกอร์ "อัตโนมัติ" สองตัวติดต่อกัน

ในการสร้างเอฟเฟกต์การหมุน ให้เลือกวงกลมในอาร์ตบอร์ดตรงกลางแล้วเปลี่ยนค่า "มุม" เป็น 360 องศา จากนั้นเลือกวงกลมที่สามและตั้งชื่ออื่น (เช่น "คัดลอก") ภายในแผงด้านซ้าย สิ่งนี้จะปลอมแปลงการหมุนที่ไม่มีที่สิ้นสุด

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

Flickr กำลังโหลดแอนิเมชั่น

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

กลับตำแหน่งของวงกลมและใช้ทริกเกอร์ "อัตโนมัติ" ใหม่เพื่อสร้างอาร์ตบอร์ดที่สาม บนอาร์ตบอร์ดใหม่นั้น ให้กลับลำดับของเลเยอร์ของแวดวงที่แผงด้านซ้าย

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

กำลังโหลดประเภท

สร้างโครงการใหม่บนหลักการ และใช้เครื่องมือข้อความ เขียนว่า "กำลังโหลด" จัดข้อความชิดซ้ายและจัดกึ่งกลางในแนวตั้งในอาร์ตบอร์ด

ใช้ทริกเกอร์ "อัตโนมัติ" ห้าครั้งติดต่อกัน ให้ทริกเกอร์ที่ห้าจากลูปอาร์ตบอร์ดสุดท้ายกลับไปที่อาร์ตบอร์ดเริ่มต้น

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

กำลังโหลด กำลังโหลด กำลังโหลด.. กำลังโหลด... กำลังโหลด.. กำลังโหลด

ตอนนี้คุณสามารถดูตัวอย่างภาพเคลื่อนไหวที่คุณเพิ่งสร้างขึ้นได้

จุดเร้าใจ

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

ใช้ทริกเกอร์ "อัตโนมัติ" สี่ครั้งติดต่อกัน

บนอาร์ตบอร์ดที่สอง ลดจุดที่สองเป็น 30px

บนอาร์ตบอร์ดที่สาม ลดจุดที่สองเป็น 0px และจุดแรกเหลือ 30px

บนอาร์ตบอร์ดที่สี่ ให้ปรับขนาดจุดที่สองกลับเป็น 30px และลดจุดแรกลงเหลือ 0px

บนอาร์ตบอร์ดที่ห้า ให้ย่อขนาดจุดแรกลงเหลือ 30px และเชื่อมโยงอาร์ตบอร์ดกลับไปที่บอร์ดแรกด้วยทริกเกอร์ "อัตโนมัติ"

จุดกลิ้ง

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

ใช้ทริกเกอร์ "อัตโนมัติ" บนอาร์ตบอร์ด

บนอาร์ตบอร์ดใหม่ ให้หมุนกลุ่มจุด 360 องศา

เชื่อมโยงอาร์ตบอร์ดที่สองกลับไปที่อาร์ตเวิร์กแรกด้วยทริกเกอร์ "อัตโนมัติ"

วงกลมเร้าใจ

เริ่มต้นด้วยวงกลม 50px จัดกึ่งกลางภายในวงกลม 150px ที่มีเส้นขอบ 5px แต่ไม่มีสีเติม

ใช้ทริกเกอร์ "อัตโนมัติ" สามครั้งติดต่อกัน

บนอาร์ตบอร์ดแรก ให้ย่อขนาดวงกลมเส้นลงเหลือ 50px และวงในเหลือ 10px

บนอาร์ตบอร์ดที่สาม ปรับขนาดวงกลมเส้นได้ถึง 200px และให้ความทึบ 0% ปรับขนาดวงในสูงสุด 150px และให้ความทึบ 50%

บนอาร์ตบอร์ดสุดท้าย ปรับขนาดวงในสูงสุด 200px และให้ความทึบ 0% ปรับขนาดวงกลมเส้นให้เหลือ 50px และให้ความทึบ 25%

ใช้ทริกเกอร์ "อัตโนมัติ" กับอาร์ตบอร์ดสุดท้าย ลดขนาดวงกลมในเป็น 10px โดยมีความทึบ 50%

เชื่อมโยงอาร์ตบอร์ดสุดท้ายกับอาร์ตบอร์ดแรกด้วยทริกเกอร์ "อัตโนมัติ"

จุดกระโดด

จัดเรียงวงกลมที่สมบูรณ์แบบสามวงที่มีความสูง 50px โดยมีระยะห่างระหว่างวงกลม 50px

ใช้ทริกเกอร์ "อัตโนมัติ" บนอาร์ตบอร์ดที่สอง ย้ายวงกลมแรกขึ้น 50px

ใช้ทริกเกอร์ "อัตโนมัติ" กับกระดานที่สอง บนอาร์ตบอร์ดที่สาม เลือกวงกลมสองวงแรกแล้วเลื่อนขึ้น 50px วงกลมสามวงควรอยู่ในแนวทแยง

ใช้ทริกเกอร์ "อัตโนมัติ" กับกระดานที่สาม บนอาร์ตบอร์ดที่สี่ ย้ายวงกลมแรกลง 50px เลือกวงกลมสองวงสุดท้ายแล้วเลื่อนขึ้น 50px

ใช้ทริกเกอร์ "อัตโนมัติ" บนกระดานที่สี่ บนอาร์ตบอร์ดที่ 5 ให้ย้ายวงกลมสองวงแรกลงมา 50px ลง เลือกวงกลมสุดท้ายแล้วเลื่อนขึ้น 50px

ใช้ทริกเกอร์ "อัตโนมัติ" บนกระดานที่ห้า บนอาร์ตบอร์ดที่หก ย้ายวงกลมสองวงสุดท้ายลง 50px

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

Classic Loader

ติดตามวงกลมใน Sketch และกำหนดเส้นขอบสีเทาขนาด 20px โดยไม่มีการเติม

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

ลากเส้นสี่เหลี่ยมที่ทับซ้อนกันหนึ่งในสี่ของวงกลมสีน้ำเงิน ย้ายเลเยอร์สี่เหลี่ยมผืนผ้าด้านล่างเลเยอร์วงกลม และใช้ "Mask" กับเลเยอร์สี่เหลี่ยมผืนผ้า

ย้ายไปที่หลักการและนำเข้างานศิลป์ของ Sketch ด้วยปุ่ม "นำเข้า"

ใช้ทริกเกอร์ "อัตโนมัติ" กับอาร์ตบอร์ดแรกแล้วหมุนวงกลมสีน้ำเงิน 360 องศา

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

บทสรุป

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

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

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง